:root,
:root[data-theme="blackface"] {
  color-scheme: dark;
  --bg:           #0A0807;
  --surface:      #16120F;
  --surface-deep: #0F0C0A;
  --surface-2:    #1D1814;
  --line:         #2C2420;
  --line-2:       #43382F;

  --ink:      #F2E7CE;
  --ink-body: #D8CAAE;
  --ink-mute: #A8977C;
  --accent:      #E06A55;
  --accent-2:    #F08B75;
  --accent-ink:  #1A0806;
  --accent-wash: #2A1411;

  --led:      #FFAE42;
  --led-off:  #3A302A;
  --led-glow: 0 0 8px rgba(255,174,66,.65);

  --good:  #7CCB82;
  --ok:    #F0B04C;
  --bad:   #FF8274;
  --early: #7FB8E0;
  --late:  #E48FC0;

  --meter-bed: #060504;
  --shadow: 0 1px 0 rgba(255,240,220,.04) inset, 0 8px 22px rgba(0,0,0,.55);

  --rail:  linear-gradient(180deg, #2E2924, #1F1B17 55%, #171411);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1.6 0 0 0 -.7'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.10'/%3E%3C/svg%3E");

  --cap-top:   #3B342D;
  --cap-bot:   #221E1A;
  --cap-edge:  #0B0908;
  --cap-sheen: rgba(255,236,210,.15);
  --cap-skirt: #080706;
  --cap-ink:   #F2E7CE;

  --acap-top:  #9A3431;
  --acap-bot:  #5E1D1B;
  --acap-edge: #380F0E;
  --acap-ink:  #FFF0E2;

  --well:        #0B0908;
  --well-shadow: rgba(0,0,0,.65);
  --lit-ink:     #FFC978;
  --field:       #0D0A08;

  --display-ink:  #FFC978;
  --readout-glow: rgba(255,201,120,.35);

  --head-bg:     linear-gradient(180deg, #120E0C, #0A0807);
  --head-line:   #2C2420;
  --head-ink:    #F2E7CE;
  --head-mute:   #A8977C;
  --head-accent: #E06A55;
  --lamp-green: #58D26B;
  --lamp-amber: #FFB02E;
  --lamp-red:   #FF4A3D;
  --neck:       #1C1512;
  --fret-wire:  #7A7064;
  --string:     #BDB3A2;
  --inlay:      rgba(237,227,207,.20);
  --nut:        #E8DDC6;
  --scale-dot:  #D8CAAE;
  --scale-ink:  #16120F;
  --root-dot:   #E06A55;
  --root-ink:   #1A0806;
  --pos1: #FFAE42; --pos1-ink: #1A0F02;
  --pos2: #5FC6C9; --pos2-ink: #051819;
  --pos3: #D98BD6; --pos3-ink: #1C0A1B;
  --pos4: #8FD46B; --pos4-ink: #0C1806;

  --held-ink: #1A0F02;

  --display: "Barlow Condensed", "Oswald", "Inter", system-ui, sans-serif;
  --display-tracking: .06em;
  --display-case: uppercase;
}
:root[data-theme="console"] {
  color-scheme: dark;
  --bg:           #0B0E12;
  --surface:      #161A20;
  --surface-deep: #11141A;
  --surface-2:    #1C2128;
  --line:         #2A3039;
  --line-2:       #3D4550;

  --ink:      #E9EEF5;
  --ink-body: #C4CCD6;
  --ink-mute: #9AA4B1;

  --accent:      #5AAEF2;
  --accent-2:    #8AC6F7;
  --accent-ink:  #06121F;
  --accent-wash: #0F2236;

  --led:      #4FD08A;
  --led-off:  #313842;
  --led-glow: 0 0 8px rgba(79,208,138,.6);

  --good:  #4FD08A;
  --ok:    #EDB451;
  --bad:   #FF7F84;
  --early: #5BB8E8;
  --late:  #E886C4;

  --meter-bed: #05070A;
  --shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 8px 22px rgba(0,0,0,.55);

  --rail:  linear-gradient(180deg, #2D333C, #232830 55%, #1B1F25);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1.6 0 0 0 -.7'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.06'/%3E%3C/svg%3E");

  --cap-top:   #434B56;
  --cap-bot:   #272C34;
  --cap-edge:  #0E1116;
  --cap-sheen: rgba(255,255,255,.2);
  --cap-skirt: #0A0C10;
  --cap-ink:   #E9EEF5;
  --acap-top:  #246FB4;
  --acap-bot:  #174A80;
  --acap-edge: #0E3050;
  --acap-ink:  #F2F8FF;

  --well:        #0A0D11;
  --well-shadow: rgba(0,0,0,.65);
  --lit-ink:     #7EE8BE;
  --field:       #0C0F13;

  --display-ink:  #7EE8BE;
  --readout-glow: rgba(126,232,190,.3);

  --head-bg:     linear-gradient(180deg, #131820, #0B0E12);
  --head-line:   #2A3039;
  --head-ink:    #E9EEF5;
  --head-mute:   #9AA4B1;
  --head-accent: #5AAEF2;

  --lamp-green: #4FD08A;
  --lamp-amber: #F2B640;
  --lamp-red:   #FF5A5F;
  --neck:       #14171C;
  --fret-wire:  #66707C;
  --string:     #B4BCC6;
  --inlay:      rgba(233,238,245,.16);
  --nut:        #D9DEE5;
  --scale-dot:  #C4CCD6;
  --scale-ink:  #0B0E12;
  --root-dot:   #5AAEF2;
  --root-ink:   #06121F;
  --pos1: #F0B04C; --pos1-ink: #1A1102;
  --pos2: #4FD08A; --pos2-ink: #04160C;
  --pos3: #E886C4; --pos3-ink: #1F0917;
  --pos4: #C9A227; --pos4-ink: #161001;

  --held-ink: #04160C;

  --display: "Barlow Condensed", "Oswald", "Inter", system-ui, sans-serif;
  --display-tracking: .06em;
  --display-case: uppercase;
}
:root[data-theme="aluminium"] {
  color-scheme: light;
  /* Machined aluminium and glass: cool greys, one blue, hairline edges, and light that falls from above. */
  --bg:           #DFE3E9;
  --surface:      #F6F7F9;
  --surface-deep: #ECEEF2;
  --surface-2:    #FBFCFD;
  --line:         #D5DAE1;
  --line-2:       #BFC6CF;

  --ink:      #1D1D1F;
  --ink-body: #35383D;
  --ink-mute: #6B7078;

  --accent:      #0071E3;
  --accent-2:    #0A84FF;
  --accent-ink:  #FFFFFF;
  --accent-wash: #E6F0FD;

  --led:      #0A84FF;
  --led-off:  #C3C9D2;
  --led-glow: 0 0 8px rgba(10,132,255,.45);

  --good:  #1C8C46;
  --ok:    #9A6100;
  --bad:   #C7362C;
  --early: #0A62C4;
  --late:  #8E44AD;

  --meter-bed: #D3D8DF;
  --shadow: 0 1px 2px rgba(16,24,40,.06), 0 12px 32px rgba(16,24,40,.14);

  --rail:  linear-gradient(180deg, #FDFDFE, #F0F2F5 52%, #DEE2E8);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 1.5' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .46 0 0 0 0 .52 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23b)' opacity='.5'/%3E%3C/svg%3E");

  --cap-top:   #FDFDFE;
  --cap-bot:   #DFE4EA;
  --cap-edge:  #B3BBC5;
  --cap-sheen: rgba(255,255,255,.95);
  --cap-skirt: #C2C9D2;
  --cap-ink:   #1D1D1F;

  --acap-top:  #3E9BFF;
  --acap-bot:  #0062D6;
  --acap-edge: #0052B4;
  --acap-ink:  #FFFFFF;

  --well:        #DBE0E7;
  --well-shadow: rgba(22,32,50,.22);
  --lit-ink:     #0A4C9B;
  --field:       #FFFFFF;

  --display-ink:  #17345C;
  --readout-glow: transparent;

  --head-bg:     linear-gradient(180deg, rgba(252,253,254,.92), rgba(233,236,241,.86));
  --head-line:   #CBD1D9;
  --head-ink:    #1D1D1F;
  --head-mute:   #6B7078;
  --head-accent: #0071E3;
  --lamp-green: #30A14E;
  --lamp-amber: #E08A00;
  --lamp-red:   #D8382C;
  --neck:       #E4E8ED;
  --fret-wire:  #9AA3AE;
  --string:     #7C858F;
  --inlay:      rgba(29,29,31,.14);
  --nut:        #AFB7C1;
  --scale-dot:  #2B2F36;
  --scale-ink:  #FFFFFF;
  --root-dot:   #0071E3;
  --root-ink:   #FFFFFF;
  --pos1: #C56A00; --pos1-ink: #FFFFFF;
  --pos2: #00767A; --pos2-ink: #FFFFFF;
  --pos3: #8A40C8; --pos3-ink: #FFFFFF;
  --pos4: #2B7D3E; --pos4-ink: #FFFFFF;

  --held-ink: #FFFFFF;

  /* No condensed uppercase here: the labels are set the way a machined panel is etched. */
  --display: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display-tracking: .01em;
  --display-case: none;
}

:root[data-theme="walnut"] {
  color-scheme: light;
  --bg:           #E4D9C3;
  --surface:      #F4EEE1;
  --surface-deep: #EAE2D1;
  --surface-2:    #EBE3D1;
  --line:         #CDBFA3;
  --line-2:       #B09F80;

  --ink:      #2B2117;
  --ink-body: #45392B;
  --ink-mute: #5E4F3C;

  --accent:      #6F470B;
  --accent-2:    #5E3C08;
  --accent-ink:  #FFF8E8;
  --accent-wash: #EFE2C4;

  --led:      #D99A2B;
  --led-off:  #BDB095;
  --led-glow: 0 0 7px rgba(217,154,43,.6);

  --good:  #185A34;
  --ok:    #744506;
  --bad:   #A3231B;
  --early: #1A5280;
  --late:  #7E2A5E;

  --meter-bed: #D9CCB1;
  --shadow: 0 1px 2px rgba(60,40,20,.10), 0 8px 22px rgba(60,40,20,.14);

  --rail:  linear-gradient(180deg, #F1EADA, #E6DCC7 55%, #DCD1BB);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.6 0 0 0 -.7'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.09'/%3E%3C/svg%3E");

  /* A pale cap on a pale plate all but disappears: the edge and skirt carry the shape here. */
  --cap-top:   #F6EFDF;
  --cap-bot:   #D3C4A6;
  --cap-edge:  #7A6644;
  --cap-sheen: rgba(255,255,255,.9);
  --cap-skirt: #8A7550;
  --cap-ink:   #2B2117;

  --acap-top:  #926418;
  --acap-bot:  #6B440C;
  --acap-edge: #4A2F07;
  --acap-ink:  #FFF8E8;

  --well:        #D5C8AC;
  --well-shadow: rgba(70,48,20,.30);
  --lit-ink:     #5A3A08;
  --field:       #FBF7EE;

  --display-ink:  #2B2117;
  --readout-glow: transparent;

  --head-bg:     linear-gradient(180deg, #3E2C1E, #2A1D13);
  --head-line:   #1C130C;
  --head-ink:    #F3EAD8;
  --head-mute:   #CFC0A5;
  --head-accent: #E7B35A;
  --lamp-green: #2FA84F;
  --lamp-amber: #E39A1B;
  --lamp-red:   #D9362B;
  --neck:       #E8D6AF;
  --fret-wire:  #9C8A68;
  --string:     #6E6152;
  --inlay:      rgba(43,33,23,.22);
  --nut:        #3A2E22;
  --scale-dot:  #3A2E22;
  --scale-ink:  #F4EEE1;
  --root-dot:   #8E2F1E;
  --root-ink:   #FFF4E6;
  --pos1: #9A5B00; --pos1-ink: #FFF6E6;
  --pos2: #0F6E72; --pos2-ink: #F2FBFB;
  --pos3: #8A3A86; --pos3-ink: #FBF0FA;
  --pos4: #3F6B1E; --pos4-ink: #F3FAEE;

  --held-ink: #2B2117;

  --display: "Barlow Condensed", "Oswald", "Inter", system-ui, sans-serif;
  --display-tracking: .05em;
  --display-case: uppercase;
}

:root {
  --r: 10px; --r-lg: 16px; --r-pill: 999px;
  --s-1: .2rem; --s-2: .375rem; --s-3: .55rem; --s-4: .75rem;
  --s-5: 1.1rem; --s-6: 1.5rem; --s-7: 2.1rem; --s-8: 3rem;
  --shell: 1560px;
  --gutter: clamp(.75rem, 2.8vw, 1.75rem);
  --measure: 66ch;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --display: var(--sans);
  --display-tracking: 0;
  --display-case: none;
  /* The phrase you are recording reads the same yellow in every theme and every view. */
  --phrase-dot: #FFC42E; --phrase-ink: #241703;
  --t-xs: .66rem; --t-sm: .76rem; --t-base: .88rem;
  --t-lede: clamp(.95rem, .9rem + .35vw, 1.08rem);
  --t-h3: clamp(.95rem, .9rem + .3vw, 1.08rem);
  --t-h2: clamp(1.2rem, 1rem + 1vw, 1.6rem);
  --t-h1: clamp(2.1rem, 1.5rem + 3.2vw, 3.7rem);
  --ease: cubic-bezier(.22, 1, .36, 1);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink-body);
  font-family: var(--sans); font-size: var(--t-base); line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { color: var(--ink); line-height: 1.14; margin: 0 0 var(--s-4); font-weight: 700; letter-spacing: -.02em; }
h1 { font-size: var(--t-h1); } h2 { font-size: var(--t-h2); } h3 { font-size: var(--t-h3); line-height: 1.28; }
p { margin: 0 0 1.1em; max-width: var(--measure); }
a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--accent-2); }
strong { color: var(--ink); font-weight: 650; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-6) 0; }

.shell { max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.lede { font-size: var(--t-lede); color: var(--ink-body); }
.mute { color: var(--ink-mute); font-size: var(--t-sm); }
.masthead { border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 100; }
.masthead .shell { justify-content: space-between; min-height: 62px; }
.wordmark { font-weight: 750; color: var(--ink); text-decoration: none; letter-spacing: -.02em; }
.wordmark svg { flex: none; }
.wordmark em { font-style: normal; color: var(--accent); }
.themeswitch { display: inline-flex; }
.acct { position: relative; }
.acct__btn {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  max-width: 11rem; min-height: 32px; padding: .3rem .7rem .3rem .4rem;
  border: 1px solid var(--line-2); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink);
  font: 600 var(--t-xs)/1 var(--sans);
}
.acct__btn:hover { border-color: var(--accent); }
.acct__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.acct__icon {
  flex: none; width: 18px; height: 18px; border-radius: 50%;
  display: inline-grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 70%, var(--surface));
  font: 700 .62rem/1 var(--display); color: var(--accent-ink);
}
.acct__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct__pop {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 40;
  width: min(23rem, 92vw);
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-3); background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r);
  box-shadow: 0 12px 32px -8px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.2);
}
.acct__row { display: flex; flex-direction: column; gap: 4px; }
.acct__row--inline { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--s-3); }
.acct__label {
  font: 700 var(--t-xs)/1 var(--display); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-mute);
}
.acct__input { width: 100%; }
.acct__note { margin: 0; min-height: 1.2em; font-size: var(--t-xs); color: var(--ink-mute); }
.acct__note.is-bad { color: var(--bad); }
.acct__note.is-good { color: var(--good); }
@media (max-width: 480px) { .acct__pop { right: -8px; width: 94vw; } }
.acct__hero + .acct__section { border-top: none; padding-top: var(--s-2); }
.acct__seclabel {
  font: 700 var(--t-xs)/1 var(--display); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-mute);
}
.acct__section--danger { padding-top: var(--s-2); border-top-color: color-mix(in srgb, var(--bad) 35%, var(--line)); }
.acct__actrow {
  appearance: none; cursor: pointer; width: 100%;
  display: flex; align-items: center; gap: .65rem;
  padding: .4rem .3rem; margin: 0 -.3rem; border: none; border-radius: 7px;
  background: transparent; color: var(--ink-body);
  font: 600 var(--t-sm)/1.2 var(--sans); text-align: left;
}
.acct__actrow:hover { background: var(--surface-2); }
.acct__actrow[aria-pressed="true"] { background: var(--surface-2); color: var(--ink); }
.acct__acticon {
  flex: none; width: 27px; height: 27px; border-radius: 8px;
  display: inline-grid; place-items: center; font-size: .82rem; line-height: 1;
}
.acct__acticon--info   { background: color-mix(in srgb, var(--early) 20%, var(--surface-2)); color: var(--early); }
.acct__acticon--good   { background: color-mix(in srgb, var(--good) 20%, var(--surface-2)); color: var(--good); }
.acct__acticon--mute   { background: var(--surface-2); color: var(--ink-mute); border: 1px solid var(--line-2); }
.acct__acticon--danger { background: color-mix(in srgb, var(--bad) 20%, var(--surface-2)); color: var(--bad); }
.acct__actlabel { flex: 1 1 auto; min-width: 0; }
.acct__actchev { flex: none; color: var(--ink-mute); font-size: .85rem; }
.acct__actrow--danger, .acct__actrow--danger .acct__actlabel { color: var(--bad); }
.acct__actrow--danger:hover { background: color-mix(in srgb, var(--bad) 10%, transparent); }
.acct__hero { display: flex; align-items: center; gap: var(--s-3); padding-bottom: var(--s-2); border-bottom: 1px solid var(--line); }
.acct__heroavatar, .acct__herolamp {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: inline-grid; place-items: center;
  font: 700 1.05rem/1 var(--display);
}
.acct__heroavatar {
  background: color-mix(in srgb, var(--accent) 72%, var(--surface)); color: var(--accent-ink);
  box-shadow: 0 0 0 2px var(--surface), 0 0 10px color-mix(in srgb, var(--accent) 45%, transparent);
}
.acct__herolamp {
  background: var(--surface-2); color: var(--ink-mute); font-size: .8rem;
  border: 1px solid var(--line-2);
}
.acct__heroinfo { min-width: 0; }
.acct__herotitle { font: 700 var(--t-sm)/1.25 var(--sans); color: var(--ink); overflow-wrap: anywhere; }
.acct__herosub { margin: 2px 0 0; font-size: var(--t-xs); color: var(--ink-mute); overflow-wrap: anywhere; }
.acct__subform { gap: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.acct__subform--danger { border-top-color: var(--bad); }
.acct__danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 50%, var(--line-2)); }
.acct__danger:hover { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, transparent); }
.presence { display: inline-flex; align-items: center; gap: 6px; font: 500 var(--t-xs)/1 var(--sans); color: var(--ink-mute); white-space: nowrap; }
.presence__dot {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--good); box-shadow: 0 0 5px color-mix(in srgb, var(--good) 70%, transparent);
}
@media (max-width: 720px) { .presence__text { display: none; } }
@media (max-width: 780px) {
  .masthead .shell { flex-wrap: wrap; padding-block: var(--s-3); min-height: 0; }
}

.footer { border-top: 1px solid var(--line); margin-top: var(--s-8); padding: var(--s-7) 0 var(--s-6); color: var(--ink-mute); font-size: var(--t-sm); }
.footer h3 { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .12em; color: var(--ink); margin-bottom: var(--s-3); }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
.footer a { color: var(--ink-mute); text-decoration: none; }
.footer a:hover { color: var(--accent); }
.footer__legal { margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--line); font-size: var(--t-xs); }
.grid { display: grid; gap: var(--s-4); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-5); }
.card h3 { margin-bottom: var(--s-2); }
.card p { margin: 0; font-size: var(--t-sm); color: var(--ink-mute); }
.btn {
  appearance: none; cursor: pointer; border: 1px solid transparent;
  display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-pill);
  font: 650 1rem/1 var(--sans); background: var(--accent); color: var(--accent-ink);
  transition: transform .12s var(--ease), background .12s var(--ease);
}
.btn:hover { background: var(--accent-2); }
.btn:active { transform: translateY(1px); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { background: var(--surface-2); color: var(--ink); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
select.input {
  background: var(--surface); color: var(--ink); border: 1px solid var(--line-2);
  border-radius: var(--r); padding: .5rem .65rem; font: 600 1rem/1.2 var(--mono);
  min-height: 44px;
}
select.input { font-family: var(--sans); font-weight: 500; width: 100%; max-width: 420px; }

.seg { display: inline-flex; border: 1px solid var(--line); }
.seg button {
  appearance: none; border: 0; background: transparent;
  font: 600 var(--t-sm)/1 var(--sans);
  cursor: pointer;
}
.tool { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1rem, 3vw, 1.75rem); margin-top: var(--s-6); box-shadow: var(--shadow); }

.readout { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); }
.readout b { display: block; font: 700 1.6rem/1.05 var(--mono); font-variant-numeric: tabular-nums; }
.readout span { display: block; color: var(--ink-mute); margin-top: .3rem; text-transform: uppercase; letter-spacing: .07em; }
.readout.is-good b { color: var(--good); }
.readout.is-bad b { color: var(--bad); }

.note { display: flex; gap: .6rem; font-size: var(--t-sm); color: var(--ink-mute); background: var(--surface-2); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--r); padding: var(--s-3) var(--s-4); margin-top: var(--s-4); }
.note p { margin: 0; max-width: none; }
.status { font: 600 var(--t-sm)/1.45 var(--mono); color: var(--ink-mute); min-height: 1.45em; margin-top: var(--s-3); }
.logo { display: block; flex: none; }
.wordmark { display: inline-flex; align-items: center; gap: var(--s-3); }
.curve { width: 100%; height: auto; display: block; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); }
.curve .now { stroke: var(--accent); stroke-width: 2; }
.curve text { font: 600 11px var(--mono); fill: var(--ink-mute); }

.slots { display: grid; grid-auto-flow: column; gap: var(--s-2); margin-top: var(--s-4); }
.slot { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); text-align: center; }

table.data { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
table.data th, table.data td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--line); }
table.data th { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-mute); font-weight: 700; }
table.data td.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.row { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; }
.spread { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; justify-content: space-between; }
[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
:root { --shadow: none; }
.tool, .card, .pedal { box-shadow: none; }
.section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.switches {
  display: flex; gap: var(--s-2); align-items: center;
  /* Four controls in one row need somewhere to go on a very narrow window. */
  flex-wrap: wrap; justify-content: flex-end; min-width: 0;
}
.art { display: block; width: 100%; height: auto; color: var(--ink); }
.art .art-body, .art .art-detail, .art .art-accent {
  fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.art .art-body   { stroke: currentColor; stroke-width: 2.2; }
.art .art-detail { stroke: currentColor; stroke-width: 1.6; opacity: .42; }
.art .art-accent { stroke: var(--accent); stroke-width: 2.2; }
.board { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); margin-top: var(--s-5); }
@media (max-width: 1000px) { .board { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .board { grid-template-columns: 1fr; } }

.pedal { grid-column: span 2; border: 1px solid var(--line); display: flex; flex-direction: column; }
.pedal--sm { grid-column: span 1; }
.pedal--lg { grid-column: span 2; }
@media (max-width: 640px) { .pedal, .pedal--sm, .pedal--lg { grid-column: span 1; } }
.pedal.is-on { border-color: var(--accent); }
.pedal.is-dragging { opacity: .55; }
body.is-rearranging { user-select: none; }
.pedal__art { color: var(--ink-mute); }
.pedal.is-on .pedal__art { color: var(--accent); }
.pedal__body { flex: 1 1 auto; margin: var(--s-4) 0; }
.pedal__foot { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; border-top: 1px solid var(--line); }
/* What the tool is saying right now reads on the title line, beside its own readout. */
.pedal__status {
  font-size: var(--t-xs); color: var(--ink-mute);
  flex: 0 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pedal__status:not(:empty)::before { content: "·\00a0"; color: var(--line-2); }
@media (max-width: 900px) { .pedal__status { display: none; } }

.rig { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.rig__label { font: 600 var(--t-xs)/1 var(--display); white-space: nowrap; }
.rig__value { font: 700 var(--t-sm)/1 var(--mono); color: var(--accent); font-variant-numeric: tabular-nums; min-width: 4.2em; }
.vu { position: relative; width: clamp(90px, 18vw, 190px); height: 8px; background: var(--meter-bed); border: 1px solid var(--line); border-radius: 2px; overflow: hidden; }
.vu__fill { position: absolute; inset: 0 100% 0 0; background: var(--accent); transition: right .06s linear; }
.vu__fill.is-hot { background: var(--ok); }
.vu__fill.is-clip { background: var(--bad); }
.rigtoggle { appearance: none; cursor: pointer; display: inline-flex; align-items: center; min-height: 40px; font: 600 var(--t-xs)/1 var(--display); letter-spacing: .08em; text-transform: uppercase; padding: .5rem .8rem; border-radius: 4px; border: 1px solid var(--line-2); background: transparent; color: var(--ink-body); }
.rigtoggle:hover { border-color: var(--accent); color: var(--ink); }
.rigtoggle[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
#monitor[aria-pressed="true"] {
  background: var(--good); border-color: var(--good); color: var(--bg);
  box-shadow: 0 0 10px color-mix(in srgb, var(--good) 45%, transparent);
}

.rig__slider { width: clamp(80px, 14vw, 150px); accent-color: var(--accent); }
.feedbacknote { font-size: var(--t-xs); color: var(--ink-mute); margin: var(--s-2) 0 0; max-width: none; }
.feedbacknote strong { color: var(--ok); }

.pedal .readout b { font-size: 1.3rem; }
.pedal__head { grid-template-columns: auto 56px 1fr auto; }
.pedal--lg .pedal__head { grid-template-columns: auto 72px 1fr auto; }
.pedal--lg .pedal__art { width: 72px; }
@media (max-width: 480px) {
  .pedal__head { grid-template-columns: auto 44px 1fr; row-gap: var(--s-2); }
}
.tcbar {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3) var(--s-4);
  padding: var(--s-3);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r); margin-bottom: var(--s-3);
}
.tcbar__unit { display: flex; flex-direction: column; gap: 3px; }
.tcbpm { width: 68px; text-align: center; font-variant-numeric: tabular-nums; }
.seg button[disabled] { opacity: .4; cursor: not-allowed; }
.scope__alt { opacity: .72; }
.scope__alt:not(:empty)::before { content: "= "; }
.fret { margin-top: var(--s-3); overflow-x: auto; }

.rack { display: grid; gap: var(--s-2); margin-bottom: var(--s-4); }
.rack__row {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  padding: var(--s-2) var(--s-3); border: 1px solid var(--line);
}
.rack__sep { width: 1px; align-self: stretch; margin: 0 var(--s-1); }
.rack__unit { display: flex; flex-direction: column; gap: 2px; }
.rack__unit > .row { align-items: center; }
.rack .vu { width: 72px; flex: none; }
.rack select.input { max-width: 170px; }

@media (max-width: 900px) {
  .rack__row { padding: var(--s-2); gap: var(--s-2); }
}

.btn { min-height: 34px; padding: 0 .8rem; font-size: var(--t-sm); font-weight: 650; gap: .35rem; }
.btn--sm { min-height: 30px; padding: 0 .65rem; font-size: var(--t-xs); }

.seg { gap: 1px; padding: 2px; }
.seg button {
  min-height: 28px; padding: 0 .55rem;
  font-size: var(--t-xs); font-weight: 650; letter-spacing: .01em;
}
.rig__label {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-mute);
}
.input, select.input { min-height: 30px; padding: 0 .5rem; font-size: var(--t-sm); }
input[type="number"].input { min-height: 30px; font-size: var(--t-sm); }
.rig__slider { height: 20px; }

.pedal { padding: var(--s-4); }
.pedal__art { width: 42px; height: 42px; flex: none; }
.pedal__foot { margin-top: var(--s-3); padding-top: var(--s-3); }
.readout { padding: var(--s-3); }
.readout b { font-size: 1.05rem; }
.readout span { font-size: .62rem; }
.slot { padding: var(--s-2); }
@media (pointer: coarse) {
  .btn, .btn--sm { min-height: 42px; padding: 0 1rem; }
  .seg button { min-height: 40px; padding: 0 .8rem; }
  .input, select.input { min-height: 40px; }
}
.helper {
  margin: 0 0 0 var(--s-6);
  flex: 1 1 auto; min-width: 0;
  /* Exactly one line of space, always. A long sentence used to wrap and push the whole bar taller,
     which moved every control under it — so the text itself floats and the slot never changes. */
  position: relative;
  height: 1.4em;
  font: 500 var(--t-xs)/1.4 var(--sans);
  color: var(--ink);
  max-width: 74ch;
}
.helper__text {
  position: absolute;
  /* Anchored at the top of its line and growing DOWNWARD over the page — centred, it grew upward
     too and the first line was cut off by the top of the window. */
  left: 0; top: 0;
  width: 100%;
  padding: 4px 9px; margin: -4px -9px;
  border-radius: 7px;
  z-index: 2;
}
/* Once it needs more than its line, it reads as a bubble sitting over the page. It takes the dark
   head colours, not the page's — on the cream faceplate a light bubble put pale text on pale ground. */
.helper:not(.is-idle) .helper__text {
  background: color-mix(in srgb, var(--head-line) 88%, #000);
  color: var(--head-ink);
  border: 1px solid color-mix(in srgb, var(--head-accent) 35%, var(--head-line));
  box-shadow: 0 8px 20px rgb(0 0 0 / .45);
}
.helper.is-idle { color: var(--ink-mute); font-style: italic; }
.masthead .shell { display: flex; align-items: center; gap: var(--s-3); }

@media (max-width: 900px) { .helper { display: none; } }
.rack__mon { min-width: 168px; }
.rack__mon .rig__slider { width: 74px; }
.minitog {
  min-height: 26px; padding: 0 .6rem; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink-mute);
  font: 700 var(--t-xs)/1 var(--display);
  letter-spacing: var(--display-tracking); text-transform: var(--display-case);
}
.minitog[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
[data-routinestoggle] { display: inline-flex; align-items: center; gap: .3rem; }
.minitog__icon { font-size: .85em; line-height: 1; }
.minitog[data-routinestoggle][aria-pressed="true"] {
  background: var(--good); border-color: var(--good); color: var(--bg);
}
.picker { position: relative; }
.picker__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 30px; min-width: 58px; padding: 0 .5rem; cursor: pointer;
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--surface); color: var(--ink);
}
.picker__pop {
  position: absolute; z-index: 40; top: calc(100% + 4px); left: 0;
  display: flex; flex-direction: column; gap: 8px;
  padding: 8px; width: max-content; max-width: min(480px, 92vw);
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r); box-shadow: var(--shadow);
}
.picker__pop--fixed { position: fixed; top: auto; left: auto; }
.picker__opt {
  display: flex; align-items: center; justify-content: center;
  min-width: 48px; min-height: 40px; padding: 3px; cursor: pointer;
  border: 1px solid transparent; border-radius: var(--r);
  background: var(--surface-2); color: var(--ink);
}
.picker__opt:hover { border-color: var(--line-2); }
.picker__opt[aria-selected="true"] { border-color: var(--led); box-shadow: inset 0 0 0 1px var(--led); }
.rhy { display: block; }

.fb__now {
  display: flex; align-items: baseline; gap: var(--s-3);
  margin: var(--s-2) 0 var(--s-3);
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}
.fb__now b { font-size: 1.5rem; color: var(--ink); font-weight: 700; }
.fb__now span { font-size: .72rem; color: var(--ink-mute); }
.fb__hz { opacity: .8; }
.pedal--xl { grid-column: 1 / -1; }

@media (pointer: coarse) {
  .minitog { min-height: 38px; }
  .picker__btn { min-height: 40px; }
  .picker__opt { min-height: 48px; min-width: 54px; }
}
.pedal.is-offline { border-color: var(--ok); }
.presets { display: inline-flex; gap: 3px; }
.presets button {
  min-height: 26px; padding: 0 .45rem; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); color: var(--ink-mute);
  font: 700 var(--t-xs)/1 var(--mono); font-variant-numeric: tabular-nums;
}
.presets button:hover { border-color: var(--line-2); color: var(--ink); }
.progress {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  margin-top: var(--s-3); padding: var(--s-2) var(--s-3);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r);
}
.spark { display: block; overflow: visible; }
.spark path { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }

@media (pointer: coarse) {
  .presets button { min-height: 38px; padding: 0 .7rem; }
}
.board > .pedal { min-width: 0; }
.pedal svg, .pedal canvas { max-width: 100%; }
.inputnote {
  display: flex; flex-direction: column; gap: var(--s-2);
  font: 400 var(--t-xs)/1.5 var(--sans);
  color: var(--ink-body);
  margin: var(--s-3) 0 0;
  padding: var(--s-3) var(--s-4);
  border-left: 2px solid var(--ok);
  background: var(--surface-2);
  max-width: 62ch;
}
.inputnote.is-bad { border-left-color: var(--bad); }
.masthead {
  background: var(--head-bg);
  border-bottom-color: var(--head-line);
  box-shadow: 0 1px 0 var(--head-line), 0 6px 18px rgba(0,0,0,.28);
}
.masthead .wordmark { color: var(--head-ink); }
.masthead .wordmark em { color: var(--head-accent); }
.masthead .helper,
.masthead .helper *,
.masthead .helper::before,
.masthead .helper::after { color: var(--head-mute); }

.rack__row {
  background: var(--grain), var(--rail);
  border-color: var(--cap-edge);
  border-radius: 6px;
  box-shadow:
    inset 0 1px 0 var(--cap-sheen),
    inset 0 -1px 0 rgba(0,0,0,.25),
    0 2px 6px rgba(0,0,0,.28);
}
.rack__sep { background: var(--cap-edge); box-shadow: 1px 0 0 var(--cap-sheen); }

.pedal {
  background: var(--grain), linear-gradient(180deg, var(--surface), var(--surface-deep));
  border-color: var(--line);
  border-radius: 10px;
  box-shadow:
    inset 0 1px 0 var(--cap-sheen),
    0 1px 0 rgba(0,0,0,.35),
    0 10px 24px rgba(0,0,0,.30);
}
.pedal.is-on {
  box-shadow:
    inset 0 1px 0 var(--cap-sheen),
    0 0 0 1px var(--accent),
    0 10px 24px rgba(0,0,0,.30);
}
.btn,
.btn--ghost,
.picker__btn,
.minitog,
.rigtoggle {
  border: 1px solid var(--cap-edge);
  border-radius: 5px;
  background: linear-gradient(180deg, var(--cap-top), var(--cap-bot));
  color: var(--cap-ink);
  box-shadow:
    inset 0 1px 0 var(--cap-sheen),
    inset 0 -2px 3px rgba(0,0,0,.22),
    0 2px 0 var(--cap-skirt),
    0 3px 6px rgba(0,0,0,.32);
  transition: transform .06s ease, box-shadow .06s ease, filter .12s ease, color .12s ease;
}
.btn, .btn--ghost {
  font-family: var(--display);
  letter-spacing: .09em;
  text-transform: uppercase;
}

.btn:hover,
.btn--ghost:hover,
.picker__btn:hover,
.minitog:hover,
.rigtoggle:hover {
  background: linear-gradient(180deg, var(--cap-top), var(--cap-bot));
  border-color: var(--cap-edge);
  color: var(--cap-ink);
  filter: brightness(1.07);
}
.btn:not(.btn--ghost),
.btn:not(.btn--ghost):hover {
  background: linear-gradient(180deg, var(--acap-top), var(--acap-bot));
  border-color: var(--acap-edge);
  color: var(--acap-ink);
}

.btn:active:not([disabled]),
.btn--ghost:active:not([disabled]),
.picker__btn:active,
.minitog:active,
.rigtoggle:active {
  transform: translateY(2px);
  filter: brightness(.94);
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,.40),
    0 0 0 var(--cap-skirt),
    0 1px 1px rgba(0,0,0,.25);
}
.minitog[aria-pressed="true"],
.rigtoggle[aria-pressed="true"] {
  transform: translateY(1px);
  filter: none;
  background: linear-gradient(180deg, var(--well), var(--well));
  border-color: var(--cap-edge);
  color: var(--lit-ink);
  box-shadow:
    inset 0 2px 6px var(--well-shadow),
    inset 0 -1px 0 var(--cap-sheen),
    0 0 0 var(--cap-skirt);
}
.seg {
  background: var(--well);
  border-color: var(--cap-edge);
  border-radius: 6px;
  box-shadow: inset 0 2px 4px var(--well-shadow), 0 1px 0 var(--cap-sheen);
}
.seg button { border-radius: 4px; color: var(--ink-mute); transition: color .12s ease; }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] {
  background: linear-gradient(180deg, var(--cap-top), var(--cap-bot));
  color: var(--cap-ink);
  box-shadow: inset 0 1px 0 var(--cap-sheen), 0 1px 2px rgba(0,0,0,.35);
}
.readout,
.vu {
  background-color: var(--meter-bed);
  border-color: var(--cap-edge);
  box-shadow: inset 0 3px 8px var(--well-shadow), inset 0 -1px 0 var(--cap-sheen);
}
.readout b {
  color: var(--display-ink);
  text-shadow: 0 0 10px var(--readout-glow);
}
select.input,
input.input,
input[type="number"].input {
  background-color: var(--field);
  color: var(--ink);
  border-color: var(--cap-edge);
  border-radius: 5px;
  box-shadow: inset 0 2px 3px var(--well-shadow);
}
.themebtn {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: .55rem;
  min-height: 34px; padding: 0 .7rem 0 .6rem;
  border: 1px solid var(--cap-edge); border-radius: 5px;
  background: linear-gradient(180deg, var(--cap-top), var(--cap-bot));
  color: var(--cap-ink);
  font: 700 var(--t-xs)/1 var(--display);
  letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  box-shadow:
    inset 0 1px 0 var(--cap-sheen),
    inset 0 -2px 3px rgba(0,0,0,.22),
    0 2px 0 var(--cap-skirt),
    0 3px 6px rgba(0,0,0,.32);
  transition: transform .06s ease, box-shadow .06s ease, filter .12s ease;
}
.themebtn:hover { filter: brightness(1.07); }
.themebtn:active {
  transform: translateY(2px);
  filter: brightness(.94);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.40), 0 0 0 var(--cap-skirt), 0 1px 1px rgba(0,0,0,.25);
}
.themebtn__lamp {
  width: 11px; height: 11px; border-radius: 50%; flex: none;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.7) 0 14%, transparent 45%),
    radial-gradient(circle at 50% 55%, var(--led) 0 55%, color-mix(in srgb, var(--led) 55%, #000) 88%);
  box-shadow: var(--led-glow), inset 0 -1px 1px rgba(0,0,0,.45);
}
.themebtn__dots { display: inline-flex; gap: 3px; margin-left: 1px; }
.themebtn__dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--led-off); }
.themebtn__dots i.is-on { background: var(--led); box-shadow: 0 0 4px var(--led); }
@media (pointer: coarse) { .themebtn { min-height: 44px; } }
.ampsw {
  --lamp: var(--lamp-green);
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 30px; padding: 0 .65rem 0 .55rem;
  border: 1px solid var(--cap-edge); border-radius: 5px;
  background: linear-gradient(180deg, var(--cap-top), var(--cap-bot));
  color: var(--cap-ink);
  font: 700 var(--t-xs)/1 var(--display);
  letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  box-shadow:
    inset 0 1px 0 var(--cap-sheen), inset 0 -2px 3px rgba(0,0,0,.22),
    0 2px 0 var(--cap-skirt), 0 3px 6px rgba(0,0,0,.32);
  transition: transform .06s ease, box-shadow .06s ease, filter .12s ease;
}
.ampsw[data-lamp="amber"] { --lamp: var(--lamp-amber); }
.ampsw[data-lamp="red"]   { --lamp: var(--lamp-red); }
.ampsw:hover { filter: brightness(1.07); }
.ampsw:active {
  transform: translateY(2px); filter: brightness(.94);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.40), 0 0 0 var(--cap-skirt), 0 1px 1px rgba(0,0,0,.25);
}
.ampsw:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ampsw__lamp {
  width: 12px; height: 12px; border-radius: 50%; flex: none;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.75) 0 14%, transparent 45%),
    radial-gradient(circle at 50% 55%, var(--lamp) 0 55%, color-mix(in srgb, var(--lamp) 50%, #000) 90%);
  box-shadow: 0 0 9px color-mix(in srgb, var(--lamp) 70%, transparent), inset 0 -1px 1px rgba(0,0,0,.45);
  transition: background .15s ease, box-shadow .15s ease;
}
.ampsw__dots { display: inline-flex; gap: 3px; }
.ampsw__dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--led-off); }
.ampsw__dots i.is-on { background: var(--lamp); box-shadow: 0 0 4px var(--lamp); }
.take {
  position: relative; overflow: hidden;
  display: grid; gap: var(--s-2);
  padding: var(--s-3); margin: var(--s-3) 0;
  background-color: var(--meter-bed);
  border: 1px solid var(--cap-edge); border-radius: 8px;
  box-shadow: inset 0 3px 8px var(--well-shadow), inset 0 -1px 0 var(--cap-sheen);
}
.take__top { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.take__rec {
  width: 10px; height: 10px; border-radius: 50%; flex: none;
  background: var(--led-off); box-shadow: inset 0 -1px 1px rgba(0,0,0,.4);
}
.take[data-state="countin"] .take__rec { background: var(--lamp-amber); box-shadow: 0 0 8px var(--lamp-amber); }
.take[data-state="record"]  .take__rec {
  background: var(--lamp-red); box-shadow: 0 0 9px var(--lamp-red);
  animation: rec-blink 1s steps(2, jump-none) infinite;
}
@keyframes rec-blink { 50% { opacity: .3; } }
.take__phase {
  flex: 1 1 auto; min-width: 0;
  font: 700 1.15rem/1.15 var(--display); letter-spacing: .08em; text-transform: uppercase;
  color: var(--display-ink); overflow-wrap: anywhere;
}
.take__time { font: 700 var(--t-sm)/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--display-ink); white-space: nowrap; }
.take__stage { position: relative; display: grid; gap: 4px; padding-top: 2.4rem; }
.take > :not(.take__curve) { position: relative; z-index: 1; }
.take[data-state="countin"] .take__stage { min-height: 3.1rem; }
.take[data-state="countin"] .take__bar { visibility: hidden; }
.take__bar {
  position: relative; height: 12px; border-radius: 3px; overflow: hidden;
  background: var(--well); box-shadow: inset 0 1px 3px var(--well-shadow);
}
.take__fill {
  position: absolute; inset: 0 auto 0 0; width: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--good) 55%, transparent), var(--good));
  box-shadow: 0 0 10px color-mix(in srgb, var(--good) 45%, transparent);
  transition: width .1s linear;
}
.take[data-state="record"] .take__fill {
  background: linear-gradient(90deg, color-mix(in srgb, var(--lamp-red) 50%, transparent), var(--lamp-red));
  box-shadow: 0 0 10px color-mix(in srgb, var(--lamp-red) 45%, transparent);
}
.take__meta {
  display: flex; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap;
  font: 600 var(--t-xs)/1.2 var(--mono); color: var(--ink-mute);
}
.chip {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: baseline; gap: .4rem;
  min-height: 28px; padding: .3rem .6rem;
  border: 1px solid var(--cap-edge); border-radius: 5px;
  background: linear-gradient(180deg, var(--cap-top), var(--cap-bot));
  color: var(--cap-ink);
  font: 600 var(--t-xs)/1.2 var(--sans); text-align: left;
  box-shadow: inset 0 1px 0 var(--cap-sheen), 0 1px 0 var(--cap-skirt), 0 2px 4px rgba(0,0,0,.25);
  transition: transform .06s ease, box-shadow .06s ease, filter .12s ease;
}
.chip:hover { filter: brightness(1.07); }
.chip:active { transform: translateY(1px); }
.chip[aria-pressed="true"] {
  transform: translateY(1px); filter: none;
  background: var(--well); color: var(--lit-ink);
  box-shadow: inset 0 2px 5px var(--well-shadow), inset 0 -1px 0 var(--cap-sheen);
}
.chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@keyframes drawer-out { from { opacity: 0; transform: translateY(-8px); } }
.fb__wrap { overflow-x: auto; padding-bottom: 4px; }
.fb__neck { position: relative; min-width: 760px; padding-top: 4px; }
/* String spacing is one number: an electric's neck is the narrow one, an acoustic's is 25% wider. */
.fb { --fb-row: 23px; --fb-dot: 19px; }
.fb[data-neck="acoustic"] { --fb-row: 30px; --fb-dot: 22px; }
.fb__row, .fb__nums, .fb__inlays { display: grid; grid-template-columns: var(--cols); }
.fb__row { position: relative; height: var(--fb-row); background: var(--neck); }
.fb__row::before {
  content: ""; position: absolute; left: 2.6rem; right: 0; top: 50%; z-index: 1;
  height: var(--gauge); transform: translateY(-50%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--string) 75%, #fff), var(--string) 55%, color-mix(in srgb, var(--string) 65%, #000));
  box-shadow: 0 1px 1px rgba(0,0,0,.35);
  pointer-events: none;
}
.fb__inlays {
  position: absolute; left: 0; right: 0; top: 4px; z-index: 1;
  height: calc(var(--rows) * var(--fb-row)); pointer-events: none;
}
.fb__inlay { position: relative; }
.fb__inlay.is-single::after, .fb__inlay.is-double::before, .fb__inlay.is-double::after {
  content: ""; position: absolute; left: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%; background: var(--inlay);
}
.fb__inlay.is-single::after { top: 50%; }
.fb__inlay.is-double::before { top: 30%; }
.fb__inlay.is-double::after  { top: 70%; }

.fb__note {
  appearance: none; position: relative; z-index: 2;
  display: grid; place-items: center;
  height: var(--fb-row); margin: 0; padding: 0; min-width: 0;
  background: transparent; border: 0; border-right: 2px solid var(--fret-wire);
  color: inherit; font: inherit; cursor: pointer;
}
.fb__note:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.fb__note:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.fb__note--open { background: var(--surface-2); border-right: 5px solid var(--nut); }
.fb__name { font: 700 .66rem/1 var(--mono); color: var(--ink-mute); }
.fb__note.is-muted .fb__name::after { content: "\00a0\00d7"; }
.fb__dot {
  position: relative; z-index: 2;
  display: grid; place-items: center;
  min-width: var(--fb-dot); height: var(--fb-dot); padding: 0 3px; border-radius: 11px;
  background: var(--dot, var(--scale-dot)); color: var(--dot-ink, var(--scale-ink));
  font: 700 .62rem/1 var(--mono); letter-spacing: -.02em; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.22);
}
.fb__note.is-scale.is-root .fb__dot { --dot: var(--root-dot); --dot-ink: var(--root-ink); }
.fb__note.is-chord.is-root .fb__dot { box-shadow: 0 0 0 2px var(--root-dot), 0 1px 2px rgba(0,0,0,.45); }
.fb__note.is-played::after, .fb__note.is-played-alt::after {
  content: ""; position: absolute; left: 50%; top: 50%; z-index: 1;
  width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%;
}
.fb__note.is-played::after { background: var(--led); box-shadow: var(--led-glow), 0 0 14px var(--led); }
.fb__note.is-played-alt::after { border: 2px solid var(--led); opacity: .7; }
.fb__note.is-ringing .fb__dot { animation: pluck-dot .45s var(--ease); }
.fb__note.is-ringing::before {
  content: ""; position: absolute; left: 50%; top: 50%; z-index: 1;
  width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%;
  border: 2px solid var(--accent); opacity: 0;
  animation: pluck-ring .6s var(--ease);
}
@keyframes pluck-dot { 30% { transform: scale(1.2); } }
@keyframes pluck-ring { from { transform: scale(.6); opacity: .9; } to { transform: scale(1.9); opacity: 0; } }

.fb__nums { margin-top: 4px; font: 600 .62rem/1 var(--mono); color: var(--ink-mute); }
.fb__nums span { text-align: center; }
.fb__now { flex-wrap: nowrap; min-width: 0; }
.fb__now .fb__summary {
  flex: 1 1 auto; min-width: 0;
  font: 600 var(--t-xs)/1.35 var(--sans); color: var(--ink-body);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fb__legend { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-3); }
.fb__pos {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 32px; padding: 0 .7rem 0 .5rem;
  border: 1px solid var(--cap-edge); border-radius: 5px;
  background: linear-gradient(180deg, var(--cap-top), var(--cap-bot)); color: var(--cap-ink);
  font: 600 var(--t-xs)/1 var(--sans);
  box-shadow: inset 0 1px 0 var(--cap-sheen), 0 2px 0 var(--cap-skirt), 0 3px 6px rgba(0,0,0,.3);
  transition: transform .06s ease, box-shadow .06s ease;
}
.fb__pos:active { transform: translateY(2px); box-shadow: inset 0 2px 5px rgba(0,0,0,.4); }
.fb__pos[aria-pressed="true"] {
  transform: translateY(1px);
  background: var(--well); color: var(--lit-ink);
  box-shadow: inset 0 2px 6px var(--well-shadow), 0 0 0 2px var(--pc);
}
.fb__pos:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fb__swatch { width: 14px; height: 14px; border-radius: 50%; flex: none; background: var(--pc); box-shadow: inset 0 -1px 1px rgba(0,0,0,.35); }
.fb__posfret { font-family: var(--display); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
/* The voicing is reference, not a label: the chip reads as its fret, and the shape appears
   over it while the pointer (or keyboard focus) is on that chip. */
.fb__pos, .fb__arp { position: relative; }
.fb__shape {
  font: 700 var(--t-xs)/1 var(--mono);
  position: absolute; left: 50%; bottom: calc(100% + 7px);
  transform: translateX(-50%);
  padding: 5px 9px; border-radius: 6px; white-space: nowrap;
  background: var(--well); color: var(--lit-ink);
  border: 1px solid var(--cap-edge);
  box-shadow: 0 6px 16px rgb(0 0 0 / .35);
  opacity: 0; visibility: hidden; pointer-events: none; z-index: 6;
  transition: opacity .1s ease;
}
.fb__pos:hover .fb__shape, .fb__pos:focus-visible .fb__shape,
.fb__arp:hover .fb__shape, .fb__arp:focus-visible .fb__shape { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .fb__shape { transition: none; } }
.fb__strum { font-size: .65rem; }

.stepper {
  display: inline-flex; align-items: stretch; overflow: hidden;
  border: 1px solid var(--cap-edge); border-radius: 5px;
  background: var(--well); box-shadow: inset 0 2px 4px var(--well-shadow);
}
.stepper button {
  appearance: none; cursor: pointer; border: 0; min-width: 28px; min-height: 30px;
  background: linear-gradient(180deg, var(--cap-top), var(--cap-bot)); color: var(--cap-ink);
  font: 700 .95rem/1 var(--mono); box-shadow: inset 0 1px 0 var(--cap-sheen);
}
.stepper button:active { background: var(--well); box-shadow: inset 0 2px 4px var(--well-shadow); }
.stepper button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.stepper output {
  display: grid; place-items: center; min-width: 3.6ch; padding: 0 .3rem;
  font: 700 var(--t-sm)/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--display-ink);
}
.picker__group { display: grid; gap: 4px; }
.picker__glabel { font: 700 .6rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); }
.picker__row { display: flex; flex-wrap: wrap; gap: 4px; }

@media (pointer: coarse) {
  .ampsw, .chip, .fb__pos, .stepper button { min-height: 44px; }
  .fb { --fb-row: 34px; }
  .fb[data-neck="acoustic"] { --fb-row: 40px; }
}

.picker__btn--text {
  justify-content: space-between; gap: .45rem;
  min-width: 6.5rem; max-width: 15rem; padding: 0 .5rem 0 .65rem;
  font: 600 var(--t-sm)/1 var(--sans); text-transform: none; letter-spacing: 0;
}
.rack .picker__btn--text { max-width: 13rem; }
.picker__cur { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker__caret { flex: none; font-size: .68rem; }
.picker__btn[aria-expanded="true"] {
  transform: translateY(1px); filter: none;
  background: var(--well); color: var(--lit-ink);
  box-shadow: inset 0 2px 5px var(--well-shadow);
}
.picker__pop--text { max-height: min(70vh, 540px); overflow-y: auto; overscroll-behavior: contain; }
.picker__opt--text {
  flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px;
  min-width: 0; min-height: 34px; padding: .35rem .6rem; text-align: left;
}
.picker__olabel { font: 600 var(--t-xs)/1.15 var(--sans); color: var(--ink); white-space: nowrap; }
.picker__osub { font: 500 .6rem/1.15 var(--mono); color: var(--ink-mute); white-space: nowrap; }
.picker__row--grid { display: grid; grid-template-columns: repeat(var(--cols, 6), minmax(0, 1fr)); }
.picker__row--circle {
  position: relative; display: block;
  width: 17rem; height: 17rem; margin: .35rem auto .2rem;
}
.picker__row--circle::before {
  content: ''; position: absolute; inset: 2.1rem; border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--ink-mute) 40%, transparent);
}
.picker__row--circle .picker__opt {
  position: absolute; left: 50%; top: 50%;
  width: 3.6rem; height: 3.6rem; min-width: 0; min-height: 0;
  margin: -1.8rem 0 0 -1.8rem; padding: 0;
  border-radius: 50%; align-items: center; justify-content: center; text-align: center;
  transform:
    rotate(calc(var(--i) * (360deg / var(--n)))) translateY(-6.7rem)
    rotate(calc(var(--i) * (-360deg / var(--n))));
}
.picker__row--circle .picker__olabel { font-size: var(--t-sm); }
.picker__row--circle .picker__osub { font-size: .55rem; }
.picker__row--circle .picker__opt[data-fit]::after { top: auto; right: auto; bottom: 5px; left: calc(50% - 3px); }
[data-keypick] .picker__btn--text { min-width: 3.25rem; max-width: 7.5rem; }

@media (pointer: coarse) {
  .picker__row--circle { width: 19rem; height: 19rem; }
  .picker__row--circle .picker__opt { width: 4rem; height: 4rem; margin: -2rem 0 0 -2rem; }
  .picker__row--circle .picker__opt { transform: rotate(calc(var(--i) * (360deg / var(--n)))) translateY(-7.4rem) rotate(calc(var(--i) * (-360deg / var(--n)))); }
}
.picker__row--grid .picker__opt--text { align-items: center; }
.picker__opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.picker__foot { padding-top: 8px; border-top: 1px solid var(--line); }
.picker__row--col { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
.picker__row--col .picker__optrow { width: 100%; }
.picker__row--col .picker__opt { justify-content: flex-start; text-align: left; }

.picker__optrow { display: flex; align-items: stretch; gap: 3px; }
.picker__optrow .picker__opt { flex: 1 1 auto; min-width: 0; }
.picker__acts { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.picker__act {
  appearance: none; cursor: pointer;
  display: inline-grid; place-items: center;
  width: 26px; height: 26px; padding: 0; flex: none;
  border: 1px solid transparent; border-radius: 4px;
  background: transparent; color: var(--ink-mute);
  font: 600 .72rem/1 var(--sans);
}
.picker__act:hover { background: var(--surface-2); border-color: var(--line-2); color: var(--ink); }
.picker__act[data-action="del"]:hover { color: var(--bad); border-color: var(--bad); }
.picker__act:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (pointer: coarse) { .picker__act { width: 38px; height: 38px; } }
.picker__footrow { display: flex; flex-direction: row; flex-wrap: wrap; gap: 4px; }
.picker__footrow .picker__new { flex: 1 1 auto; width: auto; }
.picker__new {
  appearance: none; cursor: pointer; width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 32px; padding: 0 .6rem;
  border: 1px dashed var(--line-2); border-radius: 5px;
  background: transparent; color: var(--ink-body);
  font: 700 var(--t-xs)/1 var(--display); letter-spacing: .1em; text-transform: uppercase;
}
.picker__new:hover { border-color: var(--accent); color: var(--ink); border-style: solid; }
.picker__new:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (pointer: coarse) { .picker__new { min-height: 44px; } }
[data-grouppick] .picker__pop { width: 19rem; max-width: 92vw; }
[data-sigpick] .picker__btn { min-width: 0; padding: 0 .3rem; }
.latfoot { display: grid; gap: 8px; width: min(26rem, 80vw); }
.latfoot__row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.latfoot__note { margin: 0; font: 400 var(--t-xs)/1.4 var(--sans); color: var(--ink-mute); flex: 1 1 14rem; }
.latfoot output { min-width: 6ch; }
.fb__note.is-held .fb__dot {
  --dot: var(--led); --dot-ink: var(--held-ink);
  box-shadow: 0 0 10px var(--led), 0 1px 2px rgba(0,0,0,.45);
}
.fb__ident {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3);
  margin-bottom: var(--s-3); padding: var(--s-2) var(--s-3);
  background-color: var(--meter-bed);
  border: 1px solid var(--cap-edge); border-radius: 8px;
  box-shadow: inset 0 2px 6px var(--well-shadow);
}
.fb__chord {
  font: 700 1.6rem/1 var(--display); letter-spacing: .02em;
  color: var(--display-ink); text-shadow: 0 0 12px var(--readout-glow);
}
.fb__chordkind { font: 600 var(--t-xs)/1.2 var(--sans); color: var(--ink-body); }
.fb__identsep { width: 1px; align-self: stretch; background: var(--cap-edge); }
.fb__identscale { font: 600 var(--t-sm)/1.2 var(--sans); color: var(--display-ink); }
.fb__identalso { flex: 1 1 12rem; min-width: 0; font: 500 var(--t-xs)/1.35 var(--sans); color: var(--ink-mute); }
.fb__identbtns { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-left: auto; }

@media (pointer: coarse) {
  .picker__btn--text, .picker__opt--text { min-height: 44px; }
}
.fb__kind {
  font: 700 .58rem/1 var(--display); letter-spacing: .14em; text-transform: uppercase;
  padding: 3px 6px; border-radius: 3px;
  color: var(--ink-mute); border: 1px solid var(--cap-edge);
}
.fb__scaleunit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.fb__scalebar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.fb__play { font-family: var(--display); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.fb__note.is-sounding .fb__dot {
  transform: scale(1.3);
  box-shadow: 0 0 0 2px var(--led), 0 0 14px var(--led);
  transition: transform .08s ease, box-shadow .08s ease;
}
.picker__note {
  margin: 0; padding: 0 var(--s-2) var(--s-2);
  color: var(--ink-mute); font-size: var(--t-xs); line-height: 1.4;
  border-bottom: 1px solid var(--line);
}
.picker__opt[data-fit] { position: relative; }
.picker__opt[data-fit]::after {
  content: ''; position: absolute; top: 5px; right: 5px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--led);
  box-shadow: 0 0 5px color-mix(in srgb, var(--led) 65%, transparent);
}
.transport {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 40px; padding: 0 1.05rem 0 .85rem;
  border: 1px solid var(--cap-edge); border-radius: 6px;
  background: linear-gradient(180deg, var(--cap-top), var(--cap-bot));
  color: var(--cap-ink);
  font: 700 var(--t-sm)/1 var(--display); letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .14), inset 0 -1px 0 rgb(0 0 0 / .22),
              0 2px 0 var(--cap-skirt), 0 3px 6px rgb(0 0 0 / .28);
}
.transport:active { transform: translateY(2px); box-shadow: inset 0 2px 5px rgb(0 0 0 / .35); }
.transport__led {
  width: 11px; height: 11px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgb(255 255 255 / .7), transparent 55%),
              color-mix(in srgb, var(--lamp-red) 40%, #000);
}
.transport[aria-pressed="true"] .transport__led {
  background: radial-gradient(circle at 35% 30%, rgb(255 255 255 / .85), transparent 55%),
              color-mix(in srgb, var(--lamp-red) 90%, #000);
  box-shadow: 0 0 7px color-mix(in srgb, var(--lamp-red) 70%, transparent);
}
.met .tcbar { flex-wrap: wrap; align-items: flex-end; gap: var(--s-3) var(--s-4); min-width: 0; }
.met .tcbar__unit { flex-direction: column; align-items: flex-start; gap: 3px; flex: 0 0 auto; min-width: 0; }
.met .tcbar__unit .rig__label { line-height: 1; white-space: nowrap; }
.met .tcbpm { width: 56px; flex: none; }
.tcbar__unit--go { margin-left: auto; flex: none; }
.tcbar__unit--routines { margin-left: auto; flex: none; display: flex; flex-direction: row; align-items: center; gap: 6px; }
/* The pair of play buttons keeps its own 2 mm spacing — this pull-in is for the row's other gap. */
.tcbar__unit--routines > [data-run] { margin-left: -6px; }
/* A routine is driving the click — the controls stay live, so this is a hint, not a barrier. */
.tcbar.is-driven { position: relative; z-index: 1; }
.met .tcbar__unit--routines { flex-direction: row; align-items: center; }
@media (max-width: 760px) {
  .met .tcbar__unit--routines { flex: 1 1 100%; flex-wrap: wrap; margin-left: 0; }
  .tcbar__unit--routines [data-run] { margin-left: auto; }
}
.tempo { display: flex; align-items: center; gap: 5px; flex-wrap: nowrap; }
.rig__label.is-dead { opacity: .5; }
.knob.is-dead { opacity: .45; pointer-events: none; }
.rig__slider:disabled { opacity: .45; cursor: not-allowed; }
.met__routines { margin: var(--s-3) 0; }
.met__seclabel { font: 600 var(--t-xs)/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); }
.met__idle { margin: 0 0 var(--s-3); color: var(--ink-mute); font-size: var(--t-xs); }
.beatviz {
  position: relative; height: 184px; margin: var(--s-3) 0 var(--s-4);
  border: 1px solid var(--cap-edge); border-radius: 6px;
  background: var(--well); box-shadow: inset 0 2px 6px var(--well-shadow);
  overflow: hidden;
}
.beatviz > * { display: none; }
.beatviz[data-mode="dots"] .beatstrip,
.beatviz[data-mode="bars"] .beatstrip { display: flex; }
.beatviz[data-mode="notation"] .beatnotation { display: flex; }

.beatstrip { height: 100%; align-items: center; justify-content: center; gap: 6px; padding: 0 10px; }
.beatcell {
  flex: 0 1 auto; min-width: 0;
  background: color-mix(in srgb, var(--well) 82%, var(--ink-mute));
  box-shadow: inset 0 0 0 1px var(--ink-mute);
  transition: background .07s linear, transform .07s linear, box-shadow .07s linear;
}
.beatcell.is-beat { box-shadow: inset 0 0 0 2px var(--ink-mute); }
.beatcell.is-bar { box-shadow: inset 0 0 0 2px var(--ink); }
.beatcell.is-rest { background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); }
.beatcell.is-on {
  background: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent), 0 0 10px color-mix(in srgb, var(--accent) 55%, transparent);
}
.beatcell.is-beat.is-on {
  background: color-mix(in srgb, var(--accent) 62%, var(--ink));
  box-shadow: inset 0 0 0 1px var(--ink), 0 0 13px color-mix(in srgb, var(--accent) 60%, transparent);
}
.beatcell.is-bar.is-on {
  background: var(--ink);
  box-shadow: inset 0 0 0 2px var(--accent), 0 0 18px color-mix(in srgb, var(--accent) 70%, transparent);
}
.beatviz[data-mode="dots"] .beatcell { width: 70px; height: 70px; border-radius: 50%; }
.beatviz[data-mode="dots"] .beatcell.is-on { transform: scale(1.5); }
.beatviz[data-mode="bars"] .beatcell { width: 36px; height: 128px; border-radius: 8px; }
.beatnotation { height: 100%; align-items: center; justify-content: center; padding: 0 10px; overflow-x: auto; }
.beatbeat {
  display: inline-flex; align-items: center;
  color: var(--ink-mute); transition: color .08s linear, background .08s linear;
}
.beatbeat.is-bar { box-shadow: inset 0 0 0 1px var(--ink); }
.beatbeat.is-current { color: var(--ink); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.rhy__slot { transition: color .06s linear; }
.beatbeat.is-bar .rhy__slot.is-on { filter: drop-shadow(0 0 5px color-mix(in srgb, var(--led) 75%, transparent)); }
@media (prefers-reduced-motion: reduce) { .beatcell, .rhy__slot, .beatbeat { transition: none; } }
.tcbar__unit--meter { flex: 0 0 auto; }
.tcbar__unit--meter .fbtn { gap: 6px; }
.loops__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin: var(--s-2) 0; }
.loops__toolbar .met__seclabel { flex: none; }
.loops__toolbar .mute { flex: 1 1 140px; min-width: 0; }
.loops__toolbar .mute { margin: 0; }
/* On a phone the knob and the two history buttons take a line of their own
   rather than pushing the page sideways. */
.loops__history { display: flex; flex-wrap: wrap; gap: 6px; flex: 0 1 auto; margin-left: auto; }
.loops__history .chip:disabled { opacity: .4; cursor: default; }
.loops { list-style: none; margin: 0 0 var(--s-3); padding: 0; display: grid; gap: 4px; }
.loopcards {
  display: flex; flex-wrap: nowrap; gap: var(--s-2);
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  padding: 2px 2px 6px;
  scroll-snap-type: x proximity;
}
:root { --loopcard-blue: #3A6FD8; }
.loopcard {
  scroll-snap-align: start;
  flex: 0 0 auto; width: 15rem;
  display: flex; flex-direction: column; gap: 6px;
  padding: var(--s-2) var(--s-3);
  background: color-mix(in srgb, var(--loopcard-blue) 20%, var(--surface-2));
  border: 1px solid var(--loopcard-blue); border-radius: var(--r);
}
.loopcard.is-playing {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent), inset 0 0 14px color-mix(in srgb, var(--accent) 30%, transparent);
}
.loopcard:not(.is-editing) { cursor: pointer; }
.loopcard:not(.is-editing):hover {
  box-shadow: inset 0 0 0 1px var(--loopcard-blue), 0 0 8px color-mix(in srgb, var(--loopcard-blue) 35%, transparent);
}
.loopcard.is-editing {
  width: 18.75rem;
  background: color-mix(in srgb, var(--loopcard-blue) 20%, var(--surface-2));
  border-color: var(--loopcard-blue);
  box-shadow: inset 0 0 0 1px var(--loopcard-blue), inset 0 0 16px color-mix(in srgb, var(--loopcard-blue) 30%, transparent);
}
.loopcard.is-editing .loopcard__stats { flex-wrap: nowrap; }
.loopcard__name--static {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 600 var(--t-sm)/1.2 var(--sans); color: var(--ink);
}
.loopcard__stats--static { font: 500 var(--t-xs)/1 var(--mono); color: var(--ink-mute); }
.loopcard__stats--static .loopcard__stat::after { content: '·'; margin-left: 6px; color: var(--line-2); }
.loopcard__stats--static .loopcard__stat:last-child::after { content: ''; margin: 0; }
.loopcard__stats--static svg { vertical-align: -3px; }
.loopcard__bar { height: 4px; border-radius: 2px; overflow: hidden; background: var(--bad); flex: none; }
.loopcard__fill {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, color-mix(in srgb, var(--good) 55%, transparent), var(--good));
  transition: width .1s linear;
}
.loopcard__top { display: flex; align-items: center; gap: 6px; }
.loopcard__n {
  flex: none; min-width: 1.4rem; text-align: center;
  font: 700 var(--t-xs)/1 var(--mono); color: var(--ink-mute);
}
.loopcard__name { flex: 1 1 auto; min-width: 0; }
.loopcard__stats { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.loopcard__stat { display: inline-flex; align-items: center; gap: 3px; min-width: 0; }
.loopcard__unit { font: 600 .6rem/1 var(--mono); color: var(--ink-mute); text-transform: uppercase; }
.met .loop__bpm { width: 3.4rem; padding: 0 .25rem; }
.met .loop__barsnum { width: 2.9rem; padding: 0 .25rem; }
.loopcard__stats [data-sigpickrow] .picker__btn--text { min-width: 0; max-width: 4.2rem; padding: 0 .25rem 0 .4rem; }
.loopcard__stats [data-patpickrow] .picker__btn { min-width: 0; padding: 0 .3rem; }
.loopcard__swing { font: 500 var(--t-xs)/1 var(--mono); color: var(--ink-mute); white-space: nowrap; }
.loopcard__stat--bars .tempo { gap: 3px; }
.loopcard__stat--bars [data-barpick] .picker__btn--text {
  min-width: 0; max-width: 4.2rem; padding: 0 .25rem 0 .35rem; gap: .2rem;
}
.loopcard__stat--bars [data-barpick] .picker__caret { font-size: .58rem; }
.loopcard__foot { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 4px; }
.loopcard__time {
  flex: 1 1 auto; min-width: 0;
  font: 600 var(--t-xs)/1 var(--mono); color: var(--display-ink); font-variant-numeric: tabular-nums;
}
.loopcard__acts { display: inline-flex; gap: 3px; flex: none; }
.loopcard__acts .chip { min-height: 26px; padding: .2rem .4rem; }
.loopcard__acts .chip[disabled] { opacity: .35; cursor: not-allowed; }
@media (pointer: coarse) { .loopcard__acts .chip { min-height: 40px; padding: .2rem .5rem; } }
.knobs { display: flex; gap: var(--s-3); align-items: flex-start; }
.knob { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.knob__dial {
  --rot: 0deg;
  width: 32px; height: 32px; border-radius: 50%; position: relative; cursor: ns-resize;
  border: 1px solid var(--cap-edge);
  background: radial-gradient(circle at 50% 22%, var(--cap-top), var(--cap-bot));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .16), 0 2px 0 var(--cap-skirt), 0 3px 6px rgb(0 0 0 / .3);
  touch-action: none;
}
.knob__dial::after { content: ''; position: absolute; inset: 5px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .25); }
.knob__pointer {
  position: absolute; left: 50%; top: 4px; width: 2px; height: 11px; border-radius: 1px;
  background: var(--led); transform-origin: 50% 12px;
  transform: translateX(-50%) rotate(var(--rot));
  box-shadow: 0 0 5px var(--led);
}
.knob__dial:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.knob__name { font: 600 var(--t-xs)/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); }
.knob__val { font: 600 .62rem/1 var(--mono); color: var(--ink-mute); font-variant-numeric: tabular-nums; }
/* The icon, the name and the line about it are one group, centred on each other. Before this they
   were three siblings of a row made tall by the controls at the other end, so the mark hung low. */
.pedal__head { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); padding-right: 36px; margin-bottom: var(--s-3); }
.pedal__id { display: flex; align-items: center; gap: var(--s-3); flex: 1 1 auto; min-width: 0; }
.pedal__head .pedal__art { width: 30px; height: 30px; flex: none; }
.pedal__head h3 { margin: 0; font-size: var(--t-h3); white-space: nowrap; }
.pedal__head p {
  margin: 0; min-width: 0; flex: 0 1 auto; font-size: var(--t-xs); color: var(--ink-mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 640px) { .pedal__head p { display: none; } }
.pedal__headctl { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); align-items: center; margin-left: auto; }
/* Every control in a rack header is captioned the same way: the control, its name underneath. */
.pedal__headctl .tcbar__unit { flex-direction: column-reverse; align-items: center; justify-content: flex-end; gap: 4px; }
.pedal__headctl .tcbar__unit > .rig__label { font: 600 var(--t-xs)/1 var(--display); letter-spacing: .08em; }
.pedal__drag {
  position: absolute; top: 0; right: 0; flex: none;
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface-2);
  color: var(--ink-mute); font-size: 1rem; line-height: 1; cursor: grab; touch-action: none;
}
.pedal__drag:hover { color: var(--ink); border-color: var(--line); }
.pedal.is-dragging { position: relative; z-index: 5; cursor: grabbing; box-shadow: var(--shadow); }
.pedal.is-dragging .pedal__drag { cursor: grabbing; }
.pedal.is-dragtarget { outline: 2px dashed var(--accent); outline-offset: -2px; }
[data-astd] button.is-droning {
  color: var(--accent-ink); background: var(--accent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--led) 55%, transparent);
}
.fbtn { display: flex; align-items: center; gap: var(--s-2); flex: 0 0 auto; }
.fbtn__meter {
  position: relative; width: 1in; flex: 0 0 1in;
  border: 1px solid var(--cap-edge); border-radius: 4px;
  background: var(--well); box-shadow: inset 0 2px 5px var(--well-shadow);
  overflow: hidden;
}
.fbtn__zone { position: absolute; top: 0; bottom: 0; left: 50%; width: 10%; transform: translateX(-50%); background: color-mix(in srgb, var(--good) 26%, transparent); }
.fbtn__centre { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--good); }
.fbtn__mark {
  position: absolute; top: 2px; bottom: 2px; width: 3px; border-radius: 2px; left: 50%;
  transform: translateX(-50%); background: var(--led); box-shadow: 0 0 8px var(--led);
  transition: left .05s ease-out;
}
.fbtn.is-intune .fbtn__mark { background: var(--good); box-shadow: 0 0 10px var(--good); }
.fbtn__note {
  position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%); pointer-events: none;
  padding: 2px 4px; border-radius: 3px; background: color-mix(in srgb, var(--well) 88%, transparent);
  font: 700 .9rem/1 var(--mono); color: var(--ink); white-space: nowrap;
}
.fbtn__note:empty { display: none; }
.fbtn.is-intune .fbtn__note { color: var(--good); }
.fbtn.is-off .fbtn__note { opacity: 0; }
.fbtn__ends { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: center; padding: 0 4px; pointer-events: none; }
.fbtn__ends i { font: 700 11px var(--mono); font-style: normal; color: var(--ink-mute); }
.fbtn__cents { min-width: 0; font: 600 var(--t-xs)/1.2 var(--mono); color: var(--ink-mute); white-space: nowrap; }
.fbtn__cents:empty { display: none; }
.rhy__lamp { fill: transparent; transition: fill .06s linear; }
.rhy__slot.is-on .rhy__lamp { fill: color-mix(in srgb, var(--accent) 30%, transparent); }
.beatbeat.is-bar .rhy__slot.is-on .rhy__lamp { fill: color-mix(in srgb, var(--led) 34%, transparent); }
.beatbeat { padding: 3px 7px; border-radius: 5px; }
.beatnotation { gap: 12px; }
.rhy__slot.is-on { color: var(--ink); filter: none; }
.beatbeat.is-bar .rhy__slot.is-on { color: var(--ink); }
:root[data-theme="walnut"] .beatbeat { color: #6A5A44; }
:root[data-theme="walnut"] .beatbeat.is-current { background: color-mix(in srgb, var(--accent) 20%, transparent); }
:root[data-theme="walnut"] .rhy__slot.is-on .rhy__lamp { fill: #B8934E; }
:root[data-theme="walnut"] .beatbeat.is-bar .rhy__slot.is-on .rhy__lamp { fill: #A8761F; }
:root[data-theme="walnut"] .rhy__slot.is-on { color: #1A1206; }
.fbtn__meter {
  appearance: none; cursor: pointer; padding: 0;
  height: 33px;
}
.fbtn__meter:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fbtn__meter:active { transform: translateY(1px); }
.fbtn.is-off .fbtn__meter { opacity: .8; }
.fbtn.is-off .fbtn__zone, .fbtn.is-off .fbtn__mark, .fbtn.is-off .fbtn__ends, .fbtn.is-off .fbtn__centre { opacity: 0; }
.fbtn__off {
  position: absolute; inset: 0; display: none; place-items: center;
  font: 700 var(--t-xs)/1 var(--display); letter-spacing: .18em; text-transform: uppercase;
  color: var(--lamp-red); text-shadow: 0 0 8px color-mix(in srgb, var(--lamp-red) 55%, transparent);
}
.fbtn.is-off .fbtn__off { display: grid; }
.fb__arps { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-2); }
.fb__seclabel { font: 600 var(--t-xs)/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); }
.fb__legend { align-items: center; }
.fb__arp {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 28px; padding: 0 .5rem;
  border: 1px solid var(--cap-edge); border-radius: 5px;
  background: linear-gradient(180deg, var(--cap-top), var(--cap-bot)); color: var(--cap-ink);
  cursor: pointer;
}
.fb__arp:active { transform: translateY(1px); }
.fb__arp[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--accent); }
.fb__arp:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fb__note.is-arp::after {
  content: ''; position: absolute; inset: 12%; border-radius: 50%; z-index: 1;
  box-shadow: inset 0 0 0 2px var(--accent), 0 0 8px color-mix(in srgb, var(--accent) 55%, transparent);
}
.fb__note.is-arp-root .fb__dot {
  --dot: var(--accent); --dot-ink: var(--accent-ink);
  box-shadow: 0 0 0 2px var(--accent), 0 0 12px color-mix(in srgb, var(--accent) 70%, transparent);
}

.flip { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.flip__plate {
  appearance: none; position: relative; width: 24px; height: 34px; padding: 0; cursor: ns-resize; touch-action: none;
  border: 1px solid var(--cap-edge); border-radius: 5px;
  background: linear-gradient(180deg, var(--cap-top), var(--cap-bot));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .14), 0 2px 0 var(--cap-skirt), 0 3px 6px rgb(0 0 0 / .3);
}
.flip__plate:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.flip__slot {
  position: absolute; left: 50%; top: 7px; bottom: 7px; width: 6px; transform: translateX(-50%);
  border-radius: 3px; background: var(--well); box-shadow: inset 0 1px 2px rgb(0 0 0 / .6);
}
.flip__bat {
  position: absolute; left: 50%; top: 50%; width: 10px; height: 16px; border-radius: 5px 5px 4px 4px;
  background: linear-gradient(90deg, #8d8a84, #f2efe8 45%, #a9a59d);
  box-shadow: 0 1px 2px rgb(0 0 0 / .55), inset 0 -2px 0 rgb(0 0 0 / .18);
  transform: translate(-50%, -50%); transition: transform .08s ease-out;
}
.flip[data-pos="up"] .flip__bat { transform: translate(-50%, -85%) scaleY(1.05); }
.flip[data-pos="down"] .flip__bat { transform: translate(-50%, -15%) scaleY(1.05); border-radius: 4px 4px 5px 5px; }
.flip[data-pos="mid"] .flip__bat { height: 11px; border-radius: 5px; }
.flip__name { font: 600 var(--t-xs)/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); }
.flip__val { font: 600 .62rem/1 var(--mono); color: var(--ink-mute); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .flip__bat { transition: none; } }

.beatrow { display: flex; align-items: stretch; gap: 6px; margin: var(--s-3) 0 var(--s-4); }
.beatrow .beatstage { position: relative; flex: 1 1 auto; min-width: 0; }
.beatrow .beatviz { margin: 0; }
.beatstage.has-routine .beatviz { height: 198px; }
.beatstage .take {
  position: absolute; inset: 0; z-index: 2; margin: 0; padding: 8px 12px 8px;
  display: flex; flex-direction: column; gap: 6px;
  background: none; border: 0; box-shadow: none; border-radius: 6px; pointer-events: none;
}
.beatstage .take__top { margin-bottom: auto; }
/* The layer itself passes clicks through to nothing, but what it holds still answers the pointer for help. */
.beatstage .take > :not(.take__curve) { pointer-events: auto; }
.beatstage .take__stage { padding-top: 0; }
.beatstage .take__stage { position: relative; }
.beatstage .take__curve { inset: auto 0 calc(100% + 1px); height: var(--curve-h, 118px); }
@media (max-width: 760px) { .beatstage { --curve-h: 145px; } }
.beatstage .take__bar { height: 8px; background: color-mix(in srgb, var(--well) 70%, transparent); }
.tbar {
  position: relative; flex: 0 0 2mm; width: 2mm; border-radius: 2mm; overflow: hidden;
  background: var(--well); box-shadow: inset 0 0 0 1px var(--cap-edge), inset 0 2px 4px var(--well-shadow);
}
.tbar__zone { position: absolute; left: 0; right: 0; }
.tbar__zone--early { top: 0; bottom: 50%; background: color-mix(in srgb, var(--early) 16%, transparent); }
.tbar__zone--late { top: 50%; bottom: 0; background: color-mix(in srgb, var(--late) 16%, transparent); }
.tbar__pocket { position: absolute; left: 0; right: 0; top: calc(50% - 8.33%); height: 16.67%; background: color-mix(in srgb, var(--good) 30%, transparent); }
.tbar__centre { position: absolute; left: 0; right: 0; top: calc(50% - 1px); height: 2px; background: var(--good); }
.tbar__hit {
  position: absolute; left: 0; right: 0; height: 3px; margin-top: -1.5px; border-radius: 2px;
  background: var(--ok); box-shadow: 0 0 6px var(--ok); animation: tbar-hit 1.3s var(--ease) forwards;
}
.tbar__hit.is-good { background: var(--good); box-shadow: 0 0 6px var(--good); }
.tbar__hit.is-bad { background: var(--bad); box-shadow: 0 0 6px var(--bad); }
.tbar__hit.is-silent { background: var(--led); box-shadow: 0 0 6px var(--led); }
@keyframes tbar-hit { from { opacity: 1; transform: scaleY(2); } 25% { opacity: 1; transform: none; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tbar__hit { animation: none; } }
.tbar__col { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.tbar__col--quiet .tbar__end { visibility: hidden; }
.tbar__col .tbar { flex: 1 1 auto; }
.tbar__end { font: 700 .56rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase; }
.tbar__end--rush { color: var(--early); }
.tbar__end--drag { color: var(--late); }
.tbar__stats { display: flex; align-items: center; gap: 6px; }
.tbar__stats.is-floating { position: absolute; right: 12px; bottom: 8px; z-index: 3; }
.tstat {
  display: inline-flex; align-items: baseline; gap: 5px; padding: 3px 7px; border-radius: 4px;
  background: color-mix(in srgb, var(--ink-mute) 14%, transparent);
  font: 700 .6rem/1.1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute);
}
.tstat b { font: 700 .74rem/1 var(--mono); letter-spacing: 0; color: var(--ink); text-transform: none; white-space: nowrap; }
.tstat b:empty { display: none; }
.tbar__drop { font: 700 .6rem/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--led); }
.take__metaend { display: flex; align-items: center; gap: 10px; }
.beatstage .take.has-bpms .take__stage { margin-right: 5.8rem; }
.take__bpms { position: absolute; left: calc(100% + 10px); bottom: calc(100% + 1px); width: 5.4rem; height: var(--curve-h, 118px); }
.take__bpm { position: absolute; left: 0; transform: translateY(-50%); font: 600 .78rem/1 var(--sans); white-space: nowrap; font-variant-numeric: tabular-nums; }
.take__bpm--base { color: var(--ink); }
.take__bpm--peak { color: var(--bad); }
.take__bpm--end { color: color-mix(in srgb, var(--ok) 75%, var(--ink)); }
.take__guide { fill: none; stroke: var(--ink-mute); stroke-width: 1; opacity: .45; vector-effect: non-scaling-stroke; }
/* ROCKER — the pair that decides what the panel is showing: the routine list and the practice log.
   A sliding cap in a sunken track, with a lamp that lights when the thing it names is on screen.
   Deliberately unlike the flip switches above, which set how the CLICK sounds rather than what you see. */
.rocker { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.rocker__plate {
  appearance: none; padding: 0; cursor: pointer;
  width: 48px; height: 24px; border-radius: 13px;
  border: 1px solid var(--cap-edge);
  background: var(--well);
  box-shadow: inset 0 2px 5px var(--well-shadow), 0 1px 0 var(--cap-sheen);
}
.rocker__track { position: relative; display: block; width: 100%; height: 100%; }
.rocker__pip {
  position: absolute; top: 50%; right: 8px; width: 6px; height: 6px; margin-top: -3px;
  border-radius: 50%; background: var(--led-off);
  transition: background .12s ease, box-shadow .12s ease;
}
.rocker__cap {
  position: absolute; top: 1px; left: 1px; width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid var(--cap-edge);
  background: radial-gradient(circle at 50% 28%, var(--cap-top), var(--cap-bot));
  box-shadow: 0 1px 0 var(--cap-skirt), 0 2px 5px rgb(0 0 0 / .38), inset 0 1px 0 var(--cap-sheen);
  transition: transform .13s cubic-bezier(.3, .8, .4, 1);
}
.rocker__plate[aria-checked="true"] {
  background: color-mix(in srgb, var(--good) 26%, var(--well));
  border-color: color-mix(in srgb, var(--good) 45%, var(--cap-edge));
}
.rocker__plate[aria-checked="true"] .rocker__cap { transform: translateX(24px); }
.rocker__plate[aria-checked="true"] .rocker__pip {
  right: auto; left: 8px;
  background: var(--good);
  box-shadow: 0 0 6px color-mix(in srgb, var(--good) 70%, transparent);
}
.rocker__plate:active .rocker__cap { box-shadow: 0 1px 0 var(--cap-skirt), 0 1px 2px rgb(0 0 0 / .4); }
.rocker__plate:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.rocker__name { font: 600 var(--t-xs)/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); }
.rocker__state { font: 600 .62rem/1 var(--mono); color: var(--ink-mute); font-variant-numeric: tabular-nums; }
.rocker__plate[aria-checked="true"] ~ .rocker__state { color: color-mix(in srgb, var(--good) 60%, var(--ink)); }
@media (prefers-reduced-motion: reduce) { .rocker__cap, .rocker__pip { transition: none; } }
@media (pointer: coarse) { .rocker__plate { width: 54px; height: 28px; } .rocker__cap { width: 24px; height: 24px; }
  .rocker__plate[aria-checked="true"] .rocker__cap { transform: translateX(26px); } }
/* The header stacks control, name, value — the rocker brings its own, so it needs no unit caption. */
.pedal__headctl .tcbar__unit--routsw { flex-direction: row; }

.chip--progress { align-items: center; }
/* Lit green while the practice log is open. */
.chip--progress.is-on {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--good) 34%, var(--cap-top)),
    color-mix(in srgb, var(--good) 24%, var(--cap-bot)));
  border-color: color-mix(in srgb, var(--good) 55%, var(--cap-edge));
  color: color-mix(in srgb, var(--good) 22%, var(--cap-ink));
  box-shadow: inset 0 1px 0 var(--cap-sheen), 0 0 0 1px color-mix(in srgb, var(--good) 40%, transparent),
              0 0 10px color-mix(in srgb, var(--good) 30%, transparent);
}
.chip--progress.is-on .chip__icon {
  stroke: color-mix(in srgb, var(--good) 80%, var(--ink));
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--good) 55%, transparent));
}

/* The two play buttons sit together, a couple of millimetres apart. */
.tcbar__go { display: inline-flex; align-items: center; gap: 2mm; }
/* The routine's own play button reads green, the plain click stays red. */
.transport--routine .transport__led {
  background: radial-gradient(circle at 35% 30%, rgb(255 255 255 / .7), transparent 55%),
              color-mix(in srgb, var(--good) 40%, #000);
}
.transport--routine[aria-pressed="true"] .transport__led {
  background: radial-gradient(circle at 35% 30%, rgb(255 255 255 / .85), transparent 55%),
              color-mix(in srgb, var(--good) 90%, #000);
  box-shadow: 0 0 7px color-mix(in srgb, var(--good) 70%, transparent);
}
.chip__icon { width: 15px; height: 15px; fill: none; stroke: var(--led); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--led) 60%, transparent)); }
.chip__spark { stroke-width: 1.5; }

.report { margin-top: var(--s-3); padding: var(--s-3); border: 1px solid var(--cap-edge); border-radius: 6px; background: var(--well); }
.report__empty { margin: 0; color: var(--ink-mute); font-size: var(--t-xs); }
.report__weak { font-size: var(--t-xs); color: var(--ink-mute); }
.report__rows { display: grid; gap: 4px; }
.report__row {
  display: grid; grid-template-columns: minmax(8rem, 1.4fr) minmax(9rem, 1fr) 84px 6rem minmax(8rem, 1fr);
  align-items: center; gap: var(--s-3); padding: 6px 8px; border-radius: 4px; background: var(--surface-2);
}
.report__name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.report__best { font-size: var(--t-xs); color: var(--ink-mute); font-variant-numeric: tabular-nums; }
.report__best b { font: 700 .95rem/1 var(--mono); color: var(--ink); }
.report__spark path { fill: none; stroke: var(--led); stroke-width: 1.5; }
.curveknob.knob { flex-direction: row; align-items: center; gap: 6px; }
.curveknob .knob__dial { width: 26px; height: 26px; }
.curveknob .knob__pointer { top: 3px; height: 9px; transform-origin: 50% 10px; }
.curveknob .knob__val { min-width: 2.4rem; font-size: .7rem; color: color-mix(in srgb, var(--led) 55%, var(--ink)); }
.take__curve { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.take__path { fill: none; stroke: var(--ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; opacity: .55; }
.take__fade0 { stop-color: color-mix(in srgb, var(--good) 45%, transparent); }
.take__fade1 { stop-color: var(--good); }
.take__done { fill: none; stroke-width: 5; stroke-linecap: butt; vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--good) 70%, transparent)); }
.take__head { stroke: var(--display-ink); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0; }
.take[data-state="record"] .take__head { opacity: .45; }

.prog__head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3) var(--s-4); margin-bottom: var(--s-3); }
.prog__todaybox { flex: 1 1 22rem; display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.prog__stats { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.prog__flame { width: 1.1rem; height: 1.1rem; margin-right: 2px; vertical-align: -2px; fill: color-mix(in srgb, var(--led) 35%, transparent); stroke: var(--led); stroke-width: 1.6; }
.lvl { flex: 1 1 17rem; display: flex; align-items: center; gap: var(--s-3); min-width: 0; padding: var(--s-2) var(--s-3); border-radius: 8px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--led) 16%, var(--surface-2)), var(--surface-2)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--led) 35%, transparent); }
.lvl__badge { position: relative; flex: none; width: 3.4rem; height: 3.4rem; display: grid; place-items: center; }
.lvl__badge svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: color-mix(in srgb, var(--led) 22%, var(--well)); stroke: var(--led); stroke-width: 1.3; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--led) 45%, transparent)); }
.lvl__badge b { position: relative; font: 700 1.3rem/1 var(--mono); color: var(--ink); margin-top: -2px; }
.lvl__body { display: grid; gap: 5px; min-width: 0; flex: 1; }
.lvl__title { font: 700 var(--t-sm)/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.lvl__bar, .quest__bar, .ach__bar { display: block; height: 6px; border-radius: 3px; background: var(--well); overflow: hidden; }
.lvl__bar span, .quest__bar span, .ach__bar span { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, color-mix(in srgb, var(--led) 55%, transparent), var(--led)); transition: width .6s var(--ease); }
.lvl__xp { font: 600 .66rem/1 var(--mono); color: var(--ink-mute); font-variant-numeric: tabular-nums; }
.quests { margin-bottom: var(--s-4); }
.quests__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin-bottom: 6px; }
.quests__head b { font: 700 var(--t-xs)/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); }
.quests__head span { font: 600 .66rem/1 var(--mono); color: var(--ink-mute); }
.quests__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 6px; }
.quest { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 8px; padding: 8px 10px; border-radius: 6px; background: var(--surface-2); font-size: var(--t-xs); color: var(--ink); }
.quest__check { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--line-2); font: 700 .7rem/1 var(--sans); }
.quest__bar { grid-column: 2 / 3; grid-row: 2; }
.quest__xp { font: 700 .66rem/1 var(--mono); color: var(--ink-mute); }
.quest.is-done { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--good) 60%, transparent); background: color-mix(in srgb, var(--good) 12%, var(--surface-2)); }
.quest.is-done .quest__check { background: var(--good); color: var(--well); box-shadow: none; }
.quest.is-done .quest__text { color: var(--ink-mute); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--good) 70%, transparent); }
.quest.is-done .quest__xp { color: var(--good); }
.prog__ring { flex: none; }
.prog__ringbed { fill: none; stroke: var(--surface-2); stroke-width: 8; }
.prog__ringfill { fill: none; stroke: var(--good); stroke-width: 8; stroke-linecap: round; transition: stroke-dasharray .6s var(--ease); }
.prog__ring.is-done .prog__ringfill { stroke: var(--led); filter: drop-shadow(0 0 4px var(--led)); }
.prog__ringnum { font: 700 20px/1 var(--mono); fill: var(--ink); }
.prog__ringsub { font: 600 9px/1 var(--mono); fill: var(--ink-mute); }
.prog__today { flex: 1 1 16rem; display: grid; gap: 4px; justify-items: start; }
.prog__title { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font: 700 var(--t-xs)/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); }
.prog__score { font: 700 1.9rem/1 var(--mono); color: var(--ink); letter-spacing: 0; }
.prog__pts { font-size: var(--t-xs); }
.prog__badge { padding: 3px 7px; border-radius: 99px; background: var(--led); color: #1a1206; letter-spacing: .06em; box-shadow: 0 0 10px color-mix(in srgb, var(--led) 60%, transparent); }
.prog__cheer { margin: 0; font-size: var(--t-sm); color: var(--ink); }
.prog__stat { display: flex; flex-direction: column; gap: 3px; min-width: 7rem; padding: var(--s-2) var(--s-3); border-radius: 6px; background: var(--surface-2); }
.prog__stat b { font: 700 1.25rem/1 var(--mono); color: var(--ink); }
.prog__stat span { font-size: var(--t-xs); color: var(--ink-mute); }
.prog__stat.is-hot { box-shadow: inset 0 0 0 1px var(--led); }
.prog__stat.is-hot b { color: var(--led); }
.prog__cols { display: grid; grid-template-columns: minmax(15rem, 20rem) 1fr; gap: var(--s-4); align-items: start; margin-bottom: var(--s-4); }
@media (max-width: 720px) { .prog__cols { grid-template-columns: 1fr; } }
.cal__nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-size: var(--t-sm); }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal__dow { text-align: center; font: 600 .6rem/1.6 var(--mono); color: var(--ink-mute); }
.cal__cell {
  appearance: none; aspect-ratio: 1; min-width: 0; padding: 0; border: 0; border-radius: 4px; cursor: pointer;
  font: 600 .68rem/1 var(--mono); color: var(--ink-mute); background: var(--surface-2);
}
.cal__cell.is-empty { background: transparent; cursor: default; }
.cal__cell.is-l1 { background: color-mix(in srgb, var(--good) 28%, var(--surface-2)); color: var(--ink); }
.cal__cell.is-l2 { background: color-mix(in srgb, var(--good) 58%, var(--surface-2)); color: var(--ink); }
.cal__cell.is-l3 { background: var(--good); color: #06140a; box-shadow: 0 0 8px color-mix(in srgb, var(--good) 55%, transparent); }
.cal__cell.is-today { outline: 1px solid var(--led); outline-offset: -1px; }
.cal__cell.is-selected { outline: 2px solid var(--ink); outline-offset: -2px; }
.cal__key { display: flex; align-items: center; gap: 5px; margin-top: 6px; font-size: .62rem; color: var(--ink-mute); }
.cal__key .cal__cell { width: 11px; height: 11px; aspect-ratio: auto; cursor: default; }
.wk__bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; height: 11rem; }
.wk__col { appearance: none; display: grid; grid-template-rows: 1rem 1fr 1rem; gap: 3px; padding: 0; border: 0; background: none; cursor: pointer; min-width: 0; }
.wk__val { font: 700 .7rem/1 var(--mono); color: var(--ink); text-align: center; }
.wk__bar { position: relative; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.wk__bar span { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 4px; background: color-mix(in srgb, var(--good) 70%, var(--surface-2)); transition: height .5s var(--ease); }
.wk__col.is-done .wk__bar span { background: var(--good); box-shadow: 0 0 8px color-mix(in srgb, var(--good) 50%, transparent); }
.wk__col.is-selected .wk__bar { box-shadow: inset 0 0 0 1px var(--ink); }
.wk__day { font: 600 .62rem/1 var(--mono); color: var(--ink-mute); text-align: center; }
.prog__day { margin-bottom: var(--s-3); }
.prog__dayhead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin-bottom: 6px; }
.prog__dayhead span { font: 600 var(--t-xs)/1 var(--mono); color: var(--ink-mute); }
.prog__rows { display: grid; gap: 4px; }
.prog__row {
  display: grid; grid-template-columns: minmax(9rem, 1.2fr) 4rem minmax(5.5rem, .7fr) minmax(12rem, 1.5fr) minmax(12rem, 1.4fr) minmax(7rem, .9fr) 2.6rem;
  align-items: center; gap: var(--s-3); padding: 7px 8px; border-radius: 4px; background: var(--surface-2); font-size: var(--t-xs);
}
.prog__more { display: flex; flex-wrap: wrap; gap: 4px; color: var(--ink-mute); }
.prog__more span { padding: 2px 6px; border-radius: 4px; background: color-mix(in srgb, var(--well) 55%, transparent); color: var(--ink); font: 600 .64rem/1.2 var(--mono); white-space: nowrap; }
.grade { flex: none; display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; margin-right: 6px; border-radius: 4px; font: 800 .75rem/1 var(--mono); color: #14100b; vertical-align: middle; }
.grade--S { background: var(--led); box-shadow: 0 0 8px color-mix(in srgb, var(--led) 60%, transparent); }
.grade--A { background: var(--good); }
.grade--B { background: color-mix(in srgb, var(--good) 55%, var(--ink-mute)); }
.grade--C { background: var(--ink-mute); }
.grade--D { background: color-mix(in srgb, var(--bad) 75%, var(--ink-mute)); }
@media (max-width: 1100px) { .prog__row { grid-template-columns: 1fr auto; } .prog__more, .prog__timing { grid-column: 1 / -1; } }
.prog__name { display: flex; align-items: center; min-width: 0; font-weight: 600; font-size: var(--t-sm); }
.prog__name > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prog__time { font: 700 .8rem/1 var(--mono); color: var(--ink); }
.prog__tag { display: inline-block; padding: 2px 6px; border-radius: 99px; border: 1px solid var(--led); color: color-mix(in srgb, var(--led) 55%, var(--ink)); font: 600 .6rem/1 var(--mono); }
.prog__muted { color: var(--ink-mute); }
.prog__timing b { color: var(--ink); }
.prog__best { color: var(--ink-mute); }
.prog__pb { margin-left: 4px; padding: 2px 6px; border-radius: 99px; background: var(--led); color: #1a1206; font: 700 .58rem/1 var(--mono); text-transform: uppercase; }
.prog__pointsn { font: 700 .8rem/1 var(--mono); color: var(--good); text-align: right; }
.prog__all summary { cursor: pointer; font: 700 var(--t-xs)/1.6 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 6px; }
.report__row { grid-template-columns: minmax(8rem, 1.4fr) minmax(6rem, .8fr) minmax(9rem, 1fr) 84px minmax(8rem, 1fr); }
/* The narrow layouts come after every base definition of this grid, or the
   later rule would quietly win back the five columns on a phone. */
@media (max-width: 720px) { .report__row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .report__row { grid-template-columns: 1fr; } }
.prog__curve { display: flex; flex-wrap: wrap; gap: 4px; }
.report__row.is-quiet { opacity: .55; }

.prog__ach { margin-bottom: var(--s-3); }
.prog__ach summary { cursor: pointer; font: 700 var(--t-xs)/1.6 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 6px; }
.ach { --bronze: #C8874A; --silver: #B9C3CF; --gold: #F0BE45; --platinum: #8FE3DA;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: 6px; }
.ach__card { --metal: var(--line-2); display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; background: var(--surface-2); min-width: 0; }
.ach__card.is-t1 { --metal: var(--bronze); }
.ach__card.is-t2 { --metal: var(--silver); }
.ach__card.is-t3 { --metal: var(--gold); }
.ach__card.is-t4, .ach__card.is-single.is-t1 { --metal: var(--platinum); }
.ach__medal { flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--metal) 70%, #fff), var(--metal) 60%, color-mix(in srgb, var(--metal) 55%, #000));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--metal) 60%, #000), 0 0 10px color-mix(in srgb, var(--metal) 35%, transparent); }
.ach__icon { width: 1.35rem; height: 1.35rem; fill: none; stroke: #1b1409; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ach__card.is-t0 .ach__medal { background: var(--well); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.ach__card.is-t0 .ach__icon { stroke: var(--ink-mute); opacity: .6; }
.ach__card.is-t0 .ach__name { color: var(--ink-mute); }
.ach__body { display: grid; gap: 3px; min-width: 0; flex: 1; }
.ach__name { font: 700 var(--t-sm)/1.1 var(--sans); color: var(--ink); }
.ach__tier { display: flex; align-items: center; gap: 6px; font: 700 .6rem/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--metal); }
.ach__card.is-t0 .ach__tier { color: var(--ink-mute); }
.ach__pips { display: inline-flex; gap: 2px; }
.ach__pips i { width: 6px; height: 6px; border-radius: 50%; background: var(--well); box-shadow: inset 0 0 0 1px var(--line-2); }
.ach__pips i.is-on { background: var(--metal); box-shadow: none; }
.ach__bar span { background: var(--led); }
.ach__next { font: 600 .62rem/1.25 var(--mono); color: var(--ink-mute); font-variant-numeric: tabular-nums; }

.ptoasts { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 1000; display: grid; gap: 8px; justify-items: center; pointer-events: none; width: min(92vw, 24rem); }
.ptoast { display: grid; gap: 2px; justify-items: center; width: 100%; padding: 10px 16px; border-radius: 10px; text-align: center;
  background: color-mix(in srgb, var(--well) 92%, transparent); color: var(--ink); box-shadow: inset 0 0 0 1px var(--led), 0 10px 30px rgb(0 0 0 / .45), 0 0 24px color-mix(in srgb, var(--led) 30%, transparent);
  animation: ptoast-in .45s var(--ease) both; }
.ptoast__kind { font: 700 .62rem/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--led); }
.ptoast b { font: 700 var(--t-sm)/1.2 var(--sans); }
.ptoast--quest { box-shadow: inset 0 0 0 1px var(--good), 0 10px 30px rgb(0 0 0 / .45); }
.ptoast--quest .ptoast__kind { color: var(--good); }
.ptoast.is-leaving { opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s; }
@keyframes ptoast-in { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ptoast { animation: none; } .ptoast.is-leaving { transition: none; } }

.loopcard:not(.is-editing) { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.loopcards.is-sorting { scroll-snap-type: none; cursor: grabbing; }
.loopcard.is-dragging { position: relative; z-index: 5; cursor: grabbing; opacity: .92; box-shadow: 0 12px 28px rgb(0 0 0 / .45), inset 0 0 0 1px var(--accent); transition: none; }
.loopcard.is-drop-before { box-shadow: -6px 0 0 -2px var(--led); }
.loopcard.is-drop-after { box-shadow: 6px 0 0 -2px var(--led); }
[data-chordpick] .picker__group:first-child { padding: 6px; margin: -2px -2px 4px; border-radius: 6px; background: color-mix(in srgb, var(--led) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--led) 30%, transparent); }
[data-chordpick] .picker__group:first-child .picker__glabel { color: var(--led); }

/* One height for every control in both racks, so a row of pickers, fields and buttons shares top and bottom edges. */
:root { --ctl-h: 30px; }
@media (pointer: coarse) { :root { --ctl-h: 40px; } }
.tcbar .picker__btn, .tcbar .chip, .tcbar .minitog, .tcbar .input {
  box-sizing: border-box; height: var(--ctl-h); min-height: var(--ctl-h);
}
.tcbar .chip, .tcbar .minitog { display: inline-flex; align-items: center; }
.tcbar .picker { display: flex; }
.tcbar .transport { margin-block: -5px; }

/* On the cream faceplate the display sits on light wood: the curve and its labels need the darker end of the palette. */
:root[data-theme="walnut"] .take__path { stroke: var(--ink); opacity: .45; }
:root[data-theme="walnut"] .take__bpm--peak { color: color-mix(in srgb, var(--bad) 70%, #000); }
:root[data-theme="walnut"] .take__done { stroke: color-mix(in srgb, var(--good) 85%, #000); }
:root[data-theme="walnut"] .tbar__end--rush { color: color-mix(in srgb, var(--early) 55%, #000); }
:root[data-theme="walnut"] .tbar__end--drag { color: color-mix(in srgb, var(--late) 55%, #000); }
:root[data-theme="walnut"] .ach__tier { color: color-mix(in srgb, var(--metal) 45%, #2B2117); }
:root[data-theme="walnut"] .ach__card.is-t0 .ach__tier { color: var(--ink-mute); }
:root[data-theme="walnut"] .ach__icon { stroke: #2B2117; }

/* On the cream faceplate a pale cap on a pale plate all but disappeared: the caps keep their shape
   but take a firmer edge and skirt, and the moving parts go dark instead of pale-on-pale. */
:root[data-theme="walnut"] .knob__dial {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .5), 0 2px 0 var(--cap-skirt), 0 3px 7px rgb(60 40 20 / .38);
}
:root[data-theme="walnut"] .knob__dial::after { box-shadow: inset 0 0 0 1px rgb(43 33 23 / .38); }
:root[data-theme="walnut"] .knob__pointer {
  background: #35260F; box-shadow: 0 0 0 1px rgb(255 255 255 / .35);
}
:root[data-theme="walnut"] .knob__name,
:root[data-theme="walnut"] .flip__name { color: var(--ink-body); }
:root[data-theme="walnut"] .knob__val,
:root[data-theme="walnut"] .flip__val { color: var(--ink); }
:root[data-theme="walnut"] .flip__slot {
  background: #B6A47F; box-shadow: inset 0 1px 3px rgb(43 33 23 / .65);
}
:root[data-theme="walnut"] .flip__bat {
  background: linear-gradient(90deg, #3C3226, #7E7060 45%, #4A3F30);
  box-shadow: 0 1px 2px rgb(43 33 23 / .6), inset 0 -2px 0 rgb(0 0 0 / .3);
}
:root[data-theme="walnut"] .minitog { border-color: var(--cap-edge); }
:root[data-theme="walnut"] .fb__shape,
:root[data-theme="walnut"] .picker__pop {
  background: #FBF7EE; color: var(--ink); border-color: var(--cap-edge);
}

/* Windows High Contrast replaces every colour with the system pair, which would flatten exactly the
   things that carry meaning here: which cell is lit, how loud the input is, how far a bar has filled.
   Those keep their own colours; everything else takes the system palette as it should. */
@media (forced-colors: active) {
  .beatcell, .beatcell.is-on, .beatbeat, .beatbeat.is-current,
  .vu__fill, .take__fill, .loopcard__fill, .take__done, .take__head,
  .tbar__fill, .tbar__hit, .tbar__col, .cal__cell, .ach__icon, .ach__tier,
  .knob__pointer, .flip__bat, .rhy__lamp, .led {
    forced-color-adjust: none;
  }
  /* And what the system does draw needs an edge it can actually show. */
  .beatcell, .cal__cell, .loopcard, .chip, .picker__btn, .picker__pop, .ach__card {
    border: 1px solid CanvasText;
  }
  :focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
}

/* ── ALUMINIUM ────────────────────────────────────────────────────────────────
   Machined metal and glass. Three ideas do the work: light falls from above, so
   every raised face is bright at the top and every recess is dark at the top;
   edges are hairlines, not borders; and anything that floats is frosted glass
   over what is behind it rather than a solid slab. */

:root[data-theme="aluminium"] body { background-attachment: fixed; }

/* Panels: a brushed plate with a rim light along the top edge. */
:root[data-theme="aluminium"] .pedal {
  border-color: rgb(255 255 255 / .8);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .95),
    inset 0 0 0 1px rgb(16 24 40 / .06),
    0 1px 2px rgb(16 24 40 / .07),
    0 18px 40px rgb(16 24 40 / .12);
}

/* The bar at the top is glass: it blurs the page moving under it. */
:root[data-theme="aluminium"] .masthead {
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom-color: rgb(16 24 40 / .10);
  box-shadow: 0 1px 0 rgb(255 255 255 / .7), 0 1px 12px rgb(16 24 40 / .08);
}
/* On glass the help bubble is frosted white, not the dark plate the other themes use. */
:root[data-theme="aluminium"] .helper:not(.is-idle) .helper__text {
  background: rgb(255 255 255 / .88);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  color: var(--ink);
  border-color: rgb(16 24 40 / .10);
  box-shadow: 0 8px 26px rgb(16 24 40 / .18);
}

/* Menus and the voicing bubbles float as frosted glass. */
:root[data-theme="aluminium"] .picker__pop,
:root[data-theme="aluminium"] .fb__shape,
:root[data-theme="aluminium"] .acct__pop {
  background: rgb(252 253 254 / .9);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border-color: rgb(16 24 40 / .10);
  box-shadow: 0 10px 34px rgb(16 24 40 / .18);
}

/* Caps, chips and transports: a milled face, a hairline rim, a thin shadow under. */
:root[data-theme="aluminium"] .chip,
:root[data-theme="aluminium"] .transport,
:root[data-theme="aluminium"] .fb__pos,
:root[data-theme="aluminium"] .fb__arp,
:root[data-theme="aluminium"] .minitog,
:root[data-theme="aluminium"] .picker__btn {
  background: linear-gradient(180deg, #FFFFFF, #EEF1F5 52%, #E2E6EC);
  border-color: rgb(16 24 40 / .14);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .95), 0 1px 1px rgb(16 24 40 / .10), 0 2px 6px rgb(16 24 40 / .10);
}
:root[data-theme="aluminium"] .chip:active,
:root[data-theme="aluminium"] .transport:active {
  background: linear-gradient(180deg, #E8ECF1, #F3F5F8);
  box-shadow: inset 0 2px 4px rgb(16 24 40 / .16);
}

/* Knobs: a turned-aluminium disc — concentric sheen, a bright rim, a machined dimple. */
:root[data-theme="aluminium"] .knob__dial {
  background:
    conic-gradient(from 210deg, #FFFFFF, #E6EAEF 25%, #FBFCFD 50%, #DFE4EA 75%, #FFFFFF),
    radial-gradient(circle at 50% 28%, #FFFFFF, #E4E8EE);
  border-color: rgb(16 24 40 / .16);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .95),
    inset 0 -1px 2px rgb(16 24 40 / .10),
    0 1px 1px rgb(16 24 40 / .12),
    0 3px 8px rgb(16 24 40 / .14);
}
:root[data-theme="aluminium"] .knob__dial::after {
  inset: 6px; background: radial-gradient(circle at 50% 30%, #FDFDFE, #E9EDF2);
  box-shadow: inset 0 0 0 1px rgb(16 24 40 / .08), inset 0 1px 2px rgb(16 24 40 / .10);
}
:root[data-theme="aluminium"] .knob__pointer {
  background: var(--accent); box-shadow: 0 0 0 1px rgb(255 255 255 / .6);
}

/* Flip switches: a bright anodised bat in a dark slot. */
:root[data-theme="aluminium"] .flip__plate {
  background: linear-gradient(180deg, #FFFFFF, #E9EDF2);
  border-color: rgb(16 24 40 / .16);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .95), 0 1px 1px rgb(16 24 40 / .12), 0 3px 8px rgb(16 24 40 / .12);
}
:root[data-theme="aluminium"] .flip__slot {
  background: #C8CFD8; box-shadow: inset 0 1px 3px rgb(16 24 40 / .45);
}
:root[data-theme="aluminium"] .flip__bat {
  background: linear-gradient(90deg, #A9B2BD, #FDFDFE 45%, #C3CAD3);
  box-shadow: 0 1px 2px rgb(16 24 40 / .35), inset 0 -2px 0 rgb(16 24 40 / .10);
}

/* The rocker pair reads as a polished slider in a glass channel. */
:root[data-theme="aluminium"] .rocker__plate {
  background: #D7DCE4;
  border-color: rgb(16 24 40 / .14);
  box-shadow: inset 0 2px 4px rgb(16 24 40 / .22), inset 0 -1px 0 rgb(255 255 255 / .6);
}
:root[data-theme="aluminium"] .rocker__plate[aria-checked="true"] {
  background: linear-gradient(180deg, #34C759, #24A548);
  border-color: rgb(16 24 40 / .12);
}
:root[data-theme="aluminium"] .rocker__cap {
  background: radial-gradient(circle at 50% 26%, #FFFFFF, #EDF0F4);
  border-color: rgb(16 24 40 / .12);
  box-shadow: 0 1px 2px rgb(16 24 40 / .28), 0 3px 8px rgb(16 24 40 / .20), inset 0 1px 0 #FFFFFF;
}
:root[data-theme="aluminium"] .rocker__plate[aria-checked="true"] .rocker__pip {
  background: #FFFFFF; box-shadow: 0 0 6px rgb(255 255 255 / .8);
}

/* Recessed things — wells, fields, the beat view — are cut INTO the plate. */
:root[data-theme="aluminium"] .beatviz,
:root[data-theme="aluminium"] .input,
:root[data-theme="aluminium"] .tcbar {
  box-shadow: inset 0 1px 3px rgb(16 24 40 / .14), inset 0 0 0 1px rgb(16 24 40 / .05), 0 1px 0 rgb(255 255 255 / .8);
}
:root[data-theme="aluminium"] .loopcard {
  background: linear-gradient(180deg, #FFFFFF, #F2F4F7);
  border-color: rgb(16 24 40 / .10);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .9), 0 1px 2px rgb(16 24 40 / .08), 0 8px 20px rgb(16 24 40 / .10);
}

/* The loop's tape bar: a milled recess with a green fill, not the red tape of the amp themes. */
:root[data-theme="aluminium"] .loopcard__bar {
  background: #E3E7EC; box-shadow: inset 0 0 0 1px rgb(16 24 40 / .07);
}
:root[data-theme="aluminium"] .loopcard__fill { background: linear-gradient(90deg, #5AC776, #24A548); }

/* Focus reads as a soft halo around the control, the way a glass interface does it. */
:root[data-theme="aluminium"] :is(button, input, .knob__dial, .flip__plate, .rocker__plate):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
  box-shadow: 0 0 0 5px rgb(10 132 255 / .22);
}

/* A hairline of light along the top of the rack strip, as on a milled edge. */
:root[data-theme="aluminium"] .rack__row {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .95), inset 0 -1px 0 rgb(16 24 40 / .10), 0 2px 8px rgb(16 24 40 / .10);
}

/* The scale's own play button: a square key beside the menu, its words stacked to fit. */
.fb__playunit { flex: none; }
.fb__play {
  appearance: none; cursor: pointer;
  width: var(--ctl-h, 32px); height: var(--ctl-h, 32px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  padding: 0; border: 1px solid var(--cap-edge); border-radius: 6px;
  background: linear-gradient(180deg, var(--cap-top), var(--cap-bot)); color: var(--cap-ink);
  box-shadow: inset 0 1px 0 var(--cap-sheen), 0 2px 0 var(--cap-skirt), 0 3px 6px rgb(0 0 0 / .28);
}
.fb__play__glyph { font-size: .58rem; line-height: 1; color: var(--led); }
.fb__play__word { font: 700 .42rem/1.05 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.fb__play:active { transform: translateY(2px); box-shadow: inset 0 2px 5px rgb(0 0 0 / .35); }
.fb__play[aria-pressed="true"] {
  background: var(--well); color: var(--lit-ink); box-shadow: inset 0 2px 6px var(--well-shadow);
}
.fb__play:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The readout sits on the panel's title line, and gives way before the controls do. */
.pedal__id .fb__now {
  display: flex; align-items: baseline; gap: var(--s-2);
  min-width: 0; flex: 1 1 auto; margin: 0;
  padding-left: var(--s-3); border-left: 1px solid var(--line);
}
.pedal__id .fb__now b { font-size: 1rem; }
.pedal__id .fb__now .fb__summary {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 900px) { .pedal__id .fb__now { display: none; } }

/* ── PHRASES ──────────────────────────────────────────────────────────────────
   The recorder and the saved phrases, under the fretboard's controls. */
.fbrec {
  margin: var(--s-3) 0; padding: var(--s-3);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r);
}
.fbrec__row { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.fbrec__rec {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: var(--ctl-h, 32px); padding: 0 .8rem;
  border: 1px solid var(--cap-edge); border-radius: 6px;
  background: linear-gradient(180deg, var(--cap-top), var(--cap-bot)); color: var(--cap-ink);
  font: 700 var(--t-xs)/1 var(--display); letter-spacing: .08em; text-transform: uppercase;
}
.fbrec__dot {
  width: 11px; height: 11px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgb(255 255 255 / .6), transparent 55%),
              color-mix(in srgb, var(--lamp-red) 40%, #000);
}
.fbrec__rec[aria-pressed="true"] .fbrec__dot {
  background: radial-gradient(circle at 35% 30%, rgb(255 255 255 / .85), transparent 55%), var(--lamp-red);
  box-shadow: 0 0 8px color-mix(in srgb, var(--lamp-red) 75%, transparent);
  animation: recpulse 1.1s ease-in-out infinite;
}
@keyframes recpulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .fbrec__rec[aria-pressed="true"] .fbrec__dot { animation: none; } }
.fbrec.is-recording { border-color: color-mix(in srgb, var(--lamp-red) 45%, var(--line)); }
.fbrec__count { font: 600 var(--t-xs)/1 var(--mono); color: var(--ink-mute); margin-left: auto; }
.fbrec__list { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; gap: 4px; }
.fbrec__empty { margin: var(--s-3) 0 0; font-size: var(--t-xs); color: var(--ink-mute); }

.fbrow {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface);
}
.fbrow.is-playing { border-color: var(--led); box-shadow: 0 0 0 1px var(--led); }
.fbrow__n { font: 700 var(--t-xs)/1 var(--mono); color: var(--ink-mute); min-width: 1.2rem; }
.fbrow__name { flex: 0 1 12rem; min-width: 0; }
.fbrow__sum { flex: 1 1 auto; min-width: 0; font-size: var(--t-xs); color: var(--ink-mute);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fbrow__play, .fbrow__del { flex: none; }

/* The click's own controls inside the phrase bar's little metronome menu. */
.fbmet { display: flex; align-items: flex-end; gap: var(--s-4); flex-wrap: wrap; }
.fbmet__unit { display: flex; flex-direction: column; gap: 3px; }
.fbmet__bpm { width: 4.5rem; }

/* While a phrase is being clicked in, the neck says so. */
.fb.is-capturing .fb__neck { box-shadow: 0 0 0 2px color-mix(in srgb, var(--lamp-red) 55%, transparent); }
.fbmet__icon { width: 14px; height: 14px; fill: none; stroke: var(--led); stroke-width: 1.8; stroke-linejoin: round; }
.fbrec__met .picker__btn { display: inline-flex; align-items: center; gap: .35rem; }
.fbmet__face { font: 600 var(--t-xs)/1 var(--mono); }

/* A note that belongs to the phrase being recorded or played — lit over anything else on the neck. */
.fb__note.is-phrase .fb__dot {
  --dot: var(--phrase-dot); --dot-ink: var(--phrase-ink);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--phrase-dot) 70%, #000),
              0 0 12px color-mix(in srgb, var(--phrase-dot) 75%, transparent),
              0 1px 2px rgb(0 0 0 / .45);
}
.fb__note.is-phrase.is-sounding .fb__dot { transform: scale(1.14); }
.fbmet__match { align-self: flex-end; }

/* The recorder's controls sit in the control bar, beside the scale. */
.fbrec__unit .fbrec__row { display: inline-flex; align-items: center; gap: var(--s-2); }
.tcbar__unit--routsw { flex: none; }
.fbrow__seq { flex: none; }
.fbrow__seq .picker__btn--text { min-width: 7rem; }