:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;color:#161616;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;--ink:#161616;--muted:#6e675c;--panel:#fffdf8;--line:#d8d0c4;--accent:#b3392f;--accent-dark:#81261f;--green:#2f6f55;--amber:#c1881b;--shadow:0 18px 50px #2820141f;background:#f7f4ed;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{min-width:320px;margin:0}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:wait;opacity:.72}.app-shell{width:min(1440px,100%);margin:0 auto;padding:24px}.topbar{justify-content:space-between;align-items:center;gap:16px;padding-bottom:22px;display:flex}.brand{align-items:center;gap:12px;display:flex}.brand-mark{border:1px solid var(--line);color:#fff;background:var(--ink);border-radius:8px;place-items:center;width:44px;height:44px;display:grid}h1,h2,h3,p{margin:0}h1{letter-spacing:0;font-size:1.35rem;line-height:1.1}.brand p,.result-heading p,.empty-state p,.phrase-card p{color:var(--muted)}.workspace{grid-template-columns:minmax(0,1fr) 340px;gap:16px;display:grid}.input-panel,.control-panel,.result-panel{border:1px solid var(--line);background:var(--panel);box-shadow:var(--shadow);border-radius:8px}.input-panel,.control-panel{padding:18px}.section-heading,.result-heading{justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:16px;display:flex}.section-heading h2,.result-heading h2{margin-top:4px;font-size:1.08rem;line-height:1.25}.eyebrow{color:var(--accent);letter-spacing:.12em;text-transform:uppercase;font-size:.72rem;font-weight:800}textarea{resize:vertical;border:1px solid var(--line);width:100%;min-height:344px;color:var(--ink);background:#fff;border-radius:8px;padding:16px;line-height:1.55;display:block}textarea:focus,input:focus,select:focus{border-color:var(--accent);outline:2px solid #b3392f38}.file-row{min-height:22px;color:var(--muted);align-items:center;gap:8px;margin-top:12px;font-size:.92rem;display:flex}.control-panel{flex-direction:column;gap:15px;display:flex}.field{gap:7px;min-width:0;display:grid}.field>span{color:var(--muted);font-size:.82rem;font-weight:700}select,input{border:1px solid var(--line);width:100%;min-height:42px;color:var(--ink);background:#fff;border-radius:8px;padding:0 12px}input[type=range]{accent-color:var(--accent);padding:0}.split-fields{grid-template-columns:minmax(0,1fr) 108px;gap:10px;display:grid}.segmented{border:1px solid var(--line);background:#fff;border-radius:8px;grid-auto-columns:1fr;grid-auto-flow:column;min-height:42px;display:grid;overflow:hidden}.segmented button{border:0;border-right:1px solid var(--line);color:var(--muted);background:0 0;font-weight:750}.segmented button:last-child{border-right:0}.segmented button.active{color:#fff;background:var(--green)}.primary-button,.ghost-button,.icon-button{border:1px solid #0000;border-radius:8px;justify-content:center;align-items:center;gap:8px;min-height:42px;font-weight:800;display:inline-flex}.primary-button{color:#fff;background:var(--accent);width:100%}.primary-button:hover{background:var(--accent-dark)}.ghost-button{color:var(--ink);border-color:var(--line);background:var(--panel);padding:0 14px}.icon-button{min-width:42px;color:var(--ink);border-color:var(--line);background:#fff;padding:0 12px}.text-button{min-width:92px}.status{min-height:22px;font-size:.9rem}.error{color:var(--accent-dark)}.result-panel{margin-top:16px;padding:20px}.result-actions{flex-wrap:wrap;justify-content:flex-end;gap:8px;display:flex}.chord-strip{flex-wrap:wrap;gap:8px;margin-bottom:16px;display:flex}.chord-strip span{color:#153d2e;background:#edf5ec;border:1px solid #bfc8bc;border-radius:8px;align-items:center;min-height:34px;padding:0 10px;font-weight:800;display:inline-flex}.fretboard{background:linear-gradient(90deg,#0000000d,#0000),#d1a66e;border:1px solid #332c24;border-radius:8px;grid-template-rows:repeat(6,36px);grid-template-columns:repeat(13,minmax(34px,1fr));min-height:216px;display:grid;position:relative;overflow:hidden}.nut{z-index:3;background:#f4eee4;border-right:1px solid #0003;width:7px;height:100%;position:absolute;top:0;left:0}.string-line{background:#1c18149e;grid-column:1/-1;align-self:center;height:2px}.fret-line{background:#ffffff9e;border-left:1px solid #0000002e;grid-row:1/-1;justify-self:end;width:2px}.note-marker{z-index:4;color:#fff;background:var(--accent-dark);border:2px solid #fff;border-radius:50%;place-self:center;place-items:center;width:30px;height:30px;font-size:.72rem;font-weight:900;display:grid;box-shadow:0 5px 14px #00000040}.phrase-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px;display:grid}.phrase-card{border:1px solid var(--line);background:#fff;border-radius:8px;padding:14px}.phrase-card span{color:var(--amber);text-transform:uppercase;letter-spacing:.08em;font-size:.76rem;font-weight:850}.phrase-card h3{margin-top:4px;font-size:1rem}.phrase-card p{min-height:44px;margin-top:10px;font-size:.9rem}.phrase-card small{color:#3c5d4f;min-height:32px;margin-top:8px;font-weight:750;line-height:1.35;display:block}pre{color:#f8f3e8;background:#1d1b18;border-radius:8px;margin:12px 0 0;padding:12px;font-size:.78rem;line-height:1.45;overflow-x:auto}.warnings{color:#6a4610;gap:8px;margin-top:16px;display:grid}.warnings p{background:#fff7e5;border:1px solid #edd19b;border-radius:8px;padding:10px}.empty-state{min-height:360px;color:var(--muted);text-align:center;align-content:center;place-items:center;gap:12px;display:grid}.empty-state h2{color:var(--ink)}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}@media (width<=980px){.workspace,.phrase-grid{grid-template-columns:1fr}.control-panel{order:2}}@media (width<=640px){.app-shell{padding:14px}.topbar,.section-heading,.result-heading{flex-direction:column;align-items:stretch}.result-actions,.ghost-button,.text-button{width:100%}.split-fields{grid-template-columns:1fr}.fretboard{grid-template-rows:repeat(6,30px);grid-template-columns:repeat(13,minmax(24px,1fr));min-height:180px}.note-marker{width:26px;height:26px;font-size:.64rem}}