:root{color-scheme:dark;--bg:#10101a;--panel:#1a1927;--line:#383449;--muted:#bcb7cf;--text:#faf7ff;--accent:#dbff87;font-family:"DM Sans",system-ui,sans-serif}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;color:var(--text);background:radial-gradient(ellipse at 83% 0%,#2f2345,transparent 52%),var(--bg);min-height:100dvh}
.shell{width:min(1100px,calc(100% - 2rem));margin-inline:auto}
.top{display:flex;align-items:center;justify-content:space-between;padding:1.4rem 0;border-bottom:1px solid var(--line);gap:.6rem}
.brand{font-weight:800;color:inherit;text-decoration:none;font-size:1.2rem;white-space:nowrap}.brand span,.eyebrow,.star{color:var(--accent)}
.local,.pill{color:var(--muted);font-size:.79rem}.local{white-space:nowrap}.intro{padding:clamp(2rem,6vw,5rem) 0 2.1rem}
.eyebrow{font-size:.76rem;letter-spacing:.19em;font-weight:800}h1{font-family:"Instrument Serif",Georgia,serif;font-weight:400;letter-spacing:-.055em;font-size:clamp(2.65rem,8vw,6rem);line-height:1;margin:.4rem 0 1rem}
p{line-height:1.5}.intro>p:last-child,.hint,.empty{color:var(--muted)}
.grid{display:grid;grid-template-columns:1.2fr 1fr;gap:1rem;align-items:start}
.panel{padding:clamp(1rem,3vw,1.8rem);border:1px solid var(--line);border-radius:1.4rem;background:var(--panel);min-width:0}
.heading,.row,li{display:flex;align-items:center;gap:.65rem;justify-content:space-between}
h2{font-size:1.23rem;margin:0 0 1.35rem}.heading h2{margin:0}.heading{margin-bottom:1.35rem}
.pill,em{border:1px solid var(--line);padding:.28rem .58rem;border-radius:99px;white-space:nowrap}
button,input,textarea,select{font:inherit}button,summary{cursor:pointer}button,input:not([type=radio]),textarea,select{border-radius:.65rem;border:1px solid var(--line);padding:.65rem .8rem;min-height:44px;color:inherit;background:#13121e}
button{font-weight:700}button:hover:not(:disabled){border-color:var(--accent)}button:disabled{opacity:.42;cursor:default}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}label,legend{display:block;font-size:.87rem;font-weight:650;margin-bottom:.4rem}
.row input,select,textarea,input[type=file]{width:100%;min-width:0}textarea{resize:vertical}
details{margin-top:1rem}summary{color:#d9cdfa;font-weight:700;padding:.4rem 0}details form{display:grid;gap:.5rem;margin:.7rem 0}
ul{padding:0;margin:1rem 0 0;list-style:none;max-height:19rem;overflow:auto}li{border-top:1px solid var(--line);padding:.3rem 0;overflow-wrap:anywhere}li button{flex-shrink:0}.empty,.hint,.notice{font-size:.85rem}
fieldset{border:0;padding:0;margin:0 0 1rem}.choice{display:flex;align-items:flex-start;gap:.65rem;padding:.8rem;border:1px solid var(--line);border-radius:.7rem;cursor:pointer}
.choice:has(:checked){border-color:#baa1ef;background:#302740}input[type=radio]{accent-color:var(--accent)}small{display:block;color:var(--muted);margin-top:.3rem;font-weight:400}
em{font-size:.64rem;font-style:normal;color:#ffdf9a}#demo-options{margin-bottom:1rem}
button.primary{background:var(--accent);color:#171c0e;border-color:var(--accent);padding:.8rem 1.15rem}.settings .primary{width:100%;margin-top:1rem;display:flex;justify-content:space-between}
.notice{min-height:1.5rem;color:var(--accent)}
#stage{position:fixed;inset:0;margin:0;padding:0;border:0;width:100%;height:100%;max-width:none;max-height:none;color:var(--text);background:radial-gradient(ellipse at center,#38245a 0%,#161222 58%,#0c0b12 100%);overflow:auto}
#stage[open]{display:grid;place-items:center}.stage-content{position:relative;text-align:center;width:min(95%,72rem);padding:3rem .8rem;z-index:1}
.demo-mark{display:inline-block;color:#241900;background:#ffdf9a;border-radius:2rem;padding:.45rem .9rem;font-weight:850;margin-bottom:.6rem}
.star{font-size:clamp(2.4rem,8vmin,6rem);line-height:1;text-shadow:0 0 45px #dbff8770}
#display{font-family:"Instrument Serif",Georgia,serif;font-size:clamp(2rem,9vmin,8rem);line-height:1.05;margin:.35em auto;overflow-wrap:anywhere}
#stage[data-phase="result"] #display{color:var(--accent);animation:reveal .6s both}
@keyframes reveal{from{transform:scale(.83);opacity:.2}to{transform:scale(1);opacity:1}}
#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}
.exit{position:fixed;z-index:2;right:max(1rem,env(safe-area-inset-right));top:max(1rem,env(safe-area-inset-top));opacity:.75}
#stage[data-phase="rolling"] .exit,#stage[data-phase="result"] .exit{opacity:0;pointer-events:none}
#stage .exit:focus-visible{opacity:1;pointer-events:auto}
.sr{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap}
@media(max-width:690px){.grid{grid-template-columns:1fr}.top{padding:1rem 0}}
@media(max-width:360px){.row{flex-wrap:wrap}.row button{width:100%}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important}}
#stage.show-exit .exit{opacity:.9;pointer-events:auto}