:root { color-scheme:dark; font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif; background:#101215; color:#eef1f5; }
* { box-sizing:border-box; } body { margin:0; } main { max-width:1180px; margin:auto; padding:30px 36px; }
header { display:flex; align-items:center; justify-content:space-between; margin-bottom:42px; } .wordmark { font-weight:850; font-size:25px; letter-spacing:-1px; } .wordmark span { color:#96a3b6; font-weight:450; }
.badge { font-size:10px; letter-spacing:2px; border:1px solid #39414c; border-radius:30px; padding:8px 13px; color:#a8b3c3; }
.eyebrow { font-size:10px; letter-spacing:2px; color:#9babbf; margin:0 0 10px; font-weight:700; } h1 { margin:0; font-size:clamp(28px,4vw,43px); letter-spacing:-1.6px; } .intro>p:last-child { color:#a3aab6; margin:12px 0 30px; }
label { font-size:12px; display:block; color:#acb5c2; margin-bottom:9px; } .source-row { display:flex; gap:9px; margin-bottom:20px; }
input[type=text] { flex:1; min-width:0; } input[type=text],select,button { border:1px solid #343b45; background:#1c2027; color:#e9edf4; border-radius:8px; padding:12px 15px; font:inherit; font-size:13px; }
button { cursor:pointer; white-space:nowrap; } button:hover:enabled { background:#2b323c; } button:disabled { opacity:.4; cursor:default; } button.primary { background:#b7f263; color:#172309; border-color:#b7f263; font-weight:750; } button.primary:hover:enabled { background:#ccff87; }
.player { aspect-ratio:16/9; background:#050608; border:1px solid #2b323c; border-radius:12px; overflow:hidden; position:relative; } canvas { width:100%; height:100%; object-fit:contain; display:block; }
#placeholder,#loading { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; background:#080a0e; color:#788599; } #placeholder[hidden],#loading[hidden] { display:none; } .play-symbol { border:1px solid #374150; border-radius:50%; width:62px; height:62px; display:grid; place-items:center; color:#b7f263; padding-left:4px; } #loading { background:#080a0ead; color:#d4e5bd; font-size:14px; }
.transport { display:flex; align-items:center; gap:12px; margin:13px 0 24px; } .transport button { padding:7px 12px; } .transport span { color:#a3adba; font-size:12px; font-variant-numeric:tabular-nums; } input[type=range] { flex:1; min-width:25px; accent-color:#b7f263; cursor:pointer; }
.now-playing { display:flex; justify-content:space-between; gap:25px; align-items:center; } h2 { font-size:18px; letter-spacing:-.4px; margin:0; } #status { color:#b7f263; font-size:12px; white-space:nowrap; } #error { background:#33201f; color:#ffb4a9; border:1px solid #67413b; padding:13px 16px; border-radius:8px; font-size:14px; }
.details { border-top:1px solid #2c333c; margin-top:24px; padding-top:15px; display:flex; align-items:center; gap:20px; font-size:11px; color:#8290a3; } .details button { margin-left:auto; font-size:11px; padding:7px 11px; } footer { color:#626e7f; font-size:10px; margin-top:22px; } a { color:inherit; } :focus-visible { outline:2px solid #b7f263; outline-offset:3px; }
@media(max-width:620px) { main { padding:20px 16px; } header { margin-bottom:28px; } .source-row { flex-wrap:wrap; } input[type=text] { flex-basis:100%; } .source-row button { flex:1; } .now-playing { align-items:start; } .details { flex-wrap:wrap; gap:10px; } .details button { margin-left:0; } h2 { font-size:16px; } }
nav { display:flex; gap:18px; font-size:12px; color:#9babbf; } nav a { text-decoration:none; } nav a[aria-current=page] { color:#b7f263; }

.setup { max-width:780px; } .setup-card { border:1px solid #343b45; border-radius:12px; padding:24px; margin:22px 0; background:#171b21; } .setup-card p, .setup-card li { color:#acb5c2; font-size:14px; line-height:1.6; } .setup-card input { width:100%; margin-bottom:16px; } input[type=password],input[type=file] { border:1px solid #343b45; background:#1c2027; color:#e9edf4; border-radius:8px; padding:12px 15px; font:inherit; font-size:13px; } .setup-card ol { padding-left:22px; } #setup-status { font-size:14px; line-height:1.5; } .notice { color:#acb5c2; font-size:13px; line-height:1.6; } [hidden] { display:none !important; }
@media(max-width:620px) { nav { gap:12px; font-size:11px; } }
#sign-in-screen { width:100%; height:min(71vw,820px); min-height:400px; background:#1c2027; border:1px solid #343b45; border-radius:8px; overflow:hidden; margin:20px 0; }