@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Kalam:wght@400;700&display=swap";@import"https://fonts.googleapis.com/css2?family=Kalam:wght@400;700&family=Caveat:wght@700&display=swap";:root{font-family:Inter,Segoe UI,system-ui,-apple-system,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--bg: #f7f7fb;--surface: #ffffff;--surface-alt: #fafafb;--text: #1b1b1f;--text-muted: #60606a;--text-subtle: #555;--border: #e0e0e6;--border-strong: #d5d5dd;--border-dashed: #d4d4dc;--accent: #1f5fff;--accent-shadow: rgba(31, 95, 255, .2);--accent-shadow-soft: rgba(31, 95, 255, .14);--error-bg: #fff4f4;--error-border: #f6c9c9;--error-text: #8a1c1c;--danger: #9b1c1c;--pill-bg: #ffffff;--pill-border: #d1d5db;--pill-text: #6b7280;--pill-hover-bg: #f3f4f6;--pill-hover-text: #374151;--shadow: rgba(0, 0, 0, .05);--code-bg: #ffffff;--group-heading: #60606a;color:var(--text);background-color:var(--bg)}:root[data-theme=dark]{--bg: #14141a;--surface: #1e1e26;--surface-alt: #282833;--text: #e8e8ee;--text-muted: #a0a0ac;--text-subtle: #9b9ba7;--border: #34343f;--border-strong: #404050;--border-dashed: #404050;--accent: #5b8cff;--accent-shadow: rgba(91, 140, 255, .25);--accent-shadow-soft: rgba(91, 140, 255, .2);--error-bg: #2a1818;--error-border: #5c2424;--error-text: #f5a8a8;--danger: #f57878;--pill-bg: #282833;--pill-border: #404050;--pill-text: #a0a0ac;--pill-hover-bg: #34343f;--pill-hover-text: #d0d0dc;--shadow: rgba(0, 0, 0, .3);--code-bg: #14141a;--group-heading: #a0a0ac}*{box-sizing:border-box}body{margin:0;min-height:100vh}.layout{display:grid;grid-template-columns:1fr 1fr;gap:16px;min-height:100vh;padding:16px;background:var(--bg);color:var(--text)}.panel{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px;box-shadow:0 10px 30px var(--shadow)}.input-panel header h1{margin:0 0 4px;font-size:22px}.app-title{display:flex;align-items:center;justify-content:space-between;gap:12px}.header-controls{display:flex;align-items:center;gap:10px}.auth-control{display:flex;align-items:center;gap:8px}.user-email{font-size:12px;color:var(--text-subtle);max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.auth-btn{border:1px solid var(--border-strong);background:var(--surface-alt);color:var(--text);border-radius:999px;padding:4px 12px;font:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:border-color .12s ease,color .12s ease}.auth-btn:hover{border-color:var(--accent);color:var(--accent)}.auth-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.error-text{color:#d33}.theme-toggle{border:1px solid var(--border-strong);background:var(--surface-alt);color:var(--text);border-radius:999px;padding:4px 12px;font:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:border-color .12s ease,color .12s ease}.theme-toggle:hover{border-color:var(--accent);color:var(--accent)}.theme-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.subhead{margin:0 0 12px;color:var(--text-subtle)}.toolbar{display:flex;gap:8px;margin:8px 0 12px;flex-wrap:wrap}.toolbar button,.file-btn{border:1px solid var(--accent);background:var(--accent);color:#fff;border-radius:8px;padding:6px 10px;font:inherit;font-weight:600;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease}.toolbar button:hover,.file-btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px var(--accent-shadow)}.file-btn{position:relative;overflow:hidden;display:inline-flex;align-items:center}.file-btn input{position:absolute;inset:0;opacity:0;cursor:pointer}.field-label{display:block;font-weight:600;margin-bottom:6px}textarea{width:100%;min-height:420px;font-family:SFMono-Regular,Consolas,Liberation Mono,monospace;font-size:14px;border-radius:10px;border:1px solid var(--border-strong);padding:12px;resize:vertical;outline:none;background:var(--surface-alt);color:var(--text)}textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-shadow)}.errors{margin-top:12px;border-radius:10px;border:1px solid var(--error-border);background:var(--error-bg);color:var(--error-text);padding:10px 12px}.errors h2{margin:0 0 6px;font-size:14px}.errors ul{padding-left:18px;margin:0}.chord-ref{margin-top:12px;border:1px solid var(--border);border-radius:10px;background:var(--surface-alt);padding:8px 12px}.chord-ref>summary{cursor:pointer;font-weight:600;font-size:13px;color:var(--accent);list-style:none;-webkit-user-select:none;user-select:none}.chord-ref>summary::-webkit-details-marker{display:none}.chord-ref>summary:before{content:"▸";display:inline-block;margin-right:6px;transition:transform .15s ease}.chord-ref[open]>summary:before{transform:rotate(90deg)}.chord-ref-body{margin-top:10px;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}.chord-ref-group h3{margin:0 0 4px;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--group-heading)}.chord-ref-group ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:3px}.chord-ref-group li{font-size:12px;color:var(--text);line-height:1.4}.chord-ref-group code,.chord-ref-note code{font-family:SFMono-Regular,Consolas,Liberation Mono,monospace;font-size:11.5px;background:var(--code-bg);border:1px solid var(--border);border-radius:4px;padding:0 4px;color:var(--text)}.chord-ref-note{grid-column:1 / -1;font-size:12px;color:var(--text-muted);margin:4px 0 0;line-height:1.5}.scale-ref .chord-ref-body{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.scale-ref .chord-ref-group li{white-space:nowrap}.preview-panel{display:flex;flex-direction:column}.preview-header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}.header-actions{display:flex;align-items:center;gap:10px}.pill-toggle{display:inline-flex;border:2px solid var(--pill-border)!important;border-radius:999px;overflow:hidden;background:var(--pill-bg)!important}.pill-toggle button{border:none!important;background:var(--pill-bg)!important;padding:8px 16px;font-weight:600;color:var(--pill-text)!important;cursor:pointer;transition:all .2s ease}.pill-toggle button.active{background:var(--accent)!important;color:#fff!important}.pill-toggle button:not(.active):hover{background:var(--pill-hover-bg)!important;color:var(--pill-hover-text)!important}.pill-toggle button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.preview-header h2{margin:0}.meta{color:var(--text-muted);font-size:13px}.header-actions button{border:1px solid var(--accent);background:var(--accent);color:#fff;border-radius:8px;padding:6px 10px;font-weight:600;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,background .12s ease}.header-actions button:disabled{opacity:.6;cursor:not-allowed}.header-actions button:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 8px 20px var(--accent-shadow)}.library-panel{grid-column:1 / -1}.library-header{display:flex;justify-content:space-between;align-items:baseline}.library-list{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-direction:column;gap:6px}.library-list li{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--border);border-radius:8px;padding:8px 10px;background:var(--surface-alt)}.library-list li.active{border-color:var(--accent);box-shadow:0 6px 18px var(--accent-shadow-soft)}.library-list .link{display:flex;flex-direction:column;align-items:flex-start;gap:2px;background:transparent;border:none;padding:0;cursor:pointer;text-align:left}.library-list .name{font-weight:700;color:var(--text)}.library-list .meta.small{font-size:12px}.library-list .delete{border:none;background:transparent;color:var(--danger);font-size:16px;cursor:pointer;padding:4px;line-height:1}.preview-surface{flex:1;min-height:520px;border:1px dashed var(--border-dashed);border-radius:12px;background:#fff;color:#1b1b1f;overflow:auto;padding:8px;display:flex;justify-content:center;align-items:flex-start}.abc-render{width:100%}.preview-surface svg{display:block;margin:0 auto}.preview-surface svg text{font-family:MuseJazz Text,Petaluma Text,Kalam,Caveat,Arial,sans-serif}.preview-surface .abcjs-chord{transform:translateY(6px);transform-box:fill-box;transform-origin:center}@media(max-width:1080px){.layout{grid-template-columns:1fr}.library-panel{grid-column:auto}}@media print{body{background:#fff}.layout{display:block;padding:0;gap:0}.input-panel,.header-actions button{display:none!important}.panel{box-shadow:none;border:none;padding:0}.preview-surface{border:none;min-height:auto;padding:0}}