:root{--bg:#0b0f14;--rain:#5f8f73;--card:#1c1a22;--card-border:#3a3346;--text:#f5efe8;--text-muted:#c9c0b8;--accent:#ffb38a;--accent-2:#b9a7ff;--ok:#8fe3b5}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;min-height:100%}
#glow{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
#glow i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.28;animation:drift 26s ease-in-out infinite alternate}
#glow i:nth-child(1){width:55vw;height:55vw;left:-10vw;top:-15vw;background:#1fbf9a}
#glow i:nth-child(2){width:50vw;height:50vw;right:-12vw;top:20vh;background:#9b7bff;animation-duration:30s;animation-delay:-8s}
#glow i:nth-child(3){width:45vw;height:45vw;left:20vw;bottom:-20vw;background:#ff9f7a;animation-duration:22s;animation-delay:-14s}
@keyframes drift{0%{transform:translate(0,0) scale(1);opacity:.20}50%{opacity:.32}100%{transform:translate(6vw,4vh) scale(1.15);opacity:.24}}
#rain{position:fixed;inset:0;width:100%;height:100%;opacity:.3;z-index:1;-webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.75) 45%,rgba(0,0,0,.15) 100%);mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.75) 45%,rgba(0,0,0,.15) 100%)}
#sil{position:fixed;inset:0;width:100%;height:100%;z-index:1;opacity:.65;pointer-events:none}
#haze{position:fixed;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to bottom,rgba(200,242,220,0) 0%,#d9ccff 55%,#ffd6c2 100%);mix-blend-mode:screen;opacity:.18}
body.intro #haze{opacity:0}
body.glitch #haze{animation:glitch .8s ease-out forwards}
@keyframes glitch{0%{opacity:0;filter:none}10%{opacity:.12;transform:translateX(3px);box-shadow:inset 3px 0 0 rgba(255,0,60,.4),inset -3px 0 0 rgba(0,255,255,.4)}20%{opacity:.04;transform:translateX(-3px)}30%{opacity:.1;transform:none;box-shadow:none}100%{opacity:.18}}
main{position:relative;z-index:2;max-width:880px;margin:0 auto;padding:16px}
.banner{background:#2a2233;border:1px solid var(--accent-2);color:var(--text);text-align:center;border-radius:12px;padding:8px;font-weight:700;letter-spacing:.05em}
h1{font-size:1.6rem;margin:20px 0 4px}.sub{color:var(--text-muted);margin:0 0 16px}
.card,.popc{position:relative;background:rgb(28,26,34);background:rgba(28,26,34,.95);border:1px solid rgba(217,204,255,.18);border-radius:44px 52px 48px 56px/48px 44px 56px 50px;box-shadow:0 0 0 1px rgba(255,214,194,.06),0 0 28px rgba(185,167,255,.10),0 14px 40px rgba(0,0,0,.40)}
.card{padding:26px 30px;margin:24px 6px 30px}
.card::before,.card::after,.popc::before,.popc::after{content:"";position:absolute;z-index:-1;border-radius:50%;background:rgba(40,36,50,.55);border-top:1px solid rgba(217,204,255,.16);filter:blur(3px);box-shadow:0 -4px 18px rgba(185,167,255,.07);pointer-events:none}

.card::before{width:200px;height:60px;top:-18px;right:90px}
.card::after{width:170px;height:50px;bottom:-16px;left:110px;border-top:0;border-bottom:1px solid rgba(200,242,220,.12);box-shadow:0 6px 18px rgba(200,242,220,.05)}
.popc::before{width:160px;height:50px;top:-16px;right:60px}
.popc::after{width:130px;height:44px;bottom:-14px;left:70px;border-top:0;border-bottom:1px solid rgba(255,214,194,.14)}
.tag{display:inline-block;font-size:.8rem;background:#2a2233;color:var(--accent-2);border-radius:999px;padding:2px 10px;margin-left:8px;vertical-align:middle}
.big{font-size:2rem;font-weight:700;color:var(--accent)}
.bar{height:14px;background:#2a2633;border-radius:999px;overflow:hidden;margin:8px 0}.bar>i{display:block;height:100%;width:90%;background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.row{display:flex;flex-wrap:wrap;gap:16px;color:var(--text-muted)}.row b{color:var(--text)}
.ms{border-left:4px solid var(--ok);padding:8px 12px;background:#221f29;border-radius:8px;margin-top:12px}
input{width:100%;font:16px monospace;padding:12px;border-radius:10px;border:1px solid var(--card-border);background:#121016;color:var(--text)}
button{font:inherit;font-weight:700;border:0;border-radius:12px;padding:12px 18px;cursor:pointer;background:var(--accent);color:#1c1a22;margin-top:10px}
button.alt{background:var(--accent-2)}
pre{white-space:pre-wrap;background:#121016;border-radius:10px;padding:12px;color:var(--ok);margin:10px 0 0}
.note{color:var(--text-muted);font-size:.9rem}
#pop{position:fixed;inset:0;z-index:10;display:none;align-items:center;justify-content:center;background:rgba(5,6,10,.6)}
#pop.open{display:flex}
.popc{max-width:440px;margin:16px;padding:34px 32px;text-align:center;border-color:rgba(255,179,138,.30)}
.confwrap{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none}
.popc h2{margin:8px 0;font-size:1.4rem}
.conf{position:absolute;top:-12px;width:8px;height:12px;border-radius:2px;opacity:.85;animation:fall 2.4s ease-in forwards}
@keyframes fall{to{transform:translateY(340px) rotate(360deg);opacity:0}}
footer.foot{text-align:center;color:var(--text-muted);font-size:.85rem;margin:28px 0 12px;line-height:1.7}footer.foot strong{color:var(--text);font-weight:600}footer.foot span{font-size:.75rem}
textarea{width:100%;min-height:110px;font:16px/1.5 system-ui,sans-serif;padding:12px;border-radius:14px;border:1px solid var(--card-border);background:#121016;color:var(--text);resize:vertical}
.btns{display:flex;flex-wrap:wrap;gap:10px}
.quote{margin:14px 0 0;font-size:.85rem;color:var(--text-muted);font-style:italic}.quote span{display:block;font-style:normal;font-size:.75rem;margin-top:4px}
#journey{display:none}
@page{size:A4;margin:12mm}@media print{html,body{background:#fff!important;min-height:0!important;height:auto}main,#pop,#rain,#sil,#glow,#haze{display:none!important}#journey{display:block;position:static;width:auto;color:#000;background:#fff;font:12pt/1.5 Georgia,serif;padding:24px}#journey h1{font-size:20pt;margin:0 0 4px}#journey table{border-collapse:collapse;width:100%;margin:12px 0}#journey td,#journey th{border:1px solid #999;padding:6px;text-align:left;font-size:10pt}#journey .story{white-space:pre-wrap;border-left:3px solid #999;padding-left:10px}#rain,#glow,#sil,#haze{display:none}}
@media (prefers-reduced-motion:reduce){#glow i{animation:none}#sil{opacity:.35}body.glitch #haze{animation:none;opacity:.18}.conf{display:none}}
label{display:block;font-weight:600;margin:12px 0 4px}
input[type=number],input[type=datetime-local],input[type=date]{width:100%;font:16px system-ui,sans-serif;padding:12px;border-radius:10px;border:1px solid var(--card-border);background:#121016;color:var(--text);color-scheme:dark}
.warn{background:#2a1d1d;border-left:4px solid var(--accent);padding:10px 14px;border-radius:10px;margin:12px 0;font-size:.92rem}
.err{color:#ffb3b3}
.esc{border-left:4px solid var(--ok);padding:8px 12px;background:#221f29;border-radius:8px;margin-top:10px;font-size:.92rem}
ol.steps{padding-left:20px;font-size:.92rem;color:var(--text-muted)}
pre.json{color:var(--text);max-height:340px;overflow:auto}
.small{font-size:.8rem;color:var(--text-muted)}
.h0{margin-top:0}
#childOut>.big:first-child,#childOut>.big{margin-top:14px}
.jfoot{font-size:9pt}
.privacy{margin:.4em 0;padding-left:1.2em}.privacy li{margin:.3em 0}
details.explainer summary{font-weight:600;cursor:pointer;color:var(--ok);list-style:none}
details.explainer summary::-webkit-details-marker{display:none}
details.explainer summary::before{content:"+ ";color:var(--accent-2)}
details.explainer[open] summary::before{content:"\2212  "}
.clearbar{display:flex;align-items:center;gap:.6em;margin:-.4em 0 1em}
.small-btn{font-size:.85em;padding:.35em .8em}
.beginner-toggle{display:inline-block;margin:.2em 0 1em;font-size:.9em;cursor:pointer}
.beginner-only{display:none}
body.beginner .beginner-only{display:block}
.beginner-toggle{display:inline-flex;align-items:center;gap:.4em;font-weight:500}.beginner-toggle input{width:auto;margin:0;padding:0}