*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--bg: oklch(.05 .03 270);--surface: oklch(.12 .02 270);--cyan: oklch(.72 .18 280);--magenta: oklch(.7 .22 330);--green: oklch(.8 .2 155);--yellow: oklch(.88 .16 90);--orange: oklch(.78 .2 55);--red: oklch(.7 .24 25);--text: oklch(.96 .005 270);--muted: oklch(.55 .02 270);--font: "Inter", system-ui, sans-serif;--dial-size: clamp(180px, 50vw, 240px)}html,body{height:100dvh;overflow:hidden;overscroll-behavior:none;background:var(--bg);color:var(--text);font-family:var(--font);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}body:after{content:"";position:fixed;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,oklch(0 0 0 / .03) 2px,oklch(0 0 0 / .03) 4px);pointer-events:none;z-index:9999}body:before{content:"";position:fixed;inset:0;background:radial-gradient(ellipse at center,transparent 60%,oklch(0 0 0 / .4) 100%);pointer-events:none;z-index:9998}body{background:radial-gradient(ellipse at 20% 30%,oklch(.1 .06 270 / .25),transparent 50%),radial-gradient(ellipse at 80% 70%,oklch(.08 .04 195 / .15),transparent 50%),var(--bg)}#app{--ab: oklch(.7 .18 280 / .25);--ag: oklch(.7 .18 280 / .08);--ao: oklch(.7 .18 280 / .15);max-width:420px;width:100%;height:100dvh;margin:0 auto;overflow:hidden;display:flex;flex-direction:column;position:relative;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);border:2px solid var(--ab);border-radius:4px;box-shadow:inset 0 0 40px var(--ag),0 0 30px var(--ao),0 0 80px var(--ag);transition:border-color .4s ease,box-shadow .4s ease}.status-bar{flex-shrink:0;height:36px;display:flex;align-items:center;justify-content:center;gap:28px;font-size:15px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text);transition:opacity .3s ease}.canvas-area{flex:1 1 0;min-height:0;display:flex;align-items:center;justify-content:center;padding:2px 6px;transition:opacity .4s ease,transform .4s ease}.canvas-area canvas{width:100%;max-width:420px;height:auto;aspect-ratio:840 / 588;transition:border-color .4s ease,box-shadow .4s ease}.question-area{flex-shrink:0;text-align:center;padding:4px 16px;font-size:clamp(14px,3.2vw,18px);font-weight:800;letter-spacing:-.01em;color:var(--text);transition:opacity .3s ease,transform .3s ease}.dial-area{flex-shrink:0;display:flex;align-items:center;justify-content:center;height:calc(var(--dial-size) + 8px);position:relative;touch-action:none;transition:opacity .3s ease,height .4s ease}.controls-area{flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:12px;padding:4px 16px 12px;transition:opacity .3s ease,transform .3s ease}.btn{font-family:var(--font);font-size:16px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:12px 24px;border:2px solid var(--cyan);border-radius:8px;background:transparent;color:var(--cyan);cursor:pointer;transition:transform .15s ease,background .2s ease,opacity .3s ease,border-color .3s ease,color .3s ease;min-height:48px;min-width:48px}.btn:active{transform:scale(.95)}.btn-primary{background:var(--cyan);color:var(--bg)}.btn-primary:active{background:#7173d7}.neon-text{color:#ebedff;color:oklch(.95 .08 280);text-shadow:0 0 8px oklch(.72 .18 280),0 0 24px oklch(.72 .18 280 / .5),0 0 48px oklch(.72 .18 280 / .2)}@media(min-width:480px){#app{border-width:2px;margin-top:4px;margin-bottom:4px;height:calc(100dvh - 8px);border-radius:8px}}@keyframes popIn{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}@keyframes shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-6px)}40%,80%{transform:translate(6px)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}@keyframes fadeSlideIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.fade-in{animation:fadeIn .3s ease both}.fade-slide-in{animation:fadeSlideIn .35s ease both}