@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;font-family:DM Sans,system-ui,sans-serif;background:#111117;color:#f8f6ff;--muted:#b7b2c5;--accent:#d7c4ff;--line:#393343}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 70% 0%,#2a1e3c 0,transparent 54%)}
header,main,footer{width:min(1100px,calc(100% - 40px));margin:auto}
header{height:78px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;text-decoration:none;color:inherit}
.brand span{display:grid;place-items:center;background:var(--accent);color:#211635;border-radius:12px;width:38px;height:38px;font-size:24px;letter-spacing:-.08em}
main{padding:45px 0 32px}
h1,h2,p{margin:0} h1{font-size:clamp(38px,7vw,76px);line-height:1;letter-spacing:-.07em} h2{font-size:24px;letter-spacing:-.04em}
p,footer{color:var(--muted)} #lobby p{margin:16px 0 32px} #status{margin:12px 0;overflow-wrap:anywhere} #status:empty{display:none}
.heading,.controls{display:flex;align-items:center;gap:12px;justify-content:space-between;margin-bottom:15px;flex-wrap:wrap}
#screen h1{font-size:clamp(28px,5vw,48px)} #role{color:var(--muted)}
.player{background:#070709;display:grid;place-items:center;border:1px solid var(--line);border-radius:18px;overflow:hidden} video{width:100%;max-height:65vh;aspect-ratio:16/9}
.controls{margin-top:10px}.controls label{display:flex;align-items:center;gap:8px}.controls label input{width:76px} #seek{flex:1;min-width:90px}input{accent-color:var(--accent)}
button{border:1px solid transparent;border-radius:10px;padding:9px 13px;background:var(--accent);color:#211635;font:inherit;font-weight:800;cursor:pointer}button:hover{filter:brightness(1.12)}button:disabled{opacity:.55;cursor:default}.secondary{background:#262232;border-color:var(--line);color:inherit}.secondary[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:16px}.card{background:#1c1924;border:1px solid var(--line);border-radius:15px;overflow:hidden}.art{width:100%;aspect-ratio:16/9;background:#283827;display:block;object-fit:cover}.rose{background:#492833}.blue{background:#222f4a}.card-content{padding:14px}.card h3{margin:0 0 3px}.meta,small{color:var(--muted)}.actions{display:flex;gap:8px;align-items:center;margin:13px 0 8px;flex-wrap:wrap}small a{color:inherit}
#up-next{margin-top:28px}#queue li{margin:7px 0}#queue button{margin-left:10px;padding:4px 9px}footer{border-top:1px solid var(--line);padding:18px 0;font-size:13px}

#search{min-width:min(270px,100%);max-width:100%;border:1px solid var(--line);border-radius:10px;background:#262232;color:inherit;padding:10px 13px;font:inherit}
#search:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.collections{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.catalog-result{margin:0 0 12px}
.catalog-result:empty{display:none}
.cover{display:grid;place-items:center;padding:16px;text-align:center;font-weight:800;font-size:24px}
#embedded iframe{display:block;width:100%;aspect-ratio:16/9;border:0;background:#070709;border-radius:16px}
#sources p,#source-form{margin:10px 0}
#sources{margin:18px 0}
.source-links,.source-input{display:flex;gap:10px;flex-wrap:wrap}
.source-links a{color:var(--accent)}
.source-input input{flex:1;min-width:min(240px,100%);background:#262232;border:1px solid var(--line);border-radius:10px;padding:9px 12px;font:inherit;color:inherit}