:root{color-scheme:dark;--bg:#0c1119;--panel:#151e2a;--line:#2b394b;--ink:#eaf2ff;--muted:#9db0c9;--accent:#77baff}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.6 system-ui,sans-serif}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}header,main,footer{max-width:1440px;margin:auto;padding:24px 40px}header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:24px}.brand{font-weight:850;font-size:22px;color:white;display:flex;align-items:center;gap:14px}.brand span{font-size:14px;font-weight:500;color:var(--muted)}nav{display:flex;gap:25px;font-size:13px}.intro{padding:42px 0 38px}.eyebrow{font-size:11px;letter-spacing:2px;color:var(--accent)}h1{font-size:clamp(30px,4vw,48px);line-height:1.18;letter-spacing:-1.6px;margin:14px 0 18px}.intro p{max-width:680px;font-size:17px;color:var(--muted)}.meta{display:flex;gap:12px;flex-wrap:wrap}.meta span,.badge{font-size:11px;color:#b7cbe6;border:1px solid var(--line);border-radius:5px;padding:3px 8px}.workspace{display:grid;grid-template-columns:210px 1fr;gap:32px;border-top:1px solid var(--line);padding-top:28px}aside h2{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin:0 0 10px}aside h2:not(:first-child){margin-top:30px}button,input{font:inherit;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--ink);padding:9px 12px}button{cursor:pointer}button:hover,button.active{border-color:var(--accent);background:#213651}button:disabled{opacity:.5}aside button{display:block;border:0;background:transparent;text-align:left;width:100%;font-size:13px;margin-bottom:3px}.count{float:right;color:var(--muted)}.contribute{display:block;margin-top:32px;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:14px;font-size:13px}.contribute small{color:var(--muted)}.toolbar{display:flex;gap:10px;align-items:center}.toolbar input{flex:1;width:150px}.toolbar button{font-size:12px}#status{font-size:12px;color:var(--muted);min-height:20px}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden;display:flex;flex-direction:column}.card img{aspect-ratio:16/9;width:100%;object-fit:cover;background:#0c1420;transition:filter .15s}.card:hover img{filter:brightness(1.12)}.card-body{padding:16px;flex:1;display:flex;flex-direction:column}.card h3{font-size:16px;line-height:1.4;margin:8px 0 4px}.byline{font-size:11px;color:var(--muted)}.card p{font-size:13px;color:var(--muted);flex:1}.buttons{display:flex;gap:8px;margin-top:12px}.buttons button{font-size:12px;flex:1}.buttons button:first-child{background:#2b6298}.card details{font-size:11px;margin-top:12px;color:var(--muted)}summary{cursor:pointer}.card code{overflow-wrap:anywhere;font-size:10px}audio{width:100%;height:32px;margin-top:12px}.guide{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;border-top:1px solid var(--line);margin-top:42px;padding:26px 0}.guide h2{font-size:16px}.guide p{color:var(--muted);font-size:13px}footer{font-size:11px;color:var(--muted);border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:18px}@media(max-width:800px){header{align-items:start;flex-direction:column}header,main,footer{padding:22px}.workspace{grid-template-columns:1fr}aside{display:block}#categories,#collections{display:flex;gap:6px;overflow-x:auto;padding-bottom:8px}aside button{width:auto;white-space:nowrap;background:var(--panel)}.count{float:none;margin-left:8px}.contribute{display:none}.guide{grid-template-columns:1fr}nav{flex-wrap:wrap}.toolbar{flex-wrap:wrap}footer{flex-direction:column}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
video{width:100%;aspect-ratio:16/9;object-fit:contain;background:#0c1420;border-radius:6px;margin-top:12px}