.cs-pop{position:absolute; left:0; top:calc(100% + 4px); z-index:80; min-width:100%; width:max-content; max-width:min(22rem,92vw);
  background:var(--card); border:1px solid var(--line); box-shadow:6px 6px 0 rgba(0,0,0,.08); display:none}
.cs[data-up] .cs-pop{top:auto; bottom:calc(100% + 4px)}
.cs[data-open] .cs-pop{display:block}
.cs-search{display:block; border-bottom:1px solid var(--line)}
.cs-search input{font:inherit; font-size:.9rem; width:100%; border:0; padding:.55rem .65rem; background:var(--sunk); color:var(--ink); outline:none}
.cs-list{list-style:none; margin:0; padding:.2rem 0; max-height:16rem; overflow-y:auto}
.cs-opt{display:flex; align-items:center; gap:.55rem; padding:.48rem .65rem; cursor:pointer; font-size:.92rem; user-select:none}
.cs-opt[data-active]{background:var(--sunk)}
.cs-opt[aria-selected="true"]{font-weight:600}
.cs-opt .cs-mk{width:14px; height:14px; flex:0 0 auto; border:1px solid var(--line); display:grid; place-items:center; font-size:.6rem; line-height:1}
.cs-single .cs-opt .cs-mk{border:0}
.cs-opt[aria-selected="true"] .cs-mk{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
.cs-single .cs-opt[aria-selected="true"] .cs-mk{background:transparent; color:var(--accent); font-size:.85rem}
.cs-opt[aria-disabled="true"]{opacity:.4; cursor:default}
.cs-opt mark{background:var(--accent-soft); color:var(--accent); padding:0}
.cs-empty{padding:.6rem .65rem; font-size:.85rem; color:var(--muted)}
.cs-foot{display:flex; justify-content:space-between; gap:.4rem; border-top:1px solid var(--line); padding:.35rem .45rem}
.cs-foot button{font:inherit; font-size:.78rem; border:0; background:none; color:var(--muted); cursor:pointer; padding:.2rem .3rem}
.cs-foot button:hover{color:var(--ink)}

.dock{position:fixed; left:0; right:0; bottom:0; z-index:40; background:var(--bar); backdrop-filter:blur(10px);
  border-top:1px solid var(--line); padding:.55rem 1rem calc(.55rem + env(safe-area-inset-bottom,0px))}
.dock-in{max-width:var(--w); margin:0 auto; display:flex; gap:.45rem; align-items:center; flex-wrap:wrap}
.pad{height:6rem}
.big{font-family:var(--mono); font-weight:600; letter-spacing:-.05em; line-height:.9; font-size:clamp(4.5rem,24vw,8.5rem); margin:0}
.big small{font-size:.16em; letter-spacing:0; font-weight:500; color:var(--muted); display:block; margin-top:.6rem}
.center{text-align:center}
.stage{border:1px solid var(--line); padding:1.3rem 1rem 1.2rem; margin:1.2rem 0 0; background:var(--card)}
.row{display:flex; gap:.45rem; align-items:center; flex-wrap:wrap; justify-content:center; margin:.8rem 0 0}
.lbl{font-family:var(--mono); font-size:.68rem; letter-spacing:0; color:var(--muted); text-transform:none}
.go{font:inherit; font-weight:700; font-size:1.05rem; letter-spacing:.02em; border:0; background:var(--accent); color:var(--on-accent);
  padding:.95rem 2.2rem; cursor:pointer; min-width:11rem; border-radius:var(--rs)}
.go[data-on="1"]{background:var(--ink); color:var(--paper)}
.sq{font:inherit; font-family:var(--mono); font-size:1rem; font-weight:600; width:52px; height:48px; border:1px solid var(--line);
  background:var(--card); color:var(--ink); cursor:pointer; border-radius:var(--rs)}
.sq:active{background:var(--sunk)}
.beats{display:flex; gap:.3rem; justify-content:center; flex-wrap:wrap; margin:1rem 0 0}
.beats button{width:clamp(40px,11vw,58px); aspect-ratio:1/1; border:1px solid var(--line); background:var(--card); cursor:pointer;
  font-family:var(--mono); font-size:.85rem; font-weight:600; color:var(--ink); position:relative; padding:0; border-radius:var(--rs)}
.beats button[data-a="2"]{background:var(--ink); color:var(--paper)}
.beats button[data-a="0"]{border-style:dashed; color:var(--muted)}
.beats button[data-now]{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
.beats button small{position:absolute; bottom:2px; left:0; right:0; font-size:.5rem; font-weight:500; letter-spacing:0; opacity:.7}
.subs{display:flex; gap:3px; justify-content:center; margin:.5rem 0 0; min-height:6px}
.subs i{width:10px; height:6px; background:var(--sunk); display:block}
.subs i[data-on]{background:var(--accent)}
.meter{height:10px; border:1px solid var(--line); margin:.9rem 0 0; position:relative}
.meter i{position:absolute; left:0; top:0; bottom:0; background:var(--accent); width:0}
.pulse-row{display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; justify-content:center; margin:.9rem 0 0}
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(7rem,1fr)); gap:0; border:1px solid var(--line); margin:1rem 0 0}
.stats div{padding:.55rem .7rem; border-right:1px solid var(--line)}
.stats div:last-child{border-right:0}
.stats dt{font-family:var(--mono); font-size:.62rem; letter-spacing:0; color:var(--muted)}
.stats dd{margin:.1rem 0 0; font-family:var(--mono); font-size:1.15rem; font-weight:600}
.field{display:grid; grid-template-columns:repeat(auto-fit,minmax(9rem,1fr)); gap:.6rem; margin:1rem 0 0}
.field label{display:grid; gap:.25rem; font-family:var(--mono); font-size:.68rem; letter-spacing:0; color:var(--muted)}
.field input,.field select{font:inherit; font-family:var(--mono); font-size:1rem; padding:.5rem .6rem; border:1px solid var(--line);
  background:var(--card); color:var(--ink); border-radius:var(--rs); width:100%}
.log{list-style:none; margin:.6rem 0 0; padding:0; border-top:1px solid var(--line); font-family:var(--mono); font-size:.8rem}
.log li{display:flex; justify-content:space-between; padding:.4rem 0; border-bottom:1px solid var(--line); color:var(--muted)}
.log li b{color:var(--ink); font-weight:600}
/* сцена */
body.stage-mode{--paper:#000; --card:#000; --ink:#FFF; --line:#FFF; --muted:#8C8C8C; --sunk:#1A1A1A; --bar:rgba(0,0,0,.9)}
.flash{position:fixed; inset:0; background:var(--accent); opacity:0; pointer-events:none; z-index:35; transition:opacity .12s}
.flash[data-on]{opacity:.9; transition:none}
.pend{width:100%; max-width:420px; display:block; margin:0 auto}
.pend line.arm{stroke:var(--ink); stroke-width:4}
.pend rect.bob{fill:var(--accent)}
.pend line.base{stroke:var(--ink); stroke-width:3}
.pend text{fill:var(--muted); font-family:var(--mono); font-size:10px}
/* сетка грува */
.lanes{display:grid; gap:3px; margin:1rem 0 0; overflow-x:auto}
.lane{display:grid; grid-template-columns:4.2rem repeat(16,minmax(14px,1fr)); gap:2px; align-items:center}
.lane span{font-family:var(--mono); font-size:.62rem; letter-spacing:0; color:var(--muted)}
.lane i{height:22px; background:var(--sunk); border:1px solid var(--line); display:block}
.lane i[data-on]{background:var(--ink)}
.lane i[data-soft]{background:var(--muted)}
.lane i.q{border-left-width:2px}
.lane i[data-now]{outline:2px solid var(--accent); outline-offset:-1px}
/* тюнер */
.note{font-family:var(--mono); font-weight:600; font-size:clamp(5rem,28vw,9.5rem); line-height:.85; letter-spacing:-.06em; margin:0}
.note sup{font-size:.28em; vertical-align:top; margin-left:.05em; letter-spacing:0}
.note sub{font-size:.22em; color:var(--muted); letter-spacing:0; vertical-align:baseline}
.hz{font-family:var(--mono); font-size:.9rem; color:var(--muted); margin:.4rem 0 0}
.cents{position:relative; height:54px; margin:1.2rem 0 0; border:1px solid var(--line)}
.cents .scale{position:absolute; inset:0; display:grid; grid-template-columns:repeat(20,1fr)}
.cents .scale i{border-right:1px solid var(--sunk)}
.cents .zone{position:absolute; top:0; bottom:0; left:47%; width:6%; background:var(--sunk)}
.cents .mid{position:absolute; top:0; bottom:0; left:50%; width:2px; background:var(--ink); transform:translateX(-1px)}
.cents .needle{position:absolute; top:-6px; bottom:-6px; width:6px; background:var(--accent); left:50%; transform:translateX(-3px);
  transition:left .09s linear}
.cents[data-ok] .needle{background:var(--ink)}
.cents-lbl{display:flex; justify-content:space-between; font-family:var(--mono); font-size:.66rem; color:var(--muted); margin:.3rem 0 0}
.verdict2{font-family:var(--mono); font-size:.95rem; font-weight:600; margin:.8rem 0 0; min-height:1.4rem; letter-spacing:.06em}
.verdict2[data-ok]{color:var(--ink)}
.verdict2:not([data-ok]){color:var(--accent)}
.src{border:2px dashed var(--line); padding:.8rem .9rem; margin:1.2rem 0 0}
.src p{margin:.2rem 0 .5rem; font-size:.86rem; color:var(--muted)}
.strs{display:grid; grid-template-columns:repeat(auto-fit,minmax(4.2rem,1fr)); gap:0; border:1px solid var(--line); margin:1rem 0 0}
.strs button{font:inherit; border:0; border-right:1px solid var(--line); background:var(--card); color:var(--ink); padding:.8rem .2rem .6rem;
  cursor:pointer; display:grid; gap:.15rem; justify-items:center; border-radius:var(--rs); position:relative}
.strs button:last-child{border-right:0}
.strs b{font-family:var(--mono); font-size:1.5rem; font-weight:600; line-height:1}
.strs small{font-family:var(--mono); font-size:.6rem; color:var(--muted)}
.strs button[data-cur]{background:var(--accent); color:var(--on-accent)}
.strs button[data-cur] small{color:var(--on-accent)}
.strs button[data-ok]::after{content:"check"; font-family:"Material Symbols Outlined"; font-feature-settings:"liga"; font-size:15px; position:absolute; top:3px; right:6px; font-size:.75rem; font-weight:700}
.strs button[data-ok]:not([data-cur]){background:var(--sunk)}
.arrow{font-family:var(--mono); font-size:clamp(2.2rem,10vw,3.4rem); font-weight:600; line-height:1; margin:.6rem 0 0}
canvas.strobe{width:100%; height:120px; display:block; border:1px solid var(--line); background:var(--card); margin:1.1rem 0 0}
.steps2{list-style:none; counter-reset:s; margin:.8rem 0 0; padding:0; border-top:1px solid var(--line)}
.steps2 li{counter-increment:s; display:grid; grid-template-columns:2.2rem minmax(0,1fr) auto; gap:.7rem; padding:.7rem 0;
  border-bottom:1px solid var(--line); align-items:center}
.steps2 li::before{content:counter(s); font-family:var(--mono); font-weight:600; font-size:1.3rem; color:var(--accent)}
.steps2 b{display:block}
.steps2 span span{font-size:.85rem; color:var(--muted)}