@font-face{font-family:DM;src:url(dm-sans.ttf) format("truetype");font-weight:400;font-display:swap}*{box-sizing:border-box}html{background:#e6f2de}body{margin:0;color:#22231f;font-family:DM,"Arial",sans-serif;min-height:100svh;display:flex;flex-direction:column}button,a{font:inherit;color:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #6a35a8;outline-offset:5px}header,footer{background:#faf9ef}header{border-bottom:2px solid #22231f}.head-inner,.foot-inner{max-width:1512px;margin:auto;padding:0 clamp(24px,5.1vw,88px);display:flex;justify-content:space-between;align-items:center}.head-inner{height:82px}.brand{display:flex;align-items:center;gap:10px;font-size:39px;letter-spacing:-3px;line-height:1;font-weight:950;text-decoration:none}.brandmark{display:block;width:43px;height:43px}nav{display:flex;gap:24px;align-items:center}nav button{border:0;background:none;font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px}#sound{border:1.5px solid;border-radius:25px;padding:8px 13px}.help-icon{display:inline-grid;place-items:center;width:17px;height:17px;border:1.6px solid;border-radius:50%;font-size:12px}.sound-icon{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
main{width:100%;max-width:1440px;margin:auto;flex:1;padding:clamp(44px,5.4vh,76px) clamp(28px,6.6vw,100px);display:grid;grid-template-columns:1.04fr 1fr;gap:clamp(34px,5vw,84px);align-items:center}#checkin{max-width:570px;width:100%;position:relative;z-index:2}.eyebrow{font:700 11px/1.2 ui-monospace,Menlo,monospace;letter-spacing:1.3px}.tag{display:inline-flex;gap:9px;align-items:center;border:1.5px solid #25251f;background:#d5b8f0;border-radius:20px;padding:7px 12px;transform:rotate(-2deg)}.tag b{font:17px/.7 Arial}.qmeta{display:flex;align-items:center;gap:12px}.count{font:600 11px ui-monospace,Menlo,monospace;letter-spacing:.7px;color:#535d4e}h1{font-size:clamp(59px,5.8vw,88px);letter-spacing:-.079em;line-height:.99;margin:23px 0 14px;font-weight:950}h1 em{font-style:normal;position:relative;isolation:isolate;white-space:nowrap}h1 em:before{content:"";position:absolute;left:-1%;right:-3%;bottom:5%;height:18%;z-index:-1;background:#bd98e7;transform:rotate(-3deg);border-radius:75% 20% 45% 10%}.desc{font-size:17px;line-height:1.45;margin:0 0 22px;color:#454c40}.choices{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}.choice{border:1.7px solid #24251e;border-radius:12px;background:#fbfaef;padding:12px 5px 10px;box-shadow:2px 3px 0 #24251e;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;font-weight:750;font-size:15px;transition:transform .15s,background .15s;min-height:84px}.choice:hover{transform:translateY(-2px);background:#fffdf4}.choice[aria-pressed=true]{background:#dfc5f7;transform:translate(2px,2px);box-shadow:0 1px 0 #24251e}.face{display:block;width:36px;height:36px;overflow:visible}.primary{border:2px solid #22231f;border-radius:10px;background:#25261f;color:white;font-weight:750;font-size:16px;display:flex;justify-content:center;align-items:center;gap:20px;min-height:49px;padding:10px 30px;box-shadow:3px 3px 0 #9dba8c}.primary:hover{background:#383b32}.primary span{font:24px/1 Arial}.actions{display:flex;align-items:center;gap:14px;margin-top:19px}.actions .primary{flex:1}.back,.again{background:none;border:0;text-decoration:underline;text-underline-offset:4px;font-weight:650}.error{font-size:13px;font-weight:650;color:#693b00;margin:10px 0 -7px}.wheel-scene{position:relative;width:100%;aspect-ratio:1/.99;display:grid;place-items:center;isolation:isolate}.dots{position:absolute;inset:-5% -6% 0;background-image:radial-gradient(#91a780 1px,transparent 1.35px);background-size:9px 9px;mask-image:radial-gradient(ellipse,#000 34%,transparent 72%);z-index:-1}.wheel-wrap{width:92%;position:relative;transform:rotate(0deg);filter:drop-shadow(5px 7px 0 #24251e)}#wheel{display:block;width:100%;height:auto;overflow:visible}.pin{position:absolute;width:10%;height:14%;top:-4%;left:45%;filter:drop-shadow(1px 2px 0 #24251e)}.twinkle{position:absolute;font-family:Georgia,serif;line-height:1}.t1{right:-2%;top:0;font-size:59px;transform:rotate(12deg)}.t2{right:2%;top:10%;font-size:20px}.t3{left:1%;bottom:12%;font-size:34px}.motion-lines{position:absolute;left:0;top:3%;width:10%;stroke:#22231f;fill:none;stroke-linecap:round;stroke-width:3.5}.wheel-note{position:absolute;bottom:-4.5%;right:10%;display:flex;align-items:flex-end;gap:5px;transform:rotate(-6deg)}.wheel-note span{font:italic 600 clamp(17px,1.7vw,25px)/1.2 Georgia,serif;letter-spacing:-1px}.wheel-note svg{width:48px;height:40px;fill:none;stroke:#262720;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}.foot-inner{height:55px}footer{border-top:1.5px solid #22231f}.steps{display:flex;align-items:center;gap:15px;font:600 11px ui-monospace,Menlo,monospace;color:#65675c}.steps span{display:flex;align-items:center;gap:6px}.steps b{font:650 13px DM,Arial,sans-serif}.steps .active{color:#22231f}.steps .active:before{content:"";width:8px;height:8px;border-radius:50%;background:#ae8cd9;border:1.5px solid}.steps i{width:26px;height:1px;background:#9a9d90}.foot-deco{font-size:26px}.result{font-size:clamp(30px,3.3vw,49px);line-height:1.12;letter-spacing:-.055em;font-weight:800;margin:20px 0;padding:22px 24px;border:2px solid;border-radius:15px;background:#fff9e9;box-shadow:4px 5px 0 #24251e}.again{padding:12px 0}.confetti{position:fixed;inset:0;pointer-events:none;z-index:5;overflow:hidden}.confetti i{position:absolute;top:-20px;width:9px;height:14px;animation:fall 2s ease-in forwards}@keyframes fall{to{transform:translate(var(--dx),100vh) rotate(450deg);opacity:0}}dialog{color:#22231f;border:2px solid;border-radius:18px;background:#faf9ee;max-width:min(420px,90vw);padding:32px;box-shadow:6px 7px 0 #22231f}dialog::backdrop{background:#20302065}dialog h2{font-size:36px;letter-spacing:-2px;margin:15px 0}dialog ol{padding-left:20px;line-height:1.5}dialog li{padding:4px}.close{position:absolute;right:14px;top:10px;background:none;border:0;font-size:27px}.close-guide{width:100%}
@media(min-width:1600px){main{gap:90px}}@media(max-width:850px){main{gap:23px;padding:48px 4vw}.choice{font-size:13px}.wheel-note{right:5%}h1{font-size:clamp(49px,7.3vw,63px)}}@media(max-width:650px){.head-inner{height:65px;padding:0 20px}.brand{font-size:30px;gap:7px}.brandmark{width:32px;height:32px;font-size:30px}nav{gap:12px}nav button{font-size:12px}#sound{width:34px;height:34px;padding:8px}#sound span{display:none}.help-icon{display:none}main{display:flex;flex-direction:column;gap:35px;padding:31px 22px 40px}.wheel-scene{width:min(84%,350px);margin-bottom:13px}#checkin{max-width:500px}h1{font-size:clamp(55px,12.5vw,72px);margin:19px 0 12px}.desc{font-size:15px;margin-bottom:18px}.choice{min-height:73px;padding:8px 4px;font-size:14px}.choices{gap:9px}.face{width:32px;height:32px}.actions{margin-top:16px}.foot-inner{height:48px;padding:0 20px}.steps{gap:9px}.steps i{width:14px}.t1{font-size:40px}.wheel-note span{font-size:18px}.wheel-note svg{width:35px}.spin-stage main{gap:12px}.spin-stage .wheel-scene{width:min(90%,360px)}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}