:root{--orange:#f73b20;--ink:#360802;--paper:#fffdf9;--line:#decfc5;--blush:#fdedea}*{box-sizing:border-box}html{background:var(--paper)}body{margin:0;min-height:100vh;color:var(--ink);font-family:"DM Sans",sans-serif;overflow-x:hidden;background:radial-gradient(circle at 12% 18%,#f73b2012,transparent 26%),radial-gradient(ellipse at 85% 70%,#e8d7cacc,transparent 37%),linear-gradient(115deg,transparent 42%,#b4968212 43%,transparent 45%),#faf6f1}.noise{position:fixed;inset:0;pointer-events:none;opacity:.18;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E")}button,a{font:inherit}.wrap{width:min(1200px,calc(100% - 48px));margin:auto}.nav{height:94px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #36080221}.brand{font-size:24px;color:var(--ink);text-decoration:none;letter-spacing:-1px;font-weight:500}.brand span{color:var(--orange)}.nav-note{font-size:13px;letter-spacing:.06em;display:flex;align-items:center;gap:9px}.nav-note i{width:7px;height:7px;background:var(--orange);border-radius:50%;box-shadow:0 0 0 5px #f73b201a}.sound{border:0;background:none;color:var(--ink);display:flex;gap:9px;align-items:center;font-size:12px;cursor:pointer}.sound-bars{height:14px;display:flex;gap:2px;align-items:center}.sound-bars b{width:2px;background:var(--orange);animation:bars 1s infinite}.sound-bars b:nth-child(1){height:7px}.sound-bars b:nth-child(2){height:13px}.sound-bars b:nth-child(3){height:9px}.sound[aria-pressed=false] b{animation:none;height:2px}@keyframes bars{50%{transform:scaleY(.45)}}.hero{min-height:calc(100vh - 150px);display:grid;grid-template-columns:.88fr 1.12fr;align-items:center;gap:38px;padding:46px 0}.intro{z-index:2}.eyebrow{text-transform:uppercase;color:var(--orange);font-size:11px;letter-spacing:.18em;margin:0 0 24px;display:flex;gap:12px;align-items:center}.eyebrow:before{content:"";height:1px;width:32px;background:var(--orange)}h1{font-weight:500;font-size:clamp(58px,7.1vw,106px);line-height:.89;letter-spacing:-.055em;margin:0 0 30px}h1 em{font-style:normal;color:var(--orange)}.lede{max-width:460px;font-size:17px;line-height:1.55;margin:0;color:#360802b8}.howto{display:flex;align-items:center;gap:15px;margin-top:42px}.gesture-icon{display:grid;place-items:center;background:var(--ink);color:white;width:46px;height:46px;border-radius:50%}.howto strong,.howto small{display:block}.howto strong{font-size:14px}.howto small{font-size:12px;opacity:.55;margin-top:3px}.wheel-stage{position:relative;display:grid;place-items:center;isolation:isolate}.wheel-shell{width:min(600px,42vw);aspect-ratio:1;border-radius:50%;position:relative;touch-action:none;cursor:grab;filter:drop-shadow(0 22px 25px #3608021c);z-index:2}.wheel-shell.dragging{cursor:grabbing}.wheel-shell.spinning{cursor:wait}canvas{width:100%;height:100%;display:block;border-radius:50%;will-change:transform}.hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:21%;aspect-ratio:1;border-radius:50%;border:7px solid var(--paper);background:var(--ink);color:white;display:grid;place-content:center;cursor:pointer;box-shadow:0 8px 24px #3608023d;transition:.2s}.hub:hover{transform:translate(-50%,-50%) scale(1.05)}.hub span{font-size:clamp(10px,1.05vw,14px);letter-spacing:.12em}.hub small{font-size:9px;opacity:.65}.pointer{position:absolute;z-index:4;top:2%;left:50%;transform:translateX(-50%);width:34px;height:50px;background:var(--orange);clip-path:polygon(0 0,100% 0,50% 100%);filter:drop-shadow(0 4px 4px #36080233)}.pointer span{display:block;background:white;width:8px;height:8px;border-radius:50%;margin:8px auto}.orbit{position:absolute;border:1px solid #36080221;border-radius:50%;z-index:-1}.orbit.one{width:104%;aspect-ratio:1}.orbit.two{width:116%;aspect-ratio:1;border-style:dashed;animation:orbit 40s linear infinite}@keyframes orbit{to{transform:rotate(360deg)}}.drag-hint{text-transform:uppercase;letter-spacing:.14em;font-size:10px;opacity:.5;margin:15px}.drag-hint span{color:var(--orange);margin:0 8px}.footer{height:56px;border-top:1px solid #36080221;display:flex;justify-content:space-between;align-items:center;font-size:10px;text-transform:uppercase;letter-spacing:.12em;opacity:.55}.result-overlay{position:fixed;z-index:20;inset:0;display:grid;place-items:center;padding:20px;background:#36080240;backdrop-filter:blur(14px)}.result-overlay[hidden]{display:none}.result-card{position:relative;width:min(560px,100%);padding:54px;background:var(--paper);border-radius:24px;box-shadow:0 25px 80px #36080238;text-align:center;animation:pop .45s cubic-bezier(.2,.9,.3,1.2)}@keyframes pop{from{opacity:0;transform:scale(.86) translateY(20px)}}.result-card .eyebrow{justify-content:center;margin-bottom:20px}.result-card .eyebrow:after{content:"";height:1px;width:32px;background:var(--orange)}.result-icon{width:82px;height:82px;border-radius:50%;display:grid;place-items:center;background:var(--blush);color:var(--orange);font-size:36px;margin:0 auto 20px}.result-card h2{font-size:clamp(38px,6vw,62px);line-height:.95;letter-spacing:-.04em;font-weight:500;margin:0}.result-card>p:not(.eyebrow){font-size:14px;opacity:.62;margin:18px auto 28px;max-width:360px;line-height:1.5}.result-actions{display:flex;gap:10px;justify-content:center}.result-actions button{padding:13px 19px;border-radius:12px;cursor:pointer}.primary{border:1px solid var(--orange);background:var(--orange);color:white}.secondary{border:1px solid var(--line);background:transparent;color:var(--ink)}.close-result{position:absolute;right:18px;top:16px;border:0;background:none;font-size:27px;opacity:.5;cursor:pointer}.toast{position:fixed;z-index:30;left:50%;bottom:28px;transform:translate(-50%,100px);opacity:0;background:var(--ink);color:white;border-radius:999px;padding:13px 20px;font-size:13px;transition:.35s}.toast.show{transform:translate(-50%,0);opacity:1}
@media(max-width:850px){.nav{height:74px}.nav-note{display:none}.hero{grid-template-columns:1fr;text-align:center;padding:35px 0 28px;gap:35px}.intro{display:grid;justify-items:center}.wheel-stage{order:-1}.wheel-shell{width:min(88vw,520px)}h1{font-size:clamp(54px,16vw,82px)}.lede{font-size:15px}.howto{margin-top:25px;text-align:left}.pointer{top:0}.orbit.two{width:108%}.footer{margin-top:30px;justify-content:center}.footer p:last-child{display:none}.result-card{padding:48px 24px 30px}}@media(max-width:480px){.wrap{width:calc(100% - 28px)}.sound>span:last-child{display:none}.wheel-shell{width:91vw}.orbit{display:none}.wheel-stage{margin-inline:-7px}h1{margin-bottom:22px}.howto{display:none}.result-actions{flex-direction:column}.result-actions button{width:100%}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important}}