:root{color-scheme:dark;--bg:#0a0a0f;--panel:#10101a;--panel-2:#14141f;--ink:#e8e6df;--dim:#908da0;--faint:#565364;--accent:#b18af8;--accent-soft:rgba(177,138,248,0.14);--phosphor:#7de8a6;--danger:#ff9d9d;--border:#232332;--border-strong:#32324a;--font-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--radius:10px;--radius-sm:7px}*{box-sizing:border-box}body,html{height:100%}body{margin:0;background:radial-gradient(1200px 800px at 70% -10%,rgba(177,138,248,.07),transparent 60%),var(--bg);color:var(--ink);font-family:var(--font-mono);font-size:15px;line-height:1.6}button{font:inherit}.shell{height:100vh;display:flex;flex-direction:column}.masthead{flex:none;display:flex;align-items:center;gap:var(--space-4);padding:var(--space-3) var(--space-5);border-bottom:1px solid var(--border);background:rgba(10,10,15,.85)}.wordmark{display:flex;align-items:baseline;gap:var(--space-3);margin:0;font-size:15px;font-weight:600;letter-spacing:.42em;text-transform:lowercase;color:var(--ink)}.wordmark .kanji{font-size:13px;letter-spacing:.2em;color:var(--accent)}.tagline{margin:0;font-size:12px;color:var(--dim)}.nav-link{margin-left:auto;padding:5px 12px;border:1px solid var(--border-strong);border-radius:999px;font-size:12px;color:var(--accent);text-decoration:none;white-space:nowrap;transition:border-color .15s ease,background .15s ease}.nav-link:hover{border-color:var(--accent);background:var(--accent-soft)}.masthead .midi-chip{margin-left:0}.masthead .midi-chip span{color:var(--accent)}.status{display:inline-flex;align-items:center;gap:var(--space-2);padding:5px 12px;border:1px solid var(--border);border-radius:999px;font-size:12px;color:var(--dim);background:var(--panel);white-space:nowrap}.status .dot{width:7px;height:7px;border-radius:50%;background:var(--faint)}.status[data-kind=booting] .dot,.status[data-kind=loading] .dot{background:var(--accent);animation:pulse 1.2s ease-in-out infinite}.status[data-kind=ready]{color:var(--phosphor);border-color:rgba(125,232,166,.35)}.status[data-kind=ready] .dot{background:var(--phosphor);box-shadow:0 0 8px rgba(125,232,166,.8)}.status[data-kind=failed]{color:var(--danger);border-color:rgba(255,157,157,.4)}.status[data-kind=failed] .dot{background:var(--danger)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.25}}.deck{flex:1 1;display:flex;gap:var(--space-4);padding:var(--space-4) var(--space-5);min-height:0}.stage{position:relative;flex:1 1;min-width:0;border:1px solid var(--border-strong);border-radius:var(--radius);background:#0c0c13;box-shadow:inset 0 0 80px rgba(0,0,0,.55),0 0 48px rgba(177,138,248,.06);overflow:hidden}.stage:after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.016),rgba(255,255,255,.016) 1px,transparent 0,transparent 3px)}.term{inset:var(--space-3)}.term,.veil{position:absolute}.veil{inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-4);background:rgba(10,10,15,.72);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);text-align:center;padding:var(--space-5)}.veil .banner{margin:0;font-size:clamp(7px,1.5vw,13px);line-height:1.25;color:var(--accent);text-shadow:0 0 24px rgba(177,138,248,.45);animation:breathe 2.4s ease-in-out infinite;white-space:pre;overflow-x:auto;max-width:100%}.veil .banner[data-failed=true]{color:var(--danger);text-shadow:0 0 24px rgba(255,157,157,.35);animation:none}@keyframes breathe{0%,to{opacity:.55;transform:scale(.985)}50%{opacity:1;transform:scale(1)}}.veil .veil-title{margin:0;font-size:14px;color:var(--ink)}.veil .veil-sub{margin:0;font-size:12px;color:var(--dim);max-width:44ch}.meter{width:min(320px,70%);height:3px;border-radius:999px;background:var(--border);overflow:hidden}.meter>span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--phosphor));transition:width .2s ease}.meter>span.indeterminate{width:35%;animation:slide 1.3s ease-in-out infinite}@keyframes slide{0%{margin-left:-35%}to{margin-left:100%}}.veil .retry{padding:var(--space-2) var(--space-5);border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--panel-2);color:var(--ink);cursor:pointer}.veil .retry:hover{border-color:var(--accent)}.rail{width:340px;flex:none;overflow-y:auto;padding-right:var(--space-1);scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}.rail-hint{margin:0 0 var(--space-3);font-size:12px;color:var(--dim)}.rail h2{margin:var(--space-5) 0 var(--space-2);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.22em;color:var(--faint)}.rail h2:first-of-type{margin-top:0}.example{display:block;width:100%;text-align:left;background:var(--panel);color:inherit;border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3);margin-bottom:var(--space-2);cursor:pointer;transition:border-color .15s ease,background .15s ease,transform .15s ease}.example:hover:not(:disabled){border-color:var(--accent);background:var(--panel-2);transform:translateY(-1px)}.example:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.example:disabled{opacity:.38;cursor:default}.example-title{display:block;font-size:13px;color:var(--accent)}.example-blurb{display:block;font-size:11.5px;color:var(--dim);margin-top:2px}.example-code{display:block;font-size:11px;color:var(--faint);margin-top:var(--space-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.colophon{flex:none;display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);align-items:baseline;padding:var(--space-3) var(--space-5);border-top:1px solid var(--border);font-size:11.5px;color:var(--faint)}.colophon strong{color:var(--dim);font-weight:400}.colophon .statement{flex-basis:100%}.colophon .statement summary{cursor:pointer;color:var(--accent);letter-spacing:.2em;text-transform:uppercase;font-size:10.5px}.colophon .statement summary:hover{text-decoration:underline}.statement-body{max-width:68ch;padding:var(--space-3) 0 var(--space-2)}.statement-body p{margin:0 0 var(--space-3);font-size:12.5px;line-height:1.8;color:var(--dim)}.statement-body em{color:var(--ink);font-style:normal}.how{max-width:72ch;margin:0 auto;padding:var(--space-6) var(--space-5) 96px}.how-back{color:var(--dim);text-decoration:none;font-size:12px}.how h1,.how-back:hover{color:var(--accent)}.how h1{font-size:24px;letter-spacing:.18em;margin:var(--space-4) 0 var(--space-3)}.how h2{font-size:13px;text-transform:uppercase;letter-spacing:.22em;color:var(--phosphor);margin:var(--space-6) 0 var(--space-3)}.how h3{font-size:14px;color:var(--accent);margin:var(--space-5) 0 var(--space-2)}.how p,.how-lede{font-size:13.5px;line-height:1.9;color:var(--dim);margin:0 0 var(--space-3)}.how p code{color:var(--ink);font-size:12.5px}.how a{color:var(--accent)}.how-code{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--space-3) var(--space-4);font-size:12.5px;line-height:1.7;color:var(--ink);overflow-x:auto;margin:0 0 var(--space-3)}.colophon a{color:var(--accent);text-decoration:none}.colophon a:hover{text-decoration:underline}@media (max-width:860px){.shell{height:auto;min-height:100vh}.deck{flex-direction:column;padding:var(--space-3)}.stage{min-height:60vh}.rail{width:auto;max-height:none}.masthead{flex-wrap:wrap;gap:var(--space-2)}}@media (prefers-reduced-motion:reduce){.meter>span.indeterminate,.status .dot,.veil .banner{animation:none}.example{transition:none}}