:root{
  --bg:#04050A; --panel:rgba(14,18,30,.78); --panel-solid:#0C101B; --ink:#EAF2FF; --mute:#7D8AA3; --line:rgba(160,190,255,.14);
  --cy:#3DF5FF; --vi:#8B5CFF; --stage:#060811;
  --grad:linear-gradient(100deg,#3DF5FF 0%,#9EE9FF 45%,#8B5CFF 100%);
  --disp:"Unbounded", "Arial Black", sans-serif;
  --mono:"DM Mono", ui-monospace, Menlo, monospace;
  --tk:40px; --ease:cubic-bezier(.65,0,.35,1); --spring:cubic-bezier(.34,1.56,.64,1); --out:cubic-bezier(.16,1,.3,1);
  --safe-b:env(safe-area-inset-bottom,0px);
  --beam:#3DF5FF;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{background:var(--bg);color:var(--ink);font-family:var(--mono);font-size:14px;-webkit-font-smoothing:antialiased;touch-action:manipulation;user-select:none;-webkit-user-select:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input{font:inherit;color:inherit;user-select:text;-webkit-user-select:text}
.i{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ambient light behind every screen */
.rig{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.rig .haze{position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 40% at 15% 0%,rgba(61,245,255,.10),transparent 70%),
             radial-gradient(ellipse 70% 45% at 90% 100%,rgba(139,92,255,.13),transparent 70%),
             linear-gradient(rgba(160,190,255,.035) 1px,transparent 1px) 0 0/100% 32px,
             linear-gradient(90deg,rgba(160,190,255,.035) 1px,transparent 1px) 0 0/32px 100%;
  -webkit-mask-image:radial-gradient(ellipse 90% 80% at 50% 50%,#000 30%,transparent 90%);mask-image:radial-gradient(ellipse 90% 80% at 50% 50%,#000 30%,transparent 90%)}
.rig .beam{position:absolute;top:-10%;width:2px;height:120%;transform-origin:50% 0;opacity:.0;
  background:linear-gradient(180deg,transparent,var(--beam) 30%,transparent 90%);box-shadow:0 0 18px 2px var(--beam);transition:opacity .4s}
.rig .b1{left:12%;transform:rotate(-18deg);animation:sway1 9s ease-in-out infinite}
.rig .b2{right:12%;transform:rotate(18deg);animation:sway2 10s ease-in-out infinite}
.rig .b3{left:50%;transform:rotate(0);animation:sway3 12s ease-in-out infinite}
@keyframes sway1{0%,100%{transform:rotate(-22deg)}50%{transform:rotate(-8deg)}}
@keyframes sway2{0%,100%{transform:rotate(22deg)}50%{transform:rotate(8deg)}}
@keyframes sway3{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(10deg)}}
body.playing .rig .beam{opacity:.35}
body.playing .rig .b1{animation-duration:2.4s}
body.playing .rig .b2{animation-duration:2.8s}
body.playing .rig .b3{animation-duration:3.2s}
body.hit .rig .beam{opacity:.8;transition:opacity 0s}
.flash{position:fixed;inset:0;pointer-events:none;z-index:45;background:radial-gradient(ellipse at 50% 40%,rgba(61,245,255,.35),transparent 70%);opacity:0}
.flash.go{animation:flash .45s ease-out}
@keyframes flash{0%{opacity:.6}100%{opacity:0}}

/* ---------- screens ---------- */
.screen{position:fixed;inset:0;height:100svh;display:none;flex-direction:column;overflow:hidden}
.screen > *:not(.rig):not(#introCanvas){position:relative;z-index:1}
body[data-screen="intro"] #s-intro,body[data-screen="pieces"] #s-pieces,body[data-screen="new"] #s-new,body[data-screen="editor"] #s-editor{display:flex;animation:screenIn .6s var(--out) both}
@keyframes screenIn{from{opacity:0;filter:blur(8px)}to{opacity:1;filter:none}}

/* ---------- buttons ---------- */
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:12px;background:var(--grad);color:#04050A;border-radius:8px;height:56px;padding:0 28px;font-family:var(--disp);font-weight:600;font-size:13px;letter-spacing:.16em;text-transform:uppercase;transition:transform .2s var(--spring),box-shadow .2s;position:relative;overflow:hidden;
  box-shadow:0 0 0 1px rgba(61,245,255,.5),0 0 30px rgba(61,245,255,.28),0 12px 30px -12px rgba(139,92,255,.7)}
.btn-primary::before{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);transform:skewX(-20deg);animation:shine 3.2s ease-in-out infinite}
@keyframes shine{0%,60%{left:-60%}100%{left:130%}}
.btn-primary:active{transform:scale(.96)}
.btn-primary.big{height:64px;min-width:250px;font-size:14px}
.btn-primary .i{width:22px;height:22px;stroke-width:2}
.icon-btn{width:44px;height:44px;display:grid;place-items:center;border-radius:10px;transition:background .15s,transform .15s,color .15s}
.icon-btn:active{transform:scale(.9);background:var(--line);color:var(--cy)}
.icon-btn.ghost{pointer-events:none}
.icon-btn:disabled{opacity:.25}
.round-btn{width:64px;height:64px;border-radius:50%;border:1px solid rgba(61,245,255,.45);display:grid;place-items:center;color:var(--cy);background:rgba(61,245,255,.04);box-shadow:inset 0 0 16px rgba(61,245,255,.08);transition:transform .15s var(--spring),background .15s,color .15s,box-shadow .15s}
.round-btn:active{transform:scale(.88);background:var(--cy);color:#04050A;box-shadow:0 0 24px rgba(61,245,255,.6)}
.round-btn .i{width:26px;height:26px}

.bar{display:flex;align-items:center;gap:4px;padding:calc(6px + env(safe-area-inset-top,0px)) 8px 4px;height:calc(56px + env(safe-area-inset-top,0px));flex:none}
.bar-title{flex:1;text-align:center;font-family:var(--disp);font-weight:600;font-size:16px;text-transform:uppercase;letter-spacing:.14em}

/* ---------- intro ---------- */
#s-intro{align-items:center;padding:calc(30px + env(safe-area-inset-top,0px)) 18px calc(18px + var(--safe-b))}
#introCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.intro-top,.intro-bottom{text-align:center}
.kicker{font-size:11px;letter-spacing:.5em;color:var(--cy);display:inline-flex;align-items:center;gap:12px;opacity:0;animation:fadeUp .7s var(--out) 3.2s forwards;text-transform:uppercase}
.kicker .dot{width:6px;height:6px;border-radius:1px;background:var(--cy);box-shadow:0 0 10px var(--cy);animation:rec 1.2s steps(2) infinite}
@keyframes rec{50%{opacity:.15}}
.wordmark{font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:clamp(32px,10.4vw,96px);line-height:1;letter-spacing:.04em;margin-top:14px;
  background:linear-gradient(100deg,#ffffff 0%,#d9fbff 30%,#3DF5FF 55%,#8B5CFF 85%,#ffffff 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 22px rgba(61,245,255,.35));opacity:0;animation:wordIn 1.3s var(--out) 2.95s forwards,chrome 6s linear 4.2s infinite}
@keyframes wordIn{from{opacity:0;letter-spacing:.6em;filter:blur(14px) drop-shadow(0 0 22px rgba(61,245,255,.35))}to{opacity:1;letter-spacing:.04em;filter:drop-shadow(0 0 22px rgba(61,245,255,.35))}}
@keyframes chrome{to{background-position:-220% 0}}
.tagline{font-family:var(--mono);font-size:clamp(10px,3vw,13px);letter-spacing:.5em;text-transform:uppercase;margin-top:14px;color:var(--mute);opacity:0;animation:fadeUp .7s var(--out) 3.4s forwards}
.intro-stage{flex:1;width:100%;min-height:120px}
.intro-bottom{display:flex;flex-direction:column;align-items:center;gap:14px;opacity:0;animation:fadeUp .7s var(--out) 3.6s forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.lang{display:flex;gap:6px;align-items:center;font-size:11px;letter-spacing:.24em;color:var(--mute)}
.lang button{padding:8px 6px;color:var(--mute)}
.lang button.on{color:var(--cy);text-shadow:0 0 10px rgba(61,245,255,.6)}
body.skip-intro .kicker,body.skip-intro .wordmark,body.skip-intro .tagline,body.skip-intro .intro-bottom{animation-delay:.2s!important}
body.skip-intro .wordmark{animation:wordIn 1.1s var(--out) .2s forwards,chrome 6s linear 1.4s infinite!important}

/* ---------- pieces ---------- */
.pieces-list{flex:1;min-height:0;overflow-y:auto;padding:8px 16px 16px;display:flex;flex-direction:column;gap:10px;-webkit-overflow-scrolling:touch}
.piece{display:flex;align-items:center;gap:14px;padding:10px;border-radius:14px;background:var(--panel);border:1px solid var(--line);text-align:left;width:100%;transition:transform .2s var(--spring),border-color .2s,box-shadow .2s}
.piece:active{transform:scale(.98);border-color:var(--cy);box-shadow:0 0 20px rgba(61,245,255,.2)}
.piece canvas{width:96px;height:72px;border-radius:8px;flex:none;display:block}
.piece .pc-t{font-family:var(--disp);font-weight:600;font-size:15px;letter-spacing:.06em;line-height:1.2;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.piece .pc-m{display:flex;gap:12px;margin-top:8px;color:var(--mute);font-size:12px;align-items:center}
.piece .pc-m span{display:inline-flex;align-items:center;gap:4px}
.piece .pc-m svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6}
.piece .pc-body{flex:1;min-width:0}
.piece .pc-del{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;color:var(--mute);flex:none}
.piece .pc-del.armed{background:var(--vi);color:#fff}
.pieces-foot{flex:none;display:flex;justify-content:center;padding:12px 16px calc(52px + var(--safe-b))}
.empty{margin:auto;text-align:center;color:var(--mute);font-family:var(--disp);font-weight:300;text-transform:uppercase;font-size:14px;letter-spacing:.2em}

/* ---------- new ---------- */
.new-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:0 20px;min-height:0}
.big-q{font-family:var(--disp);font-weight:600;text-transform:uppercase;font-size:clamp(18px,5.4vw,32px);letter-spacing:.1em;text-align:center;line-height:1.25}
.counter{display:flex;align-items:center;gap:20px}
.n-big{font-family:var(--disp);font-weight:300;font-size:clamp(96px,30vw,180px);line-height:1;min-width:1.5em;text-align:center;font-variant-numeric:tabular-nums;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 26px rgba(61,245,255,.4))}
.n-big.bump{animation:bump .3s var(--spring)}
@keyframes bump{40%{transform:scale(1.1)}}
.n-crowd{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;max-width:330px;min-height:70px}
.n-crowd i{width:20px;height:20px;display:block;animation:popIn .35s var(--spring) both}
.n-crowd i svg{filter:drop-shadow(0 0 6px var(--c))}
@keyframes popIn{from{transform:scale(0)}to{transform:scale(1)}}

/* ---------- editor ---------- */
.title-input{flex:1;min-width:0;text-align:center;background:none;border:0;outline:0;font-family:var(--disp);font-weight:600;text-transform:uppercase;font-size:15px;letter-spacing:.14em;padding:8px 6px;border-radius:8px;text-overflow:ellipsis}
.title-input:focus{background:var(--panel);box-shadow:0 0 0 1px var(--cy)}

.stage-wrap{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4px 16px 0;position:relative}
.stage{position:relative;width:300px;height:225px;perspective:1100px;perspective-origin:50% 0%;flex:none}
.hud{position:absolute;inset:-7px;pointer-events:none;z-index:3;transition:opacity .5s}
.hud i{position:absolute;width:14px;height:14px;border:0 solid var(--cy);filter:drop-shadow(0 0 4px var(--cy))}
.hud i:nth-child(1){left:0;top:0;border-width:1.5px 0 0 1.5px}
.hud i:nth-child(2){right:0;top:0;border-width:1.5px 1.5px 0 0}
.hud i:nth-child(3){left:0;bottom:0;border-width:0 0 1.5px 1.5px}
.hud i:nth-child(4){right:0;bottom:0;border-width:0 1.5px 1.5px 0}
.stage.is3d .hud{opacity:0}
.floor{position:absolute;inset:0;background:var(--stage);border-radius:4px;transform-origin:50% 100%;transition:transform .9s var(--ease),border-radius .9s;transform-style:preserve-3d;
  box-shadow:0 0 0 1px rgba(61,245,255,.16),0 0 50px -10px rgba(61,245,255,.22),0 30px 60px -20px #000}
.floor::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(ellipse 60% 70% at 50% 45%,rgba(61,245,255,.08),transparent 70%),
             linear-gradient(rgba(61,245,255,.06) 1px,transparent 1px) 0 0/100% calc(100% / 6),
             linear-gradient(90deg,rgba(61,245,255,.06) 1px,transparent 1px) 0 0/10% 100%}
.floor::after{content:"";position:absolute;left:0;right:0;top:0;height:1.5px;pointer-events:none;background:linear-gradient(90deg,transparent,var(--cy) 20%,#fff 50%,var(--cy) 80%,transparent);box-shadow:0 0 12px 1px rgba(61,245,255,.7);opacity:0;animation:scan 5s var(--ease) infinite}
@keyframes scan{0%{top:0;opacity:0}8%{opacity:.9}50%{top:100%;opacity:.7}54%,100%{top:100%;opacity:0}}
.floor-svg,.paths-svg,.trail{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.tokens{position:absolute;inset:0;transform-style:preserve-3d}

.token{position:absolute;width:var(--tk);height:var(--tk);margin:calc(var(--tk) / -2) 0 0 calc(var(--tk) / -2);touch-action:none;cursor:grab;transform-style:preserve-3d;
  transition:left .5s var(--out),top .5s var(--out);z-index:2}
.token.dragging{transition:none;cursor:grabbing;z-index:5}
body.playing .token{transition:none}
.token .pool{position:absolute;left:50%;top:50%;width:calc(var(--tk) * 2.2);height:calc(var(--tk) * 2.2);margin:calc(var(--tk) * -1.1) 0 0 calc(var(--tk) * -1.1);border-radius:50%;background:radial-gradient(closest-side,var(--c),transparent);opacity:.16;pointer-events:none;transition:opacity .3s}
.token.dragging .pool,body.playing .token .pool{opacity:.34}
.token .flat{position:absolute;inset:0;transition:transform .25s var(--spring),opacity .5s;filter:drop-shadow(0 0 7px var(--c))}
.token .flat svg{width:100%;height:100%;display:block;overflow:visible}
.token::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid var(--c);opacity:0;transform:scale(.8);transition:opacity .2s,transform .3s var(--out);pointer-events:none}
.token.dragging::after{opacity:.8;transform:scale(1.25)}
.token.dragging .flat{transform:scale(1.12)}
.token .ini{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--disp);font-weight:600;font-size:calc(var(--tk) * .3);letter-spacing:.02em;pointer-events:none;line-height:1;transition:opacity .5s}
.token.tri .ini{padding-top:calc(var(--tk) * .2)}
.token.pop .flat{animation:popIn .45s var(--spring)}
.token .fig,.token .shadow{position:absolute;opacity:0;pointer-events:none;transition:opacity .5s}
.token .shadow{left:50%;top:50%;width:calc(var(--tk) * 1.4);height:calc(var(--tk) * 1.4);margin:calc(var(--tk) * -.7) 0 0 calc(var(--tk) * -.7);border-radius:50%;background:radial-gradient(closest-side,var(--c),transparent)}
.token .fig{left:50%;bottom:42%;width:calc(var(--tk) * 1.25);height:calc(var(--tk) * 2.5);margin-left:calc(var(--tk) * -.625);transform-origin:50% 100%;transform:rotateX(-56deg)}
.token .fig svg{width:100%;height:100%;display:block;overflow:visible;filter:drop-shadow(0 0 6px var(--c))}
.stage.is3d .floor{transform:rotateX(56deg) translateY(4%) scale(1.04);border-radius:2px}
.stage.is3d .token .flat,.stage.is3d .token .ini,.stage.is3d .token .pool,.stage.is3d .token::after{opacity:0}
.stage.is3d .token .fig{opacity:1}
.stage.is3d .token .shadow{opacity:.55}
.stage.is3d .paths-svg{opacity:.3}
.stage.is3d .token{cursor:default}

.hint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);white-space:nowrap;display:flex;align-items:center;gap:10px;background:rgba(6,10,20,.85);color:var(--cy);border:1px solid rgba(61,245,255,.5);border-radius:10px;padding:10px 18px 10px 14px;font-family:var(--disp);font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;pointer-events:none;z-index:8;box-shadow:0 0 30px rgba(61,245,255,.25);animation:hint 3.6s var(--ease) both}
.hint svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round;animation:drag 1.4s ease-in-out infinite}
@keyframes drag{0%,100%{transform:translateX(-4px)}50%{transform:translateX(6px)}}
@keyframes hint{0%{opacity:0;transform:translate(-50%,-30%)}12%,82%{opacity:1;transform:translate(-50%,-50%)}100%{opacity:0;transform:translate(-50%,-50%)}}

.front{width:300px;flex:none;padding-top:8px;transition:opacity .5s}
.nums{display:flex;justify-content:space-between;padding:0 7%;font-size:10px;color:var(--mute);letter-spacing:.05em}
.nums span{width:12px;text-align:center}
.nums span:nth-child(5){color:var(--cy);text-shadow:0 0 8px var(--cy)}
.audience{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:6px;color:var(--mute);font-size:8.5px;letter-spacing:.4em;text-transform:uppercase}
.audience i{width:10px;height:1px;background:rgba(160,190,255,.25);display:block}
.audience span{padding:0 6px;line-height:1}
.stage.is3d ~ .front{opacity:0}

.tools{flex:none;display:flex;justify-content:space-around;padding:6px 8px 2px}
.tool{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;min-width:58px;padding:7px 4px 8px;border-radius:10px;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#b9c4d9;transition:background .15s,transform .15s var(--spring),color .15s}
.tool:active{transform:scale(.9);color:var(--cy)}
.tool[aria-pressed="true"]{color:var(--cy);background:rgba(61,245,255,.07)}
.tool[aria-pressed="true"]::after{content:"";position:absolute;left:30%;right:30%;bottom:0;height:2px;border-radius:2px;background:var(--cy);box-shadow:0 0 10px var(--cy)}
.tool[aria-pressed="true"] .i{filter:drop-shadow(0 0 6px rgba(61,245,255,.7))}
.tool:disabled{opacity:.3}

.countbar{flex:none;display:flex;flex-direction:column;align-items:center;gap:5px;padding:4px 16px 0;height:62px}
.cb-cells{display:flex;gap:6px}
.cb-cells span{width:32px;height:38px;display:grid;place-items:center;font-family:var(--disp);font-weight:300;font-size:18px;border-radius:6px;border:1px solid var(--line);color:rgba(234,242,255,.3);transition:background .08s,color .08s,transform .15s var(--spring),box-shadow .1s,border-color .1s}
.cb-cells span.on{background:var(--cy);border-color:var(--cy);color:#04050A;font-weight:600;transform:scale(1.14);box-shadow:0 0 22px rgba(61,245,255,.7)}
.cb-cells span.on.one,.cb-cells.countin span.on{background:var(--vi);border-color:var(--vi);color:#fff;box-shadow:0 0 24px rgba(139,92,255,.8)}
.cb-state{font-size:9px;letter-spacing:.4em;text-transform:uppercase;color:var(--mute);height:14px}

.strip{flex:none;display:flex;gap:10px;overflow-x:auto;padding:8px 16px 6px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.thumb{flex:none;position:relative;width:84px;scroll-snap-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;transition:transform .2s var(--spring),opacity .2s}
.thumb:active{transform:scale(.95)}
.thumb canvas{width:84px;height:63px;border-radius:6px;display:block;outline:1px solid var(--line);outline-offset:0;transition:outline-color .15s,box-shadow .15s}
.thumb .tn{font-size:9.5px;letter-spacing:.12em;color:var(--mute);white-space:nowrap;max-width:84px;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase}
.thumb .tn b{font-family:var(--disp);font-weight:600;font-size:11px;color:var(--ink);margin-right:5px}
.thumb.on canvas{outline:1.5px solid var(--cy);outline-offset:2px;box-shadow:0 0 22px rgba(61,245,255,.35)}
.thumb.on .tn,.thumb.on .tn b{color:var(--cy)}
.thumb .edit-dot{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:6px;background:var(--cy);color:#04050A;display:none;place-items:center}
.thumb .edit-dot svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.thumb.on .edit-dot{display:grid}
.thumb.add canvas{display:none}
.thumb.add .add-box{width:84px;height:63px;border-radius:6px;border:1px dashed rgba(61,245,255,.4);display:grid;place-items:center;color:var(--cy);background:rgba(61,245,255,.03)}
.thumb.add .add-box .i{width:24px;height:24px}
body.playing .thumb:not(.on){opacity:.35}
body.playing .thumb.add{opacity:0;pointer-events:none}

.foot{flex:none;display:flex;align-items:center;gap:8px;padding:6px 16px calc(10px + var(--safe-b));padding-right:96px}
.foot .play{flex:1;height:56px}
.play .pl-ico,.play .st-ico{width:28px;height:28px;border-radius:6px;background:#04050A;display:grid;place-items:center}
.play svg{width:12px;height:12px;fill:var(--cy)}
.play .pl-ico svg{margin-left:2px}
.play .st-ico{display:none}
body.playing .play{background:linear-gradient(100deg,#8B5CFF,#C9A8FF);color:#fff;box-shadow:0 0 0 1px rgba(139,92,255,.6),0 0 30px rgba(139,92,255,.5)}
body.playing .play svg{fill:#C9A8FF}
body.hit .play{transform:scale(1.03);transition:transform 0s}
body.playing .play .pl-ico{display:none}
body.playing .play .st-ico{display:grid}
#soundBtn .off{display:none}
#soundBtn[aria-pressed="false"] .on{display:none}
#soundBtn[aria-pressed="false"] .off{display:block}
.tempo-chip{height:44px;border-radius:10px;border:1px solid var(--line);background:var(--panel);display:flex;align-items:center;gap:6px;padding:0 12px 0 10px;font-size:13px}
.tempo-chip svg{width:17px;height:17px;fill:none;stroke:var(--cy);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.tempo-chip b{font-family:var(--disp);font-weight:600;font-size:13px;letter-spacing:.06em}
body.playing .tools,body.playing #tempoBtn,body.playing #soundBtn{pointer-events:none}

/* ---------- sheet ---------- */
.sheet{position:fixed;inset:0;z-index:30;display:flex;align-items:flex-end;justify-content:center}
.sheet-back{position:absolute;inset:0;background:rgba(2,3,8,.6);animation:fade .25s both}
@keyframes fade{from{opacity:0}}
.sheet-card{position:relative;width:100%;max-width:520px;max-height:88svh;overflow-y:auto;background:rgba(10,14,25,.9);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-radius:20px 20px 0 0;padding:10px 20px calc(22px + var(--safe-b));animation:sheetUp .45s var(--out) both;
  box-shadow:inset 0 1px 0 rgba(61,245,255,.45),0 -20px 60px rgba(0,0,0,.6)}
.sheet.closing .sheet-card{animation:sheetDown .25s var(--ease) both}
.sheet.closing .sheet-back{animation:fade .25s reverse both}
@keyframes sheetUp{from{transform:translateY(100%)}}
@keyframes sheetDown{to{transform:translateY(100%)}}
.sheet-card::before{content:"";display:block;width:40px;height:3px;border-radius:3px;background:rgba(61,245,255,.4);margin:0 auto 14px}
.sh-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.sh-head h3{font-family:var(--disp);font-weight:600;text-transform:uppercase;font-size:18px;letter-spacing:.14em;line-height:1.1;flex:1}
.sh-head .sh-tok{width:42px;height:42px;flex:none;position:relative}
.sh-head .sh-tok svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 8px var(--c))}
.sh-label{font-size:9.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--mute);margin:16px 0 8px}
.sh-input{width:100%;height:52px;border-radius:10px;border:1px solid var(--line);background:rgba(4,5,10,.7);padding:0 16px;font-family:var(--disp);font-weight:600;text-transform:uppercase;font-size:16px;letter-spacing:.08em;outline:0}
.sh-input::placeholder{color:#4a5568}
.sh-input:focus{border-color:var(--cy);box-shadow:0 0 0 3px rgba(61,245,255,.12)}
.swatches{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.swatch{aspect-ratio:1;border-radius:50%;position:relative;transition:transform .2s var(--spring);max-width:42px;justify-self:center;width:100%;box-shadow:0 0 12px -2px var(--c)}
.swatch.on{box-shadow:0 0 0 3px #0a0e19,0 0 0 4.5px var(--cy),0 0 18px var(--c);transform:scale(1.06)}
.shapes4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.shape-opt{height:50px;border-radius:10px;border:1px solid var(--line);display:grid;place-items:center;background:rgba(4,5,10,.5)}
.shape-opt svg{width:24px;height:24px}
.shape-opt.on{border-color:var(--cy);background:rgba(61,245,255,.1);box-shadow:0 0 16px rgba(61,245,255,.25)}
.shape-opt.on svg *{fill:var(--cy)}
.sh-row{display:flex;gap:10px;margin-top:22px}
.sh-row > *{flex:1}
.btn-line{height:56px;border-radius:8px;border:1px solid rgba(234,242,255,.4);display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--disp);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;transition:transform .15s var(--spring)}
.btn-line:active{transform:scale(.95)}
.btn-line.danger{color:#FF5A7A;border-color:rgba(255,90,122,.6)}
.btn-line.armed{background:#FF5A7A;color:#fff}
.btn-line .i{width:19px;height:19px}
.sheet .btn-primary{height:56px}

.shape-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.shape-tile{border-radius:10px;background:var(--stage);border:1px solid var(--line);aspect-ratio:4/3.3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#b9c4d9;font-size:9px;letter-spacing:.2em;text-transform:uppercase;transition:transform .15s var(--spring),border-color .15s,box-shadow .15s}
.shape-tile:active{transform:scale(.93);border-color:var(--cy);box-shadow:0 0 18px rgba(61,245,255,.3)}
.shape-tile svg{width:78%;height:auto;overflow:visible}

.stepper{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);border-radius:14px;padding:8px;background:rgba(4,5,10,.5)}
.stepper .sv{font-family:var(--disp);font-weight:300;font-size:40px;line-height:1;text-align:center;flex:1;color:var(--cy);text-shadow:0 0 18px rgba(61,245,255,.5)}
.stepper .sv small{font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;color:var(--mute);display:block;margin-top:6px;text-transform:uppercase;text-shadow:none}
.stepper .round-btn{width:52px;height:52px}
.steppers2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.steppers2 .stepper{flex-direction:column;gap:8px;padding:12px 8px}
.steppers2 .stepper .st-btns{display:flex;gap:10px}
.steppers2 .stepper .round-btn{width:44px;height:44px}
.steppers2 .st-ttl{display:flex;align-items:center;gap:6px;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink)}
.steppers2 .st-ttl svg{width:15px;height:15px;fill:none;stroke:var(--cy);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.presets{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.preset{height:56px;border-radius:10px;border:1px solid var(--line);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--mute)}
.preset b{font-family:var(--disp);font-size:16px;font-weight:600;letter-spacing:.04em;color:var(--ink)}
.preset.on{border-color:var(--cy);background:rgba(61,245,255,.1);box-shadow:0 0 16px rgba(61,245,255,.25)}
.preset.on b{color:var(--cy)}
.share-big{display:flex;flex-direction:column;gap:10px}
.share-big .btn-primary,.share-big .btn-line{width:100%;height:62px}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;top:calc(66px + env(safe-area-inset-top,0px));transform:translateX(-50%);z-index:40;background:rgba(6,10,20,.92);color:var(--cy);border:1px solid rgba(61,245,255,.5);padding:11px 18px;border-radius:10px;font-family:var(--disp);font-weight:600;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;animation:toast 2.4s var(--ease) both;pointer-events:none;box-shadow:0 0 24px rgba(61,245,255,.25)}
@keyframes toast{0%{opacity:0;transform:translate(-50%,-10px)}10%,85%{opacity:1;transform:translate(-50%,0)}100%{opacity:0}}

/* ---------- bigger screens ---------- */
@media (min-width:760px){
  .tools{gap:10px;justify-content:center}
  .tool{min-width:76px;font-size:9.5px}
  .thumb{width:112px}
  .thumb canvas,.thumb.add .add-box{width:112px;height:84px}
  .thumb .tn{max-width:112px}
  .strip{justify-content:safe center}
  .foot{justify-content:center;padding-right:16px}
  .foot .play{flex:none;width:320px}
  .bar{padding-left:20px;padding-right:20px}
  .title-input{font-size:18px}
  .nums{font-size:11px}
}
@media (max-height:640px){
  .tool span{display:none}
  .tool{padding:8px}
  .bar{height:48px}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01s!important;transition-duration:.01s!important}}