: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:Arial,sans-serif; font-size:clamp(4rem,5.4vw,5.5rem); line-height:.92; letter-spacing:-.065em; margin:0; }
h1 em { color:var(--acid); font-style:normal; }
.lead { color:var(--muted); max-width:34rem; font-family:Arial,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 Arial,sans-serif; letter-spacing:-.05em; 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-left:3px solid var(--orange); background:#0d0e0c; padding:1rem; color:var(--ink); font-size:.82rem; line-height:1.65; }
.provider-status strong { display:block; color:#ff9b77; letter-spacing:.04em; }
.lyrics h3,.share h3 { font:900 1.25rem Arial,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; } }