:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--color-bg:#1a1d24;--color-bg-deep:#14171d;--color-bg-elevated:#21252e;--color-bg-panel:#272c37;--color-border:#333a47;--color-border-strong:#454e5f;--color-text:#e8eaf0;--color-text-muted:#939bab;--color-text-dim:#646c7c;--color-observer:#5cc8f5;--color-observer-bg:#10222d;--color-observer-glow:#5cc8f529;--color-decoder:#f0b45c;--color-decoder-bg:#2a2013;--color-decoder-glow:#f0b45c29;--color-correct:#5ce09a;--color-incorrect:#f0665c;--color-warning:#f0d05c;--bg-image:none;--font-sans:system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;--font-mono:ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;--radius:.85rem;--radius-sm:.5rem;--shadow-panel:0 1px 0 #ffffff08 inset, 0 .75rem 1.5rem #00000059}.role-observer{--accent:var(--color-observer);--accent-bg:var(--color-observer-bg);--accent-glow:var(--color-observer-glow)}.role-decoder{--accent:var(--color-decoder);--accent-bg:var(--color-decoder-bg);--accent-glow:var(--color-decoder-glow)}*{box-sizing:border-box}html,body{height:100%;margin:0;padding:0}body{background-color:var(--color-bg);background-image:radial-gradient(ellipse 90% 60% at 50% -10%, #5cc8f512, transparent), radial-gradient(ellipse 80% 50% at 50% 110%, #00000080, transparent), var(--bg-image);color:var(--color-text);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;overscroll-behavior:none;background-attachment:fixed}#root{min-height:100dvh}button{color:inherit;font-family:inherit}.btn{letter-spacing:.02em;width:100%;color:var(--color-text);background:var(--color-bg-panel);border:1px solid var(--color-border-strong);border-radius:var(--radius-sm);cursor:pointer;padding:.9rem 1rem;font-size:.95rem;font-weight:600;transition:transform 80ms,border-color .15s,filter .15s;display:block}.btn:hover:not(:disabled){border-color:var(--color-text-muted)}.btn:active:not(:disabled){transform:scale(.985)}.btn:disabled{opacity:.4;cursor:default}.btn-primary{color:var(--color-observer);background:var(--color-observer-bg);border-color:var(--color-observer);box-shadow:0 0 1.5rem var(--color-observer-glow)}.btn-primary:hover:not(:disabled){filter:brightness(1.25)}.btn-quiet{color:var(--color-text-dim);background:0 0;border-color:#0000;font-size:.85rem;font-weight:400}.btn-quiet:hover:not(:disabled){color:var(--color-text-muted);border-color:#0000}.alert{color:var(--color-incorrect);border-radius:var(--radius-sm);background:#f0665c14;border:1px solid #f0665c80;margin:0;padding:.8rem 1rem;font-size:.88rem;line-height:1.6}@keyframes echoll-fade-up{0%{opacity:0;transform:translateY(.5rem)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){*{transition-duration:.001ms!important;animation-duration:.001ms!important}}.tpl{flex-direction:column;gap:1rem;height:100%;display:flex}.tpl-lead{color:var(--color-text-muted);margin:0;font-size:.82rem;line-height:1.6}.tpl-lead strong{color:var(--accent,var(--color-text));font-weight:600}.tpl-stage{border-radius:var(--radius-sm);background:radial-gradient(circle at 50% 45%, var(--accent-glow,transparent), transparent 68%), var(--color-bg-deep);border:1px solid var(--color-border);flex-direction:column;flex:1;justify-content:center;align-items:center;gap:1rem;min-height:12rem;padding:1.25rem .75rem;display:flex}.tpl-manual{border-radius:var(--radius-sm);border:1px solid var(--color-border);background:var(--color-bg-deep);flex-direction:column;display:flex;overflow:hidden}.tpl-manual-head{letter-spacing:.14em;color:var(--color-text-dim);border-bottom:1px solid var(--color-border);background:#00000040;padding:.5rem .85rem;font-size:.7rem}.tpl-rule{border-bottom:1px solid var(--color-border);align-items:center;gap:.7rem;padding:.65rem .85rem;display:flex}.tpl-rule:last-child{border-bottom:none}.tpl-rule-order{width:1.3rem;height:1.3rem;font-family:var(--font-mono);color:var(--color-text-dim);border:1px solid var(--color-border-strong);border-radius:999px;flex:none;justify-content:center;align-items:center;font-size:.7rem;display:flex}.tpl-rule-body{flex:1;min-width:0;font-size:.9rem;line-height:1.45}.tpl-rule-answer{font-family:var(--font-mono);color:var(--accent,var(--color-text));flex:none;font-size:.95rem;font-weight:700}.tpl-rule-fallback .tpl-rule-body{color:var(--color-text-muted)}.tpl-choices{grid-template-columns:repeat(4,1fr);gap:.5rem;display:grid}.tpl-choice{font-family:var(--font-mono);color:var(--accent,var(--color-text));background:var(--accent-bg,var(--color-bg-panel));border:1px solid var(--accent,var(--color-border));border-radius:var(--radius-sm);cursor:pointer;padding:.85rem .4rem;font-size:1.15rem;font-weight:700;transition:transform 80ms,filter .15s}.tpl-choice:hover:not(:disabled){filter:brightness(1.35)}.tpl-choice:active:not(:disabled){transform:scale(.96)}.tpl-choice:disabled{opacity:.35;cursor:default}.tpl-symbol-row{flex-wrap:wrap;justify-content:center;gap:.6rem;display:flex}.tpl-symbol{width:3rem;height:3rem;color:var(--color-text);background:var(--color-bg-panel);border:1px solid var(--color-border-strong);border-radius:var(--radius-sm);justify-content:center;align-items:center;font-size:1.7rem;line-height:1;display:flex}.tpl-symbol-inline{vertical-align:-.4rem;background:var(--color-bg-panel);border:1px solid var(--color-border-strong);border-radius:.3rem;justify-content:center;align-items:center;width:1.7rem;height:1.7rem;margin:0 .1rem;font-size:1.1rem;display:inline-flex}.tpl-dial{width:min(15rem,70vw);height:auto}.tpl-dial-face{fill:var(--color-bg-panel);stroke:var(--color-border-strong);stroke-width:1.5px}.tpl-dial-tick{stroke:var(--color-text-dim);stroke-width:2px}.tpl-dial-tick-major{stroke:var(--color-text-muted);stroke-width:3px}.tpl-dial-number{fill:var(--color-text-muted);font-family:var(--font-mono);text-anchor:middle;dominant-baseline:central;font-size:9px}.tpl-dial-needle{stroke:var(--accent,#fff);stroke-width:4px;stroke-linecap:round}.tpl-dial-hub{fill:var(--accent,#fff)}.tpl-dial-origin{fill:var(--color-warning)}.tpl-kanji{color:var(--color-text);text-shadow:0 0 2rem var(--accent-glow,transparent);font-size:clamp(5rem,30vw,8rem);font-weight:500;line-height:1}.tpl-radical-name{font-weight:600}.tpl-radical-glyph{font-family:var(--font-mono);color:var(--color-text-muted)}.tpl-wires{flex-direction:column;gap:.55rem;width:min(16rem,78%);display:flex}.tpl-wire{align-items:center;gap:.6rem;display:flex}.tpl-wire-index{width:1.2rem;font-family:var(--font-mono);color:var(--color-text-dim);text-align:right;flex:none;font-size:.7rem}.tpl-wire-line{border:1px solid #00000073;border-radius:999px;flex:1;height:.65rem;box-shadow:inset 0 1px #ffffff40}.tpl-color-chip{vertical-align:-.05rem;border:1px solid #00000080;border-radius:.2rem;width:.75rem;height:.75rem;margin-right:.25rem;display:inline-block}.tpl-scatter{aspect-ratio:1;width:100%;max-width:20rem;position:relative}.tpl-scatter-item{color:var(--color-text);font-size:1.5rem;line-height:1;position:absolute;transform:translate(-50%,-50%)}.tpl-grid{gap:.35rem;display:grid}.tpl-cell{aspect-ratio:1;background:var(--color-bg-panel);border:1px solid var(--color-border);border-radius:.3rem;justify-content:center;align-items:center;font-size:1.3rem;display:flex}.tpl-cell-mark{color:var(--accent,var(--color-text));border-color:var(--accent,var(--color-border));box-shadow:0 0 .9rem var(--accent-glow,transparent)}.timer{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--color-text-muted);font-size:1rem;font-weight:700;transition:color .2s}.timer-warning{color:var(--color-warning);animation:1s ease-in-out infinite timer-pulse}@keyframes timer-pulse{50%{opacity:.55}}.sound-toggle{width:2rem;height:2rem;color:var(--color-text-dim);border:1px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer;background:0 0;flex:none;justify-content:center;align-items:center;padding:0;transition:color .15s,border-color .15s;display:flex}.sound-toggle:hover{color:var(--color-text);border-color:var(--color-border-strong)}.sound-toggle[aria-pressed=true]{color:var(--color-text-muted)}.debug{flex-direction:column;gap:1.25rem;max-width:60rem;margin:0 auto;padding:1.25rem;display:flex}.debug-bar{background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius);flex-wrap:wrap;align-items:center;gap:1.25rem;padding:.9rem 1.1rem;display:flex}.debug-title{flex-direction:column;gap:.1rem;margin-right:auto;font-size:.85rem;display:flex}.debug-title span{color:var(--color-text-dim);font-size:.75rem}.debug-field{color:var(--color-text-muted);flex-direction:column;gap:.3rem;font-size:.72rem;display:flex}.debug-field select{background:var(--color-bg-panel);color:var(--color-text);border:1px solid var(--color-border-strong);border-radius:.35rem;padding:.3rem}.debug-status{align-items:center;gap:.8rem;display:flex}.debug-verdict{font-size:.9rem;font-weight:700}.debug-verdict.is-correct{color:var(--color-correct)}.debug-verdict.is-wrong{color:var(--color-incorrect)}.debug-reroll{width:auto;padding:.45rem .85rem;font-size:.8rem}.debug-channel{text-align:center;color:var(--color-warning);background:color-mix(in srgb, var(--color-warning) 10%, var(--color-bg-elevated));border:1px solid color-mix(in srgb, var(--color-warning) 55%, transparent);border-radius:var(--radius-sm);margin:0;padding:.55rem .85rem;font-size:.82rem;font-weight:600}.debug-panels{grid-template-columns:1fr 1fr;align-items:stretch;gap:1.25rem;display:grid}@media (width<=760px){.debug-panels{grid-template-columns:1fr}}.debug-panel{border-radius:var(--radius);border:1px solid var(--color-border);background:linear-gradient(180deg, var(--accent-bg) 0%, var(--color-bg-elevated) 130%);min-height:24rem;box-shadow:var(--shadow-panel);flex-direction:column;gap:.85rem;padding:1.1rem;display:flex}.debug-panel>.tpl{flex:1}.debug-panel-label{letter-spacing:.16em;color:var(--accent);margin:0;font-size:.72rem}.debug-result{text-align:center;margin:0;font-size:1.05rem;font-weight:700}.debug-result.is-correct{color:var(--color-correct)}.debug-result.is-wrong{color:var(--color-incorrect)}.title{flex-direction:column;gap:1.25rem;max-width:26rem;min-height:100dvh;margin:0 auto;padding:1.1rem 1.25rem 2.5rem;display:flex}.title-head{text-align:center;margin-top:2.5rem}.title-logo{letter-spacing:.3em;text-indent:.3em;color:var(--color-text);text-shadow:0 0 3rem var(--color-observer-glow);margin:0;font-size:3rem;font-weight:300}.title-tagline{letter-spacing:.3em;text-indent:.3em;color:var(--color-text-dim);margin:.6rem 0 0;font-size:.78rem}.title-premise{text-align:center;color:var(--color-text-muted);margin:.5rem 0 0;font-size:.85rem;line-height:2}.title-em-observer{color:var(--color-observer);font-weight:600}.title-em-decoder{color:var(--color-decoder);font-weight:600}.title-actions{flex-direction:column;gap:.85rem;margin-top:auto;display:flex}.title-join{gap:.5rem;display:flex}.title-code{min-width:0;font-family:var(--font-mono);letter-spacing:.28em;text-indent:.28em;text-align:center;text-transform:uppercase;color:var(--color-text);background:var(--color-bg-deep);border:1px solid var(--color-border-strong);border-radius:var(--radius-sm);flex:1;padding:.9rem .75rem;font-size:1.25rem;font-weight:700}.title-code::placeholder{color:var(--color-text-dim);font-weight:400}.title-code:focus{border-color:var(--color-observer);box-shadow:0 0 1.2rem var(--color-observer-glow);outline:none}.title-join .btn{flex:none;width:auto;padding-inline:1.1rem}.title-foot{text-align:center;color:var(--color-text-dim);margin:0;font-size:.75rem}.trail{align-items:center;width:100%;display:flex}.trail-slot{flex:1;align-items:center;display:flex}.trail-slot:first-child{flex:none}.trail-link{background:var(--color-border);flex:1;min-width:.5rem;height:1px}.trail-link-open{background:color-mix(in srgb, var(--color-correct) 45%, var(--color-border))}.trail-node{border:1px solid var(--color-border-strong);background:var(--color-bg-deep);width:1.15rem;height:1.15rem;color:var(--color-text-dim);border-radius:.28rem;flex:none;justify-content:center;align-items:center;font-size:.62rem;line-height:1;transition:box-shadow .3s,border-color .3s;display:flex}.trail-node-open{color:var(--color-correct);border-color:color-mix(in srgb, var(--color-correct) 60%, transparent);background:color-mix(in srgb, var(--color-correct) 12%, var(--color-bg-deep))}.trail-node-here{border-color:var(--accent,var(--color-observer));background:var(--accent-bg,var(--color-observer-bg));box-shadow:0 0 .7rem var(--accent-glow,var(--color-observer-glow))}.trail-node-exit{border-radius:.3rem .3rem .15rem .15rem;width:1.45rem;height:1.45rem;font-size:.8rem}.trail-node-exit.trail-node-locked{color:var(--color-text-dim);border-color:var(--color-border-strong)}.briefing{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:1.1rem;padding:1.5rem 1.25rem;animation:.35s both echoll-fade-up;display:flex}.briefing-stage{letter-spacing:.22em;color:var(--color-text-dim);margin:0;font-size:.78rem}.briefing-role{flex-direction:column;align-items:center;gap:.15rem;display:flex}.briefing-role-title{letter-spacing:.04em;color:var(--accent);text-shadow:0 0 2rem var(--accent-glow);font-size:2.1rem;font-weight:700;line-height:1.1}.briefing-role-subtitle{letter-spacing:.2em;color:var(--color-text-muted);font-size:.8rem}.briefing-duty{max-width:22rem;color:var(--color-text-muted);margin:0;font-size:.85rem;line-height:1.75}.briefing-channel{border-radius:var(--radius-sm);border:1px solid var(--color-border);background:var(--color-bg-elevated);flex-direction:column;gap:.3rem;width:100%;max-width:22rem;padding:.9rem 1rem;display:flex}.briefing-channel-strict{border-color:var(--color-warning);background:color-mix(in srgb, var(--color-warning) 9%, var(--color-bg-elevated));box-shadow:0 0 1.5rem #f0d05c1f}.briefing-channel-label{letter-spacing:.16em;color:var(--color-text-dim);font-size:.68rem}.briefing-channel-title{font-size:1rem;line-height:1.4}.briefing-channel-strict .briefing-channel-title{color:var(--color-warning)}.briefing-channel-detail{color:var(--color-text-muted);font-size:.78rem;line-height:1.6}.briefing-countdown{color:var(--color-text-dim);align-items:baseline;gap:.4rem;display:flex}.briefing-countdown-number{font-family:var(--font-mono);color:var(--color-text-muted);font-size:1.6rem;font-weight:700}.briefing-countdown-label{font-size:.78rem}.screen{flex-direction:column;gap:1rem;max-width:30rem;min-height:100dvh;margin:0 auto;padding:1.1rem 1.1rem 1.75rem;display:flex}.screen-toolbar{justify-content:flex-end;display:flex}.lobby-body{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:1rem;display:flex}.lobby-caption{letter-spacing:.22em;color:var(--color-text-dim);margin:0;font-size:.7rem}.lobby-code{font-family:var(--font-mono);letter-spacing:.22em;text-indent:.22em;color:var(--color-observer);text-shadow:0 0 2.5rem var(--color-observer-glow);margin:0;font-size:3.4rem;font-weight:700}.lobby-status{margin:0;font-size:.95rem}.lobby-note{color:var(--color-text-muted);margin:0;font-size:.8rem;line-height:1.8}.lobby-body .btn{max-width:18rem;margin-top:.5rem}.play-head{border-bottom:1px solid var(--color-border);flex-direction:column;gap:.85rem;padding-bottom:.9rem;display:flex}.play-head-top{justify-content:space-between;align-items:flex-start;gap:.75rem;display:flex}.play-identity{flex-direction:column;gap:.1rem;min-width:0;display:flex}.play-role{letter-spacing:.03em;color:var(--accent);font-size:1.05rem;font-weight:700}.play-role-note{color:var(--color-text-dim);font-size:.72rem}.play-head-right{align-items:center;gap:.7rem;display:flex}.play-stage-label{letter-spacing:.16em;color:var(--color-text-dim);text-align:center;margin:0;font-size:.72rem}.play-channel{text-align:center;color:var(--color-warning);background:color-mix(in srgb, var(--color-warning) 10%, var(--color-bg-elevated));border:1px solid color-mix(in srgb, var(--color-warning) 55%, transparent);border-radius:var(--radius-sm);margin:0;padding:.55rem .85rem;font-size:.82rem;font-weight:600}.play-body{border:1px solid var(--color-border);border-radius:var(--radius);background:linear-gradient(180deg, var(--accent-bg) 0%, var(--color-bg-elevated) 130%);box-shadow:var(--shadow-panel);flex-direction:column;flex:1;justify-content:center;gap:.85rem;padding:1.1rem;display:flex}.play-puzzle{flex:1;animation:.3s both echoll-fade-up;display:flex}.play-puzzle>*{flex:1;min-width:0}.play-waiting{text-align:center;color:var(--color-text-muted);margin:0;font-size:.85rem}.play-result{text-align:center;flex-direction:column;gap:.85rem;animation:.25s both echoll-fade-up;display:flex}.play-result-label{margin:0;font-size:1.25rem;font-weight:700}.play-result-label.is-correct{color:var(--color-correct)}.play-result-label.is-incorrect,.play-result-label.is-expired{color:var(--color-incorrect)}.finished-body{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:.75rem;display:flex}.finished-title{letter-spacing:.12em;text-indent:.12em;margin:0;font-size:2.8rem;font-weight:800}.finished-title.is-cleared{color:var(--color-correct);text-shadow:0 0 2.5rem #5ce09a40}.finished-title.is-failed{color:var(--color-incorrect);text-shadow:0 0 2.5rem #f0665c33}.finished-detail{color:var(--color-text-muted);margin:0;font-size:.85rem;line-height:1.8}.centered{text-align:center;justify-content:center;align-items:center}.centered-text{color:var(--color-text-muted);margin:0}.centered .btn{max-width:14rem}.notice{max-width:26rem;color:var(--color-text-muted);text-align:center;margin:0 auto;padding:4rem 1.5rem;font-size:.88rem;line-height:1.9}.notice h1{color:var(--color-text);margin:0 0 1rem;font-size:1.1rem}.notice code{font-family:var(--font-mono);background:var(--color-bg-panel);border-radius:.25rem;padding:.12em .4em;font-size:.85em}.notice a{color:var(--color-observer)}