/* Songstead shares Imvault's quiet blue palette and simple panels. */
:root { color-scheme: light dark; --bg: light-dark(#f3f5f9,#101216); --panel: light-dark(#fff,#171a21); --soft: light-dark(#e9eef5,#1e222b); --border: light-dark(#ccd4e0,#2a2f3a); --text: light-dark(#202b3d,#e6e9ef); --muted: light-dark(#596579,#a5afbf); --accent: light-dark(#245eb6,#8ab8ff); --danger: light-dark(#a82c3b,#ff929c); }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:15px/1.55 ui-sans-serif,system-ui,sans-serif; min-height:100vh; display:flex; flex-direction:column; }
a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; }
button,input,select,textarea { font:inherit; } button { cursor:pointer; }
input,select,textarea { display:block; width:100%; background:var(--panel); color:var(--text); border:1px solid var(--border); border-radius:7px; padding:.65rem .75rem; margin-top:.35rem; }
textarea { resize:vertical; } label { font-weight:600; } input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible,button:focus-visible,summary:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
h1 { overflow-wrap:anywhere; font-size:clamp(1.7rem,4vw,2.5rem); line-height:1.2; letter-spacing:-.035em; margin:.4rem 0 .8rem; } h2 { font-size:1.15rem; margin:0 0 .6rem; } p { margin:.5rem 0 1rem; }
.topbar { display:flex; flex-wrap:wrap; align-items:center; gap:1rem; padding:.7rem max(1.25rem,calc((100vw - 1180px)/2)); border-bottom:1px solid var(--border); background:var(--panel); }
.brand { display:flex; align-items:center; gap:.5rem; font-weight:750; font-size:1.15rem; color:var(--text); } .brand img { object-fit:contain; }
.topbar nav { display:flex; flex-wrap:wrap; align-items:center; gap:1rem; margin-left:auto; } .topbar form { margin:0; } .topbar select { width:auto; margin:0; padding:.3rem; }
.theme-picker[hidden] { display:none; } .theme-picker { font-size:.8rem; }
.page { width:100%; max-width:1180px; padding:2rem 1.25rem 3rem; margin:0 auto; flex:1; }
.foot { max-width:1180px; width:100%; margin:auto; padding:1rem 1.25rem 2rem; display:flex; flex-wrap:wrap; gap:1.2rem; justify-content:space-between; font-size:.82rem; color:var(--muted); }
.button, button { display:inline-block; background:var(--soft); color:var(--text); padding:.5rem .9rem; border:1px solid var(--border); border-radius:8px; font-weight:600; text-align:center; }
.button:hover, button:hover { text-decoration:none; filter:brightness(.95); } .button.primary { background:var(--accent); border-color:var(--accent); color:light-dark(#fff,#0b1220); }
.link { background:none; border:0; padding:0; color:var(--accent); }
.panel { background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:1.25rem; box-shadow:0 2px 12px light-dark(#202b3d08,#0002); }
.stack { display:flex; flex-direction:column; gap:1rem; } .muted { color:var(--muted); } .eyebrow { text-transform:uppercase; font-weight:700; color:var(--muted); font-size:.72rem; letter-spacing:.1em; } .intro { font-size:1.15rem; max-width:48ch; }
.welcome { display:grid; grid-template-columns:1.2fr 1fr; gap:4rem; max-width:900px; margin:2rem auto; align-items:center; } .mascot { display:block; object-fit:contain; margin:1rem auto; }
.page-head { display:flex; gap:2rem; align-items:center; justify-content:space-between; margin-bottom:1.5rem; }
.filters { display:flex; flex-wrap:wrap; align-items:end; gap:1rem; margin-bottom:1.5rem; } .filters label { min-width:180px; }
.recommendations { display:flex; flex-direction:column; gap:1rem; } .recommendation { display:flex; align-items:start; gap:1.25rem; } .artwork { flex:0 0 160px; background:var(--soft); border-radius:8px; min-height:120px; display:grid; place-items:center; overflow:hidden; } .artwork img { display:block; object-fit:cover; } .provider { color:var(--muted); }
.recommendation-copy { min-width:0; } .recommendation-copy p { margin-bottom:.6rem; } .recommendation h2 { overflow-wrap:anywhere; } .user-text { white-space:pre-wrap; overflow-wrap:anywhere; }
.badge { background:var(--soft); border:1px solid var(--border); color:var(--muted); border-radius:20px; padding:.1rem .6rem; font-size:.78rem; text-transform:capitalize; }
.empty { text-align:center; border:1px dashed var(--border); border-radius:10px; padding:2rem; color:var(--muted); } .empty img { object-fit:contain; }
.pagination { display:flex; justify-content:space-between; gap:2rem; margin-top:1.5rem; } .compose { max-width:650px; margin:auto; } .detail { margin:1rem 0 1.5rem; } .original-url { overflow-wrap:anywhere; font-size:.85rem; }
blockquote { border-left:3px solid var(--accent); margin:1rem 0; padding:.5rem 1rem; } .detail-columns { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:1.5rem; } .comments { list-style:none; padding:0; } .comments li { padding:.7rem 0; border-bottom:1px solid var(--border); }
.embed summary { cursor:pointer; color:var(--accent); } iframe { display:block; width:100%; aspect-ratio:16/9; border:0; margin-top:1rem; }
.error { padding:.8rem 1rem; border:1px solid var(--danger); color:var(--danger); border-radius:8px; } .skip { position:absolute; top:-80px; left:1rem; z-index:100; background:var(--panel); padding:.7rem; } .skip:focus { top:1rem; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media(max-width:760px) { .welcome,.detail-columns { grid-template-columns:1fr; gap:1.5rem; } .welcome { margin:0; } .welcome .mascot { width:150px; height:150px; } .topbar nav { width:100%; gap:.75rem; } .page-head { align-items:start; flex-direction:column; gap:.5rem; } .recommendation { gap:.8rem; } .artwork { flex-basis:90px; min-height:75px; } .artwork img { width:90px; height:75px; } .filters { flex-wrap:wrap; } }

input[type="checkbox"] { display:inline-block; width:auto; padding:0; margin:0 .5rem 0 0; accent-color:var(--accent); }
fieldset { border:1px solid var(--border); border-radius:8px; padding:1rem; display:flex; flex-direction:column; gap:.5rem; }
.page > .panel + .panel { margin-top:1rem; }
.recommendation-copy + .recommendation-copy { border-top:1px solid var(--border); margin-top:1rem; padding-top:1rem; }
.timeline { margin:1rem 0; padding:1rem 0; border-top:1px solid var(--border); }
.timeline svg { width:100%; height:auto; display:block; margin-top:1rem; }
.timeline nav { display:flex; flex-wrap:wrap; gap:.7rem; margin:1rem 0; }
section.panel > p > a { overflow-wrap:anywhere; }