:root { color-scheme: dark; --ink:#f5f1e8; --muted:#d5d2c9; --panel:#171815; --line:#5b5f54; --acid:#d7ff3f; --orange:#ff6b35; --bg:#0d0e0c; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
* { box-sizing:border-box; }
html { background:var(--bg); }
body { margin:0; color:var(--ink); background:radial-gradient(circle at 85% 12%,#222813 0,transparent 23rem),var(--bg); min-height:100vh; }
button,input { font:inherit; }
button:disabled { cursor:wait; opacity:.65; }
button,a { -webkit-tap-highlight-color:transparent; }
.skip { position:absolute; left:1rem; top:-5rem; background:var(--acid); color:#111; padding:.75rem; z-index:5; }
.skip:focus { top:1rem; }
.topbar { height:72px; padding:0 clamp(1.25rem,5vw,5rem); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { color:var(--ink); text-decoration:none; font-weight:900; font-size:1.15rem; }
.brand span,.eyebrow { color:var(--acid); }
.demo-badge { color:var(--muted); border:1px solid var(--line); padding:.45rem .65rem; font-size:.75rem; letter-spacing:.1em; }
main { width:min(1240px,calc(100% - clamp(3rem,8vw,8rem))); margin:auto; }
.hero { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:center; align-content:center; gap:clamp(3rem,5vw,5rem); min-height:calc(100svh - 72px); padding:clamp(2.75rem,6vh,4.5rem) 0; }
.hero-copy { min-width:0; justify-self:center; }
.eyebrow { letter-spacing:.18em; font-weight:800; font-size:.78rem; margin:0 0 1.2rem; }
h1 { color:#dedbd2; font-family:ui-sans-serif,system-ui,sans-serif; font-size:clamp(4rem,5.4vw,5.5rem); line-height:.92; letter-spacing:-.04em; margin:0; }
h1 em { color:var(--acid); font-style:normal; }
.lead { color:var(--muted); max-width:34rem; font-family:ui-sans-serif,system-ui,sans-serif; font-size:1.05rem; line-height:1.7; margin:2rem 0 0; }
.hero form { min-width:0; width:100%; border:1px solid #737866; border-top:3px solid var(--acid); background:rgba(23,24,21,.94); padding:clamp(1.5rem,3vw,2.25rem); box-shadow:12px 12px 0 rgba(0,0,0,.32); }
form>label,legend { display:block; font-weight:800; margin-bottom:.8rem; }
.input-wrap { display:flex; align-items:center; gap:.8rem; background:#0d0e0c; border:2px solid #62655a; padding:0 1rem; }
.input-wrap:focus-within { outline:3px solid rgba(215,255,63,.38); outline-offset:3px; border-color:var(--acid); }
.input-wrap>span:first-child { color:var(--acid); }
input[type=text],#task { width:100%; padding:1.2rem 0; color:var(--ink); background:none; border:0; outline:0; min-width:0; }
#count { color:var(--muted); font-size:.875rem; white-space:nowrap; }
.error { color:#ff9b77; min-height:1.2rem; font-size:.85rem; }
fieldset { border:0; padding:1.4rem 0; margin:0; }
.genres { display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; }
.genres label { position:relative; }
.genres input { position:absolute; opacity:0; }
.genres span { display:flex; min-height:82px; flex-direction:column; justify-content:center; padding:1rem; border:1px solid var(--line); background:var(--panel); cursor:pointer; font-weight:800; }
.genres small { color:var(--muted); font-size:.8rem; line-height:1.35; margin-top:.45rem; font-weight:400; }
.genres input:checked+span { border-color:var(--acid); color:var(--acid); box-shadow:inset 0 -3px var(--acid); }
.genres input:focus-visible+span { outline:3px solid var(--acid); outline-offset:3px; }
.privacy { color:var(--muted); font-size:.875rem; line-height:1.55; }
.primary,.secondary,.ghost,.round { cursor:pointer; border:0; font-weight:900; }
.primary { margin-top:1rem; padding:1.1rem 1.4rem; background:var(--acid); color:#10110c; box-shadow:5px 5px 0 #66791c; }
.primary:hover { transform:translate(-1px,-1px); box-shadow:7px 7px 0 #66791c; }
.primary:focus-visible,.secondary:focus-visible,.ghost:focus-visible,.round:focus-visible,a:focus-visible { outline:3px solid white; outline-offset:3px; }
.result { padding:4rem 0 7rem; }
.result-head { display:flex; justify-content:space-between; gap:2rem; align-items:start; }
.result h2 { font:900 clamp(2rem,6vw,4.7rem)/1 ui-sans-serif,system-ui,sans-serif; letter-spacing:-.04em; max-width:850px; margin:0 0 2rem; }
.ghost,.round { color:var(--ink); border:1px solid var(--line); background:var(--panel); padding:.8rem; }
.stage { background:#080907; border:1px solid var(--line); min-height:390px; display:flex; flex-direction:column; justify-content:center; position:relative; overflow:hidden; }
.stage::before { content:""; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(0deg,transparent 0 4px,rgba(255,255,255,.025) 5px); }
pre { color:var(--acid); font-size:clamp(.9rem,2.8vw,1.7rem); line-height:1.4; text-align:center; white-space:pre-wrap; padding:2rem; text-shadow:0 0 18px rgba(215,255,63,.4); }
.now-playing { position:absolute; bottom:1rem; left:1rem; right:1rem; display:flex; flex-wrap:wrap; gap:.8rem; color:var(--muted); font-size:.8rem; }
.now-playing strong { color:var(--ink); }
.live-dot { width:.65rem; height:.65rem; border-radius:50%; background:var(--orange); }
.controls { display:flex; justify-content:center; gap:1rem; padding:1.5rem; }
.compact { margin:0; min-width:150px; }
.round { border-radius:50%; width:48px; height:48px; }
.lyrics { border-top:1px solid var(--line); padding:2rem 0; }
.provider { display:grid; grid-template-columns:1fr auto; align-items:center; gap:1rem 2rem; border:1px solid var(--line); background:var(--panel); padding:1.5rem 2rem; margin-bottom:2rem; }
.provider .eyebrow { margin-bottom:.6rem; }
.provider h3,.provider p { margin:.25rem 0; }
.provider>div>p:last-child { color:var(--muted); font-size:.875rem; line-height:1.6; }
.provider-status { grid-column:1/-1; border:1px solid #8f5b46; background:#0d0e0c; padding:1rem; color:var(--ink); font-size:.82rem; line-height:1.65; }
.provider-status strong { display:block; color:#ff9b77; letter-spacing:.04em; }
.provider-status audio { display:block; width:min(100%,420px); margin-top:.85rem; }
.lyrics h3,.share h3 { font:900 1.25rem ui-sans-serif,system-ui,sans-serif; }
.lyrics ol { list-style:none; padding:0; color:var(--muted); line-height:2; counter-reset:line; }
.lyrics li::before { counter-increment:line; content:"0" counter(line) "  "; color:#65675f; }
.lyrics li:first-child { color:var(--acid); }
.share { display:grid; grid-template-columns:1fr auto; align-items:center; gap:1rem 2rem; background:var(--acid); color:#15160e; padding:1.5rem 2rem; }
.share h3,.share p { margin:.25rem 0; }
.share p { font-size:.875rem; line-height:1.5; }
.secondary { background:#111; color:white; padding:1rem; }
#share-status { grid-column:1/-1; }
.share-error { padding:8rem 0; max-width:760px; }
.share-error h1 { font-size:clamp(3rem,8vw,6rem); }
.share-error>p:not(.eyebrow) { color:var(--muted); line-height:1.7; margin:2rem 0; }
.link { display:inline-block; text-decoration:none; }
footer { border-top:1px solid #4a4d43; padding:1.5rem clamp(1.5rem,5vw,5rem); color:var(--muted); font-size:.875rem; line-height:1.5; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
.footer-notes { display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; }
.provenance { display:flex; align-items:center; gap:.65rem; min-width:0; border:1px solid var(--line); background:var(--panel); padding:.65rem .8rem; }
.provenance>span { color:var(--acid); font-weight:900; letter-spacing:.08em; white-space:nowrap; }
.provenance p { margin:0; color:var(--ink); white-space:nowrap; }
.provenance code { min-width:0; color:var(--muted); border-left:1px solid #666a5e; padding-left:.65rem; white-space:nowrap; }
[hidden] { display:none !important; }
@media (max-width:820px) { .hero { grid-template-columns:1fr; gap:2.25rem; min-height:0; } .lead { margin-top:1.5rem; } }
@media (max-width:620px) { .topbar { height:60px; padding-inline:1.25rem; } main { width:calc(100% - 2.5rem); } .hero { gap:1.75rem; padding:2.5rem 0 3rem; overflow:visible; } .eyebrow { margin-bottom:.85rem; } h1 { font-size:clamp(3rem,15vw,3.75rem); line-height:.92; letter-spacing:-.06em; } .lead { font-size:1rem; line-height:1.55; margin-top:1.25rem; } .hero form { width:100%; padding:1.1rem 1.45rem 1.55rem 1.1rem; overflow:hidden; box-shadow:none; } form>label,legend { margin-bottom:.65rem; } .input-wrap { min-height:54px; padding-inline:.75rem; } input[type=text],#task { font-size:1rem; padding:.85rem 0; } fieldset { padding:1rem 0; } .genres { grid-template-columns:1fr; gap:.55rem; } .genres span { min-height:56px; padding:.75rem; } .privacy { margin:.25rem 0 .75rem; } .hero .primary { width:calc(100% - 5px); margin-top:.25rem; } .result-head { display:block; } .result-head .ghost { margin-bottom:1rem; } .stage { min-height:330px; } .provider,.share { grid-template-columns:1fr; padding-inline:1.25rem; } .provider-status,#share-status { grid-column:auto; } footer { align-items:stretch; flex-direction:column; font-size:.875rem; } .footer-notes { flex-direction:column; } .provenance { display:grid; grid-template-columns:minmax(0,1fr); align-items:start; } .provenance code { border-left:0; border-top:1px solid var(--line); padding:.65rem 0 0; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; scroll-behavior:auto !important; transition:none !important; } }

::selection { background:var(--acid); color:#10110c; }
html { scrollbar-color:var(--acid) var(--panel); }
button:not(:disabled):active,a:active { transform:translateY(1px); }
.audio-panel { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,420px); align-items:center; gap:2rem; border:1px solid var(--line); background:var(--panel); padding:1.5rem 2rem; margin-bottom:2rem; }
.audio-panel .eyebrow { margin-bottom:.5rem; }
.audio-panel h3,.audio-panel p { margin:.25rem 0; }
.audio-panel p { color:var(--muted); }
.audio-panel audio { width:100%; }
.share-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.75rem; }
.share-actions .link { display:inline-flex; align-items:center; }
.library { border-top:1px solid var(--line); padding:clamp(3rem,7vw,6rem) 0 7rem; }
.library-head { display:flex; align-items:end; justify-content:space-between; gap:2rem; margin-bottom:2rem; }
.library-head h2 { margin:0; font:900 clamp(2.4rem,6vw,4.5rem)/1 ui-sans-serif,system-ui,sans-serif; letter-spacing:-.04em; }
.library-head>p { max-width:32rem; color:var(--muted); text-align:end; line-height:1.6; }
.library-empty { color:var(--muted); border:1px dashed var(--line); padding:2rem; line-height:1.6; }
.library-list { display:grid; gap:1rem; }
.library-item { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(240px,.8fr) auto; align-items:center; gap:1.25rem 2rem; border:1px solid var(--line); background:var(--panel); padding:1.5rem; }
.library-copy { min-width:0; }
.library-copy .eyebrow { margin-bottom:.45rem; }
.library-copy h3 { margin:.2rem 0 .65rem; font:900 clamp(1.2rem,2.4vw,1.65rem)/1.2 ui-sans-serif,system-ui,sans-serif; overflow-wrap:anywhere; }
.library-copy time { color:var(--muted); font-size:.82rem; }
.library-item audio { width:100%; min-width:0; }
.library-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.65rem; }
.library-actions .ghost,.library-actions .secondary,.library-actions .link { min-height:44px; display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }
.library-status { grid-column:1/-1; min-height:1.2rem; margin:0; color:var(--acid); font-size:.82rem; }

@media (max-width:900px) {
  .library-item { grid-template-columns:minmax(0,1fr) minmax(220px,.8fr); }
  .library-actions { grid-column:1/-1; justify-content:flex-start; }
}

@media (max-width:620px) {
  h1 { letter-spacing:-.04em; }
  .result-head { flex-direction:column-reverse; gap:1rem; }
  .result-head .ghost { align-self:flex-end; }
  .provider,.audio-panel,.share { grid-template-columns:1fr; padding:1.25rem; }
  .provider .secondary { width:100%; min-height:48px; }
  .audio-panel { gap:1rem; }
  .share-actions { justify-content:stretch; }
  .share-actions>* { flex:1 1 100%; justify-content:center; min-height:48px; }
  .library-head { display:block; }
  .library-head>p { text-align:start; margin:1rem 0 0; }
  .library-item { grid-template-columns:1fr; padding:1.25rem; }
  .library-actions { grid-column:auto; display:grid; grid-template-columns:1fr 1fr; }
  .library-actions .link { grid-column:1/-1; }
  .library-status { grid-column:auto; }
}