: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: #5A5F67;   /* 4.5:1 on the surfaces and the controls (was #6B7078) */

  --accent:      #0066CC;   /* small text in the accent reads 4.5:1 (was #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:  #1A6FD6;
  --acap-bot:  #0057BD;
  --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:   #5A5F67;
  --head-accent: #0066CC;
  --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: #1A0E00;
  --pos2: #00767A; --pos2-ink: #FFFFFF;
  --pos3: #8A40C8; --pos3-ink: #FFFFFF;
  --pos4: #2B7D3E; --pos4-ink: #FFFFFF;

  --held-ink: #00122E;

  /* No condensed uppercase here: the labels are set the way a machined panel is etched. */
  --display: "Barlow Condensed", "Oswald", "Inter", system-ui, sans-serif;
  --display-tracking: .06em;
  --display-case: uppercase;
}

: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: .06em;
  --display-case: uppercase;
}

/* ── MORE THEMES ── Same tokens, same fonts as Console, so every control is the same size in every theme. */
:root[data-theme="military"] {
  color-scheme: dark;
  --bg: #12140D; --surface: #1C2014; --surface-deep: #15180F; --surface-2: #232819;
  --line: #333924; --line-2: #4A5236;
  --ink: #E4E0C8; --ink-body: #C9C4A6; --ink-mute: #9C977C;
  --accent: #D98E2E; --accent-2: #E9A852; --accent-ink: #1A1004; --accent-wash: #2C2312;
  --led: #A9D35F; --led-off: #343A26; --led-glow: 0 0 8px rgba(169,211,95,.6);
  --good: #8FC46A; --ok: #E3B04B; --bad: #E2694F; --early: #7FB0C9; --late: #D58BB3;
  --meter-bed: #080906;
  --shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 8px 22px rgba(0,0,0,.55);
  --rail: linear-gradient(180deg, #383F28, #2A301E 55%, #20251A);
  --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: #4A5232; --cap-bot: #2E3320; --cap-edge: #12140C; --cap-sheen: rgba(240,235,200,.14); --cap-skirt: #0B0C07; --cap-ink: #E4E0C8;
  --acap-top: #9A5514; --acap-bot: #6A3A0E; --acap-edge: #3E2208; --acap-ink: #FFF2DE;
  --well: #0D0F09; --well-shadow: rgba(0,0,0,.65); --lit-ink: #C8E07A; --field: #0F110B;
  --display-ink: #C8E07A; --readout-glow: rgba(200,224,122,.3);
  --head-bg: linear-gradient(180deg, #1B1F13, #12140D); --head-line: #333924; --head-ink: #E4E0C8; --head-mute: #9C977C; --head-accent: #D98E2E;
  --lamp-green: #8FC46A; --lamp-amber: #E3B04B; --lamp-red: #E2694F;
  --neck: #1D1A12; --fret-wire: #8A8468; --string: #C2BCA0; --inlay: rgba(228,224,200,.18); --nut: #DCD6BA;
  --scale-dot: #C9C4A6; --scale-ink: #1C2014; --root-dot: #D98E2E; --root-ink: #1A1004;
  --pos1: #E3B04B; --pos1-ink: #1A1004; --pos2: #6FB7A8; --pos2-ink: #061714;
  --pos3: #C98BC0; --pos3-ink: #1C0A1A; --pos4: #A9D35F; --pos4-ink: #0F1806;
  --held-ink: #0F1806;
  --display: "Barlow Condensed", "Oswald", "Inter", system-ui, sans-serif;
  --display-tracking: .06em;
  --display-case: uppercase;
}
:root[data-theme="cyber"] {
  color-scheme: dark;
  --bg: #07060A; --surface: #110F16; --surface-deep: #0B0A0F; --surface-2: #18151F;
  --line: #2A2433; --line-2: #3E3550;
  --ink: #F2F0E6; --ink-body: #C9D6D8; --ink-mute: #8C98A6;
  --accent: #FCEE0A; --accent-2: #FFF56B; --accent-ink: #120F00; --accent-wash: #2A2700;
  --led: #00F0FF; --led-off: #262033; --led-glow: 0 0 8px rgba(0,240,255,.7);
  --good: #3CFFB0; --ok: #FCEE0A; --bad: #FF003C; --early: #00C8FF; --late: #FF4FD8;
  --meter-bed: #030205;
  --shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 8px 22px rgba(0,0,0,.55);
  --rail: linear-gradient(180deg, #221D2B, #18141F 55%, #110E16);
  --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: #2A2533; --cap-bot: #16131C; --cap-edge: #050407; --cap-sheen: rgba(0,240,255,.14); --cap-skirt: #030205; --cap-ink: #F2F0E6;
  --acap-top: #FF003C; --acap-bot: #A8002A; --acap-edge: #4D0013; --acap-ink: #14000A;
  --well: #050408; --well-shadow: rgba(0,0,0,.65); --lit-ink: #00F0FF; --field: #08070B;
  --display-ink: #00F0FF; --readout-glow: rgba(0,240,255,.35);
  --head-bg: linear-gradient(180deg, #0E0C12, #07060A); --head-line: #2A2433; --head-ink: #F2F0E6; --head-mute: #8C98A6; --head-accent: #FCEE0A;
  --lamp-green: #3CFFB0; --lamp-amber: #FCEE0A; --lamp-red: #FF003C;
  --neck: #0D0B12; --fret-wire: #4B5566; --string: #9FB2C2; --inlay: rgba(0,240,255,.18); --nut: #D7DCE3;
  --scale-dot: #00F0FF; --scale-ink: #00181A; --root-dot: #FCEE0A; --root-ink: #120F00;
  --pos1: #FF4F6E; --pos1-ink: #1A0007; --pos2: #00F0FF; --pos2-ink: #00181A;
  --pos3: #C77DFF; --pos3-ink: #12001F; --pos4: #3CFFB0; --pos4-ink: #00180D;
  --held-ink: #00181A;
  --display: "Barlow Condensed", "Oswald", "Inter", system-ui, sans-serif;
  --display-tracking: .06em;
  --display-case: uppercase;
}
:root[data-theme="matte"] {
  color-scheme: dark;
  --bg: #0C0C0C; --surface: #161616; --surface-deep: #101010; --surface-2: #1E1E1E;
  --line: #2A2A2A; --line-2: #3C3C3C;
  --ink: #ECECEC; --ink-body: #C8C8C8; --ink-mute: #8E8E8E;
  --accent: #C9CDD3; --accent-2: #E1E4E8; --accent-ink: #0C0C0C; --accent-wash: #262626;
  --led: #E6E8EB; --led-off: #2E2E2E; --led-glow: 0 0 8px rgba(230,232,235,.55);
  --good: #7CC88A; --ok: #E0B54C; --bad: #E86A5F; --early: #7FB0D8; --late: #D88BB8;
  --meter-bed: #050505;
  --shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 8px 22px rgba(0,0,0,.55);
  --rail: linear-gradient(180deg, #262626, #1B1B1B 55%, #141414);
  --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: #2C2C2C; --cap-bot: #191919; --cap-edge: #050505; --cap-sheen: rgba(255,255,255,.10); --cap-skirt: #040404; --cap-ink: #ECECEC;
  --acap-top: #8B9097; --acap-bot: #5E6268; --acap-edge: #2E3034; --acap-ink: #0C0C0C;
  --well: #080808; --well-shadow: rgba(0,0,0,.65); --lit-ink: #E6E8EB; --field: #0A0A0A;
  --display-ink: #E6E8EB; --readout-glow: rgba(230,232,235,.25);
  --head-bg: linear-gradient(180deg, #141414, #0C0C0C); --head-line: #2A2A2A; --head-ink: #ECECEC; --head-mute: #8E8E8E; --head-accent: #C9CDD3;
  --lamp-green: #7CC88A; --lamp-amber: #E0B54C; --lamp-red: #E86A5F;
  --neck: #E3C48E; --fret-wire: #A9A9A9; --string: #6E6A63; --inlay: rgba(20,20,20,.55); --nut: #F5F0E6;
  --scale-dot: #1A1A1A; --scale-ink: #F0F0F0; --root-dot: #B33A2E; --root-ink: #FFFFFF;
  --pos1: #B33A2E; --pos1-ink: #FFFFFF; --pos2: #1F5F8B; --pos2-ink: #FFFFFF;
  --pos3: #6A3D8F; --pos3-ink: #FFFFFF; --pos4: #2E7D4F; --pos4-ink: #FFFFFF;
  --held-ink: #0C0C0C;
  --display: "Barlow Condensed", "Oswald", "Inter", system-ui, sans-serif;
  --display-tracking: .06em;
  --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: 11px; --t-sm: 13px; --t-base: 15px;   /* on the type scale (10 · 11 · 13 · 15 · 21 · 34+) */
  --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;
  /* The notch and the home bar, when the page runs edge to edge (the iPhone/iPad app, landscape Safari). Zero elsewhere.
     The top inset belongs to the masthead, which paints behind the status bar and stays there when it sticks. */
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
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; padding-top: env(safe-area-inset-top); }
.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); }
/* The wordmark: a signage face, and a Bub that stands taller than the bar without making it taller —
   the negative margin lets him hang over the edges of a 62px masthead. */
.masthead .wordmark { font: 400 26px/1 "Bungee", var(--display); letter-spacing: .01em; gap: var(--s-2); }
.masthead .wordmark em { margin-left: .12em; }
.logo--head { width: 58px; height: 58px; margin-block: -10px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35));
  transition: transform .35s var(--ease); transform-origin: 50% 90%; }
.wordmark:hover .logo--head { transform: rotate(-8deg) scale(1.06); }
@media (max-width: 780px) {
  .masthead .wordmark { font-size: 21px; }
  .logo--head { width: 48px; height: 48px; margin-block: -6px; }
}

.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);
}
/* The live count keeps its dot and drops its words first, so the bigger wordmark keeps the bar one row high. */
@media (max-width: 1000px) {
  .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);   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);  }
.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; }

.pedal:where([data-bp~="max640"]),
.pedal--sm:where([data-bp~="max640"]),
.pedal--lg:where([data-bp~="max640"]) { grid-column: span 1; }

.pedal.is-on { border-color: var(--accent); }
.pedal.is-dragging { opacity: .55; }

.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; }

/* What the tool is saying right now reads under the line that says what the tool is. */
.pedal__lines { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 0 1 auto; }
.pedal__status {
   
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

:where(.pedal[data-bp~="max900"]) .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; }

:where(.pedal[data-bp~="max480"]) .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;  }
.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__art {   flex: none; }

.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[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);
   
   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;
   
   color: var(--ink);
}
.picker__opt:hover { border-color: var(--line-2); }
.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: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);
}

.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; }

.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%;   
  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);  }
.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-backdrop:not(.is-chord) .fb__dot { opacity: .34; transform: scale(.8); box-shadow: none; }
.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::before {
  content: ""; position: absolute; left: 50%; top: 50%; z-index: 1;
     border-radius: 50%;
  border: 2px solid var(--accent); 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__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__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);
  
}
.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); }

@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__play { font-family: var(--display); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.fb__note.is-sounding .fb__dot {
  
  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. Its menus open over
   the beat view below (whose own layers sit at 1), not under it. */
.tcbar.is-driven { position: relative; z-index: 5; }
.met .tcbar__unit--routines { flex-direction: row; align-items: center; }

:where(.pedal[data-bp~="max760"]) .met .tcbar__unit--routines { flex: 1 1 100%; flex-wrap: wrap; margin-left: 0; }
:where(.pedal[data-bp~="max760"]) .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 { pointer-events: none; }
.knob.is-dead .knob__dial { opacity: .45; }
:root[data-theme] .knob.is-dead .knob__val { color: var(--ink-mute); }
.rig__slider:disabled { opacity: .45; cursor: not-allowed; }
.met__routines { margin: var(--s-3) 0; }
.met__seclabel {   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-a2 { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ink) 55%, var(--ink-mute)); }
.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[data-lvl="3"] { 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[data-lvl="3"] .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; }

.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; 
  display: flex; flex-direction: column; 
  
  background: color-mix(in srgb, var(--loopcard-blue) 20%, var(--surface-2));
  border: 1px solid var(--loopcard-blue); 
}
.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.is-paused { border-color: var(--accent); border-style: dashed; }
.loopcard__acts .loopcard__stop { min-width: 26px; justify-content: center; }
.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 {
  
  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;
   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: '·';  color: var(--line-2); }
.loopcard__stats--static .loopcard__stat:last-child::after { content: ''; margin: 0; }
.loopcard__stats--static svg { vertical-align: -3px; }
.loopcard__bar {     flex: none; }
.loopcard__fill {
  display: block; height: 100%; width: 0%;
  
  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: color-mix(in srgb, var(--ink-mute) 70%, var(--ink)); 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 {    margin-top: auto; padding-top: 4px; }
.loopcard__time {
  flex: 1 1 auto; min-width: 0;
   color: var(--display-ink); font-variant-numeric: tabular-nums;
}
.loopcard__acts {   flex: none; }
.loopcard__acts .chip[disabled] { opacity: .35; cursor: not-allowed; }
.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;    }
.pedal__id { display: flex; align-items: center;  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;
}

:where(.pedal[data-bp~="max640"]) .pedal__head p { display: none; }

.pedal__headctl { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4);  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.is-dragging { position: relative; z-index: 5; cursor: grabbing; box-shadow: var(--shadow); }

[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__read {
  position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%); pointer-events: none;
  display: inline-flex; align-items: baseline; gap: 4px; padding: 2px 4px; border-radius: 3px;
  background: color-mix(in srgb, var(--well) 88%, transparent); white-space: nowrap;
}
.fbtn__read:not(:has(.fbtn__note:not(:empty))) { display: none; }
.fbtn__note { font: 700 .9rem/1 var(--mono); color: var(--ink); }
.fbtn__note:empty { display: none; }
.fbtn.is-intune .fbtn__note { color: var(--good); }
.fbtn.is-off .fbtn__read { 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 10px/1 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[data-lvl="3"] .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[data-lvl="3"] .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[data-lvl="3"] .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__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__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;  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;  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); }

:where(.pedal[data-bp~="max760"]) .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); }
/* The pick the moment it is heard, before its exact time is in: neutral, never a verdict. */
.tbar__hit.is-early { background: var(--ink-mute); box-shadow: none; }
@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; }

.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%);  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; }

/* Lit green while the practice log is open. */

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

.report { margin-top: var(--s-3); padding: var(--s-3); border: 1px solid var(--cap-edge); border-radius: 6px; background: var(--well); }

.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;  }
.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; }

.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); }

.ach__bar { display: block; height: 6px; border-radius: 3px; background: var(--well); overflow: hidden; }
.ach__bar span { display: block; height: 100%; border-radius: 3px;  transition: width .6s var(--ease); }

.quests { margin-bottom: var(--s-4); }

.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.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)); }

.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); }

.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) 18%, var(--surface-2)); color: var(--ink); }
.cal__cell.is-l2 { background: color-mix(in srgb, var(--good) 40%, var(--surface-2)); color: var(--ink); }   /* deep enough for the look's ink to read on it, dark looks and light */
.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; }

.grade { flex: none; display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; margin-right: 6px; border-radius: 4px; font: 800 11px/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)); }

/* 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. */

.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: calc(20px + env(safe-area-inset-bottom)); 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;   opacity: .92;  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; }

/* 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"] .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__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"] .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 is a small box on the panel's title line: one line, never wider than it needs, and it trims its
   caption before it pushes the controls. How to use it is in the help bar, not in the box. */

/* ── 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); 
  border: 1px solid var(--cap-edge); border-radius: 6px;
  background: linear-gradient(180deg, var(--cap-top), var(--cap-bot)); color: var(--cap-ink);
    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__ctl.is-recording .fbrec__rec { 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; }

/* On a phone a phrase row wraps: its summary drops to a line of its own instead of widening the page. */

/* The same when the lessons drawer takes the left of a mid-size screen. */

/* The click's own controls inside the phrase bar's little metronome menu. */

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

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

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

/* ——— School: the lessons drawer ——— */
.school {
  position: fixed; z-index: 90; left: env(safe-area-inset-left); top: calc(63px + env(safe-area-inset-top)); bottom: 0; width: var(--school-w);
   flex-direction: column;
  background: var(--surface); color: var(--ink-body);
  border-right: 1px solid var(--line); box-shadow: var(--shadow);
}
.school[hidden] { display: none; }
body.has-school > main, body.has-school > .footer { padding-left: var(--school-w); }

.school__bigbub svg { display: block; }

.school :is(button, input):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.school__daily {
  appearance: none; text-align: left; cursor: pointer; display: grid; gap: 2px;
  padding: var(--s-3) var(--s-4); border-radius: 8px;
  border: 1px solid var(--accent); background: var(--accent-wash, var(--surface-2)); color: var(--ink);
}
.school__daily:hover { background: color-mix(in srgb, var(--accent) 22%, var(--surface)); }
.school__daily.is-done { border-color: var(--line-2); background: var(--surface-2); }
.school__dailyname { font: 700 .95rem/1.1 var(--display); letter-spacing: .05em; text-transform: uppercase; }
.school__dailysub { font-size: var(--t-sm); color: var(--ink-body); }

.school__blurb, .school__foot { margin: 0; font-size: var(--t-sm); color: var(--ink-mute); line-height: 1.45; }

.school__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.school__lesson {
  appearance: none; width: 100%; cursor: pointer; text-align: left;
  display: grid; grid-template-columns: 2.2rem 1fr auto; align-items: center; gap: var(--s-3);
  min-height: 44px; padding: 0 var(--s-3); border-radius: 6px;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink);
}
.school__lesson:hover:not([disabled]) { border-color: var(--accent); }
.school__lesson[disabled] { cursor: not-allowed; opacity: .5; }
.school__lvl { font: 700 var(--t-xs)/1 var(--mono); color: var(--ink-mute); }
.school__lname { font-size: var(--t-base); }
.school__lbest { font: 600 var(--t-xs)/1 var(--mono); color: var(--ink-mute); }
.school__lesson.is-passed .school__lbest { color: var(--good); }
.school__lesson.is-tried .school__lbest { color: var(--ok); }

.school__runhead { display: flex; align-items: center; gap: var(--s-3); }
.school__back {
  appearance: none; border: 0; background: transparent; color: var(--ink-mute); cursor: pointer;
  font-size: var(--t-sm); padding: .4rem 0; min-height: 36px;
}
.school__back:hover { color: var(--ink); }
.school__runname { flex: 1; font-weight: 650; color: var(--ink); font-size: var(--t-sm); }
.school__count { font: 600 var(--t-xs)/1 var(--mono); color: var(--ink-mute); }
.school__bar { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.school__bar span { display: block; height: 100%; background: var(--accent);  }

.school__say { margin: 0; font-size: var(--t-sm); line-height: 1.5; color: var(--ink-body); }
.school__sayname { font-weight: 700; color: var(--accent); }
.school__text, .school__prompt { margin: 0; font-size: var(--t-base); line-height: 1.55; color: var(--ink); }
.school__prompt { font-weight: 600; }
.school__tally { margin: 0; font: 500 var(--t-sm)/1.4 var(--sans); color: var(--ink-mute); }
.school__play { align-self: flex-start; }
.school__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.school__next { align-self: flex-start; }
.school__num { width: 6ch; }

.school__opts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.school__opts.is-many { grid-template-columns: repeat(3, 1fr); }
.school__opt {
  appearance: none; cursor: pointer; min-height: 44px; padding: .4rem .5rem; border-radius: 6px;
  border: 1px solid var(--line-2); background: var(--surface-2); color: var(--ink);
  font: 600 var(--t-sm)/1.2 var(--sans);
}
.school__opt:hover { border-color: var(--accent); }
.school__opts.is-answered .school__opt { cursor: default; }
.school__opt.is-right { border-color: var(--good); box-shadow: inset 0 0 0 1px var(--good); }
.school__opt.is-ok { background: color-mix(in srgb, var(--good) 25%, var(--surface-2)); border-color: var(--good); }
.school__opt.is-bad { background: color-mix(in srgb, var(--bad) 25%, var(--surface-2)); border-color: var(--bad); }

.school__fb { margin: 0; padding: var(--s-2) var(--s-3); border-radius: 6px; font-size: var(--t-sm); line-height: 1.45; border-left: 3px solid; }
.school__fb.is-ok { border-color: var(--good); background: color-mix(in srgb, var(--good) 12%, transparent); color: var(--ink); }
.school__fb.is-bad { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, transparent); color: var(--ink); }

.school__clock { margin: 0; font: 700 2.4rem/1 var(--mono); color: var(--ink); text-align: center; }
.school__done { display: grid; justify-items: center; gap: var(--s-3); text-align: center; padding-top: var(--s-5); }
.school__score { margin: 0; font: 700 2.6rem/1 var(--display); color: var(--ink); }

/* Lesson marks on the neck */
.fb__note.is-hit .fb__dot { --dot: var(--good); --dot-ink: #06140A; }
.fb__note.is-miss .fb__dot { --dot: var(--bad); --dot-ink: #1A0604; }
.fb__note.is-target::after {
  content: ""; position: absolute; left: 50%; top: 50%; z-index: 1;
  width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%;
  border: 2px dashed var(--good);
}
.fb__note.is-flash-bad { animation: lesson-bad .5s var(--ease); }
@keyframes lesson-bad { 0%, 100% { background: transparent; } 30% { background: color-mix(in srgb, var(--bad) 45%, transparent); } }

/* Phone and small tablet: the drawer is a sheet under the neck, and the page scrolls above it. */
@media (max-width: 719px) {
  .school { top: auto; left: 0; right: 0; width: auto; height: 46vh; border-right: 0; border-top: 1px solid var(--line-2); }
  body.has-school > main,
  body.has-school > .footer { padding-left: 0; }
    /* A phone has no room for a three-row header, the neck, Bub's bubble and the lesson sheet all at once:
     while a lesson is open the header scrolls away with the page. */
  }

@media (prefers-reduced-motion: reduce) {
  .school__bar span { transition: none; }
  .fb__note.is-flash-bad { animation: none; }
}

/* ——— Lessons: movement ——— */
.school__lvlhead {
  margin-top: var(--s-3); font: 700 var(--t-xs)/1.2 var(--display); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-mute);
}
.school__list > li { animation: school-in .38s var(--ease) both; animation-delay: calc(var(--i, 0) * 28ms); }

@keyframes school-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.school__opt { transition: transform .12s var(--ease), background-color .2s, border-color .2s; }
.school__opt:active { transform: scale(.96); }
.school__opt.is-ok { animation: school-pop .42s cubic-bezier(.34, 1.56, .64, 1); }
.school__opt.is-bad { animation: school-shake .4s var(--ease); }
.school__lesson { transition: transform .15s var(--ease), border-color .2s; }
.school__lesson:hover:not([disabled]) { transform: translateX(3px); }
.school__lesson:active:not([disabled]) { transform: scale(.98); }
.school__bar span { transition: width .45s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes school-pop { 0% { transform: scale(1); } 40% { transform: scale(1.07); } 100% { transform: scale(1); } }
@keyframes school-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(2px); } }

.school__done { position: relative; }
.school__score { animation: school-pop .6s cubic-bezier(.34, 1.56, .64, 1); }
.school__confetti {
  position: absolute; left: 50%; top: 5.5rem; pointer-events: none;
  font: 700 1.4rem/1 var(--sans); color: var(--accent);
  animation: note-fly 1.3s cubic-bezier(.2, .7, .3, 1) forwards;
}
.school__confetti:nth-child(3n) { color: var(--good); }
.school__confetti:nth-child(3n+1) { color: var(--led); }
@keyframes note-fly {
  0% { opacity: 0; transform: translate(-50%, 0) scale(.4); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), var(--dy)) rotate(var(--rot)) scale(1.1); }
}

/* Lesson marks land with a little bounce. */
.fb.is-lessoning .fb__note.is-lesson .fb__dot { animation: dot-land .35s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes dot-land { from { transform: scale(.2); opacity: 0; } to { transform: none; opacity: 1; } }
.fb__note.is-target::after { animation: target-pulse 1.2s ease-in-out infinite; }
@keyframes target-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.18); opacity: .7; } }

.coach { position: fixed; inset: 0; z-index: 95; pointer-events: none; }
.coach[hidden] { display: none; }
.coach.is-away { opacity: 0; }
.coach__bubble {
  position: fixed; left: 0; top: 0; max-width: min(19rem, calc(100vw - 20px));
  padding: .55rem .75rem .6rem; border-radius: 12px;
  background: var(--surface); color: var(--ink); border: 2px solid var(--accent);
  box-shadow: 0 10px 28px rgba(0,0,0,.28), 0 2px 6px rgba(0,0,0,.18);
  font: 500 var(--t-sm)/1.45 var(--sans);
  transition: transform .5s cubic-bezier(.34, 1.4, .64, 1);
}
.coach[data-tone="answer"] .coach__bubble { border-color: var(--good); }
.coach__who { display: block; font: 700 var(--t-xs)/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 3px; }
.coach[data-tone="answer"] .coach__who { color: var(--good); }
.coach__text { margin: 0; }
.coach__bubble { pointer-events: auto; }
.coach__actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: .5rem; }
.coach__actions[hidden] { display: none; }
.coach__btn { min-height: 32px; }
@media (pointer: coarse) { .coach__btn { min-height: 40px; } }
.coach__bubble.is-new .coach__text { animation: school-in .3s var(--ease); }
.coach.is-arriving .coach__bubble, .coach.is-arriving .coach__guitar { transition: none; }
.coach__guitar {
  position: fixed; left: 0; top: 0; overflow: visible; transform-origin: 0 50%;
  filter: drop-shadow(0 3px 3px rgba(0,0,0,.35));
  transition: transform .5s cubic-bezier(.34, 1.4, .64, 1), width .5s var(--ease), height .5s var(--ease);
}
.coach__body { fill: var(--vicky, #D8231F); stroke: var(--vicky-edge, #7A0E0B); stroke-width: .8; }
.coach__guard { fill: var(--vicky-guard, #F4EEE2); opacity: .92; }
.coach__pickup { fill: #151515; stroke: #555; stroke-width: .3; }
.coach__bridge { fill: #BFC3C7; }
.coach__knob { fill: #E7C35A; stroke: #7A5B10; stroke-width: .3; }
.coach__neck { fill: #3B2416; }
.coach__fret { stroke: #D9D4CA; stroke-width: .7; }
.coach__inlay { fill: #F4EEE2; }
.coach__head { fill: var(--vicky, #D8231F); stroke: var(--vicky-edge, #7A0E0B); stroke-width: .6; }
.coach__peg { fill: #E4E6E8; }
.coach__string { stroke: #F4EEE2; stroke-width: .35; opacity: .9; }
.coach__nudge { animation: guitar-nudge 1.6s ease-in-out infinite; }
.coach__guitar.is-strum .coach__nudge { animation: guitar-strum .55s cubic-bezier(.34, 1.56, .64, 1), guitar-nudge 1.6s ease-in-out .55s infinite; }
@keyframes guitar-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
@keyframes guitar-strum { 0% { transform: rotate(0); } 30% { transform: rotate(-9deg); } 60% { transform: rotate(5deg); } 100% { transform: rotate(0); } }

/* The game: three lettered circles on the neck, points, a streak */
.fb.is-lessoning .fb__note.is-pick .fb__dot {
  --dot: var(--accent); --dot-ink: var(--accent-ink);
  min-width: calc(var(--fb-dot) + 4px); height: calc(var(--fb-dot) + 4px); border-radius: 50%;
  font: 800 .78rem/1 var(--sans);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent), 0 2px 6px rgba(0,0,0,.5);
  animation: dot-land .35s cubic-bezier(.34, 1.56, .64, 1) both, pick-bob 1.5s ease-in-out .4s infinite;
}
.fb__note.is-pick { cursor: pointer; }
.fb__note.is-pick:hover .fb__dot { --dot: var(--accent-2); }
@keyframes pick-bob { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-2px) scale(1.06); } }
.school__abc { grid-template-columns: repeat(3, 1fr) !important; }
.school__abc .school__opt { font: 800 var(--t-base)/1 var(--sans); letter-spacing: .04em; }
.school__game { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); min-height: 22px; }
.school__pts { font: 800 var(--t-sm)/1 var(--mono); color: var(--ink); display: inline-block; }
.school__pts.is-bump { animation: school-pop .42s cubic-bezier(.34, 1.56, .64, 1); }
.school__combo { font: 700 var(--t-xs)/1 var(--mono); color: var(--ink-mute); padding: 4px 8px; border-radius: 999px; border: 1px solid var(--line); }
.school__combo.is-hot { color: var(--accent-ink); background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-color: transparent;
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 55%, transparent); animation: combo-glow 1.2s ease-in-out infinite; }
.school__combo.is-broken { animation: school-shake .4s var(--ease); }
@keyframes combo-glow { 0%, 100% { box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 40%, transparent); } 50% { box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 70%, transparent); } }
.school__plus { position: absolute; left: 0; top: -2px; font: 800 var(--t-sm)/1 var(--mono); color: var(--good); pointer-events: none;
  animation: plus-fly 1.05s cubic-bezier(.2, .8, .3, 1) forwards; }
@keyframes plus-fly { 0% { opacity: 0; transform: translate(40px, 4px) scale(.8); } 20% { opacity: 1; transform: translate(60px, -6px) scale(1.15); } 100% { opacity: 0; transform: translate(70px, -30px) scale(1); } }
.school__final { margin: 0; font: 800 var(--t-lg, 1.2rem)/1.2 var(--mono); color: var(--ink); }
.school__final.is-best { color: var(--good); }

@media (prefers-reduced-motion: reduce) {
  .school__list > li, .school__opt.is-ok, .school__opt.is-bad,
  .fb.is-lessoning .fb__note.is-lesson .fb__dot, .fb__note.is-target::after, .coach__nudge, .coach__bubble.is-new .coach__text,
  .school__pts.is-bump, .school__combo.is-hot, .school__combo.is-broken, .school__plus { animation: none !important; }
  .coach__bubble, .coach__guitar { transition: none; }
}

/* Grades */
.school__grade { font: 700 var(--t-xs)/1 var(--mono); padding: 2px 5px; border-radius: 4px; margin-right: 4px;  }
[data-grade="A"] { --grade: var(--good); } [data-grade="B"] { --grade: #5FA8D3; } [data-grade="C"] { --grade: var(--ok); }
[data-grade="D"] { --grade: #E08A3C; } [data-grade="F"] { --grade: var(--bad); }
.school__grade { background: var(--grade); }
.school__letter {
  margin: 0; font: 400 4.2rem/1 "Bungee", var(--display); color: var(--grade, var(--accent));
  text-shadow: 0 3px 0 color-mix(in srgb, var(--grade, var(--accent)) 35%, #000);
  animation: school-pop .6s cubic-bezier(.34, 1.56, .64, 1);
}
.school__done .school__score { font-size: 1.2rem; color: var(--ink-mute); }

/* Review, listening, keys */
.school__review {
  appearance: none; text-align: left; cursor: pointer; display: grid; gap: 2px;
  padding: var(--s-3) var(--s-4); border-radius: 8px;
  border: 1px solid var(--ok); background: color-mix(in srgb, var(--ok) 14%, var(--surface)); color: var(--ink);
  animation: school-in .38s var(--ease) both;
}
.school__review:hover { background: color-mix(in srgb, var(--ok) 24%, var(--surface)); }
.school__listen {
  margin: 0; display: flex; align-items: center; gap: 6px;
  font: 600 var(--t-xs)/1.3 var(--sans); color: var(--good);
}
.school__listen::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--good); flex: none;
  box-shadow: 0 0 6px var(--good); animation: target-pulse 1.4s ease-in-out infinite;
}
.school__foot.school__row { justify-content: space-between; }
@media (pointer: fine) {
  .school__opt[data-key]:not([data-key=""]) { position: relative; }
  .school__opt[data-key]:not([data-key=""])::after {
    content: attr(data-key); position: absolute; top: 3px; right: 5px;
    font: 600 .6rem/1 var(--mono); color: var(--ink-mute); opacity: .7;
  }
}

@media (prefers-reduced-motion: reduce) { .school__review, .school__listen::before { animation: none; } }

/* Bend meter: the needle sits in the middle when the bend is in tune. */
.school__meter {
  --pos: 0; position: relative; height: 34px; border-radius: 8px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--bad) 22%, var(--surface-2)), var(--surface-2) 40%, color-mix(in srgb, var(--good) 30%, var(--surface-2)) 50%, var(--surface-2) 60%, color-mix(in srgb, var(--bad) 22%, var(--surface-2)));
  border: 1px solid var(--line-2); display: grid; place-items: center; overflow: hidden;
}
.school__meter b { position: relative; z-index: 1; font: 700 var(--t-sm)/1 var(--mono); color: var(--ink); }
.school__needle {
  position: absolute; top: 3px; bottom: 3px; left: calc(50% + var(--pos) * 48%); width: 3px; margin-left: -1.5px;
  border-radius: 2px; background: var(--accent); transition: left .12s linear;
}
.school__meter.is-close { border-color: var(--good); box-shadow: 0 0 0 1px var(--good); }
.school__meter.is-close .school__needle { background: var(--good); }

/* Phrase cards: the metronome's loop cards, squarer. */

.phrasecard__notes { font: 500 var(--t-xs)/1.3 var(--mono); color: color-mix(in srgb, var(--ink-mute) 70%, var(--ink)); }   /* small type on a card: a shade firmer than muted, readable on every look */

.phrasecard__play { gap: 6px; }
.phrasecard__play .rig__label { margin: 0; }

/* An open phrase card's controls at two-thirds size: 30px controls become 20px. Fingers get 28px. */

/* Lesson slides: read first, then the mini test. The text is bigger than a question's; the neck draws the idea. */
.school__dots { display: flex; align-items: center; gap: 6px; }
.school__dots span { flex: 1; max-width: 42px; height: 5px; border-radius: 3px; background: var(--line); transition: background-color .25s; }
.school__dots span.is-done { background: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.school__dots span.is-now { background: var(--accent); }
.school__dottest { margin-left: 4px; font: 700 var(--t-xs)/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-mute); }
.school__say--lead { padding-bottom: var(--s-2); border-bottom: 1px solid var(--line); }
.school__slide { display: grid; gap: var(--s-3); }
.school__kicker { margin: 0; font: 600 var(--t-xs)/1 var(--mono); color: var(--ink-mute); }
.school__stitle { margin: 0; font: 700 1.5rem/1.15 var(--display); color: var(--ink); letter-spacing: .01em; }
.school__stext { margin: 0; font-size: 1.02rem; line-height: 1.6; color: var(--ink-body); max-width: 60ch; }
.school__hear { display: flex; flex-wrap: wrap; gap: 6px; }
.school__onneck { margin: 0; font: 600 var(--t-xs)/1.2 var(--sans); color: var(--accent); }
.school__tip {
  display: grid; gap: 4px; padding: var(--s-3) var(--s-4); border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); background: var(--accent-wash);
  font-size: var(--t-base); line-height: 1.5; color: var(--ink);
}
.school__tiphead { font: 700 var(--t-xs)/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.school__slidenav { display: flex; flex-direction: column-reverse; gap: var(--s-2); margin-top: auto; padding-top: var(--s-2); }
/* Moving on is the main thing to do: Next fills the width, Back sits under it, just as wide. */
.school__slidenav .btn, .school__next {
  align-self: stretch; width: 100%; min-height: 46px; font-size: var(--t-base); letter-spacing: .08em;
}
.school__slidenav .btn[disabled] { display: none; }
.school__skiplink {
  appearance: none; align-self: center; border: 0; background: none; padding: 4px; cursor: pointer;
  font: 500 var(--t-xs)/1.2 var(--sans); color: var(--ink-mute); text-decoration: underline; text-underline-offset: 3px;
}
.school__skiplink:hover { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .school__dots span { transition: none; } }
.school__along { align-self: flex-start; }
.school__along[aria-pressed="true"] { background: var(--accent-2); border-color: var(--accent-2); }
/* A menu with no room below it opens upward (see fitPop in ui/picker.js). */
.picker__pop--up:not(.picker__pop--fixed) { top: auto; bottom: calc(100% + 4px); }

/* How to use GuitarBub: the page dims round the part being explained, a ring pulses on it, and Bub points at it
   from above everything else, the masthead included. */
.school__tour {
  appearance: none; cursor: pointer; margin-right: auto; padding: 4px 9px; border-radius: 999px;
  border: 1px solid var(--accent); background: var(--accent-wash, var(--surface-2)); color: var(--accent);
  font: 700 var(--t-xs)/1 var(--sans); white-space: nowrap;
}
.school__tour:hover { background: var(--accent); color: var(--accent-ink); }
.tour__ring {
  position: fixed; left: 0; top: 0; z-index: 101; pointer-events: none; border-radius: 10px;
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 200vmax rgb(0 0 0 / .42), 0 0 18px color-mix(in srgb, var(--accent) 70%, transparent);
  transition: transform .45s cubic-bezier(.34, 1.3, .64, 1), width .45s var(--ease), height .45s var(--ease);
  animation: tour-pulse 1.6s ease-in-out infinite;
}
.tour__ring[hidden] { display: none; }
@keyframes tour-pulse {
  50% { box-shadow: 0 0 0 200vmax rgb(0 0 0 / .42), 0 0 30px color-mix(in srgb, var(--accent) 95%, transparent); }
}
.coach.coach--tour { z-index: 102; }
.coach--tour .coach__bubble { max-width: min(22rem, calc(100vw - 20px)); }
@media (prefers-reduced-motion: reduce) { .tour__ring { transition: none; animation: none; } }
@media (max-width: 719px) {
  .school { transition: transform .35s var(--ease); }
  body.is-touring-board .school { transform: translateY(100%); }
}

/* ── COUNT ────────────────────────────────────────────────────────────────────
   While the metronome runs, each beat's number flashes huge across the screen (ui/count.js; the metronome's Count
   switch). It fades almost away between beats so the board stays readable under it. 1 takes the accent colour. */
.count { display: grid; place-items: center; position: fixed; inset: 0; z-index: 110; pointer-events: none; }
.count__num {
  font: 800 min(52vh, 40vw)/1 var(--display); color: var(--ink); opacity: 0;
  text-shadow: 0 8px 40px rgb(0 0 0 / .35); font-variant-numeric: tabular-nums;
}
.count.is-one .count__num { color: var(--accent); }
.count.is-hit .count__num { animation: count-hit .55s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes count-hit {
  0% { opacity: .85; transform: scale(1.15); }
  40% { opacity: .5; }
  100% { opacity: .1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .count.is-hit .count__num { animation: none; opacity: .25; }
}

/* Tempo over time: one exercise, one line. Recessive grid and axis; the line and dots wear the accent. */

.tempo__plot { position: relative; }
.tempo__svg { display: block; width: 100%; height: auto; max-height: 260px; overflow: visible; }
.tempo__grid { stroke: var(--line); stroke-width: 1; }
.tempo__ax { font: 500 11px var(--mono); fill: var(--ink-mute); }
.tempo__line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.tempo__pt { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.tempo__pt.is-open { fill: var(--surface); stroke: var(--accent); }
.tempo__hit { fill: transparent; cursor: crosshair; }
.tempo__hit:hover + .tempo__hit, .tempo__hit:hover { fill: color-mix(in srgb, var(--accent) 14%, transparent); }
.tempo__tip {
  position: absolute; transform: translate(-50%, calc(-100% - 10px)); pointer-events: none; white-space: nowrap;
  padding: 6px 9px; border-radius: 6px; background: var(--surface); border: 1px solid var(--line-2);
  box-shadow: var(--shadow); font: 500 var(--t-xs)/1.4 var(--sans); color: var(--ink-body);
}
.tempo__tip b { color: var(--ink); }

/* A first visit: what GuitarBub is, and the way in. */
.welcome {
  position: fixed; inset: 0; z-index: 130; display: grid; place-items: center; padding: 16px;
  background: rgb(0 0 0 / .5); animation: school-in .3s var(--ease) both;
}
.welcome__card {
  width: min(30rem, 100%); max-height: calc(100vh - 32px); overflow-y: auto;
  padding: var(--s-5); border-radius: 16px; background: var(--surface); border: 1px solid var(--line-2);
  box-shadow: 0 24px 60px rgb(0 0 0 / .4); text-align: center;
}
.welcome__title { margin: 0; font: 800 1.6rem/1.1 var(--display); color: var(--ink); }
.welcome__go { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: center; }
.welcome__go .btn { min-width: 9rem; min-height: 44px; }
.welcome__note { margin: var(--s-4) 0 0; font-size: var(--t-xs); color: var(--ink-mute); }
@media (prefers-reduced-motion: reduce) { .welcome, .welcome__bub, .welcome__bub.is-hop { animation: none; } }

/* ── USER MENU ────────────────────────────────────────────────────────────────
   Account, the guitar connection and the look, behind one round button at the top right. */
.usermenu { position: relative; display: inline-flex; }
.usermenu__btn {
  appearance: none; cursor: pointer; position: relative; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--head-line, var(--line-2));
  background: transparent; color: var(--head-ink, var(--ink-body));
}
.usermenu__btn:hover, .usermenu__btn[aria-expanded="true"] { border-color: var(--head-accent, var(--accent)); color: var(--head-ink, var(--ink)); }
.usermenu__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.usermenu__dot {
  position: absolute; right: 1px; bottom: 1px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--line-2); border: 2px solid var(--surface); transition: background-color .2s;
}
.usermenu__btn.is-live .usermenu__dot { background: var(--good); box-shadow: 0 0 6px var(--good); }
.usermenu__panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 105;
    overflow-y: auto;
  display: grid;  
  background: var(--surface); border: 1px solid var(--line-2);  box-shadow: 0 18px 44px rgb(0 0 0 / .35);
}
.usermenu__panel[hidden] { display: none; }
.usermenu__sec { display: grid;  }
.usermenu__sec + .usermenu__sec {  border-top: 1px solid var(--line); }
.usermenu__h { margin: 0; font: 700 var(--t-xs)/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); }
.usermenu__panel .rack { margin-bottom: 0; }
.usermenu__panel #acctswitch, .usermenu__panel .themeswitch { justify-self: start; }
.usermenu__panel.is-wide { position: fixed; left: 12px; right: 12px; width: auto; max-height: calc(100vh - 140px); }

/* Signing in, inside the user menu: the form opens in place, as part of the panel, so nothing can cover it or cut
   it off. The button and the form wear the panel's own surfaces, the same in every theme: no accent lamp. */
.acct__icon svg, .acct__herolamp svg { width: 70%; height: 70%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.acct__chev { margin-left: auto; color: var(--ink-mute); font-size: .7rem; transition: transform .2s; }
.acct__btn[aria-expanded="true"] .acct__chev { transform: rotate(180deg); }
#usermenu #acctswitch { justify-self: stretch; }
#usermenu .acct { width: 100%; }
#usermenu .acct__btn {
  width: 100%; max-width: none; min-height: 44px; gap: 10px; padding: .45rem .8rem .45rem .5rem;
  border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--ink);
  font: 600 var(--t-sm)/1 var(--sans); box-shadow: none;
}
#usermenu .acct__btn:hover { border-color: var(--ink-mute); }
#usermenu .acct__icon, #usermenu .acct__heroavatar, #usermenu .acct__herolamp {
  width: 30px; height: 30px; flex: none; border-radius: 50%; display: inline-grid; place-items: center;
  background: var(--surface); border: 1px solid var(--line-2); color: var(--ink-body); box-shadow: none;
  font: 700 .8rem/1 var(--sans);
}
#usermenu .acct__pop {
  position: static; width: auto; margin-top: var(--s-2); z-index: auto;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
#usermenu .acct__pop[hidden] { display: none; }

/* Cyberpunk gets faint scanlines. Drawn over everything, never in the way of a click. */
:root[data-theme="cyber"] body::after {
  content: ""; position: fixed; inset: 0; z-index: 200; pointer-events: none;
  background: repeating-linear-gradient(180deg, rgb(0 0 0 / 0) 0 2px, rgb(0 0 0 / .14) 2px 3px);
}

/* ——— Phone: the metronome's top section as the practice deck ——— */
.tstep { display: none; }

:where(.pedal[data-bp~="max719"]) .met > .tcbar {
    display: grid;   
    
  }
:where(.pedal[data-bp~="max719"]) .met > .tcbar > .tcbar__unit { margin: 0; min-width: 0; }
:where(.pedal[data-bp~="max719"]) .met > .tcbar > .tcbar__unit:has([data-patbtn]) { grid-area: rhy; }
:where(.pedal[data-bp~="max719"]) .met > .tcbar > .tcbar__unit:has([data-sigpick]) { grid-area: sig; }
:where(.pedal[data-bp~="max719"]) .met > .tcbar > .tcbar__unit:has([data-tap]) { grid-area: tap; }
:where(.pedal[data-bp~="max719"]) .met > .tcbar > .tcbar__unit:has([data-patbtn]) .picker__btn,
:where(.pedal[data-bp~="max719"]) .met > .tcbar > .tcbar__unit:has([data-sigpick]) .picker__btn,
:where(.pedal[data-bp~="max719"]) .met > .tcbar > .tcbar__unit [data-tap] { width: 100%; min-height: 44px; }
:where(.pedal[data-bp~="max719"]) .met > .tcbar > .tcbar__unit:has([data-patbtn]) .picker,
:where(.pedal[data-bp~="max719"]) .met > .tcbar > .tcbar__unit:has([data-sigpick]) .picker { width: 100%; display: block; }
:where(.pedal[data-bp~="max719"]) .met > .tcbar > .tcbar__unit--tempo > .rig__label { display: none; }
:where(.pedal[data-bp~="max719"]) .met .tempo {
    display: grid;  
     align-items: center; width: 100%;
  }
:where(.pedal[data-bp~="max719"]) .met .tempo .tstep { display: flex; align-items: center; justify-content: center;  
    border: 1px solid var(--line-2); background: var(--surface-2); color: var(--ink); font: 700 28px/1 var(--display);
    touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
:where(.pedal[data-bp~="max719"]) .met .tempo .tstep:active { transform: translateY(1px); }
:where(.pedal[data-bp~="max719"]) .met .tempo .tstep--down { grid-area: down; }
:where(.pedal[data-bp~="max719"]) .met .tempo .tstep--up { grid-area: up; }
:where(.pedal[data-bp~="max719"]) .met .tempo .tcbpm { grid-area: num; width: 100%;  text-align: center; font: 700 48px/1 var(--display);
    border: 0; background: transparent; color: var(--ink); padding: 0; -moz-appearance: textfield; }
:where(.pedal[data-bp~="max719"]) .met .tempo .tcbpm::-webkit-inner-spin-button,
:where(.pedal[data-bp~="max719"]) .met .tempo .tcbpm::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
:where(.pedal[data-bp~="max719"]) .met .tempo [data-tempopick] { grid-area: name; justify-self: center; }
:where(.pedal[data-bp~="max719"]) .met .tempo [data-tempopick] .picker__btn { min-height: 36px; font-size: 13px; }
:where(.pedal[data-bp~="max719"]) .met > .tcbar > .tcbar__unit--go {  grid-template-columns: auto 1fr;  }
:where(.pedal[data-bp~="max719"]) .met > .tcbar > .tcbar__unit--go > .tcbar__go {   grid-template-columns: 1fr 2fr;  }
:where(.pedal[data-bp~="max719"]) .met > .tcbar > .tcbar__unit--go .transport {  width: 100%; justify-content: center; }
:where(.pedal[data-bp~="max719"]) .met > .tcbar > .tcbar__unit--go [data-run] { font-size: 16px; }

/* ——— Phone: the fretboard's menus as a compact grid above the neck ——— */

:where(.pedal[data-bp~="max719"]) .fb > .tcbar {
    display: grid;  gap: 6px 8px; align-items: end;
    
  }
:where(.pedal[data-bp~="max719"]) .fb > .tcbar > .tcbar__unit { margin: 0; min-width: 0; }
:where(.pedal[data-bp~="max719"]) .fb > .tcbar > .tcbar__unit:has([data-keypick]) { grid-area: key; }
:where(.pedal[data-bp~="max719"]) .fb > .tcbar > .tcbar__unit:has([data-scalepick]) { grid-area: scale; }
:where(.pedal[data-bp~="max719"]) .fb > .tcbar > .tcbar__unit:has([data-chordpick]) { grid-area: chord; }
:where(.pedal[data-bp~="max719"]) .fb > .tcbar > .tcbar__unit:has([data-tuningpick]) { grid-area: tuning; }
:where(.pedal[data-bp~="max719"]) .fb > .tcbar > .fb__playunit { grid-area: play; }
:where(.pedal[data-bp~="max719"]) .fb > .tcbar > .fbrec__unit { grid-area: rec; }
:where(.pedal[data-bp~="max719"]) .fb > .tcbar .rig__label { font-size: 10px; margin-bottom: 2px; }
:where(.pedal[data-bp~="max719"]) .fb > .tcbar .picker { width: 100%; display: block; }
:where(.pedal[data-bp~="max719"]) .fb > .tcbar .picker__btn { width: 100%; min-width: 0; min-height: 44px; }
:where(.pedal[data-bp~="max719"]) .fb > .tcbar .picker__cur { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
:where(.pedal[data-bp~="max719"]) .fb > .tcbar .fb__play { width: 100%; min-height: 44px; }
:where(.pedal[data-bp~="max719"]) .fb > .tcbar .fbrec__ctl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; }
:where(.pedal[data-bp~="max719"]) .fb > .tcbar .fbrec__ctl > * { min-height: 44px; }

/* Phone: the neck's menus folded into one summary line (ui/pedalstrip.js phoneFretMenus) */

:where(.pedal[data-bp~="max719"]) .fb > .tcbar:not(.is-open) { display: none; }
:where(.pedal[data-bp~="max719"]) .fb > .tcbar .fb__playunit { display: none; }
:where(.pedal[data-bp~="max719"]) .fb > .tcbar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "key chord" "scale tuning" "rec rec"; }

/* Phone: no blank band under the masthead, and a tighter routines header */
@media (max-width: 719px) {
  /* The board's status line takes room only while it has something to say (it stays in the page for screen readers). */
  main > .shell:first-child { margin-top: 0; }
  .status:empty { min-height: 0; margin: 0; }
}

:where(.pedal[data-bp~="max719"]) .loops__toolbar { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; row-gap: 6px; }
:where(.pedal[data-bp~="max719"]) .loops__toolbar .mute { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Phone: Practice, Learn and Progress in a bar along the bottom (ui/tabbar.js). The masthead keeps only the
   wordmark and the user button; the Learn switch it held is pressed by the tabs instead. */
.tabbar { display: none; }
@media (max-width: 719px) {
  :root { --tabbar-h: 58px; }
  .tabbar {
    display: grid; grid-template-columns: repeat(3, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 96;
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    background: var(--surface); border-top: 1px solid var(--line-2); box-shadow: 0 -6px 18px rgba(0,0,0,.18);
  }
  .tabbar__tab {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0;
    border: 0; background: transparent; color: var(--ink-mute); font: 600 11px/1 var(--display); letter-spacing: .04em;
    text-transform: uppercase; -webkit-tap-highlight-color: transparent; touch-action: manipulation; cursor: pointer;
  }
  .tabbar__tab svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .tabbar__tab.is-on { color: var(--accent); }
  .tabbar__tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
  body { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
    .school { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
  body:has(.tabbar) #schoolswitch,
  body:has(.tabbar) #progressbtn { display: none; }
}

[data-headctl-item][data-hiddenctl] { display: none !important; }

/* Fingerboard wood (Wood switch on the fretboard: Maple, Rosewood, Ebony): it overrides the theme's neck, with
   frets, strings, inlays and note dots that read on it. */
.fb[data-wood="maple"] {
  --neck: #E4CB98; --fret-wire: #A08C68; --string: #6B5E4F; --inlay: rgba(26,20,14,.78); --nut: #F4ECDA;
  --scale-dot: #2A211B; --scale-ink: #F3EAD8;
}
.fb[data-wood="rosewood"] {
  --neck: #4B2C1F; --fret-wire: #CFC8BA; --string: #DCD5C8; --inlay: rgba(242,234,218,.85); --nut: #F0E7D3;
  --scale-dot: #F1E6CF; --scale-ink: #2A1F19;
}
.fb[data-wood="ebony"] {
  --neck: #17120E; --fret-wire: #BDB7AB; --string: #D9D3C7; --inlay: rgba(242,234,218,.82); --nut: #F0E7D3;
  --scale-dot: #F1E6CF; --scale-ink: #2A1F19;
}
/* The names on empty frets stay readable on dark wood whatever the theme's text colour. */
.fb[data-wood="rosewood"] .fb__row, .fb[data-wood="ebony"] .fb__row { --ink-mute: rgba(242,234,218,.62); }
.fb[data-wood="maple"] .fb__row { --ink-mute: rgba(42,33,27,.62); }

/* Phone, compact: smaller card heads, pedals as small tiles (LED, name, value), one hint for both strips and a tighter
   metronome (the beat view keeps its height: its bars, READY and the stats need it), so the neck and the whole metronome need little scrolling. */

:where(.pedal[data-bp~="max719"]) .pedal__head { height: 24px; margin-bottom: 0; }
:where(.pedal[data-bp~="max719"]) .pedal__head h3 { font-size: 14px; }
:where(.pedal[data-bp~="max719"]) .pedal__head > svg { width: 22px; height: 22px; }
:where(.pedal[data-bp~="max719"]) .pedal__body { margin-top: 6px; margin-bottom: 0; }

:where(.pedal[data-bp~="max719"]) .met > .tcbar { padding: 6px;  }
:where(.pedal[data-bp~="max719"]) .met > .tcbar .rig__label { font-size: 10px; margin-bottom: 2px; }
:where(.pedal[data-bp~="max719"]) .met .tempo .tcbpm { height: 52px; font-size: 44px; }
:where(.pedal[data-bp~="max719"]) .met > .tcbar > .tcbar__unit--go .transport { min-height: 46px; }
:where(.pedal[data-bp~="max719"]) .beatrow { margin-top: 6px; }

/* Desktop and tablet: the tempo reads at a glance — the tempo name, then − BPM + with the number large. (Phones lay
   the same elements out in their own grid above.) */

:where(.pedal[data-bp~="min720"]) .met .tempo [data-tempopick] { order: 0; }
:where(.pedal[data-bp~="min720"]) .met .tempo .tstep--down { order: 1; }
:where(.pedal[data-bp~="min720"]) .met .tempo .tcbpm { order: 2; width: 4.4rem; height: 40px; font: 700 26px/1 var(--display); padding: 0 4px; }
:where(.pedal[data-bp~="min720"]) .met .tempo .tstep--up { order: 3; }
:where(.pedal[data-bp~="min720"]) .met .tempo .tstep {
    display: inline-flex; align-items: center; justify-content: center;   flex: none;
     border: 1px solid var(--line-2); background: var(--surface-2); color: var(--ink);
    font: 700 18px/1 var(--display); cursor: pointer; user-select: none; -webkit-user-select: none;
  }
:where(.pedal[data-bp~="min720"]) .met .tempo .tstep:hover { border-color: var(--accent); }
:where(.pedal[data-bp~="min720"]) .met .tempo .tstep:active { transform: translateY(1px); }
:where(.pedal[data-bp~="min720"]) .met .tempo .tstep:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The board's status line takes room only while it has something to say, at every width. */
.status:empty { min-height: 0; margin: 0; }
main > .shell:first-child:has(.status:empty) { margin-top: 0; }

/* ── ONE LOOK FOR EVERY BUTTON AND MENU ─────────────────────────────────────────
   Modelled on the tempo field: the theme's dark (or light) field, a thin outline in the text colour, bold text, no
   gloss or raised cap. Buttons, menu buttons, menu options, tiles and the tempo field all share it; what is ON or
   chosen takes the accent outline. The hardware switches (flips, rockers, knobs) keep their pedal look.
   Prefixed with :root[data-theme] so it outranks each theme's own button rules. */
:root[data-theme] :is(.btn,.chip,.rigtoggle,.transport,.picker__btn,.tstep,.seg button,.stepper button,.fb__pos,.fb__arp,.fb__play,.fbrec__rec,.ampsw,.minitog,.tabbar__tab),
:root[data-theme] input.input,
:root[data-theme] select.input,
:root[data-theme] input[type="number"].input {
  background: var(--field); color: var(--ink);
  border: 1.5px solid var(--ctl-edge); border-radius: 7px;
  box-shadow: none; text-shadow: none; filter: none; background-image: none;
  font-weight: 700;
}
:root[data-theme] input.input, :root[data-theme] select.input, :root[data-theme] input[type="number"].input {
  background: var(--field); color: var(--ink);
  border: 1.5px solid var(--ctl-edge); border-radius: 7px;
  box-shadow: none; text-shadow: none; filter: none; background-image: none;
  font-weight: 700;
}
/* (.tabbar .tabbar__tab: the shared rule's :is() counts as its most specific member, `.seg button`.) */
:root[data-theme] .tabbar .tabbar__tab { border-width: 0; border-radius: 0; background: transparent; color: var(--ink-mute); }
:root[data-theme] .tabbar .tabbar__tab.is-on { color: var(--accent); }
:root[data-theme] :is(.btn,.chip,.rigtoggle,.transport,.picker__btn,.tstep,.seg button,.stepper button,.fb__pos,.fb__arp,.fb__play,.fbrec__rec,.ampsw,.minitog,.picker__opt):hover:not([disabled]),
:root[data-theme] :is(input.input,select.input):hover { border-color: var(--ctl-edge-hi); }
:root[data-theme] :is(.btn,.chip,.rigtoggle,.transport,.picker__btn,.tstep,.seg button,.stepper button,.fb__pos,.fb__arp,.fb__play,.fbrec__rec,.ampsw,.minitog):active:not([disabled]) {
  background: var(--ctl-press); transform: translateY(1px); box-shadow: none;
}
:root[data-theme] :is(input.input, select.input):hover { border-color: var(--ctl-edge-hi); }

:root[data-theme] :is(input.input, select.input):focus { border-color: var(--ink); outline: none; }
/* On,
chosen,
running: the accent outline and text. */
:root[data-theme] :is(.btn,.chip,.rigtoggle,.transport,.seg button,.fb__pos,.fb__arp,.fb__play,.fbrec__rec,.ampsw,.minitog):is([aria-pressed="true"],[aria-checked="true"],.is-on,.is-active) {
  border-color: var(--accent); color: var(--accent); background: var(--field);
}
/* On, chosen. */
/* The accent buttons (Connect, a lesson's Next) keep their colour as an outline, not a fill. */
:root[data-theme] .btn:not(.btn--ghost) {  border-color: var(--accent); }
:root[data-theme] .btn:not(.btn--ghost):hover { border-color: var(--accent-2); color: var(--accent-2); background: var(--field); }
/* Menu options inside a pop-up: the same field and outline; the chosen one in the accent. */
:root[data-theme] .picker__opt { background: var(--field); border: 1.5px solid var(--ctl-edge); border-radius: 7px; box-shadow: none; }
:root[data-theme] .picker__opt[aria-selected="true"] { border-color: var(--accent); box-shadow: none; }
:root[data-theme] .picker__pop { background: var(--surface); border: 1.5px solid var(--ctl-edge); border-radius: 9px; }
/* A chevron, like the tempo field's arrows, instead of the solid triangle. */
:root[data-theme] .picker__caret {
  display: inline-block; width: 7px; height: 7px; margin: -3px 0 0 .5rem; font-size: 0; flex: none;
  border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: rotate(45deg); 
}

/* ── THE GOLDEN BOARD ─────────────────────────────────────────────────────────────
   One composed board: the neck, then the metronome (about 1.618 : 1, sharing the first screen on a desktop), then
   the routines. Every gap and size is a Fibonacci step (3 5 8 13 21 34 55 89 144 233); every control is one height;
   every piece of text is one of five sizes. The guitar is drawn as a real one: frets by the twelfth root of two,
   a bone nut, grain, wound strings. */
:root {
  --g3: 3px; --g5: 5px; --g8: 8px; --g13: 13px; --g21: 21px; --g34: 34px; --g55: 55px;
  --ctl: 42px;                      /* every button, menu, field and chip */
  --fs-title: 10px;                 /* the small title inside a control, and a caption */
  --fs-val: 15px;                   /* what a control holds */
  --fs-btn: 13px;                   /* a button's word */
  --fs-mono: 11px;                  /* numbers and stats */
  --fs-head: 21px;                  /* a card's name */
}

/* A control's title sits inside it, over its choice. */
.picker--titled .picker__btn { display: flex; align-items: center; justify-content: space-between; gap: var(--g13); padding: 0 var(--g13); text-align: left; }
.picker__face { display: flex; flex-direction: column; gap: var(--g3); min-width: 0; }
.picker__title {
  display: block; font: 600 var(--fs-title)/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute);
  white-space: nowrap;
}
:root[data-theme] .picker--titled .picker__cur { font: 700 var(--fs-val)/1 var(--sans); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.picker--titled .picker__cur svg { height: 16px; width: auto; display: block; }
.tcbar__unit > .rig__label { display: none; }

/* The cards: name and status only, at one height. */
.pedal { padding: var(--g21); }
.pedal__head { min-height: var(--g55); margin-bottom: var(--g13); padding-right: 0; gap: var(--g21); }
.pedal__id { gap: var(--g21); }
.pedal__art { width: var(--g21); height: var(--g21); }
:root[data-theme] .pedal__head h3 { font: 600 var(--fs-head)/1 var(--sans); }
.pedal__status:empty { display: none; }
.pedal__status { font-size: var(--fs-btn); color: var(--ink-mute); }
.pedal__headctl { align-items: center; }
.pedal--routines { grid-column: 1 / -1; }
.pedal--routines .met__routines { margin: 0; }

/* The fretboard's readout in the card's title line: the note, then what is held — a fixed slot, so nothing shifts. */
.fb__read { display: inline-flex; align-items: baseline; gap: var(--g8); flex: none; }
:root[data-theme] .fb__read b { font: 700 26px/1 var(--display); color: var(--ink); }
.fb__hz, .fb__read .scope__alt { font: 500 var(--fs-mono)/1 var(--mono); color: var(--ink-mute); }
.fb__summary:empty { display: none; }
.fb__summary { font-size: var(--fs-btn); color: var(--ink-mute); }

/* The control rows: no box around them, every control the same height, centred on one line. */
:root[data-theme] .pedal__body .tcbar { background: none; border: 0; box-shadow: none; padding: 0; margin: 0 0 var(--g21); gap: var(--g8); align-items: center; }
.tcbar__unit { gap: 0; }
:root[data-theme] .tcbar :is(.picker__btn, .chip, .minitog, .transport, .fbrec__rec, .tstep, .fb__play, .input) { height: var(--ctl); min-height: var(--ctl); box-sizing: border-box; }
:root[data-theme] .tcbar :is(.chip, .fbrec__rec, .fb__pos, .fb__arp) { font: 700 var(--fs-btn)/1 var(--sans); }
:root[data-theme] .tcbar .transport { margin-block: 0; padding: 0 var(--g21); font: 700 14px/1 var(--display); letter-spacing: .12em; }
:root[data-theme] .fbrec__rec { font: 700 var(--fs-btn)/1 var(--display); letter-spacing: .12em; padding: 0 var(--g13); }

/* Tap: a round, dished pad. */
:root[data-theme] .tcbar .minitog.tap {
  width: var(--ctl); height: var(--ctl); min-height: var(--ctl); padding: 0; border-radius: 50%;
  
  
  font: 700 11px/1 var(--display);  text-transform: uppercase; color: var(--ink);
}
:root[data-theme] .tcbar .minitog.tap:active { box-shadow: inset 0 6px 12px rgba(0,0,0,.75); transform: none; }

/* The tempo: its name, then − BPM +, the number large with its title inside. */
.tcbpm__box {
  display: flex; flex-direction: column; justify-content: center; gap: var(--g3); height: var(--ctl); box-sizing: border-box;
  padding: 0 var(--g5) 0 var(--g13); background: var(--field); border: 1.5px solid var(--ctl-edge-hi); border-radius: 7px; cursor: text;
}
:root[data-theme] .tcbpm__box input.tcbpm.input {
   min-height: 0;  padding: 0; border: 0; background: transparent; box-shadow: none;
   color: var(--ink); text-align: left;
}

:where(.pedal[data-bp~="min720"]) .met .tempo .tcbpm__box { order: 2; }
:root[data-theme] :where(.pedal[data-bp~="min720"]) .met .tempo .tstep {  height: var(--ctl); font-size: 21px; }

/* The fretboard: menus on the left, voicings and arpeggios at the right of the same line, then the neck. */

:where(.pedal[data-bp~="min720"]) .fb { display: flex; flex-wrap: wrap; column-gap: var(--g13); align-items: flex-start; }
:where(.pedal[data-bp~="min720"]) .fb > * { flex: 0 0 100%; min-width: 0; }
:where(.pedal[data-bp~="min720"]) .fb > .tcbar { flex: 0 1 auto; }
:where(.pedal[data-bp~="min720"]) .fb > .fb__side { flex: 0 0 auto; margin-left: auto;  margin-bottom: var(--g21); }

.fb__side { display: flex; align-items: center; gap: var(--g5); }
:root[data-theme] .fb__side :is(.fb__legend, .fb__arps) { display: flex; align-items: center; gap: var(--g5); margin: 0; flex-wrap: nowrap; }
.fb__side :is(.fb__legend, .fb__arps)[hidden] { display: none; }
.fb__side .fb__arps:not([hidden])::before { content: ""; width: 1px; height: var(--g34); background: var(--line); margin-right: var(--g5); }
:root[data-theme] .fb__side :is(.fb__pos, .fb__arp) {
  height: var(--ctl); display: inline-flex; align-items: center; gap: var(--g5); padding: 0 var(--g8); white-space: nowrap;
  font: 700 var(--fs-btn)/1 var(--sans); text-transform: none; letter-spacing: 0;
}
.fb__side .fb__swatch { width: 10px; height: 10px; border-radius: 50%; background: var(--pc); flex: none; }
:root[data-theme] .fb__side :is(.fb__pos, .fb__arp)[aria-pressed="true"] { border-color: var(--pc); color: var(--ink); }
:root[data-theme] .fb__side .fb__posfret { display: none; font: 600 var(--fs-btn)/1 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink-mute); }
:root[data-theme] .fb__side :is(.fb__pos, .fb__arp):is(:hover, :focus-visible) .fb__posfret { display: inline; }
.fb__side .fb__strum { font-size: 10px; opacity: .8; }

/* A real neck. */

:where(.pedal[data-bp~="min720"]) .fb__neck { min-width: 0; }
:where(.pedal[data-bp~="min720"]) .fb__dot { font-size: var(--fs-mono); }

.fb__row { background-image: repeating-linear-gradient(180deg, transparent 0 5px, rgb(80 50 20 / .07) 5px 6px, transparent 6px 13px); }
.fb[data-wood="ebony"] .fb__row, .fb[data-wood="rosewood"] .fb__row { background-image: repeating-linear-gradient(180deg, transparent 0 5px, rgb(255 255 255 / .03) 5px 6px, transparent 6px 13px); }
.fb__note { border-right-width: 3px; }
.fb__note--open { border-right: 8px solid var(--nut); }
.fb__row.is-wound::before {
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--string) 70%, #fff) 0 1px, color-mix(in srgb, var(--string) 70%, #000) 1px 2px);
}
.fb__inlay.is-single::after, .fb__inlay.is-double::before, .fb__inlay.is-double::after { width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; }

/* The beat view, with the timing bar along its foot: rushing left, dragging right, routines or not. */
.beatrow { gap: 0; }
.tline { display: flex;   margin-top: var(--g8); }
.tbar--line .tbar__zone { top: 0; bottom: 0; }
.tbar--line .tbar__zone--early { left: 0; right: 50%; }
.tbar--line .tbar__zone--late { left: 50%; right: 0; }
.tbar--line .tbar__pocket { top: 0; height: auto; bottom: 0; left: calc(50% - 8.33%); right: calc(50% - 8.33%); }
.tbar--line .tbar__centre { top: 0; bottom: 0; height: auto; left: calc(50% - 1px); right: auto; width: 2px; }
.tbar--line .tbar__hit { top: 0; bottom: 0; left: 50%; right: auto; width: 3px; height: auto; margin: 0 0 0 -1.5px; }
@keyframes tbar-hit-line { from { opacity: 1; transform: scaleX(2); } 25% { opacity: 1; transform: none; } to { opacity: 0; } }
.tbar--line .tbar__hit { animation-name: tbar-hit-line; }
.tline .tbar__stats { position: static; flex: none; gap: var(--g5); }
.tline .tstat { flex-direction: row-reverse; height: 21px; align-items: center; box-sizing: border-box; padding: 0 var(--g8); border-radius: 3px; background: none; border: 1px solid var(--line); font: 700 var(--fs-title)/1 var(--display); }
.tline .tstat b { font: 700 var(--fs-mono)/1 var(--mono); }

/* Loop cards: name, stats, time; Play, then edit. The card fills green as its loop plays. */
.loopcard { position: relative; overflow: hidden; width: 234px;  box-sizing: border-box;   border-radius: 8px; border-width: 1.5px; }
.loopcard.is-editing { width: 269px; }
.loopcard > :not(.loopcard__bar) { position: relative; z-index: 1; }
:root[data-theme] .loopcard__bar { position: absolute; inset: 0; height: auto;  background: none; z-index: 0; pointer-events: none; }
:root[data-theme] .loopcard__fill { background: color-mix(in srgb, var(--good) 30%, transparent); }
.loopcard__acts { display: flex; align-items: center; gap: var(--g5); }
:root[data-theme] .loopcard__acts .chip {   padding: 0 var(--g13); font: 700 12px/1 var(--sans); }
.loopcard.is-editing :is(.input, .picker__btn) { height: 29px; min-height: 29px; }

/* Phones keep their own layout above; these follow the same sizes. */

:where(.pedal[data-bp~="max719"]) .met .tempo .tcbpm__box { grid-area: num;  align-items: center; padding: 0 var(--g8); }
:root[data-theme] :where(.pedal[data-bp~="max719"]) .met .tempo .tcbpm__box input.tcbpm.input {   text-align: center; width: 100%; }
:where(.pedal[data-bp~="max719"]) .met .tempo .tcbpm__box .picker__title { display: none; }
:where(.pedal[data-bp~="max719"]) .tline .tbar__stats { display: none; }
:where(.pedal[data-bp~="max719"]) .tline { margin-top: var(--g5); }
.pedal:where([data-bp~="max719"]) { padding: var(--g13); }

/* One type scale everywhere on the board: 10 titles, 11 numbers, 13 buttons, 15 values, 21 names (26 the note). */
:root[data-theme] #board :is(.fb__hz, .scope__alt) { font-size: var(--fs-mono); }
:root[data-theme] .loopcard__name--static { font: 600 var(--fs-val)/1.2 var(--sans); }
:root[data-theme] .loopcard__stats--static, :root[data-theme] .loopcard__n { font: 500 var(--fs-mono)/1 var(--mono); }
:root[data-theme] .loopcard__time { font: 700 var(--fs-mono)/1 var(--mono); }
:root[data-theme] .loopcard__acts .chip { font-size: var(--fs-btn); }
:root[data-theme] .loops__toolbar .mute, :root[data-theme] .loops__toolbar .chip { font-size: var(--fs-btn); }
:root[data-theme] .met__seclabel { font: 700 var(--fs-title)/1 var(--display); letter-spacing: .14em; }
/* The routine's layer (READY, the speed curve, its progress) covers the beat view only, never the timing bar. */

/* Short enough that the neck and the metronome share one 900 px screen. */

/* The notes sit in the upper part of the beat view; the speed curve runs under them, never through them. */
:where(.pedal[data-bp~="min720"]) .beatviz .beatnotation { align-items: flex-start; padding-top: var(--g8); }
:where(.pedal[data-bp~="min720"]) .beatstage.has-routine .beatviz .beatnotation { padding-top: var(--g21); }

/* Voicings and arpeggios: one line that scrolls sideways under the menus. */
:where(.pedal[data-bp~="max719"]) .fb__side { overflow-x: auto; flex-wrap: nowrap; margin-bottom: var(--g8); padding-bottom: 2px; scrollbar-width: none; }
:where(.pedal[data-bp~="max719"]) .fb__side::-webkit-scrollbar { display: none; }
:where(.pedal[data-bp~="max719"]) .fb__side:not(:has(.fb__legend:not([hidden]), .fb__arps:not([hidden]))) { display: none; }

/* Narrower than 900: the readout and what is held get their own line under the card's name, one fixed height, so
   holding notes never moves anything; a long name scrolls sideways rather than wrapping. */

[data-pedal="fret"]:where([data-bp~="max900"]) .pedal__id { flex-wrap: wrap; row-gap: var(--g8); }

/* Routines switched off and the practice log closed: the routines card has nothing to show. */
.pedal--routines:has([data-routinesbody][hidden]):has(.report[hidden]) { display: none; }

/* One header line whatever is held: the name and its buttons first, anything more trims to fit. */
:where(.pedal[data-bp~="min901"]) .pedal__head { flex-wrap: nowrap; }
:where(.pedal[data-bp~="min901"]) .pedal__id { flex: 1 1 auto; min-width: 0; }
:where(.pedal[data-bp~="min901"]) .pedal__headctl { flex: none; }

/* An open loop card: only about 15% bigger than a closed one, its fields in one even row, its buttons in one line. */
:root[data-theme] .loopcard.is-editing .loopcard__stats:not(.phrasecard__play) {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--g5); align-items: center; flex-wrap: nowrap;
}
:root[data-theme] .loopcard.is-editing .loopcard__stat { min-width: 0; display: flex; align-items: center; gap: 0; }
:root[data-theme] .loopcard.is-editing .loopcard__stat::after { content: none; }
:root[data-theme] .loopcard.is-editing .loopcard__unit { display: none; }
:root[data-theme] .loopcard.is-editing [data-barpick] { display: none; }
:root[data-theme] .loopcard.is-editing .tempo { display: block; width: 100%; }
:root[data-theme] .loopcard.is-editing :is(input.input, .picker__btn) {
  width: 100%; min-width: 0; height: 29px; min-height: 29px; padding: 0 var(--g5); font: 700 var(--fs-btn)/1 var(--sans); text-align: center;
}
:root[data-theme] .loopcard.is-editing .picker__btn { justify-content: center; gap: var(--g3); }
:root[data-theme] .loopcard.is-editing .picker__btn svg { height: 14px; width: auto; }
:root[data-theme] .loopcard.is-editing .loopcard__name { height: 29px; min-height: 29px; font: 600 var(--fs-val)/1 var(--sans); text-align: left; padding: 0 var(--g8); }
:root[data-theme] .loopcard.is-editing .loopcard__acts { gap: var(--g3); }
:root[data-theme] .loopcard.is-editing .loopcard__acts .chip { padding: 0 var(--g8); }
:root[data-theme] .loopcard.is-editing .loopcard__acts :is([data-up], [data-down], [data-del]) { width: 26px; padding: 0; justify-content: center; }
.loopcard__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--g5); }
.loopcard__foot { flex-wrap: wrap; }   /* an opened card's buttons drop under its time rather than crush it (a 320 px phone) */
.loopcard__foot > .loopcard__time { flex-shrink: 0; }
:root[data-theme] .loopcard__acts .loopcard__icon {  padding: 0; justify-content: center; font-size: 11px; }
/* The last strays onto the scale: units and the tuner's word at title size, Start at button size, the beat view's
   heading at value size. */
:root[data-theme] #board .loopcard__unit { font-size: var(--fs-mono); }
:root[data-theme] #board .fbtn__off { font-size: var(--fs-title); }
:root[data-theme] #board .tcbar .transport { font-size: var(--fs-btn); }
:root[data-theme] #board .take__phase { font-size: var(--fs-val); }

/* ── DESIGN QA, 8 Oct ─────────────────────────────────────────────────────────────
   One button type (bold, sentence case, no spaced capitals), text centred in every button, same corners side by
   side, the BPM field a value like any other, TAP centred, Phrase sound a titled toggle, stronger chevrons. */
:root[data-theme] #board :is(.tcbar .transport, .fbrec__rec) {
  font: 700 var(--fs-btn)/1 var(--sans); letter-spacing: 0; text-transform: none;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--g8);
}
:root[data-theme] #board :is(.chip, .loopcard__acts .chip, .fb__ident .chip) {
  display: inline-flex; align-items: center; justify-content: center; line-height: 1; padding-top: 0; padding-bottom: 0;
}
:root[data-theme] .loopcard__acts .loopcard__edit { border-radius: 7px;  }
:root[data-theme] .tcbar .minitog.tap { display: grid; place-items: center; letter-spacing: .1em; text-indent: .1em; }
/* BPM: its number in the values' type, whole, with the same outline as the rest and no native arrows (− + do that). */
:root[data-theme] .tcbpm__box { border-color: var(--ctl-edge); }
:root[data-theme] .tcbpm__box:focus-within { border-color: var(--ctl-edge-hi); }
:root[data-theme] .tcbpm__box input.tcbpm.input {
  height: auto; font: 700 var(--fs-val)/1 var(--sans); width: 3.2rem; -moz-appearance: textfield; appearance: textfield;
}
.tcbpm__box input.tcbpm::-webkit-inner-spin-button, .tcbpm__box input.tcbpm::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* Phrase sound: a titled toggle like the menus beside it; its value says on or off, so no accent outline. */
:root[data-theme] .tcbar .psound { display: flex; align-items: center; justify-content: flex-start;  text-align: left; }
:root[data-theme] .tcbar .psound[aria-pressed] {  color: var(--ink); }
:root[data-theme] .tcbar .psound .picker__cur { font: 700 var(--fs-val)/1 var(--sans); color: var(--ink); }
/* Chevrons as heavy as the words they sit beside. */
:root[data-theme] .picker__caret { border-right-width: 2.2px; border-bottom-width: 2.2px; opacity: 1; }
/* The fretboard's line holds the menus, Record, Phrase sound and the voicings: a long tuning name trims ("…")
   rather than pushing anything onto a second line. */
:root[data-theme] [data-tuningpick] .picker__btn { max-width: 160px; }
:root[data-theme] [data-tuningpick] .picker__face { min-width: 0; }
:root[data-theme] .tcbar .psound { padding: 0 var(--g8) 0 var(--g13); }
.fb > .tcbar { flex-wrap: nowrap; }
:root[data-theme] .tcbar .fbrec__ctl { display: flex; align-items: center; gap: var(--g8); flex-wrap: nowrap; margin: 0; }
:root[data-theme] .tcbar .fbrec__ctl > * { margin: 0; }
/* A pressed button stays on its row's line (the old "pushed in" nudge broke the alignment); its accent says it. */
:root[data-theme] #board :is(.chip, .psound, .loopcard__edit)[aria-pressed="true"] { transform: none; }
:root[data-theme] #board .take__meta { font-size: var(--fs-mono); }

:root[data-theme] :where(.pedal[data-bp~="max719"]) .met .tempo .tcbpm__box input.tcbpm.input {  line-height: 42px; }
/* What is held, on a phone: the kind and its name, Strum and Clear; the rest is on wider screens. */

/* A card's stats are one line, every card alike. */
:root[data-theme] .loopcard__stats--static { flex-wrap: nowrap; white-space: nowrap; overflow: hidden; gap: var(--g5); }
:root[data-theme] .loopcard__stats--static .loopcard__stat::after { margin-left: var(--g5); }
:root[data-theme] #board .take__time { font-size: var(--fs-mono); }

/* ── REFINEMENT, 8 Oct (after v284) ──────────────────────────────────────────────── */

/* Soft-fill buttons: a shade off the card, a faint outline, text a touch softer. Blended, still clearly buttons.
   What is on or chosen wears a soft accent tint. Sizes untouched. */
:root {
  --ctl-bg: color-mix(in srgb, var(--surface) 93%, var(--ink));
  --ctl-edge: color-mix(in srgb, var(--ink) 16%, transparent);
  --ctl-edge-hi: color-mix(in srgb, var(--ink) 32%, transparent);
  --ctl-press: color-mix(in srgb, var(--surface) 86%, var(--ink));
  --ctl-on: color-mix(in srgb, var(--accent) 14%, var(--ctl-bg));
}
:root[data-theme] :is(.btn,.chip,.rigtoggle,.transport,.picker__btn,.tstep,.seg button,.stepper button,.fb__pos,.fb__arp,.fb__play,.fbrec__rec,.ampsw,.minitog),
:root[data-theme] input.input,
:root[data-theme] select.input,
:root[data-theme] input[type="number"].input,
:root[data-theme] .tcbpm__box,
:root[data-theme] .picker__opt {
  background: var(--ctl-bg); border-color: var(--ctl-edge); color: var(--ink-body);
}
:root[data-theme] input.input, :root[data-theme] select.input, :root[data-theme] input[type="number"].input,
:root[data-theme] .tcbpm__box, :root[data-theme] .picker__opt {
  background: var(--ctl-bg); border-color: var(--ctl-edge); color: var(--ink-body);
}
:root[data-theme] .picker--titled .picker__cur, :root[data-theme] .tcbar .psound .picker__cur { color: var(--ink-body); }
:root[data-theme] :is(.btn,.chip,.rigtoggle,.transport,.picker__btn,.tstep,.seg button,.fb__pos,.fb__arp,.fb__play,.fbrec__rec,.ampsw,.picker__opt):hover:not([disabled]) { border-color: var(--ctl-edge-hi); }
:root[data-theme] :is(.btn,.chip,.rigtoggle,.transport,.seg button,.fb__pos,.fb__arp,.fb__play,.fbrec__rec,.ampsw):is([aria-pressed="true"],[aria-checked="true"],.is-on,.is-active), :root[data-theme] .picker__opt[aria-selected="true"] {
  background: var(--ctl-on); border-color: color-mix(in srgb, var(--accent) 55%, transparent); color: var(--ink);
}

:root[data-theme] .picker__opt[aria-selected="true"] {
  background: var(--ctl-on); border-color: color-mix(in srgb, var(--accent) 55%, transparent); color: var(--ink);
}
:root[data-theme] .btn:not(.btn--ghost) { color: var(--ink); border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: var(--ctl-on); }
:root[data-theme] .tcbar .psound[aria-pressed] { background: var(--ctl-bg); border-color: var(--ctl-edge); }
:root[data-theme] .tcbar .minitog.tap {
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--ctl-bg) 80%, #000) 0%, var(--ctl-bg) 70%);
  box-shadow: inset 0 3px 6px rgba(0,0,0,.35), inset 0 -1px 2px color-mix(in srgb, var(--ink) 6%, transparent);
}
:root[data-theme] .loopcard__acts .loopcard__edit { background: var(--ctl-bg); }

/* The neck: electric 20% shallower than before, acoustic at the old electric height. */
:where(.pedal[data-bp~="min720"]) .fb { --fb-row: 27px; --fb-dot: 22px; }
:where(.pedal[data-bp~="min720"]) .fb[data-neck="acoustic"] { --fb-row: 34px; --fb-dot: 25px; }
:where(.pedal[data-bp~="min720"]) .fb[data-neck="electric"] .fb__dot { font-size: var(--fs-title); }
/* The beat view as tall as the electric neck (6 strings × 27). */
/* − BPM + as one control: one outline, hairline dividers, narrow steps. */
:where(.pedal[data-bp~="min720"]) .met .tempo { gap: 0; }
:where(.pedal[data-bp~="min720"]) .met .tempo [data-tempopick] { margin-right: var(--g8); }
:root[data-theme] :where(.pedal[data-bp~="min720"]) .met .tempo .tstep { width: 29px; border-radius: 0; }
:root[data-theme] :where(.pedal[data-bp~="min720"]) .met .tempo .tstep--down { border-radius: 7px 0 0 7px; border-right-width: 0; }
:root[data-theme] :where(.pedal[data-bp~="min720"]) .met .tempo .tstep--up { border-radius: 0 7px 7px 0; border-left-width: 0; }
:root[data-theme] :where(.pedal[data-bp~="min720"]) .met .tempo .tcbpm__box { border-radius: 0; border-left: 1px solid var(--ctl-edge); border-right: 1px solid var(--ctl-edge); }
/* Signature and Rhythm, 30% narrower. */
:root[data-theme] :where(.pedal[data-bp~="min720"]) [data-sigpick] .picker__btn { width: 74px; min-width: 0; padding: 0 var(--g8) 0 var(--g13); }
:root[data-theme] :where(.pedal[data-bp~="min720"]) [data-patbtn] { width: 65px; min-width: 0; padding: 0 var(--g8) 0 var(--g13); }

/* The rush/drag bar: three times taller, two thirds as wide, centred under the notes with its numbers beside it. */
.tline { justify-content: center; }
.tbar--line { flex: 0 0 auto; width: 58%; height: 39px; border-radius: 8px; }

:where(.pedal[data-bp~="max719"]) .tbar--line { width: 100%; height: 21px; }

/* Loop cards, 20% shorter. */
.loopcard { padding: var(--g8) var(--g13); gap: var(--g5); }
:root[data-theme] .loopcard__acts .chip { height: 26px; min-height: 26px; }
:root[data-theme] .loopcard__acts .loopcard__icon { width: 26px; }

/* Themes: every one on one line in Settings, a swatch of its ground and accent with its name. */
.themerow { display: flex; gap: var(--g5); overflow-x: auto; scrollbar-width: none; }
.themerow::-webkit-scrollbar { display: none; }
:root[data-theme] .themerow__opt {
  flex: none; display: inline-flex; align-items: center; gap: var(--g5); height: 34px; padding: 0 var(--g8) 0 var(--g5);
  border: 1.5px solid var(--ctl-edge); border-radius: 7px; background: var(--ctl-bg); color: var(--ink-body);
  font: 700 var(--fs-btn)/1 var(--sans); cursor: pointer;
}
:root[data-theme] .themerow__opt:hover { border-color: var(--ctl-edge-hi); }
:root[data-theme] .themerow__opt[aria-checked="true"] { background: var(--ctl-on); border-color: color-mix(in srgb, var(--accent) 55%, transparent); color: var(--ink); }
.themerow__opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.themerow__sw {
  width: 21px; height: 21px; border-radius: 5px; flex: none;
  background: linear-gradient(135deg, var(--sw-bg) 0 58%, var(--sw-ac) 58% 100%); box-shadow: inset 0 0 0 1px rgba(128,128,128,.35);
}

/* The tuner, as one unit captioned TUNER: the meter, and under it the Concert A drones while it is on.
   Off, the drones go and the meter says so in red. */
.tcbar__unit--meter.tuner { display: flex; flex-direction: column; align-items: center;  }
.tuner > .rig__label { display: none; }
.tuner__name { font: 600 var(--fs-title)/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); }
.tuner .fbtn { gap: var(--g5); }
:root[data-theme] .tuner .fbtn__meter { width: 96px; }
:root[data-theme] .tuner .fbtn__off { font: 700 var(--fs-title)/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--bad); white-space: nowrap; }
.tuner .seg { display: flex; gap: var(--g3); }
:root[data-theme] .tuner .seg button {   padding: 0 var(--g5); border-radius: 5px; font: 700 var(--fs-mono)/1 var(--mono); border-width: 1.5px; border-style: solid; }
.tuner .fbtn__cents:empty, .tuner .fbtn__cents[hidden] { display: none; }

:root[data-theme] :where(.pedal[data-bp~="min720"]) :is([data-sigpick] .picker__btn, [data-patbtn]) { gap: var(--g5); }
:where(.pedal[data-bp~="min720"]) .tline { margin-top: var(--g5); }
:where(.pedal[data-bp~="min720"]) .beatrow { margin-bottom: var(--g13); }

.loopcard { min-height: 0; }
@media (max-width: 719px) {
  /* On a phone the seven swatches alone fill the line; each still says its name to a screen reader. */
  .themerow { justify-content: space-between; }
  .themerow__name { display: none; }
  :root[data-theme] .themerow__opt { width: 42px; height: 42px; padding: 0; justify-content: center; }
  .themerow__sw { width: 26px; height: 26px; }
}

@media (min-width: 720px) {
  .themerow__sw { width: 15px; height: 15px; border-radius: 4px; }
  :root[data-theme] .themerow__opt { padding: 0 var(--g8) 0 var(--g5); gap: var(--g5); }
  .themerow { gap: var(--g3); }
}

/* The tuner keeps one height on or off (meter 21 + drones 21 + name), so switching it never moves the neck:
   off, the drones are invisible but keep their room. */
:root[data-theme] .tuner .fbtn__meter { height: 21px; min-height: 21px; }
:root[data-theme] .tuner .seg { height: 21px; }
:root[data-theme] .tuner .seg[hidden] { display: flex !important; visibility: hidden; }
:root[data-theme] .tuner .seg button { height: 21px; min-height: 21px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; }
.tcbar__unit--meter.tuner { gap: var(--g3); }

/* ── BUB CHEERS (ui/cheer.js) ──────────────────────────────────────────────────────
   To the right of the big count, as big as its numbers, a speech bubble above him; bounces in, bobs, goes. */
.cheer {
  position: fixed; z-index: 111; pointer-events: none;
  left: calc(50% + min(52vh, 40vw) * .34); top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--g8);
  opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility 0s linear .35s;
}
.cheer.is-on { opacity: 1; visibility: visible; transition: opacity .2s var(--ease); }
.cheer__bub {  width: auto; filter: drop-shadow(0 8px 21px rgb(0 0 0 / .45)); transform-origin: 50% 100%; }
.cheer.is-on .cheer__bub { animation: cheer-in .6s cubic-bezier(.2, 1.6, .4, 1) both, cheer-bob 1.3s ease-in-out .6s infinite; }
.cheer__say {
  order: -1; margin: 0;  padding: var(--g13) var(--g21); position: relative;
  background: var(--surface); color: var(--ink); border: 1.5px solid var(--ctl-edge-hi); border-radius: 21px;
  font: 700 var(--fs-val)/1.35 var(--sans); box-shadow: 0 8px 21px rgb(0 0 0 / .35);
}
.cheer__say::after {
  content: ""; position: absolute; left: var(--g34); bottom: -9px; width: 16px; height: 16px; transform: rotate(45deg);
  background: var(--surface); border-right: 1.5px solid var(--ctl-edge-hi); border-bottom: 1.5px solid var(--ctl-edge-hi);
}
.cheer.is-on .cheer__say { animation: cheer-pop .45s cubic-bezier(.2, 1.4, .4, 1) .1s both; }
@keyframes cheer-in { 0% { transform: translateY(40%) scale(.4) rotate(-12deg); opacity: 0; } 60% { transform: translateY(-6%) scale(1.06) rotate(4deg); opacity: 1; } 100% { transform: none; } }
@keyframes cheer-bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-5%) rotate(-3deg); } }
@keyframes cheer-pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 719px) {
  .cheer__say { font-size: var(--fs-btn); padding: var(--g8) var(--g13);  }
}

@media (prefers-reduced-motion: reduce) { .cheer.is-on :is(.cheer__bub, .cheer__say) { animation: none; } }

/* ── LOOP EDITOR MENUS ON TOP; NOTATION 2×; THE ROUTINE'S CURVE ─────────────────── */
/* The open card no longer clips (its fill clips itself), so its menus open above everything. */
.loopcard.is-editing { overflow: visible; z-index: 5; }
:root[data-theme] .loopcard__bar { border-radius: inherit; overflow: hidden; }
.loopcard .picker__pop { z-index: 60; }
/* The row of loop cards always scrolls sideways inside its card: an open editor's menus float above it on their
   own (pickers in loop cards are position: fixed), so the row never has to spill out past the frame. */

/* The notation twice as large in the beat view. */
:where(.pedal[data-bp~="min720"]) .beatviz .beatbeat svg { height: 110px; width: auto; }
:where(.pedal[data-bp~="min720"]) .beatviz .beatnotation,
:where(.pedal[data-bp~="min720"]) .beatstage.has-routine .beatviz .beatnotation { padding-top: var(--g5); align-items: flex-start; }

/* The whole routine's curve: the playing loop bright, the others dim, a tick between loops. */
.take__path { opacity: .28; }
.take__cur { fill: none; stroke: var(--ink); stroke-width: 2; vector-effect: non-scaling-stroke; opacity: .85; }
.take__ticks { fill: none; stroke: var(--ink-mute); stroke-width: 1.5; vector-effect: non-scaling-stroke; opacity: .9; }
/* In an open card the rows share one layer, so a menu in one row rises above the rows after it. */
.loopcard.is-editing > :not(.loopcard__bar) { z-index: auto; }

/* With the notation twice as large, the routine's curve runs in a slim band under it, never through the notes. */

/* ── PROGRESS DASHBOARD (9 Oct) ─────────────────────────────────────────────────────
   One line of what matters, then cards: Calendar | Today | Awards, then Tempo | Lessons. */
:root[data-theme] .report:has(.pdash) { padding: 0; border: 0; background: none; }
.pdash { --bronze: #C8874A; --silver: #B9C3CF; --gold: #F0BE45; --platinum: #8FE3DA; display: flex; flex-direction: column;  }
.pdash__card { box-sizing: border-box;  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  display: flex; flex-direction: column;  min-width: 0; }
.pdash__grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--g13); }
.pdash__grid3 > .pdash__card { min-height: 377px; }
.pdash__head { display: flex; justify-content: space-between; align-items: center; gap: var(--g8); min-height: 29px; }
.pdash__head h3 { margin: 0; font: 700 var(--fs-val)/1.2 var(--sans); color: var(--ink); display: flex; align-items: baseline; gap: var(--g8); }
/* A card's head wraps rather than run off a phone: the tempo card's loop menu (a long loop name) drops under its title
   and shortens to fit, ending in "…". */
.pdash__head { flex-wrap: wrap; }
.pdash__head > .picker { min-width: 0; max-width: 100%; }
:root[data-theme] .pdash__head > .picker > .picker__btn { max-width: 100%; }
:root[data-theme] .pdash__head > .picker .picker__face { min-width: 0; overflow: hidden; }
:root[data-theme] .pdash__head > .picker .picker__cur { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdash__title { display: block; font: 600 var(--fs-title)/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); }
.pdash__mono { font: 500 var(--fs-mono)/1.2 var(--mono); color: var(--ink-mute); white-space: nowrap; }
.pdash__ink { color: var(--ink-body); }
.pdash__good { color: color-mix(in srgb, var(--good) 80%, var(--ink)); }
.pdash__big { font: 700 26px/1 var(--display); color: var(--ink); white-space: nowrap; }
.pdash__empty { margin: 0; color: var(--ink-mute); font-size: var(--fs-btn); }
.pdash__bar { display: block; position: relative; height: 8px; border-radius: 4px; background: var(--ctl-bg); overflow: hidden; }
.pdash__bar > span { position: absolute; inset: 0 auto 0 0; background: var(--accent); border-radius: 4px; }
.pdash__bar--gold { height: 5px; background: var(--line); }
.pdash__bar--gold > span { background: var(--gold, #E8A64A); }
.pdash__rule { display: block; height: 1px; background: var(--line); margin: 3px 0; }

/* Hero: level, today ring, streak, points, fastest, all time */
.pdash__hero { flex-direction: row; align-items: center;    flex-wrap: wrap; }
.pdash__lvl { display: flex; align-items: center; gap: var(--g13); }
.pdash__lvlnum { width: 55px; height: 55px; display: grid; place-items: center; border-radius: 13px; background: var(--ctl-on); border: 1.5px solid color-mix(in srgb, var(--accent) 55%, transparent);
  font: 700 34px/1 var(--display); color: var(--accent); }
.pdash__lvlbody { display: flex; flex-direction: column; gap: var(--g8); width: 233px; }
.pdash__lvlline { display: flex; justify-content: space-between; align-items: baseline; gap: var(--g8); }
.pdash__lvlline b { font-size: var(--fs-val); color: var(--ink); white-space: nowrap; }
.pdash__stat { display: flex; align-items: center; gap: var(--g13); }
.pdash__stat > .pdash__title + .pdash__big, .pdash__statbody { display: flex; flex-direction: column; gap: var(--g5); }
.pdash__stat:not(.pdash__today) { flex-direction: column; align-items: flex-start; gap: var(--g5); }
.pdash__today .prog__ring { width: 55px; height: 55px; }

/* Today: quests with rings, then a short log */
.pdash__quest { height: 42px; box-sizing: border-box; padding: 0 var(--g13); background: var(--ctl-bg); border: 1.5px solid var(--ctl-edge); border-radius: 7px;
  display: flex; align-items: center; gap: var(--g13); }
.pdash__qring { flex: none; width: 21px; height: 21px; border-radius: 50%; background: conic-gradient(var(--good) 0 var(--p), var(--ctl-edge-hi) var(--p) 100%); }
.pdash__quest.is-done .pdash__qring { box-shadow: 0 0 6px color-mix(in srgb, var(--good) 60%, transparent); }
.pdash__qtext { flex: 1; min-width: 0; font-size: var(--fs-btn); font-weight: 600; line-height: 1.2; color: var(--ink-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdash__quest.is-done .pdash__qtext { color: var(--ink-mute); text-decoration: line-through; }
.pdash__rows { display: flex; flex-direction: column; gap: var(--g8); overflow: auto; }
.pdash__row { display: grid; grid-template-columns: minmax(0, 1fr) 55px 89px 34px; align-items: center; gap: var(--g8); font-size: var(--fs-btn); }
.pdash__row > .pdash__mono { text-align: right; }
.pdash__name { display: flex; align-items: center; gap: var(--g5); min-width: 0; font-weight: 600; color: var(--ink); }
.pdash__name > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* A narrow card (a phone, or three cards across in the Mac app's window): each practice row is two lines, the loop's
   name across the top and its figures under it at the right (side by side, the figures left the name a letter or two). */
.pdash__rows { container: prows / inline-size; }
@container prows (max-width: 420px) {
  .pdash__row { grid-template-columns: minmax(0, 1fr) auto auto auto; grid-template-areas: "name name name name" ". time clean delta"; row-gap: 2px; }
  .pdash__row > :nth-child(1) { grid-area: name; }
  .pdash__row > :nth-child(2) { grid-area: time; }
  .pdash__row > :nth-child(3) { grid-area: clean; }
  .pdash__row > :nth-child(4) { grid-area: delta; }
}

/* Calendar (left) */
.pdash__cal .cal { display: flex; flex-direction: column; gap: var(--g13); flex: 1; }
.pdash__cal .cal__nav { margin: 0; font-size: var(--fs-val); }
.pdash__cal .cal__nav .chip { width: 29px; height: 29px; padding: 0; justify-content: center; }
.pdash__cal .cal__dow { font: 600 var(--fs-title)/1.6 var(--display); letter-spacing: .12em; }
.pdash__cal .cal__grid .cal__cell:not(.is-empty) {  aspect-ratio: auto; font: 500 var(--fs-mono)/1 var(--mono); }
.pdash__cal .cal__cell.is-l0 { background: var(--ctl-bg); }
.pdash__cal .cal__key { margin-top: auto; font-size: var(--fs-mono); gap: var(--g5); }
.pdash__cal .cal__key .cal__cell { width: 10px; height: 10px; border-radius: 3px; box-shadow: none; margin-left: var(--g8); }
.pdash__cal .cal__key .cal__cell:first-child { margin-left: 0; }

/* Awards (right) */
.pdash__award { height: 68px; box-sizing: border-box; padding: 0 var(--g13); background: var(--ctl-bg); border: 1.5px solid var(--ctl-edge); border-radius: 7px;
  display: flex; align-items: center; gap: var(--g13); --metal: var(--line-2); }
.pdash__award.is-t1 { --metal: var(--bronze); } .pdash__award.is-t2 { --metal: var(--silver); } .pdash__award.is-t3 { --metal: var(--gold); }
.pdash__award.is-t0 .ach__medal { background: var(--well); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.pdash__award.is-t0 .ach__icon { stroke: var(--ink-mute); }
.pdash__award .ach__medal { width: 42px; height: 42px; }
.pdash__awardbody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--g5); }
.pdash__awardline { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px var(--g8); }   /* the figures go under the name when both do not fit */
.pdash__awardline b { font-size: var(--fs-btn); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdash__more { margin-top: auto; height: 34px; justify-content: center; }
.pdash__allawards .prog__ach { margin: 0; }
.pdash__allawards .prog__ach summary { font: 600 var(--fs-title)/1.6 var(--display); letter-spacing: .12em; }
.pdash__allawards .ach__name { font-size: var(--fs-btn); }
.pdash__allawards .ach__tier { font-size: var(--fs-title); }
.pdash__allawards .ach__next { font-size: var(--fs-mono); }

/* One button size in the dashboard; grades and the exercise menu on the scale. */
:root[data-theme] .pdash .chip { font: 700 var(--fs-btn)/1 var(--sans); }
.pdash .school__grade { font-size: var(--fs-mono); }
:root[data-theme] .pdash .picker__cur { font-size: var(--fs-btn); }
/* Tempo and Lessons */
.pdash__still { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--g8); text-align: center;
  background: var(--well); border: 1px solid var(--line); border-radius: 5px; padding: var(--g13); }
.pdash__still .pdash__big { font-size: 34px; }
.pdash__still > span { font-size: var(--fs-btn); color: var(--ink-mute); }
.pdash__tempo .tempo__plot { flex: 1; }
.pdash__review { height: 34px; background: var(--ctl-on); border-color: color-mix(in srgb, var(--accent) 55%, transparent); color: var(--ink); }
.pdash__track { display: grid; grid-template-columns: 89px minmax(0, 1fr) 55px 55px; align-items: center; gap: var(--g13); font-size: var(--fs-btn); }
.pdash__track > b { color: var(--ink); }
.pdash__track.is-quiet > b { color: var(--ink-mute); }
.pdash__track > .pdash__mono { text-align: right; }

:where(.pedal[data-bp~="max900"]) .pdash__grid3 { grid-template-columns: minmax(0, 1fr); }
:where(.pedal[data-bp~="max900"]) .pdash__grid3 > .pdash__card { min-height: 0; }

:where(.pedal[data-bp~="max900"]) .pdash__lvl { flex-basis: 100%; }
:where(.pedal[data-bp~="max900"]) .pdash__lvlbody { flex: 1; width: auto; }
:where(.pedal[data-bp~="max900"]) .pdash__card { padding: var(--g13); }
:where(.pedal[data-bp~="max900"]) .pdash__track { grid-template-columns: 76px minmax(0, 1fr) 42px 55px; gap: var(--g8); }

/* ── YOUR MOCK-UP EDITS (9 Oct) ───────────────────────────────────────────────────
   Offset · Spread · Pocket sit right on top of the rush/drag bar; voicing chips 84 × 38, arpeggios 66 × 31;
   the BPM number in italics; loop cards 105 tall with an Edit button. */
.tline { flex-direction: column; align-items: center; gap: var(--g5); }
:root[data-theme] .fb__side .fb__pos { height: 38px; min-width: 84px; justify-content: center; }
:root[data-theme] .fb__side .fb__arp { height: 31px; min-width: 66px; justify-content: center; }
:root[data-theme] .tcbpm__box input.tcbpm.input { font-style: italic; }
.loopcard:not(.is-editing) { height: 105px; }
/* The routine's layer stops above the stats too, now that they sit on the bar (5 + 21 + 5 + 39). */

:where(.pedal[data-bp~="min720"]) .beatstage .take { inset: 0 0 70px 0; }

/* The masthead at 57 px, as in your mock-up (phones keep their own). */

/* At 84 px a voicing chip holds its colour and its shape; the strum mark shows on hover, with the fret. */
:root[data-theme] .fb__side .fb__pos .fb__strum { display: none; }
:root[data-theme] .fb__side .fb__pos:is(:hover, :focus-visible) .fb__strum { display: inline; }

/* ── BUB THE ROCKSTAR (10 Oct) ──────────────────────────────────────────────────────
   15% bigger, on the count's right or its left at random, ten seconds, a cheer then a tip. */
.cheer__bub { height: min(41.4vh, 32.2vw); }
.cheer[data-side="left"] { left: auto; right: calc(50% + min(52vh, 40vw) * .34); align-items: flex-end; }
.cheer[data-side="left"] .cheer__say::after { left: auto; right: var(--g34); }
.cheer__say { display: flex; flex-direction: column; gap: var(--g8); max-width: min(360px, 44vw); }
.cheer__cheer { font: 700 var(--fs-head)/1.2 var(--display); letter-spacing: .01em; color: var(--accent); }
.cheer__tip { display: flex; flex-direction: column; gap: var(--g3); padding-top: var(--g8); border-top: 1px solid var(--line); }
.cheer__tiptitle { font: 600 var(--fs-title)/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); }
.cheer__tiptext { font: 600 var(--fs-btn)/1.35 var(--sans); color: var(--ink); }
.cheer__tiptext:empty, .cheer__tip:has(.cheer__tiptext:empty) { display: none; }
@media (max-width: 719px) {
  /* Phones: too narrow beside the count, so Bub stands at the bottom, left or right, his bubble beside him. */
  .cheer,
  .cheer[data-side="left"] { left: var(--g13); right: var(--g13); top: auto; bottom: 89px; transform: none;
    flex-direction: row-reverse; align-items: flex-end; gap: 0; }
  .cheer[data-side="left"] { flex-direction: row; }
  .cheer__bub { height: min(26vh, 36vw); }
  .cheer__say { order: 0; flex: 1; max-width: none; margin-bottom: 21%; }
  .cheer__say::after { left: auto; right: -9px; bottom: var(--g21); transform: rotate(-45deg); }
  .cheer[data-side="left"] .cheer__say::after { right: auto; left: -9px; transform: rotate(135deg); }
  .cheer__cheer { font-size: var(--fs-val); }
}

/* ── BUB TEACHES (ui/teacher.js) ──────────────────────────────────────────────────────
   A lesson or the tour: Bub at the bottom right, the lesson in his speech bubble beside him. The lessons list
   stays in its drawer on the left. "How to use GuitarBub" sits in the masthead, right of the logo. */
.masthead .shell > .bubmenu { margin-right: auto; }
:root[data-theme] .tourbtn {
  height: 29px; padding: 0 var(--g13); border-radius: 15px; white-space: nowrap; cursor: pointer;
  background: var(--ctl-bg); color: var(--ink); border: 1.5px solid var(--ctl-edge); font: 700 var(--fs-btn)/1 var(--sans);
}
:root[data-theme] .tourbtn:hover { border-color: var(--ctl-edge-hi); }
@media (min-width: 720px) {
  .school { top: calc(var(--mast-h, 57px) + env(safe-area-inset-top)); }
}

.teach {
  position: fixed; z-index: 104; right: var(--g21); bottom: var(--g13);
  display: flex; align-items: flex-end; gap: 0; pointer-events: none;
}
.teach[hidden] { display: none; }
.teach__bub { flex: none; height: min(36vh, 280px); width: auto; margin-left: -8px; filter: drop-shadow(0 8px 21px rgb(0 0 0 / .45));
  transform-origin: 50% 100%; animation: teach-bob 2.6s ease-in-out infinite; }
.teach__say {
  pointer-events: auto; position: relative; box-sizing: border-box; margin-bottom: var(--g21);
  width: min(700px, calc(100vw - var(--school-w, 0px) - 330px)); min-width: 300px; max-height: calc(100vh - var(--mast-h, 57px) - 55px);
  overflow: auto; 
  background: var(--surface); color: var(--ink-body); border: 1.5px solid var(--ctl-edge-hi); border-radius: 21px;
  box-shadow: 0 13px 34px rgb(0 0 0 / .4);
}
/* The bubble's tail, pointing at Bub. */
.teach::before {
  content: ""; position: absolute; z-index: 1; right: calc(min(36vh, 280px) - 17px); 
  width: 16px; height: 16px; transform: rotate(-45deg); background: var(--surface);
  border-right: 1.5px solid var(--ctl-edge-hi); border-bottom: 1.5px solid var(--ctl-edge-hi);
}
.teach__say .school__say--lead, .teach__say .school__say { display: none; }
.teach.is-arriving .teach__bub { animation: cheer-in .6s cubic-bezier(.2, 1.6, .4, 1) both, teach-bob 2.6s ease-in-out .6s infinite; }
.teach.is-arriving .teach__card { animation: cheer-pop .45s cubic-bezier(.2, 1.4, .4, 1) .15s both; }
.teach.is-nodding .teach__bub { animation: teach-nod .5s ease-out, teach-bob 2.6s ease-in-out .5s infinite; }
.teach.is-happy .teach__bub { animation: teach-jump .7s cubic-bezier(.2, 1.6, .4, 1), teach-bob 2.6s ease-in-out .7s infinite; }
.teach.is-sad .teach__bub { animation: teach-shake .5s ease-in-out, teach-bob 2.6s ease-in-out .5s infinite; }
@keyframes teach-bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3%) rotate(-2deg); } }
@keyframes teach-nod { 0% { transform: none; } 40% { transform: rotate(-6deg) translateY(-4%); } 100% { transform: none; } }
@keyframes teach-jump { 0% { transform: none; } 40% { transform: translateY(-14%) scale(1.05) rotate(4deg); } 100% { transform: none; } }
@keyframes teach-shake { 0%, 100% { transform: none; } 25% { transform: rotate(-5deg); } 75% { transform: rotate(5deg); } }
@media (prefers-reduced-motion: reduce) { .teach .teach__bub, .teach .teach__card { animation: none !important; } }
/* Bub's own pop-up cheers keep quiet while he teaches. */
body.is-teaching .cheer { display: none; }

@media (max-width: 719px) {
  .masthead .shell > .bubmenu .tourbtn { font-size: var(--fs-mono); padding: 0 var(--g8); }
  .teach { left: var(--g8); right: var(--g8); bottom: calc(var(--tabbar-h, 0px) + env(safe-area-inset-bottom) + var(--g8)); }
  .teach__bub { height: 96px; margin-left: -13px; }
  .teach__say { flex: 1; width: auto; min-width: 0; max-height: 40vh; margin-bottom: 34px; padding: var(--g8) var(--g13) var(--g13); }
  .teach::before { right: 70px; bottom: 55px; }
  /* A lesson takes the sheet's place; the tour keeps it for the steps about the lessons and moves Bub up top. */
  body[data-teaching="lesson"] .school { display: none; }
  /* No room for a second bubble: the little guitar still points, Bub does the talking. */
  body[data-teaching="lesson"] .coach__bubble { visibility: hidden; }
  body[data-teaching="tour"]:not(.is-touring-board) .teach { bottom: auto; top: calc(var(--mast-h, 57px) + var(--g8)); }
}

.teach__nav { display: flex; align-items: center; gap: var(--g8); margin-top: var(--g13); }
.teach__nav > :last-child { margin-left: auto; }
:root[data-theme] .teach__nav .btn { height: 34px; min-height: 0; padding: 0 var(--g13); }
/* The bubble's own × on its top-right edge: stop the lesson or the tour at any time. */
.teach__card { position: relative; pointer-events: auto; display: flex; min-width: 0; }
:root[data-theme] .teach__close {
  position: absolute; top: -10px; right: -10px; z-index: 2; width: 29px; height: 29px; padding: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: var(--surface); color: var(--ink); border: 1.5px solid var(--ctl-edge-hi);
  font: 700 var(--fs-val)/1 var(--sans); box-shadow: 0 3px 8px rgb(0 0 0 / .3);
}
:root[data-theme] .teach__close:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
@media (max-width: 719px) {
  .teach__card { flex: 1; }
}

/* While the click plays in a lesson: Bub small in the corner, the bubble a short card with his Stop. */
.teach.is-playing .teach__bub { height: 150px; }
.teach.is-playing .teach__say { width: 300px; min-width: 0; max-height: 190px; }
.teach.is-playing .teach__say > :not(.school__runhead):not([data-after]):not(.school__row) { display: none; }
.teach__card .teach__stop { position: absolute; left: var(--g13); bottom: calc(var(--g21) + var(--g8)); z-index: 2; }
.teach.is-playing .teach__say { padding-bottom: 55px; }
.teach.is-playing .teach__say .school__row { display: none; }
.teach.is-playing::before { right: 133px; bottom: calc(var(--g21) + 34px); }
@media (max-width: 719px) {
  .teach.is-playing .teach__bub { height: 80px; }
  .teach.is-playing .teach__say { width: auto; max-height: 150px; }
}

/* While a rung plays the pointer would only cover the beat view: it waits until the playing stops. */
body:has(.teach.is-playing) .coach { visibility: hidden; }
/* Room to scroll the last parts of the board (the loop cards) up above Bub while he teaches. */
body.is-teaching { padding-bottom: 45vh; }
:root[data-theme] .take__bpm { font: 700 var(--fs-mono)/1 var(--mono); }
.teach__say .school__bigbub { display: none; }

/* ── LESSON FLASH CARDS (guitar-pedagogy skill) ─────────────────────────────────────
   Bub's line, 2–3 bullets, a do-it-now, and a quick check every two or three cards. */
.teach__say .school__slide { gap: var(--g8); }
.teach__say .school__stitle { font: 700 var(--fs-head)/1.15 var(--display); }
.card__say { margin: 0; font: 600 var(--fs-val)/1.35 var(--sans); color: var(--accent); }
.card__points { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--g5); }
.card__points li { position: relative; padding-left: 18px; font: 500 var(--fs-val)/1.4 var(--sans); color: var(--ink); }
.card__points li::before {
  content: ""; position: absolute; left: 3px; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}
.card__do {
  display: grid; gap: var(--g3); padding: var(--g8) var(--g13); border-radius: 8px;
  border: 1.5px dashed color-mix(in srgb, var(--good) 65%, var(--line)); background: color-mix(in srgb, var(--good) 8%, transparent);
  font: 500 var(--fs-btn)/1.4 var(--sans); color: var(--ink);
}
.card__dohead, .card__checkhead { font: 700 var(--fs-title)/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--good); }
.card__check {
  display: grid; gap: var(--g8); padding: var(--g8) var(--g13) var(--g13); border-radius: 8px;
  border: 1.5px solid var(--ctl-edge-hi); background: var(--ctl-bg);
}
.card__checkhead { color: var(--accent); }
.card__q { margin: 0; font: 700 var(--fs-val)/1.3 var(--sans); color: var(--ink); }
.card__opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--g5); }
:root[data-theme] .card__opt {
  min-height: 42px; padding: var(--g5) var(--g8); border-radius: 7px; cursor: pointer;
  background: var(--surface); color: var(--ink); border: 1.5px solid var(--ctl-edge); font: 700 var(--fs-btn)/1.2 var(--sans);
}
:root[data-theme] .card__opt:hover:not([disabled]) { border-color: var(--accent); }
:root[data-theme] .card__opt[disabled] { cursor: default; opacity: .7; }
:root[data-theme] .card__opt.is-right { opacity: 1; border-color: var(--good); background: color-mix(in srgb, var(--good) 22%, var(--surface)); }
:root[data-theme] .card__opt.is-bad { opacity: 1; border-color: var(--bad); background: color-mix(in srgb, var(--bad) 16%, var(--surface)); }
.card__why { margin: 0; font: 500 var(--fs-btn)/1.4 var(--sans); color: var(--ink-body); }
.card__check.is-right .card__why b { color: var(--good); }
.card__check.is-wrong .card__why b { color: var(--bad); }
/* In Bub's bubble the card's buttons sit in a row: Back on the left, Next on the right. A Next waiting on the
   check shows, dimmed, rather than vanishing. */
.teach__say .school__slidenav {  justify-content: space-between; align-items: center; padding-top: var(--g8); }
.teach__say .school__slidenav .btn { width: auto; min-height: 38px; padding: 0 var(--g21); }
.teach__say .school__slidenav [data-sprev][disabled] { visibility: hidden; display: inline-flex; }
.teach__say .school__slidenav [data-snext][disabled] { display: inline-flex; opacity: .45; cursor: not-allowed; }
.teach__say .school__slidenav [data-stest] { flex: 1; margin-left: var(--g8); }
@media (max-width: 719px) {
  .card__points li,
  .card__say { font-size: var(--fs-btn); }
  .card__opts { grid-template-columns: 1fr; }
  .teach__say .school__stitle { font-size: var(--fs-val); }
}

/* ── ASK BUB (ui/faq.js) and the header's Bub buttons ──────────────────────────────────
   Desktop: How to use GuitarBub and Ask Bub side by side, right of the logo. Phone: one "Bub" button opens both. */
.bubmenu { position: relative; display: flex; align-items: center; }
.bubmenu__list { display: flex; align-items: center; gap: var(--g8); }
.bubmenu__toggle { display: none; }
:root[data-theme] #askbtn[aria-pressed="true"] { border-color: var(--accent); background: var(--ctl-on); }
@media (max-width: 719px) {
  .bubmenu__toggle { display: inline-flex; align-items: center; }
  .bubmenu__list {
    display: none; position: absolute; z-index: 120; top: calc(100% + var(--g8)); right: 0; flex-direction: column; align-items: stretch; white-space: nowrap;
    padding: var(--g8); border-radius: 12px; background: var(--surface); border: 1.5px solid var(--ctl-edge-hi); box-shadow: 0 8px 21px rgb(0 0 0 / .35);
  }
  .bubmenu.is-open .bubmenu__list { display: flex; }
  :root[data-theme] .bubmenu.is-open .bubmenu__list .tourbtn { height: 42px; font-size: var(--fs-btn); padding: 0 var(--g13); justify-content: flex-start; }
}

.faq__input { width: 100%; box-sizing: border-box; height: 42px; padding: 0 var(--g13); font: 500 var(--fs-btn)/1 var(--sans); }
.faq__topics { display: flex; flex-wrap: wrap; gap: var(--g5); }
:root[data-theme] .faq__topic {
  height: 29px; padding: 0 var(--g8); border-radius: 15px; cursor: pointer;
  background: var(--ctl-bg); color: var(--ink-body); border: 1.5px solid var(--ctl-edge); font: 600 var(--fs-mono)/1 var(--sans);
}
:root[data-theme] .faq__topic[aria-pressed="true"] { border-color: var(--accent); background: var(--ctl-on); color: var(--ink); }
.faq__head { font: 600 var(--fs-title)/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); margin-top: var(--g5); }
.faq__list { display: grid; gap: var(--g5); }
:root[data-theme] .faq__q {
  text-align: left; min-height: 38px; padding: var(--g8) var(--g13); border-radius: 8px; cursor: pointer;
  background: var(--ctl-bg); color: var(--ink); border: 1.5px solid var(--ctl-edge); font: 600 var(--fs-btn)/1.3 var(--sans);
}
:root[data-theme] .faq__q:hover { border-color: var(--accent); }
.faq__none, .faq__note { margin: 0; font: 500 var(--fs-btn)/1.4 var(--sans); color: var(--ink-mute); }
.faq__a { margin: 0; font: 500 var(--fs-val)/1.45 var(--sans); color: var(--ink); }
.faq__show { justify-self: start; }
.teach__say:has([data-faqinput]) , .teach__say[data-faq] { display: grid; gap: var(--g8); align-content: start; }
/* A card that reads at a glance: tighter rhythm inside Bub's bubble. */
.teach__say .school__runhead { margin-bottom: 0; }
.teach__say .school__dots { margin: var(--g5) 0; }
.teach__say .card__check { gap: var(--g5); }
.teach__say .school__skiplink { padding: 0; }
.teach__say .school__kicker { display: none; }
.teach__say .school__slidenav { flex-direction: row; }
.teach__say .school__slidenav .school__skiplink { align-self: center; }
:root[data-theme] .teach__say .card__opt { min-height: 34px; }
.teach__card .teach__say { margin-bottom: var(--g8); }
.teach::before { bottom: calc(var(--g8) + 55px); }
.teach__say .school__slidenav .school__skiplink { flex: 1; margin: 0; text-align: center; }
@media (max-width: 719px) {
  /* Ask Bub on a phone: topics in one sideways row, a bit more room for answers. */
  .faq__topics { flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--g3); scrollbar-width: none; }
  .faq__topics::-webkit-scrollbar { display: none; }
  :root[data-theme] .faq__topic { flex: none; }
  body[data-teaching="faq"] .teach__say { max-height: 55vh; }
  body[data-teaching="faq"] .school { display: none; }
}

/* When a card is taller than the bubble (phones), Back and Next stay pinned to its bottom edge. */
.teach__say .school__slidenav { position: sticky; bottom: calc(-1 * var(--g21)); z-index: 1; background: var(--surface); padding-bottom: var(--g8); margin-bottom: calc(-1 * var(--g8)); }
@media (max-width: 719px) {
  .teach__say .school__slidenav { bottom: calc(-1 * var(--g13)); }
}

.teach__say .school__slidenav .school__skiplink { white-space: nowrap; }

/* Arpeggio buttons wear their name: a little square in the voicing's colour, ARP / PEG / GIO stacked. */
.fb__arpbadge {
  flex: none; display: grid; place-items: center; align-content: center; width: 25px; height: 25px; box-sizing: border-box; border-radius: 4px;
  border: 1.5px solid var(--pc); background: color-mix(in srgb, var(--pc) 22%, transparent); color: var(--ink);
  font: 700 var(--fs-title)/8px var(--display); letter-spacing: 0; text-transform: uppercase;
}
.fb__arpbadge > span { display: block; transform: scaleX(.9); }
:root[data-theme] .fb__side .fb__arp { padding: 0 var(--g5); gap: var(--g5); }
/* The phrase's own Play, beside Phrase sound. */
.fbrec__play { height: var(--ctl); }

.pedal.is-moved { animation: modmoved .5s var(--ease); }
@keyframes modmoved { 0% { box-shadow: 0 0 0 3px var(--accent); } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .pedal.is-moved { animation: none; } }
/* A narrow window (or Learn open): voicings and arpeggios never push past the card. They wrap onto a second line
   inside it instead. */

:where(.pedal[data-bp~="min720"]) .fb > .fb__side { flex-shrink: 1; max-width: 100%; height: auto; min-height: var(--ctl); flex-wrap: wrap; row-gap: var(--g5); justify-content: flex-end; }

/* Any width: the fretboard's menu row wraps rather than pushing past its card (a narrow window, or Learn open). */

:where(.pedal[data-bp~="min720"]) .fb > .tcbar { flex-wrap: wrap; row-gap: var(--g8); min-width: 0; max-width: 100%; }

:where(.pedal[data-bp~="min720"]) .met .tcbar__unit--routines { flex-wrap: wrap; max-width: 100%; justify-content: flex-end; row-gap: var(--g8); }
:where(.pedal[data-bp~="min720"]) .met .tcbar__go { flex-wrap: wrap; justify-content: flex-end; row-gap: var(--g8); }

/* The help bar's one-time hello: a yellow double outline that pulses a few times. */
/* Two thin yellow rings with the header's colour between them. */
#helper.is-flash { border-radius: 6px; box-shadow: 0 0 0 3px #FFD43B, 0 0 0 6px var(--head-bg), 0 0 0 8px #FFD43B; animation: helpflash .6s ease-in-out 6 alternate; }
@keyframes helpflash { from { box-shadow: 0 0 0 3px #FFD43B, 0 0 0 6px var(--head-bg), 0 0 0 8px #FFD43B; } to { box-shadow: 0 0 0 3px transparent, 0 0 0 6px transparent, 0 0 0 8px transparent; } }
@media (prefers-reduced-motion: reduce) { #helper.is-flash { animation: none; } }
/* A skipped lesson: struck through in red, no grade. */
.school__lesson.is-skipped .school__lname { text-decoration: line-through; text-decoration-color: var(--bad); text-decoration-thickness: 2px; color: var(--ink-mute); }
.school__lesson.is-skipped .school__lbest { color: var(--bad); font-weight: 600; }
:root[data-theme] .school__skiplesson {
  margin-left: var(--g8); padding: 0 var(--g8); height: 24px; border-radius: 12px; cursor: pointer;
  background: transparent; color: var(--ink-mute); border: 1px solid var(--ctl-edge); font: 600 var(--fs-mono)/1 var(--sans);
}
:root[data-theme] .school__skiplesson:hover { color: var(--bad); border-color: var(--bad); }
/* Remember: after ten seconds on a card it lights up yellow, and stays lit. */
.teach__say .card__remember { gap: var(--g3); padding: var(--g8) var(--g13); font: 600 var(--fs-btn)/1.4 var(--sans); transition: background-color .4s, border-color .4s, box-shadow .4s; }
.teach__say .card__remember .school__tiphead { font: 700 var(--fs-title)/1 var(--display); letter-spacing: .12em; }
.card__remember.is-nag {
  border-color: #FFD43B; background: color-mix(in srgb, #FFD43B 22%, var(--surface)); color: var(--ink);
  box-shadow: 0 0 0 2px color-mix(in srgb, #FFD43B 55%, transparent); animation: remnag .9s ease-in-out 3;
}
.card__remember.is-nag .school__tiphead { color: color-mix(in srgb, #FFD43B 60%, var(--ink)); }
@keyframes remnag { 0%, 100% { transform: none; } 30% { transform: scale(1.03); } 60% { transform: scale(.99); } }
@media (prefers-reduced-motion: reduce) { .card__remember.is-nag { animation: none; } }
/* Do it now and Remember side by side, so a card stays short enough to keep the neck in view. */
/* The card in two parts: the idea (title, Bub's line, the points, Hear it), then what to do with it (Do it now,
   Remember, the quick check). */
.card__main, .card__side { display: grid; gap: var(--g8); align-content: start; min-width: 0; }
.card__side:empty { display: none; }
@media (min-width: 720px) {
  .card__side { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .card__side > .card__do,
  .card__side > .card__remember { align-content: start; }
  .card__side > :not(.card__do):not(.card__remember) { grid-column: 1 / -1; }
}

/* While Bub flies off to point, his corner is free: on a wide screen the card spreads into it, idea on the left,
   the doing on the right, half as tall, so the neck stays in view on a laptop. */
.teach__say { transition: width .3s var(--ease, ease); }
@media (min-width: 1100px) {
  body.is-bub-out:not(:has(.teach.is-playing)) .teach__bub { position: absolute; right: 0; bottom: 0; }
  body.is-bub-out:not(:has(.teach.is-playing)) .teach__say { width: min(1040px, calc(100vw - var(--school-w, 0px) - 64px)); }
  body.is-bub-out .teach:not(.is-follow) .teach__say .school__slide { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: var(--g21); align-items: start; }
  body.is-bub-out .teach:not(.is-follow) .teach__say .card__side { grid-template-columns: minmax(0, 1fr); }
  body.is-bub-out .teach:not(.is-follow) .teach__say .card__side > * { grid-column: auto; }
}

/* ── BUB'S MOODS (ui/bubfig.js) ──────────────────────────────────────────────────────
   One figure, drawings on the same grid: halo and wings for the angel; horns, tail and laser eyes for the devil. */
.bubfig { position: relative; aspect-ratio: 1; }
.bubfig__img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; }
.bubfig__back, .bubfig__front { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.bubfig__back { z-index: 0; }
.bubfig__front { z-index: 2; }
.bubfig :is(.bubfig__wings, .bubfig__tail, .bubfig__halo, .bubfig__horns, .bubfig__lasers) { opacity: 0; transition: opacity .3s, transform .45s cubic-bezier(.3, 1.6, .5, 1); }
/* Angel */
.bubfig__wing { fill: #FFFDF5; stroke: #E8C76A; stroke-width: 4; filter: drop-shadow(0 0 8px rgb(255 240 190 / .8)); }
.bubfig__wing--l { transform-origin: 150px 260px; }
.bubfig__wing--r { transform-origin: 362px 260px; }
.bubfig__halo { fill: none; stroke: #FFD43B; stroke-width: 9; filter: drop-shadow(0 0 10px #FFD43B) drop-shadow(0 0 18px rgb(255 212 59 / .7)); transform-box: fill-box; transform-origin: center; }
.bubfig[data-mood="angel"] :is(.bubfig__wings, .bubfig__halo) { opacity: 1; }
.bubfig[data-mood="angel"] .bubfig__halo { animation: halo-float 1.6s ease-in-out infinite; }
.bubfig[data-mood="angel"] .bubfig__wing--l { animation: wing-l .5s ease-in-out infinite alternate; }
.bubfig[data-mood="angel"] .bubfig__wing--r { animation: wing-r .5s ease-in-out infinite alternate; }
.bubfig[data-mood="angel"] .bubfig__img { filter: drop-shadow(0 0 14px rgb(255 230 150 / .85)); }
@keyframes halo-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes wing-l { from { transform: rotate(6deg) scaleX(.9); } to { transform: rotate(-10deg) scaleX(1.05); } }
@keyframes wing-r { from { transform: rotate(-6deg) scaleX(.9); } to { transform: rotate(10deg) scaleX(1.05); } }
/* Devil */
.bubfig__horns path { fill: #C8102E; stroke: #5A0410; stroke-width: 4; filter: drop-shadow(0 0 6px rgb(255 30 30 / .6)); }
.bubfig__tailline { fill: none; stroke: #C8102E; stroke-width: 10; stroke-linecap: round; }
.bubfig__tailtip { fill: #C8102E; stroke: #5A0410; stroke-width: 3; }
.bubfig__tail { transform-origin: 182px 398px; }
.bubfig__lasers line { stroke: #FF2A2A; stroke-width: 7; stroke-linecap: round; filter: drop-shadow(0 0 6px #FF2A2A) drop-shadow(0 0 14px #FF0000); }
.bubfig__lasers circle { fill: #FF2A2A; filter: drop-shadow(0 0 10px #FF0000); }
.bubfig[data-mood="devil"] :is(.bubfig__horns, .bubfig__tail, .bubfig__lasers) { opacity: 1; }
.bubfig[data-mood="devil"] .bubfig__tail { animation: tail-swish .7s ease-in-out infinite alternate; }
.bubfig[data-mood="devil"] .bubfig__lasers line { animation: laser 0.18s steps(2) infinite; }
.bubfig[data-mood="devil"] .bubfig__img { filter: drop-shadow(0 0 12px rgb(255 30 30 / .7)) saturate(1.2); }
@keyframes tail-swish { from { transform: rotate(-8deg); } to { transform: rotate(10deg); } }
@keyframes laser { 0% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .bubfig * { animation: none !important; } }

/* The Daily Bub's countdown: a bar along the top of the card; red and shaking from ten seconds. */
.teach__timer { position: absolute; z-index: 3; top: -16px; left: var(--g21); right: 64px; height: 12px; border-radius: 6px;
  background: var(--ctl-bg); border: 1.5px solid var(--ctl-edge-hi); overflow: visible; }
.teach__timer[hidden] { display: none; }
.teach__timerfill { position: absolute; inset: 0 auto 0 0; border-radius: 5px; background: var(--good); transition: width .25s linear, background-color .3s; }
.teach__timernum { position: absolute; right: -40px; top: 50%; transform: translateY(-50%); min-width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; background: var(--surface); border: 1.5px solid var(--ctl-edge-hi); font: 700 var(--fs-val)/1 var(--mono); color: var(--ink); }
.teach__timer.is-low .teach__timerfill { background: var(--bad); }
.teach__timer.is-low .teach__timernum { border-color: var(--bad); color: var(--bad); animation: tick-shake .5s ease-in-out infinite; }
@keyframes tick-shake { 0%, 100% { transform: translateY(-50%) rotate(0); } 25% { transform: translateY(-50%) rotate(-12deg) scale(1.15); } 75% { transform: translateY(-50%) rotate(12deg) scale(1.15); } }
/* Ten seconds left: the whole screen pulses red at the edges. */
.teach__flash { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .3s; }
.teach.is-intense .teach__flash { opacity: 1; box-shadow: inset 0 0 90px 20px rgb(255 30 30 / .55); animation: intense .5s ease-in-out infinite alternate; }
@keyframes intense { from { box-shadow: inset 0 0 60px 10px rgb(255 30 30 / .35); } to { box-shadow: inset 0 0 140px 40px rgb(255 30 30 / .7); } }
@media (prefers-reduced-motion: reduce) { .teach.is-intense .teach__flash { animation: none; } }
/* The warning before the Daily Bub starts. */
.daily-warn { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; pointer-events: none;
  background: repeating-linear-gradient(-45deg, rgb(0 0 0 / .78) 0 28px, rgb(255 212 59 / .35) 28px 56px); animation: warn-in .25s ease-out both; }
.daily-warn__box { padding: var(--g21) var(--g34); border-radius: 14px; background: #FFD43B; color: #111; text-align: center; box-shadow: 0 0 0 6px #111, 0 0 0 10px #FFD43B, 0 20px 60px rgb(0 0 0 / .6);
  animation: warn-shake .12s linear infinite; }
.daily-warn__box b { display: block; font: 700 34px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.daily-warn__box span { display: block; margin-top: var(--g8); font: 700 var(--fs-val)/1.3 var(--sans); }
@keyframes warn-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes warn-shake { 0%, 100% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(-2px, 1px) rotate(-.6deg); } 75% { transform: translate(2px, -1px) rotate(.6deg); } }
@media (prefers-reduced-motion: reduce) { .daily-warn, .daily-warn__box { animation: none; } }

/* ── BUB FLIES TO POINT (ui/coach.js) ───────────────────────────────────────────────
   The pointer is Bub himself: a small speech tag over his head, the red Flying V held out at the target. He moves
   with a springy overshoot and never quite keeps still. The big Bub by the card steps out while he's away. */
.coach__fig { display: none; }
.coach.is-bub .coach__bubble {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0; max-width: none;
  background: none; border: 0; box-shadow: none; pointer-events: none;
  transition: transform .85s cubic-bezier(.3, 1.75, .45, 1);
}
.coach.is-bub .coach__words {
  pointer-events: auto; max-width: 230px; padding: 5px 10px 6px; border-radius: 10px;
  background: var(--surface); color: var(--ink); border: 2px solid var(--accent);
  box-shadow: 0 6px 16px rgba(0,0,0,.28); font: 600 var(--fs-btn)/1.35 var(--sans); text-align: center;
}
.coach.is-bub[data-tone="answer"] .coach__words { border-color: var(--good); }
.coach.is-bub .coach__who { display: none; }
.coach.is-bub .coach__fig { display: block; width: 118px; filter: drop-shadow(0 8px 14px rgb(0 0 0 / .4)); animation: bub-crazy 1.25s ease-in-out infinite; }
.coach.is-bub .coach__fig.is-hop { animation: bubfly-hop .75s cubic-bezier(.3, 1.6, .5, 1), bub-crazy 1.25s ease-in-out .75s infinite; }
@keyframes bub-crazy {
  0%, 100% { transform: rotate(-6deg) translateY(0); } 20% { transform: rotate(7deg) translateY(-7px); }
  45% { transform: rotate(-3deg) translateY(2px); } 70% { transform: rotate(9deg) translateY(-5px) scale(1.03); }
}
@keyframes bubfly-hop { 0% { transform: scale(.85) rotate(-30deg); } 45% { transform: scale(1.18) rotate(18deg) translateY(-26px); } 100% { transform: scale(1) rotate(0); } }
.coach.no-guitar .coach__guitar { display: none; }
@media (prefers-reduced-motion: reduce) { .coach.is-bub .coach__fig { animation: none !important; } .coach.is-bub .coach__bubble { transition: none; } }
/* The big Bub steps away from the card while the flying one points. */
.teach__bub { transition: opacity .35s, transform .45s cubic-bezier(.3, 1.6, .5, 1); }
body.is-bub-out:not(:has(.teach.is-playing)) .teach__bub { opacity: 0; transform: translateX(40px) scale(.7) rotate(12deg); animation: none; }
body.is-bub-out:not(:has(.teach.is-playing)) .teach::before { opacity: 0; }

.lset {
  position: absolute; z-index: 20; top: calc(100% - 4px); right: var(--g13); width: min(290px, calc(100% - 26px));
  display: grid; gap: var(--g3); padding: var(--g13); border-radius: 12px;
  background: var(--surface); border: 1.5px solid var(--ctl-edge-hi); box-shadow: 0 12px 30px rgb(0 0 0 / .35);
}
.lset[hidden] { display: none; }
.lset__title { font: 600 var(--fs-title)/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: var(--g5); }
:root[data-theme] .lset__row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--g8); min-height: 34px; padding: 0 var(--g8);
  border-radius: 7px; cursor: pointer; text-align: left; background: transparent; border: 0; color: var(--ink); font: 600 var(--fs-btn)/1.2 var(--sans);
}
:root[data-theme] .lset__row:hover { background: var(--ctl-bg); }
.lset__row i { flex: none; position: relative; width: 34px; height: 19px; border-radius: 10px; background: var(--line-2); transition: background-color .2s; }
.lset__row i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 3px rgb(0 0 0 / .3); transition: transform .2s; }
.lset__row[aria-checked="true"] i { background: var(--good); }
.lset__row[aria-checked="true"] i::after { transform: translateX(15px); }
/* Bigger text, when asked for. */
body.learn-bigtext .teach__say .card__points li, body.learn-bigtext .teach__say .card__say, body.learn-bigtext .teach__say .faq__a { font-size: var(--fs-head); }
body.learn-bigtext .teach__say :is(.card__do, .card__remember, .card__why, .school__prompt, .school__text) { font-size: var(--fs-val); }
body.learn-bigtext .teach__say .school__stitle { font-size: 26px; }
body.learn-bigtext .school__lname { font-size: var(--fs-val); }
/* Bub's hello on a lesson's first card: something he knows about you. */
.card__hi { margin: 0 0 var(--g3); padding: var(--g5) var(--g8); border-radius: 7px; background: var(--ctl-on); color: var(--ink); font: 600 var(--fs-btn)/1.35 var(--sans); }
.card__hi::before { content: "Bub: "; color: var(--accent); font-weight: 700; }

/* ── WELCOME: Bub, big, a card at a time in the middle of the screen ── */
.welcome__stage { display: flex; align-items: flex-end; justify-content: center; gap: 0; width: min(1060px, 100%); }
.welcome .welcome__card {
  width: min(600px, 100%); text-align: left; padding: var(--g34); border-radius: 22px; border: 1.5px solid var(--ctl-edge-hi);
  display: grid; gap: var(--g13); position: relative; margin-bottom: 60px;
}
.welcome__bub { flex: none; width: min(54vh, 470px); margin-left: -40px; cursor: pointer; filter: drop-shadow(0 16px 30px rgb(0 0 0 / .5)); transform-origin: 50% 100%; animation: teach-bob 2.6s ease-in-out infinite; }
.welcome__bub.is-hop { animation: bubfly-hop .75s cubic-bezier(.3, 1.6, .5, 1), teach-bob 2.6s ease-in-out .75s infinite; }
.welcome__dots { display: flex; gap: 6px; }
.welcome__dots span { width: 34px; height: 5px; border-radius: 3px; background: var(--line); }
.welcome__dots span.is-done { background: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.welcome__dots span.is-now { background: var(--accent); }
.welcome .welcome__title { font: 700 44px/1.05 var(--display); }
.welcome__say { margin: 0; font: 600 var(--fs-head)/1.3 var(--sans); color: var(--accent); }
.welcome__points { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--g8); }
.welcome__points li { position: relative; padding-left: 26px; font: 500 var(--fs-head)/1.35 var(--sans); color: var(--ink); }
.welcome__points li::before { content: ""; position: absolute; left: 4px; top: .5em; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.welcome__nav { display: flex; justify-content: space-between; margin-top: var(--g8); }
.welcome .welcome__go { justify-content: flex-start; margin-top: var(--g8); }
.welcome .btn { min-height: 46px; font-size: var(--fs-val); padding: 0 var(--g21); }
.welcome .welcome__note { margin: 0; font-size: var(--fs-btn); }
@media (max-width: 719px) {
  .welcome__stage { flex-direction: column-reverse; align-items: center; }
  .welcome__bub { width: 150px; margin: 0 0 -10px; }
  .welcome .welcome__card { margin: 0; padding: var(--g21); }
  .welcome .welcome__title { font-size: 26px; }
  .welcome__say,
  .welcome__points li { font-size: var(--fs-val); }
  .welcome .welcome__go .btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) { .welcome__bub, .welcome__bub.is-hop { animation: none; } }

/* ── RIFFS & SOLOS: the Riff of the day ── */

.school__riffday { box-shadow: inset 4px 0 0 #d9342b; }

/* ── JAM WITH BUB: a band in a box in the speech bubble ── */
.school__jam { box-shadow: inset 4px 0 0 var(--good); }
.school__jam[aria-pressed="true"] { border-color: var(--good); }
.teach__say:has([data-jamplay]) { display: grid; gap: var(--g13); }
.jam__ctl { display: flex; flex-wrap: wrap; gap: var(--g8); align-items: stretch; }
.jam__ctl > [data-jamgroove] { flex: 2 1 130px; }
.jam__ctl > [data-jamkey] { flex: 1 1 70px; }
.jam__tempo { display: inline-flex; align-items: center; height: 42px; box-sizing: border-box; border: 1px solid var(--ctl-edge); border-radius: 8px; overflow: hidden; }
.jam__step { appearance: none; cursor: pointer; width: 42px; height: 100%; border: 0; background: transparent; color: var(--ink); font: 700 var(--fs-head)/1 var(--sans); }
.jam__step:hover { background: var(--surface-2); }
.jam__bpm { padding: 0 var(--g8); font: 600 var(--fs-btn)/1 var(--sans); color: var(--ink-mute); white-space: nowrap; }
.jam__bpm b { font: 700 var(--fs-val)/1 var(--mono); color: var(--ink); }
.jam__chart { display: flex; flex-wrap: wrap; gap: 3px; }
.jam__barchip { min-width: 34px; height: 26px; box-sizing: border-box; display: inline-grid; place-items: center; padding: 0 var(--g5); border-radius: 5px;
  background: var(--surface-2); color: var(--ink-mute); font: 700 var(--fs-btn)/1 var(--sans); transition: background .12s, color .12s; }
.jam__barchip.is-first { color: var(--ink); }
.jam__barchip.is-now { background: var(--accent); color: var(--accent-ink); }
.jam__now { display: flex; align-items: baseline; gap: var(--g8); flex-wrap: wrap; row-gap: var(--g8); }
.jam__lbl { font: 600 var(--fs-btn)/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); }
.jam__chord { font: 700 34px/1 var(--display); color: var(--ink); margin-right: var(--g13); }
.jam__chord--next { font-size: var(--fs-head); color: var(--ink-mute); }
.jam__beats { margin-left: auto; display: inline-flex; gap: var(--g5); align-self: center; }
.jam__beats i { width: 13px; height: 13px; border-radius: 50%; background: var(--line-2); transition: background .06s, box-shadow .06s; }
.jam__beats i.is-on { background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.jam__beats i:first-child.is-on { background: #d9342b; box-shadow: 0 0 13px #d9342b; }
.jam__tip { margin: 0; font-size: var(--fs-btn); line-height: 1.45; color: var(--ink-body); }
.jam__scale { color: var(--accent); font-weight: 600; }
.jam__play { min-height: 42px; min-width: 110px; margin-right: var(--g8); font-size: var(--fs-val); align-self: center; }
.jam__play[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
/* Bub headbangs on every beat while the jam plays. */
.teach__bub.is-headbang { animation: bub-headbang .3s ease-out; }
@keyframes bub-headbang { 0% { transform: rotate(0); } 30% { transform: rotate(6deg) translateY(3%); } 100% { transform: rotate(0); } }
@media (prefers-reduced-motion: reduce) { .teach__bub.is-headbang { animation: none; } }
@media (max-width: 719px) {
  .jam__hi { display: none; }
  .jam__chord { font-size: 26px; margin-right: var(--g5); }
  .jam__tempo { flex: 1 1 100%; justify-content: space-between; }
}

/* ── UNLOCKABLES: Bub's outfits (layers on his picture) and Vicky's looks (the pointer guitar's paint) ── */
.bubfig__outfit { display: none; }
:root[data-bub-outfit="shades"] .bubfig:not([data-outfit]) .bubfig__outfit--shades, .bubfig[data-outfit="shades"] .bubfig__outfit--shades,
:root[data-bub-outfit="stars"] .bubfig:not([data-outfit]) .bubfig__outfit--stars, .bubfig[data-outfit="stars"] .bubfig__outfit--stars,
:root[data-bub-outfit="headphones"] .bubfig:not([data-outfit]) .bubfig__outfit--headphones, .bubfig[data-outfit="headphones"] .bubfig__outfit--headphones,
:root[data-bub-outfit="cowboy"] .bubfig:not([data-outfit]) .bubfig__outfit--cowboy, .bubfig[data-outfit="cowboy"] .bubfig__outfit--cowboy,
:root[data-bub-outfit="wizard"] .bubfig:not([data-outfit]) .bubfig__outfit--wizard, .bubfig[data-outfit="wizard"] .bubfig__outfit--wizard,
:root[data-bub-outfit="crown"] .bubfig:not([data-outfit]) .bubfig__outfit--crown, .bubfig[data-outfit="crown"] .bubfig__outfit--crown,
:root[data-bub-outfit="helmet"] .bubfig:not([data-outfit]) .bubfig__outfit--helmet, .bubfig[data-outfit="helmet"] .bubfig__outfit--helmet { display: inline; }
.bubfig__lens { fill: #121214; stroke: #000; stroke-width: 4; }
.bubfig__frame { fill: none; stroke: #111; stroke-width: 6; stroke-linecap: round; }
.bubfig__glare { stroke: rgb(255 255 255 / .55); stroke-width: 5; stroke-linecap: round; }
.bubfig__star { fill: #ff4fa3; stroke: #fff; stroke-width: 4; stroke-linejoin: round; }
.bubfig__band { fill: none; stroke: #1d1d1f; stroke-width: 16; stroke-linecap: round; }
.bubfig__cup { fill: #d9342b; stroke: #1d1d1f; stroke-width: 6; }
.bubfig__hat { fill: #8a5a2b; stroke: #4a2e12; stroke-width: 4; stroke-linejoin: round; }
.bubfig__hatband { fill: #2b1a0c; }
.bubfig__wiz { fill: #5b3fa8; stroke: #2e1d63; stroke-width: 4; stroke-linejoin: round; }
.bubfig__wizstar { fill: #ffd23f; }
.bubfig__glass { fill: rgb(170 220 255 / .14); stroke: rgb(235 248 255 / .9); stroke-width: 8; }
.bubfig__shine { fill: none; stroke: rgb(255 255 255 / .7); stroke-width: 10; stroke-linecap: round; }
.bubfig__crown { fill: #f2c230; stroke: #8a6410; stroke-width: 4; stroke-linejoin: round; }
.bubfig__jewel { fill: #d9342b; stroke: #8a6410; stroke-width: 3; }
:root[data-vicky="black"], [data-vicky-look="black"] { --vicky: #1a1a1d; --vicky-edge: #000; --vicky-guard: #f4eee2; }
:root[data-vicky="white"], [data-vicky-look="white"] { --vicky: #f1eee6; --vicky-edge: #8f8a7e; --vicky-guard: #1a1a1d; }
:root[data-vicky="gold"], [data-vicky-look="gold"] { --vicky: #d8a521; --vicky-edge: #7a5a0a; --vicky-guard: #2a1d0c; }
:root[data-vicky="sunburst"], [data-vicky-look="sunburst"] { --vicky: url(#vicky-sunburst); --vicky-edge: #2a0e04; --vicky-guard: #f4eee2; }
:root[data-vicky="flame"], [data-vicky-look="flame"] { --vicky: url(#vicky-flame); --vicky-edge: #2a0604; --vicky-guard: #1a1a1d; }
:root[data-vicky="galaxy"], [data-vicky-look="galaxy"] { --vicky: url(#vicky-galaxy); --vicky-edge: #05041c; --vicky-guard: #c7a4ff; }
[data-vicky-look="red"] { --vicky: #D8231F; --vicky-edge: #7A0E0B; --vicky-guard: #F4EEE2; }

/* ── GIG TALK: the tour in Learn, Encore! and Soundcheck on results, and On tour in Progress ── */
.school__tour { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: var(--g5) var(--g8); }
.school__tourname { font: 600 var(--fs-btn)/1.2 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-mute); }
.school__tourname b { color: var(--ink); }
.school__tournext { font-size: var(--fs-btn); color: var(--ink-mute); }
.school__tourbar { grid-column: 1 / -1; height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
.school__tourbar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), #d9342b); }
.school__encore { margin: 0; font: 700 34px/1 var(--display); letter-spacing: .04em; color: var(--accent); text-transform: uppercase;
  animation: encore-in .6s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes encore-in { from { transform: scale(.4) rotate(-6deg); opacity: 0; } to { transform: none; opacity: 1; } }
.school__letter.is-soundcheck { font-size: 26px; line-height: 1.15; }
.school__promo, .school__unlock { margin: 0; font-size: var(--fs-btn); line-height: 1.45; color: var(--ink-body); }
.school__promo b { color: var(--accent); }
.school__unlock b { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .school__encore { animation: none; } }

.pdash__tour { display: grid; gap: var(--g13); margin-top: var(--g13); }
.tour__road { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--g5); counter-reset: none; }
.tour__road li { display: grid; gap: 2px; padding: var(--g8); border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line); }
.tour__road b { font: 700 var(--fs-btn)/1.1 var(--display); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-mute); }
.tour__road span { font: 600 var(--fs-xs, 11px)/1 var(--mono); color: var(--ink-mute); }
.tour__road li.is-done { background: color-mix(in srgb, var(--accent) 14%, var(--surface-2)); }
.tour__road li.is-done b { color: var(--ink); }
.tour__road li.is-done span { color: color-mix(in srgb, var(--ink-mute) 55%, var(--ink)); }
.tour__road li.is-now { background: var(--accent); border-color: var(--accent); }
.tour__road li.is-now b, .tour__road li.is-now span { color: var(--accent-ink); }
.tour__line { margin: 0; font-size: var(--fs-btn); line-height: 1.45; color: var(--ink-body); }
.tour__line b { color: var(--ink); }
.tour__items { display: grid;   }
.tour__item { appearance: none; cursor: pointer; display: grid; justify-items: center; align-content: start;  
  border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--ink); text-align: center; }
.tour__item:hover:not(:disabled) { border-color: var(--accent); }
.tour__item[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface-2)); }
.tour__item:disabled { cursor: default; opacity: .62; }
.tour__item:disabled .tour__bub, .tour__item:disabled .tour__v { filter: grayscale(1) brightness(.7); }
.tour__bub { width: 64px; }
.tour__v { width: 64px;  overflow: visible; }
.tour__iname { font: 600 var(--fs-btn)/1.2 var(--sans); }
.tour__how { font-size: var(--fs-xs, 11px); line-height: 1.3; color: var(--ink-mute); }
@media (max-width: 719px) {
  .tour__road { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tour__items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tour__bub,
  .tour__v { width: 52px; }
}

/* ── THE TIMING BAR, ALIVE: comets with tails, a pulse on every click, sparks dead-centre, a streak, a shake ── */
.tbar--line { overflow: visible; }
.tbar--line .tbar__zone--early { border-radius: 8px 0 0 8px; }
.tbar--line .tbar__zone--late { border-radius: 0 8px 8px 0; }
.tbar--line .tbar__hit { color: var(--ok); background: currentColor; box-shadow: 0 0 8px 1px currentColor, 0 0 18px currentColor; z-index: 2; }
.tbar--line .tbar__hit.is-good { color: var(--good); }
.tbar--line .tbar__hit.is-bad { color: var(--bad); }
.tbar--line .tbar__hit.is-silent { color: var(--led); }
.tbar--line .tbar__hit.is-early { color: var(--ink-mute); box-shadow: none; }
.tbar--line .tbar__hit::before {
  content: ""; position: absolute; top: 22%; bottom: 22%; width: var(--trail, 0px); border-radius: 3px; opacity: .6;
  animation: tbar-trail .5s ease-out forwards;
}
.tbar--line .tbar__hit.is-rush::before { left: 100%; background: linear-gradient(90deg, currentColor, transparent); transform-origin: left; }
.tbar--line .tbar__hit.is-drag::before { right: 100%; background: linear-gradient(270deg, currentColor, transparent); transform-origin: right; }
@keyframes tbar-trail { from { transform: scaleX(1); opacity: .7; } to { transform: scaleX(.15); opacity: 0; } }
.tbar.is-pulse .tbar__centre { animation: tbar-pulse .22s ease-out; }
.tbar.is-pulse1 .tbar__centre { animation: tbar-pulse1 .3s ease-out; }
@keyframes tbar-pulse { from { box-shadow: 0 0 10px 2px var(--good); filter: brightness(1.6); } to { box-shadow: none; filter: none; } }
@keyframes tbar-pulse1 { from { box-shadow: 0 0 16px 5px var(--good); filter: brightness(2); transform: scaleX(2.4); } to { box-shadow: none; filter: none; transform: none; } }
.tbar__spark {
  position: absolute; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; z-index: 3; pointer-events: none;
  background: #fff3b0; box-shadow: 0 0 6px 2px var(--good); animation: tbar-spark .6s ease-out forwards;
}
@keyframes tbar-spark { from { transform: translate(0, 0) scale(1); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }
.tbar.is-shake { animation: tbar-shake .32s ease-in-out; }
@keyframes tbar-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-4px) rotate(-.4deg); } 40% { transform: translateX(4px) rotate(.4deg); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.tbar__streak {
  position: absolute; left: 50%; bottom: calc(100% + 5px); z-index: 4; transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  padding: 3px var(--g8); border-radius: 10px; background: var(--good); color: #06140A;
  font: 700 var(--fs-title, 11px)/1.1 var(--display); letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 0 12px color-mix(in srgb, var(--good) 60%, transparent); transition: opacity .3s, transform .3s;
}
.tbar__streak.is-pop { animation: tbar-streak-pop .5s cubic-bezier(.2, 1.6, .4, 1); }
.tbar__streak.is-broken { opacity: 0; transform: translateX(-50%) translateY(6px); }
@keyframes tbar-streak-pop { from { transform: translateX(-50%) scale(1.6); } to { transform: translateX(-50%) scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .tbar.is-shake, .tbar.is-pulse .tbar__centre, .tbar.is-pulse1 .tbar__centre, .tbar__streak.is-pop, .tbar--line .tbar__hit::before { animation: none; }
}

/* ── A rest between loops: a round clock over the beat view ── */
.restclock { position: absolute; z-index: 6; left: 50%; top: 50%; width: 118px; height: 118px; transform: translate(-50%, -50%); display: grid; place-items: center; align-content: center;
  border-radius: 50%; background: color-mix(in srgb, var(--bg) 88%, transparent); box-shadow: 0 8px 30px rgb(0 0 0 / .5); pointer-events: auto; cursor: pointer; animation: restclock-in .3s cubic-bezier(.2, 1.4, .4, 1) both; }
.restclock svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.restclock__track { fill: none; stroke: var(--line-2); stroke-width: 6; }
.restclock__ring { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 100; transition: stroke-dashoffset .25s linear; }
.restclock__num { position: relative; font: 700 34px/1 var(--mono); color: var(--ink); }
.restclock__lbl { position: relative; font: 700 var(--fs-title)/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); margin-top: 4px; }
.restclock.is-low .restclock__ring { stroke: var(--bad); }
.restclock.is-low .restclock__num { color: var(--bad); animation: restclock-pulse 1s ease-in-out infinite; }
@keyframes restclock-in { from { transform: translate(-50%, -50%) scale(.5); opacity: 0; } to { transform: translate(-50%, -50%); opacity: 1; } }
@keyframes restclock-pulse { 50% { transform: scale(1.18); } }
@media (prefers-reduced-motion: reduce) { .restclock, .restclock.is-low .restclock__num { animation: none; } }

/* ── BUB TEACHES AT HIS CHEER SIZE; THE CARD IS HIS SPEECH BUBBLE (Learn → Learning Settings → Card follows Bub) ── */
@media (min-width: 720px) {
  .teach__bub { height: min(41.4vh, 32.2vw); }
  .teach__say { width: min(700px, calc(100vw - var(--school-w, 0px) - min(41.4vh, 32.2vw) - 50px)); }
  .teach::before { right: calc(min(41.4vh, 32.2vw) - 17px); }
  .teach.is-playing .teach__bub { height: 150px; }
  .teach.is-playing .teach__say { width: 300px; }
  .teach.is-playing::before { right: 133px; }
  /* Following: the container is placed by ui/coach.js; the tail sits on the card, towards Bub. */
  .teach.is-follow { align-items: flex-end; }
  .teach.is-follow[data-bub-side="left"] { flex-direction: row-reverse; }
  .teach.is-follow::before { display: none; }
  .teach.is-follow .teach__bub { margin-left: 0; }
  .teach.is-follow .teach__card::after {
    content: ""; position: absolute; z-index: 1; bottom: calc(var(--g34) + var(--g13)); width: 16px; height: 16px; background: var(--surface);
    right: calc(-1 * var(--g5) - 1px); transform: rotate(-45deg);
    border-right: 1.5px solid var(--ctl-edge-hi); border-bottom: 1.5px solid var(--ctl-edge-hi);
  }
  .teach.is-follow[data-bub-side="left"] .teach__card::after { right: auto; left: calc(-1 * var(--g5) - 1px); transform: rotate(135deg); }
  .teach.is-follow .teach__say { margin-bottom: var(--g34); max-height: calc(100vh - var(--mast-h, 57px) - 55px); }
  .teach.is-follow .teach__card { margin: 0 var(--g8); }
  /* The card is Bub's own cheer-style bubble: it pops. */
  .teach.is-follow.is-arriving .teach__card { animation: cheer-pop .45s cubic-bezier(.2, 1.4, .4, 1) .15s both; }
  /* Wide card spreading into Bub's corner is the fixed layout's trick: it is not wanted when he travels. */
  body.is-bub-out .teach.is-follow .teach__say { width: min(700px, calc(100vw - var(--school-w, 0px) - min(41.4vh, 32.2vw) - 50px)); }
}

.teach__bub.is-hop { animation: bubfly-hop .75s cubic-bezier(.3, 1.6, .5, 1), teach-bob 2.6s ease-in-out .75s infinite; }
/* Calmer while he teaches: a gentle sway, not the crazy shake (that is for cheers). */
@keyframes teach-bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-1.5%) rotate(-1deg); } }
@keyframes bub-crazy {
  0%, 100% { transform: rotate(-2deg) translateY(0); } 50% { transform: rotate(2deg) translateY(-3px); }
}
.coach.is-follow .coach__bubble { display: none; }

/* ── PROGRESS IS A MODULE ON THE BOARD: there when switched on, moved with its ▲▼ ── */
.pedal--progress { grid-column: 1 / -1; scroll-margin-top: 70px; }
.pedal--progress:has(.report[hidden]) { display: none; }
.pedal--progress > .pedal__head { margin-bottom: var(--g13); }

/* ── SQUARE TRANSPORT: Record, Play/Start are squares with a symbol, never a lamp ── */
:root[data-theme] #board :is(.tcbar .transport, .loops__toolbar .transport, .fbrec__rec, .fbrec__play) {
  position: relative; width: var(--ctl); min-width: var(--ctl); height: var(--ctl); min-height: var(--ctl); padding: 0; gap: 0;
  border-radius: 7px; flex: 0 0 var(--ctl);
}
:root[data-theme] #board .fbrec__rec { width: 34px; min-width: 34px; height: 34px; min-height: 34px; flex-basis: 34px; }
/* The word stays for screen readers and the help line; the symbol is what is seen. */
:root[data-theme] #board :is(.transport, .fbrec__rec) > span:not(.transport__led):not(.fbrec__dot) {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
:root[data-theme] #board .transport .transport__led, :root[data-theme] #board .transport[aria-pressed="true"] .transport__led {
  width: 16px; height: 16px; border-radius: 0; box-shadow: none; background: currentColor;
  clip-path: polygon(16% 4%, 96% 50%, 16% 96%);
}
:root[data-theme] #board .transport[aria-pressed="true"] .transport__led {
  clip-path: polygon(12% 6%, 38% 6%, 38% 94%, 12% 94%, 12% 6%, 62% 6%, 88% 6%, 88% 94%, 62% 94%, 62% 6%);
}
:root[data-theme] #board .fbrec__dot { width: 14px; height: 14px; }

/* ── Phone: the metronome's playing line is one line: TAP, − BPM +, and the two squares; the menus fold under one button ── */

:where(.pedal[data-bp~="max719"]) .met > .tcbar {   align-items: center; gap: 6px; }
:where(.pedal[data-bp~="max719"]) .met > .tcbar > .tcbar__unit--tap { grid-area: tap; }
:where(.pedal[data-bp~="max719"]) .met > .tcbar > .tcbar__unit--tempo { grid-area: tempo; }
:where(.pedal[data-bp~="max719"]) .met > .tcbar > .tcbar__unit--go { grid-area: go; display: flex; align-items: center; gap: 6px; }
:where(.pedal[data-bp~="max719"]) .met > .tcbar > .tcbar__unit--go > .tcbar__go { display: flex; gap: 6px; grid-column: auto; }
:where(.pedal[data-bp~="max719"]) .met > .tcbar > .tcbar__unit [data-tap] { width: 46px; height: 46px; min-height: 46px; padding: 0; }
:where(.pedal[data-bp~="max719"]) .met .tempo { grid-template-columns: 40px minmax(0, 1fr) 40px; grid-template-areas: "down num up"; gap: 4px; }
:where(.pedal[data-bp~="max719"]) .met .tempo .tstep { height: 46px; border-radius: 10px; font-size: 24px; }
:root[data-theme] :where(.pedal[data-bp~="max719"]) .met .tempo .tcbpm__box { height: 46px; }
:root[data-theme] :where(.pedal[data-bp~="max719"]) .met .tempo .tcbpm__box input.tcbpm.input { font-size: 34px; height: 40px; }
:root[data-theme] #board :where(.pedal[data-bp~="max719"]) .met > .tcbar > .tcbar__unit--go .transport { width: 46px; min-width: 46px; height: 46px; min-height: 46px; flex: 0 0 46px; }

:root[data-theme] .pedal--progress .pedal__head .chip { font: 700 var(--fs-btn)/1 var(--sans); height: 29px; padding: 0 var(--g13); }

/* ── The speed curve gets room again: a band tall enough to climb in, under the notation, never through the notes.
   Its dashes and its BPM labels rise with the Speed curve knob. ── */

:where(.pedal[data-bp~="min720"]) .beatviz,
:where(.pedal[data-bp~="min720"]) .beatstage.has-routine .beatviz { height: 190px; }
:where(.pedal[data-bp~="min720"]) .beatstage { --curve-h: 62px; }

/* Start routine sits first on the Routines toolbar. */
.loops__toolbar > .transport { align-self: center; margin-left: var(--g13); }

:root[data-theme] #board :where(.pedal[data-bp~="max719"]) .loops__toolbar > .transport { width: 46px; min-width: 46px; height: 46px; min-height: 46px; flex: 0 0 46px; }


/* Each module's play button sits at the far right of its menu row, on one line down the page. */
.fb > .tcbar { width: 100%; }
.fb > .tcbar > .fb__playunit { margin-left: auto; order: 90; }
.fb > .tcbar > .fbrec__unit { flex: 1 1 auto; }
.fbrec__ctl { width: 100%; }
.fbrec__ctl > .fbrec__play { margin-left: auto; }

:where(.pedal[data-bp~="max719"]) .loops__toolbar > .transport { grid-column: 2; justify-self: end; }

/* ── A note you hear is a note you see: a white-hot flash, a hard glow and a ring that bursts out ── */
.fb__note.is-sounding { z-index: 4; }
.fb__note.is-sounding .fb__dot {
  transform: scale(1.5); background: #fff !important; color: #111 !important;
  box-shadow: 0 0 0 3px var(--led), 0 0 10px 3px #fff, 0 0 26px 8px var(--led), 0 0 50px 14px color-mix(in srgb, var(--led) 55%, transparent);
  animation: note-flash .35s ease-out;
}
.fb__note.is-sounding::before {
  content: ""; position: absolute; left: 50%; top: 50%; z-index: 1; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%;
  border: 3px solid #fff; pointer-events: none; animation: note-burst .55s ease-out forwards;
}
.fb__note.is-ringing .fb__dot { animation: note-flash .4s ease-out; box-shadow: 0 0 0 3px var(--led), 0 0 22px 6px var(--led); }
.fb__note.is-ringing::before { border-color: #fff; border-width: 3px; animation: note-burst .55s ease-out; width: 30px; height: 30px; margin: -15px 0 0 -15px; }
@keyframes note-flash { 0% { transform: scale(2); filter: brightness(2.2); } 100% { transform: scale(1.5); filter: none; } }
@keyframes note-burst { from { transform: scale(.5); opacity: 1; } to { transform: scale(3); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .fb__note.is-sounding .fb__dot, .fb__note.is-ringing .fb__dot, .fb__note.is-sounding::before, .fb__note.is-ringing::before { animation: none; } }

/* ══ LEARN IS BUB'S BUBBLE: no side drawer, no padding for one, a compact menu and a compact lesson card ══ */
.school { display: none !important; }
body.has-school > main, body.has-school > .footer, body.has-school { padding-left: 0 !important; }
@media (max-width: 719px) {
  body.has-school { padding-bottom: 0 !important; }
  body:has(.tabbar).has-school { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)) !important; }
  body.has-school .masthead { position: sticky; }
}

:root { --school-w: 0px; }
.school__menuhead .school__runname { font: 700 var(--fs-head)/1 var(--display); }
.school__menuhead .school__tour {  display: flex; align-items: center; gap: var(--g8); min-width: 0; }
.school__menuhead .school__tourbar { grid-column: auto; width: 64px; flex: none; }
.school__menuhead .school__tournext { white-space: nowrap; font-size: var(--fs-title); }

.teach__say .lset { position: static; width: auto; box-shadow: none; margin: var(--g5) 0; }
.school__tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));  }
.school__tiles > button { min-width: 0;  }

.teach__say .school__list { max-height: 36vh; overflow-y: auto; }
@media (max-width: 719px) {
    .school__menuhead .school__tour { display: none; }
  body[data-teaching="learn"] .teach__say { max-height: 62vh; }
  .teach__say .school__list { max-height: 28vh; }
}

/* A lesson card with one back and one close: tighter, with no tags, and Skip lesson a small link beside Skip to the practice. */
.teach__say .school__runhead { gap: var(--g8); }
.teach__say .school__back { padding: 0; width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; font-size: var(--fs-val); flex: none; }
.teach__say .school__skiplesson { appearance: none; background: none; border: 0; padding: 0; cursor: pointer; font: 600 var(--fs-title)/1 var(--sans); color: var(--ink-mute); text-decoration: underline; }
.teach__say .school__slidenav { gap: var(--g13); }
.teach__say .school__stitle { font-size: var(--fs-val); }
.teach__say { padding: var(--g8) var(--g13) var(--g13); }
@media (min-width: 720px) {
  body[data-teaching="learn"] .teach__say { width: min(660px, calc(100vw - min(41.4vh, 32.2vw) - 50px)); }
}

:root[data-theme] #board .fb__play { width: var(--ctl); min-width: var(--ctl); height: var(--ctl); padding: 0; justify-content: center; }
:root[data-theme] #board .fb__play .fb__play__word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
:root[data-theme] #board .fb__play { position: relative; }
:root[data-theme] #board .loops__toolbar .transport { font: 700 var(--fs-btn)/1 var(--sans); }

/* ══ MODULES, REDESIGNED: the title sits on the top border, a gear opens the switches under the menu row ══ */
/* (all widths since v370) */
  [data-pedal] { position: relative; }
  [data-pedal] > .pedal__head { min-height: 0; margin: 0; padding: 0; gap: 0; display: block; }
  [data-pedal] .pedal__id { display: block; }
  [data-pedal] .pedal__head .pedal__art, [data-pedal] .pedal__lines .pedal__status:empty { display: none; }
  [data-pedal] .pedal__head h3 {
    position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); z-index: 3; margin: 0; padding: 0 var(--g13);
    background: var(--bg); font: 600 var(--fs-head)/1 var(--sans); color: var(--ink);
  }
  [data-pedal] .pedal__lines { margin: 0 0 var(--g8); }
  .pedal__gear {
    display: grid; place-items: center; flex: none; width: var(--ctl); height: var(--ctl); padding: 0; cursor: pointer; align-self: center;
    background: transparent; border: 0; border-radius: 8px; color: var(--ink);
  }
  .pedal__gear svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .pedal__gear:hover, .pedal__gear[aria-expanded="true"] { color: var(--accent); }
  .pedal__gear:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  /* The switches and knobs: a panel under the menu row, only while the gear is open. */
  [data-pedal] .pedal__headctl {
    display: none; position: absolute; left: var(--g21); top: 70px; z-index: 40; margin: 0; 
     background: var(--surface); border: 1px solid var(--ctl-edge-hi); 
    box-shadow: 0 13px 30px rgb(0 0 0 / .5);   
  }
    /* The note readout belongs under the neck, centred. */
  .fb { display: flex; flex-direction: column; }
    
:where(.pedal[data-bp~="min720"]) .fb > .fb__wrap,
:where(.pedal[data-bp~="min720"]) .fb > .fb__side { align-self: stretch; width: 100%; min-width: 0; }
:where(.pedal[data-bp~="min720"]) .fb > .tcbar > .fbrec__unit,
:where(.pedal[data-bp~="min720"]) .fb > .tcbar .fbrec__ctl { display: contents !important; }
:where(.pedal[data-bp~="min720"]) .fb > .tcbar .fbrec__ctl > .fbrec__play { order: 91; margin-left: auto; }
:where(.pedal[data-bp~="min720"]) .fb > .tcbar .fbrec__ctl > .fbrec__count { order: 5; }

:where(.pedal[data-bp~="min720"]) .fb > .tcbar .tuner__name { display: none; }
:where(.pedal[data-bp~="min720"]) .fb > .tcbar > .tuner { align-self: center; }

/* ══ LEARN AS LAYERS: home (gear · Learn · tour; the day's tiles; five big track buttons), then a track's lessons
   with ← back. A questionnaire: one choice per layer, big targets. ══ */
.teach__say .school__menuhead { display: grid;  align-items: center; gap: var(--g8); }
.school__menuhead .school__runname { text-align: center; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.school__menuhead .school__tour { margin-left: 0; border-radius: 999px; padding: 4px var(--g13); border: 1px solid var(--accent); }
.school__crumb { color: var(--ink-mute); font-weight: 600; }

.school__tracks { display: grid;    }
.school__track {
  appearance: none; cursor: pointer;  border-radius: 10px; 
  display: grid; place-content: center;  text-align: center;
  border: 2px solid var(--line-2); background: transparent; color: var(--ink);
  animation: school-in .38s var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms);
  transition: background .15s, border-color .15s, color .15s, transform .15s;
}
.school__track:hover, .school__track:focus-visible { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); transform: translateY(-1px); }
.school__track:hover .school__trackn, .school__track:focus-visible .school__trackn { color: inherit; }
.school__trackname { font: 700 1.25rem/1 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.school__trackn {  color: var(--ink-mute); }
.teach__say .school__blurb { margin: var(--g5) 0; }
.teach__say [data-layer="track"] ~ .school__list { max-height: 46vh; }
@media (max-width: 719px) {
        .teach__say [data-layer="track"] ~ .school__list { max-height: 40vh; }
}

@media (prefers-reduced-motion: reduce) { .school__track { animation: none; transition: none; } }

/* ══ THE FRETBOARD'S ONE ROW: ⚙ · menus · ▶ scale · shape and arpeggio chips · Record · tuner · ▶, the neck right under it ══ */
.fb__side:not(:has(.fb__legend:not([hidden]), .fb__arps:not([hidden]))) { display: none !important; }

:where(.pedal[data-bp~="min720"]) .fb > .tcbar { margin-bottom: var(--g8); }
:where(.pedal[data-bp~="min720"]) .fb > .tcbar > .fb__side { flex: 0 1 auto; min-width: 0; margin: 0; height: auto; gap: 3px; }
:root[data-theme] :where(.pedal[data-bp~="min720"]) .tcbar > .fb__side :is(.fb__legend, .fb__arps) { gap: 3px; }
:where(.pedal[data-bp~="min720"]) .tcbar > .fb__side .fb__arps:not([hidden])::before { height: 24px; margin: 0 3px; }
:root[data-theme] :where(.pedal[data-bp~="min720"]) .tcbar > .fb__side :is(.fb__pos, .fb__arp) {
    height: 30px; min-height: 30px; padding: 0 7px; gap: 4px; border-radius: 7px; font: 700 var(--fs-title)/1 var(--sans);
  }
:where(.pedal[data-bp~="min720"]) .tcbar > .fb__side .fb__posword,
:where(.pedal[data-bp~="min720"]) .tcbar > .fb__side .fb__strum,
:where(.pedal[data-bp~="min720"]) .tcbar > .fb__side .fb__arpbadge > span:nth-child(n + 2) { display: none; }
:where(.pedal[data-bp~="min720"]) .tcbar > .fb__side .fb__swatch { width: 8px; height: 8px; }
:where(.pedal[data-bp~="min720"]) .tcbar > .fb__side .fb__arp { border-bottom: 2px solid var(--pc) !important; }
:where(.pedal[data-bp~="min720"]) .tcbar > .fb__side .fb__arpbadge {   letter-spacing: 0; }
:root[data-theme] :where(.pedal[data-bp~="min720"]) .tcbar > .fb__side .fb__posfret { font-size: var(--fs-title); }

/* ══ THE GEAR OPENS A SETTINGS BOX: one row per option — its name, its switch, and what it is set to.
   Knobs become sliders in their row (ui/knob.js reads --knob-mode and follows the pointer across). ══ */
/* (all widths since v370) */
  :root[data-theme] [data-pedal] .pedal__headctl {
    flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0; padding: var(--g5) 0; width: 340px; max-width: calc(100% - var(--g34));
    border-radius: 0 12px 12px 12px; max-height: 70vh; overflow-y: auto;
  }
  [data-pedal].is-gearopen .pedal__headctl { display: flex; }
  :root[data-theme] .pedal__headctl > .tcbar__unit { display: block; padding: 0 var(--g13); margin: 0; }
  :root[data-theme] .pedal__headctl > .tcbar__unit + .tcbar__unit { border-top: 1px solid var(--line); }
  :root[data-theme] .pedal__headctl :is(.flip, .knob, .rocker) {
    display: grid; grid-template-columns: minmax(0, 1fr) 112px 84px; align-items: center; column-gap: var(--g13); min-height: 44px; width: 100%;
  }
  :root[data-theme] .pedal__headctl :is(.flip__name, .knob__name, .rocker__name) {
    grid-column: 1; grid-row: 1; position: static; font: 600 var(--fs-btn)/1.2 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); text-align: left;
  }
  :root[data-theme] .pedal__headctl :is(.flip__plate, .knob__dial, .rocker__plate) { grid-column: 2; grid-row: 1; justify-self: center; margin: 0; }
  :root[data-theme] .pedal__headctl :is(.flip__val, .knob__val) {
    grid-column: 3; grid-row: 1; position: static; justify-self: end; font: 600 var(--fs-title)/1 var(--sans); color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  }
  :root[data-theme] .pedal__headctl .rocker::after {
    grid-column: 3; grid-row: 1; justify-self: end; content: "Off"; font: 600 var(--fs-title)/1 var(--sans); color: var(--ink-mute);
  }
  :root[data-theme] .pedal__headctl .rocker:has([aria-checked="true"])::after { content: "On"; color: var(--accent); }
  :root[data-theme] .pedal__headctl .flip__plate { transform: scale(.8); }
  /* A knob that is a slider: a track filled to its value and a round thumb. */
  :root[data-theme] .pedal__headctl .knob__dial[role="slider"] {
    --knob-mode: slider; justify-self: stretch; width: 100%; height: 26px; border-radius: 0; border: 0; box-shadow: none; transform: none; cursor: pointer; touch-action: none;
    background: linear-gradient(to right, var(--accent) var(--pct, 50%), var(--line-2) var(--pct, 50%)) center / 100% 6px no-repeat;
  }
  :root[data-theme] .pedal__headctl .knob__dial[role="slider"]::after { display: none; }
  :root[data-theme] .pedal__headctl .knob__dial[role="slider"] .knob__pointer {
    position: absolute; left: var(--pct, 50%); top: 50%; width: 16px; height: 16px; margin: 0; border-radius: 50%; transform: translate(-50%, -50%) !important;
    background: var(--ink); box-shadow: 0 1px 4px rgb(0 0 0 / .5); rotate: none;
  }
  :root[data-theme] .pedal__headctl .knob__dial[role="button"] { width: 30px; height: 30px; }

/* ══ ROUTINES, A MODULE OF ITS OWN: its name on the border, one row — ⚙ · routine menu · next up and time left · ▶ —
   and a gear box for speed curve, rest, repeat, count-in and undo. One line on a phone too. ══ */
.pedal--routines { position: relative; }
.pedal--routines > .pedal__head { min-height: 0; margin: 0; padding: 0; display: block; }
.pedal--routines > .pedal__head h3 {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); z-index: 3; margin: 0; padding: 0 var(--g13);
  background: var(--bg); color: var(--ink); white-space: nowrap;
}
:root[data-theme] .loops__toolbar.rrow { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--g8); margin: 0 0 var(--g8); position: static; }
.rrow > .pedal__gear {
  display: grid; place-items: center; flex: none; width: var(--ctl); height: var(--ctl); padding: 0; cursor: pointer;
  background: transparent; border: 0; border-radius: 8px; color: var(--ink);
}
.rrow > .pedal__gear svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rrow > .pedal__gear:hover, .rrow > .pedal__gear[aria-expanded="true"] { color: var(--accent); }
.rrow__pick { display: flex; align-items: center; flex: 0 1 auto; min-width: 0; }
.rrow__pick > .picker[data-grouppick] { min-width: 0; }
.rnext { flex: 1 1 auto; min-width: 0; font-size: var(--fs-btn); color: var(--ink-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rnext b { color: var(--ink); font-weight: 700; }
.rnext__lbl { font: 600 var(--fs-title)/1 var(--sans); text-transform: uppercase; letter-spacing: .06em; }
:root[data-theme] #board .loops__toolbar.rrow > .transport {  grid-column: auto; }
/* The settings box, under the row while the gear is open. */
:root[data-theme] .rrow > .rset {
  display: none; position: absolute; left: var(--g13); z-index: 40; margin: 0; width: 340px; max-width: calc(100% - var(--g26, 26px));
  flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0; padding: var(--g5) 0;
  background: var(--surface); border: 1px solid var(--ctl-edge-hi); border-radius: 0 12px 12px 12px; box-shadow: 0 13px 30px rgb(0 0 0 / .5);
}
.pedal--routines.is-gearopen .rrow > .rset { display: flex; }
:root[data-theme] .rset > .tcbar__unit { display: block; padding: 0 var(--g13); margin: 0; }
:root[data-theme] .rset > .tcbar__unit + .tcbar__unit { border-top: 1px solid var(--line); }
:root[data-theme] .rset :is(.flip, .knob, .rset__row) {
  display: grid; grid-template-columns: minmax(0, 1fr) 112px 84px; align-items: center; column-gap: var(--g13); min-height: 44px; width: 100%;
}
:root[data-theme] .rset :is(.flip__name, .knob__name, .rset__name) {
  grid-column: 1; grid-row: 1; position: static; font: 600 var(--fs-btn)/1.2 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); text-align: left;
}
:root[data-theme] .rset :is(.flip__plate, .knob__dial) { grid-column: 2; grid-row: 1; justify-self: center; margin: 0; }
:root[data-theme] .rset :is(.flip__val, .knob__val) {
  grid-column: 3; grid-row: 1; position: static; justify-self: end; font: 600 var(--fs-title)/1 var(--sans); color: var(--accent); white-space: nowrap;
}
:root[data-theme] .rset .flip__plate { transform: scale(.8); }
:root[data-theme] .rset .knob__dial[role="slider"] {
  --knob-mode: slider; justify-self: stretch; width: 100%; height: 26px; border-radius: 0; border: 0; box-shadow: none; transform: none; cursor: pointer; touch-action: none;
  background: linear-gradient(to right, var(--accent) var(--pct, 50%), var(--line-2) var(--pct, 50%)) center / 100% 6px no-repeat;
}
:root[data-theme] .rset .knob__dial[role="slider"]::after { display: none; }
:root[data-theme] .rset .knob__dial[role="slider"] .knob__pointer {
  position: absolute; left: var(--pct, 50%); top: 50%; width: 16px; height: 16px; margin: 0; border-radius: 50%; transform: translate(-50%, -50%) !important;
  background: var(--ink); box-shadow: 0 1px 4px rgb(0 0 0 / .5);
}
:root[data-theme] .rset .curveknob { width: 100%; margin: 0; }
.rset__seg { grid-column: 2 / 4; justify-self: end; display: flex; gap: 4px; }
:root[data-theme] .rset__seg button { min-width: 38px; min-height: 30px; padding: 0 var(--g8); font: 700 var(--fs-btn)/1 var(--sans); }

.pedal--routines:where([data-bp~="max719"]) { padding-top: var(--g13); }
.pedal--routines:where([data-bp~="max719"]) > .pedal__head h3 { font: 600 var(--fs-btn)/1 var(--sans); letter-spacing: .02em; }
:where(.pedal[data-bp~="max719"]) .rrow > .pedal__gear svg { width: 22px; height: 22px; }
:where(.pedal[data-bp~="max719"]) .rnext__lbl { display: none; }
:where(.pedal[data-bp~="max719"]) .rnext { font-size: var(--fs-title); }
:root[data-theme] :where(.pedal[data-bp~="max719"]) .rrow > .rset { left: var(--g8); right: var(--g8); width: auto; max-width: none; }

/* Smaller module names on the border. */
:root[data-theme] :is([data-pedal], .pedal--routines) > .pedal__head h3 { font: 600 15px/1 var(--sans); letter-spacing: .02em; }

:root[data-theme] :where(.pedal[data-bp~="min720"]) .tcbar > .fb__side :is(.fb__pos, .fb__arp) { min-width: 0; width: auto; flex: none; }
:root[data-theme] :where(.pedal[data-bp~="min720"]) .tcbar > .fb__side .fb__arpbadge { border: 0; background: none; padding: 0; width: auto; height: auto; box-shadow: none; color: inherit; }
:root[data-theme] :where(.pedal[data-bp~="min720"]) .tcbar > .fb__side .fb__arpbadge > span { transform: none; }

:root[data-theme] :where(.pedal[data-bp~="min720"]) .tcbar > .fb__side .fb__arpbadge { font: 700 var(--fs-title)/1 var(--sans); text-transform: none; display: inline; }

/* ══ v370 ══════════════════════════════════════════════════════════════════════════════════════════════════════ */
/* A chord chip never grows: where it sits on the neck shows in a small speech bubble above it. */
:root[data-theme] .fb__side :is(.fb__pos, .fb__arp) .fb__posfret,
:root[data-theme] .fb__side :is(.fb__pos, .fb__arp):is(:hover, :focus-visible) .fb__posfret {
  display: block; position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 60; pointer-events: none;
  padding: 5px 8px; border-radius: 7px; background: var(--surface); border: 1px solid var(--ctl-edge-hi); color: var(--ink);
  font: 600 var(--fs-title)/1 var(--sans); white-space: nowrap; box-shadow: 0 6px 16px rgb(0 0 0 / .4);
  opacity: 0; visibility: hidden; transform: translate(-50%, 4px); transition: opacity .12s, transform .12s, visibility .12s;
}
:root[data-theme] .fb__side :is(.fb__pos, .fb__arp) .fb__posfret::after {
  content: ""; position: absolute; left: 50%; top: 100%; width: 8px; height: 8px; margin: -4px 0 0 -4px; transform: rotate(45deg);
  background: var(--surface); border-right: 1px solid var(--ctl-edge-hi); border-bottom: 1px solid var(--ctl-edge-hi);
}
:root[data-theme] .fb__side :is(.fb__pos, .fb__arp):is(:hover, :focus-visible) .fb__posfret { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* In a settings box every switch lies on its side: levers left–right, the Sound choice a row of stops. */
:root[data-theme] :is(.pedal__headctl, .rset) .flip__plate { --flip-axis: x;  cursor: ew-resize; }
:root[data-theme] :is(.pedal__headctl, .rset) .knob__dial[role="button"] {
  --knob-mode: slider; justify-self: stretch; width: 100%; height: 26px; border-radius: 0; border: 0; box-shadow: none; cursor: pointer; touch-action: none;
  background:
    repeating-linear-gradient(to right, var(--ink-mute) 0 2px, transparent 2px calc((100% - 2px) / var(--stops, 4))) center / 100% 10px no-repeat,
    linear-gradient(var(--line-2), var(--line-2)) center / 100% 4px no-repeat;
}
:root[data-theme] :is(.pedal__headctl, .rset) .knob__dial[role="button"]::after { display: none; }
:root[data-theme] :is(.pedal__headctl, .rset) .knob__dial[role="button"] .knob__pointer {
  position: absolute; left: var(--pct, 0%); top: 50%; width: 16px; height: 16px; margin: 0; border-radius: 50%; transform: translate(-50%, -50%) !important;
  background: var(--ink); box-shadow: 0 1px 4px rgb(0 0 0 / .5);
}

/* The metronome's Routines switch sits in its main row, beside Rhythm. */
.met > .tcbar > .tcbar__unit--routmain { align-self: center; }
.met > .tcbar > .tcbar__unit--routmain .rocker { flex-direction: column-reverse; gap: 4px; }
.met > .tcbar > .tcbar__unit--routmain .rocker__state { display: none; }

/* Routines main row: ⚙ · routine · Speed curve · Rest · ↶ ↷ · + Save preset · next up · ▶. Knobs are small, the value beside. */
:root[data-theme] .rrow > .rrow__knob {
  display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 6px; row-gap: 2px; align-items: center; flex: none; margin: 0;
}
:root[data-theme] .rrow > .rrow__knob .knob__dial { grid-row: 1 / 3; width: 28px; height: 28px; }
:root[data-theme] .rrow > .rrow__knob .knob__pointer { top: 3px; height: 9px; transform-origin: 50% 11px; }
:root[data-theme] .rrow > .rrow__knob .knob__name { grid-column: 2; font: 600 var(--fs-title)/1 var(--sans); letter-spacing: .02em; text-transform: none; color: var(--ink-mute); }
:root[data-theme] .rrow > .rrow__knob .knob__val { grid-column: 2; font: 700 var(--fs-btn)/1 var(--sans); color: var(--accent); }
.rrow__hist, .rrow__save { display: flex; gap: 4px; flex: none; }
:root[data-theme] .rrow :is(.rrow__hist, .rrow__save) .chip { min-height: var(--ctl); height: var(--ctl); padding: 0 var(--g8); font: 700 var(--fs-btn)/1 var(--sans); }
.rrow__hist .chip:disabled { opacity: .4; cursor: default; }
.rrow__save:empty { display: none; }

:where(.pedal[data-bp~="max719"]) .rrow__word,
:where(.pedal[data-bp~="max719"]) .rnext { display: none !important; }
:where(.pedal[data-bp~="max719"]) .rrow__pick { flex: 1 1 0; }
:root[data-theme] :where(.pedal[data-bp~="max719"]) .rrow__pick .picker__btn { min-width: 0; width: 100%; }
:root[data-theme] :where(.pedal[data-bp~="max719"]) .rrow > .rrow__knob { grid-template-columns: auto; justify-items: center; row-gap: 1px; }
:root[data-theme] :where(.pedal[data-bp~="max719"]) .rrow > .rrow__knob .knob__dial { grid-row: auto; width: 26px; height: 26px; }
:root[data-theme] :where(.pedal[data-bp~="max719"]) .rrow > .rrow__knob .knob__name { display: none; }
:root[data-theme] :where(.pedal[data-bp~="max719"]) .rrow > .rrow__knob .knob__val { grid-column: 1; font-size: var(--fs-title); }
:root[data-theme] :where(.pedal[data-bp~="max719"]) .rrow :is(.rrow__hist, .rrow__save) .chip {   height: 36px; min-height: 36px; padding: 0; justify-content: center; }

/* Learn: the gear and ← are the modules' own icon buttons; the day's tiles squarer with bigger words; a bigger lesson list. */
:root[data-theme] .teach__say .school__menuhead .pedal__gear { display: grid; width: var(--ctl); height: var(--ctl); background: transparent; border: 0; border-radius: 8px; margin: 0; }
.school__menuhead .pedal__gear svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
:root[data-theme] .school__tiles > button { min-height: 96px; padding: var(--g13); border-radius: 10px; display: flex; flex-direction: column; justify-content: center; gap: 6px; text-align: left; }
:root[data-theme] .teach__say .school__blurb { font-size: var(--fs-val); }
:root[data-theme] .teach__say .school__lvlhead { font-size: var(--fs-btn); }
:root[data-theme] .teach__say .school__lname { font-size: var(--fs-head); }
:root[data-theme] .teach__say :is(.school__lvl, .school__lbest) { font-size: var(--fs-btn); }
@media (max-width: 719px) {
  :root[data-theme] .school__tiles > button { min-height: 76px; padding: var(--g8) var(--g13); }
  :root[data-theme] .school__tiles .school__dailyname { font-size: var(--fs-val); }
  :root[data-theme] .school__tiles .school__dailysub { font-size: var(--fs-btn); }
  :root[data-theme] .teach__say .school__lname { font-size: var(--fs-val); }
}

/* Phone: every module is ⚙ · its menu summary · ▶ on one line under its name, and its menus open as a list, one row
   each, like the settings box. The pedal strip is gone; the gear opens the box. */

[data-pedal]:where([data-bp~="max719"]) { padding-top: var(--g21); }
[data-pedal]:where([data-bp~="max719"]) .pedal__headctl { display: none; }
:root[data-theme] [data-pedal]:where([data-bp~="max719"]) .pedal__headctl { left: var(--g8); right: var(--g8); width: auto; max-width: none; }
[data-pedal].is-gearopen:where([data-bp~="max719"]) .pedal__headctl { display: flex !important; }
:where(.pedal[data-bp~="max719"]) .pedal__gear { display: grid; width: 40px; height: 40px; }
:where(.pedal[data-bp~="max719"]) .pedal__gear svg { width: 24px; height: 24px; }
/* The menus, opened: a list of rows, name on the left, the choice on the right. */

.fb > .tcbar { position: relative; z-index: 4; }

:root[data-theme] :where(.pedal[data-bp~="max719"]) .met > .tcbar { grid-template-columns: 40px 46px minmax(0, 1fr) auto; grid-template-areas: "gear tap tempo go"; }
:where(.pedal[data-bp~="max719"]) .met > .tcbar > .pedal__gear { grid-area: gear; }


:root[data-theme] :where(.pedal[data-bp~="max719"]) .loops__toolbar.rrow { gap: 3px; }
:root[data-theme] :where(.pedal[data-bp~="max719"]) .rrow > .pedal__gear { width: 32px; height: 36px; }
:root[data-theme] :where(.pedal[data-bp~="max719"]) .rrow :is(.rrow__hist, .rrow__save) { gap: 3px; }
:root[data-theme] :where(.pedal[data-bp~="max719"]) .rrow :is(.rrow__hist, .rrow__save) .chip { width: 26px; min-width: 26px; }
:root[data-theme] #board :where(.pedal[data-bp~="max719"]) .loops__toolbar.rrow > .transport { width: 36px; min-width: 36px; height: 36px; min-height: 36px; flex: 0 0 36px; }
:root[data-theme] :where(.pedal[data-bp~="max719"]) .rrow__pick .picker__btn { height: 36px; min-height: 36px; padding: 0 6px; }
:root[data-theme] :where(.pedal[data-bp~="max719"]) .rrow__pick .picker__title { display: none; }
:root[data-theme] :where(.pedal[data-bp~="max719"]) .rrow__pick .picker__cur { font-size: var(--fs-btn); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

:root[data-theme] :where(.pedal[data-bp~="max719"]) .rrow__pick .picker__caret { display: none; }

:root[data-theme] .fb__side :is(.fb__pos, .fb__arp):not(:hover):not(:focus-visible) .fb__posfret { display: none; }


/* ══ v373 ══ */
/* The string names sit in the dark column at the nut: they keep the page's own ink, whatever the wood. */
[data-pedal="fret"] { --label-ink: var(--ink-mute); }
.fb .fb__note--open .fb__name { color: var(--label-ink); opacity: 1; }
/* Rush / drag is a display of its own, as wide as the beat view and an inch high, with its numbers inside it. */
:root[data-theme] .beatrow > .tline {
  display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: var(--g8);
  height: 96px; box-sizing: border-box; margin-top: var(--g8); padding: var(--g8) var(--g21);
  border: 1px solid var(--cap-edge); border-radius: 6px; background: var(--well); box-shadow: inset 0 2px 6px var(--well-shadow);
}
:root[data-theme] .beatrow > .tline .tbar--line { flex: 0 0 34px; width: 100%; height: 34px; border-radius: 8px; }
:root[data-theme] .beatrow > .tline .tbar__stats { justify-content: center; }
.beatrow > .tline .tbar--line::before, .beatrow > .tline .tbar--line::after {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; font: 700 var(--fs-title)/1 var(--display); letter-spacing: .08em; color: var(--ink-mute); pointer-events: none;
}
.beatrow > .tline .tbar--line::before { content: "◂ RUSHING"; left: var(--g8); }
.beatrow > .tline .tbar--line::after { content: "DRAGGING ▸"; right: var(--g8); }
/* The info lines under the metronome and under the routines, like the readout under the neck. */
.minfo, .rinfo {     margin-top: var(--g8);   }
.minfo .pedal__status { display: block !important; margin: 0; font-size: var(--fs-btn); color: var(--ink-mute); }
.rinfo .rnext { flex: 0 1 auto; }
.rinfo__msg { flex: 1 1 auto; min-width: 0; text-align: right; color: var(--ink-mute); }

:where(.pedal[data-bp~="max719"]) .rinfo { flex-direction: column; gap: 2px; }
:where(.pedal[data-bp~="max719"]) .rinfo__msg { text-align: left; }
:root[data-theme] :where(.pedal[data-bp~="max719"]) .beatrow > .tline {  padding: var(--g8) var(--g13); }

:where(.pedal[data-bp~="max719"]) .rinfo .rnext { display: block !important; }

/* Routines: Undo / Redo are small icon squares on every screen; ▶ lines up with the row. */
.rrow__hist .rrow__word { display: none; }
:root[data-theme] .rrow .rrow__hist .chip { width: 34px; min-width: 34px; height: 34px; min-height: 34px; padding: 0; justify-content: center; font-size: var(--fs-val); }
:root[data-theme] #board .loops__toolbar.rrow > .transport { margin-left: auto; align-self: center; }
:root[data-theme] .beatrow { flex-direction: column; }
:root[data-theme] .beatstage .take { inset: 0; }   /* rush/drag lives under the beat view now, not inside its box */

/* ══ v377 ══ */
/* Every square play button centres its symbol (the Routines ▶ sat to the left of its square). */
:root[data-theme] #board :is(.transport, .fbrec__play, .fb__play) { justify-content: center; align-items: center; }
/* The routine menu is as tall as the rest of its row. */

:root[data-theme] :where(.pedal[data-bp~="min720"]) .rrow__pick .picker__btn { height: var(--ctl); min-height: var(--ctl); }

/* Phone: the speed curve keeps to a band at the foot of the beat view; the notes sit above it, never under it. */

:root[data-theme] :where(.pedal[data-bp~="max719"]) .beatstage { --curve-h: 58px; }
:root[data-theme] :where(.pedal[data-bp~="max719"]) .beatstage.has-routine .beatviz :is(.beatnotation, .beatstrip) { height: calc(100% - var(--curve-h) - 6px); }

/* Settings boxes, compact: shorter rows, and wider toggles. */
:root[data-theme] :is(.pedal__headctl, .rset) { width: 320px; padding: 3px 0; }
:root[data-theme] :is(.pedal__headctl, .rset) :is(.flip, .knob, .rocker, .rset__row) { min-height: 36px; grid-template-columns: minmax(0, 1fr) 124px 70px; column-gap: var(--g8); }
:root[data-theme] :is(.pedal__headctl, .rset) .flip__plate { width: 22px; height: 54px; transform: rotate(-90deg); }
:root[data-theme] :is(.pedal__headctl, .rset) .flip[data-pos="up"] .flip__bat { transform: translate(-50%, -165%) scaleY(1.05); }
:root[data-theme] :is(.pedal__headctl, .rset) .flip[data-pos="down"] .flip__bat { transform: translate(-50%, 65%) scaleY(1.05); }
:root[data-theme] :is(.pedal__headctl, .rset) .rocker__plate { width: 54px; }
:root[data-theme] :is(.pedal__headctl, .rset) .rocker__plate[aria-checked="true"] .rocker__cap { transform: translateX(30px); }
:root[data-theme] :is(.pedal__headctl, .rset) .knob__dial[role="slider"] { height: 22px; }

/* Show: a small three-way toggle in the fretboard's main row. */
:root[data-theme] .fb__show { display: inline-flex; gap: 0; height: 34px; align-self: center; border-radius: 8px; overflow: hidden; border: 1px solid var(--ctl-edge); }
:root[data-theme] .fb__show button { height: 100%; min-height: 0;  border: 0; border-radius: 0; font: 700 var(--fs-title)/1 var(--sans);  text-transform: uppercase; background: transparent; color: var(--ink-mute); }
:root[data-theme] .fb__show button + button { border-left: 1px solid var(--ctl-edge); }
:root[data-theme] .fb__show button[aria-checked="true"] { background: var(--accent); color: var(--accent-ink); }

/* Notes you play or pick: plain and bright — a white dot ringed in the lamp colour, a little bigger. No flash, no burst. */
.fb__note.is-sounding .fb__dot, .fb__note.is-ringing .fb__dot {
  transform: scale(1.22); background: #fff !important; color: #111 !important;
  box-shadow: 0 0 0 2px var(--led), 0 0 8px color-mix(in srgb, var(--led) 60%, transparent); animation: none; transition: transform .06s ease;
}
.fb__note.is-sounding::before, .fb__note.is-ringing::before { content: none; animation: none; }
.fb__note.is-played .fb__dot { box-shadow: 0 0 0 2px var(--led); }
.fb__note.is-held .fb__dot { box-shadow: 0 0 0 2px var(--led), 0 1px 2px rgba(0,0,0,.45); }

/* Every module's info bar: one line, the full width of the module, things in a row and buttons at the right. */
.minfo, .rinfo {
  display: flex; flex-wrap: nowrap; align-items: center; gap: var(--g13); min-height: 40px; width: 100%; box-sizing: border-box;
  margin: var(--g8) 0 0; padding: 0 var(--g8); border-top: 1px solid var(--line); font-size: var(--fs-btn); color: var(--ink-mute);
}

:where(.pedal[data-bp~="max719"]) .minfo, :where(.pedal[data-bp~="max719"]) .rinfo { flex-wrap: wrap; min-height: 34px; padding: var(--g5) var(--g5) 0; }

:root[data-theme] .fb__show button { padding: 0 6px; letter-spacing: .02em; }

:root[data-theme] :where(.pedal[data-bp~="min720"]) .fb > .tcbar [data-tuningpick] .picker__btn { max-width: 138px; min-width: 0; }
:root[data-theme] :where(.pedal[data-bp~="min720"]) .fb > .tcbar [data-tuningpick] .picker__cur { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root[data-theme] :where(.pedal[data-bp~="min720"]) .fb > .tcbar { column-gap: 6px; }

/* A lever turned on its side still takes its upright height in the layout: give that back, so rows stay compact. */
:root[data-theme] :is(.pedal__headctl, .rset) .flip__plate { margin: -16px 0; }
:root[data-theme] :is(.pedal__headctl, .rset) .flip { min-height: 34px; }
/* A two-way lever reads like any switch: its first choice (On) to the right. */
:root[data-theme] :is(.pedal__headctl, .rset) .flip--2 .flip__plate { --flip-axis: -x; transform: rotate(90deg); }

/* ══ v380: the phone metronome, like the wide one — big notes under READY, a snug box on the beat, the curve in its
   band below, and a thick rush/drag bar in its own display. ══ */

:root[data-theme] :where(.pedal[data-bp~="max719"]) .beatstage .beatviz .beatnotation { align-items: flex-start; justify-content: space-between; gap: 6px; padding: 30px 8px 0; }
:root[data-theme] :where(.pedal[data-bp~="max719"]) .beatstage .beatviz .beatnotation .beatbeat { flex: 1 1 0; min-width: 0; height: auto; padding: 6px 4px; justify-content: center; }
:root[data-theme] :where(.pedal[data-bp~="max719"]) .beatstage .beatviz .beatnotation .beatbeat svg { width: 100% !important; height: auto !important; max-height: 64px; }
:root[data-theme] :where(.pedal[data-bp~="max719"]) .beatstage .beatviz .beatstrip { padding-top: 30px; align-items: flex-start; }
:root[data-theme] :where(.pedal[data-bp~="max719"]) .beatrow > .tline { height: 92px; }
:root[data-theme] :where(.pedal[data-bp~="max719"]) .beatrow > .tline .tbar--line { flex-basis: 40px; height: 40px; }
:root[data-theme] :where(.pedal[data-bp~="max719"]) .beatrow > .tline .tbar__stats:not(:has(b:not(:empty))) { display: none; }

:root[data-theme] :where(.pedal[data-bp~="max719"]) .beatstage.has-routine .beatviz { height: 156px; }

/* ══ MODULES (v426) — one section for what ui/columns.js builds: the three-column modules, every menu as one button,
   menus on top, the title line, the neck's bar, the settings column, the tempo display, the routine console and its
   loop views, then Progress, Learn and Bub's tips. It replaces the patches of v383–v425. ══ */

/* ——— Every menu, closed, is one button: an outlined box, its small title over the choice, a chevron at the right.
   Open, it is the grouped pop-up as before. ——— */
:root[data-theme] .picker > .picker__btn {
  display: flex; align-items: center; justify-content: space-between; gap: var(--g8);
  min-height: var(--ctl); height: auto; padding: 4px 12px; text-align: left;
  border: 1.5px solid var(--ctl-edge); border-radius: 7px; background: var(--ctl-bg); color: var(--ink-body); box-shadow: none;
}
:root[data-theme] .picker > .picker__btn .picker__face {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; flex: 1 1 auto; min-width: 0;
}
:root[data-theme] .picker > .picker__btn .picker__title {
  display: block; position: static; font: 600 10px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute);
}
:root[data-theme] .picker > .picker__btn .picker__cur {
  display: block; font: 700 15px/1.1 var(--sans); color: var(--ink-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
:root[data-theme] .picker > .picker__btn .picker__caret {
  display: inline-block; flex: none; width: 8px; height: 8px; margin: -4px 2px 0 0; font-size: 0;
  border-right: 2px solid var(--ink-mute); border-bottom: 2px solid var(--ink-mute); transform: rotate(45deg); opacity: 1;
}
:root[data-theme] .picker > .picker__btn:hover { border-color: var(--ctl-edge-hi, var(--line-2)); }
:root[data-theme] .picker > .picker__btn[aria-expanded="true"] { border-color: var(--accent); background: var(--ctl-on, var(--ctl-bg)); transform: none; }
:root[data-theme] .picker > .picker__btn[aria-expanded="true"] .picker__caret { transform: rotate(225deg); margin-top: 4px; border-color: var(--accent); }
/* The phone's opened menus: the same buttons, stacked. */


/* ——— Open menus on top: whatever holds an open pop-up is lifted above its neighbours, its module above the others. ——— */
.pedal:has(.picker__pop:not([hidden])) { position: relative; z-index: 80; }

:root[data-theme] .mdev .mdial__screen:has(.picker__pop:not([hidden])) { z-index: 80; }

/* ——— Three columns: menus down the left, what the module shows in the middle, its settings down the right. ——— */
.pedal.is-3col { position: relative; }
:root[data-theme] .is-3col :is(.fb, .met, .met__routines)[data-colhost] {
  display: grid; grid-template-columns: 236px minmax(0, 1fr); column-gap: var(--g21); align-items: start;
}
:root[data-theme] .has-side:not(.is-sideoff) :is(.fb, .met, .met__routines)[data-colhost] { grid-template-columns: 236px minmax(0, 1fr) 280px; }
.is-3col .fb > .tcbar, .is-3col .met > .tcbar, .is-3col .met__routines > .met__seclabel { display: none !important; }
.is-3col .loops__toolbar { display: contents; }
.is-3col .loops__toolbar > :not([data-headctl]) { display: none !important; }
.mcol { min-width: 0; }
.mcol--left { grid-column: 1; grid-row: 1 / span 3; position: relative; display: flex; flex-direction: column; gap: var(--g8); }
.mcol--mid { grid-column: 2; grid-row: 1 / span 3; display: flex; flex-direction: column; gap: var(--g8); min-width: 0; }
.mcol--right { grid-column: 3; grid-row: 1 / span 3; min-width: 0; }
.is-sideoff .mcol--right, .is-3col:not(.has-side) .mcol--right { display: none; }   /* it only ever holds the settings */
.is-3col .mcol--mid > .fb__wrap { width: 100%; }
.is-3col .mcol--mid > .beatrow { margin: 0; }

.mcol__acts, .mcol__knobs { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--g8); }
.mcol__acts > .tcbar__unit { margin: 0; }
.mcol__knobs > * { flex: 0 0 auto; }
.is-3col .mcol__knobs { justify-content: space-around;  border: 1px solid var(--line); border-radius: 10px; }
:root[data-theme] .mcol__acts .chip, :root[data-theme] .mcol__acts .chip .rrow__word { font-size: 11px; }
:root[data-theme] .mcol__acts .transport :is([data-runlabel], [data-runroutinelabel]) { font-size: 13px; }

/* ——— The frame, the same for every module: 13 px in from the sides and the bottom, and along the top the title line,
   a 22 px band centred 21 px down: the chips at the left, the name in the middle, the gear and ▲▼ at the right. What
   the module holds starts 8 px under it. ——— */
:root { --mpad: 13px; --tl: 21px; --chip: 20px; --compact: 30px; }
#board > .pedal { position: relative; }
:root[data-theme] #board > .pedal { padding: 40px var(--mpad) var(--mpad); }
:root[data-theme] #board > .pedal > .pedal__head { position: static; display: block; height: 0; min-height: 0; margin: 0; padding: 0; }
:root[data-theme] #board > .pedal > .pedal__head h3 {
  position: absolute; z-index: 3; top: var(--tl); left: 50%; transform: translate(-50%, -50%); margin: 0; padding: 0;
  background: none; font: 600 15px/1 var(--sans); letter-spacing: .02em; color: var(--ink); white-space: nowrap;
}
:root[data-theme] #board > .pedal > .pedal__body { margin: 0; }
/* ▲▼ move the module up or down the board (ui/board.js): a pair of chips at the right end of the title line, each 24 px
   wide so a finger or a pointer has room. */
.modmove {
  position: absolute; z-index: 5; top: calc(var(--tl) - 11px); right: var(--mpad); display: grid; grid-template-columns: 24px 24px;
  height: 22px; border-radius: 5px; overflow: hidden; background: var(--ctl-bg); border: 1px solid var(--ctl-edge);
}
:root[data-theme] .modmove button {
  display: grid; place-items: center; padding: 0; margin: 0; border: 0; border-radius: 0; cursor: pointer;
  background: transparent; color: var(--ink-body); font: 700 10px/1 var(--sans);
}
:root[data-theme] .modmove button + button { border-left: 1px solid var(--ctl-edge); }
:root[data-theme] .modmove button:hover:not([disabled]) { background: var(--ctl-on); color: var(--accent); }
:root[data-theme] .modmove button[disabled] { opacity: .3; cursor: default; }
/* The gear, just left of ▲▼; it opens the settings column, or under 1180 px a box that hangs from it. */
.is-3col > .mgear { position: absolute; z-index: 5; top: calc(var(--tl) - 11px); right: calc(var(--mpad) + 58px); display: flex; align-items: center; gap: 8px; height: 22px; }
.mgear__lead { display: flex; align-items: center; gap: 8px; }
.mgear__lead:empty { display: none; }
:root[data-theme] .is-3col > .mgear .pedal__gear { width: 22px; height: 22px; border-radius: 5px; }
.is-3col > .mgear .pedal__gear svg { width: 18px; height: 18px; }
.has-side:not(.is-sideoff) > .mgear .pedal__gear { color: var(--accent); }
:root[data-theme] #board > .is-3col:not(.has-side) .pedal__headctl {
  top: calc(var(--tl) + 15px); left: auto; right: calc(var(--mpad) + 58px); border-radius: 12px 0 12px 12px;
}
:root[data-theme] .has-side .mcol--right > .pedal__headctl {
  display: flex; position: static; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0;
  width: auto; max-width: none; max-height: none; margin: 0; padding: 2px 0; overflow: visible;
  border: 1px solid var(--line); border-radius: 10px; box-shadow: none; background: var(--surface-deep, var(--surface));
}
:root[data-theme] .has-side .mcol--right .pedal__headctl :is(.flip, .knob, .rocker) { grid-template-columns: minmax(0, 1fr) 92px 70px; min-height: 30px; }
:root[data-theme] .has-side .mcol--right .pedal__headctl :is(.flip__name, .knob__name, .rocker__name) { font-size: 13px; }

/* ——— Chips on the title line. At the left: the neck's Show, play scale, the tuner and Concert A (while the tuner is
   on); the click's Routines switch, the routine's speed curve and rest, + Save preset. At the right, beside the gear
   (.mgear__lead): the neck's record and play, the routine's Lane, Grid and List. ——— */
.mborder {
  position: absolute; z-index: 6; top: calc(var(--tl) - 11px); left: var(--mpad); height: 22px;
  display: flex; align-items: center; gap: 8px; flex-wrap: nowrap;
}
/* Under 1240 px the neck's chips and its name don't both fit while the tuner is on: the name gives way. (A phone puts
   the chips on a row of their own.) */

:root[data-theme] #board > [data-pedal="fret"]:has(> .mborder .fbtn:not(.is-off)):where([data-bp~="min720"][data-bp~="max1239"]) > .pedal__head h3 { visibility: hidden; }

:is(.mborder, .mgear__lead) > * { margin: 0; padding: 0; flex: none; min-width: 0; }
:root[data-theme] #board :is(.mborder, .mgear__lead) > .tcbar__unit { display: flex; flex-direction: row; align-items: center; gap: 3px; min-height: 0; height: auto; margin: 0; padding: 0; }
:root[data-theme] #board :is(.mborder, .mgear__lead) > .tcbar__unit[hidden] { display: none; }
:root[data-theme] #board :is(.mborder, .mgear__lead) .seg { height: auto; min-height: 0; padding: 1px; gap: 1px; border-radius: 6px; align-items: center; }
:root[data-theme] #board :is(.mborder, .mgear__lead) .seg button { min-height: 16px; height: 16px; padding: 0 5px; font: 700 10px/1 var(--display); letter-spacing: .06em; border-radius: 4px; }
:root[data-theme] #board :is(.mborder, .mgear__lead) .tuner { display: flex; align-items: center; gap: 6px; }
:root[data-theme] #board :is(.mborder, .mgear__lead) .tuner__name { display: none; }
:root[data-theme] #board :is(.mborder, .mgear__lead) .tuner > .fbtn { flex: none; }
:root[data-theme] #board :is(.mborder, .mgear__lead) .tuner:has(.fbtn.is-off) .seg[data-concerta] { display: none !important; }   /* the tuner's own rule shows it */
:root[data-theme] #board :is(.mborder, .mgear__lead) .fbtn__meter { height: var(--chip); min-height: var(--chip); width: 120px; min-width: 120px; padding: 0 6px; border-radius: 5px; }
/* While the tuner is on, the note and its cents sit in a fixed slot just right of the meter, clear of the needle. */
:root[data-theme] #board .mborder .tuner > .fbtn__read {
  position: static; transform: none; width: 56px; display: none; align-items: baseline; gap: 4px;
  padding: 0; margin: 0; background: none; border: 0; box-shadow: none;
}
:root[data-theme] #board .mborder .tuner:has(.fbtn:not(.is-off)) > .fbtn__read { display: flex; }   /* its slot is kept while the tuner is on */
:root[data-theme] #board .mborder .tuner:has(.fbtn.is-intune) > .fbtn__read .fbtn__note { color: var(--good); }
:root[data-theme] #board :is(.mborder, .mgear__lead) .fbtn__note { font: 700 13px/1 var(--sans); }
:root[data-theme] #board :is(.mborder, .mgear__lead) .fbtn__cents { font: 600 10px/1 var(--mono); font-variant-numeric: tabular-nums; }
:root[data-theme] #board :is(.mborder, .mgear__lead) .fbtn__ends { padding: 0 5px; }
:root[data-theme] #board :is(.mborder, .mgear__lead) .fbtn__ends i { font: 700 11px/1 var(--sans); color: var(--ink-body); }
:root[data-theme] #board :is(.mborder, .mgear__lead) .fbtn__meter .fbtn__off { font-size: 10px; }
:root[data-theme] #board :is(.mborder, .mgear__lead) .seg[data-concerta] { gap: 2px; }
:root[data-theme] #board :is(.mborder, .mgear__lead) .seg[data-concerta] button { min-height: 16px; height: 16px; padding: 0 5px; font-size: 10px; }
:root[data-theme] #board :is(.mborder, .mgear__lead) :is(.fbrec__rec, .fbrec__play, .fb__play, .transport) {
  width: auto; height: 20px; min-height: 20px; min-width: 20px; padding: 0 5px; font-size: 10px; border-radius: 5px; gap: 3px;
}
:root[data-theme] #board :is(.mborder, .mgear__lead) .fbrec__rec .fbrec__dot { width: 8px; height: 8px; }
/* Record and play on the title line are 42 px pills by their WIDTH, not a flex-basis: Safari (and the Mac app) sizes
   the group from each button's width and ignores the basis, so the buttons spilled over the gear there. */
:root[data-theme] #board .mgear__lead :is(.fbrec__rec, .fbrec__play) { flex: none; width: 42px; }
:root[data-theme] #board :is(.mborder, .mgear__lead) .fbrec__count { font-size: 10px; line-height: 1; }
/* Play scale on the title line: a green ▶ only (its word is in its help). */
:root[data-theme] #board .mborder .fb__play__word { display: none; }
:root[data-theme] #board .mborder .fb__play { width: 26px; min-width: 26px; padding: 0; justify-content: center; color: var(--good); }
:root[data-theme] #board :is(.mborder, .mgear__lead) [data-reclabel] { font-size: 10px; }
:root[data-theme] #board :is(.mborder, .mgear__lead) :is(.fbrec__ctl, .fbrec__row) { display: inline-flex; flex-direction: row; align-items: center; gap: 3px; width: auto; flex-wrap: nowrap; margin: 0; }
:root[data-theme] #board :is(.mborder, .mgear__lead) .fbrec__ctl > * { min-height: 0; margin: 0; }
:root[data-theme] #board :is(.mborder, .mgear__lead) .rocker { display: flex; flex-direction: row; align-items: center; gap: 5px; }
:root[data-theme] #board :is(.mborder, .mgear__lead) .rocker__name { position: static; order: -1; font: 700 10px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); }
:root[data-theme] #board :is(.mborder, .mgear__lead) .rocker__state { display: none; }
:root[data-theme] #board :is(.mborder, .mgear__lead) .rocker__plate { transform: scale(.62); margin: -9px -8px; }
/* + Save preset on the title line's right, before the Routines switch and the gear. */
:root[data-theme] #board .mgear__lead > .mcol__save { height: var(--chip); min-height: var(--chip); padding: 0 8px; font: 700 11px/1 var(--sans); border-radius: 5px; }
/* The routine's speed curve and rest, in the display over the beat view at the right: each its name, its knob, its
   value, in one line (on a phone the Routines switch leads the row). */
/* Routines off: the knobs and + Save preset stay where they are, dimmed and asleep; on, they are bright. */
:root[data-theme] #board .mgear__lead > .mcol__save { transition: opacity .2s; }
:root[data-routines="off"][data-theme] #board .mgear__lead > .mcol__save { opacity: .35; pointer-events: none; }
:root[data-theme] #board .mgear__lead > .mcol__save:disabled { opacity: .35; }

/* ——— Fretboard: a bar (the menus' summary, which opens them; the readout; the chord's shapes), the neck at full width
   under it, the four menus down the left while the summary is open, the settings column from the top. ——— */
:root[data-theme] .is-fretbar .fb[data-colhost] { grid-template-columns: minmax(0, 1fr); row-gap: var(--g5); }
:root[data-theme] .is-fretbar.is-menusopen .fb[data-colhost] { grid-template-columns: 236px minmax(0, 1fr); }
/* The bar is one line at every wide width, so the neck under it never moves: the menu button may narrow, the readout
   keeps its slot, and what follows takes the rest — the chord's shapes scroll sideways when there isn't room, the held
   notes drop "also fits" and then the scale. */
@supports (animation-timeline: scroll()) {   /* a fade at the right while more shapes wait there */
    @keyframes fb-sidefade { 0%, 95% { mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent); } 100% { mask-image: none; } }
}
/* The readout keeps one line the bar's height: the note and its pitch in a fixed slot (so nothing moves when a note
   comes), then what the held notes make, its "also fits" cut short before the buttons wrap. */
@container (max-width: 620px) { :root[data-theme] .is-fretbar .fb__ident .fb__identalso { display: none; } }
@container (max-width: 500px) { :root[data-theme] .is-fretbar .fb__ident :is(.fb__identscale, .fb__identsep) { display: none; } }
:root[data-theme] .is-fretbar .fb__now .fb__read { display: inline-flex; align-items: baseline; gap: 5px; flex: none; width: 104px; white-space: nowrap; }
:root[data-theme] .is-fretbar .fb__now .fb__read b { font: 700 21px/1 var(--sans); }
:root[data-theme] .is-fretbar .fb__now .fb__hz { font: 500 11px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink-mute); }
:root[data-theme] .is-fretbar .fb__ident {
  flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; align-items: center; gap: var(--g8); height: 34px; margin: 0; padding: 0 2px 0 var(--g8); overflow: hidden;
}
:root[data-theme] #board .fb__ident .fb__kind { flex: none; font: 700 10px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; }
:root[data-theme] #board .fb__ident .fb__chord { flex: none; font: 700 21px/1 var(--sans); }
:root[data-theme] #board .fb__ident :is(.fb__chordkind, .fb__identscale, .fb__identalso) { flex: none; font: 500 13px/1.2 var(--sans); white-space: nowrap; }
:root[data-theme] #board .fb__ident .fb__identalso { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--ink-mute); }
:root[data-theme] .is-fretbar .fb__ident .fb__identsep { flex: none; height: 20px; }
.is-fretbar .mcol--left { grid-column: 1; grid-row: 2; display: none; }
.is-fretbar.is-menusopen .mcol--left { display: flex; }
.is-fretbar .mcol--mid { grid-column: 1; grid-row: 2; }
.is-fretbar.is-menusopen .mcol--mid { grid-column: 2; }
:root[data-theme] .is-fretbar .mcol--right { grid-column: -2; grid-row: 1 / span 2; align-self: start; }

/* ——— The click: one glass holding the tempo display and the beat view, the info line under it. The glass follows the
   look: dark with light marks in the dark looks, light with dark marks in aluminium and walnut, and everything on it
   (the dial, its keys, the beat view, the curve, Offset/Spread/Pocket, the rush/drag bar) takes its colours from it. ——— */
:root {
  --glass-bg: #050607; --glass-deep: #121416;   /* the panel, and the dial's lighter centre */
  --glass-ink: #f2f3f5;                           /* digits, words, lit marks */
  --glass-dim: rgb(255 255 255 / .55);            /* outlines, the scale's numbers */
  --glass-faint: rgb(255 255 255 / .12);          /* the track, unlit lights, a pressed key */
  --glass-arc: #d9dce0;                           /* the light arc up to the tempo */
  --glass-glow: rgb(255 255 255 / .3); --glass-flash: #fff;
  --glass-key: #0b0c0e; --glass-bezel: #2b2d30; --glass-rim: #3a3d41;
  --glass-shade: rgb(0 0 0 / .8);
}
:root:is([data-theme="aluminium"], [data-theme="walnut"]) {
  --glass-bg: color-mix(in srgb, var(--surface-deep), var(--ink) 5%); --glass-deep: var(--surface);
  --glass-ink: var(--ink);
  --glass-dim: color-mix(in srgb, var(--ink) 55%, transparent);
  --glass-faint: color-mix(in srgb, var(--ink) 12%, transparent);
  --glass-arc: color-mix(in srgb, var(--ink) 78%, transparent);
  --glass-glow: transparent; --glass-flash: color-mix(in srgb, var(--accent) 45%, transparent);
  --glass-key: var(--surface); --glass-bezel: color-mix(in srgb, var(--bg), var(--ink) 14%); --glass-rim: color-mix(in srgb, var(--bg), var(--ink) 28%);
  --glass-shade: rgb(0 0 0 / .18);
}
:root[data-theme] .is-3col .met[data-colhost] {
  position: relative; grid-template-columns: calc(var(--dial) + 22px) minmax(0, 1fr); column-gap: var(--g8); align-items: center;
  background: var(--glass-bg); border-radius: 14px; padding: var(--g13) var(--g13) var(--g13) var(--g8);
  box-shadow: inset 0 2px 14px var(--glass-shade), 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent);
}
:root[data-theme] .has-side:not(.is-sideoff) .met[data-colhost] { grid-template-columns: calc(var(--dial) + 22px) minmax(0, 1fr) 280px; }
.is-3col .met .mcol--left { align-items: center; }
:root[data-theme] .is-3col .met .mcol--mid { align-self: stretch; justify-content: center; }
:root[data-theme] .is-3col .met .mcol--mid :is(.beatrow, .beatstage, .tline) { background: transparent; border-color: transparent; box-shadow: none; }
:root[data-theme] .is-3col .met .beatviz { background: transparent; border-color: transparent; box-shadow: none; }
:root[data-theme] .is-3col .met .tbar--line { background: color-mix(in srgb, var(--glass-ink) 4%, transparent); box-shadow: inset 0 0 0 1px var(--glass-faint); }
:root[data-theme] .is-3col .met .take__bar { background: var(--glass-faint); box-shadow: none; }
:root[data-theme] .is-3col .met .mcol--right > .pedal__headctl { background: var(--surface); }
.mcol__foot > .minfo { margin-top: var(--g8); padding: 0 var(--g8); }
.is-3col .minfo:has([data-status]:empty) { display: none; }
/* The speed curve rides over the notes: a tall band drawn thick and light on top of them, its BPMs in their own
   column beside the notation. */
/* The beat view uses its whole space. Notation: the beats share the width, close together, each drawn in proportion
   (as wide as its share, as tall as that makes it, up to the view's height). Circles and bars: one per note slot,
   sharing the width — circles as large as fits, bars the full height. */
:root[data-theme] .is-3col .met .beatviz .beatnotation { justify-content: stretch; gap: var(--g8); padding-left: 0; }
:root[data-theme] .is-3col .met .beatviz .beatbeat { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; padding: 4px; }
:root[data-theme] .is-3col .met .beatviz .beatbeat svg { width: 100%; height: auto; max-height: var(--nota-max, 132px); }
:root[data-theme] .is-3col .met .beatviz .beatstrip { container-type: size; justify-content: space-between; align-items: center; gap: var(--g8); padding-left: 0; }
:root[data-theme] .is-3col .met .beatviz[data-mode="dots"] .beatcell {
  --cell: min(calc((100cqw - (var(--n, 4) - 1) * 8px) / var(--n, 4)), 78cqh);
  flex: 0 0 var(--cell); width: var(--cell); height: var(--cell);
}
:root[data-theme] .is-3col .met .beatviz[data-mode="dots"] .beatcell.is-on { transform: scale(1.12); }
:root[data-theme] .is-3col .met .beatviz[data-mode="bars"] .beatcell { flex: 1 1 0; width: auto; height: 84cqh; border-radius: 6px; }
/* A note you played lights in its band: green in the pocket, yellow when off, red when far off. */
:root[data-theme] .beatviz .beatbeat .rhy__slot:is(.is-hit-good, .is-hit-near, .is-hit-far) { transition: none; }
:root[data-theme] .beatviz .beatbeat .rhy__slot.is-hit-good { color: var(--good); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--good) 70%, transparent)); }
:root[data-theme] .beatviz .beatbeat .rhy__slot.is-hit-near { color: var(--ok); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--ok) 60%, transparent)); }
:root[data-theme] .beatviz .beatbeat .rhy__slot.is-hit-far { color: var(--bad); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--bad) 60%, transparent)); }
:root[data-theme] .beatviz .beatbeat .rhy__slot.is-hit-good .rhy__lamp { fill: color-mix(in srgb, var(--good) 30%, transparent); }
:root[data-theme] .beatviz .beatbeat .rhy__slot.is-hit-near .rhy__lamp { fill: color-mix(in srgb, var(--ok) 28%, transparent); }
:root[data-theme] .beatviz .beatbeat .rhy__slot.is-hit-far .rhy__lamp { fill: color-mix(in srgb, var(--bad) 28%, transparent); }
:root[data-theme] .beatviz .beatcell.is-hit-good { background: var(--good); box-shadow: 0 0 12px color-mix(in srgb, var(--good) 70%, transparent); }
:root[data-theme] .beatviz .beatcell.is-hit-near { background: var(--ok); box-shadow: 0 0 10px color-mix(in srgb, var(--ok) 60%, transparent); }
:root[data-theme] .beatviz .beatcell.is-hit-far { background: var(--bad); box-shadow: 0 0 10px color-mix(in srgb, var(--bad) 60%, transparent); }
:root[data-theme] .is-3col .met .beatrow > .tline { height: auto; padding: 0; gap: var(--g8); margin-top: var(--g8); }
/* The beat view fills the display's height beside the dial: notes as large as fit, the curve's band over them, its
   baseline (the loop's bar) at the foot. */
:root[data-theme] .is-3col .met .beatstage .take__stage { margin-top: auto; }

:root[data-theme] .is-3col:where([data-bp~="min720"]) .met .beatstage .beatviz { height: 172px; }

:root[data-theme] .is-3col .met .beatrow > .tline .tbar--line { flex: 0 0 40px; height: 40px; }
/* READY (the routine's state) in the display's top-left corner, over the dial; gone with the Routines switch. */
:root[data-theme] .is-3col .met > .take__top { position: absolute; z-index: 4; left: var(--g13); top: var(--g8); margin: 0; }
html[data-routines="off"] .met > .take__top { display: none; }
:root[data-theme] .met > .take__top .take__time { display: none; }   /* the time is under the beat view (elapsed of total) */
:root[data-theme] .take__meta .take__now:not(:empty) { color: var(--ink); font-weight: 700; }
:root[data-theme] .take__meta .take__now:not(:empty) + [data-detail]:not(:empty)::before { content: " · "; }
:root[data-theme] .is-3col .met .beatstage .take { z-index: 2; }
:root[data-theme] .is-3col .met .take__bpms { z-index: 3; }
:root[data-theme] .is-3col .met .take__cur { stroke: var(--glass-ink);   stroke-linejoin: round; opacity: .95; filter: drop-shadow(0 0 2px var(--glass-bg)); }
:root[data-theme] .is-3col .met .take__done {   stroke-linejoin: round; }
/* The notation sits a little high in its view, the curve's band crossing it lower down. */
:root[data-theme] .is-3col .met .beatviz .beatnotation { align-items: flex-start; padding-top: 2px; }
/* The curve's BPMs: a right-aligned column 62 px wide beside it (the notes take the rest of the width). */
:root[data-theme] .is-3col .met .beatstage .take.has-bpms .take__stage { margin-right: 34px; }
:root[data-theme] .is-3col .met .beatstage:has(.take.has-bpms) :is(.beatnotation, .beatstrip) {  box-sizing: border-box; }
:root[data-theme] .is-3col .met .take { overflow: visible; }   /* its BPMs reach past it, to the glass's edge */
:root[data-theme] .is-3col .met .take__bpms { left: auto; right: -50px; width: 34px; }   /* into the glass's margin: 9 px from its edge */
:root[data-theme] .is-3col .met .take__bpm { left: auto; right: 0; width: auto; text-align: right;  }
/* The bar's first beat in a light frame; the beat now sounding in the accent. */
:root[data-theme] .is-3col .met .beatbeat[data-lvl="3"] { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--glass-ink) 30%, transparent); }
:root[data-theme] .is-3col .met .beatbeat.is-current { background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent); }
:root[data-theme] .is-3col .met .beatviz :is(.beatnotation, .beatstrip) { align-items: center; }

/* ——— The tempo display: one round glass. Its scale round the edge with a light arc to the tempo; the tempo's name, the
   BPM with − and +, a light per beat, the signature and the rhythm on it; TAP and Start on its foot. --dial sizes it. ——— */
:root { --dial: 281px; }
.mdev { position: relative; display: flex; flex-direction: column; align-items: center; }
:root[data-theme] .mdev .mdial {
  position: relative; z-index: 1; align-self: center; display: block; width: var(--dial); height: var(--dial); flex: none; border-radius: 50%;
  cursor: ns-resize; touch-action: none; user-select: none; -webkit-user-select: none;
  background: radial-gradient(circle at 50% 40%, var(--glass-deep), var(--glass-bg) 72%);
  box-shadow: inset 0 3px 16px var(--glass-shade), 0 0 0 9px var(--glass-bezel), 0 0 0 10px var(--glass-rim), 0 6px 18px rgb(0 0 0 / .35);
  transition: transform .12s, box-shadow .12s;
}
:root[data-theme] .mdev .mdial.is-turning { transform: scale(.985); }
:root[data-theme] .mdev .mdial:has(.mdial__screen.is-down) {
  box-shadow: inset 0 3px 16px var(--glass-shade), inset 0 0 18px color-mix(in srgb, var(--accent) 35%, transparent), 0 0 0 9px var(--glass-bezel), 0 0 0 10px var(--accent), 0 6px 18px rgb(0 0 0 / .35);
}
.mdial__scale { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.mdial__track { fill: none; stroke: var(--glass-faint); stroke-width: 6; stroke-linecap: round; }
.mdial__value { fill: none; stroke: var(--glass-arc); stroke-width: 6; stroke-linecap: round; filter: drop-shadow(0 0 3px var(--glass-glow)); }
.mdial.is-tick .mdial__value { stroke-width: 7; }
.mdial__tick { stroke: color-mix(in srgb, var(--glass-ink) 35%, transparent); stroke-width: 1; }
.mdial__tick.is-major { stroke: color-mix(in srgb, var(--glass-ink) 85%, transparent); stroke-width: 1.6; }
.mdial__num { pointer-events: auto; cursor: pointer; }
.mdial__num circle { fill: transparent; }
.mdial__num text { font: 700 9px/1 var(--sans); text-anchor: middle; fill: color-mix(in srgb, var(--glass-ink) 70%, transparent); }
.mdial__num.is-passed text { fill: var(--glass-ink); }
.mdial__num:hover circle { fill: color-mix(in srgb, var(--accent) 22%, transparent); }
.mdial__num:is(:hover, :active) text { fill: var(--accent); }
/* The slider is the whole glass; the readouts sit straight on it and let slides through, their controls take clicks. */
.mdial__knob { position: absolute; inset: 0; border-radius: 50%; outline: none; }
.mdial__knob:focus-visible { box-shadow: 0 0 0 3px var(--accent); }
.mdial__screen {
  position: absolute; z-index: 2; left: 50%; top: 45%; transform: translate(-50%, -50%);   /* a little high: TAP and Start sit under it */
  width: calc(var(--dial) * .694); height: calc(var(--dial) * .546); padding: 5px 6px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  pointer-events: none; color: var(--glass-ink);
}
.mdial__screen :is(button, .picker, input, .tcbar__unit, .mdial__step) { pointer-events: auto; }
.mdial__line { display: flex; align-items: center; justify-content: center; gap: 2px; max-width: 100%; min-width: 0; }
.mdial__screen .mdial__meter { gap: 8px; }
:root[data-theme] .mdial__screen :is(.picker, .tcbar__unit) { width: auto; min-width: 0; flex: 0 0 auto; margin: 0; padding: 0; align-items: center; }
:root[data-theme] .mdev .mdial__screen .picker > .picker__btn {
  width: auto; min-width: 0; max-width: 124px;  height: auto; padding: 1px 4px; gap: 4px;
  border: 0; border-radius: 5px; background: transparent; box-shadow: none;
}
:root[data-theme] .mdev .mdial__screen .picker > .picker__btn:is(:hover, [aria-expanded="true"]) { background: var(--glass-faint); }
:root[data-theme] .mdev .mdial__screen .picker > .picker__btn .picker__face { flex: 0 0 auto; width: auto; min-width: 0; align-items: center; }
:root[data-theme] .mdev .mdial__screen .picker > .picker__btn .picker__title { display: none; }
:root[data-theme] .mdev .mdial__screen .picker > .picker__btn :is(.picker__cur, .rhy) { color: var(--glass-ink); }
:root[data-theme] .mdev .mdial__screen .picker > .picker__btn .picker__cur { font: 700 13px/1.1 var(--sans); }
:root[data-theme] .mdev .mdial__screen .picker > .picker__btn .picker__caret { width: 6px; height: 6px; border-width: 0 1.5px 1.5px 0; border-color: var(--glass-ink); opacity: .7; }
:root[data-theme] .mdev .mdial__screen .mdial__meter .picker > .picker__btn .picker__caret { display: none; }
:root[data-theme] .mdev .mdial__screen .mdial__meter .rhy {  width: auto; }
:root[data-theme] .mdev .mdial__name .picker > .picker__btn { max-width: calc(var(--dial) * .46); }   /* between the scale's top numbers */
:root[data-theme] .mdev .mdial__name .picker > .picker__btn .picker__face { flex: 0 1 auto; overflow: hidden; }
:root[data-theme] .mdev .mdial__name .picker > .picker__btn .picker__cur { font-weight: 600; opacity: .85;  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
:root[data-theme] .mdev .mdial__screen .tempo { display: flex; margin: 0; padding: 0; background: none; box-shadow: none; border: 0; }
:root[data-theme] .mdev .mdial__screen .tempo .tcbpm__box { display: flex; flex-direction: column-reverse; align-items: center; height: auto; min-height: 0; gap: 0; padding: 0; border: 0; background: transparent; box-shadow: none; overflow: visible; }
:root[data-theme] .mdev .mdial__screen .tempo .tcbpm__box .picker__title { display: none; }
:root[data-theme] .mdev .mdial__screen .tempo .tcbpm__box input.tcbpm.input {
  width: 2.9ch; height: 56px; padding: 0; border: 0; background: transparent; box-shadow: none; text-align: center;
  font: 700 47px/56px var(--display); font-style: normal; color: var(--glass-ink); -webkit-text-fill-color: var(--glass-ink); text-shadow: 0 0 10px var(--glass-glow);
  transition: transform .08s ease-out, text-shadow .12s;
}
:root[data-theme] .mdev .mdial.is-tick .tcbpm { transform: scale(1.06); }
:root[data-theme] .mdev .mdial.is-tick5 .tcbpm { transform: scale(1.12); text-shadow: 0 0 14px var(--glass-flash); }
.mdial__bpmrow { display: flex; align-items: center; justify-content: center; gap: 3px; }
.mdial__bpm, .mdial__step { display: flex; }
/* − and + on the glass; TAP and Start resting on its foot. */
:root[data-theme] #board .mdev :is(.mdial__step .tstep, .mdial__key :is(.tap, .transport)) {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 0 7px; transform: none;
  background: var(--glass-key); border: 1.5px solid var(--glass-dim); border-radius: 7px; box-shadow: none;
  color: var(--glass-ink); font: 700 13px/1 var(--display); letter-spacing: .1em; text-transform: uppercase;
  transition: transform .06s, background .1s, box-shadow .1s;
}
:root[data-theme] #board .mdev .mdial__step .tstep { width: 30px; height: 30px; min-height: 30px; padding: 0; border-radius: 50%; font: 700 21px/1 var(--sans); letter-spacing: 0; background: transparent; }
:root[data-theme] #board .mdev .mdial__key :is(.tap, .transport) {  min-width: 0;  min-height: 0; gap: 6px; border-color: var(--glass-dim); }
:root[data-theme] #board .mdev :is(.mdial__step .tstep, .mdial__key :is(.tap, .transport)):hover { border-color: var(--glass-ink); box-shadow: 0 0 8px var(--glass-glow); }
:root[data-theme] #board .mdev :is(.mdial__step .tstep, .mdial__key :is(.tap, .transport)):active {
  transform: scale(.9) translateY(1px); background: var(--glass-faint); box-shadow: inset 0 2px 5px var(--glass-shade);
}
:root[data-theme] #board .mdev .mdial__key .transport[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 50%, transparent); }
:root[data-theme] #board .mdev .mdial__key .transport [data-runlabel] { font-size: 13px; }
:root[data-theme] #board .mdev .mdial__key .tap.is-on { background: var(--glass-faint); }
/* TAP and Start inside the wheel, in the gap at the bottom of the scale, level with 40 and 400 (the numbers sit at
   radius 83 of the dial's 216: 77.2 % down). */
.mdial__foot { position: absolute; z-index: 3; left: 50%;  transform: translate(-50%, -50%); display: flex; align-items: center;  }
.mdial__key { display: flex; align-items: center; }
/* Overwrite preset: under TAP and Start, inside the wheel, only after the tempo was turned during a routine. */
.mdial__save { position: absolute; z-index: 3; left: 50%; top: calc(var(--dial) * .838); transform: translateX(-50%); }
:root[data-theme] #board .mdev .mdial__overwrite {
  height: var(--chip); min-height: var(--chip); padding: 0 8px; border-radius: 5px; white-space: nowrap;
  border: 1px solid var(--accent); background: var(--glass-key); color: var(--accent); box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 35%, transparent);
  font: 700 10px/1 var(--display); letter-spacing: .1em; text-transform: uppercase;
}
:root[data-theme] #board .mdev .mdial__overwrite[hidden] { display: none; }
/* The wheel per the user's picture (16 Oct): the meter and its rhythm big under the beat lights and spread apart, TAP and
   Start as larger keys at the foot, the tempo's name nearer the number. Sized from the dial, so a phone's wheel follows. */
:root[data-theme] .mdev .mdial__screen { top: 49%; }
:root[data-theme] .mdev .mdial__screen .mdial__name { margin-bottom: -3px; }
:root[data-theme] .mdev .mdial__screen .mdial__meter { gap: 0; margin-top: -1px; }
:root[data-theme] .mdev .mdial__screen .mdial__meter .picker > .picker__btn .picker__cur { font: 700 34px/1.15 var(--display); letter-spacing: .01em; }   /* two-thirds of the BPM, its face */
:root[data-theme] .mdev .mdial__screen .mdial__meter .rhy { height: calc(var(--dial) * .125); max-width: calc(var(--dial) * .32); margin-block: calc(var(--dial) * -.022); }   /* the notes drawn as tall as the 4/4, the drawing's own margin trimmed; a long rhythm (up to 12 notes) draws smaller rather than reach the scale's 80 and 360 */

/* a phone's smaller wheel: the 4/4 one step down and the stack a little higher, clear of TAP */
:root[data-theme] :where(.pedal[data-bp~="max719"]) .mdev .mdial__screen .mdial__meter .picker > .picker__btn .picker__cur { font-size: 26px; }
:root[data-theme] :where(.pedal[data-bp~="max719"]) .mdev .mdial__screen { top: 46.5%; }

.mdial__foot { top: calc(var(--dial) * .763); gap: 8px; }
:root[data-theme] #board .mdev .mdial__key :is(.tap, .transport) { width: calc(var(--dial) * .202); height: max(24px, calc(var(--dial) * .104)); border-width: 2px; border-radius: 8px; }
.mdial__key > .tcbar__unit { display: flex; align-items: center; margin: 0; padding: 0; }
.mdev .picker__pop { left: 0; right: auto; transform: none; }
@media (prefers-reduced-motion: reduce) { :root[data-theme] .mdev .mdial, :root[data-theme] .mdev .mdial .tcbpm { transition: none; transform: none !important; } }

/* ——— The routine's console and its loops: the routine, the tempo ladder, the knobs, undo · redo · save · play; the
   loops as regions in a lane, a grid or a list. ——— */
.rview.seg { margin-left: 0; }
:root[data-theme] .rview.seg button { font-size: 11px; }
.rview.seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
:root[data-theme] .is-3col .loopcard { padding: 0 0 var(--g5); gap: 4px; overflow: hidden; border-radius: 8px; }
:root[data-theme] .is-3col .loopcard.is-editing { overflow: visible; }
:root[data-theme] .is-3col .loopcard__top { margin: 0; padding: 5px var(--g8); background: var(--loopcard-blue); color: #fff; }
:root[data-theme] .is-3col .loopcard__top :is(.loopcard__n, .loopcard__name) { color: #fff; }
:root[data-theme] .is-3col .loopcard > :not(.loopcard__top):not(.loopcard__bar) { margin-left: var(--g8); margin-right: var(--g8); }
:root[data-theme] .is-3col .loopcard.is-playing .loopcard__top { background: var(--accent); color: var(--accent-ink); }
:root[data-theme] .is-3col .loopcard.is-playing .loopcard__top :is(.loopcard__n, .loopcard__name) { color: var(--accent-ink); }
:root[data-theme] .is-3col[data-loopview="lane"] .loopcard:not(.is-editing) { width: var(--loop-w, 180px); }
:root[data-theme] .is-3col[data-loopview="grid"] .loopcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); overflow: visible; scroll-snap-type: none; }
:root[data-theme] .is-3col[data-loopview="grid"] .loopcard { width: auto; }
:root[data-theme] .is-3col[data-loopview="list"] .loopcards { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 0; overflow: visible; scroll-snap-type: none; }
:root[data-theme] .is-3col[data-loopview="list"] .loopcard { position: relative; }
/* List: a header, then one row per loop in the same columns — loop, tempo, time, rhythm, bars, length, its buttons. The
   loop's swing or phrase, when it has one, reads on a second line under its name. The loop now playing is lit. */
.is-3col { --list-cols: minmax(0, 1fr) 64px 40px 64px 60px 44px 124px; }
.mcol__listhead { display: none; }

:root[data-theme] #board :where(.pedal[data-bp~="min720"]) .pedal__headctl > .tcbar__unit.rset__views { display: none; }
   /* a phone's: wide, the switch is on the title line */
:root[data-theme] .is-3col[data-loopview="list"] .mcol__listhead {
  display: grid; grid-template-columns: var(--list-cols); column-gap: var(--g13); margin: 0 2px; padding: 0 calc(var(--g8) + 1px) 0 4px;   /* the rows' inset, border and padding */
  font: 700 10px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute);
}
:root[data-theme] .is-3col[data-loopview="list"] .mcol__listhead > :first-child { padding-left: var(--g8); }
:root[data-theme] .is-3col[data-loopview="list"] .loopcard:not(.is-editing) {
  width: auto; display: grid; grid-template-columns: var(--list-cols); column-gap: var(--g13); row-gap: 2px; align-items: center;
  min-height: 40px; height: auto; padding: 3px var(--g8) 3px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none;
}
:root[data-theme] .is-3col[data-loopview="list"] .loopcard:not(.is-editing) > * { min-height: 0; }
:root[data-theme] .is-3col[data-loopview="list"] .loopcard:not(.is-editing) > :not(.loopcard__top):not(.loopcard__bar) { margin: 0; }
:root[data-theme] .is-3col[data-loopview="list"] .loopcard:not(.is-editing) .loopcard__top {
  grid-column: 1; min-width: 0; display: flex; align-items: center; gap: var(--g8); padding: 0 var(--g8); background: transparent; color: var(--ink);
}
:root[data-theme] .is-3col[data-loopview="list"] .loopcard:not(.is-editing) .loopcard__top :is(.loopcard__n, .loopcard__name) { color: var(--ink); }
:root[data-theme] .is-3col[data-loopview="list"] .loopcard:not(.is-editing) .loopcard__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root[data-theme] .is-3col[data-loopview="list"] .loopcard:not(.is-editing) :is(.loopcard__stats, .loopcard__foot) { display: contents; }
:root[data-theme] .is-3col[data-loopview="list"] .loopcard:not(.is-editing) .loopcard__stat { white-space: nowrap; font-variant-numeric: tabular-nums; }
:root[data-theme] .is-3col[data-loopview="list"] .loopcard:not(.is-editing) .loopcard__time { font-variant-numeric: tabular-nums; }
:root[data-theme] .is-3col[data-loopview="list"] .loopcard:not(.is-editing) .loopcard__acts { display: flex; justify-content: flex-end; gap: 5px; }
:root[data-theme] .is-3col[data-loopview="list"] .loopcard:not(.is-editing) :is(.loopcard__swing, .phrasecard__notes) {
  grid-column: 1 / 6; grid-row: 2; padding: 0 var(--g8) 2px calc(var(--g8) + 1.4em); font: 500 10px/1.2 var(--mono); color: var(--ink-mute);
}
:root[data-theme] .is-3col[data-loopview="list"] .loopcard:not(.is-editing) .loopcard__bar { position: absolute; left: 0; right: 0; bottom: 0; }
/* A narrow list (a tablet: the routine's middle column under 600 px): Rhythm and Bars give way so the loop's name keeps
   its room (the six fixed columns left it none at 820 px). The card shows both when opened. */
:root[data-theme] [data-card="routines"].is-3col[data-loopview="list"] .mcol--mid { container: rlist / inline-size; }
@container rlist (max-width: 600px) {
  :root[data-theme] .is-3col[data-loopview="list"] :is(.mcol__listhead, .loopcard:not(.is-editing)) { --list-cols: minmax(0, 1fr) 64px 40px 44px 124px; column-gap: var(--g8); }
  :root[data-theme] .is-3col[data-loopview="list"] .mcol__listhead > :is(:nth-child(4), :nth-child(5)),
  :root[data-theme] .is-3col[data-loopview="list"] .loopcard:not(.is-editing) .loopcard__stats > .loopcard__stat:nth-child(n+3) { display: none; }
}
:root[data-theme] .is-3col[data-loopview="list"] .loopcard:is(.is-playing, .is-paused):not(.is-editing) { box-shadow: inset 3px 0 0 var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
:root[data-theme] .is-3col[data-loopview="list"] .loopcard.is-playing:not(.is-editing) .loopcard__top { background: transparent; }
:root[data-theme] .is-3col[data-loopview="list"] .loopcard.is-playing:not(.is-editing) .loopcard__top :is(.loopcard__n, .loopcard__name) { color: var(--accent); }
/* The left console: the routine's two knobs side by side, each with its name and value under it; undo, redo and save
   at 30 px, Start routine at 42 at the right. */
:root[data-theme] .is-3col .mcol__knobs { display: grid; grid-template-columns: 1fr 1fr; justify-items: center; align-items: start; gap: var(--g8); padding: var(--g8); }
:root[data-theme] .is-3col .mcol__knobs .curveknob { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0; }
:root[data-theme] .is-3col .mcol__knobs .curveknob :is(.knob__name, .knob__val) { min-width: 0; text-align: center; white-space: nowrap; }
:root[data-theme] .is-3col .mcol__knobs .curveknob .knob__name { font: 700 10px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); }
:root[data-theme] .is-3col .mcol__knobs .curveknob .knob__val { font: 700 11px/1 var(--mono); }
:root[data-theme] #board .is-3col .mcol__acts { flex-wrap: nowrap; }
:root[data-theme] #board .is-3col .mcol__acts .chip { height: var(--compact); min-height: var(--compact); }
:root[data-theme] #board .is-3col .mcol__acts .rrow__hist .chip { width: var(--compact); min-width: var(--compact); padding: 0; justify-content: center; }
:root[data-theme] #board .is-3col .mcol__acts .transport { height: var(--ctl); min-height: var(--ctl); min-width: var(--ctl); margin-left: auto; }
/* Routines switched off: the whole Routines module goes. */
html[data-routines="off"] [data-card="routines"] { display: none !important; }

/* A phone too narrow for the Routines switch and both knobs on one line (375 px and under): the switch has its own line
   and the knobs share the next, one at each end, so nothing runs off the screen. */
/* ——— Phone: the tempo display stays, with the beat view under it. ——— */

.pedal:where([data-bp~="max719"]) { --dial: min(255px, calc(var(--mw, 100vw) - 76px)); }
/* the dial fills a small phone (320 px) so its words keep clear of its scale */
:root[data-theme] :where(.pedal[data-bp~="max719"]) .mdev .mdial__name .picker > .picker__btn { max-width: calc(var(--dial) * .4); }
/* a long tempo name stops short of the 160 */
:root[data-theme] #board :where(.pedal[data-bp~="max719"]) .mgear__lead > .mcol__save { display: none; }
/* the routine's toolbar has its + */
/* Lane, Grid and List: in the routine's settings box. Grid is two loops a row; List is one line each, its numbers
     under its name and its buttons at the right. */
:root[data-theme] [data-card="routines"]:not(.is-3col)[data-loopview="grid"]:where([data-bp~="max719"]) .loopcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g8); overflow: visible; scroll-snap-type: none; }
:root[data-theme] [data-card="routines"]:not(.is-3col)[data-loopview="grid"]:where([data-bp~="max719"]) .loopcard:not(.is-editing) { width: auto; min-width: 0; flex: none; }
:root[data-theme] [data-card="routines"]:not(.is-3col)[data-loopview="grid"]:where([data-bp~="max719"]) .loopcard:not(.is-editing) {
    position: relative; min-height: 0; height: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "top top" "stats time" "acts acts"; column-gap: var(--g5); row-gap: var(--g5); align-items: start; padding: var(--g5) var(--g8) var(--g8);
  }
:root[data-theme] [data-card="routines"]:not(.is-3col)[data-loopview="grid"]:where([data-bp~="max719"]) .loopcard:not(.is-editing) > * { margin: 0; }
:root[data-theme] [data-card="routines"]:not(.is-3col)[data-loopview="grid"]:where([data-bp~="max719"]) .loopcard:not(.is-editing) .loopcard__top { grid-area: top; min-width: 0; padding: 0; }
:root[data-theme] [data-card="routines"]:not(.is-3col)[data-loopview="grid"]:where([data-bp~="max719"]) .loopcard:not(.is-editing) .loopcard__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root[data-theme] [data-card="routines"]:not(.is-3col)[data-loopview="grid"]:where([data-bp~="max719"]) .loopcard:not(.is-editing) .loopcard__stats { grid-area: stats; display: grid; grid-template-columns: auto auto; justify-content: start; align-items: center; gap: 2px var(--g8); min-width: 0; }
:root[data-theme] [data-card="routines"]:not(.is-3col)[data-loopview="grid"]:where([data-bp~="max719"]) .loopcard:not(.is-editing) :is(.loopcard__swing, .phrasecard__notes) { grid-column: 1 / -1; }
:root[data-theme] [data-card="routines"]:not(.is-3col)[data-loopview="grid"]:where([data-bp~="max719"]) .loopcard:not(.is-editing) .loopcard__foot { display: contents; }
:root[data-theme] [data-card="routines"]:not(.is-3col)[data-loopview="grid"]:where([data-bp~="max719"]) .loopcard:not(.is-editing) .loopcard__time { grid-area: time; }
:root[data-theme] [data-card="routines"]:not(.is-3col)[data-loopview="grid"]:where([data-bp~="max719"]) .loopcard:not(.is-editing) .loopcard__acts { grid-area: acts; display: flex; gap: var(--g5); }
:root[data-theme] [data-card="routines"]:not(.is-3col)[data-loopview="grid"]:where([data-bp~="max719"]) .loopcard:not(.is-editing) .loopcard__acts .chip { flex: 1 1 0; min-width: 0; height: var(--compact); min-height: var(--compact); padding: 0 var(--g5); justify-content: center; }
:root[data-theme] [data-card="routines"]:not(.is-3col)[data-loopview="grid"]:where([data-bp~="max719"]) .loopcard:not(.is-editing) .loopcard__bar { position: absolute; left: 0; right: 0; bottom: 0; }
:root[data-theme] [data-card="routines"]:not(.is-3col)[data-loopview="list"]:where([data-bp~="max719"]) .loopcards { display: flex; flex-direction: column; gap: 0; overflow: visible; scroll-snap-type: none; }
:root[data-theme] [data-card="routines"]:not(.is-3col)[data-loopview="list"]:where([data-bp~="max719"]) .loopcard:not(.is-editing) {
    position: relative; width: auto; min-width: 0; min-height: 0; height: auto; flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "top time" "stats acts"; column-gap: var(--g8); row-gap: 3px; align-items: center;
    padding: var(--g5) var(--g8); border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none;
  }
:root[data-theme] [data-card="routines"]:not(.is-3col)[data-loopview="list"]:where([data-bp~="max719"]) .loopcard:not(.is-editing) > * { margin: 0; }
:root[data-theme] [data-card="routines"]:not(.is-3col)[data-loopview="list"]:where([data-bp~="max719"]) .loopcard:not(.is-editing) .loopcard__top { grid-area: top; min-width: 0; padding: 0; background: none; }
:root[data-theme] [data-card="routines"]:not(.is-3col)[data-loopview="list"]:where([data-bp~="max719"]) .loopcard:not(.is-editing) .loopcard__top :is(.loopcard__n, .loopcard__name) { color: var(--ink); }
:root[data-theme] [data-card="routines"]:not(.is-3col)[data-loopview="list"]:where([data-bp~="max719"]) .loopcard:not(.is-editing) .loopcard__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root[data-theme] [data-card="routines"]:not(.is-3col)[data-loopview="list"]:where([data-bp~="max719"]) .loopcard:not(.is-editing) .loopcard__stats { grid-area: stats; display: flex; flex-wrap: nowrap; align-items: center; gap: var(--g5); min-width: 0; overflow: hidden; }
:root[data-theme] [data-card="routines"]:not(.is-3col)[data-loopview="list"]:where([data-bp~="max719"]) .loopcard:not(.is-editing) :is(.loopcard__swing, .phrasecard__notes) { grid-column: 1 / -1; }
:root[data-theme] [data-card="routines"]:not(.is-3col)[data-loopview="list"]:where([data-bp~="max719"]) .loopcard:not(.is-editing) .loopcard__foot { display: contents; }
:root[data-theme] [data-card="routines"]:not(.is-3col)[data-loopview="list"]:where([data-bp~="max719"]) .loopcard:not(.is-editing) .loopcard__time { grid-area: time; justify-self: end; }
:root[data-theme] [data-card="routines"]:not(.is-3col)[data-loopview="list"]:where([data-bp~="max719"]) .loopcard:not(.is-editing) .loopcard__acts { grid-area: acts; display: flex; gap: var(--g5); }
:root[data-theme] [data-card="routines"]:not(.is-3col)[data-loopview="list"]:where([data-bp~="max719"]) .loopcard:not(.is-editing) .loopcard__acts .chip { height: var(--compact); min-height: var(--compact); padding: 0 var(--g8); }
:root[data-theme] [data-card="routines"]:not(.is-3col)[data-loopview="list"]:where([data-bp~="max719"]) .loopcard:not(.is-editing) .loopcard__bar { position: absolute; left: 0; right: 0; bottom: 0; }
:root[data-theme] [data-card="routines"]:not(.is-3col)[data-loopview="list"]:where([data-bp~="max719"]) .loopcard:is(.is-playing, .is-paused):not(.is-editing) { box-shadow: inset 3px 0 0 var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
/* smaller phones get a smaller dial, never a cut one */
  /* The routine's toolbar in two rows: the gear, the routine and Start; then the two knobs, undo, redo and save. */
:root[data-theme] #board .pedal--routines:where([data-bp~="max719"]) .loops__toolbar.rrow { flex-wrap: wrap; justify-content: space-between; gap: var(--g8); }
:root[data-theme] #board .pedal--routines:where([data-bp~="max719"]) .rrow > .pedal__gear { order: 1; }
:root[data-theme] #board .pedal--routines:where([data-bp~="max719"]) .rrow > .rrow__pick { order: 2; flex: 1 1 0; min-width: 0; }
:root[data-theme] #board .pedal--routines:where([data-bp~="max719"]) .rrow > .transport { order: 3; margin-left: 0; }
:root[data-theme] #board .pedal--routines:where([data-bp~="max719"]) .rrow::after { content: ""; order: 3; flex: 0 0 100%; height: 0; }
:root[data-theme] #board .pedal--routines:where([data-bp~="max719"]) .rrow > :is(.curveknob, .rrow__hist, .rrow__save) { order: 4; }
/* Progress's lesson tracks in two lines: the name, passed and grade, then the bar across. */
:root[data-theme] :where(.pedal[data-bp~="max719"]) .pdash__track { grid-template-columns: minmax(0, 1fr) 52px 112px; grid-template-areas: "name pass grade" "bar bar bar"; row-gap: 4px; }

:root[data-theme] :where(.pedal[data-bp~="max719"][data-bp~="max359"]) .pdash__track { grid-template-columns: minmax(max-content, 1fr) auto auto; }

/* "Technique" whole on the smallest phones */
:root[data-theme] :where(.pedal[data-bp~="max719"]) .pdash__track > :nth-child(1) { grid-area: name; }
:root[data-theme] :where(.pedal[data-bp~="max719"]) .pdash__track > :nth-child(2) { grid-area: bar; }
:root[data-theme] :where(.pedal[data-bp~="max719"]) .pdash__track > :nth-child(3) { grid-area: pass; }
:root[data-theme] :where(.pedal[data-bp~="max719"]) .pdash__track > :nth-child(4) { grid-area: grade; }
:root[data-theme] .is-3col:where([data-bp~="max719"]) .met .beatstage .beatviz .beatnotation { gap: 4px; }
:root[data-theme] #board :where(.pedal[data-bp~="max719"]) .fb > .fb__side { order: 8; margin: var(--g8) 0 0; }
/* the chord's shapes under the neck: it never moves */
  /* The neck on a phone is built as wide (ui/columns.js): its chips are one row under the title line that scrolls
     sideways (so the tuner's chips never push the neck down), then the summary menu; open, the four menus stack over
     the neck; the chord's shapes and the readout sit under it. The gear is on the title line, its box full width. */
:root[data-theme] #board > [data-pedal="fret"]:where([data-bp~="max719"]) > .mborder {
    position: static; order: -1; height: 22px; max-width: none; margin: 0 0 var(--g8); overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  }
:root[data-theme] .is-fretbar:where([data-bp~="max719"]) .fb[data-colhost],
:root[data-theme] .is-fretbar.is-menusopen:where([data-bp~="max719"]) .fb[data-colhost] { grid-template-columns: minmax(0, 1fr); row-gap: var(--g8); }
:root[data-theme] .is-fretbar:where([data-bp~="max719"]) :is(.mcol--left, .mcol--mid, .mcol--right),
:root[data-theme] .is-fretbar.is-menusopen:where([data-bp~="max719"]) .mcol--mid { grid-column: 1; grid-row: auto; }
:root[data-theme] .is-fretbar:where([data-bp~="max719"]) .mcol--left { order: 2; }
:root[data-theme] .is-fretbar:where([data-bp~="max719"]) .mcol--mid { order: 3; }
:root[data-theme] .is-fretbar:where([data-bp~="max719"]) .fb__ident { height: auto; flex-wrap: wrap; overflow: visible; padding: var(--g8); }
:root[data-theme] #board > .is-3col:not(.has-side):where([data-bp~="max719"]) .pedal__headctl { left: var(--g8); right: var(--g8); width: auto; max-width: none; border-radius: 12px; }
:root[data-theme] .is-3col:where([data-bp~="max719"]) .met[data-colhost] { display: flex; flex-direction: column; align-items: center; gap: var(--g8); }
:root[data-theme] .is-3col:where([data-bp~="max719"]) .met .mcol--left { display: flex; flex-direction: column; align-items: center; gap: var(--g5); }
:root[data-theme] .is-3col:where([data-bp~="max719"]) .met .mcol--mid { display: flex; flex-direction: column; gap: var(--g5); }
:root[data-theme] .is-3col:where([data-bp~="max719"]) .met .beatstage { --curve-h: 120px; }
:root[data-theme] .is-3col:where([data-bp~="max719"]) .met .beatstage.has-routine .beatviz :is(.beatnotation, .beatstrip) { height: 100%; }

/* The speed curve keeps to a band at the foot of the beat view, under the notes and never across them: a dashed line
   (a hair's gap at each bar line), its BPMs at the band's right edge, gliding to their new heights. The beat views fill
   what is left above it (--band: the curve's band, the routine's bar and the space under it). */
:root[data-theme] .is-3col .met .beatstage { --curve-h: 38px; --band: calc(var(--curve-h) + 26px); }
:root[data-theme] .is-3col .met .beatstage.has-routine .beatviz :is(.beatnotation, .beatstrip) { height: calc(100% - var(--band)); box-sizing: border-box; }
:root[data-theme] .is-3col .met .beatstage.has-routine .beatviz .beatnotation { align-items: stretch; }
:root[data-theme] .is-3col .met .beatstage.has-routine .beatviz .beatnotation .beatbeat { height: 100%; box-sizing: border-box; }
:root[data-theme] .is-3col .met .beatstage.has-routine .beatviz .beatnotation .beatbeat svg { height: 100% !important; max-height: none; }
:root[data-theme] .is-3col .met .beatstage:has(.take.has-bpms) :is(.beatnotation, .beatstrip) { padding-right: 0; }

:root[data-theme] .is-3col:where([data-bp~="min720"]) .met .beatstage.has-routine .beatviz .beatnotation { padding-top: 0; }

:root[data-theme] .is-3col .met .take__cur { stroke-width: 3; stroke-linecap: butt; }
:root[data-theme] .is-3col .met .take__done { stroke-width: 5; stroke-linecap: butt; }
:root[data-theme] .is-3col .met .take__bpm { font-size: 11px; transition: top .26s cubic-bezier(.2, .7, .3, 1); }
/* The curve's three BPMs at their own heights (--yb, --ye, --yp from presets.js), never closer than 13 px: where it
   settles under its start's, its peak under that. */
.take__bpm--base { top: var(--yb, 97%); }
.take__bpm--end { top: max(0px, min(var(--ye, 50%), calc(var(--yb, 97%) - 13px))); }
.take__bpm--peak { top: max(0px, min(var(--yp, 3%), calc(min(var(--ye, 50%), calc(var(--yb, 97%) - 13px)) - 13px))); }
@media (prefers-reduced-motion: reduce) { :root[data-theme] .is-3col .met .take__bpm { transition: none; } }

/* ——— The header: 48 px tall, and one button style for How to use, Ask Bub, Learn and Progress — 30 px, outlined, in caps.
   --mast-h is its height with the rule under it, for what hangs below it. ——— */
@media (min-width: 720px) {
  :root { --mast-h: 49px; }
  :root[data-theme] .masthead .shell { min-height: 48px; }
  :root[data-theme] .masthead .logo--head { width: 52px; height: 52px; margin-block: -9px; }
  :root[data-theme] .masthead :is(#tourbtn, #askbtn, #schoolswitch, #progressbtn) {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: var(--compact); min-height: var(--compact); padding: 0 var(--g13);
    border: 1.5px solid color-mix(in srgb, var(--head-ink) 30%, transparent); border-radius: 7px;   /* the header's own colours: */
    background: color-mix(in srgb, var(--head-ink) 6%, transparent); box-shadow: none; transform: none;   /* it is dark in */
    font: 700 11px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--head-ink);   /* walnut */
  }
  :root[data-theme] .masthead :is(#tourbtn, #askbtn, #schoolswitch, #progressbtn):hover { border-color: color-mix(in srgb, var(--head-ink) 60%, transparent); }
  :root[data-theme] .masthead :is(#schoolswitch, #progressbtn)[aria-pressed="true"] { border-color: var(--head-accent); background: color-mix(in srgb, var(--head-accent) 16%, transparent); color: var(--head-accent); }
  :root:is([data-theme="walnut"], [data-theme="aluminium"]) .masthead :is(#schoolswitch, #progressbtn)[aria-pressed="true"] { color: color-mix(in srgb, var(--head-accent) 65%, var(--head-ink)); }
  /* the light looks: deep enough on its tint */
  :root[data-theme] .masthead :is(#tourbtn, #askbtn, #schoolswitch, #progressbtn):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  :root[data-theme] .masthead .usermenu__btn { width: 34px; height: 34px; }
}

/* ——— Learn: lesson rows at 30 px; Bub stands with his right edge on the modules' edge, the bubble clear of him. ——— */
:root[data-theme] .teach__say .school__lesson { min-height: var(--compact); padding: 0 var(--g8); }
:root[data-theme] .teach__say .school__lesson .school__lname { font-size: 15px; }
/* Learn's head: the tour stage at the left, the name centred, the settings gear at the right (clear of the close ×).
   In a track, ← back comes first and the stage follows it. */
:root[data-theme] .teach__say .school__menuhead { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
:root[data-theme] .teach__say .school__menuhead > .school__tour { grid-column: 1; grid-row: 1; justify-self: start; }
:root[data-theme] .teach__say .school__menuhead > .school__runname { grid-column: 2; grid-row: 1; }
:root[data-theme] .teach__say .school__menuhead > .school__lgear { grid-column: 3; grid-row: 1; justify-self: end; width: var(--compact); height: var(--compact); margin-right: 12px; }
:root[data-theme] .teach__say .school__menuhead > .school__lgear svg { width: 22px; height: 22px; }
:root[data-theme] .teach__say .school__menuhead > .school__up { grid-column: 1; grid-row: 1; justify-self: start; width: var(--compact); height: var(--compact); }
:root[data-theme] .teach__say .school__menuhead:has(> .school__up) > .school__tour { margin-left: calc(var(--compact) + var(--g8)); }
/* The day's tiles small (one line each of name and what's in it); the five tracks big, one under another. */
:root[data-theme] .teach__say .school__tiles > button { min-height: 34px; padding: 4px var(--g8); gap: 2px; border-radius: 7px; }
:root[data-theme] .teach__say .school__tiles .school__dailyname { font-size: 13px; line-height: 1; }
:root[data-theme] .teach__say .school__tiles .school__dailysub { font-size: 10px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root[data-theme] .teach__say .school__tracks { grid-template-columns: minmax(0, 1fr); gap: var(--g5); }
:root[data-theme] .teach__say .school__tracks .school__track:last-child:nth-child(odd) { grid-column: auto; }
:root[data-theme] .teach__say .school__track {
  display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: var(--g13);
  min-height: 52px; padding: 0 var(--g13) 0 var(--g21);
}
:root[data-theme] .teach__say .school__trackname { font-size: 21px; }
:root[data-theme] .teach__say .school__trackn { font-size: 13px; }
@media (min-width: 720px) {
  .teach { right: var(--gutter); }
  .teach__bub { margin-left: var(--g8); }
}

/* ——— Contrast (Phase 4): text 4.5:1 in every look. ——— */
:root[data-theme] .school__grade { color: #15110C; }   /* the grade badges are mid-bright colours: dark text reads on all of them */
/* The light looks darken their good, ok, bad and muted colours for text on paper, so the badges made from them get
   white text on a slightly deeper fill. B and D on the lesson grades are fixed bright colours: dark text stays. */
:root:is([data-theme="walnut"], [data-theme="aluminium"]) :is(.grade--A, .grade--B, .grade--C, .grade--D),
:root:is([data-theme="walnut"], [data-theme="aluminium"]) .school__grade:is([data-grade="A"], [data-grade="C"], [data-grade="F"]) {
  color: #fff; background-image: linear-gradient(rgb(0 0 0 / .2), rgb(0 0 0 / .2));   /* a shade over the badge's own colour */
}
:root[data-theme] .fbtn.is-off .fbtn__meter { opacity: 1; }
:root[data-theme] .tuner .fbtn__off { color: color-mix(in srgb, var(--bad) 80%, var(--ink)); text-shadow: none; }
:root[data-theme] .masthead .presence { color: var(--head-mute, var(--ink-mute)); }
:root[data-theme] .is-3col .met .take__bpm--peak { color: color-mix(in srgb, var(--bad) 80%, var(--glass-ink)); }
:root[data-theme] .loopcard :is(.loopcard__stat, .loopcard__unit, .loopcard__n) { color: color-mix(in srgb, var(--ink-mute) 60%, var(--ink)); }

/* ——— Touch and keyboard (Phase 4): small targets keep 24 px to press; focus rings never cut off. ——— */
:root[data-theme] .mdev .mdial__screen .picker > .picker__btn { min-height: 24px; }
/* In rows that clip or scroll,
the ring is drawn just inside the control's edge. */
:root[data-theme] :is(.modmove,.seg,.fb__side,.fb__ident,.mborder,.loopcards,.fb__neck) :focus-visible { outline-offset: -2px; }
/* The BPM on the glass shows the ring too (fields elsewhere mark focus with their border, which it has none of). */
:root[data-theme] .mdev .mdial__screen input.tcbpm:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 5px; }

/* ——— Progress: Hide a small chip on the title line, tighter cards, a smaller calendar and tour. ——— */
.pedal--progress { position: relative; }
.pedal--progress > .pedal__head .pedal__art { display: none; }
:root[data-theme] #board .pedal--progress > .pedal__head .pedal__headctl { position: absolute; z-index: 4; top: calc(var(--tl) - 11px); left: auto; right: calc(var(--mpad) + 58px); width: auto; margin: 0; padding: 0; display: flex; }
:root[data-theme] .pedal--progress > .pedal__head [data-hideprogress] { min-height: 22px; height: 22px; padding: 0 8px; font-size: 11px; border-radius: 6px; }
:root[data-theme] .pedal--progress > .report { margin-top: 0; }
.pdash { gap: var(--g8); }
:root[data-theme] .pdash__card { padding: var(--g13); gap: var(--g8); }
:root[data-theme] .pdash__hero { min-height: 0; padding: var(--g8) var(--g21); gap: var(--g34); }
:root[data-theme] .pdash :is(.pdash__grid3, .pdash__grid2) { gap: var(--g8); }
:root[data-theme] .pdash__cal .cal__grid { gap: 3px; }
/* A lesson track: name, bar, passed, grade — the grade column wide enough for "Soundcheck 52%". */

:root[data-theme] :where(.pedal[data-bp~="min720"]) .pdash__track { grid-template-columns: 89px minmax(0, 1fr) 55px 112px; }

:root[data-theme] .pdash__track > .pdash__mono { white-space: nowrap; }
:root[data-theme] .pdash__cal .cal__grid .cal__cell:not(.is-empty) { height: 26px; }
.tour__items { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: var(--g5); }
/* The tour shows the road and the next stop; the wardrobe and the looks fold under one line until opened. */
.tour__more > summary { display: flex; align-items: center; gap: var(--g8); min-height: var(--compact); cursor: pointer; list-style: none; }
.tour__more > summary::-webkit-details-marker { display: none; }
.tour__more > summary::before {
  content: ""; flex: none; width: 7px; height: 7px; margin: 0 2px 0 3px; border-right: 2px solid var(--ink-mute); border-bottom: 2px solid var(--ink-mute);
  transform: rotate(-45deg); transition: transform .15s;
}
.tour__more[open] > summary::before { transform: rotate(45deg); }
.tour__more > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 5px; }
.tour__more[open] { display: flex; flex-direction: column; gap: var(--g8); }
/* Tempo before it moves: one line, the BPM and how long it has held. */
:root[data-theme] .pdash__tempo .pdash__still { flex: 0 0 auto; flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; gap: var(--g8); padding: var(--g5) 0; text-align: left; background: none; border: 0; box-shadow: none; min-height: 0; }
:root[data-theme] .pdash__tempo .pdash__still .pdash__big { font-size: 21px; }
:root[data-theme] .tour__item { padding: var(--g5); gap: 3px; }
.tour__bub, .tour__v { width: 50px; }
.tour__v { height: 40px; }

/* ——— Learn: slimmer tiles, the five tracks three to a row, a smaller head. ——— */
:root[data-theme] .teach__say .school__menuhead { min-height: 0; }
:root[data-theme] .teach__say .school__lgear { width: 32px; height: 32px; }
:root[data-theme] .teach__say .school__lgear svg { width: 22px; height: 22px; }
:root[data-theme] .teach__say .school__runname { font-size: 15px; }
:root[data-theme] .school__tiles { gap: var(--g5); align-items: stretch; }
:root[data-theme] .school__tiles > * { height: auto; align-self: stretch; }
:root[data-theme] .school__tiles :is(.school__daily, .school__review) { padding: var(--g8) 10px; gap: 2px; min-height: 0; }
:root[data-theme] .school__tiles .school__dailyname { font-size: 15px; line-height: 1.1; }
:root[data-theme] .school__tiles .school__dailysub { font-size: 13px; line-height: 1.25; }
:root[data-theme] .school__tracks { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--g5); margin-top: var(--g5); }
:root[data-theme] .school__tracks .school__track:last-child:nth-child(odd) { grid-column: auto; }
:root[data-theme] .school__track { min-height: 44px; padding: 5px var(--g8); gap: 1px; }
:root[data-theme] .school__trackname { font-size: 15px; }
:root[data-theme] .school__trackn { font-size: 11px; }
@media (max-width: 719px) {
  :root[data-theme] .school__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root[data-theme] .school__track { min-height: 40px; }
  :root[data-theme] .school__trackname { font-size: 13px; }
}

/* ——— Bub's tip pops when clicked: the bubble bursts into bits, Bub ducks out (ui/cheer.js). ——— */
.cheer.is-on :is(.cheer__bub, .cheer__say) { pointer-events: auto; cursor: pointer; }
.cheer.is-popping .cheer__say { animation: cheer-burst .32s cubic-bezier(.3, 0, .7, 1) both; }
/* He ducks out from wherever his bob has him (the duck adds to it, so he doesn't jump), and fades as he goes. */
.cheer.is-popping .cheer__bub {
  animation: cheer-bob 1.3s ease-in-out .6s infinite, cheer-duck .42s cubic-bezier(.5, -0.4, .8, .6) both, cheer-fade .42s ease-in both;
  animation-composition: replace, add, replace;
}
@keyframes cheer-fade { 0%, 40% { opacity: 1; } 100% { opacity: 0; } }
.cheer.is-gone { transition: none; }
.cheer.is-gone :is(.cheer__bub, .cheer__say) { animation: none; opacity: 0; }
@keyframes cheer-burst { 0% { transform: scale(1); opacity: 1; } 35% { transform: scale(1.14); opacity: 1; } 100% { transform: scale(.2); opacity: 0; filter: blur(4px); } }
@keyframes cheer-duck { 0% { transform: translateY(0); } 30% { transform: translateY(-6%) scale(1.04); } 100% { transform: translateY(45%) scale(.5) rotate(10deg); } }
.cheer__burst { position: fixed; z-index: 112; width: 0; height: 0; pointer-events: none; }
.cheer__burst i {
  position: absolute; left: 0; top: 0; width: var(--s); height: var(--s); margin: calc(var(--s) / -2); border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 6px var(--accent); animation: cheer-bit .7s cubic-bezier(.15, .7, .3, 1) var(--d) both;
}
.cheer__burst i:nth-child(3n) { background: var(--ink); box-shadow: none; }
.cheer__burst i:nth-child(3n + 1) { background: var(--surface); border: 1.5px solid var(--ctl-edge-hi); box-shadow: none; }
@keyframes cheer-bit { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .cheer.is-popping :is(.cheer__say, .cheer__bub) { animation: none; opacity: 0; transition: opacity .2s; }
  .cheer__burst { display: none; }
}

/* ══ v489 — the Routines List is lines, not cards: no frame round a row, a hairline between rows, the loop playing lit at
   the left, the row you opened a line too (its name and settings in the same columns; under its name when the column is
   too narrow for one line). Play and Edit are plain buttons that show their box when pointed at. ══ */
:root[data-theme] [data-card="routines"][data-loopview="list"] .loopcard:not(.is-editing):not(.is-playing):not(.is-paused):hover { background: color-mix(in srgb, var(--ink) 6%, transparent); box-shadow: none; }
:root[data-theme] [data-card="routines"][data-loopview="list"] .loopcard__acts .chip { background: transparent; border-color: transparent; box-shadow: none; height: 28px; min-height: 28px; padding: 0 var(--g8); border-radius: 6px; font: 700 13px/1 var(--sans); color: var(--ink-body); }
:root[data-theme] [data-card="routines"][data-loopview="list"] .loopcard__acts .chip:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--ink) 10%, transparent); border-color: color-mix(in srgb, var(--ink) 22%, transparent); }
:root[data-theme] [data-card="routines"][data-loopview="list"] .loopcard__acts .chip[data-load] { color: var(--accent); }
:root[data-theme] [data-card="routines"][data-loopview="list"] .loopcard__acts .chip[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }
:root[data-theme] [data-card="routines"].is-3col[data-loopview="list"] .loopcard.is-editing {
  width: auto; display: grid; grid-template-columns: var(--list-cols); column-gap: var(--g13); row-gap: 2px; align-items: center; min-height: 40px;
  padding: 3px var(--g8) 3px 0; margin: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; overflow: visible;
  background: color-mix(in srgb, var(--accent) 7%, transparent); box-shadow: inset 3px 0 0 var(--accent);
}
:root[data-theme] [data-card="routines"].is-3col[data-loopview="list"] .loopcard.is-editing > * { min-height: 0; margin: 0; }
:root[data-theme] [data-card="routines"].is-3col[data-loopview="list"] .loopcard.is-editing :is(.loopcard__stats:not(.phrasecard__play), .loopcard__foot) { display: contents; }
:root[data-theme] [data-card="routines"].is-3col[data-loopview="list"] .loopcard.is-editing .loopcard__top { grid-column: 1; min-width: 0; display: flex; align-items: center; gap: var(--g8); padding: 0 var(--g8); background: transparent; color: var(--ink); }
:root[data-theme] [data-card="routines"].is-3col[data-loopview="list"] .loopcard.is-editing .loopcard__top .loopcard__n { color: var(--ink-mute); }
:root[data-theme] [data-card="routines"].is-3col[data-loopview="list"] .loopcard.is-editing .loopcard__top .loopcard__name { flex: 1 1 auto; min-width: 0; color: var(--ink); text-align: left; }
:root[data-theme] [data-card="routines"].is-3col[data-loopview="list"] .loopcard.is-editing .loopcard__time { font-variant-numeric: tabular-nums; }
:root[data-theme] [data-card="routines"].is-3col[data-loopview="list"] .loopcard.is-editing .loopcard__acts { display: flex; justify-content: flex-end; gap: 4px; }
:root[data-theme] [data-card="routines"].is-3col[data-loopview="list"] .loopcard.is-editing :is(.loopcard__swing, .phrasecard__notes) { grid-column: 1 / -1; padding: 0 var(--g8) 2px calc(var(--g8) + 1.4em); font: 500 10px/1.2 var(--mono); color: var(--ink-mute); }
:root[data-theme] [data-card="routines"].is-3col[data-loopview="list"] .loopcard.is-editing .phrasecard__play { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--g8); padding: 0 var(--g8) 2px calc(var(--g8) + 1.4em); }
:root[data-theme] [data-card="routines"].is-3col[data-loopview="list"] .loopcard.is-editing :is(.loopcard__stat, .picker) { min-width: 0; }
:root[data-theme] [data-card="routines"].is-3col[data-loopview="list"] .loopcard.is-editing .picker__btn { width: 100%; min-width: 0; padding-inline: 6px; }
:root[data-theme] [data-card="routines"].is-3col[data-loopview="list"] .loopcard.is-editing .loopcard__stat--bpm { display: flex; align-items: center; gap: 3px; }
:root[data-theme] [data-card="routines"].is-3col[data-loopview="list"] .loopcard.is-editing .loopcard__stat--bpm input { width: 54px; min-width: 0; padding-inline: 4px; }
/* Room for all of it on one line: a wider set of columns, in the header and every row. */
@container rlist (min-width: 820px) {
  :root[data-theme] [data-card="routines"].is-3col[data-loopview="list"] :is(.mcol__listhead, .loopcard) { --list-cols: minmax(0, 1fr) 84px 64px 72px 66px 44px 250px; }
}
/* Not enough room for the open row on one line: its name and buttons, then its settings under them. */
@container rlist (max-width: 819px) {
  :root[data-theme] [data-card="routines"].is-3col[data-loopview="list"] .loopcard.is-editing { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "top acts" "stats stats"; column-gap: var(--g8); row-gap: 4px; padding-block: 5px; }
  :root[data-theme] [data-card="routines"].is-3col[data-loopview="list"] .loopcard.is-editing .loopcard__top { grid-area: top; grid-column: auto; }
  :root[data-theme] [data-card="routines"].is-3col[data-loopview="list"] .loopcard.is-editing .loopcard__acts { grid-area: acts; }
  :root[data-theme] [data-card="routines"].is-3col[data-loopview="list"] .loopcard.is-editing .loopcard__time { display: none; }
  :root[data-theme] [data-card="routines"].is-3col[data-loopview="list"] .loopcard.is-editing .loopcard__stats:not(.phrasecard__play) { grid-area: stats; display: flex; flex-wrap: wrap; align-items: center; gap: var(--g8); padding-left: calc(var(--g8) + 1.4em); }
}

:root[data-theme] [data-card="routines"][data-loopview="list"]:where([data-bp~="max719"]) .loopcard.is-editing {
    position: relative; width: auto; min-width: 0; min-height: 0; height: auto; flex: none; display: grid; margin: 0; padding: var(--g5) var(--g8);
    border: 0; border-bottom: 1px solid var(--line); border-radius: 0; overflow: visible;
    background: color-mix(in srgb, var(--accent) 7%, transparent); box-shadow: inset 3px 0 0 var(--accent);
  }
:root[data-theme] [data-card="routines"][data-loopview="list"]:where([data-bp~="max719"]) .loopcard.is-editing > * { margin: 0; }
:root[data-theme] [data-card="routines"][data-loopview="list"]:where([data-bp~="max719"]) .loopcard.is-editing .loopcard__top { padding: 0; background: none; color: var(--ink); }
:root[data-theme] [data-card="routines"][data-loopview="list"]:where([data-bp~="max719"]) .loopcard.is-editing .loopcard__top .loopcard__n { color: var(--ink-mute); }
:root[data-theme] [data-card="routines"][data-loopview="list"]:where([data-bp~="max719"]) .loopcard.is-editing .loopcard__top .loopcard__name { color: var(--ink); flex: 1 1 auto; min-width: 0; text-align: left; }
:root[data-theme] [data-card="routines"][data-loopview="list"]:where([data-bp~="max719"]) .loopcard.is-editing .loopcard__foot { display: contents; }
:root[data-theme] [data-card="routines"][data-loopview="list"]:where([data-bp~="max719"]) .loopcard.is-editing .loopcard__acts { display: flex; gap: 4px; }
:root[data-theme] [data-card="routines"][data-loopview="list"]:where([data-bp~="max719"]) .loopcard.is-editing :is(.loopcard__swing, .phrasecard__notes, .phrasecard__play) { grid-column: 1 / -1; }
:root[data-theme] [data-card="routines"][data-loopview="list"]:where([data-bp~="max719"]) .loopcard.is-editing { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "top acts" "stats stats"; column-gap: var(--g8); row-gap: 4px; padding-block: 5px; }
:root[data-theme] [data-card="routines"][data-loopview="list"]:where([data-bp~="max719"]) .loopcard.is-editing .loopcard__top { grid-area: top; grid-column: auto; }
:root[data-theme] [data-card="routines"][data-loopview="list"]:where([data-bp~="max719"]) .loopcard.is-editing .loopcard__acts { grid-area: acts; }
:root[data-theme] [data-card="routines"][data-loopview="list"]:where([data-bp~="max719"]) .loopcard.is-editing .loopcard__time { display: none; }
:root[data-theme] [data-card="routines"][data-loopview="list"]:where([data-bp~="max719"]) .loopcard.is-editing .loopcard__stats:not(.phrasecard__play) { grid-area: stats; display: flex; flex-wrap: wrap; align-items: center; gap: var(--g8); padding-left: calc(var(--g8) + 1.4em); }

/* Narrower still (a phone, or the app's smallest window): three short lines, name, settings, buttons. */
@container rlist (max-width: 479px) {
  :root[data-theme] [data-card="routines"].is-3col[data-loopview="list"] .loopcard.is-editing { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "stats" "acts"; }
  :root[data-theme] [data-card="routines"].is-3col[data-loopview="list"] .loopcard.is-editing .loopcard__acts { justify-self: end; }
}

:root[data-theme] [data-card="routines"][data-loopview="list"]:where([data-bp~="max479"]) .loopcard.is-editing { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "stats" "acts"; }
:root[data-theme] [data-card="routines"][data-loopview="list"]:where([data-bp~="max479"]) .loopcard.is-editing .loopcard__acts { justify-self: end; }

/* ══ v490 — a beat is a button: Regular, Accent 1 (^), Accent 2 (>), Silent. Accent 1 is framed, Accent 2 framed more
   lightly, Silent hollow and dim; the mark sits in the corner of a beat in the notation view. ══ */
.beatbeat, .beatcell { cursor: pointer; position: relative; }
.beatbeat:focus-visible, .beatcell:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }   /* inside the box: the view clips what is outside it */
:root[data-theme] .beatbeat[data-lvl="2"] { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--glass-ink, var(--ink)) 16%, transparent); }
.beatbeat[data-lvl="3"]::before, .beatbeat[data-lvl="2"]::before {
  position: absolute; top: 3px; left: 6px; font: 700 13px/1 var(--mono); color: var(--glass-ink, var(--ink)); opacity: .9; pointer-events: none;
}
.beatbeat[data-lvl="3"]::before { content: "^"; }
.beatbeat[data-lvl="2"]::before { content: ">"; opacity: .7; }
.beatbeat[data-lvl="0"] .rhy { opacity: .28; }
.beatcell.is-silent { opacity: .3; }
:root[data-theme] .beatviz .beatbeat:hover, :root[data-theme] .beatviz .beatcell:hover { filter: brightness(1.15); }

/* A loop's open card: what each beat plays, small buttons at the end of its name line. */
.loopbeats { display: inline-flex; align-items: center; gap: 3px; flex: none; }
.loopbeats__b {
  appearance: none; width: 24px; height: 24px; padding: 0; display: grid; place-items: center; cursor: pointer; border-radius: 6px;
  background: transparent; border: 1px solid color-mix(in srgb, var(--ink) 28%, transparent); color: var(--ink-body); font: 700 13px/1 var(--mono);
}
.loopbeats__b[data-lvl="3"] { border-color: var(--accent); color: var(--accent); }
.loopbeats__b[data-lvl="2"] { border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: color-mix(in srgb, var(--accent) 80%, var(--ink-body)); }
.loopbeats__b[data-lvl="0"] { opacity: .55; }
.loopbeats__b:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--ink) 10%, transparent); }
:root[data-theme] .loopcard__top .loopbeats__b { color: var(--ink-body); }
:root[data-theme] .is-3col:not([data-loopview="list"]) .loopcard__top .loopbeats__b { color: #fff; border-color: rgb(255 255 255 / .5); }

/* v491: the routine settings' Repeat and View rows: the word keeps its room (a 320 px phone left it 4 px short) and the
   buttons take what is left, instead of three fixed columns. */
:root[data-theme] .rset .rset__row { grid-template-columns: max-content minmax(0, 1fr); }
:root[data-theme] .rset .rset__row > .rset__seg { grid-column: 2; }
:root[data-theme] .rset .rset__seg button { min-width: 34px; padding-inline: var(--g5); }
/* The routine's menu, opened with the settings box also open, sits above it (it was under the box). */
:root[data-theme] .rrow:has(.picker__pop:not([hidden])) { position: relative; z-index: 80; }
:root[data-theme] .rrow__pick .picker__pop { z-index: 60; }

/* ══ v492 — a groove's step grid is the beat view while a groove plays: one row a drum, one column a step, a cell a
   dot that grows with its strength (ghost, regular, accent); a beat's number above its steps drops that beat out. ══ */
.beatviz[data-mode="steps"] .beatsteps { display: grid; }
.beatsteps {
  grid-template-columns: 44px repeat(var(--cols, 8), minmax(22px, 1fr)); grid-template-rows: 22px repeat(var(--rows, 5), minmax(24px, 30px));
  gap: 2px 1px; height: 100%; padding: 0 8px 2px 0; box-sizing: border-box; align-content: end; overflow: auto; color: var(--glass-ink, var(--ink));   /* sits low: the routine's knobs are above it */
}
.steps__corner { grid-column: 1; }
.steps__name { align-self: center; justify-self: end; padding-right: 8px; font: 700 10px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); white-space: nowrap; }
.steps__beat {
  appearance: none; padding: 0; border: 0; border-left: 1px solid color-mix(in srgb, currentColor 28%, transparent); background: transparent; color: inherit;
  font: 700 11px/1 var(--mono); text-align: left; padding-left: 5px; cursor: pointer; min-width: 0; overflow: hidden;
}
.steps__beat.is-bar { border-left-color: color-mix(in srgb, currentColor 60%, transparent); }
.steps__beat[data-lvl="0"] { opacity: .35; text-decoration: line-through; }
.steps__beat:is(:hover, :focus-visible) { background: color-mix(in srgb, currentColor 12%, transparent); }
.stepcell { appearance: none; padding: 0; border: 0; background: transparent; position: relative; cursor: pointer; min-width: 0; min-height: 0; color: inherit; }
.stepcell::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: var(--d, 5px); height: var(--d, 5px); transform: translate(-50%, -50%); border-radius: 50%;
  background: currentColor; opacity: var(--o, .22); transition: width .08s, height .08s, opacity .08s;
}
.stepcell.is-beat::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 1px; background: color-mix(in srgb, currentColor 18%, transparent); }
.stepcell.is-bar::before { background: color-mix(in srgb, currentColor 45%, transparent); }
.stepcell[data-s="1"] { --d: 7px; --o: .6; }
.stepcell[data-s="2"] { --d: 12px; --o: .9; }
.stepcell[data-s="3"] { --d: 17px; --o: 1; color: var(--accent); }
.stepcell:is(:hover, :focus-visible) { background: color-mix(in srgb, currentColor 10%, transparent); }
.stepcell:focus-visible, .steps__beat:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
:root[data-theme] .beatsteps :is(.stepcell, .steps__beat):focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }   /* inside the cell, whatever the look says */
.stepcell.is-now { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.stepcell.is-now::after { opacity: 1; }
:root[data-theme] .is-3col .met .beatstage.has-routine .beatviz .beatsteps { height: calc(100% - var(--band)); }
/* A step grid needs its rows: taller than the notation's view (the module's left column, the dial, is taller still). */
:root[data-theme] .is-3col .met .beatstage:not(.has-routine) { --band: 0px; }   /* no curve band: the steps get all of the view */
:root[data-theme] .is-3col .met .beatstage .beatviz[data-mode="steps"], :root[data-theme] .is-3col .met .beatstage.has-routine .beatviz[data-mode="steps"] {
  height: calc(var(--rows, 5) * 26px + 44px + var(--band));   /* a header, a row for each drum, then the curve's band */
}

:where(.pedal[data-bp~="max719"]) .beatsteps { grid-template-columns: 40px repeat(var(--cols, 8), minmax(24px, 1fr)); }

/* A loop that plays a groove: its name where the rhythm's picture would be. */
.loopcard__groove { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; font: 600 var(--fs-btn)/1.2 var(--sans); }
.loopcard__stat--groove { min-width: 0; overflow: hidden; }
.loopgroove { gap: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Tabs: a Guitar Pro file, two or three bars at a time ---- */
.pedal--tabs { grid-column: 1 / -1;  }
.pedal--tabs > .pedal__head .pedal__art { display: none; }
.tabs__body { padding: var(--g13, 13px) 0 0; }
.tabm { --b0: var(--accent); --b1: #3fa7a0; --b2: #c58a2b; display: grid; gap: var(--g13, 13px); min-width: 0; }
.tabm__lede { margin: 0; color: var(--ink-body); font-size: 15px; }
.tabm__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 13px; }
.tabm__hint { color: var(--ink-mute); font-size: 13px; }
.tabm__file { cursor: pointer; }
.tabm__glabel { display: block; margin: 8px 0 4px; font: 700 11px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-mute); }
.tabm__sdel { flex: none; width: 32px; height: 32px; background: none; border: 0; color: var(--ink-mute); cursor: pointer; border-radius: 6px; font-size: 13px; line-height: 1; }
.tabm__sdel:hover { color: var(--bad); }

.tabm__song:not([hidden]) { display: grid; gap: var(--g8, 8px); min-width: 0; }

.tabm__title { flex: 1 1 180px; min-width: 0; display: flex; flex-wrap: wrap; gap: 0 2px; color: var(--ink); }
.tabm__title b { font-weight: 700; }
.tabm__title span { color: var(--ink-mute); }

.tabm__stage { min-width: 0; overflow-x: auto; }

.tabm__at { background: #fff; border-radius: 8px; padding: 6px; }
.tabm__loading { margin: 0; padding: 18px 4px; color: var(--ink-mute); }

.tabm__head {  top: 0; bottom: 0;    pointer-events: none; }

.tabm__status { margin: 0; min-height: 1.3em; color: var(--ink-mute); font-size: 13px; }
.pedal--tabs.is-drop { outline: 2px dashed var(--accent); outline-offset: -4px; }

/* Clear: the notes marked by hand come off the neck (tools/fretboard.js). Small, beside the readout, there only when there is something to clear. */
:root[data-theme] .fb__clear { height: 22px; min-height: 0; padding: 0 9px; font-size: 11px; flex: none; }
.fb__clear[hidden] { display: none; }

/* Mirror rush/drag (Settings → metronome): the bar turns round, its words stay readable and point the other way. `scale` composes with
   the shake and pulse animations, which use `transform`. */
html[data-mirror="on"] .tbar--line, html[data-mirror="on"] .tbar--line .tbar__streak { scale: -1 1; }
html[data-mirror="on"] .beatrow > .tline .tbar--line::before, html[data-mirror="on"] .beatrow > .tline .tbar--line::after { scale: -1 1; }
html[data-mirror="on"] .beatrow > .tline .tbar--line::before { content: "RUSHING ▸"; }
html[data-mirror="on"] .beatrow > .tline .tbar--line::after { content: "◂ DRAGGING"; }

/* A song on the neck (the Tabs module, through the lesson channel): the note to play now, the next one, and the ones played. */
.fb__note.is-now .fb__dot { --dot: var(--lit-ink, var(--good)); --dot-ink: #06121F; box-shadow: 0 0 0 3px color-mix(in srgb, var(--lit-ink, var(--good)) 40%, transparent), 0 0 18px color-mix(in srgb, var(--lit-ink, var(--good)) 85%, transparent); }
.fb__note.is-next .fb__dot { box-shadow: 0 0 0 2px var(--accent); }
.fb__note.is-past .fb__dot { opacity: .45; }

/* Tabs: the beat being played, marked on alphaTab's drawing (tools/tabs.js lightTab). */
.tabm__at { position: relative; }

.fb__note.is-near .fb__dot { --dot: var(--ok, #EDB451); --dot-ink: #1A1204; }

/* The Hz readout is shown whenever a note sounds: dark enough in the light looks (found once a note was left on screen). */
:root[data-theme] .fb__now .fb__hz, :root[data-theme] .is-fretbar .fb__now .fb__hz, :root[data-theme] .fb__read .scope__alt { color: color-mix(in srgb, var(--ink-mute) 55%, var(--ink)); opacity: 1; }

/* Bub's pop-up: its size (Bub size, in the account menu). */
.cheer { scale: var(--cheer-scale, 1); transform-origin: 0 50%; }
.cheer[data-side="left"] { transform-origin: 100% 50%; }

/* ══ TABS, as the Fretboard and the Metronome are (tools/tabs.js) ══════════════════════════════════════════════════
   Title on the border with Open another…, + Save preset and the gear at its right (the gear opens a settings box, one row
   per option); one row of menus, the transport and Loop, the song's name in the middle; the song as one drawing that
   scrolls (sideways, or down), and an info line at the foot. */
.pedal--tabs { position: relative; }
.pedal--tabs .tabm { position: static; }
.tabm__top { position: absolute; z-index: 5; top: calc(var(--tl) - 11px); right: calc(var(--mpad) + 58px); display: flex; align-items: center; gap: 6px; height: 22px; }
.pedal--tabs:not(.has-song) [data-songonly] { display: none; }
/* A phone's title line has no room beside the name: the buttons and the gear make the first row under it. */
.pedal--tabs:where([data-bp~="max719"]) .tabm__top { position: static; justify-content: flex-end; height: auto; }
:root[data-theme] .tabm__top .chip { height: var(--chip); min-height: var(--chip); padding: 0 8px; font: 700 11px/1 var(--sans); border-radius: 5px; white-space: nowrap; }
:root[data-theme] .pedal--tabs .tabm__gear {
  display: grid; place-items: center; flex: none;
  width: 22px; height: 22px; padding: 0; margin: 0; border: 0; border-radius: 5px; background: transparent; color: var(--ink-body); cursor: pointer;
}
.pedal--tabs .tabm__gear svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
:root[data-theme] .pedal--tabs .tabm__gear[aria-expanded="true"] { color: var(--accent); }
:root[data-theme] .pedal--tabs .tabm__set {
  position: absolute; z-index: 40; top: calc(var(--tl) + 16px); right: var(--mpad);  max-width: calc(100% - 26px);
  display: flex; flex-direction: column; gap: 0; padding: var(--g5, 5px) 0; margin: 0;
  background: var(--surface); border: 1px solid var(--ctl-edge-hi, var(--line-2)); border-radius: 12px 0 12px 12px; box-shadow: 0 13px 30px rgb(0 0 0 / .5);
}
:root[data-theme] .pedal--tabs .tabm__set[hidden] { display: none; }
:root[data-theme] .pedal--tabs .tabm__set .rset__row { grid-template-columns: 132px minmax(0, 1fr); min-height: 38px; }
:root[data-theme] .pedal--tabs .tabm__set .rset__seg { justify-self: end; flex-wrap: nowrap; }
:root[data-theme] .pedal--tabs .tabm__set .rset__seg button { padding: 0 9px; white-space: nowrap; }
/* A phone: the box opens under the row of buttons; each row's name takes what it needs. */
:root[data-theme] .pedal--tabs:where([data-bp~="max719"]) .tabm__set { top: calc(var(--tl) + 62px); border-radius: 12px; }
:root[data-theme] .pedal--tabs:where([data-bp~="max719"]) .tabm__set .rset__row { grid-template-columns: auto minmax(0, 1fr); }
:root[data-theme] .pedal--tabs:where([data-bp~="max719"]) .tabm__set .rset__seg button { padding: 0 6px; }
:root[data-theme] .pedal--tabs:where([data-bp~="max719"]) .tabm__set .rset__row:has([data-set="amp"]) { grid-template-columns: minmax(0, 1fr); row-gap: 6px; padding-block: 6px; }
:root[data-theme] .pedal--tabs:where([data-bp~="max719"]) .tabm__set [data-set="amp"] { grid-column: 1; justify-self: start; }

/* The row (21 Oct, late): Part · Section · Speed · ‹ ▶ › at the left, tight under the title line; Loop moved up to it. */
.tabm__row { display: flex; align-items: center; min-width: 0; margin-top: -4px; }
.tabm__ctl { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g8); min-width: 0; }
.tabm__ctl > [hidden] { display: none; }

.tabm__go { display: inline-flex; align-items: center; gap: 6px; }
/* Small controls (21 Oct, evening): one-line menus 28 px high, ‹ ▶ › 24 px, Loop a small switch as the Routines one is. */
:root[data-theme] .tabm__ctl .picker > .picker__btn { min-height: 28px; height: 28px; padding: 0 8px; gap: 6px; border-width: 1px; border-radius: 6px; }
:root[data-theme] .tabm__ctl .picker > .picker__btn .picker__face { flex-direction: row; align-items: baseline; gap: 6px; }
:root[data-theme] .tabm__ctl .picker > .picker__btn .picker__title { font-size: 10px; }
:root[data-theme] .tabm__ctl .picker > .picker__btn .picker__cur { font-size: 13px; }
:root[data-theme] .tabm__ctl .picker > .picker__btn .picker__caret { width: 6px; height: 6px; margin-top: -3px; }
:root[data-theme] .tabm__go .chip { width: 24px; height: 24px; min-height: 0; padding: 0; justify-content: center; font-size: 13px; }
:root[data-theme] .tabm__play { width: 32px; height: 24px; min-height: 0; padding: 0; display: grid; place-items: center; border-radius: 6px; }
.tabm__play svg { width: 12px; height: 12px; fill: currentColor; }
.tabm__loopsw { flex-direction: row; align-items: center; gap: 5px; }
:root[data-theme] :is(.tabm__loopsw, .tabm__transsw) .rocker__name { order: -1; position: static; font: 700 10px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); }
:root[data-theme] :is(.tabm__loopsw, .tabm__transsw) .rocker__plate { transform: scale(.62); margin: -9px -8px; }
:root[data-theme] :is(.tabm__loopsw, .tabm__transsw):has([aria-checked="true"]) .rocker__name { color: var(--accent); }
/* Transpose (22 Oct): the switch, and − 0 + beside it while it's on. */
/* The play line while nothing plays (Loop off): where Play starts, a thin line in the playing line's colour. */
.tabm__cursor { position: absolute; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--paper-head); opacity: .8; pointer-events: none; }
.tabm__cursor::before { content: ""; position: absolute; top: -1px; left: -4px; border: 5px solid transparent; border-top-color: var(--paper-head); }

/* The song: one drawing that scrolls, the loop and the playing line laid over it. */
.tabm__stage { position: relative; overflow: auto; border-radius: 8px; border: 1px solid var(--line); cursor: text; overscroll-behavior: contain; scrollbar-width: thin; }
.tabm__stage[data-layout="page"] { max-height: 345px; }   /* 25 % shorter (23 Oct); the notes keep their size */
.tabm__stage:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tabm__canvas { position: relative; min-width: 100%; width: max-content; background: var(--paper-bg, #fff); }
.tabm__stage[data-layout="page"] .tabm__canvas { width: 100%; }
:root[data-theme] .tabm__canvas .tabm__at { background: transparent; border-radius: 0; padding: 0; position: relative; }
.tabm__over { position: absolute; inset: 0; pointer-events: none; }
.tabm__loop { position: absolute; background: var(--paper-sel); box-shadow: inset 0 2px 0 var(--paper-edge), inset 0 -2px 0 var(--paper-edge); }
.tabm__loop.is-first { box-shadow: inset 3px 0 0 var(--paper-edge), inset 0 2px 0 var(--paper-edge), inset 0 -2px 0 var(--paper-edge); border-radius: 6px 0 0 6px; }
.tabm__loop.is-last { box-shadow: inset -3px 0 0 var(--paper-edge), inset 0 2px 0 var(--paper-edge), inset 0 -2px 0 var(--paper-edge); border-radius: 0 6px 6px 0; }
.tabm__loop.is-first.is-last { box-shadow: inset 0 0 0 2px var(--paper-edge), inset 3px 0 0 var(--paper-edge), inset -3px 0 0 var(--paper-edge); border-radius: 6px; }
.tabm__head { position: absolute; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--paper-head); box-shadow: 0 0 10px var(--paper-head), 0 0 2px var(--paper-head); }
@media (prefers-reduced-motion: reduce) { .tabm__head { transition: none !important; } }
.tabm__canvas .tabm__loading { padding: 18px 13px; color: var(--paper-ink); }
/* The paper, chosen in the settings box (Look). */
.pedal--tabs { --paper-bg: #12151b; --paper-ink: #e8ecf2; --paper-sel: rgb(90 174 242 / .2); --paper-edge: #5aaef2; --paper-head: #ff5a6e; }
.pedal--tabs[data-paper="light"] { --paper-bg: #ffffff; --paper-ink: #16181c; --paper-sel: rgb(47 127 209 / .16); --paper-edge: #2f7fd1; --paper-head: #e0304a; }
.pedal--tabs[data-paper="sepia"] { --paper-bg: #f3ead6; --paper-ink: #3a2e22; --paper-sel: rgb(160 82 45 / .16); --paper-edge: #a0522d; --paper-head: #c0392b; }
.pedal--tabs[data-paper="blue"] { --paper-bg: #0f1c2e; --paper-ink: #dde9f8; --paper-sel: rgb(142 197 255 / .18); --paper-edge: #8ec5ff; --paper-head: #ffb347; }
.pedal--tabs[data-paper="brown"] { --paper-bg: #2a1f17; --paper-ink: #f1e3cd; --paper-sel: rgb(240 178 122 / .18); --paper-edge: #f0b27a; --paper-head: #7ee8be; }

/* The info line, as under the neck and the metronome: the bars chosen, and how each pass went. */
/* The info line rides in the drawing's top right corner: the song, then where Play starts (or the bars chosen) and the pass. */
.tabm__view { position: relative; min-width: 0; }
:root[data-theme] .tabm__info { position: absolute; z-index: 3; top: 8px; right: 14px; left: auto; width: max-content; max-width: calc(100% - 28px); margin: 0; min-height: 0;
  display: flex; flex-wrap: nowrap; align-items: baseline; gap: 6px; pointer-events: none;
  padding: 3px 8px; border-radius: 6px; background: color-mix(in srgb, var(--paper-bg) 92%, transparent); color: color-mix(in srgb, var(--paper-ink) 82%, var(--paper-bg)); }
:root[data-theme] .tabm__info > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; font-size: 13px; color: inherit; }
:root[data-theme] .tabm__info .tabm__title { flex: 0 1 auto; color: var(--paper-ink); font-weight: 700; }
:root[data-theme] .tabm__info .tabm__artist { flex: 0 2 auto; }
:root[data-theme] .tabm__info .tabm__status { flex: 0 3 auto; margin: 0; min-height: 0; }
:root[data-theme] .tabm__info .tabm__status:not(:empty)::before { content: "· "; }
/* A phone: under the drawing, as a plain line. */
:root[data-theme] .pedal--tabs:where([data-bp~="max719"]) .tabm__info { position: static; width: auto; margin-top: 6px; padding: 0; background: none; color: var(--ink-mute); flex-wrap: wrap; }
:root[data-theme] .pedal--tabs:where([data-bp~="max719"]) .tabm__info .tabm__title { color: var(--ink); }
/* The busiest calendar days in the light looks: the day's number readable on the deep green (walnut's is dark, aluminium's mid). */
:root[data-theme="walnut"] .cal__cell.is-l3 { color: #fff; }
:root[data-theme="aluminium"] .cal__cell.is-l3 { color: #000; }

/* ══ THE ACCOUNT MENU, SIMPLER (21 Oct): the guitar section is one row per thing (name left, control right, small buttons), and
   what the connection has to say (a quiet input, headphones before Monitor) sits under it instead of on the page. ══ */
:root[data-theme] .usermenu__panel .rack { gap: 0; }
:root[data-theme] .usermenu__panel .rack__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0 var(--g8); border: 1px solid var(--line); border-radius: 8px; background: none; box-shadow: none; }
:root[data-theme] .usermenu__panel .rack__sep { display: none; }
:root[data-theme] .usermenu__panel .rack__unit { display: grid;  align-items: center; column-gap: var(--g8);  border-top: 1px solid var(--line); }
:root[data-theme] .usermenu__panel .rack__unit:first-child { border-top: 0; }
.usermenu__panel .rack__unit[hidden] { display: none; }
:root[data-theme] .usermenu__panel .rig__label { font: 600 13px/1 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); }
:root[data-theme] .usermenu__panel .rack__unit > :not(.rig__label) { justify-self: end; }
:root[data-theme] .usermenu__panel .rack__ctl { display: flex; gap: 6px; align-items: center; }
:root[data-theme] .usermenu__panel :is(.btn, .rigtoggle) { min-height: 26px; height: 26px; padding: 0 10px; font-size: 11px; }
:root[data-theme] .usermenu__panel .rack__unit .picker__btn { min-height: 28px; height: 28px; }
:root[data-theme] .usermenu__panel .vu { width: 64px; }
:root[data-theme] .usermenu__panel .knobs { gap: var(--g8); }
.rack__notes { display: grid; gap: 6px; margin-top: var(--g8); }
:root[data-theme] .rack__notes > * { margin: 0; font: 500 13px/1.4 var(--sans); color: var(--ink-body); max-width: none; }
.rack__notes > .status:empty { display: none; }
:root[data-theme] .rack__notes .feedbacknote strong { color: var(--ok); }
:root[data-theme] .usermenu__panel .themeswitch { display: block; justify-self: stretch; min-width: 0; }
:root[data-theme] .usermenu__panel .themerow { flex-wrap: wrap; overflow: visible; }
:root[data-theme] .usermenu__panel > * { min-width: 0; }
:root[data-theme] .usermenu__panel .bubprefs .rack__unit { grid-template-columns: 130px minmax(0, 1fr); }
:root[data-theme] .usermenu__panel .bubprefs .rig__slider { width: 120px; }
:root[data-theme] .usermenu__btn.is-warn .usermenu__dot { background: var(--ok); box-shadow: 0 0 6px var(--ok); opacity: 1; }

/* The Fretboard's settings, narrower (21 Oct): the side column 216 px, the box 260 px; rows name · switch · value packed tighter. */
:root[data-theme] .is-fretbar.has-side:not(.is-sideoff) .fb[data-colhost] { grid-template-columns: minmax(0, 1fr) 216px; }
:root[data-theme] .is-fretbar.is-menusopen.has-side:not(.is-sideoff) .fb[data-colhost] { grid-template-columns: 236px minmax(0, 1fr) 216px; }
:root[data-theme] [data-pedal="fret"] .pedal__headctl { width: 260px; }
:root[data-theme] [data-pedal="fret"].has-side .pedal__headctl { width: auto; }
:root[data-theme] [data-pedal="fret"] .pedal__headctl :is(.flip, .knob, .rocker, .rset__row),
:root[data-theme] [data-pedal="fret"].has-side .mcol--right .pedal__headctl :is(.flip, .knob, .rocker) { grid-template-columns: minmax(0, 1fr) 62px 58px; column-gap: 6px; }
:root[data-theme] [data-pedal="fret"] .pedal__headctl :is(.flip__name, .knob__name) { font-size: 13px; }

/* ══ METRONOME, 21 Oct: the Groove menu on the title line's left, the settings box smaller (it scrolls instead of growing). ══ */
:root[data-theme] [data-pedal="metronome"] .pedal__headctl { max-height: min(56vh, 380px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
:root[data-theme] [data-pedal="metronome"].has-side .mcol--right { max-height: calc(var(--dial) + 34px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
:root[data-theme] [data-pedal="metronome"] .pedal__headctl :is(.flip, .knob, .rocker, .rset__row) { min-height: 32px; }
:root[data-theme] [data-pedal="metronome"] > .mborder .tcbar__unit { display: flex; align-items: center; }
.mborder:has(.picker__pop:not([hidden])) { z-index: 50; }   /* the Groove menu opens over the settings box */
:root[data-theme] [data-pedal="metronome"] > .mborder [data-groovepick] > .picker__btn { height: 28px; min-height: 0; padding: 0 22px 0 8px; }
:root[data-theme] [data-pedal="metronome"] > .mborder [data-groovepick] .picker__face { gap: 1px; }
:root[data-theme] [data-pedal="metronome"] > .mborder [data-groovepick] .picker__title { font-size: 9px; line-height: 1; }
:root[data-theme] [data-pedal="metronome"] > .mborder [data-groovepick] .picker__cur { font-size: 11px; line-height: 1.15; }
/* The bottom edge of the Metronome and Routines: drag it up to make the module shorter (ui/modsize.js). */
.modsize { position: absolute; z-index: 6; left: 50%; bottom: 0; width: 72px; height: 12px; margin-left: -36px; cursor: ns-resize; touch-action: none; border-radius: 6px; }
.modsize::after { content: ""; position: absolute; left: 22px; right: 22px; top: 4px; height: 4px; border-radius: 2px; background: var(--ink-mute); opacity: .35; transition: opacity .15s; }
.modsize:hover::after, .modsize:focus-visible::after, .is-sizing > .modsize::after { opacity: .9; background: var(--accent); }
.modsize:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.is-sizing { user-select: none; }
/* Shorter Metronome: the beat view shrinks with --msize; the dial's ring half as much (--msoft) while its buttons and words
   keep their size, so they stay easy to press; the knobs and the timing bar stay as they are. */
:root[data-theme] [data-pedal="metronome"][data-zoom] .met .beatstage { zoom: var(--msize); }
[data-pedal="metronome"][data-zoom] { --dial: calc(281px * var(--msoft)); }
[data-pedal="metronome"][data-zoom]:where([data-bp~="max719"]) { --dial: calc(min(255px, calc(var(--mw, 100vw) - 76px)) * var(--msoft)); }
/* The smaller ring's big numbers a step down the type scale, so the BPM and the 4/4 keep clear of TAP and Start. */
:root[data-theme] [data-pedal="metronome"][data-small] .mdev .mdial__screen .tempo .tcbpm__box input.tcbpm.input { height: 44px; font-size: 34px; line-height: 44px; }
:root[data-theme] [data-pedal="metronome"][data-small] .mdev .mdial__screen .mdial__meter .picker > .picker__btn .picker__cur { font-size: 26px; }
/* Routines' undo, redo, save and play on the title line, right, before the gear (columns.js): chips the title line's size;
   play is ▶ (■ while the routine runs), its words kept for screen readers. */
:root[data-theme] #board .is-3col .mgear__lead > .mcol__acts--head { flex-wrap: nowrap; gap: 5px; }
:root[data-theme] #board .is-3col .mcol__acts--head .rrow__hist { display: flex; gap: 3px; }
:root[data-theme] #board .is-3col .mcol__acts--head .chip { height: var(--chip); min-height: var(--chip); padding: 0 8px; font: 700 11px/1 var(--sans); border-radius: 5px; }
:root[data-theme] #board .is-3col .mcol__acts--head .rrow__hist .chip { width: var(--chip); min-width: var(--chip); padding: 0; justify-content: center; }
:root[data-theme] #board .is-3col .mcol__acts--head .rrow__hist .rrow__word { display: none; }
:root[data-theme] #board .is-3col .mcol__acts--head .transport { position: relative; width: calc(var(--chip) + 6px); min-width: 0; height: var(--chip); min-height: var(--chip); padding: 0; margin: 0; justify-content: center; border-radius: 5px; }
:root[data-theme] #board .is-3col .mcol__acts--head .transport .transport__led { display: none; }
:root[data-theme] #board .is-3col .mcol__acts--head .transport [data-runroutinelabel] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:root[data-theme] #board .is-3col .mcol__acts--head .transport::before { content: "▶"; font: 700 10px/1 var(--sans); }
:root[data-theme] #board .is-3col .mcol__acts--head .transport[aria-pressed="true"]::before { content: "■"; color: var(--good); }
/* Shorter Routines: the tempo ladder shrinks with --msize, the loops half as much (--msoft); the routine menu and the line under the loops stay. */
:root[data-theme] [data-card="routines"][data-zoom] .mcol--mid > [data-loops] { zoom: max(.6, var(--msize)); }   /* shrinks with the corner button (words stay readable at 60%) */   /* a loop being edited stays as big as it was: no jump back to full size */

/* ══ THE METRONOME'S SOUND, COMPACT (21 Oct, evening): in its settings a one-line row, Sound at the left and the sound
   at the right, as tall as the other rows; its menu small chips in three short rows. ══ */
:root[data-theme] [data-pedal="metronome"] [data-voicepick] { display: block; width: 100%; max-width: none; }
:root[data-theme] [data-pedal="metronome"] [data-voicepick] > .picker__btn {
  width: 100%; max-width: none; min-height: 30px; height: 30px; padding: 0 6px 0 0; gap: 8px;
  border: 0; background: transparent; box-shadow: none;
}
:root[data-theme] [data-pedal="metronome"] [data-voicepick] > .picker__btn .picker__face { flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; }
:root[data-theme] [data-pedal="metronome"] [data-voicepick] > .picker__btn .picker__title { font: 600 13px/1 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); }
:root[data-theme] [data-pedal="metronome"] [data-voicepick] > .picker__btn .picker__cur { font: 700 11px/1 var(--sans); color: var(--accent); text-align: right; }
:root[data-theme] [data-pedal="metronome"] [data-voicepick] > .picker__btn[aria-expanded="true"] .picker__cur { text-decoration: underline; text-underline-offset: 3px; }
:root[data-theme] [data-voicepick] > .picker__pop { width: 344px; max-width: calc(100vw - 16px); gap: 6px; padding: 8px; }
:root[data-theme] [data-voicepick] .picker__group { gap: 3px; }
:root[data-theme] [data-voicepick] .picker__glabel { font-size: 10px; }
:root[data-theme] [data-voicepick] .picker__row { gap: 3px; }
:root[data-theme] [data-voicepick] .picker__opt--text { min-height: 24px; height: 24px; padding: 0 8px; justify-content: center; }
:root[data-theme] [data-voicepick] .picker__olabel { font: 600 11px/1 var(--sans); }

/* ══ THE METRONOME AS A LOW BAR (data-bar: dragged short, ui/modsize.js) — the dial, 150 px, beside its beats; the
   Offset/Spread/Pocket line folded away and the rush/drag bar thinner; the dial's numbers a step down again and its
   buttons kept at 24 px or more. A phone puts the dial beside the beats too, instead of above them. ══ */
[data-pedal="metronome"][data-bar] { --dial: 150px; }
[data-pedal="metronome"][data-bar]:where([data-bp~="max719"]) { --dial: 136px; }
:root[data-theme] [data-pedal="metronome"][data-bar] .met .tbar__stats { display: none; }
:root[data-theme] [data-pedal="metronome"][data-bar] .met .beatrow > .tline { height: auto; padding: 0; gap: 0; margin-top: 4px; }
:root[data-theme] [data-pedal="metronome"][data-bar] .met .beatrow > .tline .tbar--line { flex: 0 0 22px; height: 22px; }
:root[data-theme] [data-pedal="metronome"][data-bar] .mdev .mdial__screen .tempo .tcbpm__box input.tcbpm.input { height: 30px; font-size: 26px; line-height: 30px; }
:root[data-theme] [data-pedal="metronome"][data-bar] .mdev .mdial__screen .mdial__meter .picker > .picker__btn .picker__cur { font-size: 21px; }
:root[data-theme] [data-pedal="metronome"][data-bar] .mdev .mdial__screen .picker > .picker__btn .picker__cur { font-size: 11px; }
:root[data-theme] #board [data-pedal="metronome"][data-bar] .mdev .mdial__step .tstep { width: 24px; height: 24px; min-height: 24px; font-size: 17px; }
:root[data-theme] #board [data-pedal="metronome"][data-bar] .mdev .mdial__key :is(.tap, .transport) { width: 36px; height: 24px; }
:root[data-theme] #board [data-pedal="metronome"][data-bar] .mdev .mdial__key .tap { font-size: 10px; }
:root[data-theme] [data-pedal="metronome"][data-bar] .mdev .mdial__name { display: none; }   /* the tempo's name gives its line to the 4/4 */
:root[data-theme] [data-pedal="metronome"][data-bar].has-side .mcol--right { max-height: calc(var(--dial) + 4px); }
/* A phone: the dial beside the beats, the Routines switch and the knobs in their own row under both; the ring too small for
   − and + (drag the ring or the number instead). */
:root[data-theme] [data-pedal="metronome"][data-bar]:where([data-bp~="max719"]) .met[data-colhost] {
  display: grid; grid-template-columns: calc(var(--dial) + 4px) minmax(0, 1fr); grid-template-areas: "dial beats" "knobs knobs"; column-gap: var(--g8); row-gap: 6px; align-items: center;
}
:root[data-theme] [data-pedal="metronome"][data-bar]:where([data-bp~="max719"]) .met .mcol--mid { display: contents; }
:root[data-theme] [data-pedal="metronome"][data-bar]:where([data-bp~="max719"]) .met .mcol--left { grid-area: dial; }
:root[data-theme] [data-pedal="metronome"][data-bar]:where([data-bp~="max719"]) .met .beatrow { grid-area: beats; min-width: 0; margin: 0; }
:root[data-theme] #board [data-pedal="metronome"][data-bar]:where([data-bp~="max719"]) .mdev .mdial__step { display: none; }
.tabm__canvas:has(> .tabm__at > .tabm__loading) { min-height: 180px; }   /* the song's place held while it opens and draws */
/* The tour's card: one place (docked, as lessons are) and one height for every step, so only its words change. */
body[data-teaching="tour"] .teach__say { min-height: 236px; }
/* The bar's smaller ring: its lowest and highest numbers would sit under TAP and Start. */
:root[data-theme] [data-pedal="metronome"][data-bar] .mdial__num:is([data-setbpm="40"], [data-setbpm="400"]),
:root[data-theme] [data-pedal="metronome"][data-bar] .mdial__num:is([data-setbpm="40"], [data-setbpm="400"]) > * { display: none; }   /* the children too: WebKit still measures them */
:root[data-theme] .has-side .mcol--right :focus-visible { outline-offset: -2px; }   /* the settings column scrolls: its rings inside, unclipped */

/* The Metronome's info line at the left of its knobs' row (21 Oct, late), as a small dark tag; nothing when it has nothing to say. */
body.is-tabplaying .cheer { display: none; }   /* and gone at once if he was up when the song started */

/* The Pro safety net (ui/paywall.js, 22 Oct): a subscription that lapses while the app is already open, or a
   stale cached copy. One calm, full-screen notice over everything, linking to /join — reuses .card__say,
   .acct__note and .btn so it never needs a second design language. */
/* ══ PRO NOTICE (5 Nov 2026): Bub, what Pro opens, and both plans side by side (Monthly, Lifetime). Theme colours only. ══ */
#pfg-paywall { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 16px; overflow-y: auto;
  background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  animation: pfgPayFade .18s ease-out; }
#pfg-paywall .pfg-paywall__card { position: relative; width: min(27rem, 100%); display: grid; justify-items: center; gap: 10px; text-align: center;
  padding: 26px 22px 18px; border-radius: 20px; color: var(--ink-body);
  background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--accent) 16%, var(--surface)), var(--surface) 62%);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  box-shadow: 0 30px 80px -20px rgb(0 0 0 / .75), 0 0 0 1px rgb(255 255 255 / .03) inset; animation: pfgPayPop .26s cubic-bezier(.2, .9, .3, 1.2); }
#pfg-paywall .pfg-paywall__x { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%; border: 0; cursor: pointer;
  background: transparent; color: var(--ink-mute); font: 400 22px/1 system-ui, sans-serif; }
#pfg-paywall .pfg-paywall__x:hover { color: var(--ink); background: var(--surface-2); }
#pfg-paywall .pfg-paywall__bub { width: 84px; height: 84px; margin-top: -2px; filter: drop-shadow(0 8px 18px rgb(0 0 0 / .45)); animation: pfgPayHop 2.6s ease-in-out infinite; }
#pfg-paywall .pfg-paywall__kicker { font: 800 11px/1 "Barlow Condensed", Inter, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
#pfg-paywall .pfg-paywall__title { margin: 0; color: var(--ink); font: 800 clamp(22px, 5vw, 27px)/1.1 "Barlow Condensed", Inter, sans-serif; text-transform: uppercase; letter-spacing: .02em; }
#pfg-paywall .pfg-paywall__list { list-style: none; margin: 4px 0 6px; padding: 0; display: grid; gap: 6px; text-align: left; font-size: 14px; }
#pfg-paywall .pfg-paywall__list li { position: relative; padding-left: 24px; }
#pfg-paywall .pfg-paywall__list li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center;
  font: 800 11px/1 Inter, sans-serif; color: var(--accent-ink); background: var(--good); }
#pfg-paywall .pfg-paywall__plans { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#pfg-paywall .pfg-paywall__plan { position: relative; display: grid; gap: 3px; padding: 14px 10px 12px; border-radius: 14px; text-decoration: none; color: var(--ink-body);
  background: var(--surface-2); border: 1.5px solid var(--line-2); transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
#pfg-paywall .pfg-paywall__plan:hover { transform: translateY(-2px); border-color: var(--accent); }
#pfg-paywall .pfg-paywall__plan:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
#pfg-paywall .pfg-paywall__plan.is-best { border-color: var(--accent); box-shadow: 0 10px 28px -10px color-mix(in srgb, var(--accent) 70%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-2)); }
#pfg-paywall .pfg-paywall__tag { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 3px 8px; border-radius: 999px;
  font: 800 10px/1 "Barlow Condensed", Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); background: var(--accent); }
#pfg-paywall .pfg-paywall__pname { font: 800 13px/1 "Barlow Condensed", Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); }
#pfg-paywall .pfg-paywall__price { font: 800 28px/1.05 "Barlow Condensed", Inter, sans-serif; color: var(--ink); font-variant-numeric: tabular-nums; }
#pfg-paywall .pfg-paywall__price small { font-size: 13px; font-weight: 700; color: var(--ink-mute); }
#pfg-paywall .pfg-paywall__pnote { font-size: 12px; color: var(--ink-mute); }
#pfg-paywall .pfg-paywall__later { margin-top: 2px; padding: 8px 14px; border: 0; border-radius: 999px; cursor: pointer; background: transparent; color: var(--ink-mute); font: 600 13px/1 Inter, sans-serif; }
#pfg-paywall .pfg-paywall__later:hover { color: var(--ink); }
#pfg-paywall button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (max-width: 380px) { #pfg-paywall .pfg-paywall__plans { grid-template-columns: 1fr; } }
@keyframes pfgPayFade { from { opacity: 0; } }
@keyframes pfgPayPop { from { opacity: 0; transform: translateY(12px) scale(.96); } }
@keyframes pfgPayHop { 0%, 100% { transform: none; } 50% { transform: translateY(-5px) rotate(-3deg); } }
@media (prefers-reduced-motion: reduce) { #pfg-paywall, #pfg-paywall .pfg-paywall__card, #pfg-paywall .pfg-paywall__bub { animation: none; } }

/* Locked Pro controls (ui/paywall.js sets html.pfg-free): gray and dimmed with a small lock, still clickable so a press opens
   the notice. Only colour, opacity and a badge change — never a control's size or position. */
html.pfg-free :is([data-pro], .tabm__file, [data-addloop], [data-curveknob]) { position: relative; filter: grayscale(1) !important; opacity: .5; }
html.pfg-free :is([data-pro], .tabm__file, [data-addloop], [data-curveknob]):hover { opacity: .75; }
html.pfg-free :is([data-pro], .tabm__file, [data-addloop])::after { content: ""; position: absolute; top: 3px; right: 3px; width: 11px; height: 11px; pointer-events: none;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23c4ccd6'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1h1zm2 0h6V7a3 3 0 0 0-6 0v3z'/%3E%3C/svg%3E"); }

/* ══ SMOOTHER SIZING (22 Oct): --msize/--msoft are numbers the browser can glide (ui/modsize.js always sets them), so a
   double-click, the arrow keys or letting go settle in 180 ms instead of snapping; while dragging they follow the hand at
   once. The bar's layout change fades in rather than jumping. ══ */
@property --msize { syntax: '<number>'; inherits: true; initial-value: 1; }
@property --msoft { syntax: '<number>'; inherits: true; initial-value: 1; }
:is([data-pedal="metronome"], [data-card="routines"]) { transition: --msize .18s ease-out, --msoft .18s ease-out; }
:is([data-pedal="metronome"], [data-card="routines"]):is(.is-sizing, .is-measuring) { transition: none; }
@keyframes modsize-reshape { from { opacity: .4; } to { opacity: 1; } }
.is-reshaping > :is(.pedal__body, .met__routines) { animation: modsize-reshape .2s ease-out; }
@media (prefers-reduced-motion: reduce) { :is([data-pedal="metronome"], [data-card="routines"]) { transition: none; } .is-reshaping > * { animation: none; } }
/* The rest wheel in the dial's place (drills/presets.js restClock): the same size as the dial, over it, the ring along the
   dial's own ring, the seconds as big as the BPM, the next loop under them. */
.restclock__next { position: relative; max-width: 70%; margin-top: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 11px/1.2 var(--sans); color: var(--ink-mute); }
.restclock:not(.restclock--dial) .restclock__next { display: none; }
:root[data-theme] .mdial > .restclock--dial { left: 0; top: 0; width: 100%; height: 100%; transform: none; z-index: 20; animation: restclock-dial-in .3s ease-out both;
  background: var(--glass-bg, var(--bg)); box-shadow: inset 0 0 0 1px var(--glass-faint, var(--line)); }
:root[data-theme] .mdial > .restclock--dial svg { inset: 4%; width: 92%; height: 92%; }
:root[data-theme] .mdial > .restclock--dial .restclock__track { stroke: var(--glass-faint, var(--line-2)); stroke-width: 3.5; }
:root[data-theme] .mdial > .restclock--dial .restclock__ring { stroke-width: 3.5; }
:root[data-theme] .mdial > .restclock--dial .restclock__num { font: 700 47px/1 var(--display); color: var(--glass-ink, var(--ink)); }
:root[data-theme] [data-pedal="metronome"]:is([data-small], [data-bar]) .mdial > .restclock--dial .restclock__num { font-size: 34px; }
:root[data-theme] .mdial > .restclock--dial .restclock__lbl { margin: 0 0 6px; color: var(--glass-ink, var(--ink-mute)); opacity: .8; }
@keyframes restclock-dial-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }

/* ══ ONE MENU FONT (22 Oct): the menus of Routines, the Fretboard and Tabs in the type of the title line's "+ Save preset" —
   the value 11 px, 700, the sans face; the small title above it 9 px as the Groove menu's; two-line menus 34 px high, the
   Tabs row's one-line menus 28 px. ══ */
:root[data-theme] #board :is([data-card="routines"], [data-pedal="fret"], [data-card="tabs"]) .picker > .picker__btn .picker__cur { font: 700 11px/1.2 var(--sans); letter-spacing: 0; }
:root[data-theme] #board :is([data-card="routines"], [data-pedal="fret"], [data-card="tabs"]) .picker > .picker__btn .picker__title { font-size: 9px; }
:root[data-theme] #board :is([data-card="routines"], [data-pedal="fret"]) .picker > .picker__btn:not(.tabm__ctl *) { min-height: 34px; height: 34px; padding-block: 0; }
:root[data-theme] #board :is([data-card="routines"], [data-pedal="fret"], [data-card="tabs"]) .picker > .picker__btn .picker__face { gap: 3px; }

/* Tabs' song list: your own songs as tiles, and a file to open. */
:root[data-theme] .tabm__acts .chip { height: 28px; min-height: 0; padding: 0 10px; font: 700 11px/1 var(--sans); }

:root[data-theme] #board .pedal--tabs:not(.has-song) .tabm__top [data-songonly] { display: none; }
.tabm__libgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--g13); margin-top: 6px; }
:root[data-theme] .tabm__libitem { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; padding: 7px 10px; text-align: left; cursor: pointer;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface-deep, var(--surface)); color: var(--ink); font: inherit; }
:root[data-theme] .tabm__libitem:hover { border-color: var(--accent); }
:root[data-theme] .tabm__libitem:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.tabm__libitem b { font: 700 13px/1.2 var(--sans); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabm__libitem span { font: 500 11px/1.2 var(--sans); color: var(--ink-mute); }
.tabm__open:not([hidden]) { display: grid; gap: 10px; }
.tabm__libtile { position: relative; min-width: 0; display: grid; }
:root[data-theme] .tabm__libtile .tabm__libitem { padding-right: 34px; }
:root[data-theme] .tabm__libtile .tabm__sdel { position: absolute; top: 50%; right: 4px; width: 26px; height: 26px; transform: translateY(-50%); }
.tabm__songs .tabm__glabel { margin: 0 0 2px; }
/* The bar keeps the display's shape (22 Oct): the beat view as big as the room beside the dial allows (not shrunk with the
   drag), so the boxes, the progress line and the rush/drag bar fill the black glass the way the full-size one does. */
:root[data-theme] [data-pedal="metronome"][data-bar] .met .beatstage { zoom: .55; }
:root[data-theme] [data-pedal="metronome"][data-bar]:where([data-bp~="max719"]) .met .beatstage { zoom: .5; }
:root[data-theme] [data-pedal="metronome"][data-bar]:not([data-bp~="max719"]) .met .mcol--mid { align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; }

/* ══ PROGRESS, SHORTER (22 Oct): the strip, then three compartments of one height that scroll on their own (the calendar,
   the day picked, the rest), so the module is about a third of its old height. ══ */
:root[data-theme] .pdash__comp { height: 398px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; display: flex; flex-direction: column; gap: var(--g8); min-width: 0; border-radius: 12px; }
:root[data-theme] .pdash__comp:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
:root[data-theme] .pdash__comp > .pdash__card { min-height: 0; flex: none; }
:root[data-theme] .pdash__comp .cal__cell:focus-visible { outline-offset: -2px; }   /* the compartment scrolls: rings inside, unclipped */
:root[data-theme] .pdash__grid3 > .pdash__comp > .pdash__card { min-height: 0; }
:root[data-theme] .pdash__sub { display: block; margin-top: 3px; font: 500 11px/1.3 var(--sans); color: var(--ink-mute); max-width: 22ch; }
:root[data-theme] .pdash__today .pdash__sub { max-width: none; }
:where(.pedal[data-bp~="max900"]) .pdash__comp { height: 240px; }

/* ══ ROOM ON A PHONE (22 Oct) ══ */
/* The Fretboard's chips (Detect · Chord · Scale, the tuner, record and play) fit on one line: a narrower tuner meter. */
:root[data-theme] #board [data-pedal="fret"]:where([data-bp~="max719"]) > .mborder { gap: 6px; }
:root[data-theme] #board [data-pedal="fret"]:where([data-bp~="max719"]) > .mborder .fbtn__meter { width: 96px; min-width: 96px; }
:root[data-theme] #board [data-pedal="fret"]:where([data-bp~="max420"]) > .mborder .fbtn__meter { width: 84px; min-width: 84px; }
/* Routines: the routine menu, undo, redo, + and play on one row instead of two. */
:root[data-theme] #board [data-card="routines"]:where([data-bp~="max719"]) .loops__toolbar.rrow { flex-wrap: nowrap; gap: 6px; }
:root[data-theme] #board [data-card="routines"]:where([data-bp~="max719"]) .loops__toolbar.rrow > :is(.rrow__hist, .rrow__save) { order: 2; }
:root[data-theme] #board [data-card="routines"]:where([data-bp~="max719"]) .loops__toolbar.rrow > .rrow__pick { flex: 1 1 0; min-width: 96px; width: auto; }
/* the toolbar's ::after is a line break for the wrapped layout; on one row it would take the whole width */
:root[data-theme] #board [data-card="routines"]:where([data-bp~="max719"]) .loops__toolbar.rrow::after { display: none; }
:root[data-theme] #board [data-card="routines"]:where([data-bp~="max719"]) .loops__toolbar.rrow > .rrow__pick > .picker--titled { flex: 1 1 auto; min-width: 0; }
:root[data-theme] #board [data-card="routines"]:where([data-bp~="max719"]) .loops__toolbar.rrow > .rrow__pick > .picker--titled > .picker__btn { width: 100%; max-width: 100%; min-width: 0; }
:root[data-theme] #board [data-card="routines"]:where([data-bp~="max719"]) .loops__toolbar > :is(.rrow__hist, .rrow__save, .transport) { flex: none; }
/* Tabs with no song open: its gear back on the title line, not a row of its own. */
:root[data-theme] .pedal--tabs:not(.has-song):where([data-bp~="max719"]) .tabm__top { position: absolute; }

/* ══ ICONS AND THE TABS ROW (23 Oct) ══
   One set of line icons (ui/icons.js): in front of each settings row's name, and on the Tabs row's Songs and Instrument. */
.gbicon, .seticon { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
:root[data-theme] .seticon { display: inline-block; width: 14px; height: 14px; margin-right: 7px; vertical-align: -2px; color: var(--ink-mute); }
:root[data-theme] .picker__title .seticon { margin-right: 6px; }
.picker__icon { display: inline-flex; align-items: center; flex: none; }
.picker__icon .gbicon { width: 15px; height: 15px; }
.picker__foot .gbicon { width: 14px; height: 14px; margin-right: 5px; }

/* Tabs' settings: rows like the Metronome's (name · sideways switch · value), the two menus as one-line rows. */
:root[data-theme] .pedal--tabs .tabm__set { width: 360px; }
:root[data-theme] .pedal--tabs .tabm__set :is(.flip, .knob, .rset__row) { min-height: 34px; grid-template-columns: minmax(0, 1fr) 96px 72px; }
:root[data-theme] .pedal--tabs .tabm__set .flip__val { font-size: 11px; font-weight: 700; }
:root[data-theme] #board .pedal--tabs .tabm__set .tabm__setpick { display: block; width: 100%; max-width: none; }
:root[data-theme] #board .pedal--tabs .tabm__set .tabm__setpick > .picker__btn { width: 100%; max-width: none;   padding: 0; gap: 8px; border: 0; background: transparent; box-shadow: none; }
:root[data-theme] #board .pedal--tabs .tabm__set .tabm__setpick > .picker__btn .picker__face { flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
:root[data-theme] #board .pedal--tabs .tabm__set .tabm__setpick > .picker__btn .picker__title {  letter-spacing: 0; text-transform: none;  }
:root[data-theme] #board .pedal--tabs .tabm__set .tabm__setpick > .picker__btn .picker__cur {   text-align: right; }
:root[data-theme] #board .pedal--tabs .tabm__set .tabm__setpick > .picker__btn[aria-expanded="true"] .picker__cur { text-decoration: underline; text-underline-offset: 3px; }
:root[data-theme] #board .pedal--tabs .tabm__set .tabm__setpick > .picker__pop { right: 0; left: auto !important; }

/* The row: Songs · Instrument · Section · Speed · ‹ ▶ › · Transpose. Songs and Instrument are small buttons led by their icon. */
:root[data-theme] .tabm__ctl :is(.tabm__songspick, .tabm__trackpick) > .picker__btn { gap: 5px; padding: 0 7px; }
:root[data-theme] .tabm__ctl .tabm__songspick > .picker__btn .picker__cur { font-size: 11px; font-weight: 700; }
:root[data-theme] .tabm__songspick > .picker__pop { min-width: 260px; }
:root[data-theme] .tabm__songspick .picker__foot { padding-top: 6px; border-top: 1px solid var(--line); }
:root[data-theme] .tabm__songspick .picker__foot .chip { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; font: 700 11px/1 var(--sans); cursor: pointer; }

/* Transpose: one button. Off: "Transpose Off" in red. On: green, ▾ the semitones ▴ (the number turns it off again). */

/* The info line: one thin line under the drawing, not over it. */
:root[data-theme] .pedal--tabs .tabm__info { position: static; width: auto; max-width: none; height: 18px; margin: 4px 2px 0; padding: 0; background: none; color: var(--ink-mute); flex-wrap: nowrap; pointer-events: auto; }
:root[data-theme] .pedal--tabs .tabm__info > * { font-size: 11px; line-height: 18px; }
:root[data-theme] .pedal--tabs .tabm__info .tabm__title { color: var(--ink); }
/* With an icon in front, each row's name stays on one line: the boxes are a little wider for it. */
:root[data-theme] #board :is(.pedal__headctl, .rset) :is(.flip__name, .knob__name, .rset__name):has(> .seticon) { white-space: nowrap; }
:root[data-theme] #board [data-pedal="metronome"]:not([data-bp~="max719"]) .pedal__headctl { width: 372px; }
:root[data-theme] #board [data-pedal="fret"]:not([data-bp~="max719"]) .pedal__headctl { width: 290px; }
:root[data-theme] #board [data-card="routines"]:not([data-bp~="max719"]) .rrow > .rset { width: 384px; }
:root[data-theme] .pedal--tabs .tabm__song { grid-template-columns: minmax(0, 1fr); }   /* the info line's words never widen the module */
:root[data-theme] .pedal--tabs .tabm__info { min-width: 0; overflow: hidden; }
/* A phone: the row in two lines. Songs is its icon, Section and Speed their values only, the part's name kept short. */
:root[data-theme] .pedal--tabs:where([data-bp~="max719"]) .tabm__ctl { gap: 6px; }
:root[data-theme] .pedal--tabs:where([data-bp~="max719"]) .tabm__songspick > .picker__btn .picker__cur { display: none; }
:root[data-theme] .pedal--tabs:where([data-bp~="max719"]) .tabm__ctl .picker > .picker__btn .picker__title { display: none; }
:root[data-theme] .pedal--tabs:where([data-bp~="max719"]) .tabm__ctl .picker > .picker__btn { padding: 0 6px; gap: 4px; }
:root[data-theme] #board .pedal--tabs:where([data-bp~="max719"]) .tabm__ctl .picker,
:root[data-theme] #board .pedal--tabs:where([data-bp~="max719"]) .tabm__ctl .picker > .picker__btn { width: auto; min-width: 0; }

/* ══ THE FRAME (23 Oct, MODULE-FRAME-PLAN.md): every module is four bands. The title line and the control line are one
   height (--fr-h), the body takes what is left, the info line is one thin line. Buttons are one height in three widths:
   .fb1 small (a title over its value), .fb2 wide, .fb3 square (an icon). A module joins with data-frame (ui/frame.js). ══ */
:root { --fr-h: 22px; --fr-line: 26px; --fr-top: 8px; --fr-b1: 64px; --fr-b2: 124px; --fr-gap: 4px;  }   /* true to the owner's drawing: buttons a little shorter than their line */
:root[data-theme] #board > .pedal[data-frame] { padding: calc(var(--fr-top) + var(--fr-line) + 6px) var(--mpad) 6px; }
/* Line 1: the slots and ▲▼ sit on it, the name in its middle. */
:root[data-theme] #board > .pedal[data-frame] > .pedal__head h3 { top: calc(var(--fr-top) + var(--fr-line) / 2); }
:root[data-theme] #board > .pedal[data-frame] > :is(.mborder, .mgear, .modmove) { top: calc(var(--fr-top) + (var(--fr-line) - var(--fr-h)) / 2); height: var(--fr-h); }
:root[data-theme] #board > .pedal[data-frame] > .mborder { gap: var(--fr-gap); }
:root[data-theme] #board > .pedal[data-frame] > .mgear { gap: var(--fr-gap);  }
:root[data-theme] #board > .pedal[data-frame] > .mgear .mgear__lead { gap: var(--fr-gap); }
/* ▲▼: two square buttons. */
:root[data-theme] #board > .pedal[data-frame] > .modmove {  gap: 0; border-radius: 6px; }
/* Line 2 and the info line: a left and a right slot. */
.mline { display: flex; align-items: center; justify-content: space-between; gap: var(--fr-gap); min-width: 0; }
.mline__l, .mline__r { display: flex; align-items: center; gap: var(--fr-gap); min-width: 0; }
.mline__r { margin-left: auto; }
:root[data-theme] #board > .pedal[data-frame] > .mline--2 {  margin: 0 0 6px; }
:root[data-theme] #board > .pedal[data-frame] > .mline--2:not(:has(.mline__l > *, .mline__r > *)) { display: none; }
:root[data-theme] #board > .pedal[data-frame] > .mline--4 { height: var(--fr-info); margin: 4px 0 0;  font: 500 11px/1 var(--sans); color: var(--ink-mute); overflow: hidden; }
:root[data-theme] #board > .pedal[data-frame] > .mline--4 .mline__l { flex: 1 1 auto; overflow: hidden; white-space: nowrap; }
:root[data-theme] #board > .pedal[data-frame] > .mline--4 :is(.minfo, .rinfo) { margin: 0; min-height: 0; height: var(--fr-info); align-items: center; overflow: hidden; }
:root[data-theme] #board > .pedal[data-frame] > .mline--4 :is(.minfo, .rinfo) .pedal__status { font: 500 11px/1 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root[data-theme] #board > .pedal[data-frame] > .mline--4 .take__top { position: static; margin: 0; flex: none; }
:root[data-theme] #board > .pedal[data-frame] .is-3col .minfo:has([data-status]:empty) { display: flex; }

/* The buttons. Every control on a line is one of the three: one height, its width by size, rounded the same. */
:root[data-theme] #board .pedal[data-frame] :is(.fb1, .fb2, .fb3) { flex: none; height: var(--fr-h); min-height: 0; margin: 0; padding: 0; }
:root[data-theme] #board .pedal[data-frame] .fb1 { width: var(--fr-b1); }
:root[data-theme] #board .pedal[data-frame] .fb2 { width: var(--fr-b2); }
:root[data-theme] #board .pedal[data-frame] .fb3, :root[data-theme] #board > .pedal[data-frame] > .mgear .pedal__gear { width: var(--fr-h); height: var(--fr-h); }
/* The face they share: a soft panel, a small title over the value. */
:root[data-theme] #board .pedal[data-frame] :is(.fb1, .fb2) :is(.picker, .picker > .picker__btn),
:root[data-theme] #board .pedal[data-frame] :is(.fb1, .fb2) > .rocker {
  width: 100%; max-width: none; min-width: 0; height: var(--fr-h); min-height: 0;
}
:root[data-theme] #board .pedal[data-frame] :is(.fb1, .fb2):is(.chip, button, .knob, .curveknob) { max-width: none; min-width: 0; }
:root[data-theme] #board .pedal[data-frame] :is(.fb1, .fb2) .picker > .picker__btn,
:root[data-theme] #board .pedal[data-frame] :is(.fb1, .fb2):is(.chip, button),
:root[data-theme] #board .pedal[data-frame] :is(.fb1, .fb2) > .rocker,
:root[data-theme] #board .pedal[data-frame] :is(.fb1, .fb2):is(.knob, .curveknob),
:root[data-theme] #board > .pedal[data-frame] > .mgear .pedal__gear, :root[data-theme] #board > .pedal[data-frame] > .modmove {
  border: 1px solid var(--ctl-edge); border-radius: 6px; background: var(--ctl-bg); box-shadow: none;
}
:root[data-theme] #board .pedal[data-frame] :is(.fb1, .fb2) .picker > .picker__btn { padding: 0 5px; gap: 3px; justify-content: space-between; }
:root[data-theme] #board .pedal[data-frame] :is(.fb1, .fb2) .picker > .picker__btn .picker__face { flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; }
:root[data-theme] #board .pedal[data-frame] :is(.fb1, .fb2) .picker__title { font: 700 8px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-mute); }
:root[data-theme] #board .pedal[data-frame] :is(.fb1, .fb2) .picker__cur { font: 700 10px/1.1 var(--sans); color: var(--ink); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root[data-theme] #board .pedal[data-frame] :is(.fb1, .fb2):is(.chip, button) { display: inline-flex; align-items: center; justify-content: center; gap: 3px; font: 700 10px/1 var(--sans); white-space: nowrap; color: var(--ink); }
/* A switch as a button: its name over On / Off, the whole button the switch (the plate stretched over it, unseen). */
:root[data-theme] #board .pedal[data-frame] :is(.fb1, .fb2) > .rocker { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; padding: 0 5px; }
:root[data-theme] #board .pedal[data-frame] :is(.fb1, .fb2) > .rocker .rocker__plate { position: absolute; inset: 0; width: auto; height: auto; margin: 0; transform: none; opacity: 0; cursor: pointer; z-index: 1; }
:root[data-theme] #board .pedal[data-frame] :is(.fb1, .fb2) > .rocker .rocker__name { position: static; order: 0; font: 700 8px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-body); }
:root[data-theme] #board .pedal[data-frame] :is(.fb1, .fb2) > .rocker .rocker__state { display: block; position: static; font: 700 10px/1 var(--sans); color: var(--ink-mute); }
:root[data-theme] #board .pedal[data-frame] :is(.fb1, .fb2) > .rocker:has([aria-checked="true"]) { border-color: color-mix(in srgb, var(--good) 55%, var(--ctl-edge)); background: color-mix(in srgb, var(--good) 12%, var(--ctl-bg)); }
:root[data-theme] #board .pedal[data-frame] :is(.fb1, .fb2) > .rocker:has([aria-checked="true"]) .rocker__state { color: color-mix(in srgb, var(--good) 62%, var(--ink)); }
:root[data-theme] #board .pedal[data-frame] :is(.fb1, .fb2) > .rocker:has(:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }
/* A knob as a button: its small dial at the left, the name over the value. */
:root[data-theme] #board .pedal[data-frame] :is(.fb1, .fb2):is(.knob, .curveknob) .knob__name {   position: static; padding: 0; margin: 0; background: none; border: 0; font: 700 8px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root[data-theme] #board .pedal[data-frame] :is(.fb1, .fb2):is(.knob, .curveknob) .knob__val {   position: static; transform: none; margin: 0; text-align: left; font: 700 10px/1 var(--sans); color: var(--accent); white-space: nowrap; }
/* The Metronome's control line holds the routine's knobs: no row of its own inside the display any more. */
/* A choice of two or three (Detect · Chord · Scale, Lane · Grid · List): button 1s joined into one. Concert A: square ones. */
:root[data-theme] #board .pedal[data-frame] .fbseg { display: inline-flex; flex: none; gap: 0; height: var(--fr-h); padding: 0; margin: 0; border: 1px solid var(--ctl-edge); border-radius: 6px; background: var(--ctl-bg); overflow: visible; }
:root[data-theme] #board .pedal[data-frame] .fbseg > .seg, :root[data-theme] #board .pedal[data-frame] .tcbar__unit.fbseg > * { display: inline-flex; gap: 0; height: 100%; border: 0; background: none; padding: 0; margin: 0; }
:root[data-theme] #board .pedal[data-frame] .fbseg button { width: var(--fr-b1); height: 100%; min-height: 0; margin: 0; padding: 0 4px; border: 0; border-radius: 0; background: none; font: 700 10px/1 var(--sans); color: var(--ink-body); }
:root[data-theme] #board .pedal[data-frame] .fbseg button + button { border-left: 1px solid var(--ctl-edge); }
:root[data-theme] #board .pedal[data-frame] .fbseg button:first-child { border-radius: 5px 0 0 5px; }
:root[data-theme] #board .pedal[data-frame] .fbseg button:last-child { border-radius: 0 5px 5px 0; }
:root[data-theme] #board .pedal[data-frame] .fbseg button:is([aria-pressed="true"], [aria-checked="true"]) { background: color-mix(in srgb, var(--accent) 18%, var(--ctl-bg)); color: var(--accent); }
:root[data-theme] #board .pedal[data-frame] .fbseg--sq button {   font-size: 10px; }
:root[data-theme] #board .pedal[data-frame] .fbseg[hidden] { display: none; }
/* The control line wraps to a second row of the same height when its buttons don't fit. */
:root[data-theme] #board > .pedal[data-frame] > .mline--2 { height: auto; min-height: var(--fr-line); align-items: center; }
:root[data-theme] #board > .pedal[data-frame] > .mline--2 > .mline__l { flex-wrap: wrap;  }
/* The Fretboard's tuner as a button 2: the meter is its face. */
:root[data-theme] #board .pedal[data-frame] .tuner.fb2 { display: flex; align-items: center; }
:root[data-theme] #board .pedal[data-frame] .tuner.fb2 > .fbtn, :root[data-theme] #board .pedal[data-frame] .tuner.fb2 .fbtn__meter { flex: 1 1 auto; min-width: 0; width: 100%; height: var(--fr-h); margin: 0; border-radius: 6px; }
:root[data-theme] #board .pedal[data-frame] .tuner.fb2 > .tuner__name { display: none; }
:root[data-theme] #board .pedal[data-frame] .fb__playunit.fb1 .fb__play { width: 100%; height: var(--fr-h); border-radius: 6px; }
:root[data-theme] #board .pedal[data-frame] .mline--4 .fb__now { display: flex; align-items: center; gap: var(--g8); height: var(--fr-info); margin: 0; padding: 0; min-height: 0; background: none; border: 0; font-size: 11px; overflow: hidden; white-space: nowrap; }
:root[data-theme] #board .pedal[data-frame] .mline--4 .fb__now :is(b, span) { font-size: 11px; }
/* A slot sized as a button: the button inside fills it. Square icon buttons: the same panel. */
:root[data-theme] #board .pedal[data-frame] :is(.fb1, .fb2):not(button, .chip) > :is(.chip, button) { width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0 4px; border: 1px solid var(--ctl-edge); border-radius: 6px; background: var(--ctl-bg); font: 700 10px/1 var(--sans); white-space: nowrap; }
:root[data-theme] #board .pedal[data-frame] :is(button, .chip).fb3 { display: inline-grid; place-items: center; padding: 0; margin: 0; border: 1px solid var(--ctl-edge); border-radius: 6px; background: var(--ctl-bg); font: 700 11px/1 var(--sans); color: var(--ink-body); }
:root[data-theme] #board .pedal[data-frame] :is(button, .chip).fb3 .rrow__word, :root[data-theme] #board .pedal[data-frame] .fb3 [data-runroutinelabel] { display: none; }
:root[data-theme] #board .pedal[data-frame] .fb3:disabled { opacity: .4; }
:root[data-theme] #board .pedal[data-frame] .rrow__hist { display: inline-flex; gap: var(--fr-gap); }
:root[data-theme] #board .pedal[data-frame] .mcol__views.fbseg .rview { display: inline-flex; height: 100%; border: 0; background: none; padding: 0; }
:root[data-theme] #board .pedal[data-frame] .mline--4 .rinfo { display: flex; gap: var(--g13); font-size: 11px; }
:root[data-theme] #board .pedal[data-frame] .mline--4 .rinfo * { font-size: 11px; }
:root[data-theme] #board .pedal[data-frame] .rrow__pick.fb2 { display: flex; }
:root[data-theme] #board .pedal[data-frame] .rrow__pick.fb2 > .picker--titled { flex: 1 1 auto; width: 100%; min-width: 0; }
:root[data-theme] #board .pedal[data-frame] .rrow__pick.fb2 > .picker:not(.picker--titled) { flex: 0 0 0; width: 0; min-width: 0; }
/* Tabs in the frame: + Save preset and the gear on the title line's right, Loop at its left; the row is the control line. */
:root[data-theme] #board > .pedal--tabs[data-frame] .tabm__top { top: var(--fr-top); height: var(--fr-h);  gap: var(--fr-gap); }
:root[data-theme] #board > .pedal--tabs[data-frame] .tabm__top .tabm__gear svg { width: 15px; height: 15px; }
:root[data-theme] #board > .pedal--tabs[data-frame] .mline .tabm__row { margin: 0; }
:root[data-theme] #board > .pedal--tabs[data-frame] .mline .tabm__ctl { gap: var(--fr-gap); row-gap: var(--fr-gap); }
:root[data-theme] #board > .pedal--tabs[data-frame] .mline .tabm__ctl .picker > .picker__btn { height: var(--fr-h); min-height: 0; }
:root[data-theme] #board > .pedal--tabs[data-frame] .mline .tabm__go .fb3 {  height: var(--fr-h); }
:root[data-theme] #board > .pedal--tabs[data-frame] .mline--4 .tabm__info { margin: 0; height: var(--fr-info); }
:root[data-theme] #board > .pedal--tabs[data-frame]:not(.has-song) :is(.mline--2, .mline--5) { display: none; }
:root[data-theme] #board > .pedal--tabs[data-frame]:not(.has-song) .mborder { display: none; }
:root[data-theme] #board > .pedal--tabs[data-frame] .tabm__view { margin: 0; }

:root[data-theme] #board > .pedal[data-frame] > .mgear .pedal__gear svg { width: 15px; height: 15px; }
:root[data-theme] #board .pedal[data-frame] .tuner.fb2 .fbtn__off { font-size: 10px; }
:root[data-theme] #board > .pedal--tabs[data-frame] .mline .tabm__ctl .picker > .picker__btn .picker__face { flex-direction: column; align-items: flex-start; gap: 1px; }
:root[data-theme] #board > .pedal--tabs[data-frame] .mline .tabm__ctl .picker > .picker__btn .picker__title { font-size: 8px; }
:root[data-theme] #board .pedal[data-frame] :is(.fb1, .fb2) .picker__caret { flex: none; width: 5px; height: 5px; margin: -2px 0 0; border-width: 0 1.5px 1.5px 0; font-size: 7px; }
:root[data-theme] #board .pedal[data-frame] :is(.fb1, .fb2) .picker__icon .gbicon { width: 12px; height: 12px; }
/* A module outside the columns (Progress) has the same title-line slot at the right. */
:root[data-theme] #board > .pedal[data-frame] > .mgear { position: absolute; z-index: 5; display: flex; align-items: center; }
:root[data-theme] #board > .pedal--progress[data-frame] > .pedal__head .pedal__headctl:empty { display: none; }
:root[data-theme] #board .pedal[data-frame] .mline button.fb1, :root[data-theme] #board .pedal[data-frame] .mline button.fb3 { border: 1px solid var(--ctl-edge); border-radius: 6px; background: var(--ctl-bg); }
:root[data-theme] #board .pedal[data-frame] .mline button.fb1[aria-pressed="true"] { color: var(--accent); }

/* ══ RESIZE, EVERY MODULE (23 Oct): a small button in the bottom-right corner, on the info line's right end. Only the body
   changes: the neck's strings closer, the tab and Progress's compartments shorter, the Metronome down to a strip. ══ */
:root[data-theme] #board > .pedal > .modsize {
  left: auto; right: var(--mpad); bottom: 6px; width: var(--fr-info, 18px); height: var(--fr-info, 18px); margin: 0;
  display: grid; place-items: center; border-radius: 5px; border: 1px solid var(--ctl-edge); background: var(--ctl-bg); color: var(--ink-mute);
}
:root[data-theme] #board > .pedal > .modsize::before, :root[data-theme] #board > .pedal > .modsize::after { display: none; }
:root[data-theme] #board > .pedal > .modsize svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
:root[data-theme] #board > .pedal > .modsize:hover, :root[data-theme] #board > .pedal.is-sizing > .modsize { color: var(--accent); border-color: var(--accent); }
:root[data-theme] #board > .pedal > .modsize:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
:is([data-pedal="fret"], [data-card="tabs"], [data-card="progress"]) { transition: --msize .18s ease-out, --msoft .18s ease-out; }
:is([data-pedal="fret"], [data-card="tabs"], [data-card="progress"]):is(.is-sizing, .is-measuring) { transition: none; }   /* measuring reads each size at once: no glide, or every size reads as the first */
:root[data-theme] #board [data-pedal="fret"][data-zoom] .fb { --fb-row: calc(27px * var(--msize)); --fb-dot: calc(22px * max(.7, var(--msize))); }
:root[data-theme] #board [data-card="tabs"][data-zoom] .tabm__stage { max-height: calc(345px * var(--msize)); overflow: auto; }
:root[data-theme] #board [data-card="progress"][data-zoom] .pdash__comp { height: calc(398px * var(--msize)); }
:root[data-theme] #board [data-card="progress"][data-zoom] .pdash__hero { zoom: max(.6, var(--msoft)); }
/* The Metronome as a strip: the BPM and a light per beat in one line; the dial's ring, the beat view and the rest fold away. */
:root[data-theme] #board [data-pedal="metronome"][data-strip] .mdial > :is(.mdial__scale, .mdial__knob, .mdial__foot, .mdial__save),
:root[data-theme] #board [data-pedal="metronome"][data-strip] .mdial__screen > .mdial__name { display: none !important; }
:root[data-theme] #board [data-pedal="metronome"][data-strip] .mdial {   border-radius: 8px;  display: flex; align-items: center; }
:root[data-theme] #board [data-pedal="metronome"][data-strip] .mdial__screen { position: static; inset: auto; transform: none; display: flex; flex-direction: row; align-items: center; justify-content: flex-start;  width: 100%; height: 100%;  }
:root[data-theme] #board [data-pedal="metronome"][data-strip] .mdial__bpmrow { margin: 0; }
:root[data-theme] #board > .pedal--tabs[data-frame] .tabm__songspick .picker__caret { display: none; }
:root[data-theme] #board > .pedal--tabs[data-frame] .tabm__songspick > .picker__btn { justify-content: center; }
/* Key: ▾ the key ▴, green while moved from the written key (the amount small beside it). */
:root[data-theme] #board .pedal[data-frame] .mline button.fb3 .gbicon { width: 12px; height: 12px; }
/* Each loop card's loop button; a card looping on its own is ringed in green. */
:root[data-theme] #board .loopcard .loopcard__hold svg { flex: none; min-width: 12px; width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
:root[data-theme] .loopcard .loopcard__hold[aria-pressed="true"] { color: color-mix(in srgb, var(--good) 62%, var(--ink)); border-color: color-mix(in srgb, var(--good) 55%, var(--ctl-edge)); background: color-mix(in srgb, var(--good) 14%, var(--ctl-bg)); }
:root[data-theme] .loopcard.is-held { box-shadow: 0 0 0 2px color-mix(in srgb, var(--good) 60%, transparent); }

/* ══ EDITING IN PLACE (23 Oct): a loop being edited keeps its card's size in every view. Only its colour changes; its values
   become small buttons in the same places, and Play and the loop button step aside while it's open. ══ */
:root[data-theme] #board [data-card="routines"] .loopcard.is-editing :is(input.input, .picker__btn) { height: 20px; min-height: 20px; padding: 0 4px; font-size: 11px; border-radius: 5px; }
:root[data-theme] #board [data-card="routines"] .loopcard.is-editing .loopcard__name { height: 20px; min-height: 20px; padding: 0 5px; font-size: 12px; border-radius: 5px; }
:root[data-theme] #board [data-card="routines"] .loopcard.is-editing :is([data-load], [data-hold], .loopcard__time) { display: none; }
:root[data-theme] #board [data-card="routines"] .loopcard.is-editing .loopcard__acts { flex-wrap: nowrap; gap: 3px; margin-left: auto; }
:root[data-theme] #board [data-card="routines"] .loopcard.is-editing .loopcard__acts .chip { height: 22px; min-height: 22px; padding: 0 6px; font-size: 11px; }
:root[data-theme] #board [data-card="routines"] .loopcard.is-editing .loopcard__acts :is([data-up], [data-down], [data-dup], [data-del]) { width: 22px; padding: 0; justify-content: center; }
:root[data-theme] #board [data-card="routines"] .loopcard.is-editing .loopbeats__b { width: 20px; height: 20px; min-height: 0; padding: 0; font-size: 10px; }
:root[data-theme] #board [data-card="routines"] .loopcard.is-editing .loopbeats { gap: 4px; }
:root[data-theme] #board [data-card="routines"] .loopcard.is-editing .loopcard__stats:not(.phrasecard__play) { gap: 4px; }
:root[data-theme] #board [data-card="routines"]:not([data-loopview="list"]) .loopcard.is-editing {
    min-width: 0; 
  background: color-mix(in srgb, var(--accent) 12%, var(--surface)); outline: 2px solid var(--accent); outline-offset: -2px;
}
:root[data-theme] #board [data-card="routines"]:not([data-loopview="list"]) .loopcard.is-editing .loopcard__top { gap: 4px; }
:root[data-theme] #board [data-card="routines"][data-loopview="list"] .loopcard.is-editing {  padding-block: 0; }
:root[data-theme] #board [data-card="routines"]:not([data-loopview="list"]) .loopcard.is-editing { width: auto; flex-basis: auto; }
:root[data-theme] #board [data-card="routines"][data-loopview="lane"] .loopcard.is-editing { width: var(--loop-w, 190px); flex-basis: var(--loop-w, 190px); }
:root[data-theme] #board [data-card="routines"][data-loopview="list"] .loopcard.is-editing .loopcard__time { display: block; visibility: hidden; }
@container rlist (max-width: 819px) {
  :root[data-theme] #board [data-card="routines"].is-3col[data-loopview="list"] .loopcard.is-editing { grid-template-columns: var(--list-cols); grid-template-areas: none; padding-block: 0; row-gap: 0; }
  :root[data-theme] #board [data-card="routines"].is-3col[data-loopview="list"] .loopcard.is-editing :is(.loopcard__top, .loopcard__acts) { grid-area: auto; }
  :root[data-theme] #board [data-card="routines"].is-3col[data-loopview="list"] .loopcard.is-editing .loopcard__top { grid-column: 1; }
  :root[data-theme] #board [data-card="routines"].is-3col[data-loopview="list"] .loopcard.is-editing .loopcard__stats:not(.phrasecard__play) { grid-area: auto; display: contents; padding: 0; }
  :root[data-theme] #board [data-card="routines"].is-3col[data-loopview="list"] .loopcard.is-editing .loopcard__time { display: block; visibility: hidden; }
}
:root[data-theme] #board [data-card="routines"][data-loopview="list"] .loopcard.is-editing { min-height: 40px; }
:root[data-theme] #board [data-card="routines"][data-loopview="list"] .loopcard.is-editing .loopcard__acts { gap: 2px; justify-content: flex-end; min-width: 0; }
:root[data-theme] #board [data-card="routines"][data-loopview="list"] .loopcard.is-editing .loopcard__acts [data-edit] { width: 22px; padding: 0; justify-content: center; }
:root[data-theme] #board [data-card="routines"][data-loopview="list"] .loopcard.is-editing .loopcard__acts [data-edit] .loopcard__doneword { display: none; }
:root[data-theme] #board [data-card="routines"][data-loopview="list"] .loopcard.is-editing .loopcard__acts [data-edit]::before { content: "✓"; font-size: 13px; }

/* ══ EDIT MODE (23 Oct): the edit button beside resize; while arranging, every movable button is outlined and can be
   dragged; the places it can go are marked; a strip under the module says how, with Reset and Done. ══ */
:root[data-theme] #board > .pedal > .medit {
  position: absolute; z-index: 6; right: calc(var(--mpad) + var(--fr-info, 18px) + 4px); bottom: 6px; width: var(--fr-info, 18px); height: var(--fr-info, 18px);
  display: grid; place-items: center; padding: 0; margin: 0; border-radius: 5px; border: 1px solid var(--ctl-edge); background: var(--ctl-bg); color: var(--ink-mute); cursor: pointer;
}
:root[data-theme] #board > .pedal > .medit svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
:root[data-theme] #board > .pedal > .medit:is(:hover, [aria-pressed="true"]) { color: var(--accent); border-color: var(--accent); }
:root[data-theme] #board > .pedal[data-frame] > .mline--4 { padding-right: 48px; }
:root[data-theme] #board > .pedal > .marrange { display: flex; align-items: center; gap: var(--fr-gap, 4px); margin: 6px 0 0; padding: 4px 6px; border-radius: 6px; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); font: 500 11px/1.2 var(--sans); color: var(--ink); }
:root[data-theme] #board > .pedal > .marrange[hidden] { display: none; }
:root[data-theme] #board > .pedal > .marrange > span { flex: 1 1 auto; }
:root[data-theme] #board > .pedal > .marrange > button { height: var(--fr-h); width: var(--fr-b1); border: 1px solid var(--ctl-edge); border-radius: 6px; background: var(--ctl-bg); font: 700 10px/1 var(--sans); color: var(--ink); cursor: pointer; }
/* A settings row moved onto a line is a button: a switch as its name over its choice, a knob as its small dial. */
:root[data-theme] #board .pedal[data-frame] .mline :is(.fb1, .fb2) > .flip,
:root[data-theme] #board .pedal[data-frame] :is(.mborder, .mgear__lead) :is(.fb1, .fb2) > .flip { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; width: 100%; height: var(--fr-h); min-height: 0; padding: 0 5px; border: 1px solid var(--ctl-edge); border-radius: 6px; background: var(--ctl-bg); }
:root[data-theme] #board .pedal[data-frame] :is(.fb1, .fb2) > .flip .flip__plate { position: absolute; inset: 0; width: auto; height: auto; margin: 0; transform: none; opacity: 0; z-index: 1; cursor: pointer; }
:root[data-theme] #board .pedal[data-frame] :is(.fb1, .fb2) > .flip .flip__name { position: static; font: 700 8px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
:root[data-theme] #board .pedal[data-frame] :is(.fb1, .fb2) > .flip .flip__name .seticon { display: none; }
:root[data-theme] #board .pedal[data-frame] :is(.fb1, .fb2) > .flip .flip__val { position: static; font: 700 10px/1 var(--sans); color: var(--accent); }
:root[data-theme] #board .pedal[data-frame] :is(.fb1, .fb2) > .knob:not(.curveknob) { display: grid; grid-template-columns: 14px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 4px; align-content: center; width: 100%; height: var(--fr-h); padding: 0 4px; border: 1px solid var(--ctl-edge); border-radius: 6px; background: var(--ctl-bg); }
:root[data-theme] #board .pedal[data-frame] :is(.fb1, .fb2) > .knob:not(.curveknob) .knob__dial { grid-column: 1; grid-row: 1 / 3; width: 14px; height: 14px; margin: 0; }
:root[data-theme] #board .pedal[data-frame] :is(.fb1, .fb2) > .knob:not(.curveknob) .knob__name { grid-column: 2; position: static; font: 700 8px/1 var(--display); text-transform: uppercase; color: var(--ink-mute); white-space: nowrap; overflow: hidden; }
:root[data-theme] #board .pedal[data-frame] :is(.fb1, .fb2) > .knob:not(.curveknob) .knob__val { grid-column: 2; position: static; transform: none; font: 700 10px/1 var(--sans); color: var(--accent); text-align: left; }
:root[data-theme] #board .pedal[data-frame] .fbrec__unit.fbseg button {   min-height: 0; }
/* Touch: ▲▼ and Key's arrows are 24 px wide (one height with the rest); the chosen choice reads at 4.5:1. */
:root[data-theme] #board > .pedal[data-frame] > .modmove { grid-template-columns: 24px 24px; }
:root[data-theme] #board > .pedal[data-frame] > .modmove button { font-size: 10px; }
:root[data-theme] #board > .pedal[data-frame] > .mgear { right: calc(var(--mpad) + 48px + var(--fr-gap)); }
:root[data-theme] #board > .pedal--tabs[data-frame] .tabm__top { right: calc(var(--mpad) + 48px + var(--fr-gap)); }
:root[data-theme] #board .pedal[data-frame] .fbseg button:is([aria-pressed="true"], [aria-checked="true"]) { color: color-mix(in srgb, var(--accent) 62%, var(--ink)); }
/* A phone: the control line wraps (its right slot under its left one when they don't fit); the title line's slots ride on
   the title line as on a wide screen (only square buttons are left there). */
:root[data-theme] #board > .pedal[data-frame]:where([data-bp~="max719"]) > .mline--2 { flex-wrap: wrap;  }
:root[data-theme] #board > .pedal[data-frame]:where([data-bp~="max719"]) > :is(.mborder, .mgear) { position: absolute; }
:root[data-theme] #board > .pedal--tabs[data-frame]:where([data-bp~="max719"]) .tabm__top { position: absolute; justify-content: flex-end; height: var(--fr-h); }
/* A phone: the loops take the body's whole width (the tempo ladder steps aside). */
:root[data-theme] #board > [data-card="routines"][data-frame]:where([data-bp~="max719"]) .mcol--left { display: none; }
:root[data-theme] #board > [data-card="routines"][data-frame]:where([data-bp~="max719"]) .met__routines[data-colhost] { display: block; }
:root[data-theme] #board > [data-card="routines"][data-frame]:where([data-bp~="max719"]) .mline--4 .rinfo { padding: 0; }
:root[data-theme] #board .pedal[data-frame] .fb2 .rrow__word { display: inline; }

/* Phone pass (23 Oct). The small names on buttons read at 4.5:1 on every look. */
:root[data-theme] #board .pedal[data-frame] :is(.fb1, .fb2) :is(.rocker__name, .flip__name, .knob__name, .picker__title) { color: var(--ink-body); }
/* Rows of a wrapped control line far enough apart to tap. */
:root[data-theme] #board > .pedal[data-frame] > .mline--2 > .mline__l { row-gap: 8px; }
/* The chord's shapes on the Fretboard's control line. */
:root[data-theme] #board .pedal[data-frame] :is(.mline--2, .mline--5) .fb__side :is(button, .chip) { height: var(--fr-h); min-height: 0; }
/* The Fretboard's info line: the readout shrinks, Clear stays whole. */
:root[data-theme] #board .pedal[data-frame] .mline--4 .fb__now { min-width: 0; max-width: 100%; }
:root[data-theme] #board .pedal[data-frame] .mline--4 .fb__now > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
:root[data-theme] #board .pedal[data-frame] .mline--4 .fb__now .fb__clear { flex: none; height: 18px; min-height: 0; padding: 0 6px; font-size: 10px; overflow: visible; }
/* A phone's List: the loop, its tempo, its length and the buttons (the rest is in the loop when it's open, on a second line). */
:root[data-theme] #board > [data-card="routines"][data-frame][data-loopview="list"]:where([data-bp~="max719"]) .mcol__listhead { display: none; }
:root[data-theme] #board > [data-card="routines"][data-frame][data-loopview="list"]:where([data-bp~="max719"]) .loopcard:not(.is-editing) {  grid-template-columns: var(--list-cols); column-gap: 6px; }
:root[data-theme] #board > [data-card="routines"][data-frame][data-loopview="list"]:where([data-bp~="max719"]) .loopcard:not(.is-editing) .loopcard__stat:not(:first-child) { display: none; }
:root[data-theme] #board > [data-card="routines"][data-frame][data-loopview="list"]:where([data-bp~="max719"]) .loopcard.is-editing { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "top acts" "stats stats"; row-gap: 4px; padding-block: 4px; min-height: 0; }
:root[data-theme] #board > [data-card="routines"][data-frame][data-loopview="list"]:where([data-bp~="max719"]) .loopcard.is-editing .loopcard__top { grid-area: top; grid-column: auto; min-width: 0; overflow: hidden; }
:root[data-theme] #board > [data-card="routines"][data-frame][data-loopview="list"]:where([data-bp~="max719"]) .loopcard.is-editing .loopcard__acts { grid-area: acts; }
:root[data-theme] #board > [data-card="routines"][data-frame][data-loopview="list"]:where([data-bp~="max719"]) .loopcard.is-editing .loopcard__time { display: none; }
:root[data-theme] #board > [data-card="routines"][data-frame][data-loopview="list"]:where([data-bp~="max719"]) .loopcard.is-editing .loopcard__stats:not(.phrasecard__play) { grid-area: stats; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; }
:root[data-theme] #board > [data-card="routines"][data-frame][data-loopview="list"]:where([data-bp~="max719"]) .loopcard.is-editing :is(.phrasecard__notes, .loopcard__swing, .phrasecard__play) { grid-column: 1 / -1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

:root[data-theme] #board > .pedal[data-frame]:where([data-bp~="max719"]) > .mline--2 { row-gap: 10px; }
:root[data-theme] #board > .pedal[data-frame]:where([data-bp~="max719"]) > .mline--2 > .mline__l { row-gap: 10px; }
/* The chord's shapes as button 1s on the Fretboard's control line: the shape over its fret. A phone keeps their row. */
:root[data-theme] #board .pedal[data-frame] :is(.mline--2, .mline--5) :is(.fb__arps, .fb__legend) { display: flex; gap: var(--fr-gap); margin: 0; padding: 0; }
:root[data-theme] #board .pedal[data-frame] :is(.mline--2, .mline--5) :is(.fb__arps, .fb__legend)[hidden] { display: none; }
:root[data-theme] #board .pedal[data-frame] :is(.mline--2, .mline--5) .fb__arp { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; width: var(--fr-b1); height: var(--fr-h); min-height: 0; padding: 0 5px; margin: 0; border-radius: 6px; font: 700 10px/1 var(--sans); overflow: hidden; }
:root[data-theme] #board .pedal[data-frame] :is(.mline--2, .mline--5) .fb__arp * { font-size: 10px; line-height: 1; white-space: nowrap; }
:root[data-theme] #board .pedal[data-frame] :is(.mline--2, .mline--5) .fb__arp > :first-child { font: 700 8px/1 var(--display); text-transform: uppercase; letter-spacing: .06em; }
:root[data-theme] #board > [data-pedal="fret"][data-frame]:where([data-bp~="max719"]) > .mline--2 > .mline__r { flex: 1 0 100%; min-height: var(--fr-h);  row-gap: 10px; margin-left: 0; }
/* A phone's List: each loop's name and its buttons (its tempo, rhythm and bars are in it when it's open). */
:root[data-theme] #board > [data-card="routines"][data-frame][data-loopview="list"]:where([data-bp~="max719"]) .loopcard:not(.is-editing) { --list-cols: minmax(0, 1fr) auto; }
:root[data-theme] #board > [data-card="routines"][data-frame][data-loopview="list"]:where([data-bp~="max719"]) .loopcard:not(.is-editing) :is(.loopcard__stat, .loopcard__time) { display: none; }
:root[data-theme] #board .pedal[data-frame] :is(.mline--2, .mline--5) :is(.fb__arp, .fb__pos) { position: relative; display: flex; flex-direction: column;   gap: 1px;  height: var(--fr-h); min-height: 0;  margin: 0; border: 1px solid var(--ctl-edge); border-radius: 6px; background: var(--ctl-bg); overflow: hidden; }
:root[data-theme] #board .pedal[data-frame] :is(.mline--2, .mline--5) :is(.fb__arp, .fb__pos)::after { content: ""; position: absolute;     background: var(--pc, var(--accent)); }
:root[data-theme] #board .pedal[data-frame] :is(.mline--2, .mline--5) :is(.fb__arp, .fb__pos) :is(.fb__arpbadge, .fb__strum, .fb__swatch, .fb__posword) { display: none; }
:root[data-theme] #board .pedal[data-frame] :is(.mline--2, .mline--5) .fb__pos .fb__posname {     white-space: nowrap; }
:root[data-theme] #board .pedal[data-frame] :is(.mline--2, .mline--5) :is(.fb__arp, .fb__pos) .fb__posfret { font: 700 10px/1 var(--sans); color: var(--ink); white-space: nowrap; }
:root[data-theme] #board .pedal[data-frame] :is(.mline--2, .mline--5) :is(.fb__arp, .fb__pos)[aria-pressed="true"] { border-color: var(--pc, var(--accent)); background: color-mix(in srgb, var(--pc, var(--accent)) 16%, var(--ctl-bg)); }
/* A phone: the chord's shapes in one row that scrolls sideways (its row is kept, so the neck never moves). */
:root[data-theme] #board > [data-pedal="fret"][data-frame]:where([data-bp~="max719"]) :is(.mline--2, .mline--5) .fb__side { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
:root[data-theme] #board > [data-pedal="fret"][data-frame]:where([data-bp~="max719"]) :is(.mline--2, .mline--5) .fb__side :is(.fb__legend, .fb__arps) { flex-wrap: nowrap; }
:root[data-theme] #board > [data-pedal="fret"][data-frame]:where([data-bp~="max719"]) > .mline--2 > .mline__r { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; height: var(--fr-h); scrollbar-width: none; }
:root[data-theme] #board > [data-pedal="fret"][data-frame]:where([data-bp~="max719"]) > .mline--2 > .mline__r::-webkit-scrollbar,
:root[data-theme] #board > [data-pedal="fret"][data-frame]:where([data-bp~="max719"]) :is(.mline--2, .mline--5) .fb__side::-webkit-scrollbar { display: none; }
:root[data-theme] #board > [data-pedal="fret"][data-frame]:where([data-bp~="max719"]) :is(.mline--2, .mline--5) .fb__side { height: var(--fr-h); overflow: visible; flex: none; }
:root[data-theme] #board > [data-pedal="fret"][data-frame]:where([data-bp~="max719"]) > .mline--2 > .mline__r > * { flex: none; }
:root[data-theme] #board > [data-pedal="fret"][data-frame]:where([data-bp~="max719"]) > .mline--2 > .mline__r :focus-visible { outline-offset: -2px; }   /* the row scrolls: rings inside, unclipped */
/* The Fretboard's right slot (the chord's shapes, Clear, Concert A, Play scale) takes what the line leaves and scrolls
   sideways in it, at every width: the neck never moves when the shapes show. */
:root[data-theme] #board > [data-pedal="fret"][data-frame] > .mline--2 > .mline__r { flex: 0 1 auto; min-width: 0; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; height: var(--fr-h); scrollbar-width: none; }
:root[data-theme] #board > [data-pedal="fret"][data-frame] > .mline--2 > .mline__r::-webkit-scrollbar { display: none; }
:root[data-theme] #board > [data-pedal="fret"][data-frame] > .mline--2 > .mline__r > * { flex: none; }
:root[data-theme] #board > [data-pedal="fret"][data-frame] > .mline--2 > .mline__r :focus-visible { outline-offset: -2px; }
:root[data-theme] #board > [data-pedal="fret"][data-frame] :is(.mline--2, .mline--5) .fb__side { flex-wrap: nowrap; height: var(--fr-h); }
:root[data-theme] #board > [data-pedal="fret"][data-frame] :is(.mline--2, .mline--5) .fb__side :is(.fb__legend, .fb__arps) { flex-wrap: nowrap; }
/* The corner buttons are button 3s, the info line their height. */
:root { --fr-info: 22px; }
:root[data-theme] #board > [data-pedal="fret"][data-frame] > .mline--2 > .mline__l { flex: 0 0 auto; max-width: 100%; }
:root[data-theme] #board > .pedal--progress[data-frame] .pdash { padding-bottom: 6px; }

/* ══ 23 Oct, later: nothing gets selected while you move things. Loop cards are picked up anywhere but their fields. ══ */
.pedal.is-arranging, .pedal.is-arranging * { user-select: none; -webkit-user-select: none; }
.loopcard:not(.is-editing), .loopcard:not(.is-editing) * { user-select: none; -webkit-user-select: none; }
.loopcard:not(.is-editing) { cursor: grab; }
.loopcard.is-dragging { cursor: grabbing; z-index: 20; box-shadow: 0 10px 24px rgb(0 0 0 / .35); }
[data-loops].is-sorting { user-select: none; -webkit-user-select: none; }
/* The arranging strip leaves the corner buttons their place. */
:root[data-theme] #board > .pedal > .marrange { margin-right: calc(2 * var(--fr-info, 22px) + 8px); }
/* A choice of icons: three (or four) square button 3s joined, the word only for screen readers and the tooltip. */
:root[data-theme] #board .pedal[data-frame] .fbseg--sq button { width: var(--fr-h); padding: 0; display: inline-grid; place-items: center; }
:root[data-theme] #board .pedal[data-frame] .fbseg button .gbicon { width: 14px; height: 14px; }
:root[data-theme] #board .pedal[data-frame] [data-concerta].fbseg--sq button { width: 30px; }

/* ══ THE SMALL METRONOME (23 Oct, later): at its smallest it is one row inside the display — READY, − BPM +, the beat lights,
   small Signature and Rhythm menus, and the notes of the beat view, small; the timing line folds away. ══ */
:root[data-theme] #board [data-pedal="metronome"][data-strip] .met[data-colhost] { display: flex; align-items: center;   min-height: 0;  }
:root[data-theme] #board [data-pedal="metronome"][data-strip] .met > .take__top { position: static; flex: none; order: -1; margin: 0; }
:root[data-theme] #board [data-pedal="metronome"][data-strip] .met .mcol--left, :root[data-theme] #board [data-pedal="metronome"][data-strip] .mdev { flex: none; width: auto; height: 40px; }
:root[data-theme] #board [data-pedal="metronome"][data-strip] .mdial { width: auto !important; height: 40px !important; padding: 0; background: none; box-shadow: none; border: 0; }
:root[data-theme] #board [data-pedal="metronome"][data-strip] .mdial__screen {  padding: 0; }
:root[data-theme] #board [data-pedal="metronome"][data-strip] .mdial__meter { display: flex; align-items: center;  margin: 0;  }
:root[data-theme] #board [data-pedal="metronome"][data-strip] .mdial__bpmrow :is(.mdial__step button, .tstep) { width: 24px; height: 24px; }
:root[data-theme] #board [data-pedal="metronome"][data-strip] .met .mcol--mid { display: block;     }
:root[data-theme] #board [data-pedal="metronome"][data-strip] .met .beatstage { zoom: .25 !important; }
/* The routine's knobs as buttons: a real knob (its round dial and pointer, turned up and down as everywhere) at the left, its
   name over its value beside it. */
:root[data-theme] #board .pedal[data-frame] :is(.fb1, .fb2):is(.knob, .curveknob) { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 6px; row-gap: 1px; align-content: center; padding: 0 6px 0 3px; overflow: visible; }
:root[data-theme] #board .pedal[data-frame] :is(.fb1, .fb2):is(.knob, .curveknob) .knob__dial { grid-column: 1; grid-row: 1 / 3; align-self: center; width: 18px; height: 18px; min-width: 0; margin: 0; padding: 0; box-shadow: inset 0 1px 0 rgb(255 255 255 / .16), 0 1px 2px rgb(0 0 0 / .3); cursor: ns-resize; }
:root[data-theme] #board .pedal[data-frame] :is(.fb1, .fb2):is(.knob, .curveknob) .knob__dial::after { inset: 3px; }
:root[data-theme] #board .pedal[data-frame] :is(.fb1, .fb2):is(.knob, .curveknob) .knob__pointer { display: block; top: 2px; width: 2px; height: 6px; transform-origin: 50% 7px; }
:root[data-theme] #board .pedal[data-frame] :is(.fb1, .fb2):is(.knob, .curveknob) .knob__name { grid-column: 2; grid-row: 1; }
:root[data-theme] #board .pedal[data-frame] :is(.fb1, .fb2):is(.knob, .curveknob) .knob__val { grid-column: 2; grid-row: 2; }
:root[data-theme] #board .pedal[data-frame] :is(.fb1, .fb2):is(.knob, .curveknob) .knob__dial:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Sizing: only the module being resized is laid out again while it moves. */
#board > .pedal.is-sizing { contain: layout style; will-change: height; }
/* The Lane's scrollbar floats over the content on a Mac: it gets a strip of its own under the cards. */
:root[data-theme] #board > [data-card="routines"][data-frame][data-loopview="lane"] [data-loops] { padding-bottom: 12px; scrollbar-width: thin; }
:root[data-theme] #board .pedal[data-frame] .fbseg--sq:not([data-concerta]) button { width: 24px; }
:root[data-theme] #board > .pedal[data-frame] :is(.mborder, .mline) .fbseg--sq > button { display: grid; place-items: center; padding: 0; text-align: center; }
:root[data-theme] #board > .pedal[data-frame] :is(.mborder, .mline) .fbseg--sq > button > .gbicon { margin: 0; }
:root[data-theme] #board > .pedal[data-frame] :is(.fbseg, .tcbar__unit.fbseg) > button { height: calc(var(--fr-h) - 2px); min-height: 0; }
:root[data-theme] #board > .pedal[data-frame] .fbseg { flex-direction: row; flex-wrap: nowrap; }

/* ══ THE FRETBOARD, CLEANED UP (23 Oct, later) ══ */
/* The tuner is a button 2 like the rest: a soft panel; off, it says so; on, the meter fills it and the note and its cents sit
   at its right. */
:root[data-theme] #board .pedal[data-frame] .tuner.fb2 .fbtn__meter { position: relative; padding: 0 6px; border: 1px solid var(--ctl-edge); border-radius: 6px; background: var(--ctl-bg); box-shadow: none; overflow: hidden; }
:root[data-theme] #board .pedal[data-frame] .tuner.fb2 .fbtn.is-off .fbtn__off {  position: absolute; inset: 0; display: grid; place-items: center; font: 700 10px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-body); }
:root[data-theme] #board .pedal[data-frame] .tuner.fb2 .fbtn.is-off :is(.fbtn__zone, .fbtn__centre, .fbtn__mark, .fbtn__ends) { visibility: hidden; }
:root[data-theme] #board .pedal[data-frame] .tuner.fb2 .fbtn:not(.is-off) .fbtn__read { display: flex; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); align-items: baseline; gap: 3px; z-index: 2; pointer-events: none; }
:root[data-theme] #board .pedal[data-frame] .tuner.fb2 .fbtn__read :is(.fbtn__note, .fbtn__cents) { font: 700 10px/1 var(--sans); color: var(--ink); }
:root[data-theme] #board .pedal[data-frame] .tuner.fb2 .fbtn__ends i { font-size: 10px; font-style: normal; color: var(--ink-mute); }
/* The chord's shapes and arpeggios as square button 3s: the shape's letter in its colour (the fret is in its tooltip). */
:root[data-theme] #board .pedal[data-frame] :is(.mline--2, .mline--5) :is(.fb__arp, .fb__pos) { width: 24px; padding: 0; align-items: center; justify-content: center; }
:root[data-theme] #board .pedal[data-frame] :is(.mline--2, .mline--5) :is(.fb__arp, .fb__pos)::after { left: 2px; right: 2px; top: auto; bottom: 2px; width: auto; height: 3px; border-radius: 2px; }
:root[data-theme] #board .pedal[data-frame] :is(.mline--2, .mline--5) .fb__pos .fb__posname { font: 700 11px/1 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); }
:root[data-theme] #board .pedal[data-frame] :is(.mline--2, .mline--5) :is(.fb__arp, .fb__pos) .fb__posfret { display: none; }
:root[data-theme] #board .pedal[data-frame] :is(.mline--2, .mline--5) .fb__arp::before { content: "♪"; font: 700 12px/1 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); }
/* Play scale: a square ▶. */
:root[data-theme] #board .pedal[data-frame] .fb__playunit.fb3 { width: var(--fr-h); }
:root[data-theme] #board .pedal[data-frame] .fb__playunit.fb3 .fb__play { display: grid; place-items: center; width: 100%; height: var(--fr-h); padding: 0; border: 1px solid var(--ctl-edge); border-radius: 6px; background: var(--ctl-bg); }
:root[data-theme] #board .pedal[data-frame] .fb__playunit.fb3 .fb__play__word { display: none; }
:root[data-theme] #board .pedal[data-frame] .fb__playunit.fb3 .fb__play__glyph { font-size: 10px; margin: 0; }
/* The info line: the note played (when there is one), then what the neck holds, left-aligned, one line. */
:root[data-theme] #board > [data-pedal="fret"][data-frame] .mline--4 .fb__now { justify-content: flex-start; text-align: left; }
:root[data-theme] #board > [data-pedal="fret"][data-frame] .mline--4 .fb__read:has(b[data-note]:empty) { display: none; }
:root[data-theme] #board > [data-pedal="fret"][data-frame] .mline--4 .fb__summary {  font: 500 11px/1.2 var(--sans); color: var(--ink-mute); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root[data-theme] #board > [data-pedal="fret"][data-frame] .mline--4 .fb__read b { font: 700 11px/1 var(--sans); color: var(--ink); }
:root[data-theme] #board .pedal[data-frame] :is(.mline--2, .mline--5) .fb__side :is(.fb__arp, .fb__pos) { min-width: 0; flex: none; }
:root[data-theme] #board .pedal[data-frame] .fbrec__unit.fbseg .fbrec__row { display: contents; }
:root[data-theme] #board .pedal[data-frame] .fbrec__unit.fbseg button { flex: 0 0 24px; width: 24px; min-width: 0; height: calc(var(--fr-h) - 2px); padding: 0; display: grid; place-items: center; }
/* The held notes' Play and Show scale on the control line; on the info line only the words (the kind as small caps text). */
:root[data-theme] #board .pedal[data-frame] :is(.mline--2, .mline--5) .fb__identacts { display: flex; gap: var(--fr-gap); }
:root[data-theme] #board .pedal[data-frame] :is(.mline--2, .mline--5) .fb__identacts[hidden] { display: none; }
:root[data-theme] #board .pedal[data-frame] :is(.mline--2, .mline--5) .fb__identacts .fb1 { height: var(--fr-h); min-height: 0; padding: 0 6px; border: 1px solid var(--ctl-edge); border-radius: 6px; background: var(--ctl-bg); font: 700 10px/1 var(--sans); }
:root[data-theme] #board > [data-pedal="fret"][data-frame] .mline--4 .fb__ident { display: flex; align-items: center; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; overflow: hidden; white-space: nowrap; }
:root[data-theme] #board > [data-pedal="fret"][data-frame] .mline--4 .fb__ident[hidden] { display: none; }
:root[data-theme] #board > [data-pedal="fret"][data-frame] .mline--4 .fb__ident > * { flex: none; margin: 0; padding: 0; border: 0; background: none; font: 500 11px/1 var(--sans); color: var(--ink-mute); }
:root[data-theme] #board > [data-pedal="fret"][data-frame] .mline--4 .fb__ident .fb__kind { font: 700 10px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); }
:root[data-theme] #board > [data-pedal="fret"][data-frame] .mline--4 .fb__ident .fb__chord { font: 700 11px/1 var(--sans); color: var(--ink); }
:root[data-theme] #board > [data-pedal="fret"][data-frame] .mline--4 .fb__ident .fb__identsep { width: 1px; height: 10px; background: var(--line); }
:root[data-theme] #board > [data-pedal="fret"][data-frame] .mline--4 .fb__ident > :last-child { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Tabs' Tuning: three buttons of the schematic, ▾ (3) · the tuning's name over "Tuning" (2) · ▴ (3). Green while moved. */

/* ══ 23 Oct, evening: the owner's sizes ══ */
/* + Save preset is a square button 3 everywhere (Metronome, Routines, Tabs): its "+" alone, the words in its label. */
:root[data-theme] #board .pedal[data-frame] .fb3:not(button, .chip) > :is(.chip, button) { width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; display: grid; place-items: center; border: 1px solid var(--ctl-edge); border-radius: 6px; background: var(--ctl-bg); font: 700 13px/1 var(--sans); color: var(--ink); }
:root[data-theme] #board .pedal[data-frame] .fb3 :is(.rrow__word, .mcol__saveword, .tabm__saveword) { display: none; }
:root[data-theme] #board .pedal[data-frame] :is(.mcol__save, .tabm__save).fb3 { display: grid; place-items: center; padding: 0; font: 700 13px/1 var(--sans); }
:root[data-theme] #board .pedal[data-frame] .rrow__save.fb3 { display: inline-grid; }
/* Tabs' Loop: a square icon button, green while it's on. */
:root[data-theme] #board .pedal[data-frame] .tabm__loopsw.fb3 { display: grid; place-items: center; padding: 0; border: 1px solid var(--ctl-edge); border-radius: 6px; background: var(--ctl-bg); color: var(--ink-body); cursor: pointer; }
:root[data-theme] #board .pedal[data-frame] .tabm__loopsw.fb3 .gbicon { width: 14px; height: 14px; }
:root[data-theme] #board .pedal[data-frame] .tabm__loopsw.fb3[aria-pressed="true"] { border-color: color-mix(in srgb, var(--good) 55%, var(--ctl-edge)); background: color-mix(in srgb, var(--good) 14%, var(--ctl-bg)); color: color-mix(in srgb, var(--good) 62%, var(--ink)); }
/* Any knob on a line is a button: its round dial (14 px) at the left, a short name over the value. */
:root[data-theme] #board .pedal[data-frame] :is(.fb1, .fb2):is(.knob, .curveknob), :root[data-theme] #board .pedal[data-frame] :is(.fb1, .fb2) > .knob {
  position: relative; display: grid; grid-template-columns: 14px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 4px; row-gap: 1px; align-content: center;
  height: var(--fr-h); padding: 0 4px 0 3px; border: 1px solid var(--ctl-edge); border-radius: 6px; background: var(--ctl-bg); overflow: hidden;
}
:root[data-theme] #board .pedal[data-frame] .fb1:is(.knob, .curveknob) { width: var(--fr-b1); }
:root[data-theme] #board .pedal[data-frame] .fb2:is(.knob, .curveknob) { width: var(--fr-b2); }
:root[data-theme] #board .pedal[data-frame] :is(.fb1, .fb2) > .knob { width: 100%; }
:root[data-theme] #board .pedal[data-frame] :is(.fb1, .fb2) > .knob { border: 0; background: none; padding: 0; }
:root[data-theme] #board .pedal[data-frame] :is(.fb1, .fb2):is(.knob, .curveknob) .knob__dial, :root[data-theme] #board .pedal[data-frame] :is(.fb1, .fb2) > .knob .knob__dial {
  --knob-mode: knob; grid-column: 1; grid-row: 1 / 3; align-self: center; width: 14px !important; height: 14px !important; min-width: 0; margin: 0; padding: 0; border-radius: 50%; background: radial-gradient(circle at 50% 22%, var(--cap-top), var(--cap-bot)); border: 1px solid var(--cap-edge); box-shadow: 0 1px 2px rgb(0 0 0 / .3); cursor: ns-resize;
}
:root[data-theme] #board .pedal[data-frame] :is(.fb1, .fb2) :is(.knob, .curveknob) .knob__dial::after, :root[data-theme] #board .pedal[data-frame] :is(.fb1, .fb2):is(.knob, .curveknob) .knob__dial::after { inset: 2px; }
:root[data-theme] #board .pedal[data-frame] :is(.fb1, .fb2):is(.knob, .curveknob) .knob__pointer, :root[data-theme] #board .pedal[data-frame] :is(.fb1, .fb2) > .knob .knob__pointer {
  display: block; position: absolute; left: 50%; top: 1px; width: 2px; height: 5px; border-radius: 1px; background: var(--led); box-shadow: none; transform-origin: 50% 6px; transform: translateX(-50%) rotate(var(--rot));
}
:root[data-theme] #board .pedal[data-frame] :is(.fb1, .fb2):is(.knob, .curveknob) :is(.knob__name, .knob__val), :root[data-theme] #board .pedal[data-frame] :is(.fb1, .fb2) > .knob :is(.knob__name, .knob__val) { grid-column: 2; position: static; transform: none; margin: 0; padding: 0; border: 0; background: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
:root[data-theme] #board .pedal[data-frame] :is(.fb1, .fb2):is(.knob, .curveknob) .knob__name, :root[data-theme] #board .pedal[data-frame] :is(.fb1, .fb2) > .knob .knob__name { grid-row: 1; font: 700 8px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-body); }
:root[data-theme] #board .pedal[data-frame] :is(.fb1, .fb2):is(.knob, .curveknob) .knob__val, :root[data-theme] #board .pedal[data-frame] :is(.fb1, .fb2) > .knob .knob__val { grid-row: 2; font: 700 10px/1 var(--sans); color: var(--accent); }
:root[data-theme] #board .pedal[data-frame] :is(.fb1, .fb2) .knob__name .seticon { display: none; }
/* The short name (Curve, Rest) where the button is small. */
:root[data-theme] #board .pedal[data-frame] .fb1 .knob__name[data-short], :root[data-theme] #board .pedal[data-frame] .fb1.knob .knob__name[data-short] { font-size: 0; }
:root[data-theme] #board .pedal[data-frame] .fb1 .knob__name[data-short]::before { content: attr(data-short); font: 700 8px/1 var(--display); letter-spacing: .06em; }
/* The tuner as a button 1: "Tuner off"; on, the meter with the note at its right. */
:root[data-theme] #board .pedal[data-frame] .tuner.fb1 { display: flex; align-items: center; }
:root[data-theme] #board .pedal[data-frame] .tuner.fb1 > .fbtn, :root[data-theme] #board .pedal[data-frame] .tuner.fb1 .fbtn__meter { flex: 1 1 auto; min-width: 0; width: 100%; height: var(--fr-h); margin: 0; border-radius: 6px; }
:root[data-theme] #board .pedal[data-frame] .tuner.fb1 > .tuner__name { display: none; }
:root[data-theme] #board .pedal[data-frame] .tuner.fb1 .fbtn__meter { position: relative; padding: 0 4px; border: 1px solid var(--ctl-edge); background: var(--ctl-bg); box-shadow: none; overflow: hidden; }
:root[data-theme] #board .pedal[data-frame] .tuner.fb1 .fbtn.is-off .fbtn__off { position: absolute; inset: 0; display: grid; place-items: center; font: 700 10px/1 var(--display); letter-spacing: .02em; text-transform: uppercase; color: var(--ink-body); }
:root[data-theme] #board .pedal[data-frame] .tuner.fb1 .fbtn.is-off :is(.fbtn__zone, .fbtn__centre, .fbtn__mark, .fbtn__ends) { visibility: hidden; }
:root[data-theme] #board .pedal[data-frame] .tuner.fb1 .fbtn:not(.is-off) .fbtn__read { display: flex; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); z-index: 2; pointer-events: none; }
:root[data-theme] #board .pedal[data-frame] .tuner.fb1 .fbtn__read .fbtn__note { font: 700 10px/1 var(--sans); color: var(--ink); }
:root[data-theme] #board .pedal[data-frame] .tuner.fb1 .fbtn__read .fbtn__cents { display: none; }
:root[data-theme] #board .pedal[data-frame] .tuner.fb1 .fbtn__ends i { font-size: 9px; font-style: normal; color: var(--ink-mute); }
/* Every settings box one size, its rows one shape: name · a full-size control · the value. */
:root[data-theme] #board > .pedal[data-frame]:not([data-bp~="max719"]):not(.has-side) :is(.pedal__headctl, .rrow > .rset, .tabm__set) { width: 372px; }
:root[data-theme] #board > .pedal--tabs[data-frame]:not([data-bp~="max719"]) .tabm__set { width: 372px; }
:root[data-theme] #board .pedal[data-frame] :is(.pedal__headctl, .rset) :is(.flip, .knob, .rocker, .rset__row) { grid-template-columns: minmax(0, 1fr) 124px 64px; }
:root[data-theme] #board .pedal[data-frame] :is(.pedal__headctl, .rset) .knob__dial[role="slider"] { width: 100%; justify-self: stretch; }
/* Edit mode: every place a button can go is drawn — dashed, tinted, as big as the room it has — and an empty settings
   box says what it's for. */
:root[data-theme] #board .pedal[data-frame] :is(.pedal__headctl, .rset) .rset__row { grid-template-columns: auto minmax(0, 1fr); }
:root[data-theme] #board .pedal[data-frame] :is(.pedal__headctl, .rset) .rset__row > .rset__seg { justify-self: end; }
:root[data-theme] #board [data-card="routines"] .loopcard.is-editing .loopbeats__b { background: var(--ctl-bg); color: var(--ink); border: 1px solid var(--ctl-edge); }

/* ══ 23 Oct, night ══ */
/* Routines off: its Speed curve and Rest have nothing to do, so they go. */
:root[data-routines="off"][data-theme] #board :is([data-curveknob], [data-restknob]) { display: none !important; }
/* The Instruments button: a small square, the part's icon. */
:root[data-theme] #board .pedal[data-frame] .tabm__instbtn.fb3 { display: grid; place-items: center; padding: 0; border: 1px solid var(--ctl-edge); border-radius: 6px; background: var(--ctl-bg); color: var(--ink-body); cursor: pointer; }
:root[data-theme] #board .pedal[data-frame] .tabm__instbtn.fb3 .gbicon { width: 14px; height: 14px; }
:root[data-theme] #board .pedal[data-frame] .tabm__instbtn.fb3[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
/* Its popup: All first, then a row per instrument — name at the left, its volume knob at the right. */
.tabm__mix { position: fixed; z-index: 300; width: 280px; max-width: calc(100vw - 16px); overflow-y: auto; padding: 4px; border-radius: 10px; border: 1px solid var(--ctl-edge-hi, var(--line-2)); background: var(--surface); box-shadow: 0 13px 30px rgb(0 0 0 / .45); }
.tabm__mix[hidden] { display: none; }
.tabm__mixrow { display: grid; grid-template-columns: minmax(0, 1fr) 96px; align-items: center; gap: 8px; min-height: 36px; padding: 2px 6px; border-radius: 6px; }
.tabm__mixrow + .tabm__mixrow { border-top: 1px solid var(--line); }
.tabm__mixrow--all { background: color-mix(in srgb, var(--accent) 9%, transparent); border-bottom: 1px solid var(--line-2, var(--line)); margin-bottom: 2px; }
.tabm__mixrow.is-played { background: color-mix(in srgb, var(--good) 11%, transparent); }
.tabm__mixpick { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0; margin: 0; border: 0; background: none; color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.tabm__mixpick:disabled { cursor: default; opacity: .8; }
.tabm__mixpick .gbicon { width: 16px; height: 16px; flex: none; color: var(--ink-body); }
.tabm__mixname { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.tabm__mixname b { font: 700 12px/1.1 var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.tabm__mixname small { font: 500 10px/1.1 var(--sans); color: var(--ink-body); }
.tabm__mixrow.is-played .tabm__mixname small { color: color-mix(in srgb, var(--good) 62%, var(--ink)); }
.tabm__mix .knob { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; column-gap: 8px; }
.tabm__mix .knob__dial { --knob-mode: knob; width: 22px !important; height: 22px !important; grid-column: 1; }
.tabm__mix .knob__name { display: none; }
.tabm__mix .knob__val { grid-column: 2; position: static; transform: none; text-align: left; font: 700 11px/1 var(--sans); color: var(--accent); }
.tabm__mix .knob__pointer { top: 2px; height: 7px; transform-origin: 50% 9px; }
/* The section the tab is on is lit in the Routines module. */
:root[data-theme] #board [data-card="routines"] .loopcard.is-picked { outline: 2px solid var(--accent); outline-offset: -2px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent), 0 6px 14px rgb(0 0 0 / .25); z-index: 1; }
:root[data-theme] #board [data-card="routines"] .loopcard.is-editing { z-index: 6; }   /* an open card's menus stay above its neighbours, lit or not */
:root[data-theme] #board [data-card="routines"][data-loopview="list"] .loopcard.is-picked { background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: inset 4px 0 0 var(--accent); outline: 0; }
:root[data-theme] #board [data-card="routines"] .loopcard.is-picked .loopcard__n { background: var(--accent); color: var(--accent-ink, #fff); }
/* The Fretboard's info line always has its say: one line, left-aligned, words only. */
:root[data-theme] #board > [data-pedal="fret"][data-frame] .mline--4 .fb__now { flex: 1 1 auto; min-width: 0; width: 100%; }
:root[data-theme] #board > [data-pedal="fret"][data-frame] .mline--4 .fb__summary { display: block; flex: 1 1 auto; min-width: 0; }
/* The settings never make a module taller or spill out of it: beside the content, the column is as tall as the module's body and
   scrolls inside it; as a box over the module, it scrolls within the window. */
:root[data-theme] #board .has-side .mcol--right { position: relative; align-self: stretch; min-height: 0; }
:root[data-theme] #board .has-side .mcol--right > .pedal__headctl { position: absolute; inset: 0; width: auto; max-height: none; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
:root[data-theme] #board > .pedal :is(.pedal__headctl, .tabm__set, .rrow > .rset):not(.mcol--right > *) { max-height: min(70vh, 560px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }

/* ══ THE CHORD BUTTONS (23 Oct, night): right after the Chord menu, as two joined groups — the voicings (each its CAGED letter,
   its colour under it), then the arpeggios (♪) — that fade in when the chord view shows. ══ */
@keyframes fb-chordin { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
:root[data-theme] #board .pedal[data-frame] :is(.mline--2, .mline--5) .fb__side { display: flex; align-items: center; gap: 8px; flex: none; margin: 0; padding: 0; min-height: 0; animation: fb-chordin .18s ease-out; }
:root[data-theme] #board .pedal[data-frame] :is(.mline--2, .mline--5) .fb__side :is(.fb__legend, .fb__arps) { display: inline-flex; gap: 0; height: var(--fr-h); margin: 0; padding: 0;  border-radius: 6px; background: var(--ctl-bg); overflow: hidden; }
:root[data-theme] #board .pedal[data-frame] :is(.mline--2, .mline--5) .fb__side :is(.fb__legend, .fb__arps)[hidden] { display: none; }
:root[data-theme] #board .pedal[data-frame] :is(.mline--2, .mline--5) .fb__side :is(.fb__arp, .fb__pos) { height: 100%; width: 26px; border: 0; border-radius: 0; background: none; }
:root[data-theme] #board .pedal[data-frame] :is(.mline--2, .mline--5) .fb__side :is(.fb__arp, .fb__pos) + :is(.fb__arp, .fb__pos) { border-left: 1px solid var(--ctl-edge); }
:root[data-theme] #board .pedal[data-frame] :is(.mline--2, .mline--5) .fb__side :is(.fb__arp, .fb__pos)::after { left: 4px; right: 4px; bottom: 3px; height: 3px; }
:root[data-theme] #board .pedal[data-frame] :is(.mline--2, .mline--5) .fb__side :is(.fb__arp, .fb__pos)[aria-pressed="true"] { background: color-mix(in srgb, var(--pc, var(--accent)) 24%, var(--ctl-bg)); }
:root[data-theme] #board .pedal[data-frame] :is(.mline--2, .mline--5) .fb__side :is(.fb__arp, .fb__pos):is(:hover, :focus-visible) { background: color-mix(in srgb, var(--pc, var(--accent)) 14%, var(--ctl-bg)); }
@media (prefers-reduced-motion: reduce) { :root[data-theme] #board .pedal[data-frame] :is(.mline--2, .mline--5) .fb__side { animation: none; } }
/* The chord groups' outline drawn outside the buttons, so each button is the full 22 px. */
:root[data-theme] #board .pedal[data-frame] :is(.mline--2, .mline--5) .fb__side :is(.fb__legend, .fb__arps) { border: 0; box-shadow: 0 0 0 1px var(--ctl-edge); }
/* The smallest Metronome: its signature and rhythm menus are small, whole buttons. */
:root[data-theme] #board [data-pedal="metronome"][data-strip] .mdial__meter .picker > .picker__btn { padding: 0 6px !important; font-size: 15px !important; font-weight: 800; line-height: 1 !important; display: inline-flex; align-items: center; }
:root[data-theme] #board [data-pedal="metronome"][data-strip] .mdial__meter .picker > .picker__btn .picker__cur { font-size: 15px; line-height: 1; }
:root[data-theme] #board [data-pedal="metronome"][data-strip] .mdial__meter .picker > .picker__btn .picker__cur svg { height: 24px; }
:root[data-theme] #board [data-pedal="metronome"][data-strip] .mdial__meter { zoom: 1; }
:root[data-theme] #board [data-card="routines"]:not([data-loopview="list"]) .loopcard.is-editing { z-index: 6; }
/* In the thin strip the beat cells sit against its edge: their focus rings are drawn inside them. */
:root[data-theme] #board [data-pedal="metronome"][data-strip] .beatrow :focus-visible { outline-offset: -2px; }
:root[data-theme] #board [data-pedal="metronome"][data-strip] .beatnotation {  box-sizing: border-box; }   /* the view is at a quarter size: this is about 4 px on screen */
/* The thin strip has no room for the groove's step grid: it shows the notes (the grid is back as the module grows). */
:root[data-theme] #board [data-pedal="metronome"][data-strip] .beatviz[data-mode="steps"] .beatsteps { display: none; }
:root[data-theme] #board [data-pedal="metronome"][data-strip] .beatviz[data-mode="steps"] .beatnotation { display: flex; }

/* ══ 24 Oct ══ */
/* Tabs' start screen leaves the corner buttons their own row. */
:root[data-theme] #board > .pedal--tabs .tabm__open { padding-bottom: 28px; }

/* The status words at the info line's right end, ahead of the corner buttons. */
:root[data-theme] #board > .pedal[data-frame] > .mline--4 > .mline__r { flex: 0 1 auto; min-width: 0; margin-left: auto; overflow: hidden; }
:root[data-theme] #board > .pedal[data-frame] > .mline--4 .pedal__status { display: block; font: 500 11px/1 var(--sans); color: var(--ink-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
:root[data-theme] #board > .pedal[data-frame] > .mline--4 .pedal__status:empty { display: none; }
/* Metronome 10 % smaller (owner, 24 Oct): its body at nine tenths. */
:root[data-theme] #board > [data-pedal="metronome"] > .pedal__body { zoom: .9; }
/* Undo and redo are small: two icon squares. */
:root[data-theme] #board .pedal[data-frame] .rrow__hist > button { width: var(--fr-h); min-width: 0; height: var(--fr-h); padding: 0; }

/* ══ EDIT MODE, AGAIN (24 Oct) ══ every place a button can go is drawn, labelled and big enough to drop on, whether or not it has
   anything in it; a place with nothing in it takes no room in the normal view and returns while editing. */
:root[data-theme] #board > .pedal[data-frame] > .mline.is-empty:not(.is-arranging-line) { display: none; }
:root[data-theme] #board > .pedal.is-arranging[data-frame] > .mline--2.is-empty { display: flex; }
:root[data-theme] #board > .pedal.is-arranging[data-frame] > .mline--4.is-empty { display: flex; }
html[data-corner="off"] #board > .pedal[data-frame] > .mline--4.is-empty:not(.is-arranging-line) { display: none; }
.tabm__go:empty, .tabm__row:empty { display: none; }
.pedal.is-arranging { --zone: color-mix(in srgb, var(--accent) 75%, transparent); }
.pedal.is-arranging > .mborder, .pedal.is-arranging > .mgear, .pedal.is-arranging .tabm__top { display: flex !important; }
.pedal.is-arranging [data-zone]:not([data-zone="set"]) { display: flex; }   /* the settings box opens and closes with its gear, editing or not */
.pedal.is-arranging [data-zone] { align-items: center; gap: var(--fr-gap, 4px); min-height: var(--fr-h, 22px); min-width: 96px; padding: 2px 3px; border-radius: 6px; outline: 1.5px dashed var(--zone); outline-offset: 1px; background: color-mix(in srgb, var(--accent) 7%, transparent); }
.pedal.is-arranging [data-zone="l1l"], .pedal.is-arranging [data-zone="l1r"] { min-width: 128px; }
.pedal.is-arranging [data-zone="l1r"] { justify-content: flex-end; }
.pedal.is-arranging [data-zone="l2l"] { flex: 1 1 auto; min-width: 45%; flex-wrap: wrap; }
.pedal.is-arranging [data-zone="l2r"] { flex: 1 1 0; min-width: 130px; justify-content: flex-end; }
.pedal.is-arranging [data-zone="set"] { min-height: 64px; flex-direction: column; align-items: stretch; outline-offset: -4px; }
.pedal.is-arranging [data-zone]::before { content: attr(data-zonelabel); position: absolute; top: -8px; left: 6px; z-index: 3; padding: 0 4px; font: 700 8px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); background: var(--surface); border-radius: 3px; pointer-events: none; }
.pedal.is-arranging [data-zone].is-drop { outline: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 20%, transparent); }
.pedal.is-arranging [data-zone="set"]:not(:has(> .tcbar__unit:not([hidden]):not([data-hiddenctl])))::after { content: "Drop a button here to keep it out of the way"; display: grid; place-items: center; min-height: 48px; padding: 0 12px; font: 600 11px/1.3 var(--sans); color: var(--accent); text-align: center; }
.pedal.is-arranging [data-zone] > :not(.pedal__gear, .tabm__gear, .picker__pop) { cursor: grab; }
.pedal.is-arranging [data-zone] > *:hover { filter: brightness(1.08); }
.pedal.is-arranging .is-lifted { opacity: .3; }
.marrange__ghost { opacity: .92; box-shadow: 0 8px 20px rgb(0 0 0 / .4); border-radius: 6px; cursor: grabbing; }
.marrange__ins { position: fixed; z-index: 310; border-radius: 2px; background: var(--accent); box-shadow: 0 0 8px var(--accent); pointer-events: none; }

.pedal.is-arranging [data-zone]:not(.mborder, .tabm__top, [data-zone="set"]) { position: relative; }   /* the title line's own places stay where they are (absolute) */
.pedal.is-arranging > .mborder[data-zone], .pedal.is-arranging .tabm__top[data-zone] { width: auto; max-width: calc(50% - 70px); }

/* ---- Universal settings (the dialog) and the corner switch ---- */
html[data-corner="off"] #board .pedal > .medit, html[data-corner="off"] #board .pedal > .modsize { display: none !important; }
.menuicon { width: 15px; height: 15px; flex: none; margin-right: 6px; vertical-align: -3px; opacity: .8; }
.usermenu__h, .rig__label { display: flex; align-items: center; }
.usermenu__uni { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--ctl-bg); color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.usermenu__uni:hover { border-color: var(--accent); }
.usermenu__uni .menuicon { width: 22px; height: 22px; margin: 0; opacity: 1; color: var(--accent); }
.usermenu__uni span { display: grid; line-height: 1.2; }
.usermenu__uni small { color: var(--muted); font-size: .75em; }
.usettings { position: fixed;  z-index: 400;  place-items: center;   }
.usettings[hidden] { display: none; }
.usettings__card {   display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line);  overflow: hidden; box-shadow: 0 20px 60px rgb(0 0 0 / .45); }
.usettings__head { display: flex; align-items: center;   border-bottom: 1px solid var(--line); }
.usettings__head h2 { margin: 0;  display: flex; align-items: center; flex: none; }
.usettings__find { flex: 1; display: flex; align-items: center; gap: 4px; min-width: 0; border: 1px solid var(--line); border-radius: 8px;  background: var(--ctl-bg); }
.usettings__find input { flex: 1; min-width: 0; border: 0; background: none; color: var(--ink); font: inherit;  outline: none; }
.usettings__x { flex: none;   border-radius: 8px; border: 1px solid var(--line); background: var(--ctl-bg); color: var(--ink); cursor: pointer; }
.usettings__main { flex: 1; min-height: 0;  }
.usettings__nav { flex: none; width: 150px;  flex-direction: column; gap: 2px; padding: 8px; border-right: 1px solid var(--line); overflow-y: auto; }
.usettings__nav button { display: flex; align-items: center; gap: 6px; padding: 8px; border: 0; border-radius: 8px; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.usettings__nav button:hover, .usettings__nav button[aria-current="true"] { background: var(--ctl-bg); }
.usettings__nav button[aria-current="true"] { font-weight: 600; }
.usettings__body { flex: 1; min-width: 0; overflow-y: auto;  }
.usettings__sec { display: block;  padding: 0; position: static; width: auto; height: auto; background: none; border: 0; box-shadow: none; }
.usettings__sec[hidden] { display: none; }
.usettings__sec > h3 { display: flex; align-items: center;   }
.uset__rows { display: grid; gap: 4px; }
.uset__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; }
.uset__row > span { display: flex; align-items: center; }
.uset__row > b { font-weight: 600; color: var(--accent); }
.uset-hide { display: none !important; }
.uset__note { margin: 6px 0 0; color: var(--muted);  }
.usettings__box, .usettings__box[hidden] { display: block !important; position: static !important; width: auto !important; max-width: none !important; height: auto !important; max-height: none !important; margin: 0; box-shadow: none; transform: none; }
@media (max-width: 560px) {
  .usettings { padding: 0; }
      .usettings__nav { width: auto; flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .usettings__nav button { flex: none; }
  .usettings__nav button span { display: none; }
  .usettings__nav button[aria-current="true"] span { display: inline; }
}

/* Universal settings as a compact dropdown under the account button: one scrolling square, no second big window. */
.usettings { background: none; display: block; padding: 0; inset: 0; pointer-events: none; }
.usettings__card { position: absolute; top: 58px; right: 12px; width: min(360px, calc(100vw - 24px)); height: auto; max-height: min(520px, calc(100vh - 140px)); pointer-events: auto; border-radius: 12px; }
.usettings__head { padding: 6px 8px; gap: 6px; }
.usettings__head h2 { font-size: .85rem; }
.usettings__head h2 .menuicon { width: 14px; height: 14px; }
.usettings__find { padding: 0 6px; }
.usettings__find input { padding: 4px 2px; font-size: .8rem; }
.usettings__x { width: 24px; height: 24px; font-size: .75rem; }
.usettings__nav { display: none; }
.usettings__main { display: block; overflow: hidden; }
.usettings__body { height: 100%; max-height: min(460px, calc(100vh - 190px)); padding: 0 8px 10px; }
.usettings__sec { margin: 0 0 6px; }
.usettings__sec > h3 { position: sticky; top: 0; z-index: 2; margin: 0; padding: 6px 2px; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); background: var(--surface); }
.usettings .lset__row, .usettings .uset__row { padding: 5px 6px; font-size: .8rem; min-height: 0; }
.uset__note { font-size: .72rem; }
@media (max-width: 560px) { .usettings__card { top: 54px; right: 6px; left: 6px; width: auto; max-height: calc(100vh - 130px); height: auto; border-radius: 12px; } .usettings__main { flex-direction: unset; } }

/* Settings text is the size of the buttons' text (10 px bold), so a row reads like the button it came from. */
:root[data-theme] #board :is([data-headctl], [data-tabset], .rset, .usettings__box) :is(.rocker__name, .flip__name, .knob__name, .rset__name, .rig__label) { font-size: 10px; font-weight: 700; }
:root[data-theme] #board :is([data-headctl], [data-tabset], .rset, .usettings__box) :is(.rocker__state, .flip__read, .knob__val, .rset__val, .picker__cur) { font-size: 10px; font-weight: 700; }
:root[data-theme] #board .usettings .lset__row { font-size: 10px; font-weight: 700; }

/* Tabs: ‹ Play › as one button of three parts, Play the big one in the middle. */
:root[data-theme] #board > .pedal--tabs[data-frame] .mline .tabm__go { gap: 0; }
:root[data-theme] #board > .pedal--tabs[data-frame] .mline .tabm__go .fb3 { width: var(--fr-h); border-radius: 0; margin-left: -1px; }
:root[data-theme] #board > .pedal--tabs[data-frame] .mline .tabm__go .fb3:first-child { margin-left: 0; border-radius: 6px 0 0 6px; }
:root[data-theme] #board > .pedal--tabs[data-frame] .mline .tabm__go .fb3:last-child { border-radius: 0 6px 6px 0; }
:root[data-theme] #board > .pedal--tabs[data-frame] .mline .tabm__go .tabm__play { width: 56px; z-index: 1; }
:root[data-theme] #board > .pedal--tabs[data-frame] .mline .tabm__go .tabm__play svg { width: 16px; height: 16px; }

/* The Fretboard past its normal size (with the Harmony wheel, which grows it): strings further apart and bigger dots. */
:root[data-theme] #board [data-pedal="fret"][data-grow] .fb { --fb-row: calc(27px * var(--msize)); --fb-dot: calc(22px * var(--msize)); }

/* The info line also holds buttons (the chord buttons, anything dragged into it): then it is as tall as the other lines. */
:root[data-theme] #board > .pedal[data-frame].is-arranging > .mline--4 { height: var(--fr-line); min-height: var(--fr-line); align-items: center; overflow: visible; }
:root[data-theme] #board > .pedal[data-frame] > .mline--4 .mline__r { display: flex; align-items: center; gap: var(--fr-gap);  }

/* The info line's buttons (Sweep chords, voicings): a row that scrolls sideways when there are more than fit, clear of the corner buttons. */
:root[data-theme] #board > .pedal[data-frame] > .mline--4 .mline__r { min-width: 0; flex: 0 1 auto; overflow-x: auto; scrollbar-width: none; }
:root[data-theme] #board > .pedal[data-frame] > .mline--4 .mline__r::-webkit-scrollbar { display: none; }
:root[data-theme] #board .pedal[data-frame] .mline--5 .fb__chordbtn { flex: none; height: var(--fr-h); min-height: 0; padding: 0 7px; display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; }
:root[data-theme] #board .pedal[data-frame] .mline--5 .fb__chordbtn small {  font-weight: 600; }
:root[data-theme] #board .pedal[data-frame] .mline--5 .fb__chordbtn[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--accent); }

/* Buttons with weight: they go down a little slower than a flick and come back with a taper, and the keys sink into the module. */
:root[data-theme] #board :is(.fb1, .fb2, .fb3, .transport, .mdial__key, .tstep, .chip, .fbtn) { transition: transform .22s cubic-bezier(.2, .7, .2, 1), box-shadow .22s ease-out, background-color .2s, border-color .2s; }
:root[data-theme] #board :is(.fb1, .fb2, .fb3, .transport, .mdial__key, .tstep, .chip, .fbtn):active:not(:disabled):not(:has(.picker__pop:active)) { transform: translateY(1.5px) scale(.97); transition-duration: .09s; box-shadow: inset 0 3px 6px rgb(0 0 0 / .35); }
@media (prefers-reduced-motion: reduce) { :root[data-theme] #board :is(.fb1, .fb2, .fb3, .transport, .mdial__key, .tstep, .chip, .fbtn) { transition: none; } }

/* The account menu as thin as Universal settings: one narrow scrolling column. */
.usermenu__panel {    border-radius: 12px; max-height: min(520px, calc(100vh - 90px)); }
.usermenu__sec { gap: 4px; }
.usermenu__sec + .usermenu__sec { padding-top: 6px; }
.usermenu__panel :is(.rack, .rig, .tcbar) { flex-wrap: wrap; gap: 6px; }
.usermenu__panel :is(.rig__label, .flip__name, .knob__name, .rocker__name) { font-size: 10px; }
.usermenu__panel button, .usermenu__panel .picker__btn { min-height: 0; }


/* The Metronome as a bar: the notation and the speed curve take the whole height of the dial beside them (no black left over). */
:root[data-theme] #board [data-pedal="metronome"][data-bar]:not([data-strip]) .met .mcol--mid { display: flex; flex-direction: column; }
:root[data-theme] #board [data-pedal="metronome"][data-bar]:not([data-strip]) .met .mcol--mid > .beatrow { flex: 1 1 0; display: flex; flex-direction: column; min-height: 0; }
:root[data-theme] #board [data-pedal="metronome"][data-bar]:not([data-strip]) .met .beatrow > .beatstage { flex: 1 1 0; min-height: 0; }

/* Tabs' song info chips (tuning, key, scales, chords) in the info line, and their list. */
:root[data-theme] #board .tabm__chip { display: inline-flex; flex-direction: column;   width: auto; min-width: var(--fr-b1); max-width: 110px;  flex: none; }
:root[data-theme] #board .tabm__chipname { font: 700 8px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); }
:root[data-theme] #board .tabm__chipval { font: 700 10px/1.1 var(--sans); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabm__infopop { position: fixed; z-index: 300; max-width: min(340px, calc(100vw - 16px)); padding: 8px 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line-2); box-shadow: 0 10px 30px rgb(0 0 0 / .35); font: 500 11px/1.4 var(--sans); color: var(--ink); }
.tabm__infopop b { display: block; font: 700 10px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 4px; }
.tabm__infopop p { margin: 2px 0; }

/* QA fixes: the chord buttons' small word is on the type scale, the info line's buttons stay clear of the corner buttons, and focus rings inside scrolling boxes sit inside them. */
:root[data-theme] #board .pedal[data-frame] .mline--5 .fb__chordbtn small { font-size: 10px; }

.usermenu__panel :focus-visible, .rset :focus-visible, .usettings__box :focus-visible { outline-offset: -2px; }
:root[data-theme] #board .pedal[data-frame] :is(.fb1, .fb2) > .knob .knob__dial:focus-visible { outline-offset: 1px; }
:root[data-theme] #board [data-card="progress"] .pdash__grid3 { margin-bottom: 18px; }

/* On a narrow module the info line's buttons take a line of their own under the words, scrolling sideways when there are many. */

/* Line 5: the extra lane under the info line, as tall as the control lines; only there when it holds something, and while editing. */
:root[data-theme] #board > .pedal[data-frame] > .mline--5 { height: var(--fr-line); margin: 4px 0 0; padding-right: 62px; }
:root[data-theme] #board > .pedal[data-frame] > .mline--5 > .mline__l { flex: 1 1 auto; overflow-x: auto; scrollbar-width: none; }
:root[data-theme] #board > .pedal[data-frame] > .mline--5 > .mline__r { flex: none; }
:root[data-theme] #board > .pedal[data-frame] > .mline--5 > .mline__l::-webkit-scrollbar { display: none; }
:root[data-theme] #board > .pedal.is-arranging[data-frame] > .mline--5.is-empty { display: flex; }
:root[data-theme] #board > .pedal--tabs[data-frame]:not(.has-song) > .mline--5 { display: none; }
:root[data-theme] #board > .pedal[data-frame] > .mline--5 .fb__side { display: flex; align-items: center; gap: var(--fr-gap); flex: none; }

/* The Sweep view's chord buttons: a button 1 with the chord and its degree, like the others on the line. */
:root[data-theme] #board .pedal[data-frame] .mline--5 .fb__chordbtn { width: auto; min-width: 44px; }

/* The account menu as thin as Universal settings, in its type: rows of 10 px bold, small caps headings, the same row height. */
:root[data-theme] .usermenu__panel { width: min(360px, calc(100vw - 24px)); gap: 6px; padding: 8px 10px; }
:root[data-theme] .usermenu__panel .rig__label, :root[data-theme] .usermenu__panel .rack__unit > .rig__label { font: 700 10px/1 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); }
:root[data-theme] .usermenu__panel .rack__unit { grid-template-columns: 74px minmax(0, 1fr); min-height: 30px; }
:root[data-theme] .usermenu__panel :is(.btn, .rigtoggle, .picker__btn) { font-size: 10px; font-weight: 700; }
:root[data-theme] .usermenu__panel .usermenu__h { font: 700 10px/1 var(--display); letter-spacing: .08em; }
:root[data-theme] .usermenu__panel .themeswitch :is(button, .btn) { font-size: 10px; padding: 0 8px; min-height: 26px; }
:root[data-theme] .usermenu__panel .acct__btn { font-size: 10px; font-weight: 700; min-height: 32px; }

.tcbar__unit[hidden] { display: none !important; }

/* The voicing and sweep-shape buttons on the extra line: each says what it is (its CAGED shape and fret) and is wide enough to. */
:root[data-theme] #board .pedal[data-frame] .mline--5 :is(.fb__pos, .fb__arp) { width: auto; min-width: 60px; padding: 0 8px 0 10px; flex: none; }
:root[data-theme] #board .pedal[data-frame] .mline--5 .fb__legend { gap: var(--fr-gap); }

:root[data-theme] #board .mline--5 > .mline__l { overflow: visible; }
:root[data-theme] #board [data-card="routines"] .mcol__knobs:not(:has(> :not([hidden]))) { display: none; }

/* A song's notes on the neck in the light looks: the note the song is on is a dark dot, so its name is white. */
:root[data-theme="aluminium"] .fb__note.is-now .fb__dot, :root[data-theme="walnut"] .fb__note.is-now .fb__dot { --dot-ink: #fff; color: #fff; }

/* Routines with nothing down its left side (the ladder and the knobs moved): the loop boxes take the whole width, so more show. */
:root[data-theme] #board [data-card="routines"].is-solo .met__routines { grid-template-columns: 0 minmax(0, 1fr); column-gap: 0; }
:root[data-theme] #board [data-card="routines"].is-solo.has-side:not(.is-sideoff) .met__routines[data-colhost] { grid-template-columns: 0 minmax(0, 1fr) 280px; }
:root[data-theme] #board [data-card="routines"].is-solo .met__routines > .mcol--left { min-width: 0; overflow: hidden; padding: 0; margin: 0; }

/* While a song or lesson has the neck the chord and sweep buttons stay but rest. */
.fb__side.is-idle { opacity: .45; }

/* ══ PRESET BOXES IN EDIT MODE ══ the box keeps its size in every view (presets.js fitEditing locks it); only its look changes:
   a yellow glow that breathes bright and dim round it, the rest of its look as usual. What is inside scales with the box
   (--edit-fit), and its menus open at the page level (picker portal), so nothing cuts them off. */
:root[data-theme] #board [data-card="routines"]:is([data-loopview], :not([data-loopview])) .loopcard.is-editing.is-editing {
  --glow: #FFD43B;
  position: relative; overflow: hidden; outline: 0; padding-top: 7px;
  border-color: var(--glow); background: color-mix(in srgb, var(--glow) 9%, var(--surface-2));
  box-shadow: 0 0 0 2px var(--glow), 0 0 10px 1px color-mix(in srgb, var(--glow) 45%, transparent);
}
/* The breathing is a glow layer fading in and out (opacity only: the compositor's work, nothing repainted). */
:root[data-theme] #board [data-card="routines"] .loopcard.is-editing.is-editing::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3;
  box-shadow: 0 0 18px 3px color-mix(in srgb, var(--glow) 70%, transparent), inset 0 0 18px color-mix(in srgb, var(--glow) 32%, transparent);
  animation: edit-glow 1.8s ease-in-out infinite alternate; will-change: opacity;
}
@keyframes edit-glow { from { opacity: .15; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { :root[data-theme] #board [data-card="routines"] .loopcard.is-editing.is-editing::after { animation: none; opacity: .6; } }
:root[data-theme] #board [data-card="routines"] .loopcard.is-editing > * { zoom: var(--edit-fit, 1); max-width: calc(100% / var(--edit-fit, 1)); }
/* While edited a box shows only its controls: the song description goes (it wrapped and pushed the box about). */
:root[data-theme] #board [data-card="routines"] .loopcard.is-editing :is(.phrasecard__notes, .loopcard__song) { display: none; }
:root[data-theme] #board [data-card="routines"] .loopcard.is-editing .loopcard__name { background: var(--ctl-bg, var(--surface)); color: var(--ink); border: 1px solid var(--ctl-edge, var(--line-2)); }
.picker__pop--portal { z-index: 300 !important; }
/* A box just made (a recorded phrase): it breathes green for a few seconds so it is easy to find in the row. */
:root[data-theme] #board [data-card="routines"] .loopcard.is-new { animation: new-glow .7s ease-in-out 6 alternate; border-color: var(--good); }
@keyframes new-glow { from { box-shadow: 0 0 0 1px color-mix(in srgb, var(--good) 40%, transparent), 0 0 4px color-mix(in srgb, var(--good) 25%, transparent); } to { box-shadow: 0 0 0 2px var(--good), 0 0 16px 3px color-mix(in srgb, var(--good) 65%, transparent); } }
@media (prefers-reduced-motion: reduce) { :root[data-theme] #board [data-card="routines"] .loopcard.is-new { animation: none; box-shadow: 0 0 0 2px var(--good); } }

/* A box's Bars and Tempo: a menu button; pressed again it turns into a number field (is-typing). */
:root[data-theme] #board .loopcard.is-editing .menutype:not(.is-typing) > input, :root[data-theme] #board .loopcard.is-editing .menutype:not(.is-typing) > .tempo > input { display: none; }
:root[data-theme] #board .loopcard.is-editing .menutype:not(.is-typing) > .picker { display: inline-flex; }
:root[data-theme] #board .loopcard.is-editing .menutype.is-typing > .picker { display: none; }
:root[data-theme] #board .loopcard:not(.is-editing) [data-bpmpick] { display: none; }

/* The Rhythm menu, in the Metronome and on a preset box: a third bigger than the other menus, centred on the screen (zoom scales lengths too, so the middle is 50vh / zoom). */
.picker__pop[role="listbox"][aria-label="Rhythm"]:not([hidden]) { --rz: 1.333; zoom: var(--rz); position: fixed !important; z-index: 300 !important; top: calc(50vh / var(--rz)) !important; left: calc(50vw / var(--rz)) !important; right: auto !important; bottom: auto !important; transform: translate(-50%, -50%); max-width: min(560px, calc(92vw / var(--rz))) !important; max-height: calc(92vh / var(--rz)) !important; overflow-y: auto; overscroll-behavior: contain; }

/* ══ NOT CONNECTED (30 Oct): with nothing listening, the rush/drag bar shrinks and dims, and a button over it offers
   to connect (it opens the settings at Connect). Connected, the button is gone and the bar is as before. */
.tline { position: relative; }
.tline__connect { display: none; }
:root.is-unplugged .tline > :not(.tline__connect) { opacity: .3; filter: saturate(.3); transform: scaleY(.55); pointer-events: none; transition: opacity .2s, transform .2s; }
:root.is-unplugged .tline__connect {
  display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
  font: 700 var(--fs-title, 11px)/1 var(--display); letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 4px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-body);
}
:root.is-unplugged .tline__connect:hover { color: var(--ink); border-color: var(--accent); }

/* ══ SLIM METRONOME (30 Oct, owner's order): at its smallest size the Metronome is one slim line — BPM, signature and
   rhythm as volume-sized buttons, then the notation, then the rush/drag bar (about 2½–3 in, growing with the window),
   then a small settings button (with edit and size) at the right edge. Phones too. */
:root[data-theme] #board [data-pedal="metronome"][data-strip] { position: relative; padding-block: 6px !important; }
:root[data-theme] #board [data-pedal="metronome"][data-strip] > :is(.pedal__head, .mborder, .modmove, .mline) { display: none !important; }
:root[data-theme] #board [data-pedal="metronome"][data-strip] > .mgear { position: absolute; right: 62px; top: 50%; transform: translateY(-50%); z-index: 3; width: auto; }
:root[data-theme] #board [data-pedal="metronome"][data-strip] > .mgear > .mgear__lead { display: none !important; }
:root[data-theme] #board [data-pedal="metronome"][data-strip] > :is(.modsize, .medit) { position: absolute !important; top: 50% !important; bottom: auto !important; transform: translateY(-50%); z-index: 3; }
:root[data-theme] #board [data-pedal="metronome"][data-strip] > .medit { right: 36px !important; }
:root[data-theme] #board [data-pedal="metronome"][data-strip] > .modsize { right: 10px !important; }
:root[data-theme] #board [data-pedal="metronome"][data-strip] .pedal__body { padding-right: 92px; }
:root[data-theme] #board [data-pedal="metronome"][data-strip] .met[data-colhost] { height: 44px; gap: 10px; padding: 0 0 0 4px; }
:root[data-theme] #board [data-pedal="metronome"][data-strip] .met > .take__top,
:root[data-theme] #board [data-pedal="metronome"][data-strip] .mdial__step,
:root[data-theme] #board [data-pedal="metronome"][data-strip] .tcbpm__box .picker__title { display: none !important; }
:root[data-theme] #board [data-pedal="metronome"][data-strip] .mdial__screen { gap: 4px; }
:root[data-theme] #board [data-pedal="metronome"][data-strip] .mdial__bpm :is(input, .tcbpm) { width: 88px; height: 34px; box-sizing: border-box; font: 800 19px/1 var(--sans); font-variant-numeric: tabular-nums; text-align: center; padding: 0; cursor: ns-resize; }
:root[data-theme] #board [data-pedal="metronome"][data-strip] .mdial__meter { gap: 8px; }
:root[data-theme] #board [data-pedal="metronome"][data-strip] .mdial__meter .picker > .picker__btn { width: 76px; height: 34px !important; min-height: 34px !important; justify-content: center; }
:root[data-theme] #board [data-pedal="metronome"][data-strip] .met .mcol--mid { flex: 1 1 auto; min-width: 0; height: 44px; overflow: visible; }
:root[data-theme] #board [data-pedal="metronome"][data-strip] .met .beatrow { display: flex !important; flex-direction: row !important; align-items: center; gap: 10px; height: 44px !important; margin: 0; }
:root[data-theme] #board [data-pedal="metronome"][data-strip] .met .beatrow > .beatstage { flex: 1 1 auto; min-width: 0; height: 120px !important; overflow: hidden; zoom: .34 !important; display: flex; align-items: center; }   /* about 40 px: a whole bar of notes, nothing cut */
:root[data-theme] #board [data-pedal="metronome"][data-strip] .beatnotation { padding: 0 12px !important; }
:root[data-theme] #board [data-pedal="metronome"][data-strip] .met .beatrow > .tline { display: flex !important; flex: 0 0 clamp(90px, 24vw, 380px); width: clamp(90px, 24vw, 380px); height: 28px; margin: 0; }
:root[data-theme] #board [data-pedal="metronome"][data-strip] .met .beatrow > .tline > .tbar--line { flex: 1 1 auto; }
:root[data-theme] #board [data-pedal="metronome"][data-strip] .tline .tbar__stats { display: none; }
/* A phone: two slim lines — BPM, signature, rhythm and the settings on the first; the notes and the rush/drag bar under. */
@media (max-width: 600px) {
  :root[data-theme] #board [data-pedal="metronome"][data-strip] .pedal__body { padding-right: 0; }
  :root[data-theme] #board [data-pedal="metronome"][data-strip] .met[data-colhost] { height: auto !important; flex-wrap: wrap; row-gap: 4px; justify-content: flex-start; }
  :root[data-theme] #board [data-pedal="metronome"][data-strip] .met .mcol--mid { flex: 1 1 100%; }
  :root[data-theme] #board [data-pedal="metronome"][data-strip] > :is(.mgear, .modsize, .medit) { top: 24px !important; }
}
.tline__short { display: none; }
@media (max-width: 900px) { [data-pedal="metronome"][data-strip] .tline__long { display: none; } [data-pedal="metronome"][data-strip] .tline__short { display: inline; } }

/* ══ SCALE TIMELINE (30 Oct): the Scales info is a timeline of the song's scales, each as long as its bars; a play line
   follows the song; "Flash scale changes" flashes the new scale's name and length over Tabs. */
.tabm__infopop.has-timeline { max-width: min(560px, calc(100vw - 16px)); width: min(560px, calc(100vw - 16px)); }
.tabm__tl { position: relative; display: flex; gap: 2px; margin: 6px 0 8px; }
.tabm__tlseg { min-width: 0; display: grid; gap: 1px; padding: 5px 6px; border: 1px solid var(--line-2); border-radius: 4px; background: var(--surface-2, var(--surface)); color: var(--ink); text-align: left; cursor: pointer; overflow: hidden; }
.tabm__tlseg span { font: 600 11px/1.15 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tabm__tlseg small { font: 500 10px/1 var(--sans); color: var(--ink-mute); white-space: nowrap; }
.tabm__tlseg:nth-child(even) { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.tabm__tlseg.is-now { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.tabm__tlhead { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--accent); border-radius: 1px; pointer-events: none; transition: left .3s linear; }
[data-card="tabs"] { position: relative; }
.tabm__flash { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); z-index: 20; pointer-events: none; display: grid; gap: 4px; text-align: center;
  padding: 14px 22px; border-radius: 12px; background: color-mix(in srgb, var(--surface) 92%, transparent); border: 2px solid var(--accent); box-shadow: 0 12px 34px rgb(0 0 0 / .35);
  animation: tabm-flash 2.6s ease-out forwards; }
.tabm__flash b { font: 800 26px/1.05 var(--display); letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
.tabm__flash span { font: 600 13px/1 var(--sans); color: var(--ink-mute); }
@keyframes tabm-flash { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.9); } 10%, 70% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tabm__flash { animation-duration: 2.6s; animation-name: none; } }
/* The blank days before the 1st are as tall as the real days (square, they made the first week tall; glitch hunt, 30 Oct). */
.pdash__cal .cal__grid .cal__cell.is-empty { height: 34px; aspect-ratio: auto; }
/* The slim Metronome keeps its Start/Stop (glitch hunt, 30 Oct): the dial's ▶ key, first in the line. */
:root[data-theme] #board [data-pedal="metronome"][data-strip] .mdial > .mdial__foot { display: flex !important; order: -1; margin: 0 6px 0 0; position: static; }
:root[data-theme] #board [data-pedal="metronome"][data-strip] .mdial__foot > :not(.mdial__key--run) { display: none !important; }
:root[data-theme] #board [data-pedal="metronome"][data-strip] .mdial__key--run .transport { width: 52px; height: 34px; min-height: 34px; padding: 0; }
/* Narrow phones (glitch hunt, 30 Oct): the sweep chords and the Tabs info line scroll sideways instead of hiding what
   doesn't fit. */
@media (max-width: 420px) {
  :root[data-theme] #board .pedal[data-frame] :is(.mline--2, .mline--5) .fb__side .fb__arps { overflow-x: auto; max-width: calc(100vw - 48px); scrollbar-width: none; }
  :root[data-theme] #board .pedal[data-frame] :is(.mline--2, .mline--5) .fb__side .fb__arps > * { flex: none; }
  :root[data-theme] #board > .pedal[data-frame] > .mline--4 .mline__l,
  :root[data-theme] #board > [data-card="tabs"][data-frame] > .mline--5 .mline__l { overflow-x: auto; scrollbar-width: none; }
}
/* The big Rhythm menu stays clear of a phone's bottom tab bar. */
@media (max-width: 760px) { .picker__pop[role="listbox"][aria-label="Rhythm"]:not([hidden]) { max-height: calc(78vh / var(--rz)) !important; top: calc(46vh / var(--rz)) !important; } }

/* ══ ONE LOOK FOR EVERY SETTINGS BOX (30 Oct): Fretboard, Metronome, Routines and Tabs settings share one type — names
   10 px bold in the ink, values 10 px semibold in the accent — and Tabs' Look menu is a row like the others, not a big
   button. */
:root[data-theme] #board :is(.pedal__headctl, .rset) :is(.flip__name, .knob__name, .rocker__name, .rset__name) { font: 700 10px/1.2 var(--sans) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--ink) !important; }
:root[data-theme] #board :is(.pedal__headctl, .rset) :is(.flip__val, .knob__val) { font: 600 10px/1 var(--sans) !important; letter-spacing: 0 !important; color: var(--accent) !important; }
:root[data-theme] #board .pedal--tabs .tabm__set .tabm__setpick > .picker__btn { min-height: 34px; height: 34px; }
:root[data-theme] #board .pedal--tabs .tabm__set .tabm__setpick > .picker__btn .picker__title { font: 700 10px/1.2 var(--sans) !important; color: var(--ink) !important; }
:root[data-theme] #board .pedal--tabs .tabm__set .tabm__setpick > .picker__btn .picker__cur { font: 600 10px/1 var(--sans) !important; color: var(--accent) !important; }
:root[data-theme] #board .pedal--tabs .tabm__set .tabm__setpick > .picker__btn .picker__caret { font-size: 9px; margin-left: 4px; }
:root[data-theme] #board :is(.pedal__headctl, .rset) .seticon { width: 14px; height: 14px; flex: none; vertical-align: -3px; margin-right: 8px; }
/* Every settings row one height: 35 px with its divider. */
:root[data-theme] #board :is(.pedal__headctl, .rset) > .tcbar__unit:not([hidden]) { box-sizing: border-box; min-height: 35px; }
:root[data-theme] #board :is(.pedal__headctl, .rset) > .tcbar__unit:not([hidden]) > :is(.flip, .knob, .rset__row, .tabm__setpick) { min-height: 34px !important; }
/* Universal settings in the same type as the module settings: names 10 px bold, values 10 px semibold in the accent,
   On/Off 10 px; a slider's value sits beside it on its row, not under it. */
:root[data-theme] #usermenu .rig__value { font: 600 10px/1 var(--sans) !important; color: var(--accent); min-width: 34px; text-align: right; }
:root[data-theme] #usermenu .rack__ctl:has(> .rig__slider) { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; }
:root[data-theme] #usermenu .rack__ctl > .rig__slider { flex: 1 1 auto; min-width: 0; }
:root[data-theme] #usermenu :is(.seg, .onoff, .rack__ctl) > button:not(.btn) { font: 700 10px/1 var(--sans); }
:root[data-theme] #usermenu .themerow { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
:root[data-theme] #usermenu .themerow__opt { width: auto !important; min-width: 0; justify-content: flex-start; }
:root[data-theme] #usermenu .themerow__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Design QA (30 Oct): the Tabs info chips hold their title and value whole and centred (the value was clipped to 9 px),
   and the Fretboard's ▶ on the control line keeps its words for screen readers only (aria-label), not as tiny text. */
:root[data-theme] #board .tabm__chip { align-items: center !important; padding: 0 6px !important;  overflow: visible; }
:root[data-theme] #board .tabm__chip :is(.tabm__chipname, .tabm__chipval) { display: block; max-width: 100%; text-align: center; height: auto; max-height: none; }
:root[data-theme] #board .tabm__chip .tabm__chipname { font: 600 10px/10px var(--display) !important; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-mute); }
:root[data-theme] #board .tabm__chip .tabm__chipval { font-size: 10px !important; line-height: 11px !important; height: 11px !important; }
:root[data-theme] #board .tabm__chip .tabm__chipname { height: 10px !important; }
:root[data-theme] #board .tabm__chip { gap: 0 !important; justify-content: center !important; }
:root[data-theme] #board > [data-card="tabs"] .mline__l:has(> .tabm__chip) { padding: 5px 5px !important; margin: -5px -5px !important; }   /* room for the focus ring */
:root[data-theme] #board .pedal[data-frame] .fb__playunit .fb__play__word { display: none !important; }
/* A control moved into a settings box in edit mode arrives without its row: it gets the row's padding, height and
   divider, so it lines up with the rows around it (Tabs' Speed knob sat flush against the edge). */
:root[data-theme] #board :is(.pedal__headctl, .rset) > :is(.knob, .flip, .rocker) { box-sizing: border-box; padding: 0 var(--g13) !important; min-height: 35px !important; margin: 0 !important; border-top: 1px solid var(--line); }
:root[data-theme] #board :is(.pedal__headctl, .rset) > :is(button, .picker, .fbseg) { margin: 6px var(--g13) !important; align-self: stretch; }
:root[data-theme] #board :is(.pedal__headctl, .rset) > :is(button, .picker, .fbseg) + * { border-top: 1px solid var(--line); }

/* ══ HARMONY WHEEL (31 Oct): the Fretboard's chords, arpeggios and sweeps on a wheel of fifths beside the neck, the size
   of the Metronome's dial and in the same glass, shrinking with the module. Majors outside, relative minors, diminished
   inside; the window at the top holds the key's seven chords, coloured by what they do: home, away, tension. */
[data-pedal="fret"] { --wheel: 281px; }
/* The wheel takes the neck's own size: its six strings fill its height, so at full size it is 162 px of neck and 24 of margin,
   and it grows with the neck up to 281 (module size 1.58).  */
[data-pedal="fret"].has-wheel { --wheel: calc(162px * var(--msize, 1) + 2px); }
[data-pedal="fret"].has-wheel:where([data-bp~="max719"]) { --wheel: min(281px, calc(100vw - 80px)); }
.fb__stage { display: flex; align-items: flex-start; gap: var(--g13); min-width: 0; }
.fb__stage > .fb__wrap { flex: 1 1 auto; min-width: 0; }
[data-pedal="fret"][data-wheelside="right"]:not([data-bp~="max719"]) .fb__stage { flex-direction: row-reverse; }
[data-pedal="fret"]:where([data-bp~="max719"]) .fb__stage { flex-direction: column; align-items: stretch; }
.hw { flex: none; display: flex; flex-direction: column; align-items: center; gap: var(--g8); padding: 10px 10px 0; }
.hw[hidden] { display: none !important; }
:root[data-theme] .hw__dial {
  position: relative; width: var(--wheel); height: var(--wheel); flex: none; border-radius: 50%;
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
  background: radial-gradient(circle at 50% 40%, var(--glass-deep), var(--glass-bg) 72%);
  box-shadow: inset 0 3px 16px var(--glass-shade), 0 0 0 9px var(--glass-bezel), 0 0 0 10px var(--glass-rim), 0 6px 18px rgb(0 0 0 / .35);
}
.hw__dial.is-turning { cursor: grabbing; }
.hw__dial:focus-visible { outline: 3px solid var(--accent); outline-offset: 13px; }
.hw__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hw__disc { transform-box: view-box; transform-origin: 108px 108px; }
.hw__disc.is-spinning { transition: transform .32s cubic-bezier(.2, .8, .2, 1); }
.hw__seg { cursor: pointer; }
.hw__seg path { fill: color-mix(in srgb, var(--glass-ink) 6%, transparent); stroke: var(--glass-bg); stroke-width: 1.4; transition: fill .15s; }
.hw__seg text { font-family: var(--sans); font-weight: 700; text-anchor: middle; dominant-baseline: central; fill: color-mix(in srgb, var(--glass-ink) 58%, transparent); pointer-events: none; }
.hw__seg text.hw__num { font-weight: 600; letter-spacing: .02em; }
.hw__seg.is-key text { fill: var(--glass-ink); }
.hw__seg.is-home path { fill: color-mix(in srgb, var(--good) 34%, transparent); }
.hw__seg.is-away path { fill: color-mix(in srgb, var(--early) 36%, transparent); }
.hw__seg.is-tension path { fill: color-mix(in srgb, var(--late) 36%, transparent); }
.hw__seg:hover path { fill: color-mix(in srgb, var(--accent) 34%, transparent); }
.hw__seg.is-cur path { fill: var(--accent); }
.hw__seg.is-cur text { fill: var(--accent-ink); }
.hw__mark { fill: var(--glass-ink); pointer-events: none; }
.hw__seg.is-cur .hw__mark { fill: var(--accent-ink); }
.hw__window { fill: none; stroke: var(--glass-ink); stroke-width: 1.6; stroke-linejoin: round; filter: drop-shadow(0 0 3px var(--glass-glow)); pointer-events: none; }
.hw__seg text.hw__num--rim { fill: var(--glass-ink); }
.hw__seg.is-cur text.hw__num--rim { fill: var(--accent); }
.hw__dial { container-type: inline-size; }
/* A small wheel (the neck at its first size) keeps the type of the scale rather than shrinking it: smaller words, same sizes of button. */
@container (max-width: 240px) { .hw__name { font-size: 21px; } .hw__numeral { font-size: 10px; } }
.hw__screen {
  position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: calc(var(--wheel) * .5); height: calc(var(--wheel) * .5);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--glass-ink); pointer-events: none; text-align: center;
}
.hw__screen :is(button, .picker) { pointer-events: auto; }
:root[data-theme] .hw__key { font: 600 10px/1.2 var(--sans); color: color-mix(in srgb, var(--glass-ink) 82%, transparent); background: none; border: 0; padding: 2px 6px; border-radius: 5px; cursor: pointer; white-space: nowrap; }
:root[data-theme] .hw__key:hover { color: var(--glass-ink); background: var(--glass-faint); }
.hw__line { display: flex; align-items: baseline; justify-content: center; gap: 4px; max-width: 100%; }
.hw__name { font: 700 26px/1 var(--display); letter-spacing: .02em; color: var(--glass-ink); text-shadow: 0 0 10px var(--glass-glow); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-pedal="fret"][data-small] .hw__name { font-size: 21px; }
.hw__numeral { font: 700 11px/1 var(--sans); color: var(--glass-ink); }
:root[data-theme] .hw__screen :is(.hw__type, .hw__sweep) { display: flex; justify-content: center; max-width: 100%; }
:root[data-theme] .hw__screen :is(.hw__type, .hw__sweep)[hidden] { display: none; }
:root[data-theme] .hw__screen .picker { width: auto; max-width: 100%; min-width: 0; margin: 0; }
:root[data-theme] #board .hw__screen .picker > .picker__btn {
  width: auto; min-width: 0; max-width: calc(var(--wheel) * .46); height: 20px; min-height: 0; padding: 0 6px; gap: 4px;
  border: 0; border-radius: 5px; background: transparent; box-shadow: none; color: var(--glass-ink);
}
:root[data-theme] #board .hw__screen .picker > .picker__btn:is(:hover, [aria-expanded="true"]) { background: var(--glass-faint); }
:root[data-theme] #board .hw__screen .picker > .picker__btn .picker__title { display: none; }
:root[data-theme] #board .hw__screen .picker > .picker__btn .picker__face { flex: 0 1 auto; min-width: 0; overflow: hidden; }
:root[data-theme] #board .hw__screen .picker > .picker__btn .picker__cur { font: 600 11px/1.2 var(--sans); color: var(--glass-ink); opacity: .9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root[data-theme] #board .hw__screen .picker > .picker__btn .picker__caret { width: 6px; height: 6px; border-width: 0 1.5px 1.5px 0; border-color: var(--glass-ink); opacity: .7; }
.hw__shape { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 4px; }
:root[data-theme] .hw__step {
  display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; cursor: pointer;
  background: var(--glass-key); border: 1.5px solid var(--glass-dim); border-radius: 6px; color: var(--glass-ink); font: 700 13px/1 var(--sans);
}
:root[data-theme] .hw__step:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
:root[data-theme] .hw__step:disabled { opacity: .35; cursor: default; }
.hw__shapename { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 70px; font: 600 10px/1.2 var(--sans); color: var(--glass-ink); white-space: nowrap; }
.hw__shapename i { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--sw, transparent); box-shadow: 0 0 0 1px var(--glass-bg); }
.hw__foot { display: flex; align-items: center; justify-content: center; gap: 6px; padding-top: 4px; }
.hw__foot:not(:has(*)) { display: none; }
:root[data-theme] .hw__views { display: inline-flex; height: 22px; border: 1px solid var(--ctl-edge, var(--line-2)); border-radius: 6px; overflow: hidden; background: var(--ctl-bg, var(--surface)); }
:root[data-theme] .hw__views button { height: 100%; padding: 0 10px; border: 0; background: transparent; color: var(--ink-body); font: 700 10px/1 var(--sans); cursor: pointer; }
:root[data-theme] .hw__views button + button { border-left: 1px solid var(--ctl-edge, var(--line-2)); }
:root[data-theme] .hw__views button[aria-checked="true"] { background: var(--accent); color: var(--accent-ink); }
:root[data-theme] .hw__views button:focus-visible { outline: 2px solid var(--ink); outline-offset: -3px; }
:root[data-theme] .hw__play:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
:root[data-theme] .hw__play {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 22px; padding: 0; cursor: pointer;
  border: 1px solid var(--ctl-edge, var(--line-2)); border-radius: 6px; background: var(--ctl-bg, var(--surface)); color: var(--ink); font: 700 11px/1 var(--sans);
}
@media (prefers-reduced-motion: reduce) { .hw__disc.is-spinning { transition: none; } }

/* Wheel left or right (edit mode, ui/frame.js): the Metronome's dial swaps sides with its beat view (not on a phone,
   where it sits above, nor in the slim bar). */
:root[data-theme] [data-pedal="metronome"][data-wheelside="right"]:not([data-bp~="max719"]):not([data-strip]) .met[data-colhost] {
  grid-template-columns: minmax(0, 1fr) calc(var(--dial) + 22px); padding: var(--g13) var(--g8) var(--g13) var(--g13);
}
:root[data-theme] [data-pedal="metronome"][data-wheelside="right"].has-side:not(.is-sideoff):not([data-bp~="max719"]):not([data-strip]) .met[data-colhost] {
  grid-template-columns: minmax(0, 1fr) calc(var(--dial) + 22px) 280px;
}
:root[data-theme] [data-pedal="metronome"][data-wheelside="right"]:not([data-bp~="max719"]):not([data-strip]) .met > .mcol--mid { grid-column: 1; }
:root[data-theme] [data-pedal="metronome"][data-wheelside="right"]:not([data-bp~="max719"]):not([data-strip]) .met > .mcol--left { grid-column: 2; }
:root[data-theme] [data-pedal="metronome"][data-wheelside="right"]:not([data-bp~="max719"]):not([data-strip]) .met > .mcol--right { grid-column: 3; }
.marrange__wheel { display: inline-flex; gap: 0; }
.marrange__wheel > .fb1[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }


/* Ask Bub's way back is a word, not the lessons' round arrow. */
.teach__say .school__back[data-faqback] { width: auto; height: 29px; padding: 0 var(--g8); border-radius: 8px; white-space: nowrap; }
.picker__popclose { align-self: flex-end; flex: none; height: 28px; min-height: 28px; padding: 0 var(--g8); }
.picker__popclose[hidden] { display: none; }
/* Phone, Detect: the readout keeps to its one line under the neck; what does not fit slides sideways instead of being cut off. */
:root[data-theme] [data-pedal="fret"]:where([data-bp~="max719"]) .mline .fb__now { overflow: hidden; }
:root[data-theme] [data-pedal="fret"]:where([data-bp~="max719"]) .mline .fb__ident { flex-wrap: nowrap; justify-content: flex-start; height: 100%; min-height: 0; padding: 0; overflow: auto hidden; scrollbar-width: none; }
:root[data-theme] [data-pedal="fret"]:where([data-bp~="max719"]) .mline .fb__ident::-webkit-scrollbar { display: none; }
:root[data-theme] [data-pedal="fret"]:where([data-bp~="max719"]) .mline .fb__ident > * { flex: none; line-height: 1; }
/* Phone, Tabs settings: held between the header and the tab bar, scrolling inside, so the last rows are never under the bar. */
@media (max-width: 719px) {
  :root[data-theme] .pedal--tabs .tabm__set { position: fixed; left: 12px; right: 12px; top: 64px; width: auto; max-width: none; max-height: calc(100dvh - 64px - var(--tabbar-h, 58px) - env(safe-area-inset-bottom) - 8px); overflow-y: auto; overscroll-behavior: contain; }
}
/* Slim Metronome: the ▶ stands on the line with the rest (the dial's centring nudge no longer applies) and the bar of notes stays inside the strip. */
:root[data-theme] #board [data-pedal="metronome"][data-strip] .mdial > .mdial__foot { transform: none; }
:root[data-theme] #board [data-pedal="metronome"][data-strip] .beatstage > .beatviz { flex: 1 1 auto; min-width: 0; width: 100%; height: 100% !important; margin: 0 !important; background: none; border: 0; box-shadow: none; }
:root[data-theme] #board [data-pedal="metronome"][data-strip] .beatstage .beatnotation { height: 100% !important; margin: 0; padding: 0 12px !important; align-items: center; justify-content: space-around; overflow: hidden; }
:root[data-theme] #board [data-pedal="metronome"][data-strip] .beatstage > .take { display: none; }   /* the routine's tempo line belongs to the big view: here it ran through the notes */
/* Slim Metronome on a phone: the first line starts at the left edge, clear of the gear. */
@media (max-width: 600px) {
  :root[data-theme] #board [data-pedal="metronome"][data-strip] .met .mcol--left { margin-right: auto; flex: 0 0 auto; justify-content: flex-start; }
  :root[data-theme] #board [data-pedal="metronome"][data-strip] .mdev, :root[data-theme] #board [data-pedal="metronome"][data-strip] .mdial { justify-content: flex-start; width: auto; }
  :root.is-unplugged [data-pedal="metronome"][data-strip] .tline__connect { padding-inline: 5px; letter-spacing: .02em; }
}
/* Long tempo names (Andante moderato) fit whole between the dial's top numbers. */
:root[data-theme] .mdev .mdial__name .picker > .picker__btn .picker__cur { font-size: 11px; letter-spacing: 0; }
/* The signature on an open loop card shows whole (4/4, not "4."). */
:root[data-theme] #board [data-card="routines"] .loopcard.is-editing .picker__btn { padding-inline: 2px; }
:root[data-theme] #board [data-card="routines"] .loopcard.is-editing .picker__cur { overflow: visible; text-overflow: clip; }
:root[data-theme] #board [data-card="routines"] .loopcard.is-editing .picker__cur { flex: none; }

/* SLIM METRONOME BUTTONS (5 Nov): Start, tempo, signature and rhythm are four real, raised buttons, 34 px tall, filling the line;
   the tempo is centred and still turns by dragging up and down or with the wheel. */
:root[data-theme] #board [data-pedal="metronome"][data-strip] :is(.mdial__key--run .transport, .mdial__bpm input.tcbpm, .mdial__meter .picker > .picker__btn) {
  background: var(--ctl-bg, var(--surface)); color: var(--ink); border: 1px solid var(--ctl-edge, var(--line-2)); border-radius: 8px;
  box-shadow: 0 2px 0 color-mix(in srgb, #000 38%, transparent), inset 0 1px 0 rgb(255 255 255 / .14);
}
:root[data-theme] #board [data-pedal="metronome"][data-strip] :is(.mdial__key--run .transport, .mdial__bpm input.tcbpm, .mdial__meter .picker > .picker__btn):is(:hover, :focus-visible) { border-color: var(--accent); }
:root[data-theme] #board [data-pedal="metronome"][data-strip] :is(.mdial__key--run .transport, .mdial__meter .picker > .picker__btn):active { transform: translateY(1px); box-shadow: 0 1px 0 color-mix(in srgb, #000 38%, transparent), inset 0 1px 0 rgb(255 255 255 / .1); }
:root[data-theme] #board [data-pedal="metronome"][data-strip] .mdial__key--run .transport[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
@media (max-width: 600px) {
  :root[data-theme] #board [data-pedal="metronome"][data-strip] .mdial__key--run .transport { width: 46px; }
  :root[data-theme] #board [data-pedal="metronome"][data-strip] .mdial__bpm :is(input, .tcbpm) { width: 70px; font-size: 17px; }
  :root[data-theme] #board [data-pedal="metronome"][data-strip] .mdial__meter { gap: 6px; }
  :root[data-theme] #board [data-pedal="metronome"][data-strip] .mdial__meter .picker > .picker__btn { width: 60px; }
  :root[data-theme] #board [data-pedal="metronome"][data-strip] .met[data-colhost] { gap: 8px; }
}

/* THE TEMPO CURVE (5 Nov): the routine's tempos as one smooth curve on a strip; the tempo range sits in its middle, always whole.
   A press anywhere takes the nearest preset (the steps are the invisible hit layer); the preset playing is lit, with a dot on the
   curve; pointing at one names its tempo. */
.rladder { position: relative; display: block; box-sizing: border-box; min-width: 150px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-deep, var(--surface)); overflow: hidden; }
:root[data-theme] #board .mline--5 .rladder { flex: 1 1 260px; height: 36px; padding: 0; margin: 0; }
.rladder__plot { position: absolute; inset: 0; }
.rladder__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; pointer-events: none; }
.rladder__area { fill: color-mix(in srgb, var(--loopcard-blue) 38%, transparent); }
.rladder__line { fill: none; stroke: var(--loopcard-blue); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.rladder__steps { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); cursor: pointer; touch-action: pan-y; border-radius: 10px; }
.rladder__steps:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.rladder__step { position: relative; display: block; height: 100%; }
.rladder__step.is-playing, .rladder__step.is-paused { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.rladder__step.is-active { background: color-mix(in srgb, var(--ink) 9%, transparent); }
.rladder__step.is-playing::after, .rladder__step.is-paused::after, .rladder__step.is-active::after {
  content: ""; position: absolute; left: 50%; bottom: calc(var(--h, 50%) - 1px); width: 9px; height: 9px; margin: 0 0 -4px -4.5px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 2px var(--surface), 0 0 8px var(--accent);
}
.rladder__step.is-paused::after { background: color-mix(in srgb, var(--accent) 55%, var(--surface)); }
.rladder__step.is-active:not(.is-playing)::after { background: var(--loopcard-blue); box-shadow: 0 0 0 2px var(--surface); }
.rladder__step::before {
  content: attr(data-stepbpm); position: absolute; z-index: 2; left: 50%; top: 3px; transform: translateX(-50%);
  padding: 2px 4px; border-radius: 3px; background: var(--surface); border: 1px solid var(--ctl-edge-hi); color: var(--ink);
  font: 700 10px/1 var(--mono); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s;
}
.rladder__step.is-active::before { opacity: 1; }
.rladder__step:first-child::before { left: 2px; transform: none; }   /* the end presets' tempos stay inside the strip */
.rladder__step:last-child::before { left: auto; right: 2px; transform: none; }
.rladder__range { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; padding: 3px 10px; border-radius: 999px; pointer-events: none;
  background: color-mix(in srgb, var(--surface) 82%, transparent); color: var(--ink); font: 700 11px/1 var(--sans); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* THE MASTER KNOB (5 Nov): a big amp knob in the header, 0 to 11, a ring of twelve lights that fills as it turns (the last three,
   the boost, are red). The cap is a knurled disc with a bright notch and its number in the middle. */
.master { display: inline-flex; align-items: center; flex: none; }
.master__dial { position: relative; width: 54px; height: 54px; border-radius: 50%; cursor: ns-resize; touch-action: none; user-select: none; -webkit-user-select: none; }
.master__dial:focus-visible { outline: 2px solid var(--head-accent, var(--accent)); outline-offset: 1px; }
.master__ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.master__led { fill: color-mix(in srgb, var(--head-ink, var(--ink)) 22%, transparent); transition: fill .12s, filter .12s; }
.master__led.is-lit { fill: var(--head-accent, var(--accent)); filter: drop-shadow(0 0 2.5px var(--head-accent, var(--accent))); }
.master__led.is-lit.is-hot { fill: #ff5a3c; filter: drop-shadow(0 0 3px #ff5a3c); }
.master__cap {
  position: absolute; inset: 11px; border-radius: 50%; display: grid; place-items: center; transform: rotate(var(--rot, 0deg));
  background: repeating-conic-gradient(from 0deg, #3a3d44 0 6deg, #25272c 6deg 12deg);
  box-shadow: 0 0 0 1.5px #0b0c0e, 0 3px 6px rgb(0 0 0 / .55), inset 0 1px 1px rgb(255 255 255 / .22);
}
.master__cap::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #5b5f68, #1d1f23 72%); box-shadow: inset 0 1px 2px rgb(255 255 255 / .18), 0 0 0 1px rgb(0 0 0 / .6); }
.master__ptr { position: absolute; left: 50%; top: 1.5px; width: 3px; height: 8px; margin-left: -1.5px; border-radius: 2px; background: #fff; box-shadow: 0 0 5px rgb(255 255 255 / .8); }
.master__num { position: relative; transform: rotate(calc(var(--rot, 0deg) * -1)); font: 800 12px/1 var(--sans); color: #e9ecf1; font-variant-numeric: tabular-nums; text-shadow: 0 1px 1px #000; pointer-events: none; }
@media (max-width: 600px) { .master__dial { width: 44px; height: 44px; } .master__cap { inset: 9px; } .master__num { font-size: 10px; } }
@media (prefers-reduced-motion: reduce) { .master__led { transition: none; } }
/* The smallest phones: the connect button keeps clear of the module's corner buttons under it. */
@media (max-width: 420px) { :root.is-unplugged .tline__connect { top: calc(50% - 5px); } }

/* A Sweeps preset's chords on its box: one line, cut with dots when it is longer than the box. */
.phrasecard__notes--sweep { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* THE CHORD TIMELINE (5 Nov), in the Chords info of Tabs: the same strip as the scales', each chord as long as its bars, coloured as the
   Harmony wheel colours them: home green, away blue, tension red. */
.tabm__tl--chords .tabm__tlseg--home { background: color-mix(in srgb, var(--good) 26%, var(--surface)); }
.tabm__tl--chords .tabm__tlseg--away { background: color-mix(in srgb, var(--early) 28%, var(--surface)); }
.tabm__tl--chords .tabm__tlseg--tension { background: color-mix(in srgb, var(--late) 28%, var(--surface)); }
.tabm__tl--chords .tabm__tlseg--plain { background: var(--surface-2, var(--surface)); }
.tabm__tl--chords .tabm__tlseg { min-width: 22px; }
.tabm__tl--chords .tabm__tlseg span { font-weight: 800; }
@media (max-width: 360px) {
  :root[data-theme] #board [data-pedal="metronome"][data-strip] .mdial__key--run .transport { width: 40px; }
  :root[data-theme] #board [data-pedal="metronome"][data-strip] .mdial__bpm :is(input, .tcbpm) { width: 58px; font-size: 16px; }
  :root[data-theme] #board [data-pedal="metronome"][data-strip] .mdial__meter { gap: 5px; }
  :root[data-theme] #board [data-pedal="metronome"][data-strip] .mdial__meter .picker > .picker__btn { width: 50px; }
  :root[data-theme] #board .pedal[data-frame][data-pedal="fret"] .fbseg.hw__views > button { width: 52px; }
}
/* A preset that carries notes (a recorded phrase, a sweep) says so on a line of its own: its box is a line taller, or the line is cut to a sliver. */
:root[data-theme] #board [data-card="routines"][data-loopview="lane"] .loopcard:has(.phrasecard__notes):not(.is-editing) { height: 124px; }
:root[data-theme] #board [data-card="routines"] .loopcard .phrasecard__notes { flex: none; line-height: 1.25; }

/* The wheel is as tall as the neck's block (its six strings and fret numbers, less the bezel) and the neck stays at the top of the module,
   so turning the wheel on changes nothing but what is beside the neck. Its buttons live at the right of the info line. */
:root[data-theme] #board > .pedal[data-frame] > .mline--4 > .mline__r:has(.hw__views) { flex: none; overflow: visible; display: flex; align-items: center; gap: var(--fr-gap); }
:root[data-theme] #board .pedal[data-frame] .mline--4 .hw__shape { margin: 0; height: var(--fr-h); }
:root[data-theme] #board .pedal[data-frame] .mline--4 .hw__shape .hw__step { width: var(--fr-h); height: var(--fr-h); }
:root[data-theme] #board .pedal[data-frame] .mline--4 .hw__shapename { min-width: 76px; }

/* THE NUMBER BLINKS (5 Nov): on every beat, the first of the bar harder; the dots under it are gone. */
.mdial__bpm { position: relative; }
.mdial__bpm :is(input.tcbpm, .mdial__live) { transition: color .12s ease-out; }
.mdial__bpm[data-blink] :is(input.tcbpm, .mdial__live) { transition: none; }
.mdial__bpm[data-blink="beat"] :is(input.tcbpm, .mdial__live) { color: color-mix(in srgb, var(--accent) 70%, #fff) !important; }
.mdial__bpm[data-blink="one"] :is(input.tcbpm, .mdial__live) { color: #fff !important; }
.mdial__bpm[data-live][data-blink] input.tcbpm:not(:focus) { color: transparent !important; }
/* The speed curve over the number: the tempo that plays now, coloured by where the curve is. */
.mdial__live { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; font-variant-numeric: tabular-nums; transition: color .5s; }
.mdial__live[hidden] { display: none; }
.mdial__bpm[data-live] input.tcbpm:not(:focus) { color: transparent !important; text-shadow: none !important; }
.mdial[data-curve="green"] .mdial__live { color: var(--good); text-shadow: 0 0 8px color-mix(in srgb, var(--good) 60%, transparent); }
.mdial[data-curve="orange"] .mdial__live { color: #ff9a1f; text-shadow: 0 0 9px color-mix(in srgb, #ff9a1f 60%, transparent); }
.mdial[data-curve="red"] .mdial__live { color: var(--bad, #ff4d3a); text-shadow: 0 0 10px color-mix(in srgb, var(--bad, #ff4d3a) 65%, transparent); }
.mdial__bpm input.tcbpm { touch-action: none; }
.restclock:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.restclock > * { pointer-events: none; }

/* The slim Metronome with the wheel on the right (edit mode): its buttons and number are at the right of the bar and the notes and the
   rush/drag bar to their left, the settings, edit and size buttons at the left edge. */
:root[data-theme] #board [data-pedal="metronome"][data-wheelside="right"][data-strip]:not([data-bp~="max719"]) .met[data-colhost] { flex-direction: row-reverse; padding: 0 4px 0 0; }
:root[data-theme] #board [data-pedal="metronome"][data-wheelside="right"][data-strip]:not([data-bp~="max719"]) > .mgear { right: auto; left: 62px; }
:root[data-theme] #board [data-pedal="metronome"][data-wheelside="right"][data-strip]:not([data-bp~="max719"]) > .medit { right: auto !important; left: 36px !important; }
:root[data-theme] #board [data-pedal="metronome"][data-wheelside="right"][data-strip]:not([data-bp~="max719"]) > .modsize { right: auto !important; left: 10px !important; }
:root[data-theme] #board [data-pedal="metronome"][data-wheelside="right"][data-strip]:not([data-bp~="max719"]) .pedal__body { padding-right: 0; padding-left: 92px; }

/* MENUS POP (5 Nov): an opened menu appears where it will stay and pops (a quick grow from the button, no sliding in), and the button it
   belongs to holds still while it is open (the press effect never carries the menu with it). */
.picker__pop:not([hidden]) { transform-origin: 16px 0; animation: menu-pop .12s ease-out; }
.picker__pop--up:not([hidden]) { transform-origin: 16px 100%; }
.picker__pop[role="listbox"][aria-label="Rhythm"]:not([hidden]) { transform-origin: 50% 50%; }
@keyframes menu-pop { from { opacity: 0; scale: .94; } to { opacity: 1; scale: 1; } }
:root[data-theme] #board :is(.fb1, .fb2, .fb3, .transport, .mdial__key, .tstep, .chip, .fbtn, .tcbar__unit):has(> .picker__pop:not([hidden]), .picker__pop:not([hidden])) { transform: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { .picker__pop:not([hidden]) { animation: none; } }

:root[data-theme] #board > .pedal[data-frame] > .mline--4 > .mline__r:has(.hw__views) { padding-right: 54px; }
:root[data-theme] #board .pedal[data-frame] .mline--4 .hw__step:focus-visible { outline-offset: -2px; }
:root[data-theme] .hw__step:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* THE PLAYBAR on a playing preset's blue title (drills/presets.js): its place in the preset, a handle on it to grab and slide back. */
.loopcard__scrub { display: none; }
.loopcard:is(.is-playing, .is-paused):not(.is-editing) .loopcard__top { position: relative; cursor: ew-resize; touch-action: none; }
.loopcard:is(.is-playing, .is-paused):not(.is-editing) .loopcard__scrub { display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; }
.loopcard__scrub i { position: absolute; left: 0; bottom: 0; height: 3px; width: calc(var(--p, 0) * 1%); background: rgb(255 255 255 / .85); border-radius: 0 2px 2px 0; }
.loopcard__scrub b { position: absolute; bottom: -1px; left: calc(var(--p, 0) * 1%); width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--loopcard-blue, #3A6FD8), 0 1px 4px rgb(0 0 0 / .5); }
.loopcard.is-scrubbing .loopcard__scrub b { transform: scale(1.3); }
.loopcard[data-scrub] .loopcard__top::after { content: attr(data-scrub); position: absolute; right: 8px; top: 50%; transform: translateY(-50%); padding: 1px 6px; border-radius: 4px; background: rgb(0 0 0 / .55); color: #fff; font: 700 11px/1.3 var(--sans); pointer-events: none; }

/* THE FOOT OF THE PAGE (5 Nov): as wide as the modules, a name and the links on one line, the small print under a rule. */
.footer { margin-top: var(--g21, 21px); padding: 0; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 55%, transparent); }
.footer__inner { width: 100%; max-width: var(--shell); margin-inline: auto; padding: var(--g13, 13px) var(--gutter, 28px) var(--g21, 21px); box-sizing: border-box; }
.footer__top { display: flex; align-items: center; justify-content: space-between; gap: var(--g13, 13px) var(--g21, 21px); flex-wrap: wrap; padding-bottom: var(--g13, 13px); }
.footer__mark { display: inline-flex; align-items: baseline; gap: 10px; font: 400 22px/1 "Bungee", var(--display); letter-spacing: .01em; color: var(--ink); }
.footer__mark em { font-style: normal; color: var(--accent); margin-left: -6px; }
.footer__mark small { font: 500 12px/1.2 var(--sans); letter-spacing: 0; color: var(--ink-mute); margin-left: 4px; }
.footer__links { display: flex; flex-wrap: wrap; gap: 6px; }
.footer .footer__links a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 8px; color: var(--ink-body); font: 600 12px/1 var(--sans); background: var(--surface); transition: border-color .12s, color .12s; }
.footer .footer__links a:hover, .footer .footer__links a:focus-visible { color: var(--accent); border-color: var(--accent); }
.footer__bottom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 6px var(--g34, 34px); align-items: start; padding-top: var(--g13, 13px); border-top: 1px solid var(--line); }
.footer .footer__legal, .footer .footer__credits { margin: 0; padding: 0; border: 0; max-width: none; text-align: left; font: 500 11px/1.5 var(--sans); color: var(--ink-mute); }
.footer__credits { text-align: right; }
.footer .footer__bottom a { color: var(--ink-body); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ink-mute) 50%, transparent); text-underline-offset: 2px; }
.footer .footer__bottom a:hover { color: var(--accent); }
@media (max-width: 900px) { .footer__bottom { grid-template-columns: 1fr; } .footer .footer__credits { text-align: left; } }
@media (max-width: 560px) { .footer__top { flex-direction: column; align-items: flex-start; } .footer__mark small { display: none; } }

/* THE REST SCREEN IN THE SLIM METRONOME (5 Nov): not a disc the size of the dial but a pill the height of the bar over the buttons: the word REST
   and the time at their usual size, no ring and no "Next" line spilling under it. */
:root[data-theme] #board [data-pedal="metronome"][data-strip] .mdial > .restclock--dial { position: absolute; left: 0; right: 0; top: 50%; width: auto; height: 40px; transform: translateY(-50%); padding: 0 16px; border-radius: 10px; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 10px; animation: none; box-shadow: 0 0 0 1px var(--glass-faint, var(--line)); }
:root[data-theme] #board [data-pedal="metronome"][data-strip] .mdial > .restclock--dial svg, :root[data-theme] #board [data-pedal="metronome"][data-strip] .mdial > .restclock--dial .restclock__next { display: none; }
:root[data-theme] #board [data-pedal="metronome"][data-strip] .mdial > .restclock--dial .restclock__lbl { margin: 0; order: -1; }
:root[data-theme] #board [data-pedal="metronome"][data-strip] .mdial > .restclock--dial .restclock__num { line-height: 1; }

/* PROGRESS, TALLER, WITH ITS GRAPHS BACK (5 Nov): the compartments 15 % taller (346 to 398 px), and under them, as the dashboard first had them,
   the tempo-over-time graph and the lessons, each in a compartment of its own. */
.pdash__grid2 { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--g13); margin-top: var(--g13); }
:root[data-theme] .pdash__grid2 > .pdash__comp--graph { height: 300px; }
:root[data-theme] #board [data-card="progress"][data-zoom] .pdash__grid2 > .pdash__comp--graph { height: calc(300px * var(--msize)); }
:where(.pedal[data-bp~="max900"]) .pdash__grid2 { grid-template-columns: minmax(0, 1fr); }

/* The slim Metronome's settings: its box lives in the module's head, which the slim bar hides, so the gear opened nothing. The head stays
   (empty, no height) and the box drops down from the gear, over whatever is under the bar. */
:root[data-theme] #board [data-pedal="metronome"][data-strip] > .pedal__head { display: block !important; position: static; height: 0; margin: 0; padding: 0; border: 0; }
:root[data-theme] #board [data-pedal="metronome"][data-strip] > .pedal__head > :not(.pedal__headctl) { display: none !important; }
:root[data-theme] #board [data-pedal="metronome"][data-strip].is-gearopen { z-index: 90; }
:root[data-theme] #board [data-pedal="metronome"][data-strip] > .pedal__head > .pedal__headctl { position: absolute; top: calc(100% + 4px); right: 10px; left: auto; z-index: 90; }
:root[data-theme] #board [data-pedal="metronome"][data-strip][data-wheelside="right"]:not([data-bp~="max719"]) > .pedal__head > .pedal__headctl { right: auto; left: 10px; }

/* Polyrhythm (6 Nov 2026): each beat's own rhythm button (top right of the beat, the accent mark is at its top left), and the one square
   "Polyrhythm layers" menu, which sits on the page like a menu does. */
.beatrhy { position: absolute; top: 3px; right: 3px; z-index: 2; display: block; }
.beatrhy.picker { width: auto; }
.beatrhy .picker__btn { width: 22px; min-width: 0; height: 20px; min-height: 0; padding: 0; display: flex; align-items: center; justify-content: center;
  border-radius: 6px; opacity: .55; transition: opacity .12s; }
.beatrhy .picker__btn:hover, .beatrhy .picker__btn:focus-visible, .beatrhy .picker__btn[aria-expanded="true"] { opacity: 1; }
.beatrhy .picker__caret { display: none; }
.beatrhy .picker__cur { display: flex; align-items: center; justify-content: center; }
.beatrhy .picker__cur svg { width: 14px; height: 14px; max-height: 14px; }
.beatrhy .picker__cur .rhy { width: auto; height: 15px; }
.beatrhy__ic { display: flex; color: var(--ink-body, var(--ink)); }
.beatbeat.has-rhythm .beatrhy .picker__btn { opacity: 1; box-shadow: inset 0 0 0 1px var(--accent); }
:root[data-theme] .beatviz .beatbeat .beatrhy .picker__btn { background: color-mix(in srgb, var(--glass-ink, var(--ink)) 10%, transparent); color: var(--glass-ink, var(--ink)); }
.is-arranging .beatrhy { display: none; }

.layersmenu { position: fixed; z-index: 300; width: min(340px, calc(100vw - 16px)); max-height: calc(100vh - 16px); display: flex; flex-direction: column;
  background: var(--surface); color: var(--ink); border: 1px solid var(--ctl-edge-hi, var(--line-2)); border-radius: 14px; box-shadow: 0 16px 40px rgb(0 0 0 / .55);
  font-family: var(--sans); animation: menu-pop .12s ease-out; }
.layersmenu[hidden] { display: none; }
.lm__head { display: flex; align-items: center; gap: 8px; padding: 10px 10px 8px 14px; border-bottom: 1px solid var(--line); }
.lm__head b { flex: 1 1 auto; font: 700 13px/1.2 var(--sans); letter-spacing: .01em; }
.lm__count { font: 600 11px/1 var(--mono); color: var(--ink-mute); }
.lm__x, .lm__back { appearance: none; border: 0; background: transparent; color: var(--ink-body, var(--ink)); cursor: pointer; font: 600 12px/1 var(--sans); }
.lm__x { width: 28px; height: 28px; border-radius: 8px; font-size: 20px; }
.lm__back { height: 28px; padding: 0 8px 0 4px; border-radius: 8px; color: var(--accent); }
.lm__x:hover, .lm__back:hover { background: color-mix(in srgb, var(--ink) 9%, transparent); }
.lm__body { overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.lm__empty { margin: 4px 2px 2px; font: 500 12px/1.45 var(--sans); color: var(--ink-mute); }
.lm__layer { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--ink) 4%, transparent); }
.lm__layer.is-muted { opacity: .6; }
.lm__row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.lm__n { flex: 0 0 18px; font: 700 11px/1 var(--mono); color: var(--ink-mute); text-align: center; }
.lm__sound { flex: 1 1 auto; min-width: 0; height: 30px; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 10px; border-radius: 8px;
  border: 1px solid var(--line-2); background: var(--surface-deep, var(--surface)); color: var(--ink); font: 700 12px/1 var(--sans); cursor: pointer; }
.lm__sound span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lm__sound i { font-style: normal; color: var(--ink-mute); font-size: 10px; }
.lm__mute { flex: 0 0 auto; height: 30px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line-2); background: transparent; color: var(--ink-body, var(--ink)); font: 600 11px/1 var(--sans); cursor: pointer; }
.lm__mute[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.lm__del { flex: 0 0 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line-2); background: transparent; color: var(--ink-body, var(--ink)); font-size: 18px; line-height: 1; cursor: pointer; }
.lm__del:hover { border-color: var(--bad, #e5584b); color: var(--bad, #e5584b); }
.lm__vol { flex: 1 1 auto; min-width: 0; margin: 0 0 0 24px; accent-color: var(--accent); }
.lm__pct { flex: 0 0 38px; font: 600 11px/1 var(--mono); color: var(--ink-mute); text-align: right; }
.lm__beats { display: flex; flex-wrap: wrap; gap: 5px; padding-left: 24px; }
.lm__beat { flex: 1 1 40px; max-width: 64px; min-width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; padding: 0 2px; border-radius: 8px;
  border: 1px solid var(--line-2); background: var(--surface-deep, var(--surface)); color: var(--ink); cursor: pointer; }
.lm__beat svg { height: 26px; width: auto; max-width: 100%; }
.lm__all { flex: 0 0 auto; max-width: none; min-width: 38px; font: 700 11px/1 var(--sans); color: var(--accent); }
.lm__rest { font: 700 16px/1 var(--sans); color: var(--ink-mute); }
.lm__add { align-self: stretch; height: 34px; border-radius: 9px; border: 1px dashed var(--line-2); background: transparent; color: var(--accent); font: 700 12px/1 var(--sans); cursor: pointer; }
.lm__add:disabled { opacity: .4; cursor: default; }
.lm__group { display: flex; flex-direction: column; gap: 5px; }
.lm__glabel { font: 700 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); }
.lm__grid { display: flex; flex-wrap: wrap; gap: 5px; }
.lm__opt { min-width: 52px; min-height: 38px; padding: 0 10px; display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: 8px;
  border: 1px solid var(--line-2); background: var(--surface-deep, var(--surface)); color: var(--ink); font: 600 12px/1 var(--sans); cursor: pointer; }
.lm__opt--r { min-width: 44px; padding: 0 4px; }
.lm__opt svg { height: 26px; width: auto; }
.lm__opt[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
:is(.lm__sound, .lm__mute, .lm__del, .lm__beat, .lm__opt, .lm__add, .lm__x, .lm__back):hover { border-color: var(--accent); }
:is(.lm__sound, .lm__mute, .lm__del, .lm__beat, .lm__opt, .lm__add, .lm__x, .lm__back):focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

:root[data-theme] .beatrhy .picker__btn { width: 22px !important; min-width: 0 !important; height: 20px !important; min-height: 0 !important; padding: 0 !important; gap: 0 !important; justify-content: center !important; }
:root[data-theme] .beatrhy .picker__caret { display: none !important; }
:root[data-theme] .beatrhy.picker { width: 22px; height: 20px; min-height: 0; }
/* The slim and low-bar Metronome have no room in a beat for a button; the beat's rhythm is set from the normal size. */
:root[data-theme] #board [data-pedal="metronome"]:is([data-strip], [data-bar]) .beatrhy { display: none !important; }
:root[data-theme] .beatrhy .picker__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }