:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#faf6ee;--bg-glow:#f3e3bd;--bg-sky:#e3eef9;--surface:#fffdf8;--surface-sunk:#f6f0e4;--paper:#fffefa;--ink:#2b1c20;--muted:#6c5d61;--line:#e8dccb;--line-strong:#d9c7ad;--wine:#7a1f33;--wine-dark:#5a1424;--wine-soft:#7a1f3312;--wine-fill:#7a1f33;--wine-fill-hover:#5a1424;--on-wine:#fff9ef;--gold:#b48a3c;--gold-text:#845f1c;--gold-soft:#b48a3c1f;--sky:#eaf2fb;--sky-line:#c9dcef;--ok:#2b6644;--ok-bg:#e5f1e8;--warn:#7d5200;--warn-bg:#fff1c9;--warn-edge:#e1b44a;--err:#9d2327;--err-bg:#fce6e4;--err-edge:#d66a6d;--shadow-soft:0 1px 2px #5a142410, 0 10px 28px -14px #5a142438;--shadow-lift:0 2px 4px #5a142414, 0 16px 36px -16px #5a142450;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--radius-sm:8px;--radius:12px;--radius-lg:18px;--control-height:40px;--font-display:"Cormorant Garamond", "EB Garamond", Garamond, Georgia, serif;--font-ui:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;--font-mono:ui-monospace, "JetBrains Mono", "SFMono-Regular", Menlo, monospace;--ease:cubic-bezier(.22, .61, .36, 1);font-family:var(--font-ui);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;line-height:1.5}:root[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#171013;--bg-glow:#33231a;--bg-sky:#261820;--surface:#21171b;--surface-sunk:#1b1316;--paper:#1d1418;--ink:#f4ead9;--muted:#bcaca4;--line:#3a2b30;--line-strong:#5a454c;--wine:#e7a0ae;--wine-dark:#f2c3cc;--wine-soft:#e7a0ae1a;--wine-fill:#8e2a40;--wine-fill-hover:#a3344d;--on-wine:#fff9ef;--gold:#d6b26a;--gold-text:#e2c27f;--gold-soft:#d6b26a24;--sky:#2a1d24;--sky-line:#45303a;--ok:#96d4ac;--ok-bg:#173022;--warn:#f1d084;--warn-bg:#382b0f;--warn-edge:#a77f22;--err:#f4a9a7;--err-bg:#3e191b;--err-edge:#b4474b;--shadow-soft:0 1px 2px #00000040, 0 12px 30px -16px #00000090;--shadow-lift:0 2px 4px #00000050, 0 18px 40px -16px #000000a0}*{box-sizing:border-box}html{background:var(--bg)}body{background:radial-gradient(1200px 520px at 50% -180px, var(--bg-glow), transparent 70%), radial-gradient(700px 420px at 0% 0%, var(--bg-sky), transparent 70%), radial-gradient(700px 420px at 100% 0%, var(--bg-sky), transparent 72%), var(--bg);background-repeat:no-repeat;min-width:320px;min-height:100vh;margin:0}h1,h2,h3,p{margin:0}button,input,textarea,select{font:inherit;color:inherit}a{color:var(--wine);-webkit-text-decoration-color:var(--gold);text-decoration-color:var(--gold);text-underline-offset:3px}a:hover{text-decoration-thickness:2px}code{background:var(--gold-soft);padding:0 var(--space-1);border-radius:4px}::selection{background:#b48a3c40}:focus-visible{outline:2px solid var(--gold);outline-offset:2px}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.app{max-width:1320px;padding:0 var(--space-4) var(--space-6);margin:0 auto}.app-header{align-items:center;gap:var(--space-4);padding:var(--space-6) 0 var(--space-4);animation:rise .5s var(--ease) both;display:flex}.mark{filter:drop-shadow(0 6px 10px #5a142430);flex:none;width:48px;height:56px}.brand{gap:2px;min-width:0;display:grid}.app-header h1{font-family:var(--font-display);color:var(--wine-dark);letter-spacing:.005em;font-size:clamp(1.9rem,1.4rem + 1.6vw,2.6rem);font-weight:600;line-height:1.05}.app-header p{font-family:var(--font-display);color:var(--muted);text-wrap:balance;font-size:1.15rem;font-style:italic}.header-link{min-height:var(--control-height);padding:0 var(--space-4);border:1px solid var(--line-strong);background:var(--surface);color:var(--wine);white-space:nowrap;box-shadow:var(--shadow-soft);transition:border-color .2s, transform .2s var(--ease), box-shadow .2s;border-radius:999px;align-items:center;gap:6px;margin-left:auto;font-size:.9rem;font-weight:600;text-decoration:none;display:inline-flex}.header-link:hover{border-color:var(--gold);box-shadow:var(--shadow-lift);transform:translateY(-1px)}.theme-toggle{width:var(--control-height);height:var(--control-height);border:1px solid var(--line-strong);background:var(--surface);color:var(--wine);cursor:pointer;box-shadow:var(--shadow-soft);transition:border-color .2s, transform .2s var(--ease), box-shadow .2s;border-radius:50%;flex:none;place-items:center;padding:0;display:grid}.theme-toggle:hover{border-color:var(--gold);box-shadow:var(--shadow-lift);transform:translateY(-1px)}.theme-toggle svg{width:20px;height:20px}.divider{align-items:center;gap:var(--space-3);color:var(--gold);margin-bottom:var(--space-5);display:flex}.divider:before,.divider:after{content:"";flex:1;height:1px}.divider:before{background:linear-gradient(90deg, transparent, var(--gold))}.divider:after{background:linear-gradient(90deg, var(--gold), transparent)}.ornament-cross{flex:none;width:12px;height:16px}@media (width<=640px){.app-header{gap:var(--space-3) var(--space-4);padding-top:var(--space-5);flex-wrap:wrap}.mark{width:40px;height:47px}.brand{flex:1}.app-header p{font-size:1rem}.theme-toggle{order:1}.header-link{order:2;justify-content:center;width:100%;margin-left:0}}.layout{gap:var(--space-5);grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start;display:grid}.column{gap:var(--space-4);min-width:0;display:grid}@media (width<=900px){.layout{grid-template-columns:minmax(0,1fr)}}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);min-width:0;padding:var(--space-5);box-shadow:var(--shadow-soft);animation:rise .45s var(--ease) both;position:relative}.card:before{content:"";top:-1px;left:var(--space-6);right:var(--space-6);background:linear-gradient(90deg, transparent, var(--gold), transparent);opacity:.55;pointer-events:none;border-radius:2px;height:2px;position:absolute}.column>.card:nth-child(2){animation-delay:60ms}.column>.card:nth-child(3){animation-delay:.12s}.column>.card:nth-child(4){animation-delay:.18s}.card h2{font-family:var(--font-display);color:var(--wine-dark);margin-bottom:var(--space-4);align-items:center;gap:10px;font-size:1.45rem;font-weight:600;line-height:1.2;display:flex}.card h2:before{content:"";background:linear-gradient(var(--gold), var(--gold)) 50% 0 / 2px 100% no-repeat, linear-gradient(var(--gold), var(--gold)) 50% 32% / 10px 2px no-repeat;flex:none;width:10px;height:14px}.card h3{text-transform:uppercase;letter-spacing:.1em;color:var(--gold-text);margin:var(--space-5) 0 var(--space-2);font-size:.75rem;font-weight:700}@media (width<=560px){.card{padding:var(--space-4);border-radius:var(--radius)}.card:before{left:var(--space-5);right:var(--space-5)}}@keyframes rise{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes fade{0%{opacity:0}to{opacity:1}}.muted{color:var(--muted);font-size:.85rem}.row{gap:var(--space-2);flex-wrap:wrap;align-items:center;display:flex}.btn{min-height:var(--control-height);border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);padding:0 var(--space-4);cursor:pointer;transition:background .18s, border-color .18s, color .18s, box-shadow .18s, transform .18s var(--ease);border-radius:10px;justify-content:center;align-items:center;gap:6px;font-size:.9rem;font-weight:500;display:inline-flex}.btn:hover:not(:disabled){border-color:var(--wine);color:var(--wine)}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-primary{background:linear-gradient(180deg, #ffffff14, #00000014), var(--wine-fill);border-color:var(--wine-fill);color:var(--on-wine);font-weight:600;box-shadow:inset 0 1px #ffffff26,0 6px 14px -8px #5a1424a0}.btn-primary:hover:not(:disabled){background:var(--wine-fill-hover);border-color:var(--wine-fill-hover);color:var(--on-wine)}.btn-primary.is-done{background:var(--ok);border-color:var(--ok);color:var(--surface);animation:fade .25s var(--ease)}.btn-ghost{color:var(--wine);background:0 0;border-color:#0000}.btn-ghost:hover:not(:disabled){background:var(--wine-soft);border-color:#0000}.btn-selected,.btn-selected:hover:not(:disabled){background:var(--wine-fill);color:var(--on-wine);border-color:var(--wine-fill)}.btn-wide{width:100%;min-height:46px;font-size:.95rem}.upload-card{padding:var(--space-3)}.dropzone{justify-items:center;gap:var(--space-2);text-align:center;padding:var(--space-6) var(--space-4) var(--space-5);border:1.5px dashed var(--line-strong);border-radius:50% 50% var(--radius) var(--radius) / 110px 110px var(--radius) var(--radius);background:radial-gradient(120% 70% at 50% 0%, var(--sky), transparent 70%), var(--paper);transition:border-color .2s,background-color .2s,box-shadow .2s;display:grid}.dropzone.is-dragging{border-color:var(--wine);box-shadow:0 0 0 4px var(--gold-soft) inset;background-color:var(--wine-soft);border-style:solid}.dropzone-icon{width:44px;height:53px;color:var(--wine)}.dropzone-title{font-family:var(--font-display);color:var(--wine-dark);margin-top:var(--space-2);text-wrap:balance;font-size:1.5rem;font-weight:600;line-height:1.2}.dropzone-or{color:var(--muted);text-transform:uppercase;letter-spacing:.12em;font-size:.8rem}.dropzone-button{min-width:180px;min-height:44px}.dropzone-hint{margin-top:var(--space-2);color:var(--muted);max-width:34ch;font-size:.85rem}.file-bar{gap:var(--space-3);padding:var(--space-4);flex-wrap:wrap;justify-content:space-between;align-items:center;display:flex}.file-info{gap:var(--space-3);flex:220px;align-items:center;min-width:0;display:flex}.file-info>div{min-width:0;display:grid}.file-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.file-icon{border-radius:var(--radius);background:var(--wine-soft);width:44px;height:44px;color:var(--wine);border:1px solid var(--line);flex:none;place-items:center;display:grid}.file-icon svg{width:24px;height:24px}.file-bar .alert{flex-basis:100%}.alert{border-radius:var(--radius-sm);padding:10px var(--space-3);margin-top:var(--space-3);animation:fade .3s var(--ease);border:1px solid #0000;font-size:.9rem}.alert-error{background:var(--err-bg);color:var(--err);border-color:color-mix(in srgb, var(--err-edge) 40%, transparent)}.alert-warn{background:var(--warn-bg);color:var(--warn);border-color:color-mix(in srgb, var(--warn-edge) 45%, transparent)}.alert-ok{background:var(--ok-bg);color:var(--ok);border-color:color-mix(in srgb, var(--ok) 25%, transparent)}.alert .notes{margin-top:var(--space-1);white-space:pre-line;display:block}.editor>.alert{margin:0 0 var(--space-4)}.status{margin-top:var(--space-3);color:var(--muted);gap:var(--space-2);animation:fade .3s var(--ease);align-items:center;font-size:.9rem;display:flex}.spinner{border:2px solid var(--line-strong);border-top-color:var(--wine);border-radius:50%;flex:none;width:14px;height:14px;margin-left:6px;animation:.8s linear infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.spinner{animation:2.4s linear infinite spin!important}}.field{margin-bottom:var(--space-4);gap:6px;font-size:.85rem;display:grid}.field>span{color:var(--wine-dark);font-weight:600}.field input,.field textarea,.field select,.key-picker select,.palette-input{width:100%;min-height:var(--control-height);border:1px solid var(--line-strong);padding:var(--space-2) var(--space-3);background:var(--paper);border-radius:10px;font-size:.95rem;transition:border-color .18s,box-shadow .18s}.field input:hover,.field textarea:hover,.field select:hover{border-color:var(--gold)}.field input:focus,.field textarea:focus,.field select:focus,.key-picker select:focus,.palette-input:focus{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft);outline:none}.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible,.key-picker select:focus-visible,.palette-input:focus-visible{outline:2px solid var(--gold);outline-offset:1px}.field select,.key-picker select{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23b48a3c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-position:right 12px center;background-repeat:no-repeat;background-size:12px 8px;padding-right:36px}.field small{line-height:1.45}.fields{column-gap:var(--space-3);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.fields .field:first-child,.fields .field:nth-last-child(-n+2):nth-child(n+4){grid-column:1/-1}@media (width<=560px){.fields{grid-template-columns:minmax(0,1fr)}}.selector-row{justify-content:space-between;gap:var(--space-3);padding:var(--space-3) 0;border-top:1px solid var(--line);align-items:center;display:flex}.selector-row:first-of-type{border-top:0;padding-top:0}.selector-row:last-child{padding-bottom:0}.selector-row>div{display:grid}.selector-row .btn{flex:none;min-width:156px}.viewer-toolbar{justify-content:space-between;align-items:center;gap:var(--space-3);margin-bottom:var(--space-3);font-size:.95rem;display:flex}.viewer-toolbar .btn{width:var(--control-height);border-radius:50%;padding:0;font-size:1.3rem;line-height:1}.viewer-page{border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:0 1px 0 var(--line), 0 12px 24px -18px #5a142470;background:#fff;overflow:hidden}.thumbs{gap:var(--space-2);margin-top:var(--space-4);grid-template-columns:repeat(auto-fill,minmax(72px,1fr));display:grid}.thumb{border:2px solid var(--line);border-radius:var(--radius-sm);cursor:pointer;transition:border-color .18s, transform .18s var(--ease), box-shadow .18s;background:#fff;padding:0;position:relative;overflow:hidden}.thumb:hover{box-shadow:var(--shadow-soft);transform:translateY(-2px)}.thumb.is-assigned{border-color:var(--gold)}.thumb.is-current,.thumb.is-current.is-assigned{border-color:var(--wine-fill);box-shadow:0 0 0 3px var(--wine-soft)}.thumb canvas{display:block}.thumb-number{color:#fff;text-align:center;background:#2b1c20d0;border-radius:6px;min-width:18px;padding:0 5px;font-size:.7rem;font-weight:600;position:absolute;top:4px;left:4px}.thumb.is-current .thumb-number{background:var(--wine-fill)}.thumb-tag{color:#fff;text-align:center;background:#845f1ce8;padding:2px 3px;font-size:.62rem;font-weight:600;line-height:1.2;position:absolute;bottom:0;left:0;right:0}.results{padding-top:var(--space-4)}.tabs{gap:var(--space-1);padding:var(--space-1);margin-bottom:var(--space-5);background:var(--surface-sunk);border:1px solid var(--line);border-radius:14px;grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.tab{min-height:44px;padding:0 var(--space-4);cursor:pointer;font-family:var(--font-display);color:var(--muted);background:0 0;border:0;border-radius:10px;justify-content:center;align-items:center;font-size:1.2rem;font-weight:600;transition:background .2s,color .2s,box-shadow .2s;display:inline-flex}.tab:hover{color:var(--wine)}.tab.is-active{background:var(--surface);color:var(--wine-dark);box-shadow:0 1px 2px #5a142418, 0 4px 12px -6px #5a142440, inset 0 -2px 0 var(--gold)}.tab:focus-visible{outline-offset:-2px}[role=tabpanel]{animation:fade .3s var(--ease)}.empty-state{justify-items:center;gap:var(--space-1);text-align:center;padding:var(--space-4) var(--space-4) var(--space-5);margin-bottom:var(--space-5);border-radius:var(--radius);background:radial-gradient(100% 90% at 50% 0%, var(--sky), transparent 75%);border:1px solid var(--line);display:grid}.empty-state .muted{max-width:46ch}.empty-state-icon{width:32px;height:38px;color:var(--wine)}.empty-state-title{font-family:var(--font-display);color:var(--wine-dark);margin-top:var(--space-2);text-wrap:balance;font-size:1.3rem;font-weight:600}.editor:has(>.empty-state) :is(.preview-head,.preview){display:none}.sheet{font-family:var(--font-mono);resize:vertical;background:var(--paper);min-height:240px;font-size:.88rem;line-height:1.7}.chord-tool{gap:var(--space-2);padding:var(--space-3);border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-sunk);grid-template-columns:120px minmax(0,1fr);align-items:end;display:grid}.chord-tool .field{margin:0}.chord-tool-secondary{gap:var(--space-2);grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.chord-tool small{grid-column:1/-1}.btn-quiet{color:var(--wine);border-color:var(--line-strong);background:0 0;font-size:.85rem}@media (width<=560px){.chord-tool,.chord-tool-secondary{grid-template-columns:minmax(0,1fr)}.chord-field{width:100%}}.preview-head{justify-content:space-between;align-items:center;gap:var(--space-3);margin:var(--space-5) 0 var(--space-3);display:flex}.preview-head h3{margin:0}.preview{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-4);position:relative;overflow-x:auto;box-shadow:inset 0 1px #ffffff80}.preview-gap{height:var(--space-3)}.preview-line{white-space:nowrap;padding:2px var(--space-2);border-radius:6px;width:max-content;min-width:100%}.preview-line:is(.needs-review,.has-problem)+.preview-line:is(.needs-review,.has-problem){margin-top:2px}.preview-line.needs-review{background:var(--warn-bg);box-shadow:inset 3px 0 0 var(--warn-edge)}.preview-line.has-problem{background:var(--err-bg);box-shadow:inset 3px 0 0 var(--err-edge)}.seg{vertical-align:bottom;flex-direction:column;display:inline-flex}.chord{color:var(--wine);min-height:1.3em;padding-right:6px;font-size:.85rem;font-weight:700}.chord-bare{color:var(--err)}.lyric{white-space:pre;min-height:1.4em;color:var(--ink);font-size:1rem}.position-tool{gap:var(--space-3);margin-bottom:var(--space-3);padding:var(--space-3) var(--space-4);border:1px dashed var(--gold);border-radius:var(--radius);background:var(--gold-soft);animation:fade .25s var(--ease);display:grid}.palette{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.palette-input{width:96px;min-height:34px;padding:var(--space-1) var(--space-2)}.chip{border:1px solid var(--wine);background:var(--paper);color:var(--wine);cursor:pointer;border-radius:6px;margin-right:2px;padding:0 5px;font-size:.78rem;font-weight:700;line-height:1.5;transition:background .15s,color .15s}.chip:hover{background:var(--wine-soft)}.chip-big{min-height:34px;padding:0 var(--space-3);border-radius:999px;font-size:.95rem}.chip.is-selected,.chip.is-selected:hover{background:var(--wine-fill);border-color:var(--wine-fill);color:var(--on-wine)}.preview.is-editable .preview-line{padding:var(--space-1) 6px}.cell-wrap{vertical-align:bottom;flex-direction:column;display:inline-flex}.chip-row{align-items:flex-end;min-height:1.6em;display:flex}.cell{cursor:pointer;text-align:center;white-space:pre;background:0 0;border:0;border-radius:3px;min-width:.3em;padding:1px 0;font-size:1rem}.cell:hover{box-shadow:-2px 0 0 var(--gold);background:#b48a3c40}.capo{margin-top:var(--space-2)}.key-picker{gap:var(--space-2) var(--space-3);margin:var(--space-1) 0 var(--space-3);flex-wrap:wrap;align-items:center;display:flex}.key-picker>span:first-child{color:var(--wine-dark);font-size:.85rem;font-weight:600}.key-picker select{width:auto;min-width:84px;font-weight:700}.capo-list{margin:var(--space-3) 0 0;gap:var(--space-2);padding:0;list-style:none;display:grid}.capo-card{justify-content:space-between;gap:var(--space-3);padding:var(--space-3) var(--space-4);border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);box-shadow:inset 3px 0 0 var(--gold);flex-wrap:wrap;align-items:center;transition:border-color .18s,box-shadow .18s;display:flex}.capo-card:hover{border-color:var(--line-strong)}.capo-card>div:first-child{flex:260px;gap:2px;min-width:0;display:grid}.capo-card>.row{flex:none}.capo-card .btn-primary:not(.is-done){background:var(--paper);color:var(--wine);border-color:var(--wine);box-shadow:none}.capo-card .btn-primary:not(.is-done):hover:not(:disabled){background:var(--wine-fill);color:var(--on-wine)}.capo-card.is-current{border-color:var(--wine);background:var(--wine-soft);box-shadow:inset 3px 0 0 var(--wine-fill)}.link{color:inherit;text-underline-offset:3px;cursor:pointer;background:0 0;border:0;padding:0;font-weight:600;text-decoration:underline}.actions{gap:var(--space-2);margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px solid var(--line);flex-wrap:wrap;align-items:center;display:flex}.app-footer{margin-top:var(--space-7);text-align:center;color:var(--muted);font-size:.85rem}.app-footer .divider{margin-bottom:var(--space-3)}.app-footer p{font-family:var(--font-display);text-wrap:balance;font-size:1.05rem;font-style:italic}@media (width<=560px){.selector-row{flex-wrap:wrap}.selector-row .btn{width:100%}.actions{grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.actions>:first-child{grid-column:1/-1}.capo-card>.row{width:100%}.capo-card>.row .btn{flex:auto}.tab{padding:0 var(--space-2);font-size:1.05rem}}
