:root{--bg:#1f1747;--s:#2f2466;--s2:#433488;--tx:#fff8ee;--g:#5ef2c0;--y:#ffd84d;--c:#ff8a7a;--bt:#12302a;--r:18px;color-scheme:dark light}
@media(prefers-color-scheme:light){:root{--bg:#fff7e8;--s:#fff;--s2:#ffe6bd;--tx:#241a52;--g:#00695c;--y:#8a4b00;--c:#b3261e;--bt:#fff}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--tx);font:clamp(1rem,.95rem + .3vw,1.2rem)/1.65 ui-rounded,"Trebuchet MS","Segoe UI",system-ui,sans-serif}
.skip{position:absolute;left:-999px}
.skip:focus{left:8px;top:8px;z-index:9;background:var(--y);color:#000;padding:.6rem 1rem;border-radius:10px}
header{padding:1.2rem clamp(1rem,4vw,2.5rem);background:linear-gradient(135deg,var(--s2),var(--s))}
h1{margin:0;font-size:clamp(1.8rem,6vw,3rem);line-height:1.1}
header p{margin:.3rem 0;max-width:60ch}
.bt{font-weight:800;color:var(--y)}
.em{display:inline-block;animation:fly 2.5s ease-in-out infinite}
@keyframes fly{50%{transform:translate(8px,-8px) rotate(8deg)}}
progress{width:100%;max-width:40rem;height:1.1rem;accent-color:var(--g)}
nav ul{display:flex;gap:.5rem;list-style:none;margin:0;padding:.8rem clamp(1rem,4vw,2.5rem);overflow-x:auto}
@media(min-width:60rem){nav ul{flex-wrap:wrap}}
nav button{min-height:44px;white-space:nowrap;padding:.4rem 1rem;border:2px solid var(--s2);border-radius:999px;background:var(--s);color:var(--tx);font:inherit;cursor:pointer}
nav button[aria-current=page]{background:var(--y);border-color:var(--y);color:#1b1400;font-weight:800}
main{max-width:62rem;margin:0 auto;padding:1rem clamp(1rem,4vw,2rem)}
h2{font-size:clamp(1.5rem,4.5vw,2.3rem);line-height:1.2;margin:.5rem 0 1rem}
h3{font-size:1.35rem;margin:2rem 0 .3rem}
.sub{margin:0 0 .8rem;color:var(--y)}
.story{background:var(--s);border-left:8px solid var(--y);padding:1rem 1.3rem;border-radius:var(--r);max-width:70ch}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,14rem),1fr));gap:.9rem}
.card{min-height:7.5rem;display:grid;place-items:center;text-align:center;padding:1rem;font:inherit;color:var(--tx);background:var(--s);border:3px solid var(--g);border-radius:var(--r);cursor:pointer;transition:transform .15s}
.card:hover{transform:translateY(-3px) rotate(-1deg)}
.card[aria-pressed=true]{background:var(--s2);border-color:var(--y)}
code{font-family:ui-monospace,Consolas,monospace;color:var(--g);font-size:1.1em;font-weight:700;overflow-wrap:anywhere}
.match{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:0 1rem}
.opt{display:block;width:100%;min-height:44px;margin:.4rem 0;text-align:left;font:inherit;color:var(--tx);background:var(--s);border:3px solid var(--s2);border-radius:14px;padding:.55rem 1rem;cursor:pointer}
.opt:hover:not(:disabled){border-color:var(--y)}
.opt[aria-pressed=true]{border-color:var(--y);background:var(--s2)}
.opt.ok{border-color:var(--g);background:var(--s2);opacity:1}
.opt.ok::after{content:" ✅"}
.opt:disabled{cursor:default}
.msg{min-height:1.7em;margin:.3rem 0;font-weight:800;color:var(--y)}
.qz{border:3px dashed var(--s2);border-radius:var(--r);margin:0 0 1rem;padding:.6rem 1rem}
legend{font-weight:800;padding:0 .4rem}
.term{background:#0a1220;color:#d8ffe8;border:3px solid #5ef2c0;border-radius:var(--r);padding:1rem;font-family:ui-monospace,Consolas,monospace}
.term label{display:block;color:#c9d6f2}
.mis{margin:0 0 .5rem;color:#ffd84d;font-weight:700}
.log{min-height:4rem;max-height:14rem;overflow:auto;margin:.5rem 0}
.log .ok{color:#5ef2c0}.log .bad{color:#ff9ab8}.log .hint{color:#ffd84d}
.row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.ps{color:#5ef2c0;font-weight:800}
.row input{flex:1 1 10rem;min-width:0;min-height:44px;padding:.4rem .7rem;font:inherit;color:#fff;background:#16223d;border:2px solid #5ef2c0;border-radius:10px}
.btn{min-height:44px;padding:.5rem 1.2rem;border:0;border-radius:999px;background:var(--g);color:var(--bt);font:inherit;font-weight:800;cursor:pointer}
.btn.alt{background:var(--s2);color:var(--tx);border:2px solid var(--y)}
.btn:disabled{opacity:.5;cursor:default}
.pn{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;margin:2rem 0}
footer{padding:1rem clamp(1rem,4vw,2rem) 5rem;text-align:center;opacity:.85}
#toast{position:fixed;left:50%;bottom:1rem;max-width:90vw;transform:translate(-50%,200%);background:var(--s2);color:var(--tx);border:3px solid var(--y);border-radius:999px;padding:.6rem 1.4rem;font-weight:800;transition:transform .3s}
#toast.show{transform:translate(-50%,0)}
:focus-visible{outline:4px solid var(--y);outline-offset:3px}
@media(prefers-reduced-motion:reduce){*,.em{animation:none!important;transition:none!important}}
:root[data-theme=dark]{--bg:#1f1747;--s:#2f2466;--s2:#433488;--tx:#fff8ee;--g:#5ef2c0;--y:#ffd84d;--c:#ff8a7a;--bt:#12302a}
:root[data-theme=light]{--bg:#fff7e8;--s:#fff;--s2:#ffe6bd;--tx:#241a52;--g:#00695c;--y:#8a4b00;--c:#b3261e;--bt:#fff}
.log div{white-space:pre-wrap;overflow-wrap:anywhere}
.goals{list-style:none;padding:0}.goals li{margin:.35rem 0}
h4{font-size:1.15rem;margin:1.2rem 0 .3rem}