@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,600;0,700;1,600;1,700&family=Jost:wght@400;500;600;700&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #0f1117;
  color: #e0e0e0;
  overflow-x: hidden;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* Controls Bar — Glassmorphism */
#controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  background: rgba(15, 17, 23, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-wrap: wrap;
  gap: 10px;
  min-height: 56px;
}

.controls-left,
.controls-center,
.controls-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.controls-center {
  gap: 14px;
}

/* Buttons — Modern pill style */
.btn {
  background: rgba(255,255,255,0.07);
  color: #c0c0d0;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 7px 14px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  transition: all 0.2s ease;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.btn:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.2);
  color: #fff;
  transform: translateY(-1px);
}

.btn.active {
  background: linear-gradient(135deg, #e94560, #c0392b);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 2px 12px rgba(233, 69, 96, 0.35);
}

.btn-play {
  background: linear-gradient(135deg, #e94560, #c0392b);
  border-color: transparent;
  color: #fff;
  font-size: 16px;
  padding: 8px 18px;
  border-radius: 10px;
  box-shadow: 0 2px 16px rgba(233, 69, 96, 0.3);
}

.btn-play:hover {
  background: linear-gradient(135deg, #ff6b81, #e94560);
  box-shadow: 0 4px 20px rgba(233, 69, 96, 0.45);
  transform: translateY(-1px);
}

.btn-sm {
  padding: 4px 10px;
  font-size: 12px;
  min-width: 30px;
  border-radius: 6px;
}

/* Speed / Transpose / Zoom Controls */
.speed-control,
.transpose-control,
.zoom-control {
  display: flex;
  align-items: center;
  gap: 4px;
}

.speed-control label,
.transpose-control label,
.zoom-control label,
.volume-control label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.35);
  margin-right: 3px;
}

#speedDisplay,
#transposeDisplay,
#zoomDisplay {
  min-width: 38px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: #5b9aff;
}

/* Volume */
.volume-control {
  display: flex;
  align-items: center;
  gap: 6px;
}

#volume {
  width: 70px;
  accent-color: #e94560;
  cursor: pointer;
  height: 4px;
}

/* Brand */
.brand {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.25);
  margin-right: 8px;
}

/* Advanced Tools (collapsible) */
#advanced-tools {
  display: flex;
  padding: 8px 20px;
  background: rgba(15, 17, 23, 0.75);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  overflow: hidden;
  transition: max-height 0.25s ease, padding 0.25s ease, opacity 0.2s ease;
  max-height: 60px;
  opacity: 1;
}

#advanced-tools.collapsed {
  max-height: 0;
  padding: 0 20px;
  opacity: 0;
  border-bottom: none;
}

.tools-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* Loading */
#loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.4);
}

#loading.hidden {
  display: none;
}

.spinner {
  width: 22px;
  height: 22px;
  border: 2.5px solid rgba(255,255,255,0.1);
  border-top-color: #e94560;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* alphaTab overrides — WARM SEPIA aged-paper (option C, Rotem's pick). The texture lives on
   #alphaTab; surface + svg are transparent so the paper shows behind the notation. */
.at-surface { background: transparent !important; }
#alphaTab .at-surface > div { background: transparent !important; }
/* CLEAN warm page — solid light cream, NO busy texture, so notation is crisp & high-contrast
   like the PDF reader (Rotem 2026-06-26: "make it big & readable like the PDF"). */
#alphaTab svg { background: #faf4e4 !important; }
#alphaTab svg rect[fill="#ffffff"], #alphaTab svg rect[fill="#FFFFFF"],
#alphaTab svg rect[fill="white"], #alphaTab svg [fill="#ffffff"] { fill: #faf4e4 !important; }

/* Playback marker (Rotem 2026-06-13: "big red lines not needed — just the 1 cursor, make it easier to see").
   NO red bracket lines on the bar; a soft wash highlights the current measure; ONE bright cursor line. */
.at-cursor-bar {
  background: rgba(230, 0, 0, 0.05) !important;   /* gentle current-bar highlight, NOT red lines */
  border: none !important;
}

.at-cursor-beat {
  background: #ff0000 !important;                  /* ONE clear playback line */
  width: 7px !important;                           /* thicker + brighter so it's easy to see */
  border-radius: 1px !important;
  box-shadow: 0 0 12px 3px rgba(255, 0, 0, 0.95) !important;
  z-index: 60 !important;
}

.at-selection {
  background: rgba(91, 154, 255, 0.12) !important;
}

/* Track Selector */
#track-selector {
  display: flex;
  gap: 6px;
  padding: 8px 20px;
  background: rgba(15, 17, 23, 0.85);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255,255,255,0.06);
  overflow-x: auto;
  flex-wrap: wrap;
}

#track-selector .track-btn {
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  border-radius: 6px;
  cursor: pointer;
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.5);
  border: 1px solid rgba(255,255,255,0.08);
  transition: all 0.2s ease;
  letter-spacing: 0.02em;
}

#track-selector .track-btn:hover {
  background: rgba(255,255,255,0.12);
  color: #fff;
}

#track-selector .track-btn.active {
  background: linear-gradient(135deg, #3a7bd5, #2563eb);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 2px 8px rgba(58, 123, 213, 0.3);
}

/* Practice Display */
.practice-display {
  font-size: 12px;
  color: #e94560;
  font-weight: 700;
  min-width: 80px;
  letter-spacing: 0.02em;
}

/* Speed Presets */
.speed-presets {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-wrap: wrap;
}

.speed-presets label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.35);
  margin-right: 4px;
}

/* View Toggle — Segmented control look */
.view-toggle {
  display: flex;
  gap: 1px;
  background: rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 2px;
}

.view-toggle .view-btn {
  border-radius: 6px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.45);
  font-weight: 600;
  padding: 5px 12px;
}

.view-toggle .view-btn:hover {
  color: rgba(255,255,255,0.7);
  transform: none;
}

.view-toggle .view-btn.active {
  background: rgba(255,255,255,0.12);
  color: #fff;
  box-shadow: none;
}

/* Main Content Layout */
#main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#alphaTab {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  background-color: #ece0c2;
  background-image: url('files/branding/warm_sepia_paper.png');
  background-size: 720px;
  background-repeat: repeat;
  /* alphaTab paints an opaque pale surface CSS bg can't reach — a sepia filter tints its
     actual pixels (pale surface -> warm sepia, black notes -> brown ink). Option C look. */
  filter: sepia(.35) saturate(1.1) brightness(1.05);   /* WARM CREAM, not olive (Rotem 2026-06-13; sepia(1)+dark was the olive root) */
}

/* Fretboard Panel */
#fretboard-panel {
  background: rgba(15, 17, 23, 0.9);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 8px 12px;
}

.fretboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,255,255,0.3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

#fretboard {
  width: 100%;
  height: 170px;
  border-radius: 12px;
  border: 3px solid #1a0e08;
  box-shadow:
    0 0 0 2px #c9a264,
    0 0 0 5px #1a0e08,
    0 6px 20px rgba(0,0,0,0.6),
    inset 0 2px 4px rgba(0,0,0,0.3);
}

/* Track Mixer */
#track-mixer {
  padding: 8px 20px;
  background: rgba(15, 17, 23, 0.85);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#track-mixer:empty {
  display: none;
}

.mixer-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  font-size: 12px;
}

.mixer-name {
  min-width: 60px;
  color: rgba(255,255,255,0.4);
  font-size: 11px;
  font-weight: 500;
}

.mixer-vol {
  width: 50px;
  accent-color: #5b9aff;
  cursor: pointer;
  height: 3px;
}

.mixer-mute {
  font-weight: 700;
  font-size: 11px;
}

.mixer-mute.active {
  background: linear-gradient(135deg, #e94560, #c0392b);
  border-color: transparent;
  color: #fff;
}

.mixer-solo {
  font-weight: 700;
  font-size: 11px;
}

.mixer-solo.active {
  background: linear-gradient(135deg, #f0c040, #e6a817);
  border-color: transparent;
  color: #1a1a2e;
}

/* Responsive */
@media (max-width: 768px) {
  #controls {
    justify-content: center;
    padding: 8px 10px;
  }
  .controls-left,
  .controls-center,
  .controls-right {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* Instrument buttons — sits next to track mixer */
#instrument-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 20px;
  background: rgba(15, 17, 23, 0.85);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255,255,255,0.06);
}

.instrument-btn.active {
  background: linear-gradient(135deg, #5b9aff, #3d7be0) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 2px 10px rgba(91, 154, 255, 0.3);
}

#instrumentSelect {
  background: rgba(255,255,255,0.07);
  color: #c0c0d0;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 13px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  appearance: auto;
}

#instrumentSelect:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.2);
  color: #fff;
}

/* Hide alphaTab watermark — persistent cover */
#alphaTab {
  position: relative;
}

#alphaTab::after {
  content: '';
  position: sticky;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 45px;
  background: linear-gradient(to bottom, rgba(30,30,30,0) 0%, #1e1e1e 40%);
  display: block;
  z-index: 100;
  pointer-events: none;
}

/* Target alphaTab watermark elements directly */
.at-footer, .at-watermark, [class*="watermark"], [class*="footer-text"] {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* iframe embed mode */
body.embed {
  background: #0f1117;
}

/* ============= REFINED VINTAGE — premium parchment + brushed gold (2026-06-24) =============
   Supersedes the 2026-06-06 vintage override. Goal: elevate the proven parchment+gold look to
   a slick, cohesive product — refined typography, pill buttons with real depth, a tasteful gold
   accent, a sleeker fretboard — and remove EVERY leftover red/blue from the dead dark base
   (active-glow, VOL thumb, practice text, mixer, instrument, toast). One accent only: gold.   */
:root{
  --rv-paper:#dcc59a; --rv-paper-2:#e3d0a6; --rv-paper-3:#ead9b2;
  --rv-ink:#2b210e; --rv-ink-soft:#54401a; --rv-label:#826c42;
  --rv-line:#c2a874; --rv-line-soft:#d2bd8e;
  --rv-btn-1:#ecdcb1; --rv-btn-2:#ddc899; --rv-btn-hover-1:#e3d2a2; --rv-btn-hover-2:#d3bd87;
  --rv-gold-1:#f7ec74; --rv-gold-2:#eccf43; --rv-gold-line:#cdb43a; --rv-gold-glow:rgba(205,180,58,.45);
}
body{background:var(--rv-paper) !important;color:var(--rv-ink) !important;}

/* Controls bar — warm parchment with a hairline gold underline + soft lift for depth */
#controls{
  background:linear-gradient(180deg,#e8d4a6,#d9c089) !important;
  border-bottom:1px solid var(--rv-line) !important;
  box-shadow:0 1px 0 rgba(255,250,235,.6) inset, 0 2px 10px rgba(120,90,40,.12) !important;
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
  padding:11px 22px !important;
}
#controls::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,transparent,var(--rv-gold-2),transparent);opacity:.5;pointer-events:none;}
#controls{position:relative;}

/* Brand — refined Playfair italic with a hairline divider after it */
.brand{font-family:'Playfair Display',Georgia,serif !important;color:var(--rv-ink-soft) !important;
  font-style:italic;font-weight:700;font-size:15px !important;letter-spacing:.2px !important;
  text-transform:none !important;padding-right:14px;margin-right:6px;
  border-right:1px solid var(--rv-line-soft);}

/* Labels — quiet uppercase Jost */
label,.speed-presets label,.controls-right .volume-control label{
  font-family:'Jost',sans-serif !important;color:var(--rv-label) !important;
  text-transform:uppercase;letter-spacing:.1em;font-weight:600;}

/* Buttons — premium parchment pills with inner highlight + soft drop */
.btn{
  font-family:'Jost','Inter',sans-serif !important;
  background:linear-gradient(180deg,var(--rv-btn-1),var(--rv-btn-2)) !important;
  color:var(--rv-ink) !important;border:1px solid var(--rv-line) !important;font-weight:600 !important;
  box-shadow:0 1px 0 rgba(255,250,235,.7) inset, 0 1px 2px rgba(90,60,20,.14) !important;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease !important;}
.btn:hover{
  background:linear-gradient(180deg,var(--rv-btn-hover-1),var(--rv-btn-hover-2)) !important;
  border-color:var(--rv-gold-line) !important;color:var(--rv-ink) !important;
  transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,250,235,.7) inset, 0 3px 8px rgba(90,60,20,.20) !important;}
.btn:active{transform:translateY(0);box-shadow:0 1px 2px rgba(90,60,20,.18) inset !important;}

/* Active / play — brushed gold, ink text, GOLD glow (no red), kills the dark-base red shadow */
.btn.active,.speed-btn.active,.view-btn.active,#playPause,.btn-play{
  background:linear-gradient(180deg,var(--rv-gold-1),var(--rv-gold-2)) !important;
  color:#22303a !important;border:1px solid var(--rv-gold-line) !important;font-weight:700 !important;
  box-shadow:0 1px 0 rgba(255,253,220,.8) inset, 0 2px 12px var(--rv-gold-glow) !important;}
#playPause,.btn-play{border-radius:10px !important;padding:8px 18px !important;}
#playPause:hover,.btn-play:hover{transform:translateY(-1px);
  box-shadow:0 1px 0 rgba(255,253,220,.85) inset, 0 4px 16px var(--rv-gold-glow) !important;}

/* A–B loop range marker drawn over the score (gold wash + A/B edge tabs) */
#alphaTab .at-surface{position:relative;}
.ab-band{position:absolute;background:rgba(205,180,58,0.15);pointer-events:none;z-index:4;border-radius:2px;
  box-shadow:inset 0 0 0 1px rgba(189,154,46,0.22);}
.ab-band.ab-start{border-left:3px solid rgba(180,144,44,0.92);}
.ab-band.ab-end{border-right:3px solid rgba(180,144,44,0.92);}
.ab-band.ab-start::before{content:'A';position:absolute;top:-3px;left:3px;font:700 11px 'Jost',sans-serif;color:#6e5414;}
.ab-band.ab-end::after{content:'B';position:absolute;top:-3px;right:4px;font:700 11px 'Jost',sans-serif;color:#6e5414;}

/* A–B practice-loop control — compact parchment bar fields + a gold toggle when armed */
.abloop{display:inline-flex;align-items:center;gap:5px;}
.abloop .ab-bar{width:40px;padding:5px 4px !important;text-align:center;
  font-family:'Jost','Inter',sans-serif !important;font-weight:600;font-size:.85rem;
  background:linear-gradient(180deg,var(--rv-btn-1),var(--rv-btn-2)) !important;color:var(--rv-ink) !important;
  border:1px solid var(--rv-line) !important;border-radius:7px !important;-moz-appearance:textfield;appearance:textfield;}
.abloop .ab-bar::-webkit-outer-spin-button,.abloop .ab-bar::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.abloop .ab-dash{color:var(--rv-label) !important;font-weight:700;}
#abLoopToggle.active{background:linear-gradient(180deg,var(--rv-gold-1),var(--rv-gold-2)) !important;color:#22303a !important;
  border:1px solid var(--rv-gold-line) !important;box-shadow:0 2px 10px var(--rv-gold-glow) !important;font-weight:700 !important;}
.abloop.on .ab-bar{border-color:var(--rv-gold-line) !important;}
@media (max-width:600px){ .abloop .ab-bar{width:46px;min-height:40px;} }

/* Segmented view toggle on parchment (was translucent white) */
.view-toggle{background:rgba(120,90,40,.10) !important;border:1px solid var(--rv-line-soft) !important;}
.view-toggle .view-btn{background:transparent !important;color:var(--rv-ink-soft) !important;box-shadow:none !important;border:none !important;}
.view-toggle .view-btn:hover{color:var(--rv-ink) !important;background:rgba(120,90,40,.06) !important;}
.view-toggle .view-btn.active{
  background:linear-gradient(180deg,var(--rv-gold-1),var(--rv-gold-2)) !important;color:#22303a !important;
  box-shadow:0 1px 3px rgba(90,60,20,.25) !important;}

/* Advanced tools tray + selects */
#advanced-tools,.tools-row{background:var(--rv-paper-2) !important;border-color:var(--rv-line) !important;}
select,#instrumentSelect{background:linear-gradient(180deg,var(--rv-btn-1),var(--rv-btn-2)) !important;
  color:var(--rv-ink) !important;border:1px solid var(--rv-line) !important;font-family:'Jost','Inter',sans-serif !important;}
#instrumentSelect:hover{border-color:var(--rv-gold-line) !important;color:var(--rv-ink) !important;}

/* Manuscript surface — AGED MANUSCRIPT: a warm cream base, four foxed/sepia-stained corners,
   and a baked-in fiber/mottle noise so it reads like genuinely OLD paper, not a flat yellow fill. */
#main-content{background:var(--rv-paper-2) !important;}
#alphaTab,#alphaTab .at-surface,#alphaTab svg{
  background-color:#cdb082 !important;
  background-image:
    radial-gradient(ellipse 72% 46% at 14% 9%,  rgba(112,72,28,.34), transparent 60%),
    radial-gradient(ellipse 66% 44% at 88% 13%, rgba(96,60,24,.30), transparent 58%),
    radial-gradient(ellipse 80% 54% at 84% 91%, rgba(84,52,18,.34), transparent 62%),
    radial-gradient(ellipse 72% 48% at 9% 89%,  rgba(104,66,26,.30), transparent 60%),
    radial-gradient(ellipse 42% 32% at 38% 46%, rgba(90,56,22,.18), transparent 70%),
    radial-gradient(ellipse 36% 28% at 67% 60%, rgba(102,66,28,.18), transparent 70%),
    radial-gradient(ellipse 30% 22% at 24% 64%, rgba(88,54,20,.16), transparent 72%),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='300'%20height='300'%3E%3Cfilter%20id='f'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.014%200.024'%20numOctaves='3'%20seed='11'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='matrix'%20values='0%200%200%200%200.38%200%200%200%200%200.28%200%200%200%200%200.15%200.86%200%200%200%200'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23f)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='460'%20height='460'%3E%3Cfilter%20id='c'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.006'%20numOctaves='2'%20seed='4'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='matrix'%20values='0%200%200%200%200.32%200%200%200%200%200.22%200%200%200%200%200.11%200.64%200%200%200%200'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23c)'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,repeat,repeat !important;
  background-size:auto,auto,auto,auto,auto,auto,auto,300px 300px,460px 460px !important;
}
#alphaTab .at-surface svg{filter:contrast(1.02) saturate(1.05);}   /* ink already aged via alphaTab resources */
#alphaTab::after{background:linear-gradient(to bottom,rgba(212,187,142,0) 0%,#cdb486 60%) !important;}
/* playback cursor + played-note highlight → gold (was alphaTab's default blue) */
.at-cursor-bar{background:rgba(205,180,58,0.14) !important;}
.at-cursor-beat{background:rgba(189,154,46,0.62) !important;}
.at-highlight *{fill:#b8902c !important;}

/* Fretboard panel — refined: slim gold hairline frame + soft shadow (was a chunky triple-ring) */
#fretboard-panel{background:var(--rv-paper) !important;border-top:1px solid var(--rv-line) !important;}
.fretboard-header,.fretboard-header span{color:var(--rv-ink-soft) !important;
  font-family:'Jost',sans-serif !important;letter-spacing:.12em;}
#fretboard{filter:saturate(1) brightness(1.02);border:1px solid #a98f57 !important;
  box-shadow:0 0 0 1px rgba(180,150,70,.55), 0 4px 16px rgba(60,40,14,.40), inset 0 1px 3px rgba(0,0,0,.22) !important;}

/* ---- kill every leftover RED / BLUE from the dead dark base ---- */
.practice-display{color:var(--rv-ink-soft) !important;}
input[type=range],#volume{accent-color:var(--rv-gold-2) !important;}
.mixer-vol{accent-color:var(--rv-gold-2) !important;}
.mixer-mute.active{background:linear-gradient(180deg,#c9a24f,#a9853a) !important;color:#fff !important;border-color:transparent !important;}
.mixer-solo.active{background:linear-gradient(180deg,var(--rv-gold-1),var(--rv-gold-2)) !important;color:#22303a !important;border-color:transparent !important;}
.instrument-btn.active{background:linear-gradient(180deg,var(--rv-gold-1),var(--rv-gold-2)) !important;
  color:#22303a !important;border-color:var(--rv-gold-line) !important;box-shadow:0 2px 10px var(--rv-gold-glow) !important;}

/* Bottom strips — track mixer / selector / instrument bar (were dark-base navy) → parchment */
#track-mixer,#track-selector,#instrument-bar{
  background:linear-gradient(180deg,#dcc99f,#d0ba8c) !important;
  border-top:1px solid var(--rv-line) !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;}
.mixer-row{background:var(--rv-paper-3) !important;border:1px solid var(--rv-line-soft) !important;color:var(--rv-ink) !important;}
.mixer-name{color:var(--rv-ink-soft) !important;}
/* track buttons (the bottom "Jazz Guitar" was blue) → parchment pill / gold active */
#track-selector .track-btn{
  background:linear-gradient(180deg,var(--rv-btn-1),var(--rv-btn-2)) !important;color:var(--rv-ink) !important;
  border:1px solid var(--rv-line) !important;
  box-shadow:0 1px 0 rgba(255,250,235,.6) inset, 0 1px 2px rgba(90,60,20,.14) !important;}
#track-selector .track-btn:hover{border-color:var(--rv-gold-line) !important;color:var(--rv-ink) !important;}
#track-selector .track-btn.active{
  background:linear-gradient(180deg,var(--rv-gold-1),var(--rv-gold-2)) !important;color:#22303a !important;
  border:1px solid var(--rv-gold-line) !important;box-shadow:0 2px 10px var(--rv-gold-glow) !important;}
/* inactive mute/solo pills — readable ink on parchment (were faint white-on-dark) */
.mixer-mute,.mixer-solo{background:linear-gradient(180deg,var(--rv-btn-1),var(--rv-btn-2)) !important;
  color:var(--rv-ink) !important;border:1px solid var(--rv-line) !important;}

/* Loading */
#loading{background:var(--rv-paper-2) !important;color:var(--rv-ink-soft) !important;}
.spinner{border-top-color:var(--rv-gold-line) !important;}

/* embed cleanup (kept from 2026-06-06): hide redundant track-mixer in lesson iframes */
body.embed #track-mixer, body.embed #track-selector{display:none !important;}

/* mobile practice ergonomics (kept): chunky thumb targets for calloused/pick-holding hands */
@media (max-width:600px){
  #controls{gap:8px !important;flex-wrap:wrap !important;padding:10px 12px !important;}
  .controls-center{gap:10px !important;flex-wrap:wrap !important;}
  .btn,.speed-btn,.view-btn{min-height:44px !important;font-size:.95rem !important;padding:10px 13px !important;}
  #playPause{min-width:58px !important;min-height:50px !important;font-size:1.25rem !important;}
  #stop{min-width:48px !important;min-height:44px !important;}
}

/* ============================================================================
   CLEAN READABLE SCORE — Rotem 2026-06-26 ("fix 1 page right, can't see notation")
   Kills the mottled vintage wash (the #cdb082 tan + fractalNoise + 7 stain-gradients
   + sepia() filter from the 2026-06-24 "refined vintage" block). Last rule wins +
   !important → the score becomes a CLEAN light page with crisp dark ink, like the PDF.
   ============================================================================ */
#alphaTab, #alphaTab .at-surface, #alphaTab .at-surface > div, #alphaTab svg {
  background: #f2e9cc !important;
  background-image: none !important;
  background-color: #f2e9cc !important;
  filter: none !important;
}
#alphaTab svg rect[fill="#ffffff"], #alphaTab svg rect[fill="#FFFFFF"],
#alphaTab svg rect[fill="white"], #alphaTab svg [fill="#ffffff"],
#alphaTab svg rect[fill="#cdb082"] { fill: #f2e9cc !important; }
#alphaTab { filter: none !important; }
#alphaTab::after { background: linear-gradient(to bottom, rgba(247,241,222,0) 0%, #f2e9cc 80%) !important; }

/* ============================================================================
   COMPACT CONTROLS at narrow lesson widths (645px col) — Rotem 2026-06-26.
   The big parchment pills wrapped into ~4 rows eating ~370px, squishing the
   score to a thin strip. Tighten them so the NOTATION gets the height.
   ============================================================================ */
#controls { padding:7px 12px !important; gap:5px !important; min-height:auto !important; }
#controls .btn, #controls .btn-sm { padding:4px 8px !important; font-size:12px !important; }
#controls .btn-play { padding:5px 13px !important; font-size:14px !important; }
.controls-center { gap:7px !important; }
.speed-presets { gap:2px !important; }
.speed-presets label, .volume-control label { font-size:9px !important; margin-right:2px !important; }
.brand { font-size:10px !important; margin-right:4px !important; }
#abloop .ab-bar { width:30px !important; padding:3px 4px !important; }
#volume { width:60px !important; }

/* 🏋 Woodshed Tempo Trainer (2026-07-04) */
#trainer.active{background:var(--rv-gold,#e0b64e) !important;color:#2a2110 !important;}
.trainer-chip{display:inline-flex;align-items:center;font:700 11.5px/1 'Inter',-apple-system,sans-serif;
  color:#2a2110;background:#f4d64e;border-radius:999px;padding:6px 10px;margin-left:12px;white-space:nowrap;}

/* ══ 2026-07-09 · Practice Studio refinement (sound+look upgrade) ══════════════
   Hierarchy: espresso chrome (controls) / cream manuscript paper (score card) /
   warm wood (fretboard). Gold = the one accent, used only for action + state. */

/* — chrome bar — */
#controls{
  background:linear-gradient(180deg,#2e2314,#231a0d) !important;
  border-bottom:1px solid rgba(196,173,126,.4) !important;
  box-shadow:0 2px 16px rgba(26,18,6,.45);
}
#controls .brand{
  color:#e9d9ae; font-family:'Playfair Display',serif; font-style:italic;
  font-weight:600; font-size:15px; letter-spacing:.02em; margin-right:6px;
}
#controls label{color:#b9a473 !important; font-size:10px; letter-spacing:.1em; text-transform:uppercase;}
#controls .btn{
  background:rgba(233,217,174,.08); color:#e9d9ae;
  border:1px solid rgba(196,173,126,.35); border-radius:8px; transition:all .15s ease;
}
#controls .btn:hover{background:rgba(233,217,174,.18); border-color:#c4ad7e; color:#f4e8c6;}
#controls .btn.active,#controls .speed-btn.active,#controls .view-btn.active{
  background:linear-gradient(180deg,#e2c86c,#c2a642); color:#231a0d;
  border-color:#ebd489; font-weight:700; box-shadow:0 1px 8px rgba(217,191,98,.45);
}
#controls .btn-play{
  width:44px; height:44px; border-radius:50%; font-size:15px;
  background:radial-gradient(circle at 32% 30%,#efdb8f,#c2a642);
  color:#231a0d; border:1px solid #ebd489;
  box-shadow:0 2px 12px rgba(217,191,98,.5), inset 0 1px 0 rgba(255,255,255,.35);
}
#controls .btn-play:hover{transform:scale(1.05);}
.ab-bar{background:rgba(233,217,174,.1)!important; color:#e9d9ae!important;
  border:1px solid rgba(196,173,126,.3)!important; border-radius:6px!important;}
#volume{accent-color:#d9bf62;}
.trainer-chip{background:rgba(217,191,98,.18); color:#ebd489; border:1px solid rgba(217,191,98,.4);
  border-radius:999px; padding:2px 10px; font-size:11px;}

/* — HQ sound chip (appears when GeneralUser GS is live) — */
.hq-chip{
  font-size:9px; font-weight:700; letter-spacing:.14em; color:#231a0d;
  background:linear-gradient(180deg,#e2c86c,#c2a642); border:1px solid #ebd489;
  border-radius:999px; padding:3px 8px; box-shadow:0 1px 6px rgba(217,191,98,.4);
}

/* — advanced tools drawer matches the chrome — */
#advanced-tools{background:linear-gradient(180deg,#241a0e,#2a2011) !important;
  border-bottom:1px solid rgba(196,173,126,.25) !important;}
#advanced-tools .btn{background:rgba(233,217,174,.08); color:#e9d9ae;
  border:1px solid rgba(196,173,126,.3); border-radius:8px;}
#advanced-tools .btn:hover{border-color:#c4ad7e;}
#advanced-tools label{color:#b9a473 !important; font-size:10px; text-transform:uppercase; letter-spacing:.1em;}

/* — the score as a manuscript card —
   NOTE: alphaTab computes its layout from #alphaTab's own width at render time, so the
   element itself must stay full-width (a max-width+auto-margin here collapsed the render
   to a ~130px column). The card inset comes from the PARENT's padding instead. */
#main-content{padding:14px 20px 20px;}
#alphaTab{
  width:100%;
  border-radius:14px;
  box-shadow:0 14px 44px rgba(42,31,13,.20), 0 3px 10px rgba(42,31,13,.14);
  border:1px solid rgba(164,138,86,.35);
  /* overflow must stay VISIBLE — alphaTab's surface paints taller than the element's
     reported height; hidden clipped the score to the first staff (caught 2026-07-09). */
}

/* — fretboard panel ties into the chrome — */
.fretboard-header{
  background:linear-gradient(180deg,#2e2314,#231a0d) !important;
  color:#d9c48d !important; letter-spacing:.12em;
  border-top:1px solid rgba(196,173,126,.35) !important;
}
.fretboard-header span{color:#d9c48d !important;}
.fretboard-header .btn{background:rgba(233,217,174,.08); color:#e9d9ae;
  border:1px solid rgba(196,173,126,.35); border-radius:8px;}

/* — track mixer footer strip (Gemini note 2026-07-09: the bottom section floated
   contextless — tie it into the chrome + label the controls) — */
#track-mixer{
  background:linear-gradient(180deg,#2a2011,#231a0d);
  border-top:1px solid rgba(196,173,126,.3);
  padding:8px 20px;
}
#track-mixer .mixer-row{display:flex; align-items:center; gap:10px; padding:4px 0;}
#track-mixer .mixer-name{
  color:#e9d9ae; font-size:12px; letter-spacing:.04em; min-width:110px;
  font-family:'Playfair Display',serif; font-style:italic;
}
#track-mixer .mixer-vol{accent-color:#d9bf62; max-width:160px;}
#track-mixer .btn{background:rgba(233,217,174,.08); color:#e9d9ae;
  border:1px solid rgba(196,173,126,.3); border-radius:8px; font-size:11px;}
#track-mixer .btn.active{background:linear-gradient(180deg,#e2c86c,#c2a642); color:#231a0d; border-color:#ebd489;}
#track-selector{background:#231a0d; padding:0 20px 10px;}
#track-selector .btn,#track-selector button{background:rgba(233,217,174,.08); color:#e9d9ae;
  border:1px solid rgba(196,173,126,.3); border-radius:8px;}
#track-selector .active{background:linear-gradient(180deg,#e2c86c,#c2a642)!important; color:#231a0d!important;}

/* ============= WASHI — the Practice Room look (2026-08-18) =============
   Rotem: "upgrade the GP player looks … it's really not looking good yet."
   Opt-in via ?skin=washi | washi-dark (skin.js); the standalone player keeps vintage.
   Grammar (proven on the portal/metronome/tuner): flat unbleached paper, sumi ink,
   ONE vermilion seal accent, controls as drawn marks — no gradients, no pills,
   no gold glow, no glassmorphism. The SCORE stays a light sheet in BOTH palettes
   ("a sheet glued into a dark sketchbook", team ruling 08-17). */
:root[data-skin="washi"]{
  --gw-paper:#e0d6c0; --gw-paper-2:#d7cbb1; --gw-sheet:#eae1cd;
  --gw-ink:#1a1510; --gw-ink-soft:#4c4232; --gw-dim:#625843;
  --gw-line:#bfb191; --gw-seal:#a04324; --gw-onink:#eae1cd;
}
:root[data-skin="washi-dark"]{
  --gw-paper:#20211f; --gw-paper-2:#1a1b19; --gw-sheet:#282926;
  --gw-ink:#efe9da; --gw-ink-soft:#c8c2b4; --gw-dim:#a49d8e;
  --gw-line:#3f403c; --gw-seal:#d4714f; --gw-onink:#20211f;
}
:root[data-skin^="washi"] body,
:root[data-skin^="washi"] body.embed{background:var(--gw-paper) !important;color:var(--gw-ink) !important;}
:root[data-skin^="washi"] #controls{
  background:var(--gw-sheet) !important;border-bottom:1px solid var(--gw-line) !important;
  box-shadow:none !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;}
:root[data-skin^="washi"] #controls::after{display:none !important;}
:root[data-skin^="washi"] .brand{
  font-family:'Playfair Display',Georgia,serif !important;font-style:italic;
  color:var(--gw-ink-soft) !important;border-right:1px solid var(--gw-line) !important;}
:root[data-skin^="washi"] label,
:root[data-skin^="washi"] .speed-presets label,
:root[data-skin^="washi"] .controls-right .volume-control label{color:var(--gw-dim) !important;}
/* buttons = drawn marks: outline only; the ACTIVE thing is the one ink-filled mark */
:root[data-skin^="washi"] .btn,
:root[data-skin^="washi"] .abloop .ab-bar,
:root[data-skin^="washi"] #instrumentSelect{
  background:transparent !important;color:var(--gw-ink) !important;
  border:1.5px solid var(--gw-line) !important;border-radius:2px !important;
  box-shadow:none !important;font-weight:500 !important;transform:none !important;}
:root[data-skin^="washi"] .btn:hover,
:root[data-skin^="washi"] #instrumentSelect:hover{
  background:transparent !important;border-color:var(--gw-seal) !important;
  color:var(--gw-seal) !important;transform:none !important;box-shadow:none !important;}
:root[data-skin^="washi"] .btn.active,
:root[data-skin^="washi"] .speed-btn.active,
:root[data-skin^="washi"] .view-btn.active,
:root[data-skin^="washi"] #playPause,
:root[data-skin^="washi"] .btn-play,
:root[data-skin^="washi"] #abLoopToggle.active{
  background:var(--gw-ink) !important;color:var(--gw-onink) !important;
  border:1.5px solid var(--gw-ink) !important;border-radius:2px !important;
  box-shadow:none !important;font-weight:600 !important;}
:root[data-skin^="washi"] #playPause:hover,
:root[data-skin^="washi"] .btn-play:hover{
  background:var(--gw-seal) !important;border-color:var(--gw-seal) !important;
  color:#f2ece0 !important;transform:none !important;box-shadow:none !important;}
:root[data-skin^="washi"] .view-toggle{background:transparent !important;border:1.5px solid var(--gw-line) !important;border-radius:2px !important;}
:root[data-skin^="washi"] .view-toggle .view-btn{border:0 !important;background:transparent !important;color:var(--gw-ink-soft) !important;}
:root[data-skin^="washi"] .view-toggle .view-btn.active{background:var(--gw-ink) !important;color:var(--gw-onink) !important;}
:root[data-skin^="washi"] #advanced-tools{background:var(--gw-paper-2) !important;border-color:var(--gw-line) !important;box-shadow:none !important;}
:root[data-skin^="washi"] input[type="range"]{accent-color:var(--gw-seal) !important;}
:root[data-skin^="washi"] .hq-chip,:root[data-skin^="washi"] .trainer-chip{
  background:transparent !important;border:1px solid var(--gw-line) !important;
  color:var(--gw-dim) !important;box-shadow:none !important;}
/* the score sheet: LIGHT in both palettes; the watermark cover matches it */
:root[data-skin^="washi"] #main-content{background:var(--gw-paper) !important;}
:root[data-skin^="washi"] #alphaTab svg{background:#f4efe4 !important;}
:root[data-skin^="washi"] #alphaTab{background:#f4efe4 !important;border:1px solid var(--gw-line);}
:root[data-skin="washi-dark"] #alphaTab{border-color:rgba(127,120,105,.45);}
:root[data-skin^="washi"] #alphaTab::after{
  background:linear-gradient(to bottom, rgba(244,239,228,0) 0%, #f4efe4 40%) !important;}
/* A–B band + tabs pick up the seal, not gold */
:root[data-skin^="washi"] .ab-band{background:rgba(160,67,36,.12) !important;box-shadow:inset 0 0 0 1px rgba(160,67,36,.25) !important;}
:root[data-skin^="washi"] .ab-band.ab-start{border-left:3px solid var(--gw-seal) !important;}
:root[data-skin^="washi"] .ab-band.ab-end{border-right:3px solid var(--gw-seal) !important;}
:root[data-skin^="washi"] .ab-band.ab-start::before,
:root[data-skin^="washi"] .ab-band.ab-end::after{color:var(--gw-seal) !important;}
/* washi: the toast + volume slider must not leak gold (inline styles beaten with !important) */
:root[data-skin^="washi"] #toast{
  background:var(--gw-ink) !important;color:var(--gw-onink) !important;
  border:1px solid var(--gw-ink) !important;border-radius:2px !important;
  backdrop-filter:none !important;font-weight:500 !important;}
:root[data-skin^="washi"] input[type=range],
:root[data-skin^="washi"] #volume{accent-color:var(--gw-seal) !important;}
:root[data-skin^="washi"] #volume::-webkit-slider-thumb{background:var(--gw-seal) !important;border-color:var(--gw-seal) !important;box-shadow:none !important;}
:root[data-skin^="washi"] #volume::-webkit-slider-runnable-track{background:var(--gw-line) !important;}

/* ============= WASHI GEOMETRY — the OG size, in paper (team dialogue 2026-08-18) =============
   Rotem: "bigger like in the OG page, no scroll." Under washi the app is NOT a fixed 100vh
   card with an internal scrolling score: it becomes a document that grows to its content
   and tells the host how tall it is (beacon.js). Controls = one 64px row; score = edge to
   edge on the sheet; fretboard = 200px flush at the bottom. No card-in-card, no radius. */
:root[data-skin^="washi"] #app{height:100vh !important;min-height:0 !important;}
:root[data-skin^="washi"] #main-content{overflow:hidden !important;flex:1 1 auto !important;min-height:0;}
:root[data-skin^="washi"] #alphaTab{
  overflow-y:auto !important;flex:1 1 auto !important;height:auto !important;min-height:0;
  scrollbar-width:thin;scrollbar-color:#bfb191 transparent;
  padding:28px 22px 18px !important;border:0 !important;background:#f4efe4 !important;
  background-image:none !important;filter:none !important;}
:root[data-skin^="washi"] #alphaTab::after{display:none !important;}   /* no gradient cover on a growing sheet */
:root[data-skin^="washi"] #alphaTab .at-surface > div{background:transparent !important;}
:root[data-skin^="washi"] #alphaTab svg{background:#f4efe4 !important;}
:root[data-skin^="washi"] #alphaTab svg rect[fill="#ffffff"],:root[data-skin^="washi"] #alphaTab svg rect[fill="#FFFFFF"],
:root[data-skin^="washi"] #alphaTab svg rect[fill="white"]{fill:#f4efe4 !important;}
/* one-row control bar: 64px, never wraps at ≥1100px; groups read via gaps not dividers */
:root[data-skin^="washi"] #controls{
  min-height:64px !important;height:auto;padding:0 18px !important;gap:18px !important;
  flex-wrap:nowrap !important;align-items:center !important;}
:root[data-skin^="washi"] .controls-left,:root[data-skin^="washi"] .controls-center,:root[data-skin^="washi"] .controls-right{
  flex-wrap:nowrap !important;gap:10px !important;}
:root[data-skin^="washi"] .speed-presets{gap:0 !important;}
:root[data-skin^="washi"] .speed-presets .btn{margin-left:-1.5px;}     /* fused segmented group */
:root[data-skin^="washi"] .btn{height:36px;padding:0 12px !important;font-size:14.5px !important;line-height:1;
  font-family:'Bricolage Grotesque','Jost',system-ui,sans-serif !important;}
:root[data-skin^="washi"] .btn-sm{height:34px;}
:root[data-skin^="washi"] label,:root[data-skin^="washi"] .speed-presets label,
:root[data-skin^="washi"] .controls-right .volume-control label{
  font-family:'Fraunces',Georgia,serif !important;font-size:12px !important;letter-spacing:.14em;text-transform:uppercase;font-weight:500 !important;}
:root[data-skin^="washi"] .brand{font-size:16px !important;padding-right:14px !important;}
:root[data-skin^="washi"] .hq-chip{display:none !important;}          /* the chip is a dev signal, not for students */
@media (max-width:1100px){
  :root[data-skin^="washi"] #controls{flex-wrap:wrap !important;gap:10px 14px !important;padding:8px 14px !important;}
}
/* fretboard: 200px, paper, flush; header is a hairline label row */
:root[data-skin^="washi"] #fretboard-panel{
  background:#e0d6c0 !important;border-top:1.5px solid #1a1510 !important;padding:6px 12px 10px !important;
  backdrop-filter:none !important;}
:root[data-skin^="washi"] .fretboard-header,:root[data-skin^="washi"] .fretboard-header span{
  color:#4c4232 !important;font-family:'Fraunces',Georgia,serif !important;font-size:11px !important;
  letter-spacing:.14em;text-shadow:none !important;}
:root[data-skin^="washi"] #fretboard{
  height:200px !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;filter:none !important;}
:root[data-skin="washi-dark"] #fretboard-panel{border-top-color:#efe9da !important;}
/* evening: chrome inverts, sheet + fretboard do NOT */
:root[data-skin="washi-dark"] #controls{background:#20211f !important;border-bottom:1px solid #3f403c !important;}
:root[data-skin="washi-dark"] #alphaTab{background:#f4efe4 !important;}
:root[data-skin="washi-dark"] #alphaTab svg{background:#f4efe4 !important;}
/* cursor + selection: seal, not gold */
:root[data-skin^="washi"] .at-cursor-beat{background:rgba(160,67,36,.15) !important;border-left:2px solid #a04324 !important;}
:root[data-skin^="washi"] .at-cursor-bar{background:rgba(26,21,16,.05) !important;}
:root[data-skin^="washi"] .at-selection div{background:rgba(160,67,36,.2) !important;}
:root[data-skin^="washi"] .at-highlight *{fill:#a04324 !important;stroke:#a04324 !important;}
/* mobile: 44px targets, labels + volume culled, fretboard shorter */
@media (max-width:768px){
  :root[data-skin^="washi"] .btn{height:44px;min-width:44px;}
  :root[data-skin^="washi"] label,:root[data-skin^="washi"] .volume-control{display:none !important;}
  :root[data-skin^="washi"] #fretboard{height:150px !important;}
}
/* washi: the fretboard rides with you — sticky to the bottom of the viewport while the tall
   sheet scrolls under it (OG feel: fretboard always in view), and the controls stay sticky at
   the top. Inside an iframe "viewport" = the frame, so the host beacon-grows the frame and
   the PAGE scrolls; sticky within a frame the height of its content is a no-op — that is
   fine: on the host page these pins are provided by the lesson page's own sticky wrappers. */
:root[data-skin^="washi"] #controls{position:relative;z-index:20;}
:root[data-skin^="washi"] #fretboard-panel{position:relative;z-index:20;flex:none;}
/* washi: alphaTab's .at-surface carries its own pale-yellow background from the base theme
   (#f2e9cc) — it peeked out as a BAND above the first page (Rotem: "fix this"). One paper. */
:root[data-skin^="washi"] #alphaTab .at-surface,
:root[data-skin^="washi"] #alphaTab .at-surface.at{background:#f4efe4 !important;background-color:#f4efe4 !important;}
/* washi: fretboard header = a hairline label row on paper (the late dark-gradient override
   above this block was winning); and the control bar must fit ONE row at a 1150px host */
:root[data-skin^="washi"] .fretboard-header{
  background:transparent !important;border:0 !important;color:#4c4232 !important;
  padding:0 2px 4px !important;margin-bottom:2px !important;}
:root[data-skin^="washi"] .fretboard-header span{color:#4c4232 !important;font-family:'Fraunces',Georgia,serif !important;
  font-size:11px !important;letter-spacing:.14em;}
:root[data-skin^="washi"] .fretboard-header .btn{background:transparent !important;color:#4c4232 !important;
  border:1.5px solid #bfb191 !important;border-radius:2px !important;height:26px !important;padding:0 10px !important;font-size:12px !important;}
:root[data-skin="washi-dark"] .fretboard-header,:root[data-skin="washi-dark"] .fretboard-header span{color:#4c4232 !important;} /* header sits on the PAPER panel, stays ink */
/* one-row bar at ≥1000px: tighter gaps, brand never wraps, controls compact */
:root[data-skin^="washi"] .brand{white-space:nowrap !important;font-size:15px !important;padding-right:10px !important;margin-right:2px !important;}
:root[data-skin^="washi"] #controls{gap:12px !important;padding:0 14px !important;}
:root[data-skin^="washi"] .controls-left,:root[data-skin^="washi"] .controls-center,:root[data-skin^="washi"] .controls-right{gap:8px !important;}
:root[data-skin^="washi"] .btn{padding:0 10px !important;font-size:14px !important;}
:root[data-skin^="washi"] .speed-presets label,:root[data-skin^="washi"] .volume-control label{margin-right:4px !important;}
:root[data-skin^="washi"] #trainer{display:none !important;}          /* advanced → Tools drawer for students */
:root[data-skin^="washi"] .trainer-chip{display:none !important;}
:root[data-skin^="washi"] .volume-control input[type=range]{width:64px !important;}
:root[data-skin^="washi"] .abloop .ab-bar{width:36px !important;height:34px !important;}
/* team SHIP GATE 2 (2026-08-18): label floors 14px Bricolage medium (no 12px serif), 16px buttons;
   evening seam = 1px #5c5446 + deep shadow between paper and dark chrome; TAB digits lighter than notation */
:root[data-skin^="washi"] label,:root[data-skin^="washi"] .speed-presets label,
:root[data-skin^="washi"] .controls-right .volume-control label,
:root[data-skin^="washi"] .fretboard-header span{
  font-family:'Bricolage Grotesque','Jost',system-ui,sans-serif !important;font-size:14px !important;font-weight:500 !important;
  letter-spacing:.06em !important;text-transform:uppercase !important;}
:root[data-skin^="washi"] .btn{font-size:16px !important;font-weight:500 !important;}
:root[data-skin^="washi"] .btn-sm{font-size:15px !important;}
:root[data-skin="washi-dark"] #alphaTab{border:1px solid #5c5446 !important;box-shadow:0 8px 32px rgba(0,0,0,.6) !important;}
:root[data-skin="washi-dark"] #fretboard-panel{border-top:1px solid #5c5446 !important;box-shadow:0 -8px 32px rgba(0,0,0,.45) !important;}
:root[data-skin="washi-dark"] #toast{background:#232420 !important;color:#efe9da !important;border:1.5px solid #5c5446 !important;}
:root[data-skin^="washi"] .btn:focus-visible,:root[data-skin^="washi"] .abloop .ab-bar:focus-visible{outline:2px solid #a04324 !important;outline-offset:3px;}
:root[data-skin="washi-dark"] .btn:focus-visible{outline-color:#d4714f !important;}
:root[data-skin^="washi"] #alphaTab{scrollbar-width:none;}
:root[data-skin^="washi"] #alphaTab::-webkit-scrollbar{display:none;}
/* team gate: 16px buttons — the compact base rule `#controls .btn{font-size:12px}` (line ~727) has
   higher specificity than a bare .btn; match it under washi so the floor actually holds */
:root[data-skin^="washi"] #controls .btn,:root[data-skin^="washi"] #controls .btn-sm{font-size:16px !important;padding:0 11px !important;}
:root[data-skin^="washi"] #controls .speed-btn,:root[data-skin^="washi"] #controls .view-btn{font-size:15px !important;}
:root[data-skin^="washi"] .fretboard-header .btn{font-size:13px !important;}
/* DOM: #fretboard-panel now PRECEDES #alphaTab inside #main-content (Rotem 08-18: fretboard on
   top). Vintage/standalone keeps the OG bottom placement via flex order; washi leaves it on top. */
#main-content{display:flex;flex-direction:column;}
#main-content #fretboard-panel{order:2;}
#main-content #alphaTab{order:1;}
:root[data-skin^="washi"] #main-content #fretboard-panel{order:1;}
:root[data-skin^="washi"] #main-content #alphaTab{order:2;}
/* the "100%" chip was wrapping under the speed group: the base .speed-presets{flex-wrap:wrap} +
   the fused -1.5px margins. Under washi the group never wraps and each chip keeps its own border. */
:root[data-skin^="washi"] .speed-presets{flex-wrap:nowrap !important;gap:4px !important;}
:root[data-skin^="washi"] .speed-presets .btn{margin-left:0 !important;}
:root[data-skin^="washi"] .controls-center{flex-wrap:nowrap !important;}
:root[data-skin^="washi"] #controls .btn{padding:0 9px !important;}
:root[data-skin^="washi"] .brand{font-size:14px !important;}