:root{
  --bg:#f3f4f6;--card:#fff;--ink:#111827;--muted:#6b7280;--blue:#135aa3;
  --line:#d1d5db;--shadow:0 2px 10px rgba(0,0,0,.07);--wood:#eee8da
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
header{display:flex;justify-content:space-between;align-items:center;padding:16px 22px;background:#111827;color:white;position:sticky;top:0;z-index:5}
h1{font-size:27px;margin:0 0 3px}header p{margin:0;color:#cbd5e1;font-size:14px}
.tabs{display:flex;gap:8px;padding:10px 18px;background:#e5e7eb;position:sticky;top:75px;z-index:4}
.tab{border:1px solid #cbd5e1;background:white;padding:9px 16px;border-radius:999px;font-weight:850}.tab.active{background:#111827;color:white}
main{padding:18px;max-width:1600px;margin:auto}.hidden{display:none!important}
.controls{display:flex;gap:12px;align-items:end;flex-wrap:wrap;background:white;padding:14px;border-radius:14px;box-shadow:var(--shadow);margin-bottom:16px}
label{font-size:13px;font-weight:800;display:flex;flex-direction:column;gap:5px}
select,button{font:inherit;border-radius:10px;border:1px solid var(--line);padding:10px 13px;background:white}
button{font-weight:800;cursor:pointer}#generate,#showScale{background:#111827;color:white;border-color:#111827}.secondary{background:white}
.summary{display:flex;gap:14px;align-items:center;background:white;padding:13px 16px;border-radius:12px;margin-bottom:14px;box-shadow:var(--shadow)}
#summaryKey{font-size:20px;font-weight:950;color:var(--blue)}#summaryText{font-size:18px;font-weight:850}
.chord-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:12px}
.chord-card{background:white;border:1px solid #c8ccd2;border-radius:14px;padding:12px;min-height:260px;box-shadow:var(--shadow)}
.card-top{display:flex;justify-content:space-between}.chord-name{font-size:31px;font-weight:950}.roman{font-size:20px;font-weight:950}.role{color:var(--blue);font-weight:900;font-size:13px;margin-top:7px}.diagram{width:100%;height:185px}

/* New scale-practice layout */
.scale-layout{display:grid;grid-template-columns:minmax(300px,38%) minmax(420px,62%);gap:16px;align-items:start}
.scale-sidebar{display:flex;flex-direction:column;gap:12px;position:sticky;top:128px}
.panel{background:white;border-radius:14px;padding:14px;box-shadow:var(--shadow)}
.panel h2,.panel h3{margin:0 0 10px}.panel-title-row{display:flex;justify-content:space-between;align-items:baseline}.panel-title-row span{font-size:12px;color:var(--muted)}
.scale-form{display:grid;grid-template-columns:1fr 1.4fr;gap:10px}.scale-form label:nth-child(3){grid-column:1/-1}.window-row{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.scale-title-row{display:flex;gap:8px;flex-wrap:wrap;align-items:baseline}.scale-title-row strong{font-size:20px}.scale-title-row span{font-weight:900;color:var(--blue)}
.hint{font-size:12px;color:var(--muted);margin:7px 0 0}.label-controls{display:flex;align-items:center;gap:6px;margin-top:12px;flex-wrap:wrap}.label-controls span{font-size:12px;font-weight:900}.label-mode{padding:5px 9px;font-size:12px}.label-mode.active{background:#111827;color:white}
.fifths-panel{padding-bottom:10px}#circleOfFifths{width:100%;max-width:330px;display:block;margin:0 auto}.fifths-key{cursor:pointer}.fifths-key text{font-weight:900}.fifths-key:hover circle{stroke-width:3}
.legend-panel{font-size:12px;line-height:1.8}.root-swatch,.note-swatch{display:inline-block;width:15px;height:15px;border-radius:50%;vertical-align:-3px;margin-right:5px}.root-swatch{background:#111827;border:3px double white;outline:2px solid #111827}.note-swatch{background:white;border:2px solid #111827}

.neck-column{min-width:0}.neck-toolbar{display:flex;gap:8px;justify-content:flex-end;margin-bottom:10px;position:sticky;top:128px;z-index:3;background:var(--bg);padding:4px 0}
.neck-shell{background:white;border-radius:14px;box-shadow:var(--shadow);padding:12px;overflow:auto}
#fretboard{display:block;margin:0 auto;max-width:none;flex:none}

.history-panel{position:fixed;inset:0 0 0 auto;width:min(560px,94vw);background:#f9fafb;box-shadow:-8px 0 28px rgba(0,0,0,.2);z-index:20;padding:18px;overflow:auto}
.history-head{display:flex;justify-content:space-between;position:sticky;top:-18px;background:#f9fafb;padding:14px 0}.history-item{background:white;border:1px solid var(--line);border-radius:12px;padding:11px;margin-bottom:9px}.history-prog{font-weight:900;font-size:17px}.history-meta{font-size:12px;color:var(--muted);margin:5px 0 8px}.history-actions{display:flex;gap:7px}

@media(max-width:900px){
  .scale-layout{grid-template-columns:1fr}.scale-sidebar{position:static}.neck-toolbar{position:static;justify-content:flex-start}
  #fretboard{max-width:none}
}
@media(min-width:900px){.chord-grid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1250px){.chord-grid{grid-template-columns:repeat(6,1fr)}}

.width-control{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end;margin-top:12px}
.width-control input[type=range]{width:100%}
#neckWidthValue{font-size:12px;font-weight:850;color:var(--muted);padding-bottom:4px}
.color-options{display:grid;grid-template-columns:1fr 42px;gap:7px 10px;align-items:center;margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.color-title{grid-column:1/-1;font-size:12px;font-weight:950;color:#374151}
.color-options label{display:flex;flex-direction:row;align-items:center;gap:7px;font-size:12px}
.color-options input[type=color]{width:38px;height:26px;padding:1px;border-radius:6px}
.third-swatch,.fifth-swatch{display:inline-block;width:15px;height:15px;border-radius:50%;vertical-align:-3px;margin-right:5px}
.third-swatch{background:#2a9d4b}.fifth-swatch{background:#2563eb}

.palette-section{margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.palette-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-top:8px}
.palette-card{border:1px solid #d1d5db;border-radius:9px;padding:6px;background:white;cursor:pointer;min-width:0}
.palette-card:hover{border-color:#6b7280}.palette-card.active{outline:2px solid #111827;outline-offset:1px}
.palette-swatches{display:grid;grid-template-columns:repeat(4,1fr);height:22px;border-radius:5px;overflow:hidden;margin-bottom:5px}
.palette-name{font-size:9.5px;line-height:1.1;font-weight:850;color:#374151;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:1100px){.palette-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

#patternPosition{font-weight:850}

.playable{cursor:pointer}
.diagram.playable:hover{filter:drop-shadow(0 0 5px rgba(17,24,39,.25))}
.note-marker.playable:hover circle:first-child{stroke-width:3.5}
.note-marker.playable:focus,.diagram.playable:focus{outline:none}

.palette-section{margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.palette-section label{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:900}
#paletteSelect{width:100%}
.palette-grid{display:none!important}

.controls{align-items:end}
.controls input[type="number"]{width:92px}
.check-control{display:flex!important;flex-direction:row!important;align-items:center;gap:7px;white-space:nowrap}
.check-control input{width:auto!important}
.card-actions{display:flex;align-items:flex-start;gap:8px}
.lock-chord{min-width:34px;padding:4px 7px;border-radius:999px;font-size:15px;line-height:1}
.lock-chord.active{background:#111827;color:#fff}
.resolution{font-size:11px;font-weight:800;color:#64748b;margin-top:3px}
.chord-card.playing{outline:3px solid #2563eb;transform:translateY(-2px)}
.practice-tools{display:grid;gap:8px;margin:12px 0;padding:10px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.practice-actions{display:flex;gap:6px;flex-wrap:wrap}
.practice-actions button{padding:7px 9px}
.workbook-header{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px}
.workbook-header h2{margin:0}.workbook-header p{margin:.25rem 0 0;color:#64748b}
.workbook-list{display:grid;gap:12px}
.workbook-item{display:flex;justify-content:space-between;align-items:center;gap:12px}
.workbook-item>div{flex:1}.workbook-item small{color:#64748b}
.empty-state{color:#64748b;text-align:center;padding:30px}
@media (max-width:800px){.workbook-item{align-items:flex-start;flex-wrap:wrap}.controls input[type="number"]{width:100%}}


.runtime-error{
  position:fixed;
  left:12px;
  right:12px;
  bottom:12px;
  z-index:99999;
  background:#7f1d1d;
  color:#fff;
  padding:10px 12px;
  border-radius:10px;
  font:13px/1.4 system-ui;
  box-shadow:0 4px 18px rgba(0,0,0,.25);
}


.header-actions{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
}
.inline-form{display:inline;margin:0}
.button-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}
.auth-muted{
  font-size:12px;
  color:#64748b;
}
.account-main{
  max-width:760px;
  margin:0 auto;
  padding:20px;
}
.account-card{padding:22px}
.account-details{
  display:grid;
  grid-template-columns:140px 1fr;
  gap:10px 18px;
  margin:18px 0;
}
.account-details dt{font-weight:900}
.account-details dd{margin:0;word-break:break-word}
.account-note{
  color:#64748b;
  line-height:1.5;
}

.support-link{display:inline-flex;align-items:center;text-decoration:none;white-space:nowrap}

/* ------------------------------------------------------------------
   Stage 6 — Chord Atlas brand + responsive scale workspace
   ------------------------------------------------------------------ */
:root{
  --brand:#123a5a;
  --brand-2:#1f6f8b;
  --accent:#d5a84f;
  --bg:#eef3f6;
  --card:#ffffff;
  --ink:#102638;
  --muted:#657786;
  --line:#cfdae2;
  --wood:#eee8da;
  --shadow:0 10px 28px rgba(18,58,90,.08);
  --header:#123a5a;
  --header-ink:#fff;
}
:root[data-theme="topographic"]{
  --brand:#173f3b;--brand-2:#2e7667;--accent:#c9a05b;--bg:#edf2ed;--ink:#17302d;--muted:#63756f;--line:#cedbd5;--header:#173f3b;
}
:root[data-theme="midnight"]{
  --brand:#8fc7e8;--brand-2:#58a6d7;--accent:#e0b35c;--bg:#09141f;--card:#102332;--ink:#edf6fb;--muted:#9bb0be;--line:#274050;--wood:#26343a;--header:#07111a;--header-ink:#fff;--shadow:0 12px 30px rgba(0,0,0,.24);
}
:root[data-theme="paper"]{
  --brand:#263746;--brand-2:#567080;--accent:#bd7f45;--bg:#f4efe5;--card:#fffdf8;--ink:#2b3135;--muted:#746f68;--line:#ddd4c8;--header:#263746;
}
body{background:var(--bg);color:var(--ink)}
.site-header{background:var(--header);color:var(--header-ink);min-height:78px;gap:20px}
.brand-lockup{display:flex;align-items:center;min-width:240px;max-width:360px}
.brand-lockup img{display:block;width:min(330px,32vw);height:auto;max-height:56px}
.header-actions{margin-left:auto}
.site-header .secondary,.site-header .button-link{background:rgba(255,255,255,.96);color:#102638;border-color:rgba(255,255,255,.45)}
.theme-control{display:flex;flex-direction:row;align-items:center;gap:6px;font-size:11px;color:#dbe8f0}
.theme-control select{padding:7px 9px;border-radius:999px;font-size:12px}
.support-badge{display:block;width:148px;flex:0 0 auto;border-radius:12px;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,.12);transition:transform .15s ease}
.support-badge:hover{transform:translateY(-1px)}
.support-badge img{display:block;width:100%;height:auto}
.tabs{top:78px;background:color-mix(in srgb,var(--bg) 92%,white 8%);border-bottom:1px solid var(--line)}
.tab.active{background:var(--brand);border-color:var(--brand);color:white}
.panel,.controls,.summary,.chord-card{background:var(--card);color:var(--ink);box-shadow:var(--shadow)}
select,button,input{color:var(--ink)}
button{touch-action:manipulation}
#generate,#showScale{background:var(--brand);border-color:var(--brand);color:#fff}

/* Scale workspace */
.scale-workspace{display:grid;gap:14px;max-width:1540px;margin:0 auto;padding-bottom:130px}
.scale-top-grid{display:grid;grid-template-columns:minmax(270px,360px) minmax(340px,1fr);gap:14px;align-items:stretch}
.scale-key-panel{display:flex;flex-direction:column}
.scale-key-panel #circleOfFifths{width:100%;max-width:320px;margin:auto}
.eyebrow{font-size:10px;font-weight:950;letter-spacing:.18em;color:var(--brand-2)}
.scale-choice-panel{display:flex;flex-direction:column;gap:12px;justify-content:flex-start}
.scale-choice-panel h2{font-size:clamp(24px,3vw,40px);line-height:1;margin:3px 0}
.window-label{font-size:13px;font-weight:850;color:var(--brand-2);min-height:1.2em}
.scale-select-label{max-width:520px}
#scaleType{width:100%;font-size:16px}
.scale-quick-choices{display:flex;gap:7px;flex-wrap:wrap}
.scale-quick-btn{padding:7px 11px;border-radius:999px;background:color-mix(in srgb,var(--card) 90%,var(--bg));font-size:12px}
.scale-quick-btn.active{background:var(--brand);color:white;border-color:var(--brand)}
.scale-notes{font-size:13px;line-height:1.55;color:var(--muted);max-width:900px}
.scale-controls-panel{padding:10px 12px}
.control-strip{display:flex;gap:10px;align-items:end;flex-wrap:wrap}
.control-strip label{min-width:130px;flex:0 1 auto}
.segmented-control{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--card);align-self:end}
.segmented-control button{border:0;border-radius:0;padding:8px 11px;background:transparent;font-size:12px}
.segmented-control button+button{border-left:1px solid var(--line)}
.segmented-control button.active{background:var(--brand);color:#fff}
.scale-main-grid{display:grid;grid-template-columns:minmax(250px,300px) minmax(0,1fr);gap:14px;align-items:start}
.scale-left-rail{display:grid;gap:12px;align-content:start}
.parameters-panel{padding:0;overflow:hidden}
.parameters-panel summary{cursor:pointer;list-style:none;padding:14px;display:flex;justify-content:space-between;align-items:center;font-weight:950}
.parameters-panel summary::-webkit-details-marker{display:none}
.parameters-panel summary:after{content:"+";font-size:20px;color:var(--brand)}
.parameters-panel[open] summary:after{content:"−"}
.summary-hint{font-size:10px;color:var(--muted);font-weight:700;margin-left:auto;margin-right:12px}
.parameters-body{padding:0 14px 14px;border-top:1px solid var(--line)}
.parameter-grid{display:grid;gap:8px;margin-top:10px}
.palette-section,.color-options{border-color:var(--line)}
.legend-panel{color:var(--muted)}
.neck-column{min-width:0;display:grid;gap:10px}
.neck-toolbar{position:sticky;top:132px;z-index:3;background:var(--bg);display:flex;justify-content:flex-end;align-items:center;gap:8px;padding:6px 0;margin:0}
.window-buttons{display:flex;gap:6px;margin-right:auto}
.neck-shell{background:var(--card);border-radius:14px;box-shadow:var(--shadow);padding:16px;overflow:auto;min-height:360px;display:flex;justify-content:flex-end;align-items:flex-start}
#fretboard{display:block;margin-left:auto;margin-right:0;max-width:none;flex:0 0 auto}
.ascii-fretboard{margin:0 0 0 auto;min-width:max-content;max-width:none;background:#102638;color:#e9f4fa;border-radius:12px;padding:18px 20px;font:700 13px/1.7 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);overflow:auto}
:root[data-theme="midnight"] .ascii-fretboard{background:#050b10}

/* Floating/collapsible scale player */
.scale-player{position:fixed;left:20px;bottom:20px;z-index:18;width:min(360px,calc(100vw - 40px));background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 16px 42px rgba(18,58,90,.22);padding:12px}
.scale-player.docked{position:static;width:100%;margin-top:10px}
.scale-player-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.scale-player-head>div{display:flex;gap:4px}
.icon-button{padding:4px 8px;border-radius:8px;background:transparent}
.scale-player-body{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end;margin-top:10px}
.scale-player.collapsed .scale-player-body{display:none}
.scale-player.collapsed{width:150px}
.scale-player input[type=number]{width:78px}
.practice-actions{border:0;margin:0;padding:0}

/* Strong mobile/tablet behavior */
@media(max-width:1050px){
  .scale-top-grid{grid-template-columns:300px 1fr}
  .scale-main-grid{grid-template-columns:1fr}
  .scale-left-rail{grid-template-columns:1fr 1fr}
  .neck-toolbar{position:static}
}
@media(max-width:760px){
  main{padding:10px}
  .site-header{position:relative;min-height:auto;align-items:flex-start;flex-wrap:wrap;padding:12px}
  .brand-lockup{min-width:0;width:180px}
  .brand-lockup img{width:180px;max-height:48px}
  .header-actions{width:100%;justify-content:flex-start;gap:6px}
  .theme-control span{display:none}
  .support-badge{width:126px;margin-left:auto}
  .tabs{position:sticky;top:0;overflow-x:auto;white-space:nowrap;padding:8px 10px}
  .scale-top-grid{grid-template-columns:1fr}
  .scale-key-panel #circleOfFifths{max-width:280px}
  .scale-left-rail{grid-template-columns:1fr}
  .control-strip{display:grid;grid-template-columns:1fr 1fr}
  .control-strip label{min-width:0}
  .segmented-control{width:100%}
  .segmented-control button{flex:1}
  .neck-shell{padding:10px;min-height:280px}
  #fretboard{max-width:none}
  .scale-player{left:10px;right:10px;bottom:10px;width:auto}
  .scale-player.collapsed{width:145px;right:auto}
  .scale-player-body{grid-template-columns:1fr}
}
@media(max-width:480px){
  .control-strip{grid-template-columns:1fr}
  .scale-choice-panel h2{font-size:28px}
  .window-buttons{width:100%;overflow-x:auto}
  .neck-toolbar{flex-wrap:wrap;justify-content:flex-start}
  .neck-toolbar #showScale,.neck-toolbar #saveScale{flex:1}
}


/* === Stage 6.1 responsive scale workspace === */
.scale-workspace{
  --neck-column-width:412px;
  display:grid;
  grid-template-columns:minmax(420px,1fr) var(--neck-column-width);
  gap:14px;
  align-items:start;
  max-width:1540px;
  margin:0 auto;
  padding-bottom:32px;
}
.scale-controls-column{min-width:0;display:grid;gap:12px;align-content:start}
.scale-selector-grid{display:grid;grid-template-columns:minmax(250px,320px) minmax(260px,1fr);gap:12px;align-items:stretch}
.scale-key-panel{display:flex;flex-direction:column;min-width:0}
.scale-key-panel #circleOfFifths{width:100%;max-width:290px;margin:auto}
.scale-choice-panel{display:flex;flex-direction:column;gap:10px;min-width:0}
.scale-choice-panel h2{font-size:clamp(22px,2.2vw,34px);line-height:1;margin:3px 0}
.scale-select-label,#scaleType{width:100%;max-width:none}
.scale-quick-choices{display:flex;gap:7px;flex-wrap:wrap}
.scale-notes{font-size:13px;line-height:1.55;color:var(--muted)}
.tool-panel{padding:0;overflow:hidden}
.tool-panel summary{cursor:pointer;list-style:none;padding:13px 14px;display:flex;align-items:center;font-weight:950;color:var(--ink)}
.tool-panel summary::-webkit-details-marker{display:none}
.tool-panel summary:after{content:"+";font-size:20px;color:var(--brand);margin-left:10px}
.tool-panel[open] summary:after{content:"−"}
.summary-hint{font-size:10px;color:var(--muted);font-weight:700;margin-left:auto}
.tool-panel-body,.parameters-body{padding:12px 14px 14px;border-top:1px solid var(--line)}
.control-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(125px,1fr));gap:9px;align-items:end}
.control-strip label{min-width:0}
.visualization-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;align-items:center}
.segmented-control{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--card)}
.segmented-control button{border:0;border-radius:0;padding:8px 11px;background:transparent;font-size:12px}
.segmented-control button+button{border-left:1px solid var(--line)}
.segmented-control button.active{background:var(--brand);color:#fff}
.window-buttons,.save-refresh-buttons,.practice-actions{display:flex;gap:6px;flex-wrap:wrap}
.save-refresh-buttons{margin-left:auto}
.neck-column{min-width:0;width:var(--neck-column-width);justify-self:end;align-self:start}
.neck-shell{width:100%;box-sizing:border-box;background:var(--card);border-radius:14px;box-shadow:var(--shadow);padding:16px;overflow:auto;display:flex;justify-content:flex-end;align-items:flex-start;min-height:0}
#fretboard{display:block;margin-left:auto;margin-right:0;max-width:none;flex:0 0 auto}
.ascii-fretboard{margin:0 0 0 auto;min-width:max-content;max-width:none;background:#102638;color:#f3f8fb;border-radius:12px;padding:18px 20px;font:700 13px/1.7 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow:auto}
.scale-player{position:static!important;left:auto!important;right:auto!important;bottom:auto!important;width:auto!important;margin:0!important;border-radius:14px}
.scale-player-body{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end;margin:0}
.scale-player input[type=number]{width:78px}

/* Fix midnight contrast explicitly. */
:root[data-theme="midnight"]{
  --brand:#74b9e6;--brand-2:#9bd0ef;--accent:#e2b65f;
  --bg:#07131d;--card:#102534;--ink:#f4f9fc;--muted:#b6cad7;
  --line:#365469;--wood:#33464e;--header:#030b11;--header-ink:#fff;
  --shadow:0 12px 30px rgba(0,0,0,.34);
}
:root[data-theme="midnight"] .panel,:root[data-theme="midnight"] .tool-panel,:root[data-theme="midnight"] .neck-shell{color:var(--ink)}
:root[data-theme="midnight"] select,:root[data-theme="midnight"] input:not([type="color"]),:root[data-theme="midnight"] button.secondary,:root[data-theme="midnight"] .scale-quick-btn{background:#173244;color:#f4f9fc;border-color:#42637a}
:root[data-theme="midnight"] option{background:#102534;color:#f4f9fc}
:root[data-theme="midnight"] .hint,:root[data-theme="midnight"] .summary-hint,:root[data-theme="midnight"] .legend-panel,:root[data-theme="midnight"] .scale-notes{color:#c2d3de}
:root[data-theme="midnight"] .color-title{color:#edf6fb}
:root[data-theme="midnight"] .ascii-fretboard{background:#02090e;color:#f6fbfe}

@media(max-width:1050px){
  .scale-workspace{grid-template-columns:minmax(360px,1fr) var(--neck-column-width)}
  .scale-selector-grid{grid-template-columns:1fr}
  .scale-key-panel #circleOfFifths{max-width:245px}
}
@media(max-width:820px){
  .scale-workspace{display:flex;flex-direction:column;max-width:none}
  .neck-column{order:1;width:min(100%,var(--neck-column-width));max-width:100%;align-self:flex-end}
  .scale-controls-column{order:2;width:100%}
  .scale-selector-grid{grid-template-columns:minmax(220px,300px) minmax(0,1fr)}
}
@media(max-width:640px){
  main{padding:10px}
  .scale-selector-grid{grid-template-columns:1fr}
  .scale-key-panel #circleOfFifths{max-width:260px}
  .visualization-actions{align-items:stretch}
  .segmented-control{width:100%}.segmented-control button{flex:1}
  .window-buttons,.save-refresh-buttons{width:100%}
  .window-buttons button,.save-refresh-buttons button{flex:1}
  .scale-player-body{grid-template-columns:1fr}
  .neck-shell{padding:10px}
}


/* === Stage 6.2 orientation-aware workspace ===
   Vertical neck: controls left, neck right.
   Horizontal neck: neck gets the entire top row, controls flow underneath. */
.scale-workspace.neck-horizontal{
  display:flex;
  flex-direction:column;
  max-width:1540px;
}
.scale-workspace.neck-horizontal .neck-column{
  order:1;
  width:100%;
  max-width:none;
  justify-self:stretch;
  align-self:stretch;
}
.scale-workspace.neck-horizontal .neck-shell{
  width:100%;
  justify-content:stretch;
}
.scale-workspace.neck-horizontal #fretboard,
.scale-workspace.neck-horizontal .ascii-fretboard{
  margin-left:0;
  margin-right:0;
  width:100%;
  max-width:100%;
}
.scale-workspace.neck-horizontal .scale-controls-column{
  order:2;
  width:100%;
}

/* In vertical-neck mode the right column remains only as wide as the neck. */
.scale-workspace.neck-vertical{
  display:grid;
  grid-template-columns:minmax(420px,1fr) var(--neck-column-width);
}

/* ASCII deliberately mirrors the selected visual orientation. */
.ascii-fretboard.ascii-horizontal{
  width:100%;
  box-sizing:border-box;
  white-space:pre;
}
.ascii-fretboard.ascii-vertical{
  width:max-content;
  max-width:100%;
  box-sizing:border-box;
  white-space:pre;
}

@media(max-width:820px){
  /* On narrow screens both orientations use a neck-first stacked layout. */
  .scale-workspace.neck-vertical,
  .scale-workspace.neck-horizontal{
    display:flex;
    flex-direction:column;
  }
  .scale-workspace.neck-vertical .neck-column,
  .scale-workspace.neck-horizontal .neck-column{
    order:1;
    width:100%;
    max-width:100%;
    align-self:stretch;
  }
  .scale-workspace.neck-vertical .scale-controls-column,
  .scale-workspace.neck-horizontal .scale-controls-column{
    order:2;
    width:100%;
  }
}


/* === Stage 6.3 support CTA === */
.support-cta{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:auto;
}
.support-copy{
  color:var(--header-ink);
  opacity:.88;
  font-size:13px;
  font-weight:700;
  white-space:nowrap;
}
.support-button{
  display:inline-flex;
  align-items:center;
  gap:7px;
  border-radius:999px;
  padding:9px 13px;
  background:var(--accent);
  color:#102638;
  border:1px solid color-mix(in srgb,var(--accent) 75%,#000);
  font-weight:900;
  white-space:nowrap;
}
.support-button:hover{filter:brightness(.98)}
.support-label-short{display:none}

.support-dialog{
  border:0;
  padding:0;
  background:transparent;
  max-width:min(92vw,520px);
}
.support-dialog::backdrop{
  background:rgba(3,11,17,.56);
  backdrop-filter:blur(2px);
}
.support-dialog-card{
  background:var(--card);
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 24px 70px rgba(0,0,0,.32);
  padding:22px;
}
.support-dialog-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
.support-dialog-head h2{
  margin:4px 0 0;
  font-size:28px;
}
.icon-button{
  appearance:none;
  border:1px solid var(--line);
  background:transparent;
  color:var(--ink);
  width:36px;
  height:36px;
  border-radius:50%;
  font-size:24px;
  line-height:1;
  padding:0;
}
.support-venmo-button{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  width:100%;
  box-sizing:border-box;
  margin-top:16px;
  border-radius:12px;
  padding:12px 16px;
  text-decoration:none;
  background:var(--brand);
  color:#fff;
  font-weight:900;
}
.support-note{
  margin:14px 0 0;
  color:var(--muted);
  font-size:12px;
}
:root[data-theme="midnight"] .support-button{
  color:#08131b;
}

@media(max-width:980px){
  .support-copy{display:none}
}
@media(max-width:720px){
  .support-label-full{display:none}
  .support-label-short{display:inline}
  .support-button{padding:8px 11px}
}
@media(max-width:560px){
  .support-cta{margin-left:0}
}


/* === Stage 7 Harmonic Map === */
.harmonic-map-layout{display:grid;grid-template-columns:minmax(240px,300px) minmax(520px,1fr) minmax(300px,360px);gap:14px;align-items:start;max-width:1700px;margin:0 auto 14px}
.harmonic-controls,.harmonic-analysis,.harmonic-map-center{min-width:0}.harmonic-controls{display:grid;gap:12px;align-content:start}.harmonic-control-buttons{display:grid;gap:8px}
.harmonic-map-legend{display:grid;gap:8px;padding-top:8px;border-top:1px solid var(--line);color:var(--muted);font-size:12px}.hm-swatch{display:inline-block;width:12px;height:12px;border-radius:4px;margin-right:8px;vertical-align:-1px}.hm-diatonic{background:#8fc5ff}.hm-secondary{background:#e5b84d}.hm-borrowed{background:#b49adf}.hm-other{background:#aeb9c4}
.harmonic-map-center{min-height:700px}#harmonicMapSvg{width:100%;max-height:760px;display:block;margin:auto;overflow:visible}.hm-sector{stroke:var(--card);stroke-width:2}.hm-label{font-weight:950;fill:var(--ink);text-anchor:middle;dominant-baseline:middle}.hm-degree{font-size:12px;font-weight:800;fill:var(--muted);text-anchor:middle}.hm-home-ring{fill:color-mix(in srgb,var(--card) 88%,var(--brand));stroke:var(--line);stroke-width:2}.hm-center-title{font-size:26px;font-weight:950;fill:var(--ink);text-anchor:middle}.hm-center-subtitle{font-size:13px;font-weight:800;fill:var(--muted);text-anchor:middle}.hm-route{fill:none;stroke:var(--brand);stroke-width:6;stroke-linecap:round;stroke-linejoin:round;opacity:.9}.hm-route.secondary{stroke:#d9a11e}.hm-route.borrowed{stroke:#8d69c7}.hm-marker{stroke:#fff;stroke-width:3}.hm-marker-text{fill:#fff;font-size:12px;font-weight:950;text-anchor:middle;dominant-baseline:middle}
.harmonic-chord-list{display:grid;gap:8px}.harmonic-chord-row{border:1px solid var(--line);border-radius:12px;padding:10px;display:grid;grid-template-columns:36px 1fr;gap:10px;align-items:start;background:color-mix(in srgb,var(--card) 92%,var(--bg))}.harmonic-step-num{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--brand);color:#fff;font-weight:950}.harmonic-chord-row.secondary .harmonic-step-num{background:#c89116}.harmonic-chord-row.borrowed .harmonic-step-num{background:#7b57ba}.harmonic-chord-name{font-size:22px;line-height:1;font-weight:950}.harmonic-function{display:inline-flex;border-radius:999px;padding:4px 8px;margin:4px 0;background:#d9eaff;color:#0d385b;font-size:11px;font-weight:900}.harmonic-function.secondary{background:#f7e5ad;color:#6c4a00}.harmonic-function.borrowed{background:#e8ddf7;color:#4a2f77}.harmonic-row-explanation{color:var(--muted);font-size:12px;line-height:1.4}.harmonic-summary{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}.harmonic-summary h3{margin:0 0 6px}
.harmonic-lower-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:14px;max-width:1700px;margin:0 auto 32px}.harmonic-path-strip{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.harmonic-path-node{display:grid;place-items:center;min-width:58px;min-height:58px;border-radius:50%;border:2px solid var(--line);background:var(--card);font-weight:950}.harmonic-path-node.secondary{border-color:#d9a11e;background:#fff5d5}.harmonic-path-node.borrowed{border-color:#8d69c7;background:#f0e9fb}.harmonic-path-arrow{color:var(--brand);font-size:22px;font-weight:950}#tensionCurveSvg{width:100%;height:220px}.tension-axis{stroke:var(--line);stroke-width:1}.tension-line{fill:none;stroke:var(--brand);stroke-width:4}.tension-dot{fill:var(--brand);stroke:#fff;stroke-width:2}.tension-dot.secondary{fill:#d9a11e}.tension-dot.borrowed{fill:#8d69c7}.tension-label{font-size:11px;fill:var(--muted);text-anchor:middle}.harmonic-insights{display:grid;gap:9px}.harmonic-insight{display:grid;grid-template-columns:24px 1fr;gap:8px;align-items:start;color:var(--ink);font-size:13px}.harmonic-insight-mark{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:#2b9b72;color:#fff;font-size:12px;font-weight:950}
@media(max-width:1250px){.harmonic-map-layout{grid-template-columns:minmax(240px,300px) minmax(480px,1fr)}.harmonic-analysis{grid-column:1 / -1}.harmonic-chord-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.harmonic-map-layout{grid-template-columns:1fr}.harmonic-map-center{order:1;min-height:0}.harmonic-controls{order:2}.harmonic-analysis{order:3}.harmonic-lower-grid{grid-template-columns:1fr}.harmonic-chord-list{grid-template-columns:1fr}}

/* Stage 8 playable atlas */
.harmonic-map-layout.stage8{grid-template-columns:minmax(260px,330px) minmax(560px,1fr) minmax(310px,380px)}
.map-play-controls{display:flex;gap:8px;flex-wrap:wrap}.atlas-worlds{position:relative;min-height:720px}.neighbor-world{position:absolute;width:150px;min-height:110px;border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--card) 86%,var(--brand));box-shadow:var(--shadow);padding:12px;color:var(--muted);font-size:12px;opacity:.62}.relative-world{top:36px;right:8px}.parallel-world{bottom:36px;left:8px;background:color-mix(in srgb,var(--card) 84%,#a98bd6)}.neighbor-world.active{opacity:1;transform:scale(1.03)}.neighbor-world h4{margin:0 0 6px;color:var(--ink)}.world-chords{display:flex;flex-wrap:wrap;gap:5px}.world-chord{padding:4px 7px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink)}.hm-sector.clickable{cursor:pointer}.hm-sector.clickable:hover{filter:brightness(.96)}.hm-gravity-route{fill:none;stroke:#d9a11e;stroke-width:7;stroke-linecap:round;opacity:.25}.hm-play-marker{fill:#fff;stroke:var(--brand);stroke-width:5}.harmonic-chord-row.active{outline:3px solid color-mix(in srgb,var(--brand) 45%,transparent)}.harmonic-chord-row{cursor:pointer}.transition-explain{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}.transition-explain p,.demo-guide,.path-builder-note{color:var(--muted);font-size:12px;line-height:1.5}.tension-card{position:relative}.tension-playhead{position:absolute;bottom:28px;width:2px;height:150px;background:var(--accent);left:34px;opacity:0;pointer-events:none}.tension-playhead.active{opacity:1}.support-button{text-decoration:none}.map-layer-checks{display:grid;gap:8px}@media(max-width:1350px){.harmonic-map-layout.stage8{grid-template-columns:minmax(250px,310px) minmax(500px,1fr)}}@media(max-width:900px){.harmonic-map-layout.stage8{grid-template-columns:1fr}.atlas-worlds{min-height:620px}}@media(max-width:640px){.neighbor-world{position:static;width:auto;margin:8px 0}.atlas-worlds{min-height:auto}}


/* === Stage 8.1 audio + contextual harmony + mobile map === */
html,body{max-width:100%;overflow-x:hidden}
main{max-width:100%;overflow-x:hidden}

.map-audio-status{
  margin:-2px 0 8px;
  color:var(--muted);
  font-size:12px;
  font-weight:750;
}
.map-audio-status.audio-ready{color:#25755d}
.map-audio-status.audio-error{color:#b42318}

.harmonic-map-center{overflow:hidden}
#harmonicMapSvg{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  touch-action:manipulation;
}
.hm-relative-node{cursor:pointer}
.hm-relative-node circle{
  fill:color-mix(in srgb,var(--card) 88%,#83aee6);
  stroke:var(--line);
  stroke-width:2;
}
.hm-relative-node text{
  fill:var(--ink);
  text-anchor:middle;
  dominant-baseline:middle;
  font-size:13px;
  font-weight:900;
  pointer-events:none;
}
.hm-relative-node.active circle{
  fill:color-mix(in srgb,var(--brand) 35%,var(--card));
  stroke:var(--brand);
  stroke-width:3;
}
.hm-relative-caption{
  fill:var(--muted);
  text-anchor:middle;
  font-size:11px;
  font-weight:800;
}
.hm-sector.clickable,.hm-marker,.harmonic-chord-row,.harmonic-path-node,.world-chord{
  -webkit-tap-highlight-color:transparent;
}
.hm-sector.clickable:active,.hm-relative-node:active{opacity:.72}
.harmonic-chord-row:active,.harmonic-path-node:active{transform:scale(.99)}
.harmonic-chord-row::after{
  content:"Tap to hear";
  display:block;
  grid-column:2;
  color:var(--muted);
  font-size:10px;
  font-weight:750;
  margin-top:3px;
}
.harmonic-chord-row.active::after{content:"Playing"}

.tabs{
  max-width:100%;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none}

@media(max-width:640px){
  .tabs{
    width:100%;
    box-sizing:border-box;
    overflow-x:auto;
    scroll-snap-type:x proximity;
    justify-content:flex-start;
  }
  .tab{scroll-snap-align:start;flex:0 0 auto}
  .harmonic-map-center{padding-left:12px;padding-right:12px}
  .atlas-worlds{width:100%;max-width:100%;overflow:hidden}
  #harmonicMapSvg{width:100%;max-width:100%}
  .neighbor-world{box-sizing:border-box;max-width:100%}
}


/* === Stage 8.3 random harmonic journeys === */
.map-generate-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
@media(max-width:640px){
  .map-generate-actions{grid-template-columns:1fr}
}

/* === Stage 8.4 shared chord core === */
.harmonic-shared-diagram{
  grid-column:2;
  margin-top:8px;
  padding:8px 10px 4px;
  border:1px solid var(--line);
  border-radius:10px;
  background:color-mix(in srgb,var(--card) 92%,var(--bg));
}
.harmonic-shared-diagram-title{
  display:flex;
  justify-content:space-between;
  gap:8px;
  align-items:center;
  color:var(--muted);
  font-size:10px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.harmonic-chord-diagram{
  display:block;
  width:min(220px,100%);
  height:auto;
  margin:0 auto;
}
.harmonic-chord-diagram.playable:hover{
  filter:drop-shadow(0 0 5px rgba(17,24,39,.20));
}
@media(max-width:640px){
  .harmonic-shared-diagram{padding:7px}
  .harmonic-chord-diagram{width:min(190px,100%)}
}


/* === Stage 8.5 Playability Layout === */
:root{--progression-card-scale:1;--map-card-scale:1}
.chord-size-control{min-width:150px}.chord-size-control input,.chord-display-tools input{width:130px}.chord-size-control span,.chord-display-tools span{font-size:11px;color:var(--muted);font-weight:800}
.chord-display-tools{display:flex;align-items:end;gap:10px;flex-wrap:wrap}.chord-display-tools label{min-width:145px}
@media(min-width:1100px){
  .harmonic-map-layout.stage8{grid-template-columns:minmax(260px,330px) minmax(600px,1fr)}
  .harmonic-analysis{grid-column:1/-1}
  .harmonic-chord-list{display:grid;grid-template-columns:repeat(var(--hm-card-count,6),minmax(0,1fr));gap:8px}
}
.harmonic-chord-row{font-size:calc(1rem * var(--map-card-scale));padding:calc(10px * var(--map-card-scale));gap:calc(10px * var(--map-card-scale));grid-template-columns:calc(36px * var(--map-card-scale)) minmax(0,1fr);transition:outline-color .15s,background .15s,transform .15s}
.harmonic-chord-row .harmonic-step-num{width:calc(30px * var(--map-card-scale));height:calc(30px * var(--map-card-scale));font-size:calc(1rem * var(--map-card-scale))}
.harmonic-chord-row .harmonic-chord-name{font-size:calc(22px * var(--map-card-scale))}.harmonic-chord-row .roman{font-size:calc(16px * var(--map-card-scale))}
.harmonic-chord-row .harmonic-row-explanation{font-size:calc(12px * var(--map-card-scale))}.harmonic-chord-row .harmonic-function{font-size:calc(11px * var(--map-card-scale));padding:calc(4px * var(--map-card-scale)) calc(8px * var(--map-card-scale))}
.harmonic-chord-row .harmonic-shared-diagram{grid-column:1/-1}.harmonic-chord-row .harmonic-shared-diagram svg{height:calc(190px * var(--map-card-scale))!important}
.harmonic-chord-row.next{outline:2px dashed color-mix(in srgb,var(--brand) 42%,transparent);outline-offset:-2px}.harmonic-chord-row.active{outline:4px solid color-mix(in srgb,var(--brand) 65%,transparent);background:color-mix(in srgb,var(--card) 88%,var(--brand));transform:translateY(-2px)}
.harmonic-chord-list.compact .harmonic-row-explanation{display:none}.harmonic-chord-list.ultra-compact .harmonic-function{display:none}.harmonic-chord-list.ultra-compact .harmonic-chord-row{grid-template-columns:calc(30px * var(--map-card-scale)) minmax(0,1fr)}
.chord-grid .chord-card{font-size:calc(1rem * var(--progression-card-scale));padding:calc(12px * var(--progression-card-scale));min-height:calc(260px * var(--progression-card-scale))}.chord-grid .chord-name{font-size:calc(31px * var(--progression-card-scale))}.chord-grid .roman{font-size:calc(20px * var(--progression-card-scale))}.chord-grid .role,.chord-grid .resolution{font-size:calc(12px * var(--progression-card-scale))}.chord-grid .diagram{height:calc(185px * var(--progression-card-scale))}
.chord-grid.compact .resolution{display:none}.chord-grid.ultra-compact .role{display:none}
@media(min-width:900px){.chord-grid{grid-template-columns:repeat(var(--progression-card-count,4),minmax(0,1fr))}}
@media(max-width:1099px){.harmonic-analysis-head{align-items:flex-start}.harmonic-chord-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.harmonic-chord-list{grid-template-columns:1fr}.chord-display-tools{width:100%}.chord-display-tools label{flex:1}.harmonic-chord-row .harmonic-shared-diagram svg{height:calc(170px * var(--map-card-scale))!important}}


/* === Stage 8.6 modal harmony, CAGED choices, map player + profile visuals === */
.map-under-player{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-top:12px;
  padding:10px 12px;
  border-top:1px solid var(--line);
  flex-wrap:wrap;
}
.map-under-player-controls{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.map-now-playing{
  color:var(--muted);
  font-size:12px;
  font-weight:850;
  min-width:120px;
}
.map-circle-size-control{
  display:grid;
  grid-template-columns:auto minmax(120px,220px) auto;
  align-items:center;
  gap:8px;
  font-size:11px;
  color:var(--muted);
}
.atlas-worlds{
  --map-circle-scale:1;
}
#harmonicMapSvg{
  transform:scale(var(--map-circle-scale));
  transform-origin:top center;
  margin-bottom:calc((1 - var(--map-circle-scale))*-360px);
}
.voicing-select-label{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  margin:6px auto 2px;
  color:var(--muted);
  font-size:10px;
  font-weight:850;
}
.voicing-select{
  min-width:96px;
  max-width:140px;
  padding:3px 5px;
  font-size:10px;
}
.chord-card .voicing-select-label{
  grid-column:1 / -1;
}
.harmonic-shared-diagram .voicing-select-label{
  justify-content:space-between;
}
@media(max-width:700px){
  .map-under-player{align-items:stretch}
  .map-circle-size-control{grid-template-columns:auto 1fr auto;width:100%}
}

/* === Stage 8.7 performance-first UI === */
.journey-generator>.tool-panel-body{gap:10px}.map-generate-actions-primary{margin-bottom:4px}.map-generate-actions-primary #mapGenerateJourney{background:var(--brand);color:#fff;border-color:var(--brand);font-weight:900;box-shadow:0 4px 14px color-mix(in srgb,var(--brand) 20%,transparent)}
.map-layer-checks{display:grid;gap:14px}.map-setting-group{display:grid;gap:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:color-mix(in srgb,var(--card) 96%,var(--bg))}.map-setting-heading{padding:8px 10px 6px;color:var(--muted);font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.toggle-row{display:flex!important;flex-direction:row!important;justify-content:space-between;align-items:center;gap:12px;padding:8px 10px;margin:0!important;border-top:1px solid color-mix(in srgb,var(--line) 65%,transparent)}.toggle-row input{width:18px;height:18px;margin:0}
.map-view-tools{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}.map-circle-size-control{grid-template-columns:auto minmax(100px,180px) auto;margin:0}.atlas-worlds{overflow:hidden;height:calc(760px * var(--map-circle-scale));min-height:360px;transition:height .15s ease}#harmonicMapSvg{margin-bottom:0}
.harmonic-analysis-head{align-items:flex-start}.play-strip-toolbar{display:flex;justify-content:flex-end;align-items:center;gap:12px;flex-wrap:wrap;flex:1}.play-strip-toolbar .map-play-controls{display:flex;align-items:center;gap:7px}.density-switch{display:flex;gap:4px}.density-button{padding:6px 9px!important;font-size:11px!important}.density-button.active,#mapPerformanceView.active{background:var(--brand);border-color:var(--brand);color:#fff}
.harmonic-chord-list.density-compact .harmonic-row-explanation,.harmonic-chord-list.density-compact .harmonic-function{display:none}.harmonic-chord-list.density-compact .harmonic-chord-row{padding:calc(7px * var(--map-card-scale))}.chord-grid.density-compact .resolution,.chord-grid.density-compact .role{display:none}.chord-grid.density-compact .chord-card{min-height:calc(220px * var(--progression-card-scale))}
@media(min-width:1100px){.harmonic-analysis{position:sticky;top:0;z-index:20;box-shadow:0 8px 24px rgba(20,45,65,.08)}.harmonic-chord-list{overflow-x:auto;scroll-snap-type:x proximity}.harmonic-chord-row{scroll-snap-align:center}}
.map-performance-view .harmonic-controls,.map-performance-view .harmonic-map-center,.map-performance-view .harmonic-lower-grid,.map-performance-view .harmonic-summary,.map-performance-view .transition-explain{display:none!important}.map-performance-view .harmonic-map-layout.stage8{display:block}.map-performance-view .harmonic-analysis{position:relative;min-height:calc(100vh - 150px)}.map-performance-view .harmonic-chord-list{margin-top:14px}
@media(max-width:700px){.map-view-tools{width:100%;justify-content:stretch}.map-circle-size-control{width:100%;grid-template-columns:auto 1fr auto}.play-strip-toolbar{width:100%;justify-content:flex-start}.harmonic-analysis{position:static!important}}


/* === Stage 9.0 multi-instrument architecture === */
.instrument-control{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:12px;
  color:var(--muted);
  font-weight:800;
}
.instrument-control select{
  min-width:118px;
}
.piano-range-controls,
.piano-size-controls{
  display:grid;
  grid-template-columns:minmax(180px,1fr);
  gap:7px;
  width:100%;
}
.piano-range-controls label,
.piano-size-controls label{
  display:grid;
  grid-template-columns:auto minmax(100px,1fr) auto;
  gap:8px;
  align-items:center;
}
.piano-keyboard{
  max-width:100%;
  overflow:auto;
  margin-left:auto;
  margin-right:0;
}
.piano-keyboard.hidden{display:none}
.piano-svg{
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
  touch-action:manipulation;
}
.piano-white-key,
.piano-black-key{
  cursor:pointer;
}
.piano-white-key:hover{
  filter:brightness(.97);
}
.piano-black-key:hover{
  filter:brightness(1.2);
}
.chord-card .diagram,
.harmonic-chord-diagram{
  min-height:130px;
}
[data-instrument="piano"] .voicing-select-label,
[data-instrument="bass"] .voicing-select-label,
[data-instrument="ukulele"] .voicing-select-label{
  display:none;
}
@media(max-width:700px){
  .instrument-control{
    width:100%;
    justify-content:flex-end;
  }
  .piano-range-controls label,
  .piano-size-controls label{
    grid-template-columns:1fr;
  }
  .piano-keyboard{
    margin:0 auto;
  }
}


/* ==========================================================
   Stage 9.1 — application header + semantic theme controls
   ========================================================== */

:root{
  --control-bg:#fff;
  --control-ink:#102638;
  --control-border:var(--line);
  --control-hover:#f1f6f9;

  --nav-bg:color-mix(in srgb,var(--bg) 92%,white 8%);
  --nav-pill-bg:var(--card);
  --nav-pill-ink:var(--ink);
  --nav-pill-border:var(--line);
  --nav-active-bg:var(--brand);
  --nav-active-ink:#fff;
}

:root[data-theme="midnight"]{
  --control-bg:#173244;
  --control-ink:#f4f9fc;
  --control-border:#42637a;
  --control-hover:#21445a;

  --nav-bg:#13212c;
  --nav-pill-bg:#173244;
  --nav-pill-ink:#f4f9fc;
  --nav-pill-border:#42637a;
  --nav-active-bg:#74b9e6;
  --nav-active-ink:#07131d;
}

/* Header */

.site-header{
  position:relative;
  min-height:0;
  padding:14px 28px;
}

.header-primary{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
}

.brand-lockup{
  flex:0 1 330px;
}

.header-actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:22px;
  min-width:0;
}

.header-preferences,
.header-account{
  display:flex;
  align-items:center;
  gap:10px;
}

.header-control{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  margin:0;
  color:var(--header-ink);
}

.header-control > span{
  padding-left:4px;
  font-size:10px;
  line-height:1;
  font-weight:800;
  letter-spacing:.06em;
  opacity:.72;
  text-transform:uppercase;
}

.header-control select{
  min-width:118px;
  padding:8px 30px 8px 12px;
  border-radius:10px;
  background:var(--control-bg);
  color:var(--control-ink);
  border:1px solid var(--control-border);
}

.header-button,
.site-header .header-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:8px 14px;
  margin:0;
  border-radius:10px;
  background:var(--control-bg);
  color:var(--control-ink);
  border:1px solid var(--control-border);
  font-weight:750;
  text-decoration:none;
  white-space:nowrap;
}

.header-button:hover{
  background:var(--control-hover);
}

.account-button{
  max-width:220px;
  overflow:hidden;
  text-overflow:ellipsis;
}

.inline-form{
  margin:0;
}

/* Primary workspace navigation */

.tabs{
  position:sticky;
  top:0;
  z-index:20;
  padding:10px 18px;
  background:var(--nav-bg);
  border-bottom:1px solid var(--line);
  overflow-x:auto;
  scrollbar-width:none;
}

.tabs::-webkit-scrollbar{
  display:none;
}

.tabs-inner{
  display:flex;
  align-items:center;
  gap:10px;
  width:max-content;
  min-width:100%;
}

.tab{
  flex:0 0 auto;
  margin:0;
  padding:10px 18px;
  border-radius:999px;
  background:var(--nav-pill-bg);
  color:var(--nav-pill-ink);
  border:1px solid var(--nav-pill-border);
  font-weight:800;
}

.tab:hover{
  background:var(--control-hover);
  color:var(--control-ink);
}

.tab.active,
.tab.active:hover{
  background:var(--nav-active-bg);
  color:var(--nav-active-ink);
  border-color:var(--nav-active-bg);
}

/* Midnight: don't let older generic rules override nav text. */

:root[data-theme="midnight"] .tabs .tab{
  background:var(--nav-pill-bg);
  color:var(--nav-pill-ink);
  border-color:var(--nav-pill-border);
}

:root[data-theme="midnight"] .tabs .tab.active{
  background:var(--nav-active-bg);
  color:var(--nav-active-ink);
  border-color:var(--nav-active-bg);
}

/* Responsive header */

@media(max-width:1100px){
  .site-header{
    padding:12px 16px;
  }

  .header-primary{
    align-items:flex-start;
  }

  .header-actions{
    flex-wrap:wrap;
    gap:10px 16px;
  }

  .header-preferences{
    order:1;
  }

  .header-account{
    order:2;
  }

  .support-copy{
    display:none;
  }
}

@media(max-width:760px){
  .site-header{
    padding:12px;
  }

  .header-primary{
    flex-direction:column;
    gap:10px;
  }

  .brand-lockup{
    flex:none;
    width:190px;
  }

  .brand-lockup img{
    width:190px;
  }

  .header-actions{
    width:100%;
    margin:0;
    justify-content:flex-start;
  }

  .header-preferences{
    width:100%;
  }

  .header-control{
    flex:1;
  }

  .header-control select{
    width:100%;
  }

  .header-account{
    width:100%;
    flex-wrap:wrap;
  }

  .header-button{
    min-height:42px;
  }

  .tabs{
    padding:8px 10px;
  }

  .tabs-inner{
    gap:8px;
  }

  .tab{
    padding:9px 15px;
  }
}

/* ==========================================================
   Stage 9.2 — shared performance architecture
   ========================================================== */
.tabs-inner{align-items:center}
.tabs-spacer{flex:1 1 auto;min-width:18px}
.performance-toggle{
  flex:0 0 auto;
  border-radius:999px;
  padding:9px 16px;
  background:var(--control-bg,var(--card));
  color:var(--control-ink,var(--ink));
  border:1px solid var(--control-border,var(--line));
  font-weight:850;
  white-space:nowrap;
}
.performance-toggle.active,
.performance-mode .performance-toggle{
  background:var(--accent);
  border-color:var(--accent);
  color:#101820;
}

/* Global performance mode keeps navigation/transport, removes editing chrome,
   and lets the active workspace become the instrument/music stand. */
.performance-mode .site-header{display:none}
.performance-mode .tabs{top:0}
.performance-mode main{max-width:none;padding:12px}

/* Progressions: cards + player become the music stand. */
.performance-mode[data-performance-tab="progressions"] #progressionsPane .controls,
.performance-mode[data-performance-tab="progressions"] #progressionsPane .summary .summary-hint,
.performance-mode[data-performance-tab="progressions"] #progressionsPane .history-actions{
  display:none!important;
}
.performance-mode[data-performance-tab="progressions"] #progressionsPane .summary{
  position:sticky;top:62px;z-index:18;
}
.performance-mode[data-performance-tab="progressions"] #grid{
  margin-top:12px;
}

/* Harmonic Map: preserve the existing play-strip-first behavior globally. */
.performance-mode[data-performance-tab="harmonic-map"] .harmonic-controls,
.performance-mode[data-performance-tab="harmonic-map"] .harmonic-map-center,
.performance-mode[data-performance-tab="harmonic-map"] .harmonic-lower-grid,
.performance-mode[data-performance-tab="harmonic-map"] .harmonic-summary,
.performance-mode[data-performance-tab="harmonic-map"] .transition-explain{
  display:none!important;
}
.performance-mode[data-performance-tab="harmonic-map"] .harmonic-map-layout.stage8{display:block}
.performance-mode[data-performance-tab="harmonic-map"] .harmonic-analysis{
  position:relative;min-height:calc(100vh - 90px)
}
.performance-mode[data-performance-tab="harmonic-map"] .harmonic-chord-list{margin-top:14px}

/* Scale Practice: visualization + transport only. */
.performance-mode[data-performance-tab="scales"] #scaleWorkspace{
  display:block;max-width:none;padding:0;
}
.performance-mode[data-performance-tab="scales"] #scaleWorkspace .scale-controls-column > :not(#scalePlayer){
  display:none!important;
}
.performance-mode[data-performance-tab="scales"] #scaleWorkspace .scale-controls-column{
  display:block;
}
.performance-mode[data-performance-tab="scales"] #scalePlayer{
  display:block;position:sticky;top:62px;z-index:18;width:100%;margin:0 0 10px 0;
}
.performance-mode[data-performance-tab="scales"] .neck-column{width:100%!important;max-width:none!important}
.performance-mode[data-performance-tab="scales"] .neck-shell{min-height:calc(100vh - 170px)}
.performance-mode[data-performance-tab="scales"] #fretboard{margin:auto}
.performance-mode[data-performance-tab="scales"] .piano-keyboard{margin:auto}

/* Workbook: remove destructive/editing chrome; saved material remains available
   for loading into the shared performance surfaces. */
.performance-mode[data-performance-tab="workbook"] #workbookPane .workbook-header button,
.performance-mode[data-performance-tab="workbook"] #workbookPane .workbook-item button:not(.secondary){
  display:none!important;
}
.performance-mode[data-performance-tab="workbook"] #workbookPane .workbook-list{
  max-width:1200px;margin:0 auto;
}

/* Retire the old map-only class if a stale browser session still has it. */
.map-performance-view{display:contents}

@media(max-width:760px){
  .tabs-spacer{min-width:8px}
  .performance-toggle{padding:9px 13px}
  .performance-mode main{padding:8px}
}

/* ==========================================================
   Stage 9.3 — workstation layout: collapsible rails + utility dock
   ========================================================== */
.workspace-with-rail{display:grid;grid-template-columns:300px minmax(0,1fr);gap:14px;align-items:start}
.workspace-rail{position:relative;transition:width .2s ease,min-width .2s ease,padding .2s ease}
.progression-workspace .left-rail{position:sticky;top:82px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;max-height:calc(100vh - 96px);overflow:auto}
.progression-workspace .controls{display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:0;background:transparent;border:0}
.progression-workspace .controls>*{width:100%;max-width:none}
.progression-stage{min-width:0}
.rail-title{display:flex;flex-direction:column;margin:0 36px 12px 0}.rail-title strong{font-size:20px}
.rail-collapse{position:absolute;right:8px;top:8px;z-index:4;padding:5px 8px!important;min-width:34px}
.workspace-rail.rail-collapsed{width:48px!important;min-width:48px!important;padding:52px 6px 8px!important;overflow:hidden!important}
.workspace-rail.rail-collapsed>*:not(.rail-collapse){display:none!important}
.workspace-rail.rail-collapsed .rail-collapse{right:6px}.workspace-rail.rail-collapsed .rail-collapse::after{content:'››';font-size:0}.workspace-rail.rail-collapsed .rail-collapse{font-size:0}.workspace-rail.rail-collapsed .rail-collapse::before{content:'››';font-size:15px}
.progression-workspace:has(#progressionControlRail.rail-collapsed){grid-template-columns:48px minmax(0,1fr)}

.harmonic-map-layout.stage8{grid-template-columns:300px minmax(0,1fr)!important;align-items:start}
.harmonic-controls{grid-column:1;grid-row:1 / span 3;position:sticky!important;top:82px;max-height:calc(100vh - 96px);overflow:auto}
.harmonic-map-center{grid-column:2;grid-row:1}
.harmonic-analysis{grid-column:2;grid-row:2;position:relative}
.harmonic-lower-grid{grid-column:2;grid-row:3}
.harmonic-map-layout.stage8:has(#mapControlRail.rail-collapsed){grid-template-columns:48px minmax(0,1fr)!important}
.journey-collapse{position:absolute;right:14px;top:12px;z-index:5;font-size:11px;padding:6px 9px!important}
.collapsible-journey.journey-collapsed{min-height:56px!important;padding-bottom:8px!important}
.collapsible-journey.journey-collapsed .harmonic-analysis-head{margin:0}.collapsible-journey.journey-collapsed .harmonic-analysis-head .play-strip-toolbar,.collapsible-journey.journey-collapsed #harmonicChordList,.collapsible-journey.journey-collapsed .harmonic-summary,.collapsible-journey.journey-collapsed .transition-explain{display:none!important}
.collapsible-journey.journey-collapsed .journey-collapse{font-size:0}.collapsible-journey.journey-collapsed .journey-collapse::before{content:'Expand';font-size:11px}

.utility-dock{position:fixed;right:0;top:190px;z-index:70;width:270px;transition:transform .22s ease;filter:drop-shadow(0 10px 24px rgba(0,0,0,.16))}
.utility-dock.collapsed{transform:translateX(270px)}
.utility-dock-toggle{position:absolute;left:-38px;top:0;width:40px;height:52px;padding:0!important;border-radius:12px 0 0 12px!important;font-size:24px;background:var(--brand)!important;color:#fff!important}
.utility-dock:not(.collapsed) .utility-dock-toggle{font-size:0}.utility-dock:not(.collapsed) .utility-dock-toggle::before{content:'›';font-size:24px}
.utility-dock-body{background:var(--card);border:1px solid var(--line);border-right:0;border-radius:16px 0 0 16px;padding:14px}
.dock-section+.dock-section{border-top:1px solid var(--line);margin-top:14px;padding-top:14px}.dock-section h3{margin:2px 0 10px}.dock-transport{display:grid;grid-template-columns:1fr 1fr;gap:7px}.dock-performance{width:100%;margin-top:8px}
.tuner-display{text-align:center;margin-top:10px}.tuner-note{font-size:42px;font-weight:900;line-height:1}.tuner-cents,.tuner-hz{font-size:12px;color:var(--muted);margin-top:5px}.strobe-window{height:38px;border:1px solid var(--line);border-radius:8px;overflow:hidden;position:relative;margin-top:10px;background:var(--control-bg,var(--bg))}.tuner-strobe{position:absolute;inset:0;width:200%;background:repeating-linear-gradient(90deg,currentColor 0 5px,transparent 5px 13px);opacity:.24;transform:translateX(-25%)}.strobe-center{position:absolute;left:50%;top:0;bottom:0;width:2px;background:var(--accent)}
.tuner-active .tuner-strobe{opacity:.45}

/* Performance is a global navigation action, not a page-specific control. */
.performance-toggle{display:inline-flex!important;visibility:visible!important}

@media(max-width:900px){
 .workspace-with-rail{grid-template-columns:48px minmax(0,1fr)} .progression-workspace .left-rail:not(.rail-open-mobile){width:48px;min-width:48px;padding:52px 6px 8px;overflow:hidden}.progression-workspace .left-rail:not(.rail-open-mobile)>*:not(.rail-collapse){display:none}
 .harmonic-map-layout.stage8{grid-template-columns:48px minmax(0,1fr)!important}.harmonic-controls:not(.rail-open-mobile){width:48px;min-width:48px;padding:52px 6px 8px;overflow:hidden}.harmonic-controls:not(.rail-open-mobile)>*:not(.rail-collapse){display:none}
 .utility-dock{top:150px;width:min(290px,82vw)}.utility-dock.collapsed{transform:translateX(100%)}
}


/* Stage 9.3.1 — visible release identity */
.brand-cluster{display:flex;align-items:center;gap:9px;min-width:0}
.brand-cluster .brand-lockup{min-width:0}
.app-version-badge{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;padding:3px 7px;border:1px solid rgba(255,255,255,.28);border-radius:999px;color:var(--header-ink,#fff);background:rgba(255,255,255,.10);font-size:10px;font-weight:850;letter-spacing:.05em;line-height:1.2;white-space:nowrap}
@media(max-width:760px){.brand-cluster{width:100%}.app-version-badge{font-size:9px;padding:3px 6px}}