:root{--bg-top:#e7eefb;--bg:#fbf8f0;--card:#fff;--ink:#1b1a17;--muted:#747268;--blom:#2f5aa8;--blom-deep:#234a8e;--blom-soft:#e9effa;--sol:#eab53f;--sol-ink:#5a4408;--line:#ece7da;--radius:18px;--radius-sm:12px;--shadow-sm:0 1px 2px #1b1a170d;--shadow-md:0 2px 6px #1b1a170d, 0 14px 30px -16px #2f5aa847;--maxw:680px}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{color:var(--ink);background:var(--bg);background-image:linear-gradient(180deg, var(--bg-top) 0%, var(--bg) 240px);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;background-repeat:no-repeat;margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif}a{color:inherit;text-decoration:none}button{cursor:pointer;color:inherit;background:0 0;border:none;font-family:inherit}.page{max-width:var(--maxw);min-height:100dvh;margin:0 auto;padding:0 1rem}.masthead{text-align:center;padding:clamp(2rem,7vw,3rem) 1rem 1.75rem;position:relative}.garland{filter:drop-shadow(0 6px 10px #2f5aa829);justify-content:center;align-items:flex-end;gap:clamp(.4rem,3vw,1.1rem);margin-bottom:.6rem;display:flex}.bloom{transform-origin:50% 100%;will-change:transform;width:clamp(26px,8vw,42px);height:clamp(26px,8vw,42px);animation:4.5s ease-in-out infinite sway}.bloom--lead{width:clamp(38px,11vw,58px);height:clamp(38px,11vw,58px)}.bloom--1{animation-delay:-.2s}.bloom--2{animation-delay:-1.1s;transform:rotate(-8deg)}.bloom--3{animation-delay:-2.4s}.bloom--4{animation-duration:5.5s;animation-delay:-.7s}.bloom--5{animation-delay:-1.8s}.bloom--6{animation-delay:-3.1s;transform:rotate(7deg)}.bloom--7{animation-delay:-.5s}.bloom--1,.bloom--7{margin-bottom:.7rem}.bloom--2,.bloom--6{margin-bottom:.3rem}.wordmark{letter-spacing:-.03em;color:var(--ink);-webkit-hyphens:manual;hyphens:manual;margin:0;font-family:Bricolage Grotesque,Inter,sans-serif;font-size:clamp(2.4rem,12vw,3.4rem);font-weight:800;line-height:.98}.tagline{max-width:22rem;color:var(--muted);margin:.85rem auto 0;font-size:1.05rem;line-height:1.45}.songlist{flex-direction:column;gap:.6rem;margin:0;padding:0;list-style:none;display:flex}.song-row{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);min-height:64px;box-shadow:var(--shadow-sm);align-items:center;gap:.9rem;padding:.95rem 1.05rem;transition:transform .14s,box-shadow .14s,border-color .14s;display:flex}.song-row:active{transform:scale(.99)}@media (hover:hover){.song-row:hover{box-shadow:var(--shadow-md);border-color:#0000;transform:translateY(-1px)}}.song-index{background:var(--blom-soft);width:34px;height:34px;color:var(--blom);border-radius:50%;flex:none;justify-content:center;align-items:center;font-size:.95rem;font-weight:700;display:flex}.song-text{flex-direction:column;flex:1;gap:.3rem;min-width:0;display:flex}.song-title{letter-spacing:-.01em;font-family:Bricolage Grotesque,Inter,sans-serif;font-size:1.22rem;font-weight:700;line-height:1.15}.song-cat{letter-spacing:.02em;color:var(--blom);background:var(--blom-soft);border-radius:999px;align-self:flex-start;align-items:center;gap:.3rem;padding:.18rem .5rem;font-size:.74rem;font-weight:600;display:inline-flex}.song-cat:before{content:"♪";font-size:.8em}.chev{color:#c3bfb2;flex:none;font-size:1.5rem;line-height:1}.cat-links{padding:2rem 0 0}.cat-links-head{letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 .3rem .7rem;font-size:.78rem;font-weight:700}.cat-link{border-radius:var(--radius);border:1px solid var(--line);min-height:60px;box-shadow:var(--shadow-sm);background:linear-gradient(135deg,#fff,#fcfaf4);align-items:center;gap:.75rem;margin-bottom:.6rem;padding:1.05rem 1.1rem;transition:box-shadow .14s,transform .14s;display:flex}.cat-link:active{transform:scale(.99)}@media (hover:hover){.cat-link:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}}.cat-link-name{flex:1;font-family:Bricolage Grotesque,Inter,sans-serif;font-size:1.18rem;font-weight:700}.cat-link-count{color:var(--sol-ink);background:var(--sol);border-radius:999px;padding:.2rem .55rem;font-size:.8rem;font-weight:700}.cat-h1{letter-spacing:-.02em;margin:1.2rem .3rem 1rem;font-family:Bricolage Grotesque,Inter,sans-serif;font-size:clamp(1.7rem,7vw,2.3rem);font-weight:800}.foot{color:var(--muted);text-align:center;padding:2rem .3rem 3rem;font-size:.85rem}.songhead{z-index:10;-webkit-backdrop-filter:saturate(1.3)blur(10px);backdrop-filter:saturate(1.3)blur(10px);border-bottom:1px solid var(--line);background:#ffffffd1;margin:0 -1rem;padding:0 1rem;position:sticky;top:0}.topbar{justify-content:space-between;align-items:center;gap:1rem;padding:.8rem 0;display:flex}.back-btn{color:var(--blom);background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-sm);border-radius:999px;align-items:center;gap:.3rem;padding:.5rem .95rem .5rem .75rem;font-size:.95rem;font-weight:600;display:inline-flex}.back-btn:active{background:var(--blom-soft)}.back-arrow{margin-top:-2px;font-size:1.3rem;line-height:1}.controls{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:.7rem 1rem;padding:0 0 .85rem;display:flex}.toggle{align-items:center;gap:.6rem;padding:.35rem 0;font-size:1rem;font-weight:700;display:inline-flex}.toggle-track{background:#d9d4c6;border-radius:999px;flex:none;width:48px;height:28px;transition:background .2s;position:relative}.toggle-knob{background:#fff;border-radius:50%;width:22px;height:22px;transition:transform .2s;position:absolute;top:3px;left:3px;box-shadow:0 1px 3px #0000004d}.toggle[aria-checked=true] .toggle-track{background:var(--blom)}.toggle[aria-checked=true] .toggle-knob{transform:translate(20px)}.transpose{align-items:center;gap:.4rem;display:inline-flex}.transpose>button{border:1px solid var(--line);background:var(--card);width:42px;height:42px;box-shadow:var(--shadow-sm);color:var(--blom);border-radius:12px;justify-content:center;align-items:center;font-size:1.4rem;font-weight:600;line-height:1;display:inline-flex}.transpose>button:active{background:var(--blom-soft)}.keypill{text-align:center;background:var(--sol);min-width:50px;color:var(--sol-ink);box-shadow:var(--shadow-sm);border-radius:12px;padding:.4rem .65rem;font-size:1.1rem;font-weight:800}.reset{color:var(--muted);margin-left:.2rem;padding:.5rem .4rem;font-size:.85rem;font-weight:600}.songview{padding:1.4rem 0 4rem}.song-h1{letter-spacing:-.02em;margin:0 0 .4rem;font-family:Bricolage Grotesque,Inter,sans-serif;font-size:clamp(1.8rem,7.5vw,2.4rem);font-weight:800;line-height:1.04}.song-melody{color:var(--muted);margin:0 0 1.3rem;font-size:.95rem;font-weight:600}.song-melody:before{content:"♪ ";color:var(--blom)}.sheet{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:1.4rem 1.25rem}.sheet .title,.sheet .subtitle,.sheet .metadata{display:none}.sheet .paragraph{margin:0 0 1.5rem}.sheet .paragraph:last-child{margin-bottom:0}.sheet .row{flex-wrap:wrap;align-items:flex-end;display:flex}.sheet .column{flex-direction:column;display:flex}.sheet .chord{color:var(--blom);white-space:pre;min-height:1.35em;padding-right:.12em;font-size:1rem;font-weight:700;line-height:1.2}.sheet .lyrics{white-space:pre;font-size:1.4rem;line-height:1.45}.sheet.hide-chords .chord{display:none}.sheet.hide-chords .lyrics{line-height:1.75}@media (width<=360px){.sheet .lyrics{font-size:1.25rem}}.empty{text-align:center;color:var(--muted);padding:3rem 1rem}.btn{background:var(--blom);color:#fff;box-shadow:var(--shadow-md);border-radius:12px;margin-top:1rem;padding:.75rem 1.3rem;font-weight:600;display:inline-block}@keyframes pop{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}@keyframes sway{0%,to{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}:focus-visible{outline:3px solid var(--blom);outline-offset:2px;border-radius:8px}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}
