/* Layout: phone column like Orchestrify — header band, piece, note strip, transport, then the two or three
   controls used all the time as pills. Everything set once lives in the settings sheet (header button).
   Tokens, shapes and controls are Orchestrify's own (floating player: tinted pills, teal play, brass badges). */
:root{
  --ink:#0e2a47; --muted:#5b7186; --teal:#0f9b8e; --brass:#b9651c; --wood:#8a5a3b;
  --paper:#ffffff; --page:#fbfdfd; --header:#eaf6f4; --line:#c3d6d8; --white:#ffffff;
  --c1:#dcebee; --c3:#efe6d8; --on-teal:#ffffff; --danger:#d1493f; --scrim:rgba(14,42,71,.38);
  --tint:rgba(14,42,71,.09); --tint2:rgba(14,42,71,.18);
  --f-display:'Fraunces','Vazirmatn',serif; --f-body:'Poppins','Vazirmatn',system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#e8f2f1; --muted:#9db3b6; --teal:#2bc0ae; --brass:#f0a35c; --wood:#c99a78;
    --paper:#162428; --page:#0e1a1d; --header:#12272a; --line:#34515a; --white:#1c3036;
    --c1:#1a3238; --c3:#332d22; --on-teal:#06211e; --danger:#ef7468; --scrim:rgba(0,0,0,.55);
    --tint:rgba(232,242,241,.10); --tint2:rgba(232,242,241,.20); color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ink:#e8f2f1; --muted:#9db3b6; --teal:#2bc0ae; --brass:#f0a35c; --wood:#c99a78;
  --paper:#162428; --page:#0e1a1d; --header:#12272a; --line:#34515a; --white:#1c3036;
  --c1:#1a3238; --c3:#332d22; --on-teal:#06211e; --danger:#ef7468; --scrim:rgba(0,0,0,.55);
  --tint:rgba(232,242,241,.10); --tint2:rgba(232,242,241,.20); color-scheme:dark;
}
*{box-sizing:border-box}
body{background:var(--page);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.5;-webkit-tap-highlight-color:transparent}
button,select,input{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

/* header band */
.hdr{background:var(--header);padding:12px 16px 10px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.hdr h1{font-family:var(--f-display);font-size:1.5rem;font-weight:700;line-height:1.1;margin:0}
.hdr-actions{display:flex;gap:8px;flex:none}
.hdr-btn{width:38px;height:38px;border-radius:50%;border:0;background:var(--white);color:var(--ink);display:flex;align-items:center;justify-content:center;padding:0;box-shadow:0 2px 8px rgba(14,42,71,.10);cursor:pointer}
.hdr-btn svg{width:19px;height:19px}
.hdr-btn.flat{background:var(--tint);box-shadow:none}

.app{max-width:520px;margin:0 auto;padding-inline:16px;padding-block:16px 36px;display:flex;flex-direction:column;gap:14px}
.piece{display:flex;flex-direction:column;gap:4px}
.piece h2{margin:0;font-weight:700;font-size:1.2rem;line-height:1.3;text-wrap:balance}
.meta{display:flex;flex-wrap:wrap;gap:2px 12px;color:var(--muted);font-size:12.5px;font-variant-numeric:tabular-nums}
.meta b{color:var(--ink);font-weight:600}
.note{font-size:12.5px;color:var(--muted);margin:0}
.err{color:var(--danger);font-size:13px;margin:4px 0 0}

/* note strip */
.stage{background:var(--c1);border-radius:26px;overflow:hidden}
.roll{display:block;width:100%;height:200px;touch-action:pan-y;cursor:pointer}
.legend{display:flex;flex-wrap:wrap;gap:3px 14px;padding:8px 16px 12px;font-size:11.5px;color:var(--muted)}
.legend i{display:inline-block;width:16px;height:7px;border-radius:2px;vertical-align:middle;margin-inline-end:5px;background:var(--ink)}
.legend i.q{background:var(--brass)}
.legend i.r{background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 4px)}
.legend i.t{background:none;border-block:2px solid var(--ink);height:9px;border-radius:0}
.legend i.g{background:linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 4px,var(--ink) 4px 6px,transparent 6px 8px,var(--ink) 8px 16px)}

/* sliders (same look as Orchestrify's player) */
.rng{--p:0%;-webkit-appearance:none;appearance:none;background:transparent;height:26px;margin:0;min-width:0;cursor:pointer;direction:ltr}
.rng::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:linear-gradient(to right,var(--teal) var(--p),var(--tint2) var(--p))}
.rng::-moz-range-track{height:6px;border-radius:6px;background:var(--tint2)}
.rng::-moz-range-progress{height:6px;border-radius:6px;background:var(--teal)}
.rng::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-7px;border-radius:50%;background:var(--teal);border:3px solid var(--white);box-shadow:0 2px 8px rgba(14,42,71,.3)}
.rng::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--teal);border:3px solid var(--white)}
.rng:disabled{opacity:.4;cursor:default}

.seekrow{display:flex;align-items:center;gap:8px;font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums;direction:ltr}
.seekrow span{min-width:32px}
.seekrow span:last-child{text-align:end}
.seekrow .rng{flex:1}

.ctl{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:22px}
.round{width:50px;height:50px;border-radius:50%;border:0;padding:0;background:var(--tint);display:flex;align-items:center;justify-content:center;justify-self:end}
.play{width:70px;height:70px;border-radius:50%;border:0;padding:0;background:var(--teal);color:var(--on-teal);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(15,155,142,.4)}
.play:active,.round:active,.step:active{transform:scale(.95)}
.barchip{justify-self:start;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}

/* everyday controls */
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{position:relative;display:flex;align-items:center;gap:6px;height:54px;padding-inline:6px 10px;border-radius:27px;background:var(--tint);flex:1 1 200px;min-width:0}
.bd{width:42px;height:42px;border-radius:50%;background:color-mix(in srgb,var(--brass) 20%,transparent);color:var(--brass);display:flex;align-items:center;justify-content:center;flex:none}
.tempo{padding-inline-end:6px}
.step{width:42px;height:42px;border-radius:50%;border:0;background:var(--white);font-size:22px;line-height:1;flex:none;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(14,42,71,.10)}
.bpm{flex:1;min-width:0;border:0;background:transparent;font-weight:600;font-size:15px;font-variant-numeric:tabular-nums;padding:0;line-height:1.15}
.bpm small{display:block;font-weight:400;font-size:10.5px;color:var(--muted)}
.bpm.changed{color:var(--teal)}
.pick{cursor:pointer;color:var(--muted)}
.pick .val{flex:1;min-width:0;color:var(--ink);font-size:.9rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pick select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:16px;border:0;-webkit-appearance:none;appearance:none}
.pick .chev{flex:none}

.seg{display:flex;gap:3px;padding:4px;border-radius:22px;background:var(--tint);max-width:100%}
.seg button{flex:1;min-height:36px;border:0;border-radius:18px;background:transparent;color:var(--muted);padding:4px 12px;font-size:13px;font-weight:500;min-width:0}
.seg button[aria-pressed="true"]{background:var(--teal);color:var(--on-teal)}
.seg button:disabled{opacity:.45;cursor:default}
.seg.wide button{min-height:42px}

.btn{border:0;background:var(--tint);border-radius:18px;padding:8px 14px;font-size:13px;font-weight:500;flex:none}
.btn:disabled{opacity:.45;cursor:default}

/* settings sheet */
.sheetwrap{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center}
.backdrop{position:absolute;inset:0;background:var(--scrim)}
.panel{position:relative;width:min(520px,100%);max-height:90%;overflow-y:auto;overscroll-behavior:contain;background:var(--page);border-radius:26px 26px 0 0;padding:8px 16px calc(24px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:14px;box-shadow:0 -6px 24px rgba(14,42,71,.18);animation:up .22s ease-out}
@keyframes up{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.grip{width:38px;height:4px;border-radius:2px;background:var(--tint2);margin:0 auto;flex:none}
.phead{display:flex;align-items:center;justify-content:space-between;gap:12px}
.phead h2{margin:0;font-weight:700;font-size:1.15rem}
.group{background:var(--c1);border-radius:24px;padding:16px;display:flex;flex-direction:column;gap:12px}
.group.persian{background:var(--c3);display:block}
.group h3{margin:0;font-size:1rem;font-weight:700}
details.group>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;cursor:pointer;gap:10px}
details.group>summary::-webkit-details-marker{display:none}
details.group>summary .chev{transition:transform .15s;flex:none}
details.group[open]>summary .chev{transform:rotate(180deg)}
details.group[open]>summary{margin-bottom:12px}
details.group>*:not(summary){margin-bottom:12px}
details.group>*:last-child{margin-bottom:0}
.lbl{margin:0;font-weight:600;font-size:13.5px}
details.group>.lbl{margin-top:18px;margin-bottom:4px}
details.group>summary+.lbl{margin-top:0}
.item{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:13.5px}
.item.end{justify-content:flex-end}
.sub{padding-inline-start:50px}
.rate{display:flex;align-items:center;gap:10px}
.rate .rng{flex:1}
.rate output,.tune output{font-size:12.5px;color:var(--muted);text-align:end;font-variant-numeric:tabular-nums;min-width:96px}
.tune{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center}
.tune label{font-weight:600;font-size:14px}
.tune .rng{width:100%}

.switch{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:14px}
.switch input{appearance:none;-webkit-appearance:none;width:40px;height:24px;border-radius:999px;background:var(--tint2);position:relative;flex:none;margin:0;transition:background .15s;cursor:pointer}
.switch input::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:18px;height:18px;border-radius:50%;background:var(--white);transition:transform .15s;box-shadow:0 1px 3px rgba(14,42,71,.25)}
.switch input:checked{background:var(--teal)}
.switch input:checked::after{transform:translateX(16px)}
[dir="rtl"] .switch input:checked::after{transform:translateX(-16px)}
.switch input:disabled{opacity:.45}
.switch span{min-width:0}
.switch small{display:block;color:var(--muted);font-size:12.5px}

.parts{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.part{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;font-size:13.5px}
.part .pn{min-width:0;overflow-wrap:anywhere}
.part select{border:0;background:var(--tint);border-radius:14px;padding:7px 8px;max-width:130px}

.keys{display:flex;flex-direction:column;gap:6px}
.krow{display:grid;grid-template-columns:44px 1fr;gap:10px;align-items:center}
.krow>b{font-weight:600;font-size:14px}
.kseg{display:grid;grid-template-columns:repeat(5,1fr);gap:3px;padding:3px;border-radius:18px;background:var(--tint);direction:ltr}
.kseg button{border:0;background:transparent;height:36px;border-radius:14px;display:flex;align-items:center;justify-content:center;position:relative;font-size:17px;padding:0}
.kseg button[aria-pressed="true"]{background:var(--teal);color:var(--on-teal)}
.kseg button.file::after{content:"";position:absolute;bottom:3px;width:5px;height:5px;border-radius:50%;background:var(--brass)}
.kseg button.file[aria-pressed="true"]::after{background:var(--on-teal)}
.khead{display:grid;grid-template-columns:44px 1fr;gap:10px;font-size:11px;color:var(--muted)}
.khead div{display:grid;grid-template-columns:repeat(5,1fr);text-align:center;direction:ltr}
.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--brass);vertical-align:middle;margin-inline-end:5px}

/* ---------- the player body: a brushed-aluminium deck with a dark glass display ----------
   The finish (silver / graphite) is chosen in settings; each finish carries its own complete token set,
   and everything inside the deck is styled from those tokens only. */
.deck{
  --b1:#f2f4f6; --b2:#c3c9cf; --b-edge:rgba(255,255,255,.92); --b-rim:#a3abb3; --b-shadow:rgba(30,40,52,.30); --sheen:rgba(255,255,255,.38);
  --key1:#ffffff; --key2:#d0d6db; --slot:rgba(24,36,48,.13); --slot-in:rgba(20,30,40,.22);
  --ink:#1b2a38; --muted:#56646f; --tint:var(--slot); --tint2:rgba(24,36,48,.26); --white:#f7f9fa; --brass:#a5570f; --teal:#0f9b8e; --teal-hi:#49dbc9; --teal-lo:#0a7d72; --on-teal:#ffffff;
  --scr-bg1:#122a2e; --scr-bg2:#091517; --scr-note:#e6f1f0; --scr-muted:#8ba4a7; --scr-q:#f3ab66; --scr-line:rgba(230,241,240,.16); --scr-head:#35d0bd; --scr-rim:#040b0c;
  border-radius:34px;padding:14px 14px 12px;display:flex;flex-direction:column;gap:14px;color:var(--ink);
  background:linear-gradient(118deg,transparent 20%,var(--sheen) 37%,transparent 55%),repeating-linear-gradient(0deg,rgba(255,255,255,.07) 0 1px,rgba(0,0,0,.04) 1px 2px),linear-gradient(180deg,var(--b1),var(--b2));
  box-shadow:inset 0 1px 0 var(--b-edge),inset 0 -2px 3px rgba(0,0,0,.18),0 0 0 1px var(--b-rim),0 14px 30px var(--b-shadow);
}
.deck[data-finish="graphite"]{
  --b1:#50555b; --b2:#25282c; --b-edge:rgba(255,255,255,.17); --b-rim:#131518; --b-shadow:rgba(0,0,0,.5); --sheen:rgba(255,255,255,.07);
  --key1:#656b72; --key2:#32363b; --slot:rgba(0,0,0,.32); --slot-in:rgba(0,0,0,.5);
  --ink:#eef2f3; --muted:#a9b3b8; --tint2:rgba(255,255,255,.2); --white:#2e3237; --brass:#f0a35c; --teal:#2bc0ae; --teal-hi:#6fe6d6; --teal-lo:#12897c; --on-teal:#06211e;
}
.deck .stage{position:relative;background:linear-gradient(180deg,var(--scr-bg1),var(--scr-bg2));border-radius:22px;border:1px solid var(--scr-rim);box-shadow:inset 0 2px 10px rgba(0,0,0,.7),0 1px 0 var(--b-edge);color:var(--scr-note);--ink:var(--scr-note);--muted:var(--scr-muted);--brass:var(--scr-q)}
.deck .stage::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,rgba(255,255,255,.08),transparent 36%);pointer-events:none}
.scrhead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:12px 16px 0}
.scrhead h2{margin:0;font-size:1.02rem;font-weight:600;line-height:1.35;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scrhead .barchip{color:var(--scr-head);font-weight:600;flex:none}
.deck .stage .meta{padding:2px 16px 0;font-size:11.5px}
.deck .roll{height:176px}
.deck .legend{padding:6px 16px 12px;font-size:11px}
.deck .seekrow{padding-inline:4px}
.deck .round,.deck .step{background:linear-gradient(180deg,var(--key1),var(--key2));color:var(--ink);box-shadow:inset 0 1px 0 var(--b-edge),0 0 0 1px var(--b-rim),0 3px 6px var(--b-shadow)}
.deck .round:active,.deck .step:active{transform:translateY(1px);box-shadow:inset 0 1px 0 var(--b-edge),0 0 0 1px var(--b-rim),0 1px 2px var(--b-shadow)}
.deck .play{background:radial-gradient(circle at 34% 28%,var(--teal-hi),var(--teal) 55%,var(--teal-lo));box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 0 0 5px var(--slot),0 0 0 6px var(--b-rim),0 8px 16px var(--b-shadow)}
.deck .play:active{transform:translateY(1px) scale(.98)}
.deck .pill,.deck .seg{background:var(--slot);box-shadow:inset 0 2px 4px var(--slot-in),0 1px 0 var(--b-edge)}
.deck .seg button[aria-pressed="true"]{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 2px 4px var(--b-shadow)}
.deck .rng::-webkit-slider-runnable-track{box-shadow:inset 0 1px 2px var(--slot-in)}
.deck .rng::-webkit-slider-thumb{width:22px;height:22px;margin-top:-8px;background:linear-gradient(180deg,var(--key1),var(--key2));border:1px solid var(--b-rim);box-shadow:inset 0 1px 0 var(--b-edge),0 2px 5px var(--b-shadow)}
.deck .rng::-moz-range-thumb{width:20px;height:20px;background:linear-gradient(180deg,var(--key1),var(--key2));border:1px solid var(--b-rim)}
.plate{align-self:center;font-size:9.5px;letter-spacing:.32em;font-weight:600;color:var(--muted);text-shadow:0 1px 0 var(--b-edge);direction:ltr;padding-top:2px}

/* ---------- 1970s silver-face hi-fi: wood cabinet, boxy brushed panel, amber backlit display, machined knob ---------- */
.cab{--wd1:#8a5a3b;--wd2:#55321b;padding:7px 11px;border-radius:14px;background:repeating-linear-gradient(91deg,rgba(0,0,0,.13) 0 1px,transparent 1px 6px),repeating-linear-gradient(88deg,rgba(255,255,255,.05) 0 2px,transparent 2px 11px),linear-gradient(180deg,var(--wd1),var(--wd2));box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 14px 28px rgba(20,14,8,.35)}
.deck{border-radius:7px;padding:12px 12px 10px;gap:12px;box-shadow:inset 0 1px 0 var(--b-edge),inset 0 -2px 3px rgba(0,0,0,.18),0 0 0 1px var(--b-rim);
  --scr-note:#2a1908; --scr-muted:#6f4516; --scr-q:#b3261e; --scr-line:rgba(70,36,6,.30); --scr-head:#17100a; --scr-rim:#1a120a; --lamp1:#ffd595; --lamp2:#f6ae56; --lamp3:#dd8732}
.deck .stage{border-radius:9px;border:2px solid var(--scr-rim);background:radial-gradient(ellipse at 50% 42%,var(--lamp1) 0%,var(--lamp2) 48%,var(--lamp3) 100%);box-shadow:inset 0 0 26px rgba(120,52,0,.5),inset 0 2px 6px rgba(60,25,0,.5),0 1px 0 var(--b-edge);transition:box-shadow .5s,filter .5s;filter:brightness(.86) saturate(.9)}
.deck .stage.on{filter:none;box-shadow:inset 0 0 22px rgba(120,52,0,.38),inset 0 2px 6px rgba(60,25,0,.4),0 1px 0 var(--b-edge),0 0 22px rgba(255,176,86,.45)}
.deck .stage::after{background:linear-gradient(135deg,rgba(255,255,255,.22),transparent 32%)}
.scrhead{align-items:center}
.scrhead .bpm{flex:none;border:1px solid var(--scr-line);border-radius:6px;background:rgba(70,36,6,.10);color:var(--scr-note);font-weight:700;font-size:15px;padding:2px 9px;line-height:1.3;font-variant-numeric:tabular-nums;direction:ltr}
.scrhead .bpm small{display:inline;font-size:10px;font-weight:600;color:var(--scr-muted);margin-inline-start:4px}
.scrhead .bpm.changed{color:var(--scr-q);border-color:var(--scr-q)}
.scrsub{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:2px 16px 0}
.deck .stage .scrsub .meta{padding:0}
.scrsub .barchip{color:var(--scr-note);font-weight:700;flex:none;font-size:12.5px}
.deck .roll{height:170px}
.ctl{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding-inline:6px;direction:ltr}
.ctl .play{margin-top:14px}
.tempo{display:flex;flex-direction:column;align-items:center;gap:5px;background:none;box-shadow:none;padding:0;height:auto;flex:none;min-width:98px}
.engr{font-size:9px;letter-spacing:.26em;font-weight:600;color:var(--muted);text-shadow:0 1px 0 var(--b-edge)}
.dial{width:98px;height:98px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;
  background:repeating-conic-gradient(from -0.5deg,var(--muted) 0 1deg,transparent 1deg 18deg);
  -webkit-mask:radial-gradient(circle,#000 0 43px,transparent 43px 45px,#000 45px 49px,transparent 49px);mask:radial-gradient(circle,#000 0 43px,transparent 43px 45px,#000 45px 49px,transparent 49px)}
.knob{width:80px;height:80px;border-radius:50%;padding:6px;touch-action:none;cursor:grab;background:repeating-conic-gradient(var(--key2) 0 3deg,var(--key1) 3deg 6deg);box-shadow:0 0 0 1px var(--b-rim),0 5px 10px var(--b-shadow)}
.knob:active{cursor:grabbing}
.cap{width:100%;height:100%;border-radius:50%;position:relative;background:conic-gradient(var(--key2),var(--key1),var(--key2),var(--key1),var(--key2),var(--key1),var(--key2),var(--key1),var(--key2));box-shadow:inset 0 1px 0 var(--b-edge),inset 0 -1px 2px rgba(0,0,0,.25),0 0 0 1px var(--b-rim)}
.cap i{position:absolute;top:5px;left:50%;width:4px;height:17px;margin-left:-2px;border-radius:2px;background:var(--teal);box-shadow:inset 0 1px 1px rgba(0,0,0,.35)}
.tempo .round{width:54px;height:54px;margin-top:22px}
.pill{border-radius:10px}
.deck .seg{border-radius:10px}
.deck .seg button{border-radius:7px}
.bd{border-radius:8px}
/* options carried over from Orchestrify's player: parts drawer (on/off + volume), compact mode, help */
.key{width:54px;height:54px;border-radius:10px;border:0;padding:0;flex:none;display:flex;align-items:center;justify-content:center;color:var(--ink);background:linear-gradient(180deg,var(--key1),var(--key2));box-shadow:inset 0 1px 0 var(--b-edge),0 0 0 1px var(--b-rim),0 3px 6px var(--b-shadow)}
.key:active,.key[aria-expanded="true"]{transform:translateY(1px);box-shadow:inset 0 2px 4px var(--slot-in),0 0 0 1px var(--b-rim)}
.key[aria-expanded="true"]{color:var(--teal)}
.key.sm{width:38px;height:30px;border-radius:7px}
.platerow{display:flex;align-items:center;justify-content:space-between;gap:8px;direction:ltr}
.platerow .plate{padding:0;min-width:0;overflow:hidden;white-space:nowrap}
.pills{flex-wrap:nowrap}
.pill{flex:1 1 auto}
.drawer{display:flex;flex-direction:column;gap:10px;border-radius:10px;padding:10px;background:var(--slot);box-shadow:inset 0 2px 4px var(--slot-in),0 1px 0 var(--b-edge)}
.deck .drawer .seg{box-shadow:none;background:var(--tint)}
.drawer .parts{margin:0;gap:0}
.part{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:8px 2px;border-top:1px solid var(--tint2);font-size:13.5px}
.part:first-child{border-top:0}
.part label{flex:1 1 110px;min-width:0;overflow-wrap:anywhere;cursor:pointer}
.part input[type=checkbox]{-webkit-appearance:none;appearance:none;width:24px;height:24px;flex:none;margin:0;border-radius:50%;border:2px solid var(--tint2);background:transparent;cursor:pointer;display:grid;place-content:center}
.part input[type=checkbox]::after{content:"";width:10px;height:5px;border:solid var(--on-teal);border-width:0 0 2.5px 2.5px;transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.part input[type=checkbox]:checked{background:var(--teal);border-color:var(--teal)}
.part input[type=checkbox]:checked::after{opacity:1}
.part select{flex:0 1 auto;max-width:120px}
.part .rng{flex:1 1 110px}
.miniplay{display:none;width:38px;height:38px;border-radius:50%;border:0;padding:0;flex:none;align-items:center;justify-content:center;color:var(--on-teal);background:radial-gradient(circle at 34% 28%,var(--teal-hi),var(--teal) 55%,var(--teal-lo));box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 0 0 1px var(--b-rim),0 3px 6px var(--b-shadow)}
.miniplay .i-pause,.deck.playing .miniplay .i-play{display:none}
.deck.playing .miniplay .i-pause{display:block}
.deck.mini .roll,.deck.mini .legend,.deck.mini .meta,.deck.mini .ctl,.deck.mini .pills,.deck.mini .drawer{display:none}
.deck.mini .miniplay{display:flex}
.deck.mini .stage{padding-bottom:10px}
.deck.mini .scrsub{justify-content:flex-end}
.deck.mini #btnMini svg{transform:rotate(180deg)}
.helptext{margin:0;font-size:14px;line-height:1.75;white-space:pre-line}
/* three displays: piano roll, engraved notation on the lit display, full-page notation with the player reduced to a transport bar */
.views{direction:ltr}
.deck .seg.views button{min-height:34px;font-size:12.5px}
.notn{height:176px;overflow:hidden;position:relative;margin-top:4px;cursor:pointer}
.nscroll{height:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;direction:ltr}
.nscroll::-webkit-scrollbar{display:none}
.nrow{display:flex;align-items:center;width:max-content;min-height:100%}
.nrow>i{flex:none}
.nrow svg{max-width:none;flex:none}
.needle{position:absolute;top:6px;bottom:6px;left:35%;width:2px;margin-left:-1px;border-radius:1px;background:var(--scr-q);opacity:.5;pointer-events:none}
.notn svg,.paper svg{display:block;max-width:100%;height:auto}
.notn svg{color:var(--scr-note)}
.notn .on{color:var(--scr-q);fill:var(--scr-q)}
.notn g.label,.notn g.labelAbbr,.paper.one g.label,.paper.one g.labelAbbr{display:none}
.nmsg{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;min-height:150px;padding:16px;font-size:13px;cursor:default}
.nmsg .row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.notn .nmsg{color:var(--scr-note)}
.notn .nmsg .btn{background:rgba(70,36,6,.14);color:var(--scr-note)}
/* the sheet keeps its paper look in both themes, like a PDF page */
.paper{--sheet:#fffdf7;--sheet-ink:#1b1b1b;--sheet-hl:#0c8a7e;--sheet-tint:rgba(20,20,20,.08);background:var(--sheet);color:var(--sheet-ink);border-radius:6px;box-shadow:0 1px 0 rgba(0,0,0,.08),0 10px 26px rgba(20,30,40,.18);min-height:60vh;overflow:hidden;cursor:pointer}
.paper svg{color:var(--sheet-ink)}
.paper .on{color:var(--sheet-hl);fill:var(--sheet-hl)}
.paper .nmsg{min-height:60vh;color:var(--sheet-ink)}
.paper .nmsg .btn{background:var(--sheet-tint);color:var(--sheet-ink)}
#btnPageExit{display:none}
.cab.pagemode{position:sticky;bottom:calc(8px + env(safe-area-inset-bottom,0px));z-index:20}
.cab.pagemode .deck>*{display:none}
.cab.pagemode .deck>.seekrow{display:flex}
.cab.pagemode .miniplay,.cab.pagemode #btnPageExit{display:flex}
.deck.mini .notn,.deck.mini .views{display:none}
/* lamps and press travel on every control; play turns into a lit orange pause key; stop and loop as deck keys */
.deck{--lamp-off:#7b848c;--scr-band:rgba(70,36,6,.14)}
.deck[data-finish="graphite"]{--lamp-off:#15171a}
.paper{--sheet-hl:#c0261d;position:relative}
.nrow{position:relative}
.roll,.notn,.paper{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.play,.round,.key,.tkey,.miniplay,.hdr-btn,.btn,.deck .seg button{transition:transform .07s,box-shadow .14s,background .18s,color .18s}
.hdr-btn:active,.btn:active{transform:scale(.93)}
.dial{width:92px;height:92px;-webkit-mask:radial-gradient(circle,#000 0 41px,transparent 41px 42.5px,#000 42.5px 46px,transparent 46px);mask:radial-gradient(circle,#000 0 41px,transparent 41px 42.5px,#000 42.5px 46px,transparent 46px)}
.tempo{min-width:92px}
.ctl{padding-inline:0}
.ctl .play{margin-top:11px}
.knob:active .cap{box-shadow:inset 0 2px 4px rgba(0,0,0,.3),0 0 0 1px var(--b-rim)}
.deck.playing .play,.deck.playing .miniplay{color:#2a1503;background:radial-gradient(circle at 34% 28%,#ffd898,#f18d28 55%,#c2600b)}
.deck.playing .play{box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 0 0 5px var(--slot),0 0 0 6px var(--b-rim),0 0 24px rgba(255,150,50,.8),0 8px 16px var(--b-shadow)}
.deck.playing .miniplay{box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 0 0 1px var(--b-rim),0 0 14px rgba(255,150,50,.8)}
.tkeys{display:flex;gap:10px;direction:ltr}
.tkey{flex:1 1 0;min-width:0;height:50px;border:0;border-radius:9px;padding:0 10px;display:flex;align-items:center;justify-content:center;gap:8px;color:var(--ink);background:linear-gradient(180deg,var(--key1),var(--key2));box-shadow:inset 0 1px 0 var(--b-edge),0 0 0 1px var(--b-rim),0 3px 6px var(--b-shadow)}
.tkey svg{flex:none}
.tkey .engr{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.tkey:active,.tkey[aria-pressed="true"]{transform:translateY(2px);background:linear-gradient(180deg,var(--key2),var(--key1));box-shadow:inset 0 2px 5px var(--slot-in),0 0 0 1px var(--b-rim)}
.lamp{width:9px;height:9px;border-radius:50%;flex:none;background:var(--lamp-off);box-shadow:inset 0 1px 2px rgba(0,0,0,.5),0 1px 0 var(--b-edge)}
#btnStop:active .lamp{background:#ff5a4a;box-shadow:0 0 9px #ff5a4a}
.tkey[aria-pressed="true"] .lamp{background:#58e07a;box-shadow:0 0 10px #58e07a,inset 0 0 2px #fff}
.key[aria-expanded="true"]{color:var(--teal)}
.deck .seg,.deck .drawer .seg{background:none;box-shadow:none;padding:0;gap:8px}
.deck .seg button,.deck .seg.views button{min-height:46px;padding:7px 6px 6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;line-height:1.2;border-radius:8px;color:var(--ink);background:linear-gradient(180deg,var(--key1),var(--key2));box-shadow:inset 0 1px 0 var(--b-edge),0 0 0 1px var(--b-rim),0 3px 6px var(--b-shadow)}
.deck .seg button::before{content:"";width:16px;height:5px;border-radius:3px;flex:none;background:var(--lamp-off);box-shadow:inset 0 1px 2px rgba(0,0,0,.5)}
.deck .seg button:active,.deck .seg button[aria-pressed="true"]{transform:translateY(2px);color:var(--ink);background:linear-gradient(180deg,var(--key2),var(--key1));box-shadow:inset 0 2px 5px var(--slot-in),0 0 0 1px var(--b-rim)}
.deck .seg button[aria-pressed="true"]::before{background:#ffb347;box-shadow:0 0 9px #ffb347,inset 0 0 2px #fff}
.lpbox{position:absolute;border-radius:4px;pointer-events:none;background:var(--scr-band);box-shadow:inset 0 0 0 1.5px var(--scr-q)}
.paper .lpbox{background:rgba(192,38,29,.07);box-shadow:inset 0 0 0 1.5px var(--sheet-hl)}
.deck.mini .tkeys{display:none}
#icPause,.deck.playing #icPlay{display:none}
.deck.playing #icPause{display:block}
/* brand mark engraved on the body, with the playlist / open / settings keys beside it */
.brandrow{display:flex;align-items:center;justify-content:space-between;gap:10px;direction:ltr;padding-inline:4px 0}
.brand{margin:0;font-family:var(--f-display);font-weight:700;font-style:italic;font-size:23px;line-height:1;letter-spacing:.01em;color:var(--b-engrave);text-shadow:0 1px 0 var(--b-edge),0 -1px 0 rgba(0,0,0,.28)}
.deck{--b-engrave:#8a939b}
.deck[data-finish="graphite"]{--b-engrave:#1c1e21}
.bkeys{display:flex;gap:8px}
.bkeys .key.sm{width:42px;height:34px}
.cab.pagemode .deck>.brandrow{display:none}
/* playlist */
.plist{display:flex;flex-direction:column;gap:6px}
.prow{display:flex;align-items:center;gap:8px}
.pbtn{flex:1;min-width:0;display:flex;align-items:center;gap:10px;border:0;border-radius:14px;background:var(--tint);padding:11px 12px;text-align:start;font-size:14px}
.pbtn:active{transform:scale(.985)}
.pbtn .pl{width:9px;height:9px;border-radius:50%;flex:none;background:var(--tint2)}
.pbtn[aria-current="true"] .pl{background:#f08a24;box-shadow:0 0 8px #f08a24}
.pbtn[aria-current="true"]{background:color-mix(in srgb,var(--teal) 16%,transparent)}
.pbtn .pt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.pbtn .pk{flex:none;font-size:11px;color:var(--muted)}
.pdel{flex:none;width:38px;height:38px;border-radius:50%;border:0;background:var(--tint);display:flex;align-items:center;justify-content:center;color:var(--danger)}
/* file processing shown on the display: file name, current step, finished steps, percentage bar */
.stage.busy .roll,.stage.busy .notn,.stage.busy .legend,.stage.busy .slist{display:none}
.proc{position:relative;z-index:1;padding:14px 14px 16px;min-height:170px;display:flex;flex-direction:column;gap:9px;color:var(--scr-note)}
.proc .pname{font-weight:700;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.proc .pnow{font-size:14px;min-height:21px}
.proc .dots i{font-style:normal;animation:pdot 1.2s infinite;opacity:.15}
.proc .dots i:nth-child(2){animation-delay:.2s}.proc .dots i:nth-child(3){animation-delay:.4s}
@keyframes pdot{0%,60%,100%{opacity:.15}30%{opacity:1}}
.proc .pdone{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--scr-muted);flex:1}
.proc .pdone li{display:flex;align-items:center;gap:7px}
.proc .pdone li::before{content:"";flex:none;width:14px;height:14px;border-radius:50%;background:rgba(70,36,6,.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.6 7.3l2.3 2.3 4.5-5' fill='none' stroke='%23f6c56e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.proc .pline{display:flex;align-items:center;gap:10px}
.proc .pbar{position:relative;flex:1;height:14px;border-radius:7px;background:rgba(70,36,6,.16);box-shadow:inset 0 1px 2px rgba(70,36,6,.3);overflow:hidden}
.proc .pfill{position:absolute;inset-block:0;inset-inline-start:0;width:0;border-radius:7px;background:linear-gradient(180deg,rgba(70,36,6,.78),rgba(70,36,6,.92));transition:width .25s ease}
.proc .ppct{flex:none;min-width:38px;text-align:end;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.proc.fail .pnow{color:var(--scr-q);font-weight:600}.proc.fail .dots{display:none}
@media (prefers-reduced-motion:reduce){.proc .dots i{animation:none;opacity:.6}.proc .pfill{transition:none}}
/* playlist shown on the display itself */
.stage.listing .roll,.stage.listing .notn,.stage.listing .legend{display:none}
.slist{padding:6px 12px 12px;max-height:250px;overflow-y:auto;position:relative;z-index:1}
.stage .plist{gap:0}
.stage .pbtn{background:none;border-radius:0;padding:11px 6px;color:var(--scr-note);border-bottom:1px solid var(--scr-line)}
.stage .pbtn .pl{background:rgba(70,36,6,.28)}
.stage .pbtn .pk{color:var(--scr-muted)}
.stage .pbtn[aria-current="true"]{background:rgba(70,36,6,.10);font-weight:700}
.stage .pbtn[aria-current="true"] .pl{background:var(--scr-q);box-shadow:0 0 7px var(--scr-q)}
.stage .pbtn:active{background:rgba(70,36,6,.16);transform:none}
.stage .pdel{background:none;color:var(--scr-note);width:36px;height:36px}
.slist .note{color:var(--scr-muted);margin-top:8px}
.slist .err{color:var(--scr-q)}
/* press travel that is visible even on a quick tap (class set from script on pointer down) */
.key:active,.key.dn,.key[aria-expanded="true"],.key[aria-pressed="true"]{transform:translateY(2px);background:linear-gradient(180deg,var(--key2),var(--key1));box-shadow:inset 0 2px 5px var(--slot-in),0 0 0 1px var(--b-rim)}
.key[aria-pressed="true"]{color:var(--teal)}
.tkey.dn,.deck .seg button.dn{transform:translateY(2px);background:linear-gradient(180deg,var(--key2),var(--key1));box-shadow:inset 0 2px 5px var(--slot-in),0 0 0 1px var(--b-rim)}
.play.dn,.miniplay.dn{transform:translateY(1px) scale(.97)}
.bpm.dn{transform:scale(.95)}
/* open-a-score sheet: the file input stays in the page (only visually hidden) so phone file pickers can open */
.vh{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip-path:inset(50%);pointer-events:none}
.row2{display:flex;gap:8px;flex-wrap:wrap}
.btn.big{display:block;text-align:center;padding:13px 16px;font-size:14.5px;font-weight:600;background:var(--teal);color:var(--on-teal);cursor:pointer;border-radius:16px}
#pasteXml{width:100%;border:1px solid var(--line);border-radius:14px;background:var(--paper);color:var(--ink);padding:10px 12px;font:12.5px/1.5 ui-monospace,Menlo,Consolas,monospace;resize:vertical;min-height:110px}
@media (prefers-reduced-motion: reduce){.deck .stage{transition:none}}
@media (prefers-reduced-motion: reduce){.switch input,.switch input::after,details.group>summary .chev{transition:none}.panel{animation:none}}

.bankmsg{margin:8px 4px 0;font-size:12px;color:var(--muted);text-align:center}
.bankmsg.bad{color:var(--danger)}

.proc .ptime{flex:none;min-width:40px;text-align:end;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--scr-muted)}