/* ── 量子ルーレット ────────────────────────────────────────
   計器の画面。**観測される前は重なっていて、観測した瞬間に一つに落ちる**——
   その一点だけを見せるために全部を組む。
   暗い側に振り切る。明暗を切り替えないので、色は全部ここで塗る。 */
:root{
  color-scheme:dark;
  --void:#05070E; --panel:#0A0F1E; --sunk:#070B16;
  --ink:#E9ECFF; --muted:#8D98C6; --faint:#56608C; --line:#182140;
  --q1:#4DE0F5; --q2:#A97BFF; --q3:#FF6BC1;
  --on-q:#04121A;
  --disp:"M PLUS 1 Code","Noto Sans JP",sans-serif;
  --body:"Noto Sans JP",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
}
*{box-sizing:border-box;}
body{
  margin:0;color:var(--ink);font-family:var(--body);
  font-size:16px;line-height:1.9;-webkit-font-smoothing:antialiased;
  background:var(--void);
  position:relative;
}
/* 地の光。**body に background-attachment:fixed で敷くと、
   画面が拡大縮小されたときに四角い境目が出る**ので、固定の層に分ける */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(120vw 70vh at 50% -10%, #101B3C 0%, rgba(16,27,60,0) 64%),
    radial-gradient(80vw 52vh at 92% 18%, #1B1038 0%, rgba(27,16,56,0) 62%),
    var(--void);
}
.wrap{max-width:740px;margin:0 auto;padding:0 18px 96px;}
a{color:var(--q1);}
h1,h2{font-family:var(--disp);line-height:1.32;text-wrap:balance;font-weight:700;}
h1{font-size:clamp(23px,4.6vw,34px);margin:0 0 6px;letter-spacing:-.01em;}
h2{font-size:clamp(18px,3.2vw,24px);margin:58px 0 12px;}
p{margin:0 0 15px;max-width:64ch;}
b,strong{font-weight:700;color:#fff;}
code{font-family:var(--mono);font-size:.85em;color:var(--q1);
  background:rgba(77,224,245,.08);padding:1px 6px;border-radius:5px;word-break:break-all;}

.top{padding:26px 0 0;display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.back{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);text-decoration:none;display:inline-flex;align-items:center;min-height:44px;}
.back:hover{color:var(--q1);}
.langsw{margin-left:auto;display:flex;gap:2px;}
.langsw a{font-family:var(--mono);font-size:11px;letter-spacing:.1em;padding:0 13px;
  min-height:44px;display:inline-flex;align-items:center;text-decoration:none;
  color:var(--faint);border:1px solid var(--line);border-radius:8px;}
.langsw a[aria-current]{background:var(--ink);color:var(--void);border-color:var(--ink);}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--q2);margin:14px 0 8px;}
.lede{font-size:17px;color:var(--muted);max-width:54ch;}
.lede b{color:var(--ink);font-weight:600;}

/* ── 車輪 ── */
.stage{margin:6px 0 0;text-align:center;}
.wheelbox{position:relative;width:min(100%,560px);margin:0 auto;}
@media (max-width:560px){
  .stage{margin-left:-18px;margin-right:-18px;}
  .wheelbox{width:100%;}
}
canvas{display:block;width:100%;height:auto;aspect-ratio:1/.78;}
.needle{display:none;
  position:absolute;top:-2px;left:50%;transform:translateX(-50%);
  width:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent;
  border-top:22px solid var(--q1);filter:drop-shadow(0 0 8px var(--q1));z-index:2;
}
.spin{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(30%,158px);aspect-ratio:1;border-radius:50%;cursor:pointer;z-index:2;
  border:1px solid rgba(77,224,245,.55);
  background:radial-gradient(circle at 50% 38%, #14283f 0%, #070D1A 78%);
  color:var(--q1);font:700 clamp(14px,3.4vw,17px)/1.35 var(--disp);
  letter-spacing:.04em;
  box-shadow:0 0 34px -6px rgba(77,224,245,.5), inset 0 0 24px -8px rgba(77,224,245,.45);
  transition:box-shadow .2s, color .2s;
}
.spin:hover{box-shadow:0 0 46px -4px rgba(77,224,245,.75), inset 0 0 26px -6px rgba(77,224,245,.6);}
.spin:active{transform:translate(-50%,-50%) scale(.96);}
.spin:focus-visible{outline:2px solid var(--q1);outline-offset:4px;}
.spin[disabled]{cursor:progress;color:var(--faint);border-color:var(--line);box-shadow:none;}

/* ── 輝線スペクトル ──
   原子が出す線スペクトルの見立て。観測されたものだけが灼ける */
.spectrum{display:flex;gap:3px;justify-content:center;align-items:flex-end;
  height:44px;margin:4px auto 0;padding:0 18px;max-width:520px;}
.line{
  flex:1;max-width:52px;height:20px;border-radius:2px;
  background:hsl(var(--h) 96% 62%);
  box-shadow:0 0 12px -1px hsl(var(--h) 96% 60% / .8);
  opacity:.62;transition:opacity .5s ease, height .5s ease, box-shadow .5s ease;
}
.spectrum.collapsed .line{opacity:.13;height:12px;box-shadow:none;}
.spectrum.collapsed .line.on{
  opacity:1;height:44px;
  box-shadow:0 0 26px 1px hsl(var(--h) 96% 64%), 0 0 60px 6px hsl(var(--h) 96% 60% / .55);
}
.state{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--q2);margin:18px 0 0;min-height:1.5em;}
.result{font-family:var(--disp);font-weight:700;font-size:clamp(28px,8vw,50px);
  margin:6px 0 4px;min-height:1.35em;word-break:break-word;
  text-shadow:0 0 30px rgba(77,224,245,.55);}

/* ── 流れ ── */
.flow{margin:30px 0 0;border:1px solid var(--line);border-radius:15px;
  background:linear-gradient(180deg, rgba(20,30,62,.55), rgba(8,12,24,.55));
  overflow:hidden;text-align:left;}
.flow h3{margin:0;padding:15px 20px;font:700 10.5px/1 var(--mono);letter-spacing:.2em;
  text-transform:uppercase;color:var(--faint);border-bottom:1px solid var(--line);}
.step{display:grid;grid-template-columns:30px 1fr;gap:3px 12px;
  padding:14px 20px;border-bottom:1px solid var(--line);opacity:.34;
  transition:opacity .35s ease, background .35s ease;}
.step:last-child{border-bottom:0;}
.step.on{opacity:1;background:rgba(77,224,245,.05);}
.step.done{opacity:.82;}
.step-n{font-family:var(--mono);font-size:11px;color:var(--q2);padding-top:4px;
  font-variant-numeric:tabular-nums;}
.step.on .step-n{color:var(--q1);}
.step-t{font-size:14px;font-weight:600;color:var(--ink);}
.step-v{grid-column:2;font-family:var(--mono);font-size:11px;color:var(--muted);
  word-break:break-all;line-height:1.75;}
.step-v b{color:var(--q1);font-weight:600;}
.step-v .no{color:var(--q3);}
.bitstrip{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
  color:var(--q1);word-break:break-all;line-height:1.7;}

/* ── 編集 ── */
.edit{margin:30px 0 0;padding:22px;border:1px solid var(--line);
  border-radius:15px;background:var(--panel);}
.edit label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);margin-bottom:8px;}
textarea{width:100%;min-height:148px;resize:vertical;font:inherit;font-size:15.5px;
  line-height:1.9;color:var(--ink);background:var(--sunk);
  border:1px solid var(--line);border-radius:11px;padding:13px 15px;}
textarea:focus-visible{outline:2px solid var(--q1);outline-offset:1px;}
.presets{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px;}
.plabel{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--faint);}
.chip{min-height:44px;padding:0 15px;border-radius:99px;cursor:pointer;
  border:1px solid var(--line);background:var(--sunk);color:var(--muted);
  font:600 13.5px/1 var(--body);}
.chip:hover{border-color:var(--q1);color:var(--q1);}
.chip:focus-visible{outline:2px solid var(--q1);outline-offset:2px;}
.err{color:var(--q3);font-size:14px;margin:12px 0 0;}

.note{border-left:2px solid var(--q2);padding:2px 0 2px 18px;color:var(--muted);
  font-size:14.5px;margin:20px 0;}
.note b{color:var(--ink);}
footer{margin-top:64px;padding-top:24px;border-top:1px solid var(--line);
  font-size:13px;color:var(--faint);}
footer a{color:var(--muted);}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;}}

/* ── 疑似乱数の実演 ──
   「種を知っていれば全部わかる」を、読ませるのではなく触らせる */
.prng{margin:20px 0 24px;padding:20px;border:1px solid var(--line);
  border-radius:14px;background:var(--panel);}
.prng-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.prng-row label{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);}
#seed{width:104px;min-height:46px;font:600 15px/1 var(--mono);text-align:center;
  color:var(--ink);background:var(--sunk);border:1px solid var(--line);
  border-radius:10px;padding:0 12px;font-variant-numeric:tabular-nums;}
#seed:focus-visible{outline:2px solid var(--q1);outline-offset:1px;}
.pbtn{min-height:46px;padding:0 18px;border-radius:10px;cursor:pointer;
  border:1px solid var(--q2);background:rgba(169,123,255,.1);color:var(--q2);
  font:700 14px/1 var(--body);}
.pbtn:hover{background:rgba(169,123,255,.2);}
.pbtn:focus-visible{outline:2px solid var(--q2);outline-offset:2px;}
.prng-out{font-family:var(--mono);font-size:clamp(15px,4.4vw,20px);color:var(--q1);
  letter-spacing:.16em;margin:16px 0 6px;word-break:break-all;
  font-variant-numeric:tabular-nums;}
.prng-note{font-size:13px;color:var(--faint);margin:0;}
.prng-note b{color:var(--q3);}