*{box-sizing:border-box}:root{--ink:#211727;--pink:#ff72ae;--yellow:#ffe66d;--mint:#88e8c3;--purple:#9b7cff;--paper:#fff9f3}
html{background:var(--paper)}body{margin:0;color:var(--ink);font-family:ui-rounded,"SF Pro Rounded","Nunito",system-ui,sans-serif;min-height:100vh;overflow-x:hidden;background:radial-gradient(circle at 10% 5%,#ffd8e9 0,transparent 25%),radial-gradient(circle at 95% 25%,#d9fff1 0,transparent 24%),var(--paper)}
.blob{position:fixed;border-radius:50%;filter:blur(2px);z-index:-1;opacity:.6}.b1{width:220px;height:220px;background:#e2d7ff;right:-100px;top:55%}.b2{width:150px;height:150px;background:#fff0a6;left:-70px;top:70%}
#app,.admin-shell{width:min(760px,calc(100% - 28px));margin:auto;padding:48px 0}.page{display:none}.page.on{display:block;animation:pop .28s ease}.hidden{display:none!important}@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.99)}}
.sticker{display:inline-block;background:var(--yellow);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);padding:7px 10px;border-radius:9px;transform:rotate(-1.5deg);font-size:12px;font-weight:900;letter-spacing:.08em}
h1{font-size:clamp(48px,11vw,88px);line-height:.91;letter-spacing:-.065em;margin:22px 0}h1 em{font-style:normal;color:var(--pink)}.lede{font-size:18px;line-height:1.6;max-width:620px}.muted{opacity:.65}
.glass,.score,.card,.talk,.answer-card{background:rgba(255,255,255,.76);border:2px solid var(--ink);box-shadow:7px 7px 0 var(--ink);border-radius:24px;padding:20px;margin-top:28px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:18px}.stats b{text-align:center;background:#fff;border:1.5px solid var(--ink);padding:12px 5px;border-radius:14px;font-size:20px}.stats span{display:block;font-size:11px;font-weight:600;opacity:.6}
input{width:100%;padding:16px;border:2px solid var(--ink);border-radius:14px;background:#fff;font-size:16px;margin-bottom:10px}button{border:2px solid var(--ink);background:var(--pink);color:var(--ink);font-weight:900;padding:15px 18px;border-radius:14px;box-shadow:3px 3px 0 var(--ink);font-size:15px}button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}#go{width:100%}.glass small{display:block;text-align:center;opacity:.55;margin-top:12px}
header{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;position:sticky;top:0;padding:10px 0;background:rgba(255,249,243,.85);backdrop-filter:blur(10px);z-index:3}#prev{background:#fff;padding:9px 12px}.track{height:10px;border:2px solid var(--ink);border-radius:20px;background:#fff;overflow:hidden}.track i{display:block;height:100%;background:var(--mint);width:0}.qbox{padding-top:44px}.chip{display:inline-block;background:#e2d7ff;border:2px solid var(--ink);padding:7px 11px;border-radius:999px;font-weight:900;font-size:12px}.qbox h2{font-size:clamp(31px,7vw,52px);line-height:1.03;letter-spacing:-.04em;margin:18px 0 8px}.qbox>p{opacity:.62;line-height:1.5;min-height:22px}#opts{display:grid;gap:11px;margin-top:25px}.opt{width:100%;background:#fff;text-align:left;display:flex;align-items:center;gap:12px;padding:16px}.opt:hover{background:#fff4f8}.key{background:var(--yellow);border:1.5px solid var(--ink);width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none}
.score{display:grid;grid-template-columns:150px 1fr;align-items:center;gap:22px}.score #ring{width:140px;height:140px;border-radius:50%;background:conic-gradient(var(--pink) var(--deg),#fff 0);border:2px solid var(--ink);display:grid;place-content:center;text-align:center;box-shadow:4px 4px 0 var(--ink)}#ring strong{font-size:34px}#ring small{font-size:11px}.score h2{margin:0 0 5px}.score p{margin:0;line-height:1.5;opacity:.7}
#result h3,.admin-shell h3{margin:36px 0 12px}.cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}.card{box-shadow:3px 3px 0 var(--ink);margin:0;border-radius:17px}.card b{display:block;font-size:17px}.card span{font-size:12px;opacity:.6}.meter{height:8px;background:#eee;border:1px solid var(--ink);border-radius:9px;margin-top:12px;overflow:hidden}.meter i{display:block;height:100%;background:var(--mint)}.gap .meter i{background:#ffb6ce}.talk{margin:10px 0;box-shadow:3px 3px 0 var(--ink);font-weight:700}.buttons,.admin-actions{display:flex;gap:10px;margin-top:30px}.soft{background:#fff}.save-state{font-size:13px;opacity:.65;margin-top:18px}.center{padding-top:14vh}
.admin-body{background:radial-gradient(circle at 90% 5%,#e2d7ff 0,transparent 25%),var(--paper)}.admin-shell{width:min(980px,calc(100% - 28px))}.admin-actions{margin-bottom:25px}.error{color:#b4234d;font-weight:800}.answer-card{box-shadow:4px 4px 0 var(--ink);margin:14px 0}.answer-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.answer-top>b{font-size:13px}.answer-card h2{font-size:21px;margin:16px 0 8px}.answer-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.answer-grid>div{border:1.5px solid var(--ink);border-radius:14px;padding:12px;background:#fff}.answer-grid small{font-weight:900;letter-spacing:.08em;opacity:.5}.answer-grid p{margin:6px 0 0;line-height:1.45}.answer-card.hard-gap{border-color:#b4234d;box-shadow:4px 4px 0 #b4234d}.answer-card.match{border-color:#208a64}
footer{text-align:center;font-size:12px;opacity:.5;padding:20px}
@media(max-width:600px){#app,.admin-shell{padding-top:30px}.score{grid-template-columns:1fr;text-align:center}.score #ring{margin:auto}.cards,.answer-grid{grid-template-columns:1fr}.buttons,.admin-actions{flex-direction:column}.stats b{font-size:17px}.qbox{padding-top:30px}.answer-card h2{font-size:18px}}
.autosave{position:sticky;top:58px;z-index:2;width:max-content;margin-left:auto;font-size:12px;font-weight:900;padding:6px 9px;border-radius:999px;background:#fff;border:1.5px solid var(--ink)}
.autosave.ok{background:#dffff3}.autosave.warn{background:#fff1b8}.autosave.saving{background:#efeaff}
.save-banner,.progress-card{margin:20px 0;padding:14px 16px;border:2px solid var(--ink);border-radius:16px;background:#fff;box-shadow:3px 3px 0 var(--ink)}
.save-banner.good{background:#dffff3}.save-banner.bad{background:#fff1b8}.chosen{background:#fff0f6!important}.unanswered{opacity:.72}
