:root{--bg-0: #ece8df;--bg-1: #f6f3ec;--panel: rgba(255, 255, 255, .72);--panel-border: rgba(0, 0, 0, .08);--panel-shadow: 0 18px 44px -18px rgba(20, 18, 12, .25);--text: #15151a;--text-dim: rgba(21, 21, 26, .62);--text-faint: rgba(21, 21, 26, .42);--accent: #d63ad0;--accent-2: #2658d6;--mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;--sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif}*{box-sizing:border-box;margin:0;padding:0}[hidden]{display:none!important}.confetti{position:fixed;inset:0;pointer-events:none;z-index:100;overflow:hidden}.confetti-piece{position:absolute;top:30vh;width:8px;height:12px;border-radius:2px;opacity:0;animation:confetti-fall 2.2s cubic-bezier(.18,.7,.3,1) forwards;will-change:transform,opacity}@keyframes confetti-fall{0%{transform:translate(0) rotate(0);opacity:1}85%{opacity:1}to{transform:translate(var(--dx),var(--dy)) rotate(var(--rot));opacity:0}}html,body{width:100%;height:100%;overflow:hidden;background:radial-gradient(ellipse at 50% 55%,var(--bg-1) 0%,var(--bg-0) 70%);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased;letter-spacing:-.01em}#canvas{position:fixed;inset:0;width:100vw;height:100vh;display:block;touch-action:none}.topbar{position:fixed;top:18px;left:0;right:0;display:flex;justify-content:center;align-items:center;gap:10px;pointer-events:none;z-index:4}.title{display:inline-flex;align-items:center;gap:8px}.title .dot{width:9px;height:9px;border-radius:50%;background:conic-gradient(from 0deg,#ff3b3b,#ffb13b,#f8ff3b,#4dff3b,#3bffd5,#3b7bff,#b13bff,#ff3bb1,#ff3b3b);box-shadow:0 0 18px #d63ad059}.title h1{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}.stage{position:fixed;top:56px;left:50%;transform:translate(-50%);z-index:3;display:flex;justify-content:center}.card{background:var(--panel);backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);border:1px solid var(--panel-border);border-radius:14px;box-shadow:var(--panel-shadow);animation:cardIn .32s cubic-bezier(.2,.7,.2,1) both}@keyframes cardIn{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.card-label{font:600 9.5px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint)}.card-help{font-size:11.5px;line-height:1.4;color:var(--text-dim)}.btn.start-btn{flex:0 0 auto;padding:18px 44px;font:600 17px var(--sans);letter-spacing:.02em;border-radius:13px;animation:cardIn .32s cubic-bezier(.2,.7,.2,1) both}.color-overlay{position:fixed;inset:0;z-index:10;background:#d4d0c6;opacity:0;pointer-events:none;transition:opacity .28s ease}.color-overlay.show{opacity:1;pointer-events:auto}.color-overlay-bar{position:absolute;left:50%;bottom:48px;transform:translate(-50%);width:220px;height:4px;background:#0000002e;border-radius:999px;overflow:hidden}.color-overlay-bar-fill{height:100%;width:100%;background:#0000008c;transform-origin:left;transform:scaleX(1)}.result-card{width:260px;padding:14px 14px 12px;display:flex;flex-direction:column;gap:10px}.score-block{text-align:center;padding:2px 0 4px}.score-pct{font:700 50px var(--sans);letter-spacing:-.04em;line-height:1;background:linear-gradient(180deg,#15151a,#4a4a55);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-variant-numeric:tabular-nums}.score-pct-suffix{font:700 22px var(--sans);color:var(--text-dim);margin-left:2px;vertical-align:top;position:relative;top:5px}.result-stats{display:flex;justify-content:center;gap:6px;font:500 11px var(--sans);color:var(--text-dim)}.result-stats .k{color:var(--text-faint);margin-right:3px;font-size:10px;letter-spacing:.05em;text-transform:uppercase}.result-stats .sep{color:#0000002e}.crowd-stats{text-align:center;font:500 10.5px var(--mono);letter-spacing:.05em;color:var(--text-faint);text-transform:uppercase;min-height:13px}.crowd-stats .you{color:var(--text)}.crowd-stats .ok{color:#1f8a3f}.crowd-stats .meh{color:#b06a00}.result-actions{display:flex;gap:7px;margin-top:2px}.btn{flex:1;padding:10px 12px;font:600 12px var(--sans);letter-spacing:.02em;border:none;border-radius:9px;cursor:pointer;transition:transform .1s ease,background .2s ease,color .2s ease,box-shadow .2s ease}.btn:active{transform:translateY(1px)}.btn-primary{color:#f4f4f7;background:linear-gradient(180deg,#1a1a20,#0d0d12);box-shadow:0 8px 18px -10px #00000073}.btn-primary:hover{filter:brightness(1.08)}.btn-secondary{color:var(--text);background:#0000000d;border:1px solid rgba(0,0,0,.08)}.btn-secondary:hover{background:#00000017}.hud{position:fixed;bottom:14px;left:50%;transform:translate(-50%);display:flex;gap:9px;align-items:center;font:500 10px var(--mono);letter-spacing:.06em;color:var(--text-faint);text-transform:uppercase;pointer-events:none;z-index:2}.hud .sep{color:#00000026}.toast{position:fixed;left:50%;bottom:56px;transform:translate(-50%,8px);padding:8px 13px;background:#14141aeb;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(0,0,0,.2);border-radius:999px;font:500 11.5px var(--sans);color:#f4f4f7;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;z-index:5}.toast.show{opacity:1;transform:translate(-50%)}@media (max-width: 540px){.stage{top:52px}.result-card{width:min(260px,calc(100vw - 32px))}.score-pct{font-size:44px}.hud{font-size:9px;gap:7px;bottom:12px}.color-overlay-bar{width:180px;bottom:42px}}