:root{--bg: #0b0d14;--bg2: #11141f;--panel: #151927;--panel2: #1b2033;--line: #262c44;--text: #e6e8f2;--dim: #9aa3c7;--accent: #8b7dff;--accent2: #6a5cff;--ok: #3ddc84;--warn: #ffb547;--bad: #ff5a5f;--radius: 14px;color-scheme:dark}*{box-sizing:border-box}html{background:var(--bg)}html,body{margin:0;min-height:100%}body{background:radial-gradient(1200px 600px at 80% -10%,#1a1640 0%,transparent 60%),var(--bg);color:var(--text);font:15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background-attachment:fixed;-webkit-font-smoothing:antialiased}a{color:var(--accent)}h1,h2,h3{line-height:1.2;margin:0 0 8px}.hidden{display:none!important}.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.spread{justify-content:space-between}.meta{color:var(--dim);font-size:13px}.hint{color:var(--dim)}.lede{color:var(--dim);font-size:17px;max-width:60ch}.small{font-size:13px}.topbar{display:flex;align-items:center;gap:24px;padding:14px 28px;border-bottom:1px solid var(--line);background:#0b0d14b3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);position:sticky;top:0;z-index:10}.topbar nav{display:flex;gap:6px;flex:1}.logo{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:20px;letter-spacing:-.02em;color:var(--text);text-decoration:none}.logo.big{font-size:34px}.logo-mark{width:26px;height:18px;border-radius:6px 6px 4px 4px;background:var(--accent);box-shadow:inset 0 -6px 0 var(--accent2)}.logo.big .logo-mark{width:40px;height:28px}.nav-link{color:var(--dim);text-decoration:none;padding:6px 12px;border-radius:8px}.nav-link:hover{color:var(--text);background:var(--panel)}.user{display:flex;gap:10px;align-items:center;color:var(--dim)}.content{max-width:1100px;margin:0 auto;padding:32px 28px 64px}.btn{appearance:none;border:0;border-radius:10px;padding:9px 16px;font:inherit;font-weight:600;background:var(--accent);color:#0b0d14;cursor:pointer;text-decoration:none;display:inline-block}.btn:hover{background:#a195ff}.btn[disabled]{opacity:.45;cursor:not-allowed}.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--line)}.btn.ghost:hover{background:var(--panel2)}.btn.big{padding:13px 26px;font-size:17px}.btn.small{padding:5px 10px;font-size:13px}input,select{font:inherit;color:var(--text);background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:9px 12px}input:focus,select:focus{outline:2px solid var(--accent);outline-offset:1px}.code-input{width:130px;text-transform:uppercase;letter-spacing:.2em;font-weight:700;font-family:ui-monospace,monospace}.link{color:var(--dim)}.pill{display:inline-block;padding:2px 10px;border-radius:99px;font-size:12px;font-weight:600;background:var(--panel2);color:var(--dim);border:1px solid var(--line)}.pill.ok{color:var(--ok);border-color:#3ddc8459}.pill.warn{color:var(--warn);border-color:#ffb54759}.hero{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;margin-bottom:36px}.hero h1{font-size:44px;letter-spacing:-.03em}.join-box{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px}.join-box label{display:block;color:var(--dim);font-size:13px;margin-bottom:8px}.section-title{font-size:13px;text-transform:uppercase;letter-spacing:.12em;color:var(--dim);margin:28px 0 14px}.library{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}.card-art{height:140px;display:flex;align-items:flex-end;padding:14px 16px;font-weight:800;font-size:22px;color:#ffffffeb;text-shadow:0 2px 12px rgba(0,0,0,.4)}.art-testcart{background:radial-gradient(circle at 25% 40%,#ff5a5f 0 18px,transparent 19px),radial-gradient(circle at 60% 60%,#3fa7ff 0 18px,transparent 19px),radial-gradient(circle at 80% 30%,#ffe066 0 8px,transparent 9px),linear-gradient(135deg,#1a2140,#10131d)}.art-mkwii{background:repeating-linear-gradient(90deg,#ffffff10 0 20px,transparent 20px 40px),linear-gradient(135deg,#e5262a,#7a0f2b)}.art-ssbm{background:radial-gradient(circle at 70% 40%,#ffffff22 0 40px,transparent 41px),linear-gradient(135deg,#2c3e8f,#120f3a)}.card-body{padding:16px;display:flex;flex-direction:column;gap:6px;flex:1}.card-body p{color:var(--dim);margin:4px 0 8px}.card-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:auto}.card-status{margin-bottom:6px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;margin-bottom:16px}.lobby-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:18px;gap:16px;flex-wrap:wrap}.eyebrow{color:var(--dim);font-size:13px;text-transform:uppercase;letter-spacing:.12em}.room-code{font:800 56px/1 ui-monospace,SF Mono,monospace;letter-spacing:.12em}.members{list-style:none;padding:0;margin:8px 0 10px}.members li{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}.members li:last-child{border-bottom:0}.members li.offline{opacity:.55}.conn-dot{width:9px;height:9px;border-radius:50%;background:var(--ok)}.offline .conn-dot{background:var(--warn)}.member-name{flex:1;font-weight:600}.you{color:var(--dim);font-weight:400}.host-tag{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);border:1px solid var(--accent);border-radius:6px;padding:1px 6px}.ports{display:flex;gap:6px}.port-dot{font-size:11px;font-weight:800;color:#0b0d14;background:var(--c);border-radius:6px;padding:2px 6px}.field{display:flex;flex-direction:column;gap:4px;color:var(--dim);font-size:13px}.page-head{margin-bottom:20px}.devices{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:18px}.device{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px}.device.empty{display:flex;align-items:center;justify-content:center;border-style:dashed}.device-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:10px}.pad-viz{width:100%;max-width:360px;height:auto;display:block;margin:0 auto}.remap{display:none;margin-top:12px;border-top:1px solid var(--line);padding-top:12px}.remap.open{display:block}.remap-grid{display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:center;margin-bottom:10px}.slots{border-collapse:collapse;margin:8px 0 12px}.slots th,.slots td{padding:6px 14px;text-align:center;border-bottom:1px solid var(--line);font-size:14px}.slots th:first-child{text-align:left}.files{list-style:none;padding:0}.files li{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line)}progress{width:100%;margin-top:12px}body.playing .topbar{display:none}body.playing .content{max-width:none;padding:0}.play{position:fixed;inset:0;background:#05060a;display:flex;flex-direction:column}.screen{width:100%;flex:1;min-height:0;display:block}.hud{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;gap:12px;background:#0b0d14;border-bottom:1px solid var(--line)}.play:fullscreen .hud{position:absolute;left:0;right:0;top:0;opacity:0;transition:opacity .2s}.play:fullscreen .hud:hover{opacity:1}.hud-right{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.hud .btn.ghost{background:#151927cc;padding:5px 10px;font-size:13px}.badges{display:flex;gap:8px;flex-wrap:wrap}.badge{display:flex;align-items:center;gap:8px;padding:4px 10px 4px 4px;border-radius:10px;background:#151927d9;border:1px solid color-mix(in srgb,var(--c) 50%,transparent)}.badge-port{background:var(--c);color:#0b0d14;font-weight:800;font-size:12px;border-radius:7px;padding:2px 7px}.badge-name{font-weight:600;font-size:14px}.badge-kind{color:var(--dim);font-size:11px;text-transform:uppercase;letter-spacing:.08em}.badge.waiting{animation:pulse .8s infinite alternate}.badge.dropped{opacity:.4;text-decoration:line-through}@keyframes pulse{to{border-color:var(--warn)}}.netstat{display:flex;gap:6px}.stat{font:600 12px ui-monospace,monospace;background:#151927d9;border:1px solid var(--line);border-radius:8px;padding:5px 8px}.stat.dim{color:var(--dim)}.stat.sync.ok{color:var(--ok)}.stat.sync.bad{color:#fff;background:var(--bad);border-color:var(--bad)}.banner{position:absolute;left:50%;bottom:28px;transform:translate(-50%);padding:10px 18px;border-radius:12px;font-weight:600;background:#151927eb;border:1px solid var(--warn);color:var(--warn)}.banner.bad{border-color:var(--bad);color:#ffd7d8;background:#501016eb}.connecting{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:var(--dim);background:var(--bg);z-index:5}.spinner{width:36px;height:36px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--accent);animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.signin{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}.signin-card{max-width:440px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px}.toast{position:fixed;right:20px;bottom:20px;background:var(--panel2);border:1px solid var(--line);padding:10px 16px;border-radius:10px;z-index:100;transition:opacity .4s}.toast-error{border-color:var(--bad)}.toast.gone{opacity:0}@media(max-width:640px){.topbar{padding:12px 16px;gap:12px}.content{padding:20px 16px 48px}.hero h1{font-size:32px}.room-code{font-size:40px}.devices{grid-template-columns:1fr}}