@import url('./assets/fonts/fonts.css');
@import url('./practice.css?v=20261022-practice');

:root {
  color-scheme:dark;
  --paper:#0c1017; --surface:#131923; --raised:#1a2230; --ink:#edf2f8; --muted:#9daabd; --line:#283242;
  --green:#83edc5; --green-dark:#a7f6d8; --violet:#b3a0ff;
  --d1:#f5d477; --d2:#a8caff; --d3:#f1b7cd; --d4:#c1b3f6; --d5:#8fddd0; --d6:#f0c297; --d7:#c9dfa2;
  --header-height:64px;
  font:14px 'DM Sans',system-ui,sans-serif; font-synthesis:none;
  color:var(--ink); background:var(--paper); scroll-behavior:smooth;
}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background-color:var(--paper);background-image:url('./assets/music-background.svg'),radial-gradient(ellipse 900px 620px at 88% 0%,#6552a82b,transparent 72%),radial-gradient(ellipse 850px 540px at 12% 32%,#237b6840,transparent 70%),radial-gradient(ellipse 750px 500px at 90% 82%,#72514312,transparent 72%);background-repeat:no-repeat;background-position:center 5%,center top,left 32%,right 82%;background-size:min(1600px,100vw) auto,auto,auto,auto}
button,select{font:inherit;color:inherit}button,a,select{-webkit-tap-highlight-color:transparent}button,summary{cursor:pointer}a{color:inherit}button:disabled{cursor:default}
button:focus-visible,a:focus-visible,select:focus-visible,summary:focus-visible,.board-scroll:focus-visible{outline:2px solid var(--violet);outline-offset:4px}
[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;top:-80px;left:16px;z-index:50;background:var(--raised);padding:14px;border-radius:8px}.skip:focus{top:12px}
.topbar{height:var(--header-height);display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 28px;position:sticky;top:0;z-index:20;background:#0c1017eb;backdrop-filter:blur(20px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;font-size:18px;letter-spacing:-.6px;flex-shrink:0}.brand-light{font-weight:450;color:#b4c0d1}
.brand-mark{width:33px;height:33px;display:flex;align-items:center;justify-content:center;gap:3px;background:#173c32;border:1px solid #32624f;border-radius:10px}.brand-mark i{width:3px;height:10px;background:var(--green);border-radius:3px}.brand-mark i:nth-child(2){height:21px}.brand-mark i:nth-child(3){height:15px}.brand-mark i:nth-child(4){height:8px}
.topbar nav{display:flex;align-items:center;gap:4px;padding:4px;background:#151c27;border:1px solid var(--line);border-radius:12px}.topbar nav a{padding:8px 18px;border-radius:8px;text-decoration:none;font-size:12px;font-weight:550;color:var(--muted);transition:background .15s,color .15s}.topbar nav a:hover{color:var(--ink);background:#222c3a}.topbar nav a[aria-current]{background:#293344;color:var(--ink);box-shadow:inset 0 1px #ffffff10}
.header-note{display:flex;align-items:center;gap:9px;font-size:9px;letter-spacing:2px;color:var(--muted)}.header-note>span,.live-dot{width:6px;height:6px;border-radius:50%;background:var(--green);display:inline-block;box-shadow:0 0 10px #83edc540}.settings-trigger{display:none}
.layout{max-width:1760px;margin:0 auto;display:grid;grid-template-columns:222px minmax(0,1fr);gap:28px;padding:24px 28px 0;align-items:start}
.sidebar{position:sticky;top:calc(var(--header-height) + 24px);max-height:calc(100svh - var(--header-height) - 48px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#384658 transparent;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px}
.sidebar-heading{position:relative;margin-bottom:20px}.sidebar h2{font-size:15px;letter-spacing:-.2px;font-weight:600;margin:0}.close-settings{display:none}.eyebrow{font-size:9px;line-height:1.6;font-weight:600;letter-spacing:1.7px;color:var(--muted)}
.sidebar fieldset{border:0;padding:0;margin:0 0 20px;min-width:0}.sidebar legend{padding:0;margin-bottom:4px;font-size:10px;font-weight:650;text-transform:uppercase;letter-spacing:1.4px;color:var(--green)}.sidebar label{display:block;font-size:11px;color:var(--muted);margin:12px 0 6px}.sidebar select{width:100%;min-height:39px;border:1px solid #354153;border-radius:8px;padding:8px;background:#1b2431;color:var(--ink);font-size:12px}.sidebar select:hover{border-color:#6f9b90}.tuning-summary{display:flex;flex-wrap:wrap;gap:4px;margin-top:10px}.tuning-summary span{padding:4px 5px;background:#222d3b;color:#c3d4df;border-radius:5px;font-size:10px}.tuning-summary sub{font-size:8px;color:var(--muted)}.custom-tuning{display:grid;gap:6px;margin-top:12px}.custom-tuning label{display:grid;grid-template-columns:46px minmax(0,1fr);align-items:center;gap:5px;margin:0}.custom-tuning select{font-size:11px;min-height:36px;padding:6px}
.reading-settings{border-top:1px solid var(--line);padding-top:15px}.reading-settings summary{font-size:11px;color:var(--muted)}.reading-settings fieldset{margin:9px 0 0}.settings-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:12px}.reset{background:none;border:0;color:var(--muted);font-size:11px;padding:8px 0}.reset:hover{color:var(--green)}.apply-settings{display:none!important}
main{min-width:0;padding-bottom:20px}.workspace-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;font-size:10px;color:var(--muted)}.instrument-context{display:flex;align-items:center;gap:8px}.instrument-context::before{content:'';width:6px;height:6px;background:var(--violet);border-radius:2px}.save-status{display:flex;align-items:center;gap:6px;font-size:10px}.save-status::before{content:'✓';color:var(--green)}.save-status.unavailable{color:#f3be8f}.save-status.unavailable::before{content:'!';color:#f3be8f}
.hero{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:20px}.hero .eyebrow{display:flex;align-items:center;gap:9px}.hero h1{font-size:clamp(30px,3.1vw,46px);letter-spacing:-1.7px;line-height:1.13;font-weight:550;margin:8px 0;overflow-wrap:anywhere}.hero h1:focus{outline:none}.hero h1 em{font-style:normal;color:var(--green)}.hero p{font-size:11px;line-height:1.65;color:var(--muted);margin:0}.hero-actions{display:flex;align-items:center;gap:7px;flex-shrink:0}.primary{border:1px solid var(--green);background:var(--green);color:#10281f;display:inline-flex;justify-content:center;align-items:center;gap:8px;padding:10px 16px;border-radius:10px;min-height:42px;font-size:12px;font-weight:700;white-space:nowrap;transition:background .15s,transform .15s;box-shadow:0 3px 20px #83edc50d}.primary>span{font-size:19px;line-height:1}.primary:hover{background:var(--green-dark);transform:translateY(-1px)}.icon-button{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--line);background:var(--raised);color:var(--green);border-radius:10px;font-size:12px}.icon-button:disabled{color:#6c798e;background:#131923}.icon-button:not(:disabled):hover{border-color:var(--green)}
.scale-overview{display:flex;gap:14px;align-items:start;margin-bottom:20px}.scale-notes-group{flex:1;min-width:0}.note-strip{display:flex;gap:7px}.note-tile{flex:1;min-width:0;border:1px solid var(--line);background:var(--surface);border-radius:10px;text-align:center;transition:transform .15s,border-color .15s}.note-tile:hover{transform:translateY(-2px);border-color:#63768b}.note-tile button{border:0;background:none;padding:10px 2px;width:100%;min-height:65px}.note-tile small{display:block;color:var(--muted);font-size:10px;margin-bottom:4px}.note-tile strong{font-size:18px;font-weight:550;white-space:nowrap;letter-spacing:-.5px}.note-tile.root{background:#18362f;border-color:#386a58;color:var(--green)}.note-tile.root small{color:#a7d6c4}
.info-disclosure{font-size:11px;color:var(--muted);line-height:1.7;margin:10px 0}.info-disclosure summary{width:fit-content;min-height:28px;display:flex;align-items:center;gap:7px;list-style:none;color:#b4c1d2;font-size:10px}.info-disclosure summary::-webkit-details-marker{display:none}.info-disclosure summary::before{content:'+';display:grid;place-items:center;width:16px;height:16px;border:1px solid #425166;border-radius:50%;font-size:12px;color:var(--violet);line-height:1}.info-disclosure[open] summary::before{content:'−'}.info-disclosure p{margin:8px 0;line-height:1.8}.info-disclosure summary:hover{color:var(--ink)}.mood{width:clamp(210px,22vw,280px);flex-shrink:0;padding:12px 14px;margin:0;background:#2a2340;border:1px solid #8671ba;border-left:4px solid var(--violet);border-radius:10px;min-height:65px}.mood-label{font-size:11px;font-weight:650;letter-spacing:1px;text-transform:uppercase;color:#d5c6ff}.mood p{margin:6px 0 0;line-height:1.5;color:#f4edff;font-size:15px;font-weight:650}
.panel{background:linear-gradient(135deg,#171e2a,#121923 75%);border:1px solid var(--line);border-radius:16px;padding:20px;margin-bottom:20px;box-shadow:0 8px 35px #00000010}.panel-header{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:14px}.panel-title-group{display:flex;align-items:center;gap:10px;min-width:0}.section-number{flex-shrink:0;width:30px;height:30px;background:#21382f;color:var(--green);border:1px solid #345343;border-radius:8px;display:grid;place-items:center;font-size:23px}.panel h2,.section-heading h2{font-size:19px;line-height:1.3;font-weight:550;letter-spacing:-.5px;margin:0}.panel .eyebrow{font-size:8px;letter-spacing:1.5px;color:var(--violet)}.tag{font-size:9px;font-weight:450;color:var(--muted);background:#1b2431;border:1px solid var(--line);border-radius:6px;padding:5px 8px;white-space:nowrap}.board-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}.board-toolbar p{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:10px;margin:0}.interaction-dot{width:5px;height:5px;background:var(--green);border-radius:50%}.segmented{display:flex;gap:3px;background:#0e141d;border:1px solid var(--line);border-radius:9px;padding:3px}.segmented button{flex:1;border:0;background:none;color:var(--muted);font-size:11px;padding:8px 12px;border-radius:6px;min-height:34px}.segmented button[aria-pressed=true]{background:#2c3547;color:var(--ink);box-shadow:inset 0 1px #ffffff0d}.segmented button:hover{color:var(--green)}.compact button{font-size:10px;min-height:30px;padding:6px 10px}
.board-shell{position:relative}.board-scroll{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-color:#465769 #141d28;scrollbar-width:thin;padding:0 0 8px;border-radius:10px}.fretboard{min-width:1040px;position:relative}.fret-numbers{height:38px;align-items:center;display:grid;grid-template-columns:48px repeat(24,minmax(0,1fr));text-align:center;font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums}
.sidebar select:disabled{opacity:.5;cursor:default;border-color:var(--line)}
.piano-shell{padding:0 7px 7px;border:1px solid #3b485b;border-radius:12px;background:linear-gradient(135deg,#253041,#101720);box-shadow:0 7px 18px #0003}
.piano-fallboard{display:flex;justify-content:space-between;padding:12px 8px 10px;font-size:9px;letter-spacing:1.5px;color:#b3c2d4;border-bottom:3px solid #74506c}
.piano-fallboard span:first-child{color:var(--green);font-weight:650;letter-spacing:3px}
.piano-shell .board-scroll{border-radius:0 0 6px 6px;padding-bottom:5px}
.piano-keyboard{position:relative;height:198px;min-width:690px;isolation:isolate}
.piano-key{position:absolute;top:0;left:calc(var(--key-position)*100%/15);padding:0;display:flex;align-items:center;justify-content:flex-end;flex-direction:column;border-radius:0 0 6px 6px;transition:filter .12s;touch-action:pan-x}
.piano-key.white{width:calc(100%/15);height:190px;z-index:1;border:1px solid #929ca8;border-top:0;background:linear-gradient(#e1e7ed,#fff 65%,#d3dbe3);box-shadow:inset 0 -5px #a5b0bd,0 3px 3px #0005;color:#1b2937}
.piano-key.black{width:calc(.64*100%/15);height:120px;z-index:2;border:1px solid #090d14;border-top:0;background:linear-gradient(100deg,#121923,#303c4c 65%,#0b1018);box-shadow:inset 0 -5px #070b10,2px 5px 4px #0007;color:var(--ink)}
.piano-key.white.selected{background:linear-gradient(#e1e7ed 30%,var(--note-color));box-shadow:inset 0 -5px #0002,0 3px 3px #0005}
.piano-key.black.selected{background:linear-gradient(#151d29 20%,#283442 60%,var(--note-color));box-shadow:inset 0 -5px #0006,2px 5px 4px #0007}
.piano-note{display:grid;place-items:center;min-height:29px;min-width:29px;padding:3px;margin-bottom:24px;border-radius:50%;background:var(--note-color);color:#152531;font-size:10px;font-weight:750;white-space:nowrap;box-shadow:0 2px 5px #0003}
.piano-key.black .piano-note{font-size:9px;min-width:25px;min-height:25px;padding:2px;margin-bottom:12px}
.piano-octave{position:absolute;bottom:7px;font-size:9px;font-weight:600;color:#354456}
.piano-key.root .piano-note{border:2px solid #fff1ba;box-shadow:0 0 9px #f5d47788}
.piano-key.characteristic .piano-note{outline:3px solid #e76bff;outline-offset:2px;box-shadow:0 0 12px #d944ff77}
.piano-key:hover{filter:brightness(1.12)}.piano-key.sounding{filter:brightness(.78)}
.piano-key:focus-visible{z-index:3;outline-offset:-4px}
.piano-shell .board-navigation{padding:0 6px}
.fret-numbers span.reference{justify-self:center;display:grid;place-items:center;min-width:28px;height:27px;border:1px solid #537d6d;border-radius:7px;background:#244638;color:#b4ffdf;font-size:13px;font-weight:750;box-shadow:0 2px 8px #0003}
.fret-numbers span.octave{min-width:32px;border:2px solid #ae98ed;background:#392d55;color:#f0e7ff;box-shadow:0 0 12px #b3a0ff20}
.fret-guides{position:absolute;inset:0;display:grid;grid-template-columns:48px repeat(24,minmax(0,1fr));pointer-events:none}
.fret-guides span{background:#83edc50a;border-inline:1px solid #83edc518}
.fret-guides span.octave{background:#b3a0ff17;border-inline:1px solid #b3a0ff38}
.board-body{background:radial-gradient(ellipse at 50% 0,#2b3647,transparent 75%),linear-gradient(110deg,#141f2c,#1b2535);position:relative;padding:10px 0;overflow:hidden;border:1px solid #374353;border-radius:9px;box-shadow:inset 0 1px 1px #ffffff08}.string-row{position:relative;display:grid;grid-template-columns:48px repeat(24,minmax(0,1fr));height:37px;align-items:center}.fret-cell{position:relative;height:100%;min-width:0;border-right:1px solid #9db2b32e;display:flex;align-items:center;justify-content:center}.fret-cell:first-child{border-right:3px solid #adbebc;background:#09111b66}.fret-cell::before{content:'';position:absolute;left:0;right:0;height:var(--string-width,1px);background:linear-gradient(#c4cecb77,#6e8384);box-shadow:0 1px 2px #0005}.fret-cell.open::before{background:#9bafb84d}.fret-cell button{z-index:2;position:relative;width:29px;min-width:29px;height:29px;padding:0;display:grid;place-items:center;font-size:10px;font-weight:650;line-height:1;border-radius:50%;color:#152531;background:var(--note-color,var(--d5));border:1px solid #fff4;box-shadow:0 2px 6px #0003;transition:transform .12s,filter .12s;white-space:nowrap}.fret-cell button.root{background:var(--d1);border:2px solid #fff1ba;box-shadow:0 0 12px #f5d47722}
.mode-preview .fret-cell button{border-color:transparent}
.mode-preview .fret-cell button.root{border:1px solid transparent;box-shadow:0 2px 6px #0003}
.mode-preview .fret-cell button.characteristic{outline:3px solid #e76bff;outline-offset:2px;box-shadow:0 0 12px #d944ff77}
.fret-cell button:hover,.fret-cell button.sounding{transform:scale(1.16);filter:brightness(1.15)}.open-label{z-index:1;background:#1c2737;color:#c6d5d4;font-size:11px;line-height:1;padding:3px}.fret-markers{position:absolute;inset:0;display:grid;grid-template-columns:48px repeat(24,minmax(0,1fr));pointer-events:none;justify-items:center;align-items:center}.fret-markers span{width:10px;height:10px;border-radius:50%;background:#d4e4df55;box-shadow:0 0 0 3px #d4e4df08}.fret-markers span.double{height:44%;width:7px;border-radius:0;background:none;border-top:9px solid #c8b8f488;border-bottom:9px solid #c8b8f488;box-shadow:none}
.board-navigation{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:10px;color:var(--muted);margin-top:6px}.board-navigation p{margin:0}.board-jumps{display:flex;gap:4px;flex-shrink:0}.board-jumps button{border:1px solid #354256;background:#1d2837;border-radius:6px;min-height:30px;font-size:10px;padding:5px 10px;color:#c7d4e3}.board-jumps button:hover{border-color:var(--green);color:var(--green)}.board-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:10px;color:var(--muted);border-top:1px solid var(--line);padding-top:11px;margin-top:11px}.board-footer>span{font-size:9px;text-align:right}.legend{display:flex;flex-wrap:wrap;gap:12px}.legend>span{display:flex;align-items:center;gap:5px}.legend i{width:7px;height:7px;border-radius:50%;background:var(--note-color)}
.discovery-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:20px}.discovery-grid>.panel{min-width:0}.panel-symbol,.orbit-icon{width:30px;height:30px;display:grid;place-items:center;border:1px solid #3c3355;border-radius:8px;flex-shrink:0;background:#262038;color:var(--violet);font-size:22px}.orbit-icon{font-size:19px;color:var(--green);background:#19362e;border-color:#2b5144}.helper,.footnote{font-size:11px;line-height:1.8;color:var(--muted);margin:10px 0}.mode-list{display:grid;gap:4px;margin-top:12px}.mode-row{position:relative;display:grid;grid-template-columns:24px minmax(0,1fr);align-items:start;gap:4px 8px;width:100%;text-align:left;border:1px solid transparent;border-radius:9px;background:#19212d;padding:10px;transition:background .15s,border-color .15s}.mode-row:hover{background:#242e3e;border-color:#425369}.mode-row.active{background:#19372f;border-color:#386755}.mode-row::after{content:'↗';position:absolute;right:10px;top:10px;color:var(--muted);font-size:13px}.mode-num{grid-row:1/3;font-size:10px;color:var(--violet);padding-top:2px}.mode-name{font-size:12px;font-weight:500;padding-right:15px}.mode-name small{display:block;font-size:10px;color:var(--muted);font-weight:400;margin-top:4px;line-height:1.5}.mode-name .mode-characteristic{color:#9cd9c4;font-size:10px}.mode-notes{grid-column:2;font-size:11px;color:#b5c2d1;line-height:1.6;word-spacing:3px}.changed{color:#efabff;text-decoration:underline;text-decoration-color:#e76bff;text-underline-offset:4px}.related-list{display:grid;gap:8px;margin-top:12px}.related-row{display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;padding:13px;background:#19232f;border:1px solid #2c3947;border-radius:10px;transition:border-color .15s,background .15s}.related-row strong{font-size:14px;font-weight:500;letter-spacing:-.3px}.related-row small{display:block;color:var(--muted);font-size:10px;line-height:1.5;margin-top:4px}.related-row>span:last-child{color:var(--green);font-size:17px;flex-shrink:0}.related-row:hover{background:#22352f;border-color:#426b58}
.harmony-controls{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap}.seventh-switch{display:flex;align-items:center;gap:8px;border:0;background:none;padding:5px 0;min-height:44px;font-size:11px;text-align:left}.switch-track{display:block;flex-shrink:0;width:34px;height:20px;border-radius:12px;background:#344153;border:1px solid #637187;position:relative}.switch-track::after{content:"";position:absolute;top:3px;left:3px;width:12px;height:12px;border-radius:50%;background:#d3dce7;transition:transform .15s}.seventh-switch[aria-checked=true] .switch-track{background:#235344;border-color:var(--green)}.seventh-switch[aria-checked=true] .switch-track::after{transform:translateX(14px);background:var(--green)}.harmony-section{margin:4px 0 24px}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:14px 0}.section-heading h2{font-size:23px}.degree-selector{position:sticky;top:calc(var(--header-height) + 8px);z-index:9;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;padding:5px;background:#111924f5;border:1px solid var(--line);backdrop-filter:blur(16px);border-radius:12px;margin-bottom:16px}.degree-card{border:1px solid transparent;border-radius:8px;background:#1b2431;text-align:center;padding:10px 3px;transition:background .15s;min-width:0}.degree-card small{font-size:10px;color:var(--muted)}.degree-card strong{display:block;font-size:17px;letter-spacing:-.5px;font-weight:550;margin:5px 0;overflow-wrap:anywhere;line-height:1.3}.degree-card>span{font-size:10px;color:var(--muted);overflow-wrap:anywhere}.degree-card[aria-pressed=true]{background:#83edc5;color:#102b21;box-shadow:0 0 16px #83edc518}.degree-card[aria-pressed=true] small,.degree-card[aria-pressed=true]>span{color:#285843}.degree-card:hover{border-color:#6aa48c}.chord-panel h3{margin:5px 0 0;font-size:25px;font-weight:550;letter-spacing:-.8px;line-height:1.3}.chord-panel h3 small{font-size:11px;font-weight:400;letter-spacing:0;color:var(--muted);margin-left:9px}.text-button{border:1px solid #3b594e;background:#1c352e;color:var(--green);border-radius:8px;min-height:38px;padding:8px 12px;font-size:11px;white-space:nowrap}.text-button:hover{background:#2a4b3e}.chord-notes{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 15px}.chord-notes>span{display:flex;align-items:center;gap:7px;font-size:13px;background:#202a38;border:1px solid #303d4e;border-radius:7px;padding:6px 9px}.chord-notes strong{font-weight:550}.chord-notes small{font-size:10px;color:var(--muted)}.context-note{padding:10px 13px;background:#33291e;border:1px solid #635031;border-radius:9px;font-size:11px;line-height:1.8;color:#f2d1a0}.preview-banner{padding:12px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:#292039;border:1px solid #5f487a;border-radius:9px;margin-bottom:14px;font-size:11px;line-height:1.6;color:#decefa}.preview-banner small{display:block;color:#c2acd9;font-size:10px}.preview-actions{display:flex;gap:6px;flex-wrap:wrap;flex-shrink:0}.preview-banner button{border:1px solid #6d5585;background:#3a2d4e;border-radius:6px;color:#eadbff;padding:8px 10px;font-size:10px}.preview-banner button[data-action=apply-preview]{color:#1b1330;background:var(--violet);border-color:var(--violet)}
.cadences-summary{color:var(--violet);font-size:11px;margin:0 0 8px}.cadence-list,.progression-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.cadence-card{padding:16px;border:1px solid #303c4d;border-radius:11px;background:#19222f;min-width:0}.cadence-card>header{display:flex;align-items:center;justify-content:space-between;gap:10px}.cadence-card h3{font-size:12px;font-weight:550;margin:0}.listen-small{display:grid;place-items:center;width:34px;height:34px;flex-shrink:0;border-radius:9px;border:1px solid #3a534b;background:#213a32;color:var(--green);font-size:15px}.listen-small:hover{background:#345a4b}.sequence{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:12px 0}.sequence>span:not(.arrow){display:grid;gap:5px;min-width:32px}.sequence small{font-size:10px;color:var(--muted)}.sequence strong{font-size:23px;font-weight:500;letter-spacing:-.5px}.sequence .arrow{color:#7b90a5;font-size:16px}.cadence-card .info-disclosure{margin:6px 0 0}.progressions{border-top:1px solid var(--line);padding-top:15px;margin-top:20px}.progressions>summary{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#c1cfdf;min-height:34px}.progressions[open]>summary>span{transform:rotate(45deg)}.progression-list{margin-top:14px}
.footer{display:flex;align-items:start;justify-content:space-between;gap:20px;padding:10px 0 20px;font-size:11px;color:var(--muted)}.footer>span{font-weight:500}.footer details{font-size:10px;line-height:1.8;max-width:440px}.footer summary{text-align:right}.footer a{color:var(--green)}.audio-status{position:fixed;z-index:35;bottom:20px;left:50%;transform:translateX(-50%);padding:12px 18px;border:1px solid #465c68;border-radius:12px;background:#1b2e32ed;backdrop-filter:blur(12px);color:#e2fff1;box-shadow:0 6px 25px #0004;font-size:12px;line-height:1.5;max-width:calc(100vw - 32px);text-align:center;pointer-events:none}.settings-overlay{display:none}section[id],#preview-info{scroll-margin-top:calc(var(--header-height) + 22px)}
@media(min-width:1600px){.layout{grid-template-columns:240px minmax(0,1fr);gap:32px}.string-row{height:40px}.fretboard{min-width:1080px}.panel{padding:24px}}
@media(max-width:1200px){.layout{gap:20px;padding:20px;grid-template-columns:208px minmax(0,1fr)}.sidebar{padding:15px}.header-note{display:none}.scale-overview{display:block}.mood{width:100%;min-height:0;margin-top:10px}.discovery-grid{grid-template-columns:1.2fr 1fr;gap:16px}.panel{padding:17px}.hero h1{font-size:36px}.hero-actions .primary{padding:10px 12px}}
@media(max-width:980px){.layout{display:block;padding:22px}.topbar{padding:0 22px;gap:16px}.topbar nav a{padding:8px 13px}.settings-trigger{display:flex;align-items:center;gap:7px;background:#1b2633;border:1px solid #3b4a5e;border-radius:9px;min-height:38px;padding:8px 11px;font-size:11px;white-space:nowrap}.settings-trigger>span{font-size:17px}.sidebar{position:fixed;left:0;top:0;bottom:0;z-index:40;width:min(360px,calc(100vw - 24px));height:100svh;max-height:none;border-radius:0 18px 18px 0;padding:24px;transform:translateX(-105%);visibility:hidden;transition:transform .2s;background:#131c28;border:1px solid #344154;box-shadow:8px 0 30px #0004}.settings-open .sidebar{transform:translateX(0);visibility:visible}.settings-open{overflow:hidden}.close-settings{display:grid;place-items:center;position:absolute;right:0;top:-5px;border:1px solid #425066;border-radius:9px;width:36px;height:36px;background:#263243;color:#c1cfde;font-size:22px}.sidebar-heading{margin:8px 0 26px}.sidebar h2{font-size:22px}.sidebar legend{font-size:11px}.sidebar label{font-size:12px}.sidebar select{font-size:16px;min-height:44px}.sidebar fieldset{margin-bottom:24px}.reading-settings summary{font-size:12px;min-height:30px}.apply-settings{display:inline-flex!important;font-size:12px}.settings-actions{position:sticky;bottom:-24px;background:#131c28f5;margin:0 -24px;padding:16px 24px 20px;border-top:1px solid var(--line);z-index:1}.settings-overlay:not([hidden]){display:block;position:fixed;z-index:39;inset:0;width:100%;height:100%;border:0;background:#02060db3;backdrop-filter:blur(4px)}}
@media(max-width:700px){:root{--header-height:106px}.topbar{height:var(--header-height);flex-wrap:wrap;gap:8px;padding:11px 16px 8px}.brand{font-size:17px;gap:9px}.brand-mark{width:30px;height:30px}.topbar nav{order:3;flex-basis:100%;justify-content:space-around;border-radius:9px;padding:3px;gap:2px}.topbar nav a{flex:1;text-align:center;padding:7px 6px;font-size:11px;border-radius:6px}.settings-trigger{font-size:10px;padding:6px 8px;min-height:34px}.layout{padding:16px 14px 0}.workspace-bar{margin-bottom:15px;font-size:9px}.save-status{font-size:9px}.hero{gap:10px;align-items:center;margin-bottom:16px}.hero h1{font-size:31px;letter-spacing:-1.2px;margin:6px 0}.hero p{font-size:10px}.hero .eyebrow{font-size:8px}.hero-actions{gap:5px}.hero .primary{font-size:0;width:38px;height:38px;min-height:38px;padding:0;gap:0}.hero .primary span{font-size:22px}.icon-button{width:34px;height:38px}.scale-overview{margin-bottom:16px}.note-strip{gap:4px}.note-tile{border-radius:8px}.note-tile button{min-height:59px;padding:9px 1px}.note-tile strong{font-size:16px}.note-tile small{font-size:9px}.mood{margin-top:7px}.panel{padding:14px;border-radius:12px;margin-bottom:16px}.panel-header{gap:9px;margin-bottom:12px}.panel-title-group{gap:8px}.panel h2{font-size:18px}.section-number{width:27px;height:27px;font-size:21px}.tag{font-size:8px;padding:5px 6px}.board-toolbar{gap:8px;margin-bottom:10px}.board-toolbar p{font-size:9px}.compact button{min-height:32px;padding:6px 9px}.string-row{height:40px}.fret-cell button{height:32px;width:32px;min-width:32px;font-size:10px}.board-navigation{font-size:9px}.board-jumps button{min-width:34px;min-height:34px}.board-footer{align-items:start;gap:10px}.board-footer>span{font-size:8px}.legend{gap:8px;font-size:9px}.discovery-grid{display:block}.segmented button{min-height:38px}.info-disclosure summary{min-height:34px}.related-row{padding:13px}.section-heading{flex-wrap:wrap;gap:8px}.harmony-controls{gap:8px}.section-heading h2{font-size:22px}.degree-selector{gap:3px;padding:4px;top:calc(var(--header-height) + 6px);margin-bottom:14px}.degree-card{padding:9px 1px;border-radius:6px}.degree-card small{font-size:10px}.degree-card strong{font-size:13px;letter-spacing:-.6px;margin:5px 0}.degree-card>span{font-size:8px}.chord-panel h3{font-size:21px}.chord-panel h3 small{display:block;margin:3px 0 0;font-size:10px;line-height:1.5}.chord-notes{gap:5px}.chord-notes>span{font-size:12px;padding:6px 7px}.chord-notes small{font-size:9px}.preview-banner{display:block;font-size:11px}.preview-actions{margin-top:10px}.preview-banner button{min-height:36px}.cadence-list,.progression-list{grid-template-columns:1fr;gap:10px}.cadence-card{padding:14px}.listen-small{width:38px;height:38px}.footer{font-size:10px}.footer details{max-width:55%}.audio-status{font-size:11px;width:max-content}}
@media(max-width:360px){.topbar{padding-left:12px;padding-right:12px}.brand{font-size:15px;gap:7px}.brand-mark{width:27px;height:28px;gap:2px}.settings-trigger{font-size:9px;gap:4px}.layout{padding-left:10px;padding-right:10px}.hero h1{font-size:28px}.hero-actions{gap:4px}.hero .primary{width:34px}.icon-button{width:30px}.note-tile strong{font-size:13px}.panel{padding:12px}.board-footer{display:block}.board-footer>span{display:block;margin-top:8px;text-align:left}.degree-card strong{font-size:11px}.degree-card>span{font-size:7px}.mode-row{gap:4px;padding:10px 8px}.chord-notes small{font-size:8px}}
.chord-panel h3 .chord-quality-label{display:block;margin:4px 0 0;line-height:1.5;letter-spacing:0}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}