html,body{margin:0;padding:0;height:100%;overflow:hidden;background:#150a2a}#c{position:fixed;inset:0;touch-action:none;-webkit-tap-highlight-color:transparent}#hud{position:fixed;inset:0;pointer-events:none;font-family:ui-rounded,SF Pro Rounded,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:#f2ecff;--zoop-ms: .46s;--plate: rgba(28,16,52,.72);--plate-edge: rgba(201,189,240,.35);--plate-ink: #c9bdf0;--hud-top: max(10px, env(safe-area-inset-top));--hud-bottom: max(16px, env(safe-area-inset-bottom));--play-h: 56px}#top{position:absolute;top:var(--hud-top);left:0;right:0;display:flex;align-items:flex-start;justify-content:space-between;padding:0 14px;gap:8px}#lab{display:flex;flex-direction:column;align-items:center;gap:4px;padding:0;background:none;pointer-events:none;cursor:default}#hud.cleared #lab{padding:5px 10px;border-radius:13px;gap:5px;background:var(--plate);border:1.5px solid var(--plate-edge);pointer-events:auto;cursor:pointer}#hud.cleared #lab:after{content:"select level";font-size:11px;font-weight:700;color:var(--plate-ink);line-height:1;letter-spacing:.02em}#dots{display:flex;gap:4px}.dot{box-sizing:border-box;width:11px;height:11px;border-radius:50%;border:2px solid #6b5a98;background:transparent}.dot.done{border-color:#57e6c9;background:#57e6c966}.dot.cur{background:#ffd166;border-color:#ffd166;box-shadow:0 0 10px #ffd166b3}#inv{display:flex;gap:4px}#inv .band{width:27px;height:27px;border-radius:8px;border:2.5px dashed rgba(201,189,240,.4);box-sizing:border-box;transition:opacity .25s,transform .25s}#inv .band.used{border-style:solid;box-shadow:0 2px 6px #0006}#inv .band.open{box-shadow:0 0 10px #ffffff2e}#hint{position:absolute;top:calc(var(--hud-top) + 80px);left:0;right:0;text-align:center;font-size:13px;color:#c9bdf0;text-shadow:0 2px 6px rgba(0,0,0,.7);padding:0 20px}button{pointer-events:auto;font:inherit;border:none;cursor:pointer;-webkit-tap-highlight-color:transparent}#play{position:absolute;right:16px;bottom:var(--hud-bottom);min-width:118px;height:var(--play-h);border-radius:28px;font-size:19px;font-weight:800;color:#1b0f38;background:linear-gradient(180deg,#67f2d4,#3fd4b4);box-shadow:0 6px 18px #57e6c959,inset 0 -3px #00000026;letter-spacing:.03em}#play.stop{background:linear-gradient(180deg,#ff7ec1,#ff5db1);box-shadow:0 6px 18px #ff5db159,inset 0 -3px #00000026}#play.next{background:linear-gradient(180deg,#ffe08a,#ffd166);box-shadow:0 6px 18px #ffd16666,inset 0 -3px #00000026}#bandbar{display:flex;flex-direction:column;align-items:center;gap:5px;padding:5px 10px;border-radius:13px;background:none;border:1.5px solid transparent;pointer-events:none;cursor:default;transition:background-color .18s,border-color .18s,transform .12s}#bandbar:after{content:"clear bands";font-size:11px;font-weight:700;color:var(--plate-ink);line-height:1;letter-spacing:.02em;visibility:hidden}#hud.laying #bandbar{background:var(--plate);border-color:var(--plate-edge)}#hud.laying #bandbar:after{visibility:inherit}#bandbar:disabled:after{color:#c9bdf05c}#bandbar:enabled{pointer-events:auto;cursor:pointer}#bandbar:enabled:active{transform:scale(.96)}#hud.lab>*{visibility:hidden}#labtools{position:absolute;top:var(--hud-top);right:14px;display:none;gap:6px;align-items:center}#hud.lab.editing #labtools{display:flex;visibility:inherit}#figma,#export{padding:5px 10px;border-radius:13px;font:inherit;font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--plate-ink);text-decoration:none;pointer-events:auto;background:var(--plate);border:1.5px solid var(--plate-edge)}#export{cursor:pointer}#export:active{transform:scale(.96)}#hud.splash>*{visibility:hidden}#toast{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%) scale(.9);background:#140a2deb;border:2px solid #ffd166;color:#ffe9b3;padding:14px 26px;border-radius:18px;font-size:20px;font-weight:800;text-align:center;opacity:0;transition:opacity .18s,transform .18s;white-space:nowrap;box-shadow:0 10px 40px #00000080}#toast.show{opacity:1;transform:translate(-50%,-50%) scale(1)}#gate{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(12px,2.2vh,24px);background:#0d061e;pointer-events:auto;text-align:center;padding:max(24px,env(safe-area-inset-top)) 24px calc(max(24px,env(safe-area-inset-bottom)) + 6vh)}#gate.hidden{display:none}#title{position:relative;font-size:clamp(30px,max(12.6vw,6.6vh),60px);margin-bottom:clamp(38px,6.8vh,76px)}#gate h1{margin:0;font-size:1em;--cap-em: .2075}#gate h1 #mark{display:block;width:4.294em;height:2.08em}#title #scTitle{position:absolute;left:0;width:100%;top:-.72em;height:calc(100% + .72em);z-index:1;pointer-events:none}#gate .how{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;max-width:340px}#gate .scene{display:block;width:100%;height:auto;aspect-ratio:400 / 94}#gate .pair{display:flex;gap:12px;width:100%}#gate .pair>div{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:12px}#gate .scene.gesture{aspect-ratio:43 / 13}#gate .cap{color:#c9bdf0;font-size:clamp(15px,4.4vw,17px);line-height:1.4;margin-bottom:10px}#gate .pair .cap{min-height:2.8em;text-wrap:balance}#gate .cap b{color:#ffd166;font-weight:700}#gateTap{position:absolute;left:24px;right:24px;bottom:max(20px,env(safe-area-inset-bottom) + 6px);color:#c9bdf0;font-size:13px;letter-spacing:.04em;opacity:0;transition:opacity .3s}#gate.ready #gateTap{opacity:.5}#gate.ready{cursor:pointer}#gate.zoop{pointer-events:none;transform-origin:var(--zoop-ox) var(--zoop-oy);animation:gateZoop var(--zoop-ms) forwards}#gate.zoop>*{animation:zoopFade calc(var(--zoop-ms) * .66) ease-in forwards}@keyframes gateZoop{0%{transform:scale(1);border-radius:0;opacity:1;animation-timing-function:cubic-bezier(.3,0,.7,1)}12%{transform:scale(1.035,1.02);border-radius:3%;opacity:1;animation-timing-function:cubic-bezier(.55,0,.55,1)}45%{transform:scale(calc(var(--zoop-sx) * .7 + .3),calc(var(--zoop-sy) * .7 + .3));border-radius:22%;opacity:1;animation-timing-function:cubic-bezier(.25,.55,.3,1)}86%{opacity:1}to{transform:scale(var(--zoop-sx),var(--zoop-sy));border-radius:50%;opacity:0}}@keyframes zoopFade{to{opacity:0}}#help.pop{animation:helpPop calc(var(--zoop-ms) * .62) cubic-bezier(.2,1.5,.4,1) calc(var(--zoop-ms) * .62) both}@keyframes helpPop{0%{transform:scale(.35);opacity:0}45%{transform:scale(1.22);opacity:1}to{transform:scale(1);opacity:1}}#help{position:absolute;left:16px;bottom:var(--hud-bottom);width:44px;height:44px;border-radius:22px;font-size:20px;font-weight:800;color:#c9bdf0;background:#ffffff14;border:1.5px solid rgba(201,189,240,.35);line-height:1}#help:active{transform:scale(.94)}#hud.sheet #help,#hud.sheet #play{visibility:hidden}#rotate{display:none}@media(orientation:landscape)and (max-height:520px){#rotate{display:flex;position:fixed;inset:0;z-index:100;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;text-align:center;background:#150a2a;color:#f2ecff;height:100dvh;font-family:ui-rounded,SF Pro Rounded,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}#rotate .glyph{font-size:46px;animation:rotateHint 2.2s ease-in-out infinite}#rotate b{font-size:19px;font-weight:800}#rotate span{font-size:14px;color:#c9bdf0;max-width:30ch}#c,#hud{visibility:hidden}}@keyframes rotateHint{0%,45%,to{transform:rotate(0)}60%,85%{transform:rotate(-90deg)}}@media(prefers-reduced-motion:reduce){#rotate .glyph{animation:none}#gate.zoop,#gate.zoop>*,#help.pop{animation:none}}