/* Murphy's Song Generator — 60 ink / 30 panel / 10 amber */
:root{
  --bg:#0B0C10; --bg-2:#12141A; --panel:#16181F; --panel-2:#1C1F2A;
  --ink:#F5F1E8; --muted:#9A9386; --line:rgba(245,241,232,.1);
  --accent:#E8B84A; --accent-ink:#1A1406; --ok:#7ECF9A;
  --shadow:0 18px 50px rgba(0,0,0,.35);
  --r:14px; --max:1120px;
}
[data-theme="light"]{
  --bg:#F4EFE6; --bg-2:#EBE4D7; --panel:#FFFBF4; --panel-2:#F3EBDD;
  --ink:#16140F; --muted:#6F685C; --line:rgba(22,20,15,.12);
  --accent:#C48A12; --accent-ink:#FFF8E8; --ok:#1F7A48;
  --shadow:0 16px 40px rgba(40,30,10,.08);
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);
  font:16px/1.55 Outfit,system-ui,sans-serif;}
body{background:
  radial-gradient(900px 420px at 80% -10%, rgba(232,184,74,.12), transparent 50%),
  var(--bg);}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.wrap{width:min(var(--max), calc(100% - 32px));margin-inline:auto}
.site-header,.site-footer{border-bottom:1px solid var(--line)}
.site-footer{border-bottom:0;border-top:1px solid var(--line);margin-top:64px}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0}
.brand{font-family:Fraunces,Georgia,serif;font-weight:600;font-size:1.05rem;letter-spacing:-.02em}
.brand span{color:var(--accent)}
.tools{display:flex;gap:8px}
button,.btn{
  font:650 15px/1 Outfit,system-ui,sans-serif;border:0;cursor:pointer;
  border-radius:999px;padding:12px 18px;background:var(--panel-2);color:var(--ink);
  transition:transform .15s ease, background .15s ease, box-shadow .15s ease;
}
button:hover,.btn:hover{transform:translateY(-1px)}
button:active,.btn:active{transform:translateY(0)}
.btn-primary{
  background:var(--accent);color:var(--accent-ink);
  box-shadow:0 10px 30px rgba(232,184,74,.25);padding:16px 28px;font-size:1.05rem;
}
[data-theme="light"] .btn-primary{box-shadow:0 10px 24px rgba(196,138,18,.22)}
.hero{padding:56px 0 24px;text-align:center}
.kicker{color:var(--accent);letter-spacing:.16em;text-transform:uppercase;font-size:.72rem;font-weight:700}
h1{font-family:Fraunces,Georgia,serif;font-weight:560;font-style:italic;font-size:clamp(2.1rem,6vw,4.4rem);
  line-height:.95;letter-spacing:-.03em;margin:.35em 0 .3em;max-width:16ch;margin-inline:auto}
.lede{color:var(--muted);max-width:38ch;margin:0 auto 28px;font-size:1.05rem}
.studio{display:grid;gap:20px;padding-bottom:40px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:22px;box-shadow:var(--shadow)}
.controls{display:grid;gap:12px;max-width:520px;margin:0 auto}
.fields{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
@media(max-width:700px){.fields{grid-template-columns:1fr}}
label{display:block;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
select,input{
  width:100%;background:var(--bg-2);color:var(--ink);border:1px solid var(--line);
  border-radius:12px;padding:12px 12px;font:500 15px Outfit,system-ui,sans-serif;
}
.cta-row{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.fine{background:transparent;color:var(--muted);padding:8px;font-weight:600}
.fine[aria-expanded="true"]{color:var(--ink)}
.adv{display:none;margin-top:8px;padding-top:14px;border-top:1px solid var(--line)}
.adv.open{display:grid;gap:10px}
.adv-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:700px){.adv-grid{grid-template-columns:1fr}}
.downloads{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media(max-width:700px){.downloads{grid-template-columns:1fr}}
.core{margin-top:14px;padding:14px;border-radius:12px;background:var(--bg-2);color:var(--ink);font-size:.92rem}
.out{margin:0;white-space:pre-wrap;font:13px/1.5 ui-monospace,Menlo,monospace;color:var(--muted)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;text-align:center;padding:10px 0 30px}
.stats b{display:block;font-family:Fraunces,serif;font-size:1.4rem}
.stats span{color:var(--muted);font-size:.8rem}
.site-footer .bar{align-items:flex-start;padding:28px 0;color:var(--muted);font-size:.9rem}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}

.tip{position:relative}
[data-tip]{position:relative}
[data-tip]:hover::after,[data-tip]:focus-visible::after{
  content:attr(data-tip);
  position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);
  width:max-content;max-width:240px;padding:8px 10px;border-radius:10px;
  background:var(--ink);color:var(--bg);font:600 12px/1.35 Outfit,sans-serif;
  z-index:20;pointer-events:none;text-align:left;white-space:normal;
}
.note{color:var(--muted);font-size:.92rem;margin:10px 0 0;text-align:center}
.guide{padding:48px 0 80px}
.guide h1{max-width:20ch;margin-left:0;text-align:left}
.guide h2{font-family:Fraunces,serif;font-weight:560;font-size:1.6rem;margin:2em 0 .4em}
.guide h3{font-size:1.05rem;margin:1.4em 0 .3em}
.guide p,.guide li{color:var(--muted);max-width:62ch}
.guide ul{padding-left:1.2em}
.guide a{color:var(--accent)}
@media(prefers-reduced-motion:reduce){
  [data-tip]:hover::after{transition:none}
}

.part{margin-top:8px}
.part-h{display:flex;align-items:center;gap:8px;margin:6px 0;font-weight:650}
.part-h .rep{padding:6px 10px;font-size:12px}
.replbl{color:var(--muted);font-weight:500}
.chords{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
@media(max-width:700px){.chords{grid-template-columns:1fr 1fr}}
.cta-row + .btn-primary, form > .btn-primary{margin-top:12px}