:root{--ink:#18231e;--muted:#657069;--paper:#f4f0e6;--cream:#fbf9f3;--line:#d9d5ca;--green:#245b45;--lime:#ddeb9d;--orange:#d9693a;--shadow:0 18px 55px #263a2a20}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,sans-serif}.topbar{height:74px;padding:0 max(28px,calc((100vw - 1240px)/2));display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:#f4f0e6e8;backdrop-filter:blur(10px);position:sticky;top:0;z-index:5}.brand{font-family:Georgia,serif;font-size:21px;font-weight:700;text-decoration:none;color:var(--ink);display:flex;gap:10px;align-items:center}.brand-mark{display:grid;place-items:center;width:34px;height:34px;background:var(--green);color:white;border-radius:50%;font:700 14px system-ui}.topbar nav{display:flex;gap:8px}button,input,textarea{font:inherit}button{cursor:pointer;border:0}.ghost,.primary,.metro,.icon-button{padding:10px 16px;border-radius:99px}.ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}.primary{background:var(--green);color:white}.icon-button{background:var(--cream)}main{max-width:1240px;margin:auto;padding:54px 28px 80px}.song-header{display:flex;justify-content:space-between;align-items:end;gap:30px}.eyebrow{font-size:11px;font-weight:800;letter-spacing:.16em;color:var(--orange);margin:0 0 7px}.song-header h1{font:700 clamp(42px,7vw,78px)/.95 Georgia,serif;margin:0}.artist{font-size:17px;color:var(--muted);margin:12px 0 0}.controls{display:flex;align-items:end;gap:13px;flex-wrap:wrap}.controls label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em}.stepper{display:flex;margin-top:5px;border:1px solid var(--line);border-radius:99px;overflow:hidden;background:var(--cream)}.stepper button,.stepper output{border:0;background:none;padding:7px 12px}.stepper output{min-width:38px;text-align:center;border-inline:1px solid var(--line)}.tempo{position:relative}.tempo input{display:block;width:94px;margin-top:5px;padding:8px 35px 8px 12px;border:1px solid var(--line);border-radius:99px;background:var(--cream)}.tempo span{position:absolute;right:10px;bottom:9px;color:var(--muted);font-size:9px}.metro{background:var(--lime);color:var(--ink)}.metro.active span{color:var(--orange)}.meta-strip{margin:38px 0 25px;border-block:1px solid var(--line);display:flex;align-items:center;gap:0;flex-wrap:wrap}.meta-strip>span{padding:13px 25px;border-right:1px solid var(--line);color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.1em}.meta-strip>span:first-child{padding-left:0}.meta-strip strong{color:var(--ink);margin-left:7px}.meta-strip .legend{margin-left:auto;border:0;text-transform:none;letter-spacing:0}.notes{max-width:780px;color:var(--muted);font-style:italic}.song{padding:25px 0 50px;min-height:200px}.section{margin:0 0 42px}.section-label{font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:var(--orange);font-weight:800;margin:0 0 20px}.lyric-line{display:flex;flex-wrap:wrap;gap:7px 4px;margin:0 0 18px;min-height:52px;align-items:flex-end}.token{display:inline-grid;grid-template-rows:21px 29px;position:relative;padding-right:5px}.token .chord{font:700 16px Georgia,serif;color:var(--green)}.token .word{font:500 clamp(19px,2.3vw,28px) Georgia,serif;white-space:pre}.strike{position:absolute;color:var(--orange);font-weight:800;font-size:13px;right:0;bottom:1px}.chord-tray{border-top:1px solid var(--line);padding-top:32px;display:grid;grid-template-columns:200px 1fr;gap:30px}.chord-tray h2{font:700 23px Georgia,serif;margin:0}.diagrams{display:flex;flex-wrap:wrap;gap:14px}.diagram{width:142px;background:var(--cream);border:1px solid var(--line);border-radius:10px;padding:13px}.diagram-head{display:flex;justify-content:space-between;margin-bottom:10px}.diagram-head strong{font:700 18px Georgia,serif}.diagram-head span{font-size:10px;color:var(--muted)}.fretboard{display:grid;grid-template-columns:repeat(6,1fr);gap:3px;border-top:3px solid var(--ink);padding-top:5px}.string{height:55px;border-left:1px solid #879087;position:relative}.string:last-child{border-right:1px solid #879087}.dot{width:13px;height:13px;border-radius:50%;background:var(--green);position:absolute;left:-7px;transform:translateY(-50%)}.open{position:absolute;top:-21px;left:-5px;font-size:10px}dialog{width:min(720px,calc(100% - 30px));border:0;border-radius:16px;padding:26px;background:var(--cream);box-shadow:var(--shadow);color:var(--ink)}dialog::backdrop{background:#17221db8;backdrop-filter:blur(3px)}.dialog-head{display:flex;justify-content:space-between;align-items:start;margin-bottom:22px}.dialog-head h2{font:700 30px Georgia,serif;margin:0}.close{font-size:27px;background:none}.library{display:grid;gap:9px}.library button{text-align:left;padding:15px;border:1px solid var(--line);border-radius:9px;background:white}.library strong,.library small{display:block}.library small{color:var(--muted)}.form-grid{display:grid;grid-template-columns:2fr 2fr 1fr;gap:13px}.editor-dialog label{display:block;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:13px}.editor-dialog input,.editor-dialog textarea{display:block;width:100%;margin-top:5px;border:1px solid var(--line);border-radius:7px;padding:9px;background:white;color:var(--ink)}.editor-dialog small{color:var(--muted);text-transform:none;letter-spacing:0;font-weight:400}.dialog-actions{display:flex;justify-content:flex-end;gap:10px}.token-editor{max-height:240px;overflow:auto;border-block:1px solid var(--line);padding:13px 0;margin:14px 0}.edit-row{margin-bottom:11px}.edit-token{display:inline-grid;min-width:44px;margin:3px;padding:5px;background:white;border:1px solid var(--line);border-radius:5px}.edit-token.selected{outline:2px solid var(--orange)}.token-chord{color:var(--green);font-weight:700;height:18px}.token-word{font-family:Georgia,serif}.token-strike{color:var(--orange);font-size:11px}.token-popover{display:flex;gap:6px;align-items:center;padding:8px;position:sticky;bottom:0;background:var(--paper);border-radius:7px}.token-popover input{margin:0;width:90px}.token-popover button{padding:6px 9px;border-radius:5px}.empty{text-align:center;padding:50px;color:var(--muted)}#editorMessage{color:var(--orange)}@media(max-width:760px){.topbar{padding:0 15px}.topbar .ghost{display:none}main{padding:30px 18px}.song-header{display:block}.controls{margin-top:25px}.meta-strip .legend{width:100%;padding-left:0}.chord-tray{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr 1fr}.song-header h1{font-size:48px}}@media print{.topbar,.controls,.notes,.chord-tray{display:none}body{background:white}main{padding:0}.song-header{display:block}.song-header h1{font-size:42px}.song{padding-top:10px}.section{break-inside:avoid;margin-bottom:25px}}