.intro-compact h1{font-size:clamp(1.8rem,3vw,2.75rem)}
.intro-card{padding:20px}

.concept-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.concept{
  padding:17px 18px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--panel-2);
}
.concept.natural{border-top:3px solid var(--accent)}
.concept.tet{border-top:3px solid var(--blue)}
.concept-label{
  margin:0 0 7px;
  color:#b8c4d1;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.concept h2{margin-bottom:8px;font-size:1.55rem}
.concept p:last-child{
  margin:0;
  color:#b3bfcc;
  font-size:.98rem;
  line-height:1.55;
}

.comparison-lab{
  margin-top:14px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#0c1219;
}

.lab-toolbar{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:end;
  margin-bottom:18px;
}
.lab-toolbar>div:first-child{display:grid;gap:6px}
.toolbar-label{color:#aab5c2;font-size:.78rem}
#tonicSelect{
  min-width:135px;
  min-height:42px;
  padding:8px 11px;
  border:1px solid var(--line);
  border-radius:9px;
  color:var(--text);
  background:#111923;
  outline:none;
  font-size:.95rem;
}
.model-note{color:#aab5c2;font-size:.78rem}
.model-note strong{color:#e1e6eb}

/* comparison strips */
.strip-compare{
  padding:17px 15px 14px;
  border:1px solid var(--line);
  border-radius:13px;
  background:#101720;
}
.strip-row{
  display:grid;
  grid-template-columns:100px 1fr;
  gap:12px;
  align-items:center;
}
.strip-row + .strip-row{margin-top:12px}

.strip-label{
  display:grid;
  gap:2px;
}
.strip-label strong{
  font-size:.74rem;
  letter-spacing:.08em;
}
.strip-label small{
  color:#8997a8;
  font-size:.65rem;
}
.tet-strip-label strong{color:var(--blue)}
.natural-strip-label strong{color:var(--accent)}

.pitch-strip{
  position:relative;
  height:42px;
  border-radius:9px;
  border:1px solid #344152;
  background:#0a1017;
  overflow:hidden;
}
.pitch-strip::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.18;
}
.tet-strip::before{background:var(--blue)}
.natural-strip::before{background:var(--accent)}

.strip-marker{
  position:absolute;
  top:0;
  bottom:0;
  width:2px;
  transform:translateX(-1px);
  z-index:2;
}
.tet-strip .strip-marker{background:rgba(126,168,255,.95)}
.natural-strip .strip-marker{background:rgba(223,164,93,.96)}
.strip-marker.selected{
  width:5px;
  transform:translateX(-2.5px);
  background:#fff;
  box-shadow:0 0 11px rgba(255,255,255,.65);
}

.strip-axis{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  margin:7px 0 0 112px;
  color:#718094;
  font-size:.62rem;
}
.strip-axis span{text-align:center}
.strip-axis span:first-child{text-align:left}
.strip-axis span:last-child{text-align:right}

.strip-selected-readout{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  align-items:center;
  margin:10px 0 0 112px;
  color:#aeb9c6;
  font-size:.78rem;
}
.strip-selected-readout span:first-child{
  color:#fff;
  font-size:1rem;
  font-weight:800;
}
.strip-selected-readout strong{
  color:var(--accent);
  font-size:.9rem;
}

/* REAL PIANO CONSOLE */
.piano-console{
  margin-top:15px;
  padding:15px 15px 10px;
  border:1px solid var(--line);
  border-radius:13px;
  background:#101720;
}

.piano-header{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:end;
  margin-bottom:10px;
}
.piano-header>div{
  display:grid;
  gap:2px;
}
.piano-header span{
  color:#a8b4c1;
  font-size:.7rem;
}
.piano-header strong{
  font-size:.95rem;
}
.piano-header small{
  color:#8e9baa;
  font-size:.68rem;
}

/* 2 octaves C..C, 15 white keys */
.piano-keyboard{
  position:relative;
  height:190px;
  border:1px solid #4e5864;
  border-radius:8px 8px 4px 4px;
  overflow:hidden;
  background:#171b21;
  user-select:none;
}

.white-keys{
  position:absolute;
  inset:0;
  display:flex;
  z-index:1;
}

.piano-key.white{
  position:relative;
  flex:1 1 0;
  height:100%;
  padding:0;
  border:0;
  border-right:1px solid #68717b;
  background:linear-gradient(#fbfaf6,#e6e4de 72%,#d4d2cc);
  color:#1a1e23;
  cursor:pointer;
}
.piano-key.white:last-child{
  border-right:0;
}

.piano-key.black{
  position:absolute;
  top:0;
  width:4.5%;
  height:62%;
  padding:0;
  border:1px solid #080a0d;
  border-top:0;
  border-radius:0 0 5px 5px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,#0b0d11,#2b3037 48%,#0a0c10);
  box-shadow:0 5px 8px rgba(0,0,0,.45);
  color:#f0f2f4;
  z-index:3;
  cursor:pointer;
}

.piano-key .piano-note{
  position:absolute;
  left:50%;
  bottom:10px;
  transform:translateX(-50%);
  font-size:.72rem;
  font-weight:800;
  white-space:nowrap;
}

.piano-key.black .piano-note{
  bottom:9px;
  font-size:.62rem;
}

/* keys outside tonic..octave remain visible but inactive */
.piano-key.outside-range{
  opacity:.42;
  cursor:default;
}

.piano-key.tonic-key::after{
  content:"ТОНІКА";
  position:absolute;
  left:50%;
  bottom:31px;
  transform:translateX(-50%);
  padding:2px 5px;
  border-radius:4px;
  background:var(--blue);
  color:#08101c;
  font-size:.53rem;
  font-weight:900;
  letter-spacing:.05em;
  white-space:nowrap;
}

.piano-key.black.tonic-key::after{
  bottom:29px;
}

.piano-key.selected-key{
  box-shadow:inset 0 -7px 0 var(--accent);
}
.piano-key.black.selected-key{
  box-shadow:
    inset 0 -6px 0 var(--accent),
    0 5px 8px rgba(0,0,0,.45);
}

/* bracket */
.bracket-zone{
  position:relative;
  height:62px;
  margin-top:3px;
}

.interval-bracket{
  position:absolute;
  top:9px;
  left:0;
  height:24px;
}

.bracket-line{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  background:var(--accent);
}

.bracket-cap{
  position:absolute;
  bottom:0;
  width:2px;
  height:12px;
  background:var(--accent);
}
.bracket-cap-left{left:0}
.bracket-cap-right{right:0}

.bracket-label{
  position:absolute;
  left:50%;
  bottom:15px;
  min-width:170px;
  transform:translateX(-50%);
  display:grid;
  gap:1px;
  padding:4px 8px;
  border-radius:7px;
  background:#0c1219;
  text-align:center;
  white-space:nowrap;
}
.bracket-label strong{
  color:#f2f5f8;
  font-size:.78rem;
}
.bracket-label span{
  color:#aeb9c5;
  font-size:.68rem;
}

.selection-panel{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:10px;
  margin-top:5px;
}
.selected-note{
  display:grid;
  align-content:center;
  padding:15px;
  border:1px solid var(--line);
  border-radius:11px;
  background:#101720;
}
.selected-note>span{
  font-size:2.35rem;
  font-weight:800;
  letter-spacing:-.04em;
}
.selected-note small{color:#aab5c2;font-size:.78rem}

.selected-values{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}
.selected-values>div{
  min-width:0;
  padding:13px;
  border:1px solid var(--line);
  border-radius:11px;
  background:#101720;
}
.selected-values span{
  display:block;
  margin-bottom:6px;
  color:#aab5c2;
  font-size:.73rem;
}
.selected-values strong{
  display:block;
  font-size:1.06rem;
  line-height:1.25;
  overflow-wrap:anywhere;
}
.selected-values small{
  display:block;
  margin-top:6px;
  color:#c1cad4;
  font-size:.74rem;
  line-height:1.35;
}
#selectedDelta{color:var(--accent)}
.delta-card{border-bottom:2px solid rgba(223,164,93,.5)!important}

.visual-hint{
  margin:12px 0 0;
  color:#aab5c2;
  font-size:.81rem;
  line-height:1.5;
}

.course-thesis{
  margin-top:13px;
  padding:14px 16px;
  border-left:3px solid var(--accent);
  background:rgba(223,164,93,.06);
  color:#d0d7df;
  font-size:.86rem;
  line-height:1.55;
}
.course-thesis p{margin:0}

@media(max-width:840px){
  .selection-panel{grid-template-columns:1fr}
  .selected-values{grid-template-columns:repeat(2,minmax(0,1fr))}
  .piano-keyboard{height:165px}
}

@media(max-width:720px){
  .concept-grid{grid-template-columns:1fr}
  .lab-toolbar{align-items:start;flex-direction:column}
  .strip-row{grid-template-columns:78px 1fr}
  .strip-axis,.strip-selected-readout{margin-left:90px}
  .piano-header{align-items:start;flex-direction:column}
  .piano-key .piano-note{font-size:.62rem}
  .piano-key.black .piano-note{display:none}
}

@media(max-width:520px){
  .intro-card{padding:13px}
  .comparison-lab{padding:11px}
  .selected-values{grid-template-columns:1fr}
  .strip-selected-readout{gap:8px}
  .piano-keyboard{height:145px}
  .piano-key.tonic-key::after{display:none}
}


/* =========================================================
   CUSTOM GUITAR PALETTE
   Based on the uploaded guitar + cabinet:
   warm greige wall / graphite amp head / walnut cabinet /
   creamy logo / copper-brown guitar top / dark grille cloth.
   ========================================================= */

:root{
  --cg-page:#c5bdaf;           /* warm greige wall */
  --cg-page-2:#b9b19f;
  --cg-panel:#2f3436;          /* amp head graphite */
  --cg-panel-2:#383d3f;
  --cg-panel-3:#43484a;
  --cg-line:#565d5e;
  --cg-line-soft:#494f50;

  --cg-cream:#e7d9ba;          /* BMT-like cream */
  --cg-cream-2:#d8cab0;
  --cg-text-soft:#bdb39c;

  --cg-natural:#a56f50;        /* copper/walnut from guitar */
  --cg-natural-strong:#bc8160;
  --cg-natural-dark:#6f4d3f;

  --cg-tet:#8e9696;            /* metallic silver/graphite */
  --cg-tet-strong:#b1b7b6;

  --cg-grille:#352d2b;         /* dark cabinet grille */
  --cg-walnut:#6a5143;         /* cabinet/walnut trim */
  --cg-ivory:#ede7da;
}

/* ---------- page foundation ---------- */
html,
body{
  background:var(--cg-page) !important;
  color:var(--cg-cream) !important;
}

body{
  background:
    radial-gradient(circle at 18% 0%, rgba(255,255,255,.22), transparent 28%),
    linear-gradient(180deg,var(--cg-page) 0%, var(--cg-page-2) 100%) !important;
}

/* keep page structure calmer, not theme-like */
.topbar{
  border-bottom-color:rgba(53,45,43,.22) !important;
}
.brand strong{color:#1e2123 !important;}
.brand span{color:var(--cg-natural) !important;}

.main-nav a{color:#322d2a !important;}
.main-nav a.is-active{
  background:rgba(53,45,43,.10) !important;
  color:#1f2122 !important;
}

.eyebrow{color:var(--cg-natural) !important;}
.intro-compact h1,
.page-intro h1{
  color:#1e2123 !important;
}
.lead{
  color:#4f4b45 !important;
}

.info-chip{
  background:rgba(255,255,255,.28) !important;
  border-color:rgba(53,45,43,.18) !important;
  box-shadow:none !important;
}
.info-chip span,
.info-chip small{color:#5a5650 !important;}
.info-chip strong{color:#1f2122 !important;}

/* ---------- route navigation ---------- */
.course-label span{color:#59554e !important;}
.course-label strong{color:#2a2d2e !important;}

.theory-progress a{
  background:rgba(255,255,255,.22) !important;
  border-color:rgba(53,45,43,.18) !important;
  color:#514d47 !important;
}
.theory-progress a b{color:#716c65 !important;}
.theory-progress a.is-active{
  background:rgba(165,111,80,.10) !important;
  border-color:rgba(165,111,80,.50) !important;
  color:#2a2d2e !important;
}
.theory-progress a.is-active b{
  color:var(--cg-natural) !important;
}

/* ---------- outer card ---------- */
.card,
.intro-card{
  background:
    linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03)),
    rgba(255,255,255,.15) !important;
  border-color:rgba(53,45,43,.20) !important;
  box-shadow:none !important;
  backdrop-filter:saturate(110%);
}

/* ---------- concept cards: as real panels ---------- */
.concept{
  background:
    linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0)),
    var(--cg-panel) !important;
  border-color:var(--cg-line) !important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.03),
    0 2px 6px rgba(0,0,0,.08) !important;
}
.concept.natural{
  border-top-color:var(--cg-natural-strong) !important;
}
.concept.tet{
  border-top-color:var(--cg-tet-strong) !important;
}
.concept h2{color:var(--cg-cream) !important;}
.concept p:last-child{color:var(--cg-cream-2) !important;}
.concept.natural .concept-label{color:var(--cg-natural-strong) !important;}
.concept.tet .concept-label{color:var(--cg-tet-strong) !important;}

/* ---------- main work area ---------- */
.comparison-lab{
  background:
    linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0)),
    var(--cg-panel-2) !important;
  border-color:var(--cg-line) !important;
  box-shadow:0 4px 14px rgba(0,0,0,.10) !important;
}

.toolbar-label{color:var(--cg-cream-2) !important;}

#tonicSelect{
  color-scheme:dark;
  background:var(--cg-panel) !important;
  color:var(--cg-cream) !important;
  border-color:var(--cg-natural) !important;
  box-shadow:none !important;
}
#tonicSelect:focus{
  border-color:var(--cg-natural-strong) !important;
}
#tonicSelect option{
  background:var(--cg-panel) !important;
  color:var(--cg-cream) !important;
}

/* ---------- comparison strips ---------- */
.strip-compare{
  background:
    linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0)),
    var(--cg-panel) !important;
  border-color:var(--cg-line) !important;
}

.tet-strip-label strong{color:var(--cg-tet-strong) !important;}
.natural-strip-label strong{color:var(--cg-natural-strong) !important;}
.strip-label small{color:var(--cg-text-soft) !important;}

.pitch-strip{
  background:var(--cg-grille) !important;
  border-color:#6b615d !important;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.42) !important;
}
.pitch-strip::before{opacity:1 !important;}
.tet-strip::before{
  background:
    linear-gradient(180deg,rgba(177,183,182,.20),rgba(79,84,84,.06)) !important;
}
.natural-strip::before{
  background:
    linear-gradient(180deg,rgba(188,129,96,.18),rgba(111,77,63,.06)) !important;
}

.tet-strip .strip-marker{background:var(--cg-tet-strong) !important;}
.natural-strip .strip-marker{background:var(--cg-natural-strong) !important;}
.strip-marker.selected{
  background:#fffaf0 !important;
  box-shadow:0 0 9px rgba(255,250,240,.58) !important;
}

.strip-axis{color:var(--cg-text-soft) !important;}
.strip-selected-readout{color:var(--cg-cream-2) !important;}
.strip-selected-readout span:first-child{color:var(--cg-cream) !important;}
.strip-selected-readout strong{color:var(--cg-natural-strong) !important;}

/* ---------- piano console ---------- */
.piano-console{
  background:
    linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0)),
    var(--cg-panel) !important;
  border-color:var(--cg-line) !important;
}
.piano-header span{color:var(--cg-text-soft) !important;}
.piano-header strong{color:var(--cg-cream) !important;}

.piano-keyboard{
  background:#3f423f !important;
  border-color:#777066 !important;
  box-shadow:0 5px 12px rgba(0,0,0,.18) !important;
}

.piano-key.white{
  background:
    linear-gradient(
      90deg,
      #d9d2c3 0%,
      var(--cg-ivory) 16%,
      #f2ece2 72%,
      #d0c8b8 100%
    ) !important;
  color:#171819 !important;
  border-right-color:#888077 !important;
}
.piano-key.black{
  background:
    linear-gradient(
      90deg,
      #0a0c0c 0%,
      #232727 28%,
      #3b4040 52%,
      #1c2020 76%,
      #090b0b 100%
    ) !important;
  color:#f1ebe0 !important;
}
.piano-key.outside-range{
  opacity:.36 !important;
  filter:saturate(.45) !important;
}

/* tonic and selected state follow the photo palette */
.piano-key.tonic-key::after{
  content:"ТОНІКА";
  background:linear-gradient(180deg,#766052,#5c4a40) !important;
  color:#f0e6d3 !important;
  border-color:#4d3e37 !important;
  box-shadow:none !important;
}
.piano-key.selected-key{
  box-shadow:inset 0 -7px 0 var(--cg-natural-strong) !important;
}
.piano-key.black.selected-key{
  box-shadow:
    inset 0 -6px 0 var(--cg-natural-strong),
    0 5px 8px rgba(0,0,0,.45) !important;
}

/* ---------- interval bracket ---------- */
.bracket-line,
.bracket-cap{
  background:var(--cg-natural-strong) !important;
}
.bracket-label{
  background:var(--cg-panel) !important;
  border-color:var(--cg-line) !important;
  box-shadow:none !important;
}
.bracket-label strong{color:var(--cg-cream) !important;}
.bracket-label span{color:var(--cg-cream-2) !important;}

/* ---------- results ---------- */
.selected-note,
.selected-values>div{
  background:
    linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0)),
    var(--cg-panel) !important;
  border-color:var(--cg-line) !important;
}
.selected-note>span,
.selected-values strong{
  color:var(--cg-cream) !important;
}
.selected-note small,
.selected-values span,
.selected-values small{
  color:var(--cg-cream-2) !important;
}
#selectedDelta{color:var(--cg-natural-strong) !important;}
.delta-card{
  border-bottom-color:rgba(165,111,80,.58) !important;
}

/* ---------- helper texts ---------- */
.visual-hint{
  color:var(--cg-cream-2) !important;
}
.course-thesis{
  background:
    linear-gradient(90deg,rgba(165,111,80,.10),rgba(255,255,255,0)),
    var(--cg-panel) !important;
  color:var(--cg-cream-2) !important;
  border-left-color:var(--cg-natural) !important;
}

/* ---------- bottom nav ---------- */
.step-nav a{
  background:
    linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0)),
    var(--cg-panel) !important;
  border-color:var(--cg-line) !important;
}
.step-nav a small{color:var(--cg-text-soft) !important;}
.step-nav a strong{color:var(--cg-cream) !important;}


/* =========================================================
   CUSTOM GUITAR PALETTE v2
   Same palette, better proportion + typography.
   Header becomes transparent; typography gets stronger hierarchy.
   ========================================================= */

/* ---------- page balance ---------- */
html,
body{
  background:#c8c1b4 !important;
}

body{
  background:
    linear-gradient(180deg,#cec7bb 0%,#c1b9aa 100%) !important;
}

/* ---------- header: no dark bar ---------- */
.topbar{
  background:transparent !important;
  border-bottom:1px solid rgba(48,52,54,.20) !important;
  box-shadow:none !important;
  padding-top:14px !important;
  padding-bottom:14px !important;
}

.brand strong{
  color:#202326 !important;
  font-size:1.02rem !important;
  font-weight:850 !important;
  letter-spacing:-.01em !important;
}

.brand span{
  color:var(--cg-natural) !important;
  font-size:.70rem !important;
  font-weight:900 !important;
  letter-spacing:.10em !important;
}

.main-nav a{
  color:#3e4141 !important;
  font-size:.88rem !important;
}

.main-nav a.is-active{
  background:rgba(47,52,54,.08) !important;
  color:#1d2021 !important;
  border:1px solid rgba(47,52,54,.10) !important;
}

/* ---------- intro hierarchy ---------- */
.eyebrow{
  color:var(--cg-natural) !important;
  font-size:.73rem !important;
  font-weight:900 !important;
  letter-spacing:.12em !important;
}

.page-intro h1,
.intro-compact h1{
  color:#202326 !important;
  font-size:clamp(2.2rem,4vw,3.65rem) !important;
  line-height:1.02 !important;
  letter-spacing:-.045em !important;
  font-weight:850 !important;
}

.lead{
  max-width:900px !important;
  color:#4b4a46 !important;
  font-size:1.03rem !important;
  line-height:1.55 !important;
}

.info-chip{
  background:rgba(246,242,234,.42) !important;
  border-color:rgba(47,52,54,.16) !important;
}
.info-chip span{
  color:#68645d !important;
  font-size:.72rem !important;
}
.info-chip strong{
  color:#222526 !important;
  font-size:1.02rem !important;
}
.info-chip small{
  color:#666159 !important;
  font-size:.72rem !important;
}

/* ---------- course navigation typography ---------- */
.course-label span{
  color:#666159 !important;
  font-size:.70rem !important;
}
.course-label strong{
  color:#292c2d !important;
  font-size:.74rem !important;
  font-weight:800 !important;
}

.theory-progress a{
  font-size:.73rem !important;
  font-weight:650 !important;
}
.theory-progress a b{
  font-size:.70rem !important;
  font-weight:900 !important;
}

/* ---------- soften the outer beige container ---------- */
.card,
.intro-card{
  background:rgba(236,231,220,.40) !important;
  border-color:rgba(47,52,54,.15) !important;
}

/* ---------- concept cards: clearer hierarchy ---------- */
.concept{
  padding:20px 22px !important;
}

.concept-label{
  font-size:.72rem !important;
  font-weight:900 !important;
  letter-spacing:.10em !important;
}

.concept h2{
  font-size:1.62rem !important;
  line-height:1.15 !important;
  font-weight:820 !important;
  letter-spacing:-.02em !important;
}

.concept p:last-child{
  color:#dfd1b7 !important;
  font-size:.96rem !important;
  line-height:1.55 !important;
}

/* ---------- control labels ---------- */
.toolbar-label{
  color:#d4c7b0 !important;
  font-size:.76rem !important;
  font-weight:650 !important;
}

#tonicSelect{
  min-width:150px !important;
  min-height:44px !important;
  font-size:1rem !important;
  font-weight:700 !important;
}

/* ---------- scale typography ---------- */
.strip-label strong{
  font-size:.77rem !important;
  font-weight:900 !important;
  letter-spacing:.08em !important;
}

.strip-label small{
  font-size:.63rem !important;
  color:#b9ad97 !important;
}

.strip-axis{
  font-size:.64rem !important;
  color:#b8ad99 !important;
}

.strip-selected-readout{
  font-size:.82rem !important;
  gap:18px !important;
}

.strip-selected-readout span:first-child{
  font-size:1.12rem !important;
  font-weight:900 !important;
}

.strip-selected-readout strong{
  font-size:1.02rem !important;
  font-weight:900 !important;
}

/* ---------- piano section ---------- */
.piano-header span{
  font-size:.70rem !important;
  color:#b9ad99 !important;
}

.piano-header strong{
  font-size:1.02rem !important;
  font-weight:800 !important;
}

.piano-key .piano-note{
  font-size:.76rem !important;
  font-weight:900 !important;
}
.piano-key.black .piano-note{
  font-size:.64rem !important;
}

.piano-key.tonic-key::after{
  font-size:.52rem !important;
  font-weight:900 !important;
}

/* ---------- bracket readability ---------- */
.bracket-label strong{
  font-size:.84rem !important;
  font-weight:850 !important;
}
.bracket-label span{
  font-size:.70rem !important;
}

/* ---------- results: strong numeric hierarchy ---------- */
.selected-note{
  padding:18px !important;
}

.selected-note>span{
  font-size:2.75rem !important;
  line-height:1 !important;
  font-weight:900 !important;
}

.selected-note small{
  margin-top:8px !important;
  font-size:.78rem !important;
  color:#d8cab0 !important;
}

.selected-values>div{
  padding:16px !important;
}

.selected-values span{
  margin-bottom:8px !important;
  font-size:.70rem !important;
  font-weight:700 !important;
  letter-spacing:.015em !important;
  color:#bfb39e !important;
}

.selected-values strong{
  font-size:1.18rem !important;
  font-weight:850 !important;
  line-height:1.18 !important;
}

.selected-values small{
  margin-top:8px !important;
  font-size:.76rem !important;
  color:#d3c6ae !important;
}

#selectedDelta{
  font-size:1.28rem !important;
}

/* ---------- explanatory text becomes secondary ---------- */
.visual-hint{
  color:#c8bca5 !important;
  font-size:.78rem !important;
  line-height:1.5 !important;
}

.course-thesis{
  padding:16px 18px !important;
  color:#d7cbb4 !important;
  font-size:.82rem !important;
  line-height:1.55 !important;
}

/* ---------- bottom step nav ---------- */
.step-nav a small{
  font-size:.68rem !important;
}
.step-nav a strong{
  font-size:.86rem !important;
}

/* ---------- remove heavy block feeling ---------- */
.concept,
.comparison-lab,
.strip-compare,
.piano-console,
.selected-note,
.selected-values>div,
.course-thesis,
.step-nav a{
  box-shadow:none !important;
}

/* ---------- responsive ---------- */
@media(max-width:720px){
  .page-intro h1,
  .intro-compact h1{
    font-size:clamp(2rem,9vw,3rem) !important;
  }

  .lead{
    font-size:.96rem !important;
  }
}


/* =========================================================
   CLEAN STEPPER VERSION
   Keep the tool focused. No educational chrome.
   ========================================================= */

/* top header: only brand, no extra nav */
.main-nav{
  display:none !important;
}

/* intro layout simplified */
.page-intro-grid{
  grid-template-columns:1fr !important;
  gap:14px !important;
}

.topbar{
  padding-top:10px !important;
  padding-bottom:10px !important;
}

.page-intro,
.intro-compact{
  padding-top:12px !important;
}

.page-intro h1,
.intro-compact h1{
  margin-bottom:10px !important;
}

.lead{
  margin-bottom:12px !important;
  max-width:920px !important;
}

/* fully hide removed meta elements if any remain */
.info-chip,
.eyebrow,
.step-nav,
.course-thesis{
  display:none !important;
}

/* Stepper row only */
.course-nav-wrap{
  margin:2px 0 14px !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

.course-label.stepper-only{
  display:none !important;
}

.theory-progress{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  align-items:center !important;
}

.theory-progress a{
  background:rgba(255,255,255,.18) !important;
  border:1px solid rgba(47,52,54,.18) !important;
  border-radius:999px !important;
  padding:9px 12px !important;
  color:#4a4945 !important;
  font-size:.76rem !important;
  font-weight:700 !important;
  line-height:1 !important;
  box-shadow:none !important;
}

.theory-progress a b{
  color:#7a746c !important;
  font-size:.72rem !important;
  font-weight:900 !important;
  margin-right:6px !important;
}

.theory-progress a.is-active{
  background:rgba(165,111,80,.10) !important;
  border-color:rgba(165,111,80,.42) !important;
  color:#242728 !important;
}

.theory-progress a.is-active b{
  color:var(--cg-natural) !important;
}

/* tool area moves up a bit */
.comparison-lab{
  margin-top:10px !important;
}

/* clean spacing after removing text block */
.visual-hint{
  margin-top:10px !important;
  margin-bottom:0 !important;
}

/* mobile */
@media(max-width:720px){
  .theory-progress a{
    padding:8px 11px !important;
    font-size:.72rem !important;
  }
}

/* i18n tonic badge */
.piano-key.tonic-key::after{
  content:attr(data-tonic-label) !important;
}