:root{
  /* ハウススタイルのコード面を全面へ昇格させた「暖かい黒」。GitHub風の青黒(#0d1117系)は使わない */
  --bg:#12100c; --surface:#1a1712; --surface-2:#221d16; --sunken:#0d0b08;
  --ink:#ece3d2; --ink-soft:#b3a894; --ink-faint:#7c7362;
  --line:#2e2820; --line-soft:#231e18;
  --accent:#e0a63f; --accent-ink:#f2c477; --accent-dim:rgba(224,166,63,.13);
  --teal:#5cbdaa;
  --radius:12px; --maxw:1000px;
  --font-jp:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic",system-ui,sans-serif;
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,"Noto Sans Mono",monospace;
  --depth:460px; --lift:40px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-jp);
  line-height:1.85;font-size:16px;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
a{color:var(--accent);text-underline-offset:3px}
a:hover{color:var(--accent-ink)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---------- ヒーロー: 通電する制作ライン ---------- */
header.top{position:relative;overflow:hidden;padding:88px 0 54px;
  border-bottom:1px solid var(--line);background:var(--sunken)}
/* 方眼の薄い下地。装飾ではなく「図面の紙」 */
header.top::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(0deg,rgba(236,227,210,.035) 0 1px,transparent 1px 44px),
                   repeating-linear-gradient(90deg,rgba(236,227,210,.035) 0 1px,transparent 1px 44px);
  mask-image:radial-gradient(120% 90% at 50% 25%,rgba(0,0,0,.9),transparent 78%)}
header.top .wrap{position:relative;z-index:1}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.22em;color:var(--ink-faint);margin:0 0 18px}
h1{font-size:clamp(30px,5.6vw,52px);line-height:1.24;margin:0 0 18px;letter-spacing:-.02em;font-weight:800}
.lede{font-size:clamp(15px,2.1vw,18px);color:var(--ink-soft);margin:0;max-width:32em}

/* 配線図 */
.diagram{margin:40px 0 0;width:100%;overflow:visible}
.diagram .rail{stroke:var(--line);stroke-width:1.5;fill:none}
.diagram .flow{stroke:var(--accent);stroke-width:1.5;fill:none;opacity:.85;
  stroke-dasharray:5 15;stroke-linecap:round}
.diagram .node{fill:var(--sunken);stroke:var(--accent);stroke-width:1.5}
.diagram .core{fill:var(--accent)}
.diagram .nid{fill:var(--ink-faint);font-family:var(--mono);font-size:11px;letter-spacing:.14em}
.diagram .nlb{fill:var(--ink-soft);font-size:12.5px}

/* 実測値の帯 */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;
  background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat{background:var(--bg);padding:22px 22px 20px}
.stat b{display:block;font-family:var(--mono);font-size:clamp(19px,2.6vw,25px);
  font-weight:600;color:var(--accent-ink);letter-spacing:-.01em;line-height:1.3}
.stat b i{font-style:normal;font-size:.6em;color:var(--ink-soft);margin-left:3px}
.stat span{display:block;margin-top:7px;font-size:12.5px;color:var(--ink-faint);line-height:1.6}

/* ---------- ラック: 道具は制作ラインに刺さっている ---------- */
main{padding:0 0 10px}
nav.jump{display:flex;flex-wrap:wrap;gap:8px 20px;padding:30px 0 0;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.06em}
nav.jump a{color:var(--ink-faint);text-decoration:none;border-bottom:1px solid var(--line)}
nav.jump a:hover{color:var(--accent);border-bottom-color:var(--accent)}

section.group{padding:56px 0 0}
.ghead{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:0 0 6px}
h2{font-size:19px;margin:0;letter-spacing:-.005em;font-weight:700}
.gcount{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;color:var(--ink-faint)}
.rack{position:relative;margin:22px 0 0;padding-left:30px}
.rack .spine{position:absolute;left:5px;top:6px;bottom:6px;width:1px;background:var(--line)}
.rack .spine::after{content:"";position:absolute;left:0;top:0;width:1px;height:var(--fill,0%);
  background:var(--accent);opacity:.65}

.unit{position:relative;display:grid;grid-template-columns:1fr auto;gap:8px 24px;align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 22px;margin:0 0 12px}
.unit::before{content:"";position:absolute;left:-25px;top:50%;width:24px;height:1px;background:var(--line)}
.unit::after{content:"";position:absolute;left:-29px;top:50%;margin-top:-3px;width:7px;height:7px;
  border-radius:50%;background:var(--sunken);border:1px solid var(--line)}
.unit.on::after{border-color:var(--accent);background:var(--accent)}
.unit.on{border-color:#3a3125}
.unit.off{background:transparent;border-style:dashed;border-color:var(--line-soft)}
.unit .name{margin:0;font-size:17.5px;font-weight:700;letter-spacing:-.005em}
.unit .name a{color:var(--ink);text-decoration:none}
.unit .name a:hover{color:var(--accent-ink)}
.unit .id{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--ink-faint);
  display:block;margin:0 0 5px}
.unit .tag{grid-column:1;margin:4px 0 0;color:var(--ink-soft);font-size:14.5px}
.unit.off .name{color:var(--ink-soft)}
.unit.off .tag{color:var(--ink-faint)}
.unit .side{grid-column:2;grid-row:1 / span 2;display:flex;flex-direction:column;align-items:flex-end;gap:7px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.08em}
.unit .go{color:var(--ink-faint);font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
  text-decoration:none;white-space:nowrap}
.unit:hover .go{color:var(--accent)}

.led{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;color:var(--accent-ink)}
.led::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.led.free{color:var(--teal)}
.led.free::before{background:var(--teal)}
.led.wait{color:var(--ink-faint)}
.led.wait::before{background:transparent;border:1px solid var(--ink-faint)}
.alt{color:var(--ink-soft);white-space:nowrap}

/* カテゴリ挿絵（暖黒×琥珀の線画。背景と地続きに見せる） */
.gart{margin:18px 0 4px;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;background:var(--sunken)}
.gart img{display:block;width:100%;height:150px;object-fit:cover;opacity:.92}

/* 受け取り方の3レーン */
.lanes{margin:20px 0 6px}

/* ---------- 受け取り口 ---------- */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.panel p{margin:0 0 14px;color:var(--ink-soft)}
.panel p:last-child{margin-bottom:0}
.closing{margin:62px 0 0}
.btn{display:inline-block;background:var(--accent);color:#17130c;text-decoration:none;
  padding:13px 24px;border-radius:9px;font-weight:700;font-size:14.5px;letter-spacing:.02em}
.btn:hover{background:var(--accent-ink);color:#17130c}
.btn.ghost{background:transparent;color:var(--accent);border:1px solid #4a3d28}
.btn.ghost:hover{background:var(--accent-dim);color:var(--accent-ink)}

/* ---------- 道具LP ---------- */
article.lp{padding:64px 0 0;max-width:720px}
.crumb{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:var(--ink-faint);margin:0 0 24px}
.crumb a{color:var(--ink-faint);text-decoration:none}
.crumb a:hover{color:var(--accent)}
.lp .meta{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin:0 0 24px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.08em}
.lp .sub{font-size:18px;color:var(--ink-soft);margin:0 0 26px}
.lp h2{margin:44px 0 14px;padding-top:28px;border-top:1px solid var(--line);font-size:16px}
.lp ul{margin:0;padding-left:0;list-style:none}
.lp li{position:relative;margin:9px 0;padding-left:20px}
.lp li::before{content:"";position:absolute;left:2px;top:.75em;width:5px;height:1px;background:var(--accent)}
.spec{width:100%;border-collapse:collapse;font-size:13.5px}
.spec td{border-top:1px solid var(--line-soft);padding:9px 0}
.spec td:first-child{font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  color:var(--ink-faint);width:9em;white-space:nowrap;vertical-align:top;padding-top:12px}

footer.bottom{margin-top:80px;border-top:1px solid var(--line);padding:34px 0 64px;
  color:var(--ink-faint);font-size:13px;background:var(--sunken)}
footer.bottom ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px 24px;padding:0;margin:0 0 16px;
  font-family:var(--mono);font-size:12px;letter-spacing:.08em}
footer.bottom a{color:var(--ink-soft);text-decoration:none}
footer.bottom a:hover{color:var(--accent)}
footer.bottom p{margin:0}

@media (max-width:640px){
  :root{--depth:200px;--lift:22px}
  header.top{padding:60px 0 38px}
  .unit{grid-template-columns:1fr;gap:6px}
  .unit .side{grid-column:1;grid-row:auto;align-items:flex-start;flex-direction:row;flex-wrap:wrap;gap:12px;margin-top:8px}
  .gart img{height:104px}
}

/* ============================================================
   奥行きと通電 — ここから下は **すべて .js-3d 配下**。
   JSが動かなければ上の平面レイアウトのまま普通に読める
   （カードが奥に沈んだまま戻らない＝白いページ、を構造的に防ぐ）。
   ============================================================ */
.js-3d .stage{perspective:1200px;perspective-origin:50% 42%}
.js-3d .rack{transform-style:preserve-3d}
.js-3d .unit{
  --p:0;
  transform:translate3d(0, calc((1 - var(--p)) * var(--lift)), calc((var(--p) - 1) * var(--depth)));
  opacity:calc(.1 + var(--p) * .9);
  will-change:transform,opacity;
}
.js-3d .unit.on{box-shadow:0 calc(var(--p) * 22px) calc(var(--p) * 46px) rgba(0,0,0,calc(var(--p) * .45))}
.js-3d header.top{perspective:1300px;perspective-origin:50% 30%}
.js-3d header.top .wrap{transform:translate3d(0,0,calc(var(--s) * 70px))}
.js-3d .diagram{opacity:calc(1 - var(--s) * .8)}

/* 信号の流れ（2Dのみ。3Dをキーフレームに入れない＝検証が読めなくなるため） */
@keyframes signal{ to{ stroke-dashoffset:-200 } }
@keyframes breathe{ 0%,100%{ opacity:.45 } 50%{ opacity:1 } }
.js-anim .diagram .flow{animation:signal 5.5s linear infinite}
.js-anim .diagram .core{animation:breathe 3.4s ease-in-out infinite}

/* 動きを減らす設定の人には一切動かさない（酔い・前庭障害への標準作法） */
@media (prefers-reduced-motion: reduce){
  .js-3d .unit{transform:none;opacity:1}
  .js-3d header.top .wrap{transform:none}
  .js-3d .diagram{opacity:1}
  .js-anim .diagram .flow{animation:none}
  .js-anim .diagram .core{animation:none}
}