:root{
  --ink:#201812; --paper:#f3eadb; --paper2:#fff9ed; --muted:#7c6a58; --line:#dac8af; --accent:#b63f1f; --accent2:#0e6b5f; --shadow:0 24px 80px rgba(54,37,18,.2); --sheetSize:18px;
}
*{box-sizing:border-box} html,body,#app{height:100%;margin:0} body{font-family:"Literata", Georgia, serif;background:radial-gradient(circle at 20% 0,#fff7df 0 28%,transparent 29%),linear-gradient(135deg,#ead8b9,#f8f0df 45%,#dfc49c);color:var(--ink);overflow:hidden}
body.dark{--ink:#f8ecd2;--paper:#15120f;--paper2:#201912;--muted:#c5ad8c;--line:#403324;--accent:#ffb14a;--accent2:#54d6c7;background:radial-gradient(circle at 70% -10%,#43311e 0 20%,transparent 40%),linear-gradient(135deg,#070605,#1f160f)}
button,input{font:inherit} button{border:1px solid var(--line);background:var(--paper2);color:var(--ink);border-radius:999px;padding:10px 14px;cursor:pointer;box-shadow:0 4px 18px rgba(0,0,0,.05)}button:hover{transform:translateY(-1px)}button.primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}button.active{background:var(--accent);color:#fff;border-color:var(--accent)}.hidden{display:none!important}
#app{display:grid;grid-template-columns:390px 1fr;gap:18px;padding:18px}.library{border:1px solid rgba(76,49,24,.18);background:rgba(255,250,240,.72);backdrop-filter:blur(18px);border-radius:34px;padding:22px;box-shadow:var(--shadow);min-height:0;display:flex;flex-direction:column}.brand{display:flex;gap:14px;align-items:center}.mark{width:52px;height:52px;border-radius:18px;background:var(--ink);color:var(--paper);display:grid;place-items:center;font-size:28px;transform:rotate(-7deg)}h1{font-family:"Fraunces",serif;font-size:30px;margin:0;letter-spacing:-.04em}.brand p{margin:4px 0 0;color:var(--muted);font-size:13px}.searchBox{display:block;margin:24px 0 14px}.searchBox span{font:700 11px/1 "IBM Plex Mono",monospace;color:var(--accent2);text-transform:uppercase;letter-spacing:.12em}.searchBox input{width:100%;margin-top:8px;border:1px solid var(--line);background:var(--paper2);color:var(--ink);border-radius:18px;padding:15px 16px;outline:none;font-size:16px}.songList{overflow:auto;padding-right:4px}.songCard{width:100%;text-align:left;border:1px solid transparent;background:transparent;box-shadow:none;border-radius:20px;padding:14px 12px;display:block}.songCard:hover,.songCard.selected{background:rgba(255,255,255,.45);border-color:var(--line)}.songCard strong{display:block;font-family:"Fraunces",serif;font-size:20px;line-height:1.05;letter-spacing:-.03em}.songCard span{display:block;margin-top:5px;color:var(--muted);font-size:13px}.stage{min-width:0;min-height:0;display:flex;flex-direction:column;border-radius:34px;overflow:hidden;border:1px solid rgba(76,49,24,.18);box-shadow:var(--shadow);background:linear-gradient(180deg,rgba(255,252,244,.85),rgba(248,235,211,.75))}.playerBar{height:74px;display:flex;align-items:center;gap:16px;padding:12px 18px;border-bottom:1px solid var(--line);background:rgba(255,252,244,.74);backdrop-filter:blur(16px)}.nowPlaying{min-width:0;flex:1}.nowPlaying strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nowPlaying span{display:block;color:var(--muted);font:12px "IBM Plex Mono",monospace}.controls{display:flex;gap:8px}.sheetWrap{overflow:auto;flex:1;padding:34px;scroll-behavior:smooth}.emptyState{height:100%;min-height:450px;border:1px dashed var(--line);border-radius:32px;display:grid;place-content:center;text-align:center;padding:30px;background:rgba(255,255,255,.28)}.emptyState .pick{font:700 12px "IBM Plex Mono";letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}.emptyState h2{font-family:"Fraunces";font-size:56px;line-height:.95;max-width:760px;margin:14px auto}.emptyState p{color:var(--muted);max-width:530px;margin:0 auto;font-size:18px}.sheet{max-width:980px;margin:0 auto 40vh;background:var(--paper2);border:1px solid var(--line);border-radius:28px;box-shadow:0 12px 60px rgba(52,34,15,.18);overflow:hidden}.sheetHead{padding:34px 40px 18px;border-bottom:1px solid var(--line);background:linear-gradient(135deg,rgba(182,63,31,.08),transparent)}.eyebrow{font:700 12px "IBM Plex Mono";text-transform:uppercase;letter-spacing:.16em;color:var(--accent2);margin:0 0 8px}.sheet h2{font-family:"Fraunces";font-size:62px;line-height:.9;letter-spacing:-.06em;margin:0}.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.chip{font:700 12px "IBM Plex Mono";border:1px solid var(--line);border-radius:999px;padding:7px 10px;color:var(--muted);background:rgba(255,255,255,.35)}.chordSheet{padding:30px 40px 60px;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:var(--sheetSize);line-height:1.42;white-space:pre-wrap;tab-size:4}.chordRow{display:block;position:relative;margin:.35em 0 .65em;white-space:pre;line-height:1.12}.chordLane{display:block;position:relative;height:1.15em;color:var(--accent);font-weight:800}.floatingChord{position:absolute;top:0;background:rgba(182,63,31,.08);border-radius:5px;padding:0 .12em;white-space:nowrap}.lyricLane{display:block;white-space:pre-wrap;color:var(--ink)}.inlineChord{color:var(--accent);font-weight:800;background:rgba(182,63,31,.08);border-radius:5px;padding:0 2px}.section{display:block;margin:28px 0 4px;font-family:"Fraunces";font-size:1.6em;color:var(--accent2);white-space:normal}.metaLine{color:var(--muted);font-style:italic}.sourceLine{display:block;margin-top:26px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:.85em}
@media(max-width:850px){body{overflow:auto}#app{height:auto;min-height:100%;display:block;padding:0}.library{position:fixed;inset:0;z-index:5;border-radius:0;transform:translateX(-102%);transition:.25s ease}.library.open{transform:none}.stage{min-height:100svh;border-radius:0;border:0}.playerBar{position:sticky;top:0;z-index:3;height:auto;min-height:70px;gap:10px;padding:10px;flex-wrap:wrap}.ghost{display:inline-block}.controls{gap:5px}.controls button{padding:9px 10px}.sheetWrap{padding:14px}.sheet{border-radius:22px}.sheetHead{padding:24px 22px 14px}.sheet h2{font-size:44px}.chordSheet{padding:20px 18px 50px;font-size:calc(var(--sheetSize) - 1px);line-height:1.48}.chordRow{margin:.25em 0 .55em}.emptyState{min-height:70svh}.emptyState h2{font-size:42px}.songList{padding-bottom:80px}}
@media(min-width:851px){.ghost{display:none}}