:root{
  --bg:#d9d5cc; --body:#ebe8e1; --panel:#f7f5f0; --ink:#141414; --soft:#56534d; --mute:#97928a; --line:#d2cdc3;
  --char:#1c1c1e; --red:#ff4b1f; --blue:#2c52ff; --yel:#ffc21a; --grn:#13ad67; --tape:#3a2a21;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --sans: "Helvetica Neue", Helvetica, "Hiragino Sans", "Noto Sans JP", Arial, sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:var(--sans);
  -webkit-user-select:none;user-select:none;overscroll-behavior:none;-webkit-text-size-adjust:100%}
body{display:flex;justify-content:center}
button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer;touch-action:manipulation}
button:focus-visible,.knob:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
small{font-size:9px;font-weight:400;letter-spacing:.06em;opacity:.55;margin-left:5px}

.device{width:100%;max-width:560px;min-height:100dvh;background:var(--body);
  padding:calc(env(safe-area-inset-top) + 10px) 14px calc(env(safe-area-inset-bottom) + 14px);
  display:flex;flex-direction:column;gap:10px}

/* header */
.top{display:flex;align-items:center;gap:10px}
.brand{display:flex;align-items:center;gap:8px}
.mark{width:26px;height:26px}
.word{font-size:18px;letter-spacing:-.01em}
.word b{font-weight:800;margin-right:3px}
.readout{margin-left:auto;font:600 11px/1 var(--mono);display:flex;align-items:baseline;gap:3px;color:var(--soft)}
.readout span{font-size:14px;color:var(--ink)}
.readout small{margin:0 8px 0 2px;font-size:10px}
.chip{font:600 11px/1 var(--mono);padding:8px 11px;border-radius:999px;background:var(--panel);border:1px solid var(--line);letter-spacing:.02em}
.chip:active{transform:scale(.95)}
.hint{margin:0;font:500 12px/1.3 var(--mono);color:var(--soft);min-height:16px;transition:color .2s}
.hint.msg{color:var(--red)}

/* deck */
.deck{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:8px 12px 10px}
.reels{width:100%;height:auto;max-height:104px;display:block}
.reel{transform-box:fill-box;transform-origin:center}
.flange{fill:#efece5;stroke:var(--ink);stroke-width:1.6}
.pack{fill:var(--tape)}
.win{fill:#efece5;stroke:var(--ink);stroke-width:1.2}
.hub{fill:var(--panel);stroke:var(--ink);stroke-width:1.6}
.spoke{fill:var(--ink)}
.tape-path{fill:none;stroke:var(--tape);stroke-width:3;stroke-linejoin:round}
.head{fill:var(--ink)}
.rec{fill:#d8d3c9;transition:fill .15s}
.rec.on{fill:var(--red)}
.deck-label{font:800 13px var(--sans);fill:var(--ink);letter-spacing:.12em}
.deck-sub{font:400 9px var(--sans);fill:var(--mute);letter-spacing:.2em}
.strip{position:relative;height:34px;margin-top:6px;border-radius:7px;background:var(--tape);overflow:hidden}
.strip-bars{position:absolute;top:0;bottom:0;left:9px;right:9px}
.strip-bars i{position:absolute;top:0;bottom:0;width:1px;background:rgba(255,255,255,.14)}
.strip-rows{position:absolute;top:4px;bottom:4px;left:9px;right:9px}
.strip-row{position:relative;height:25%}
.strip-row i{position:absolute;top:50%;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:var(--c)}
.strip-row.muted i{opacity:.22}
.playhead{position:absolute;top:0;bottom:0;left:0;width:2px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.2);opacity:0;will-change:transform}
.playhead.on{opacity:1}
.strip-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:500 10px var(--mono);color:rgba(255,255,255,.4);letter-spacing:.1em}
.deck-row{display:flex;align-items:center;gap:8px;margin-top:8px;min-height:30px}
.layers{list-style:none;margin:0;padding:0;display:flex;gap:6px;flex-wrap:wrap;flex:1}
.layer{font:600 10px/1 var(--mono);display:flex;align-items:center;gap:5px;padding:6px 9px 6px 6px;border-radius:999px;background:var(--body);border:1px solid var(--line);cursor:pointer}
.layer i{width:10px;height:10px;border-radius:50%;background:var(--c)}
.layer.muted{opacity:.4}
.layer.muted i{background:transparent;box-shadow:inset 0 0 0 2px var(--c)}
.layer{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:none}
.layer-menu{position:absolute;z-index:20;display:flex;gap:6px;padding:6px;border-radius:14px;background:var(--panel);border:1px solid var(--line);box-shadow:0 6px 20px rgba(0,0,0,.15)}
.layer-menu .chip{padding:9px 12px}
.layer-menu .danger{background:var(--red);color:#fff;border-color:var(--red)}
.deck-btns{display:flex;gap:4px}
.mini{font:600 10px/1 var(--mono);padding:7px 8px;border-radius:7px;background:var(--body);border:1px solid var(--line)}
.mini:disabled{opacity:.3;cursor:default}
.mini:not(:disabled):active{transform:scale(.94)}

/* tabs */
.tabs{display:flex;gap:6px}
.tab{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 8px;border-radius:12px;
  font:700 13px/1 var(--sans);background:var(--panel);border:1px solid var(--line);transition:background .12s,color .12s}
.tab .num{font:700 10px/1 var(--mono);width:17px;height:17px;border-radius:50%;display:grid;place-items:center;border:1.4px solid currentColor}
.tab.on{background:var(--ink);color:var(--body);border-color:var(--ink)}

/* pads */
.pads-wrap{position:relative;touch-action:none}
.page{display:none}
.page.on{display:block}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.pad{position:relative;aspect-ratio:1/1;border-radius:15px;overflow:hidden;touch-action:none;
  --a:var(--red);will-change:transform}
.page-r .pad{background:var(--char);color:#bdb8ae;box-shadow:inset 0 -3px 0 rgba(0,0,0,.45),0 1px 0 rgba(255,255,255,.7)}
.page-t .pad{background:#fcfbf8;color:var(--soft);border:1px solid var(--line);box-shadow:inset 0 -3px 0 rgba(0,0,0,.06),0 1px 0 #fff}
.pad .flash{position:absolute;inset:0;background:var(--a);opacity:0;pointer-events:none}
.pad .key{position:absolute;top:8px;left:10px;font:600 10px/1 var(--mono);opacity:.45}
.pad .dot{position:absolute;top:9px;right:9px;width:7px;height:7px;border-radius:50%;background:var(--a)}
.pad svg{position:absolute;left:10px;right:10px;top:36%;width:calc(100% - 20px);height:28%}
.pad svg rect{fill:var(--a)}
.pad .nm{position:absolute;left:10px;right:10px;bottom:9px;font:600 9.5px/1.1 var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.02em;text-transform:lowercase}
.pad.empty svg,.pad.empty .dot{display:none}
.page-t.rev-on .pad svg{transform:scaleX(-1)}
.page-t.rev-on .pad{box-shadow:inset 0 0 0 2px var(--blue)}
.loader{position:absolute;inset:0;border-radius:16px;background:var(--panel);border:1.5px dashed var(--mute);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:14px;text-align:center;touch-action:manipulation}
.loader[hidden]{display:none}
.loader.over{border-color:var(--red);background:#fff}
.loader-title{margin:0;font:700 17px/1.2 var(--sans)}
.loader-btns,.drawer-btns{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.btn{font:700 13px/1 var(--sans);padding:12px 16px;border-radius:999px;background:var(--body);border:1px solid var(--line)}
.btn.ink{background:var(--ink);color:var(--body);border-color:var(--ink)}
.btn:active{transform:scale(.96)}
.loader-note{margin:0;font:500 10.5px/1.4 var(--mono);color:var(--soft);max-width:32ch}
.loader-tip{margin:0;font:500 10px/1.4 var(--mono);color:var(--mute)}

/* perform */
.perform{display:flex;align-items:center;gap:12px;padding:4px 0}
.round{width:70px;flex:0 0 70px;display:flex;flex-direction:column;align-items:center;gap:5px;touch-action:none}
.round svg{width:62px;height:62px;border-radius:50%;padding:12px;transition:transform .08s}
.round span{font:700 10px/1 var(--mono);white-space:nowrap}
.round span small{display:block;margin:3px 0 0;text-align:center}
.dice svg{background:var(--yel)}
.dice .die{fill:none;stroke:var(--ink);stroke-width:2.4}
.dice circle{fill:var(--ink)}
.rev svg{background:var(--blue)}
.rev path{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.rev.on svg{background:#fff;box-shadow:inset 0 0 0 4px var(--blue)}
.rev.on path{stroke:var(--blue)}
.round:active svg{transform:scale(.92)}
.catch{flex:1;height:84px;border-radius:42px;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;gap:4px;
  box-shadow:inset 0 -5px 0 rgba(0,0,0,.18),0 2px 0 rgba(255,255,255,.7);touch-action:none;will-change:transform}
.catch-word{font:800 22px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.catch small{font-size:10px;opacity:.8}
.catch.full{background:#c9c4ba}

/* tape controls */
.tape-ctl{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:12px;display:flex;flex-direction:column;gap:12px}
.lbl{font:700 10px/1 var(--mono);white-space:nowrap}
.vari{display:flex;align-items:center;gap:10px}
.vari input{flex:1;-webkit-appearance:none;appearance:none;height:30px;background:transparent;touch-action:none}
.vari input::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--line),var(--tape) 50%,var(--line))}
.vari input::-moz-range-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--line),var(--tape) 50%,var(--line))}
.vari input::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:-10px;border-radius:50%;background:var(--ink);border:4px solid var(--panel);box-shadow:0 0 0 1.5px var(--ink)}
.vari input::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--ink);border:4px solid var(--panel)}
.vari .chip{min-width:52px}
.vari .lock{min-width:80px;text-align:center;padding-left:8px;padding-right:8px}
@media (max-width:430px){.vari{gap:7px}.vari input{min-width:0;width:0}.vari .chip:not(.lock){min-width:44px}}
.vari .lock.on{background:var(--ink);color:var(--panel);border-color:var(--ink)}
.vari .lock.busy{animation:lockPulse 1s ease-in-out infinite}
@keyframes lockPulse{50%{opacity:.55}}
.knobs{display:flex;align-items:center;gap:14px}
.knob{display:flex;flex-direction:column;align-items:center;gap:6px;touch-action:none;cursor:ns-resize}
.knob .cap{width:46px;height:46px;border-radius:50%;position:relative;box-shadow:inset 0 -3px 0 rgba(0,0,0,.2),0 1px 0 #fff}
.knob .cap i{position:absolute;left:50%;top:5px;width:4px;height:14px;margin-left:-2px;border-radius:2px;background:currentColor}
.knob .cap{transform:rotate(var(--rot,0deg))}
.k-room .cap{background:var(--blue);color:#fff}
.k-tape .cap{background:var(--grn);color:#fff}
.k-echo .cap{background:var(--tape);color:#fff}
#saveBtn[hidden]{display:none}
#saveBtn:disabled{opacity:.35}
#saveBtn.on{background:var(--ink);color:var(--panel);border-color:var(--ink)}
.k-vol .cap{background:#fff;color:var(--ink);border:1.5px solid var(--ink)}
.knob .lbl small{display:block;margin:3px 0 0;text-align:center}
.redeal{margin-left:auto}

@media (hover:none){.pad .key,.kc{display:none}}

/* drawer */
.drawer{position:fixed;inset:0;background:rgba(20,20,20,.35);display:flex;align-items:flex-end;justify-content:center;z-index:10}
.drawer[hidden]{display:none}
.drawer-card{width:100%;max-width:560px;max-height:78vh;overflow:auto;background:var(--panel);border-radius:22px 22px 0 0;padding:16px 16px calc(env(safe-area-inset-bottom) + 18px);display:flex;flex-direction:column;gap:12px}
.drawer-head{display:flex;align-items:center;justify-content:space-between;font-size:16px}
.drawer-card .loader-note{max-width:none;text-align:center}
@media (min-width:700px) and (hover:hover){.drawer{align-items:center;padding:24px}.drawer-card{border-radius:22px;max-height:84vh;padding:18px 18px 20px}}
.files{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.files li{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--body)}
.files .fn{flex:1;min-width:0;font:600 12px/1.2 var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.files .fm{font:500 10px var(--mono);color:var(--mute);white-space:nowrap}
.role{font:700 11px/1 var(--mono);padding:8px 10px;border-radius:999px;min-width:68px}
.role.R{background:var(--char);color:#fff}
.role.T{background:#fff;border:1px solid var(--ink)}
.files .empty{justify-content:center;color:var(--mute);font:500 11px var(--mono)}

.veil{position:fixed;inset:0;background:rgba(20,20,20,.82);color:#fff;display:none;align-items:center;justify-content:center;font:800 28px var(--sans);letter-spacing:.1em;z-index:20;pointer-events:none}
.veil.on{display:flex}

/* desktop: both pages side by side */
@media (min-width:980px){
  body{align-items:center;padding:28px}
  .device{max-width:1060px;min-height:auto;border-radius:30px;padding:22px 26px 16px;
    box-shadow:0 1px 0 #fff inset,0 30px 60px -30px rgba(0,0,0,.35),0 0 0 1px rgba(0,0,0,.06);
    display:grid;grid-template-columns:1fr 1fr;column-gap:22px;row-gap:12px;
    grid-template-areas:"top top" "hint hint" "deck tapectl" "tabs tabs" "pads pads" "perform perform"}
  .top{grid-area:top}.hint{grid-area:hint}.deck{grid-area:deck}.tape-ctl{grid-area:tapectl;justify-content:center}
  .tabs{grid-area:tabs}.pads-wrap{grid-area:pads;display:grid;grid-template-columns:1fr 1fr;gap:22px}
  .perform{grid-area:perform;max-width:620px;justify-self:center;width:100%}
  .page{display:block;padding:8px;border-radius:20px;border:2px solid transparent;transition:border-color .12s}
  .page.on{border-color:var(--ink)}
  .loader{grid-column:1 / -1}
}

.deck-row{flex-wrap:wrap}
.deck-btns{flex-wrap:wrap;justify-content:flex-end;margin-left:auto}
.mini.stop{display:flex;align-items:center;gap:5px;background:var(--ink);color:var(--body);border-color:var(--ink)}
.mini.stop svg{width:9px;height:9px;fill:currentColor}
.mini.stop .tri{display:none}
.mini.stop.stopped{background:var(--red);border-color:var(--red);color:#fff}
.mini.stop.stopped .tri{display:block}.mini.stop.stopped .sq{display:none}
.mini.stop b{font-weight:700}
.btn.danger{background:transparent;color:var(--red);border-color:var(--red)}
.rm{width:30px;height:30px;border-radius:50%;font:600 16px/1 var(--sans);color:var(--soft);flex:0 0 30px}
.rm:active{background:var(--line)}
.mini.tight.on{background:var(--grn);border-color:var(--grn);color:#fff}
.ex-opts{display:flex;flex-direction:column;gap:8px}
.ex-opts[hidden],.drawer-btns[hidden],.btn[hidden],.loader-note[hidden]{display:none}
.ex-opt{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;padding:14px 16px;border-radius:14px;background:var(--body);border:1px solid var(--line)}
.ex-opt b{font:800 15px/1 var(--sans)}
.ex-opt span{font:500 11px/1.4 var(--mono);color:var(--soft)}
.ex-opt:active{transform:scale(.98)}
.ex-opt:disabled{opacity:.5}
#exVideo b{color:var(--red)}
.ex-status{margin:0;font:600 12px/1.4 var(--mono);color:var(--red);min-height:16px}
#exportBtn:disabled{opacity:.35}
.recording #exportBtn{background:var(--red);color:#fff;border-color:var(--red)}
.riding #exportBtn{font-weight:800;padding:9px 16px;animation:lockPulse 1.2s ease-in-out infinite}
.ex-ride b{color:var(--red)}
.ex-ride-btns{display:flex;gap:8px;margin-top:6px}
.ex-ride-btns .chip{padding:10px 14px;font-weight:700}
.clipping *{pointer-events:none}
.clipping #exportBtn{pointer-events:auto}
.clipping .deck,.clipping .pads-wrap,.clipping #padsWrap{opacity:.85}
/* Share clip: pads stay locked, the lever and knobs stay live so moves ride into the clip */
.clipping .vari,.clipping .vari *,.clipping .knob,.clipping .knob *{pointer-events:auto}
.clipping #redealBtn{opacity:.4}
.rec-canvas{position:fixed;left:-10000px;top:0;width:72px;height:128px;pointer-events:none}
.loader-note a{color:inherit}
@media (max-width:430px){
  /* Row 1: brand, then Archive, Save, Export, Sounds. Row 2: bpm/bars, Guide and Vault. */
  .top{flex-wrap:wrap;row-gap:6px;column-gap:6px}
  .top .chip{padding:7px 8px}
  .brand{margin-right:auto}
  .readout{order:3;flex:1 1 auto;margin-left:0}
  #helpBtn{order:4}
  #vaultLink{order:5}
  .deck-btns{gap:3px}
  .mini{padding:7px 6px}
  .deck-btns{flex:1 1 100%;flex-wrap:nowrap;justify-content:space-between}
  .mini.mic i{display:none}
  .mini.mic.on{box-shadow:0 0 0 calc(var(--lvl,0)*3px) rgba(229,50,45,.35)}
}
/* key hints live on the controls (computers only) */
.kc{font:600 8.5px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;opacity:.5;margin-left:5px;padding:2px 3px;border-radius:3px;box-shadow:inset 0 0 0 1px currentColor}
.kc-catch{margin-left:12px;font-size:9.5px;opacity:.75}
.round{position:relative}
.kc-round{position:absolute;top:0;right:2px;margin:0;background:var(--body);color:var(--soft);opacity:.85}
.mini:disabled .kc{opacity:.6}
@media (max-width:430px){.kc{display:none}}

/* Guide levels: 0 Clean (default), 1 Essentials, 2 Full guide. Status messages always show. */
body[data-help="0"] .g1,body[data-help="0"] .g2,body[data-help="1"] .g2{display:none!important}
body:not([data-help="2"]) .kc,body:not([data-help="2"]) .pad .key{display:none!important}
.help-chip{min-width:30px;padding-left:0;padding-right:0;text-align:center}
.help-opt.on{box-shadow:inset 0 0 0 2px var(--ink)}

/* Save to Vault + song calendar */
#songsBtn svg{width:15px;height:15px;display:block;margin:0 auto}
#songsBtn[hidden],#vaultSaveBtn[hidden]{display:none}
/* Calendar stays pinned at the top of the archive while that day's songs scroll under it. */
#calWrap{display:flex;flex-direction:column;gap:10px}
.cal-pin{position:sticky;top:0;z-index:2;background:var(--panel);display:flex;flex-direction:column;gap:10px;margin-top:-12px;padding:12px 0 8px;border-bottom:1px solid var(--line)}
.cal-nav{display:flex;align-items:center;justify-content:space-between}
.cal-nav b{font:800 15px/1 var(--sans)}
.cal-nav .chip{min-width:34px;text-align:center}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-dow{font:600 10px/1 var(--mono);color:var(--mute);text-align:center;padding:4px 0}
.cal-day{position:relative;height:40px;border-radius:10px;background:var(--body);border:1px solid var(--line);font:600 12px/1 var(--mono);color:var(--soft);display:flex;align-items:center;justify-content:center}
.cal-day i{position:absolute;right:4px;bottom:3px;font:700 9px/1 var(--mono);font-style:normal}
.cal-day.has{color:var(--ink)}
.cal-day.has[data-n="1"]{background:#fbe1d6}
.cal-day.has[data-n="2"]{background:#f8c3ad}
.cal-day.has[data-n="3"]{background:#f39373}
.cal-day.has[data-n="4"]{background:var(--red);color:#fff}
.cal-day.today{border-color:var(--ink)}
.cal-day.sel{box-shadow:inset 0 0 0 2px var(--ink)}
.cal-count{margin:0;font:600 12px/1.3 var(--mono);color:var(--red);text-align:center;min-height:16px}
.cal-list{display:flex;flex-direction:column;gap:6px}
.cal-song{display:grid;grid-template-columns:28px 1fr 1fr 1fr;align-items:center;gap:6px;padding:12px 14px;border-radius:12px;background:var(--body);border:1px solid var(--line);font:600 12px/1 var(--mono);text-align:left}
.cal-song b{font-size:12px}
.cal-song.on{border-color:var(--red);color:var(--red)}
.cal-item{display:flex;align-items:center;gap:6px;padding-right:8px;border-radius:12px;background:var(--body);border:1px solid var(--line)}
.cal-item.on{border-color:var(--red)}
.cal-item .cal-song{flex:1 1 auto;min-width:0;border:0;background:none}
.cal-acts{flex:0 0 196px;display:flex;gap:6px;justify-content:flex-end;align-items:center}
.rebirth-btn{flex:0 0 auto;font:700 11px/1 var(--mono);padding:9px 12px}
.cal-note{font:500 11px/1 var(--mono);color:var(--mute);padding-right:6px}
/* Phone: the buttons sit under the song, still inside its card. */
@media (max-width:520px){
  .cal-item{flex-wrap:wrap;gap:0;padding:0}
  .cal-item .cal-song{flex:1 1 100%}
  .cal-acts{flex:1 1 100%;padding:0 8px 8px}
  .cal-acts .rebirth-btn{flex:1 1 0}
  .cal-acts:has(.cal-note){display:none}
}
.cal-empty{margin:0;font:500 11.5px/1.4 var(--mono);color:var(--soft);text-align:center;padding:8px 0}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:3px;border-radius:12px;background:var(--body);border:1px solid var(--line)}
.seg-btn{padding:9px 0;border-radius:9px;font:700 13px/1 var(--sans);color:var(--soft)}
.seg-btn.on{background:var(--ink);color:var(--body)}
.arch-day{display:flex;align-items:center;gap:10px;width:100%;padding:12px 14px;border-radius:12px;background:var(--panel);border:1px solid var(--line);
  font:700 11.5px/1 var(--mono);color:var(--ink);text-transform:uppercase;letter-spacing:.04em;text-align:left}
.arch-day span{flex:1}
.arch-day em{font-style:normal;font-weight:600;color:var(--soft);text-transform:none;letter-spacing:0}
.arch-day i{font-style:normal;font-size:15px;color:var(--soft);transition:transform .15s}
.arch-day.open{border-color:var(--ink)}
.arch-day.open i{transform:rotate(90deg)}
/* The list and the calendar are separate tabs: never show both. */
#archList[hidden],#calWrap[hidden]{display:none}
.auto-row{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-radius:12px;background:var(--body);border:1px solid var(--line);font:600 12px/1 var(--mono);color:var(--soft)}
.auto-row i{width:36px;height:20px;border-radius:999px;background:var(--mute);position:relative;transition:background .2s}
.auto-row i::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .2s}
.auto-row.on{color:var(--ink)}
.auto-row.on i{background:var(--red)}
.auto-row.on i::after{transform:translateX(16px)}
.vault-chip{text-decoration:none;color:inherit;display:inline-flex;align-items:center}
.vault-chip[hidden]{display:none}
/* Tame to Feral: five stops, part of the instrument */
.feral{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:4px 0}
.feral-end{font:600 11px/1 var(--mono);color:var(--soft);letter-spacing:.02em}
.feral-name{font:700 11px/1 var(--mono);color:var(--ink);width:52px;text-align:left}
.feral-track{position:relative;display:flex;gap:6px;padding:5px;border-radius:999px;background:var(--body);border:1px solid var(--line)}
.feral-pos{width:26px;height:26px;border-radius:50%;border:1px solid var(--line);background:var(--panel);padding:0;transition:transform .12s}
.feral-pos:nth-child(4),.feral-pos:nth-child(5){border-style:dashed}
.feral-pos.on{background:var(--ink);border-color:var(--ink);transform:scale(1.12)}
.feral-pos.on:nth-child(4),.feral-pos.on:nth-child(5){background:var(--red);border-color:var(--red)}
.feral-pos:active{transform:scale(.9)}
/* Tame to Feral, top of the Sounds sheet; the word under it turns into Re-deal after a change */
.feral-box{display:flex;flex-direction:column;align-items:center;gap:6px;padding:4px 0 12px;margin-bottom:8px;border-bottom:1px solid var(--line, rgba(0,0,0,.08))}
.feral-word{font:600 11px/1 var(--mono);color:var(--soft);letter-spacing:.02em;background:none;border:0;padding:6px 12px;border-radius:999px}
.feral-word.pending{background:var(--red);color:#fff;animation:redealPulse 1.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.feral-word.pending{animation:none}}
.redeal.pending{background:var(--ink);color:var(--panel);border-color:var(--ink);animation:redealPulse 1.4s ease-in-out infinite}
@keyframes redealPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@media (prefers-reduced-motion:reduce){.redeal.pending{animation:none}}
.credit{font:500 11px/1.4 var(--mono);color:var(--soft);margin:0 0 12px}
.role.B{background:var(--panel);border:1px solid var(--line);color:var(--soft)}
.role.auto{opacity:.85}
.role.pinned{box-shadow:inset 0 0 0 2px var(--ink)}

/* Key and Time toggles (Sounds sheet) */
.match-box{display:flex;flex-direction:column;align-items:center;gap:6px;padding:2px 0 12px;margin-bottom:8px;border-bottom:1px solid var(--line, rgba(0,0,0,.08))}
.match-row{display:flex;align-items:center;justify-content:center;gap:10px;width:100%}
.match-seg{width:190px}
.match-btn{padding:9px 0;border-radius:9px;font:700 13px/1 var(--sans);color:var(--soft)}
.match-btn.on{background:var(--ink);color:var(--body)}
.match-btn.on[data-v="1"]{background:var(--blue);color:#fff}
.match-note{margin:2px 0 0;font:600 11px/1.35 var(--mono);color:var(--soft);text-align:center;max-width:320px}

/* Mic: a quiet button until on; then red with a live level ring. The Voice lane is the fifth row. */
.mini.mic{display:flex;align-items:center;gap:5px}
.mini.mic i{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.45}
.mini.mic.on{background:#e5322d;border-color:#e5322d;color:#fff;box-shadow:0 0 0 calc(var(--lvl,0)*5px) rgba(229,50,45,.35)}
.mini.mic.on i{opacity:1}
.strip-rows.five .strip-row{height:20%}
.strip-row.voice b{position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;border-radius:2px;background:var(--c);opacity:.75}
.strip-row.voice.muted b{opacity:.2}
.mini{white-space:nowrap}
@media (max-width:385px){.mini{padding:7px 4px}.deck-btns{gap:2px}}
.mic-why{margin:0;font-size:15px;line-height:1.4}
.mic-steps{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:6px;font-size:15px;line-height:1.35}
.mic-err{font:11px/1.3 var(--mono);opacity:.5}
.mini[hidden]{display:none}