@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#202824;background:#f5f5f0;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button,a,input,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer;transition:background .18s,transform .18s}button:disabled{cursor:default;opacity:.4}button:not(:disabled):active{transform:translateY(1px)}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #749a34;outline-offset:4px}input:focus{outline:2px solid #709344;outline-offset:2px}header{max-width:1320px;margin:auto;padding:29px 52px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #daddd4}.brand{display:flex;align-items:center;gap:10px;font-family:Manrope,sans-serif;font-size:32px;font-weight:800;letter-spacing:-1.5px;text-decoration:none;color:inherit}.mark{font-size:42px;line-height:1;transform:rotate(90deg);color:#587437}.beta{margin-left:18px;letter-spacing:1.6px;font:11px 'DM Sans',sans-serif;color:#637066}.header-link{font-size:14px;color:#333d35;text-decoration:none}.header-link span{margin-left:18px}main{max-width:1216px;padding:0 0 30px;margin:auto}.intro{display:flex;justify-content:space-between;align-items:center;padding:47px 0 34px}.eyebrow{font-size:11px;font-weight:600;letter-spacing:2px}h1{font-family:Manrope,sans-serif;font-size:36px;letter-spacing:-1.5px;font-weight:600;margin:10px 0}h1 em{font-family:Georgia,serif;font-weight:400}.intro p{font-size:14px;line-height:1.6;color:#687269}.workspace{display:grid;grid-template-columns:1fr 1.16fr;gap:24px;align-items:start}.listener{background:#151e19;color:#edf3e7;border-radius:18px;padding:28px 30px}.section-top{display:flex;justify-content:space-between;gap:12px;align-items:center}h2{font-size:13px;margin:0;font-weight:400;color:#889589}h2 span{font-size:17px;color:inherit;margin-left:13px}.listener h2 span{color:#ecf1e7}.badge{font-size:10px;letter-spacing:1px;border:1px solid #3e4a40;padding:8px 10px;border-radius:20px;color:#a9b4a6}.badge.active{color:#cff58a;border-color:#739744}.chord-stage{text-align:center;padding:41px 0 25px;min-height:253px}.chord-stage .eyebrow{color:#9ca996}.big-chord{font-family:Manrope,sans-serif;font-size:91px;line-height:1.35;letter-spacing:-4px;color:#d4f69b;font-weight:500;min-height:123px}#chord-description{font-size:16px;color:#e1e7db}.notes{font-size:13px;color:#a0ad9b;margin-top:10px;min-height:20px}.signal{display:flex;gap:8px;height:77px;align-items:end;padding:0 10px}.pitch{flex:1;text-align:center;font-size:10px;color:#a2ad9b}.pitch-bar{height:46px;display:flex;align-items:end;justify-content:center;margin-bottom:8px}.pitch-bar i{display:block;background:#94bd66;width:100%;max-width:22px;min-height:3px;height:3px;border-radius:3px;transition:height .12s}.level-row{display:flex;gap:12px;align-items:center;font-size:10px;letter-spacing:1px;color:#a6b09f;margin:24px 0}meter{flex:1;height:6px;accent-color:#c8ed8d}.primary{width:100%;background:#cdef9e;color:#1c2c19;border:0;border-radius:9px;padding:16px;font-weight:700;font-size:16px}.primary:hover{background:#defbb9}.capture{width:100%;background:transparent;border:1px solid #53624c;color:#e3eedd;border-radius:9px;padding:13px;margin-top:10px}.status{font-size:12px;line-height:1.5;color:#7b8876;margin:15px 0 0;min-height:36px}.listener .status{color:#a8b3a2}details{border-top:1px solid #35412f;margin-top:20px;padding-top:18px;font-size:13px;color:#b9c4b3;line-height:1.65}summary{cursor:pointer}.notebook{border:1px solid #d9dfd1;border-radius:18px;background:#fff;padding:28px 30px}.notebook h2 span{color:#303b2c}.small-label{font-size:10px;letter-spacing:1px;color:#7c8578}.title-input{display:block;width:100%;border:0;background:transparent;font-family:Manrope,sans-serif;font-size:25px;letter-spacing:-.6px;font-weight:500;margin:28px 0 18px;padding:4px 0;color:#273223}.title-input::placeholder{color:#798171}.paper{min-height:214px;border-top:1px solid #e4e8dd;border-bottom:1px solid #e4e8dd;background:repeating-linear-gradient(#fff,#fff 69px,#eef0e9 69px,#eef0e9 70px);padding:16px 0}.progression{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-start}.empty{padding:24px 8px;color:#6d7866}.empty span{font-family:Georgia,serif;font-size:25px;line-height:1.4;font-style:italic}.empty p{font-size:13px;margin-top:16px}.chord-card{position:relative;display:flex;align-items:center;border-right:2px solid #b7c79e;padding:8px 18px 8px 9px;font-family:Manrope,sans-serif;font-size:25px;min-height:55px;gap:5px}.chord-card small{font-family:'DM Sans',sans-serif;font-size:10px;align-self:flex-start;color:#7a856f}.remove-chord{background:none;border:0;color:#77886c;font-size:16px;width:26px;height:32px}.chord-card:last-child{border-right:4px double #b7c79e}form{margin-top:24px}label{display:block;font-size:13px;margin-bottom:9px;font-weight:500}.input-row{display:flex;gap:9px}#manual{width:100%;min-width:0;border:1px solid #dce1d4;border-radius:8px;padding:13px;color:#24351c;background:#fbfcf9}.square{background:#edf3e5;border:1px solid #dce5d1;border-radius:8px;font-size:24px;min-width:48px;color:#3d5426}.hint{font-size:12px;line-height:1.6;color:#77816d;margin-top:9px}.notebook-actions{display:flex;justify-content:space-between;align-items:center;margin-top:23px;gap:12px}.quiet{background:none;border:0;color:#626f57;padding:8px 0;font-size:13px}.dark{background:#263523;border:0;color:#fff;border-radius:8px;padding:13px 22px;font-size:14px}.dark:hover{background:#435f36}.saved-heading{border-top:1px solid #e3e8db;margin-top:25px;padding-top:22px;display:flex;justify-content:space-between;align-items:center}.saved-heading h3{font-size:14px;font-weight:500;margin:0}.saved-heading span{font-size:12px;color:#7f8876}.saved-list{margin-top:14px}.saved-empty{font-size:13px;color:#808875}.saved-item{display:flex;border-top:1px solid #eef0e8;padding:13px 0;gap:10px;align-items:center}.load-saved{background:none;border:0;text-align:left;flex:1;min-width:0;padding:0;color:#2d3a25}.load-saved strong,.load-saved span{display:block;overflow-wrap:anywhere}.load-saved strong{font-size:14px;margin-bottom:5px}.load-saved span{font-size:12px;color:#748166}.delete-saved{background:none;border:0;padding:8px;font-size:12px;color:#76836a}footer{display:flex;justify-content:space-between;align-items:center;margin-top:25px;color:#828b7c;font-size:11px;letter-spacing:1px}.footer-divider{margin:0 13px}footer button{letter-spacing:0}.notation{font-size:14px;line-height:1.8;color:#56644a;border-top:1px solid #dce2d3;padding:20px 0;margin-top:15px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(min-width:1500px){main{padding-top:20px}}@media(max-width:1300px){main{padding-left:36px;padding-right:36px}}@media(max-width:800px){header{padding:20px 24px}.beta{display:none}main{padding:0 20px 25px}.intro{padding:30px 2px 24px}.intro p{display:none}h1{font-size:30px}.workspace{grid-template-columns:1fr;gap:18px}.listener,.notebook{padding:24px}.chord-stage{padding:26px 0 16px;min-height:225px}footer{align-items:start;gap:18px;flex-direction:column}.header-link{font-size:13px}.brand{font-size:28px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Extended chord names and explicit, touch-accessible alternative readings. */
.big-chord.medium-chord{font-size:clamp(36px,9vw,64px);letter-spacing:-2px;display:flex;align-items:center;justify-content:center}
.big-chord.long-chord{font-size:clamp(26px,7vw,48px);letter-spacing:-1px;display:flex;align-items:center;justify-content:center;overflow-wrap:anywhere}
.ambiguity{border-top:1px solid #3b4b35;padding:12px 0 18px}.ambiguity p{font-size:14px;line-height:1.5;color:#c4cfbd;margin:0 0 10px}.alternatives{display:flex;flex-wrap:wrap;gap:8px}.alternatives button{min-height:44px;padding:8px 13px;border:1px solid #607750;border-radius:8px;background:transparent;color:#e5efd9;font-size:16px}.alternatives button[aria-pressed=true]{background:#cdef9e;color:#23331b;border-color:#cdef9e}.catalog strong{font-size:14px;color:#e5eddc}.catalog p{font-size:14px;line-height:1.7;margin:5px 0 16px;overflow-wrap:anywhere}#catalog-count{color:#d4f69b;font-size:14px}.notes{line-height:1.5;overflow-wrap:anywhere}

/* Studio 04: listening modes, single-note readout, note-by-note builder. */
.listen-modes{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:22px;padding:4px;background:#101713;border:1px solid #304033;border-radius:10px}
.mode-button{min-height:44px;border:0;border-radius:7px;background:transparent;color:#aeb9aa;font-size:12px;padding:8px 10px}
.mode-button[aria-pressed=true]{background:#28372b;color:#d7f7a0}
.note-readout{display:flex;align-items:center;justify-content:space-between;gap:14px;border-top:1px solid #35412f;border-bottom:1px solid #35412f;padding:14px 2px;margin-bottom:14px}
.note-readout>div{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap}.note-readout>div:last-child{justify-content:flex-end;color:#a8b3a2;font-size:12px}
.note-readout-label{font-size:9px;letter-spacing:1.4px;color:#8e9c8a}.note-readout strong{font-family:Manrope,sans-serif;font-size:26px;color:#d4f69b;font-weight:600}
.builder{border:1px solid #3a493a;border-radius:11px;padding:14px;margin:0 0 16px;background:#111915}
.builder-heading{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.4px;color:#8e9c8a;margin-bottom:10px}.builder-notes{display:flex;flex-wrap:wrap;gap:7px;min-height:38px;align-items:center}.builder-note{display:inline-flex;align-items:center;justify-content:center;min-width:42px;min-height:36px;padding:7px 10px;border-radius:18px;background:#28372b;color:#e7f5d9;font-family:Manrope,sans-serif;font-weight:600}.builder-empty{font-size:12px;color:#849181}.builder-actions{display:grid;grid-template-columns:1fr auto auto;gap:8px;margin-top:12px}.builder-primary,.builder-secondary{min-height:44px;border-radius:8px;border:1px solid #53624c}.builder-primary{background:#cdef9e;color:#1c2c19;font-weight:700}.builder-secondary{background:transparent;color:#dce8d6;padding:8px 12px}
@media(max-width:460px){.listen-modes{grid-template-columns:1fr}.mode-button{min-height:42px}.note-readout{align-items:flex-start;flex-direction:column}.note-readout>div:last-child{justify-content:flex-start}.builder-actions{grid-template-columns:1fr auto}.builder-actions #reset-notes{grid-column:1/-1}.big-chord{font-size:76px}}
.project-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:-4px 0 8px}.project-meta label{margin:0;font-size:9px;letter-spacing:1.3px;color:#7a856f}.project-meta input{display:block;width:100%;margin-top:6px;border:1px solid #dce1d4;border-radius:8px;background:#fbfcf9;color:#273223;padding:10px 11px;font-size:14px;letter-spacing:0}.meta-hint{font-size:11px;color:#87917f;margin:0 0 18px}.saved-item small{display:block;color:#8a9483;font-size:10px;margin-top:5px}
@media(max-width:460px){.project-meta{grid-template-columns:1fr 1fr}}
.harmony-panel{border:1px solid #e0e6d8;background:#f8faf5;border-radius:10px;padding:13px 14px;margin:0 0 18px}.harmony-top,.harmony-degrees{display:flex;justify-content:space-between;gap:14px;align-items:baseline}.harmony-panel span{font-size:9px;letter-spacing:1.3px;color:#7a856f}.harmony-panel strong{font-size:13px;color:#31402b;text-align:right}.harmony-panel p{font-size:11px;color:#7d8875;margin:7px 0 11px}.harmony-degrees strong{font-family:Manrope,sans-serif;font-weight:500;overflow-wrap:anywhere}
.debug-panel pre{white-space:pre-wrap;overflow-wrap:anywhere;background:#0d130f;border-radius:8px;padding:12px;color:#bcd49f;font:11px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;max-height:260px;overflow:auto}

/* Studio 05: tuner, song structure, richer project metadata and printable export. */
.listen-modes{grid-template-columns:repeat(4,1fr)}
.tuner{border:1px solid #3a493a;border-radius:11px;padding:14px;margin:0 0 16px;background:#111915}
.tuner-top{display:flex;justify-content:space-between;align-items:center;gap:12px}.tuner-top label{margin:0;font-size:9px;letter-spacing:1.4px;color:#8e9c8a}.tuner-top select{min-width:150px;background:#1d2920;color:#e8f1e3;border:1px solid #455843;border-radius:7px;padding:9px}
.tuning-description{font-size:12px;color:#93a18f;margin:9px 0 12px}.tuner-strings{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}.tuner-string{min-width:0;min-height:52px;background:transparent;border:1px solid #40503e;border-radius:8px;color:#b9c4b3;padding:6px 2px}.tuner-string small,.tuner-string strong{display:block}.tuner-string small{font-size:8px;color:#748171}.tuner-string strong{font-size:12px;margin-top:3px}.tuner-string[aria-pressed=true],.tuner-string.detected{background:#28372b;border-color:#7d9b5f;color:#d7f7a0}.tuner-string[aria-pressed=true]{box-shadow:inset 0 0 0 1px #cdef9e}.tuner-gauge{display:grid;grid-template-columns:auto 1fr auto;gap:9px;align-items:center;margin:18px 0 8px;color:#7f8e7d;font-size:9px}.tuner-track{height:20px;position:relative}.tuner-track:before{content:"";position:absolute;left:0;right:0;top:9px;border-top:1px solid #495948}.tuner-track b{position:absolute;left:50%;top:3px;width:1px;height:14px;background:#cdef9e}.tuner-track i{position:absolute;left:50%;top:1px;width:3px;height:18px;border-radius:3px;background:#d4f69b;transform:translateX(-50%);transition:left .12s}.tuner-state{font-size:12px;line-height:1.5;color:#b3c0af;margin:0}
.author-input{display:block;width:100%;border:0;border-top:1px solid #edf0e8;background:transparent;font-size:13px;margin:-8px 0 18px;padding:10px 0 0;color:#65705e}.author-input::placeholder{color:#a1aa9a}
.project-meta{grid-template-columns:1.05fr .8fr 1.2fr}.project-meta select,.project-meta input{display:block;width:100%;margin-top:6px;border:1px solid #dce1d4;border-radius:8px;background:#fbfcf9;color:#273223;padding:10px 11px;font-size:13px;letter-spacing:0;min-height:40px}.inline-control{display:grid;grid-template-columns:1fr auto;gap:5px;margin-top:6px}.inline-control input{margin:0}.mini-button{border:1px solid #d6decf;background:#edf3e5;color:#3e532e;border-radius:7px;min-height:40px;padding:8px 11px;font-size:11px;font-weight:600;white-space:nowrap}.inline-control .mini-button{min-height:40px}
.song-structure{border-top:1px solid #e3e8db;border-bottom:1px solid #e3e8db;padding:17px 0;margin:18px 0}.structure-heading{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.3px;color:#7a856f}.section-tabs{display:flex;gap:7px;overflow-x:auto;padding:11px 1px 8px;scrollbar-width:thin}.section-tab{flex:0 0 auto;display:grid;grid-template-columns:auto 1fr auto;gap:7px;align-items:center;min-height:45px;border:1px solid #dce3d4;background:#fafbf8;color:#53604c;border-radius:9px;padding:7px 10px}.section-tab small{font-size:8px;color:#98a08f}.section-tab span{font-size:12px}.section-tab b{font-size:9px;font-weight:500;color:#7d8874}.section-tab[aria-pressed=true]{background:#eef4e7;border-color:#b9ca9f;color:#2c3c26}.section-add-row{display:grid;grid-template-columns:1fr auto;gap:7px;margin-top:4px}.section-add-row select{border:1px solid #dce1d4;border-radius:7px;background:#fbfcf9;color:#4d5946;padding:8px 10px}.section-editor{display:grid;grid-template-columns:1.4fr .55fr auto;gap:8px;align-items:end;margin-top:10px}.section-editor label{margin:0;font-size:8px;letter-spacing:1.2px;color:#818b79}.section-editor input{width:100%;display:block;margin-top:5px;border:1px solid #dce1d4;border-radius:7px;padding:9px;background:#fff;color:#2b3827}.danger{color:#8a5f58}.action-group{display:flex;align-items:center;gap:12px}.modulation-note{border-top:1px solid #e1e6da;padding-top:9px!important;margin-top:10px!important;color:#596a50!important}.print-sheet{display:none}
@media(max-width:650px){.listen-modes{grid-template-columns:1fr 1fr}.project-meta{grid-template-columns:1fr 1fr}.project-meta label:last-of-type{grid-column:1/-1}.section-editor{grid-template-columns:1fr .55fr}.section-editor .danger{grid-column:1/-1;text-align:left}.notebook-actions{align-items:flex-end}.action-group{flex-direction:column-reverse;align-items:flex-end;gap:2px}}
@media(max-width:390px){.tuner-strings{gap:3px}.tuner-string{padding-left:0;padding-right:0}.project-meta{grid-template-columns:1fr}.project-meta label:last-of-type{grid-column:auto}.section-editor{grid-template-columns:1fr 1fr}}
@media print{
 @page{size:A4;margin:18mm}
 body{background:#fff!important;color:#111!important}.site-header,body>header,body>main{display:none!important}.print-sheet{display:block!important;color:#111;background:#fff;font-family:Arial,Helvetica,sans-serif}.print-song{max-width:none;margin:0}.print-song header{position:static!important;display:block!important;height:auto!important;padding:0 0 16px!important;border-bottom:2px solid #222!important;background:#fff!important}.print-brand{font-size:9pt;letter-spacing:2px;margin:0 0 18px}.print-song h1{font-family:Georgia,serif;font-size:25pt;line-height:1.1;margin:0 0 6px;letter-spacing:0}.print-author{font-size:10pt;margin:0 0 10px}.print-meta{display:flex;gap:16px;flex-wrap:wrap;font-size:9pt;margin:0}.print-section{break-inside:avoid;margin:22px 0}.print-section h2{font-family:Arial,sans-serif;font-size:10pt;letter-spacing:1.2px;color:#111;margin:0 0 9px}.print-chords{font-family:Arial,sans-serif;font-size:16pt;line-height:1.7;margin:0;border-bottom:1px solid #ccc;padding-bottom:7px}.print-degrees{font-size:9pt;color:#555;margin:6px 0 0}
}
.backup-panel{border-top:1px solid #e3e8db;margin-top:18px;padding-top:16px;color:#65705e}.backup-panel p{font-size:12px;line-height:1.55;margin:10px 0}.backup-actions{display:flex;gap:8px;flex-wrap:wrap}.file-button{display:inline-flex;align-items:center;margin:0;cursor:pointer}.file-button input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.section-tools{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:7px}.section-tools .quiet{font-size:11px;padding:6px 0}.section-tools button:disabled{opacity:.35}


/* Studio 07: installable PWA / safe areas + GitHub/Cloudflare deployment. */
body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);padding-bottom:env(safe-area-inset-bottom)}
body>header{padding-top:max(29px,env(safe-area-inset-top))}
.footer-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
#install-app{color:#4d633c;font-weight:600}
@media(max-width:800px){body>header{padding-top:max(20px,env(safe-area-inset-top))}.footer-actions{align-items:flex-start;flex-direction:column;gap:4px}}