/* ブラックホール展示の和紙の短冊と同じ意匠。 */
#lab-tanzaku {
  /* 紙と卓 */
  --desk:        #d7c3a0;
  --desk-deep:   #c0a87f;
  --paper:       #fbf5e8;
  --paper-warm:  #fdf7e7;
  --paper-cool:  #f1e7d2;
  --paper-edge:  #e6d8bb;
  /* 墨 */
  --ink:         #2a211a;
  --ink-2:       #6b5a49;
  --ink-3:       #a28f77;   /* 装飾線専用(本文には使わない) */
  /* 差し色 */
  --shoyu:       #b0631d;
  --shoyu-deep:  #8a4a14;
  --tape:        #e0c78d;

  --f-display: 'Kiwi Maru', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --f-body:    'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', 'Yu Gothic', sans-serif;
  --f-latin:   'Fraunces', 'Iowan Old Style', Georgia, serif;
  --f-mono:    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --soft:   cubic-bezier(.22,.61,.36,1);

  /* 紙の粒子(トップの .grain と同じ版) */
  --washi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 手描きの罫の版下置き場(トップと同じ #i-rule / #i-rule2) */
.ns-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ───────── 和紙の短冊(戻り道 + 素朴な一行) ─────────
   デモは全画面のまま。その上に紙を一枚、テープで貼ってある体。 */
#lab-tanzaku {
  position: fixed;
  top: 15px;
  left: 18px;
  z-index: 95;          /* #nogpu(90)より上 = フォールバック時も戻り道が残る */
  width: max-content;
  max-width: calc(100vw - 22px);
  padding: 9px 15px 11px;
  color: var(--ink);
  background:
    radial-gradient(120% 60% at 14% 0%, var(--paper-warm), rgba(255,255,255,0) 62%),
    linear-gradient(172deg, var(--paper) 0%, var(--paper-cool) 100%);
  /* 手で切った紙の角(四隅すべて違う) */
  border-radius: 8px 13px 6px 11px / 12px 7px 14px 9px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.55),
    inset 0 -16px 24px -22px rgba(120,90,45,.5),
    0 2px 5px rgba(4,6,11,.55),
    0 18px 30px -18px rgba(4,6,11,.8);
  transform: rotate(-.5deg);
  animation: tz-in .8s .12s var(--soft) backwards;
}
@keyframes tz-in {
  from { opacity: 0; transform: translateY(-10px) rotate(-.5deg); }
  to   { opacity: 1; transform: rotate(-.5deg); }
}
/* 紙の粒子。全画面に敷くと canvas まで濁るので、短冊の中だけに敷く
   (z-index を持たせてあるので multiply は短冊の中で閉じる) */
#lab-tanzaku::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: .13; mix-blend-mode: multiply;
  background-image: var(--washi);
}
/* マスキングテープ(トップの .tape と同じ版) */
#lab-tanzaku .tape {
  position: absolute; top: -10px; left: 24px;
  width: 66px; height: 20px;
  background:
    repeating-linear-gradient(102deg, rgba(255,255,255,.28) 0 3px, rgba(255,255,255,0) 3px 8px),
    linear-gradient(178deg, rgba(224,199,141,.92), rgba(203,175,113,.88));
  clip-path: polygon(3% 10%, 97% 0%, 100% 90%, 1% 100%);
  transform: rotate(-6deg);
  box-shadow: 0 1px 2px rgba(4,6,11,.45);
  pointer-events: none;
}
#lab-tanzaku :focus-visible {
  outline: 3px dashed var(--shoyu);
  outline-offset: 4px;
  border-radius: 3px;
}

/* パンくず(ねぎしょーゆ / 実験室 / いまここ) */
#lab-nav {
  font: 11.5px/1.7 var(--f-mono);
  letter-spacing: .05em;
  color: var(--ink-2);
  white-space: nowrap;
}
#lab-nav a {
  color: var(--shoyu-deep);
  text-decoration: none;
  border-bottom: 1px solid rgba(138,74,20,.35);
  padding-bottom: 1px;
}
#lab-nav a:hover,
#lab-nav a:focus-visible { color: var(--shoyu); border-bottom-color: var(--shoyu); }
#lab-nav .sep { padding: 0 .5em; color: var(--ink-3); }
/* いまいる作品名だけ書体を替える(棚の札の見出しと同じ Kiwi Maru) */
#lab-nav .here {
  font-family: var(--f-display);
  font-size: 13.5px; letter-spacing: .04em;
  color: var(--ink);
}
#tz-note {
  margin: 2px 0 0;
  font: 12px/1.7 var(--f-body);
  color: var(--ink-2);
  white-space: nowrap;
}
/* X への導線(KPI=フォロワー増・発注者裁定 2026-09-02)。短冊の下段に小さく。
   ブランドアイコン添え=印象づけ試行(雰囲気次第でリバート可・同日裁定) */
#tz-x {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 0;
  font: 11.5px/1.6 var(--f-latin, monospace);
  letter-spacing: .05em;
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
/* アイコン寸法。**既定 34px(発注者裁定 2026-09-02「Twitter は 34 にします」)**。
   検分用に ?icon=NN(12〜48)で差し替えられる(shell.js)。初版 18px は小さいとの裁定 */
html { --tz-icon: 34px; }
#tz-x img { width: var(--tz-icon); height: var(--tz-icon); display: block; }
#tz-x:hover, #tz-x:focus-visible { color: var(--ink); }


#lab-nav .here { display: inline; margin: 0; font-weight: 400; }
@media (max-width: 560px) {
  #lab-tanzaku { top: 11px; left: 11px; padding: 8px 12px 10px; }
  #lab-nav { font-size: 11px; }
  #lab-nav .here { font-size: 12.5px; }
}
@media (max-width: 340px) { #lab-nav { white-space: normal; } }
@media (prefers-reduced-motion: reduce) {
  #lab-tanzaku, #lab-tanzaku * { animation: none !important; transition: none !important; }
}