:root { --bg:#000; --fg:#fff; --muted:#bdbdbd; }
*{box-sizing:border-box} html,body,#app{height:100%} body{margin:0;background:#000;color:#fff;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
.stage{position:absolute;inset:0;display:none;align-items:center;justify-content:center;padding:clamp(16px,4vw,40px)} .stage.active{display:flex;animation:fadeIn .7s ease both}
.center{width:min(920px,100%);text-align:center} .headline{font-size:clamp(28px,6vw,64px);font-weight:800;margin:0 0 12px;letter-spacing:-.5px}
.headline.small{font-size:clamp(22px,5.4vw,48px)} .accent{background:linear-gradient(90deg,#fff,#aaa);-webkit-background-clip:text;background-clip:text;color:transparent}
.logo{width:clamp(120px,30vw,220px);margin:24px auto 18px;display:block;filter:drop-shadow(0 0 12px rgba(255,255,255,.2))}
.pulse{animation:pulse 1.5s ease-in-out infinite}
.btn{border:1px solid #fff;background:#fff;color:#000;padding:12px 18px;border-radius:999px;font-weight:700;cursor:pointer}
.btn.ghost{background:transparent;color:#ccc;border-color:#666} .btn.large{padding:16px 22px}
.question-text{font-size:clamp(22px,5.6vw,48px);font-weight:800;margin:0 0 20px}
.marquee{overflow:hidden;white-space:nowrap;color:#777;font-size:clamp(12px,3.3vw,14px);text-transform:uppercase;letter-spacing:2px;margin-bottom:8px;opacity:.8;animation:marquee 14s linear infinite}
.picker{margin:26px 0 26px}
input[type=range]{-webkit-appearance:none;width:100%;height:28px;background:transparent;outline:none}
input[type=range]::-webkit-slider-runnable-track{height:4px;background:#333;border-radius:2px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;margin-top:-11px;border:0;box-shadow:0 0 0 6px rgba(255,255,255,.12)}
.ticks{display:grid;grid-template-columns:repeat(6,1fr);gap:0;margin:10px 2px 4px}
.ticks::before,.ticks::after{content:""} .ticks div,.ticks::before,.ticks::after{height:8px;width:2px;background:#555;margin:0 auto}
.grade-display{margin-top:6px;font-size:clamp(16px,3.8vw,18px);color:#bbb;display:flex;gap:8px;justify-content:center;align-items:baseline}
.grade-badge{display:inline-block;min-width:42px;padding:6px 12px;border:1px solid #666;border-radius:999px;font-weight:800;color:#000;background:#fff}
.bars{display:grid;gap:12px;margin:18px 0 4px}
.bar{display:grid;grid-template-columns:56px 1fr 72px;gap:10px;align-items:center}
.bar .track{background:#161616;border:1px solid #333;height:26px;border-radius:18px;overflow:hidden;position:relative}
.bar .fill{position:absolute;inset:0;width:0;background:#fff;transform-origin:left;animation:grow .9s both cubic-bezier(.2,.9,.2,1.1)}
.total{color:#9c9c9c;font-size:14px;margin-top:2px}
.divider{height:1px;background:#222;margin:18px 0 14px}
.setter-box{border:1px solid #333;border-radius:18px;padding:14px;background:#0a0a0a}
.setter-label{text-transform:uppercase;letter-spacing:1.2px;color:#9c9c9c;font-size:12px}
.setter-grade{font-size:clamp(34px,9vw,64px);font-weight:900;margin-top:4px}
.setter-note{color:#9c9c9c;font-size:14px}
.vignette{position:absolute;inset:-20%;background:radial-gradient(ellipse at center, rgba(255,255,255,.08), rgba(0,0,0,.0) 40%);pointer-events:none;animation:glow 6s ease-in-out infinite alternate;opacity:.6}
#toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:rgba(255,255,255,.98);color:#000;padding:10px 14px;border-radius:999px;box-shadow:0 8px 24px rgba(0,0,0,.36);font-weight:700;display:none;z-index:999}
/* Animations */
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} @keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}} @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} @keyframes glow{from{opacity:.5}to{opacity:.9}} @keyframes grow{from{width:0}to{width:var(--to,0%)}}
/* Safe areas */
@supports(padding:max(0px)){.stage{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));padding-bottom:max(16px,env(safe-area-inset-bottom))}}
/* Logos on question & results with gentle fade-in */
.question-logo,.results-logo{display:block;margin:0 auto 20px auto;width:clamp(120px,40vw,180px);opacity:0;animation:logoFadeIn 1.5s ease forwards}
.results-logo{animation-delay:.3s}
@keyframes logoFadeIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}