@font-face{font-family:Aekkaem;src:url('./assets/fonts/PretendardVariable.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root{--sans:Aekkaem,'Noto Sans CJK KR',sans-serif;--board-width:1700px}
html,body{width:100%;height:100%;overflow:hidden;background:#141821;touch-action:none;user-select:none}
body{line-height:1.34}
#app{position:absolute;inset:0;padding:0;margin:0;max-width:none;overflow:hidden}
#app>.fld{width:var(--board-width);height:1184px;transform-origin:0 0}
.fld .cta,.fld .shop,.fld .auto,.fld .link,.fld .start{cursor:pointer;touch-action:none}
[role=button]:focus-visible,button:focus-visible{outline:4px solid currentColor;outline-offset:8px}
.fld .auto[aria-checked=true] i::after{left:39px}
.fld .auto{min-height:76px}
.fld .link{min-height:76px;display:flex;align-items:center}
.fld .grip{display:grid;place-items:center;font-size:26px;cursor:pointer}
.fld .grip.pressed{background:rgba(255,255,255,.25);border-style:solid;transform:scale(.96)}
.fld .vwrap svg{pointer-events:none}
.fld .skip{position:absolute;bottom:58px;left:0;right:0;text-align:center;min-height:76px;display:flex;align-items:center;justify-content:center;font-size:26px;z-index:7;cursor:pointer}
.fld .gesture{position:absolute;inset:300px 10% 150px;z-index:6;touch-action:none}
.fld .gesture-label{position:absolute;top:250px;left:0;right:0;text-align:center;font-size:36px;z-index:6}
.fld .sheet .close{align-self:center;margin-top:40px;font-size:30px;min-height:76px;background:none;border:0;color:inherit;font-family:inherit;cursor:pointer}
.fld .sheet .shead>span:first-child{animation:flap 1s ease-in-out infinite}
@keyframes flap{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(8deg)}}
#safety{position:fixed;inset:0;z-index:100;background:#141821;color:#DCE8EA;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-family:var(--sans)}
#safety[hidden]{display:none}#safety p{font-size:clamp(32px,5vw,72px);font-weight:800}#safety small{font-size:clamp(18px,2vw,30px)}
#sim{position:fixed;bottom:8px;left:8px;z-index:110;max-width:calc(100% - 16px);padding:7px 10px;border-radius:12px;background:#17212dea;color:#fff;font:12px/1.5 system-ui;box-shadow:0 2px 18px #0003;touch-action:auto}
#sim[hidden]{display:none}#sim summary{cursor:pointer}#sim .controls{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding-top:6px}#sim button,#sim select{font:inherit;padding:6px;background:#f5f1eb;color:#17212d;border:0;border-radius:6px;cursor:pointer}#sim label{white-space:nowrap}#sim input{vertical-align:middle}
.belt-progress{height:3px;background:currentColor;transform-origin:left;animation:fill 1.5s linear both;margin-top:36px}
@keyframes fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.paused *{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.fld .sheet .shead>span:first-child{animation:none}}
.fld .vwrap{position:relative}
.fld .solo-grip{position:absolute;inset:0;margin:auto;border:0!important;width:350px!important;height:480px!important;color:transparent;border-radius:30px}
.fld .solo-grip.pressed{background:rgba(255,255,255,.08)}
.fld .intro-skip{position:absolute;bottom:54px;right:60px;font-size:24px;z-index:9;cursor:pointer;min-height:76px;display:flex;align-items:center}
.fld .skip{color:#F4F0EB!important}
@media(prefers-reduced-motion:reduce){.fld *{animation-duration:.01ms!important}}
.fld .vwrap.shaking>svg{animation:hand-shake .28s ease-in-out infinite;transform-origin:50% 75%}
@keyframes hand-shake{0%,100%{transform:rotate(-6.2deg)}50%{transform:rotate(6.2deg)}}
.gesture.joint::before,.gesture.joint::after{content:'';position:absolute;top:30%;width:150px;height:150px;border:3px dashed currentColor;border-radius:50%;opacity:.5}
.gesture.joint::before{left:12%}.gesture.joint::after{right:12%}