/* 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)}

/* ================= Metronome: additions on the Player skin (same deck tokens, nothing overridden) ================= */
:root{--flash:#ffb347}
[hidden]{display:none!important}
.mbody{position:relative;z-index:1;padding:11px 14px 12px;display:flex;flex-direction:column;gap:10px;direction:ltr}
.mhead{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:14px;align-items:end}
.mcol{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0}
.tag{font-size:9px;letter-spacing:.14em;font-weight:700;padding:1px 6px;border-radius:3px;background:var(--scr-note);color:var(--lamp1);white-space:nowrap}
.mtempo{display:flex;align-items:baseline;gap:6px;min-width:0;max-width:100%}
.mtempo svg{align-self:center;flex:none}
.mbpm{font-size:40px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.mname{font-size:12px;font-weight:600;color:var(--scr-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.mts{font-size:26px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums;white-space:nowrap}
.msub{height:29px;display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700}
.pips{display:flex;gap:3px;align-items:center}
.pips i{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.pips i.o{background:none;box-shadow:inset 0 0 0 1.5px currentColor;opacity:.45}
.pips.t::after{content:"3";font-size:9px;font-weight:700;margin-left:2px;line-height:1}

.beats{display:flex;gap:3px;height:54px}
.bt{flex:1;min-width:0;border:0;padding:0;background:none;display:flex;flex-direction:column;gap:2px;cursor:pointer;border-radius:3px}
.bt i{flex:1;border-radius:2px;background:var(--scr-band)}
.bt i.f{background:var(--scr-note)}
.bt.now i{box-shadow:inset 0 0 0 1px var(--scr-q)}
.bt.now i.f{background:var(--scr-q)}
.pend{position:relative;height:14px;border-radius:3px;background:var(--scr-band);overflow:hidden}
.pend i{position:absolute;top:0;bottom:0;left:0;width:12%;border-radius:3px;background:var(--scr-note)}
.mfoot{display:flex;justify-content:space-between;gap:10px;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;min-height:18px}
.stage.noblock .mbody>.beats,.stage.nopend .pend{display:none}
.stage.listing .mbody{display:none}

/* keys under the knobs */
.tkey.nar{flex:0 0 60px;font-size:24px;font-weight:600;line-height:1}
.lamp.hot{background:#ffb347;box-shadow:0 0 10px #ffb347,inset 0 0 2px #fff}
.lamp.red{background:#ff5a4a;box-shadow:0 0 10px #ff5a4a,inset 0 0 2px #fff}

/* time-signature drawer */
.tsrow{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:8px;direction:ltr}
.stp{display:flex;flex-direction:column;align-items:center;gap:6px}
.stp>div{display:flex;gap:6px}
.deck .drawer .step,.polyrow .step{width:40px;height:40px}
.lcd{min-width:66px;text-align:center;font-weight:700;font-size:20px;line-height:1.2;padding:6px 8px;border-radius:7px;border:2px solid var(--scr-rim);background:radial-gradient(ellipse at 50% 42%,var(--lamp1),var(--lamp2) 60%,var(--lamp3));color:#2a1908;box-shadow:inset 0 0 10px rgba(120,52,0,.45);font-variant-numeric:tabular-nums;direction:ltr}
.dlbl{text-align:center;display:block}
.drawer .beats{--scr-note:var(--ink);--scr-band:var(--tint2);--scr-q:var(--teal);height:46px;direction:ltr}
.deck .drawer .seg.subs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;direction:ltr}
.polyrow{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.polyrow .switch{align-items:center;font-size:13.5px;font-weight:500}
.polyset{display:flex;align-items:center;gap:6px;direction:ltr}
.polyset .lcd{min-width:54px;font-size:16px}

/* settings steppers */
.pstp{display:flex;align-items:center;gap:8px;direction:ltr}
.pstp output{min-width:30px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.seg.multi{flex-wrap:wrap}
.seg.multi button{flex:1 1 auto;white-space:nowrap}
.mtag{display:flex;align-items:center;gap:7px;min-width:0;max-width:100%}

/* screen flash and stage mode */
.flash{position:fixed;inset:0;background:var(--flash);opacity:0;pointer-events:none;z-index:80}
.flash.go{animation:fl .18s ease-out}
@keyframes fl{from{opacity:.55}to{opacity:0}}
.stagev{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:14px;padding:calc(18px + env(safe-area-inset-top,0px)) 18px calc(24px + env(safe-area-inset-bottom,0px));background:radial-gradient(ellipse at 50% 40%,var(--lamp1),var(--lamp2) 50%,var(--lamp3));color:var(--scr-note);direction:ltr}
.stagev .top{align-self:stretch;display:flex;justify-content:space-between;align-items:center;gap:10px;font-weight:700;font-size:15px}
.sbeat{font-size:min(46vw,36vh);font-weight:700;line-height:.9;font-variant-numeric:tabular-nums}
.sbeat.acc{color:var(--scr-q)}
.sinfo{font-size:24px;font-weight:700;font-variant-numeric:tabular-nums;text-align:center}
.sinfo small{display:block;font-size:13px;color:var(--scr-muted)}
.stagev .beats{align-self:stretch;height:84px;gap:5px}
.stagev .i-pause,.deck.playing .stagev .i-play{display:none}
.deck.playing .stagev .i-pause{display:block}
@media (prefers-reduced-motion:reduce){.flash.go{animation-duration:.01s}}

/* engraved brand: maker's name above the model, version on the bottom plate */
.brandbox{display:flex;flex-direction:column;gap:4px;min-width:0}
.brandbox .engr{letter-spacing:.3em;color:var(--b-engrave);text-shadow:0 1px 0 var(--b-edge),0 -1px 0 rgba(0,0,0,.28)}
.platerow .plate{text-shadow:0 1px 0 var(--b-edge),0 -1px 0 rgba(0,0,0,.22)}
.platerow .ver{flex:none;min-width:38px;text-align:end;letter-spacing:.12em;overflow:visible}
.deck .seg.subs button{min-height:58px;gap:4px}
.msub svg{flex:none}
/* display readouts are touch targets: tempo blinks the TEMPO knob label, T.S. and SUB DIV. open their section */
.mcol[role=button]{cursor:pointer;border-radius:5px;-webkit-user-select:none;user-select:none}
.mcol[role=button]:active{background:var(--scr-band)}
.engr.blink{color:var(--teal);animation:eblink .34s steps(1) 6}
@keyframes eblink{0%{opacity:1}50%{opacity:.1}}
.hl{animation:shl 1.8s ease-out}
@keyframes shl{0%,70%{outline:2px solid var(--teal);outline-offset:4px}100%{outline:2px solid transparent;outline-offset:4px}}
/* TAP latched down by a long press: the lamp stays lit and flashes red on every tap */
#btnTap{touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.tkey[aria-pressed="true"] .lamp.red,.tkey[aria-pressed="true"] .lamp.hot{background:#ff5a4a;box-shadow:0 0 12px #ff5a4a,inset 0 0 2px #fff}
@media (prefers-reduced-motion:reduce){.engr.blink,.hl{animation-iteration-count:1}}
/* stage mode: a knurled ring around the start/stop key; turning it changes the tempo like the TEMPO knob */
.sdial{display:flex;flex-direction:column;align-items:center;gap:8px;flex:none}
.sdial .engr{color:var(--scr-muted);text-shadow:none}
.sring{position:relative;width:184px;height:184px;display:grid;place-items:center}
.sring::before{content:"";position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(from -0.5deg,var(--scr-muted) 0 1deg,transparent 1deg 18deg);-webkit-mask:radial-gradient(circle,transparent 0 84px,#000 84px 92px,transparent 92px);mask:radial-gradient(circle,transparent 0 84px,#000 84px 92px,transparent 92px)}
.srim{position:absolute;inset:12px;border-radius:50%;padding:7px;touch-action:none;cursor:grab;background:repeating-conic-gradient(var(--key2) 0 3deg,var(--key1) 3deg 6deg);box-shadow:inset 0 0 0 1px var(--b-rim);-webkit-mask:radial-gradient(circle,transparent 0 43px,#000 44px);mask:radial-gradient(circle,transparent 0 43px,#000 44px);filter:drop-shadow(0 5px 7px var(--b-shadow))}
.srim:active{cursor:grabbing}
.scap{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)}
.srim:active .scap{box-shadow:inset 0 2px 4px rgba(0,0,0,.3),0 0 0 1px var(--b-rim)}
.scap 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)}
.sring .play{position:relative;z-index:1}
/* practice-mode drawer: label, stepper with a lit readout, then the unit or a TAP key */
.prow2{display:grid;grid-template-columns:minmax(0,1fr) auto 42px;align-items:center;gap:8px;direction:ltr}
.prow2>.engr{white-space:normal;line-height:1.5}
.pset{display:flex;align-items:center;gap:5px}
.deck .drawer .pset .step{width:36px;height:36px;font-size:20px}
.pset .lcd{min-width:58px;font-size:17px;padding:5px 6px}
.pun{text-align:center;letter-spacing:.12em}
.prow2 .ptap{width:42px;height:34px}
.ptap .engr{letter-spacing:.1em;font-size:8.5px}
.pflash{align-items:center;font-size:13.5px;font-weight:500}
#pMode,#pBy{direction:ltr}
/* practice run shown on the display: mode, step, progress from start tempo to target tempo */
.pracrow{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.pracrow .tag{background:var(--scr-q)}
.pinfo{min-width:0;overflow:hidden;text-overflow:ellipsis}
.pprog{flex:1 1 24px;min-width:24px;height:6px;border-radius:3px;background:var(--scr-band);overflow:hidden}
.pprog i{display:block;height:100%;width:0;background:var(--scr-q)}
.helptext b{display:block;font-size:15px;margin-top:12px}
.helptext b:first-child{margin-top:0}

/* device labels follow the chosen language; Persian script must not be letter-spaced */
[lang="fa"] :is([data-dl],.dx){letter-spacing:0;font-size:11.5px;font-weight:700}
[lang="fa"] .tag:is([data-dl]){font-size:10.5px;padding:0 6px}
[lang="fa"] .ptap .engr{font-size:10.5px}
[lang="fa"] .mfoot,[lang="fa"] .pracrow,[lang="fa"] .sinfo small{font-size:12.5px}

/* ================= Orchestrify shell kit (from the Player): logo, layout key, screen-size layouts =================
   shell.js puts compact / wideable / lay-stack / lay-cols on <html> and sets --u; only the kit rules that do not
   clash with the amber display are taken over here. */
.logo{margin:0;display:inline-flex;flex-direction:column;align-items:stretch;gap:3px;direction:ltr;color:color-mix(in srgb,var(--ink) 86%,transparent)}
.logo .lg1{font-family:var(--f-display);font-weight:700;font-style:italic;font-size:22px;line-height:1;text-shadow:0 1.5px 0 rgba(255,255,255,.9),0 -1px 1px rgba(0,0,0,.45)}
.logo .lg2{display:flex;align-items:center;gap:6px;font-size:8.5px;line-height:1;font-weight:700;color:color-mix(in srgb,var(--ink) 72%,transparent)}
.logo .lg2 b{letter-spacing:.3em;margin-inline-end:-.3em;text-shadow:0 1px 0 rgba(255,255,255,.9),0 -1px 0 rgba(0,0,0,.35)}
.logo .lg2 i{flex:1 1 0;height:1px;background:currentColor;opacity:.55;box-shadow:0 1px 0 rgba(255,255,255,.9)}
.logo .lg2 i:last-child{margin-inline-start:.3em}
.logo .lg2 i{min-width:10px}
.logo .lg3{align-self:flex-end;font-size:7.5px;line-height:1;font-weight:700;letter-spacing:.16em;margin-inline-end:-.16em;color:color-mix(in srgb,var(--ink) 62%,transparent);text-shadow:0 1px 0 rgba(255,255,255,.9)}
.deck[data-finish="graphite"] .logo .lg1{text-shadow:0 -1px 0 rgba(255,255,255,.38),0 2px 2px rgba(0,0,0,.75)}
.deck[data-finish="graphite"] .logo .lg2 b,.deck[data-finish="graphite"] .logo .lg3{text-shadow:0 -1px 0 rgba(255,255,255,.3),0 1.5px 1px rgba(0,0,0,.75)}
.deck[data-finish="graphite"] .logo .lg2 i{box-shadow:0 1px 1px rgba(0,0,0,.7)}
.key .lamp{position:absolute;top:4px;right:4px;width:5px;height:5px;border-radius:50%;background:rgba(0,0,0,.35);box-shadow:none}
.key[aria-pressed="true"] .lamp{background:#58e07a;box-shadow:0 0 7px #58e07a}
#btnLay{position:relative}
.zone{display:flex;flex-direction:column;gap:12px;min-width:0}
.platerow{justify-content:flex-start}

#btnLay{display:none}
:root.wideable #btnLay{display:flex}
/* two columns: display left, controls right (tablet "cols", and a phone held sideways) */
:root.lay-cols .app{max-width:calc(1040px*var(--u))}
:root.lay-cols .deck{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(calc(300px*var(--u)),.75fr);column-gap:calc(16px*var(--u));row-gap:calc(12px*var(--u));align-items:start}
:root.lay-cols .deck>*{grid-column:2;min-width:0}
:root.lay-cols .deck>.stage{grid-column:1;grid-row:1/span 6;align-self:stretch}
/* display on top across the width, controls below in two columns (tablet "stack") */
:root.lay-stack .app{max-width:1200px;padding-block:8px}
:root.lay-stack .deck{display:grid;grid-template-columns:1fr;row-gap:calc(14px*var(--u));grid-template-rows:auto auto auto}
:root.lay-stack .deck>.stage{align-self:stretch}
:root.lay-stack .deck>.zone{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:calc(16px*var(--u));row-gap:calc(12px*var(--u));align-items:center}
:root.lay-stack .zone>.ctl{grid-column:1;grid-row:1/span 2}
:root.lay-stack .zone>.tkeys{grid-column:2}
:root.lay-stack .zone>.drawer,:root.lay-stack .zone>.platerow{grid-column:1/-1}
/* the display grows with the room it gets */
:root:is(.lay-cols,.lay-stack) .deck>.stage{display:flex;flex-direction:column}
:root:is(.lay-cols,.lay-stack) .stage .mbody{flex:1;justify-content:center}
:root:is(.lay-cols,.lay-stack) .stage .mbody>.beats{height:calc(96px*var(--u))}
:root.compact .stage .mbody>.beats{height:auto;flex:1;min-height:54px}
:root:is(.lay-cols,.lay-stack,.compact) .app{min-height:100dvh;justify-content:center}
:root:is(.lay-cols,.lay-stack) .mbpm{font-size:calc(52px*var(--u))}
:root:is(.lay-cols,.lay-stack) .mts{font-size:calc(32px*var(--u))}
:root:is(.lay-cols,.lay-stack) .logo{zoom:var(--u)}
:root.lay-stack .ctl{justify-content:space-evenly}
/* phone held sideways: everything a little smaller so the controls fit the height */
:root.compact .app{padding-block:calc(4px*var(--u));padding-inline:max(10px,env(safe-area-inset-left,0px)) max(10px,env(safe-area-inset-right,0px));max-width:none}
:root.compact .cab{padding:5px 8px}
:root.compact .deck{padding:calc(8px*var(--u)) 10px;row-gap:calc(8px*var(--u))}
:root.compact .zone{gap:calc(8px*var(--u))}
:root.compact .tkey{height:calc(42px*var(--u))}
:root.compact .ctl .play{width:calc(62px*var(--u));height:calc(62px*var(--u));margin-top:calc(8px*var(--u))}
:root.compact .stage .mbody{gap:calc(8px*var(--u))}
/* tablet upright: a bigger read-out, the device sized to its content and centred */
:root.lay-stack .mbpm{font-size:calc(84px*var(--u))}
:root.lay-stack .mts{font-size:calc(48px*var(--u))}
:root.lay-stack .stage .mbody>.beats{height:calc(130px*var(--u))}
:root.lay-stack .stage .mbody{padding:calc(18px*var(--u)) calc(20px*var(--u))}