:root{--bg:#faf7f2;--surface:#fff;--text:#1f1d2b;--text-muted:#6b6880;--accent:#5b4bdb;--accent-contrast:#fff;--border:#e6e1d8;--radius:14px;--shadow:0 6px 24px #1f1d2b14;--font-ui:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--wheel-1:#5b4bdb;--wheel-2:#efb64a;--wheel-3:#2a9d8f;--wheel-4:#e07a9b;--wheel-5:#4b7bec;--wheel-6:#f4a261;--wheel-7:#43aa8b;--wheel-8:#9b5de5}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{background:var(--bg);min-width:320px;color:var(--text);font-family:var(--font-ui);-webkit-font-smoothing:antialiased;margin:0;line-height:1.5}.page{flex-direction:column;justify-content:center;align-items:center;gap:clamp(1.5rem,4vw,2.5rem);min-height:100svh;padding:clamp(1.5rem,5vw,3rem) 1rem;display:flex}.hero{text-align:center;max-width:38rem}.hero h1{letter-spacing:-.02em;margin:0 0 .5rem;font-size:clamp(2rem,6vw,3.25rem);line-height:1.1}.tagline{color:var(--text-muted);text-wrap:balance;margin:0;font-size:clamp(1rem,2.5vw,1.125rem)}.stage{justify-items:center;gap:1.25rem;width:100%;display:grid}.wheel-preview{aspect-ratio:1;border:10px solid var(--surface);background:conic-gradient(var(--wheel-1) 0deg 45deg, var(--wheel-2) 45deg 90deg, var(--wheel-3) 90deg 135deg, var(--wheel-4) 135deg 180deg, var(--wheel-5) 180deg 225deg, var(--wheel-6) 225deg 270deg, var(--wheel-7) 270deg 315deg, var(--wheel-8) 315deg 360deg);width:min(76vw,21rem);box-shadow:var(--shadow);border-radius:50%;position:relative}.wheel-preview--b{filter:hue-rotate(18deg)}.wheel-preview:before{content:"";border-left:12px solid #0000;border-right:12px solid #0000;border-top:20px solid var(--accent);filter:drop-shadow(0 2px 2px #1f1d2b33);position:absolute;top:-24px;left:50%;transform:translate(-50%)}.wheel-preview:after{content:"";aspect-ratio:1;background:var(--surface);width:18%;box-shadow:inset 0 0 0 4px var(--border), 0 2px 6px #1f1d2b26;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.spin{appearance:none;font:inherit;color:var(--accent-contrast);background:var(--accent);box-shadow:var(--shadow);cursor:pointer;border:0;border-radius:999px;padding:.9rem 2.75rem;font-size:1.125rem;font-weight:600;transition:transform .15s,box-shadow .15s}.spin:hover:not(:disabled){transform:translateY(-1px)}.spin:focus-visible{outline-offset:3px;outline:3px solid #5b4bdb59}.spin:disabled{background:var(--border);color:var(--text-muted);box-shadow:none;cursor:not-allowed}.pending{color:var(--text-muted);text-align:center;margin:0;font-size:.9375rem}@media (prefers-reduced-motion:reduce){.spin{transition:none}}