:root{color:#f7f1e8;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--bg:#10131a;--bg-soft:#171d27;--panel:#f7f1e8;--panel-text:#121620;--muted:#b8bfce;--border:#303948;--accent:#2bb673;--accent-strong:#1f9a5f;--page-padding-y:20px;--wheel-size:min(78vw, 44svh, 330px);--marker-radius:calc(var(--wheel-size) * .36);background:#10131a;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:1.5}*{box-sizing:border-box}body{min-width:320px;min-height:100svh;margin:0}button,input,textarea,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed}#app{min-height:100svh}.app-shell{min-height:100svh;padding:var(--page-padding-y) 18px;background:radial-gradient(circle at 20% 14%,#2bb67338,#0000 28%),radial-gradient(circle at 86% 18%,#f6b73c2e,#0000 24%),linear-gradient(145deg,#10131a 0%,#151b25 58%,#10131a 100%);place-items:center;display:grid}.hero-panel{gap:0;width:min(100%,760px);margin:0 auto;display:grid}.intro{text-align:center;justify-items:center;gap:8px;display:grid}.eyebrow{color:var(--accent);letter-spacing:0;text-transform:uppercase;margin:0;font-size:13px;font-weight:800}h1,h2,p{margin:0}h1{color:#f7f1e8;text-align:center;max-width:620px;font-size:clamp(34px,8vw,64px);font-weight:900;line-height:.96}.subtitle{max-width:420px;color:var(--muted);font-size:17px;line-height:1.45}.experience{justify-items:center;gap:22px;width:100%;display:grid}.wheel-stage{width:var(--wheel-size);height:calc(var(--wheel-size) + 20px);place-items:end center;display:grid;position:relative}.pointer{z-index:4;filter:drop-shadow(0 5px 8px #00000047);border-top:32px solid #f7f1e8;border-left:18px solid #0000;border-right:18px solid #0000;width:0;height:0;position:absolute;top:0}.wheel{width:var(--wheel-size);height:var(--wheel-size);will-change:transform;border:10px solid #323b4e;border-radius:50%;place-items:center;transition:transform 3.6s cubic-bezier(.16,1,.3,1);display:grid;position:relative;overflow:hidden;box-shadow:0 22px 46px #00000052,inset 0 0 0 2px #fff3}.wheel:before{content:"";border:1px solid #ffffff47;border-radius:50%;position:absolute;inset:10px}.wheel:after{content:"";opacity:.58;background:repeating-conic-gradient(from -22.5deg,#ffffff3d 0deg 1.4deg,#0000 1.4deg 45deg);position:absolute;inset:0}.flavor-position{z-index:2;width:1px;height:1px;transform:rotate(var(--segment-angle)) translateY(calc(var(--marker-radius) * -1));transform-origin:50%;position:absolute;top:50%;left:50%}.flavor-marker{color:#fff;border-radius:10px;place-items:center;width:clamp(68px,22vw,92px);min-height:clamp(52px,16vw,68px);padding:8px;display:grid;transform:translate(-50%,-50%)}.flavor-marker span{overflow-wrap:anywhere;text-align:center;max-width:100%;font-size:clamp(10px,2.6vw,12px);font-weight:900;line-height:1.12;display:block}.wheel-center{z-index:3;width:clamp(76px,22vw,96px);height:clamp(76px,22vw,96px);color:var(--bg);background:#f7f1e8;border:8px solid #10131a;border-radius:50%;place-items:center;display:grid;position:relative;box-shadow:0 10px 24px #00000047}.wheel-center span{font-size:25px;font-weight:950}.controls{width:min(100%,420px)}.spin-button{color:#fff;background:var(--accent);border:0;border-radius:8px;width:100%;min-height:56px;padding:0 22px;font-size:18px;font-weight:900;transition:background .16s,box-shadow .16s,transform .16s;box-shadow:0 12px 24px #2bb6733d}.spin-button:hover:not(:disabled){background:var(--accent-strong);transform:translateY(-1px);box-shadow:0 16px 28px #2bb6734d}.spin-button:active:not(:disabled){transform:translateY(1px)scale(.99)}.spin-button:focus-visible{outline-offset:4px;outline:3px solid #f7f1e8cc}.spin-button:disabled{box-shadow:none;background:#526070}.modal-backdrop{z-index:20;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#080a0ebd;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.result-modal{width:min(100%,440px);color:var(--panel-text);text-align:center;background:var(--panel);border:1px solid #ffffff8c;border-radius:8px;justify-items:center;padding:26px 22px 22px;display:grid;box-shadow:0 28px 70px #0000005c}.result-swatch{border:2px solid #10131a1f;border-radius:50%;width:34px;height:34px;margin-bottom:12px}.result-swatch.muted{background:linear-gradient(135deg,#d6d0c5 0 48%,#b7bcc8 50% 100%)}.result-label{color:#667080;letter-spacing:0;text-transform:uppercase;margin-bottom:6px;font-size:12px;font-weight:900}.result-modal h2{color:var(--panel-text);margin-bottom:10px;font-size:clamp(23px,6vw,30px);font-weight:950;line-height:1.08}.result-modal p:last-of-type{color:#3d4552;max-width:370px;font-size:16px;line-height:1.46}.modal-button{color:#fff;background:var(--bg);border:0;border-radius:8px;width:100%;min-height:48px;margin-top:22px;padding:0 18px;font-size:16px;font-weight:900;transition:background .16s,transform .16s}.modal-button:hover{background:#222a38}.modal-button:active{transform:translateY(1px)}.modal-button:focus-visible{outline-offset:3px;outline:3px solid #2bb6736b}@media (width>=860px){:root{--page-padding-y:32px;--wheel-size:min(42vw, 48svh, 396px);--marker-radius:calc(var(--wheel-size) * .37)}.app-shell{padding:32px}.subtitle{font-size:18px}}@media (width<=380px){.app-shell{padding-left:14px;padding-right:14px}.flavor-marker{width:64px;min-height:50px;padding:6px}}@supports (height:100dvh){body,#app,.app-shell{min-height:100dvh}:root{--wheel-size:min(78vw, 44dvh, 330px)}@media (width>=860px){:root{--wheel-size:min(42vw, 48dvh, 396px)}}}@media (height<=720px){:root{--page-padding-y:14px;--wheel-size:min(76vw, 40svh, 300px)}.experience{gap:16px}.intro{gap:6px}.eyebrow{font-size:12px}h1{font-size:clamp(31px,7.5vw,42px)}.subtitle{font-size:15px;line-height:1.35}.wheel-stage{height:calc(var(--wheel-size) + 16px)}.spin-button{min-height:52px}}@supports (height:100dvh){@media (height<=720px){:root{--wheel-size:min(76vw, 40dvh, 300px)}}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important}.wheel,.spin-button{transition-duration:1ms}}