:root{--panel:#121c2f;--panel-border:#1f2b45;--text:#e7edf9;--muted:#93a4bf;--accent:#40c4ff;--success:#34d399;--danger:#fb7185}*{box-sizing:border-box}body{color:var(--text);background:radial-gradient(circle at top,#40c4ff2e,#0000 35%),linear-gradient(#08111f 0%,#0d1728 100%);margin:0;font-family:IBM Plex Sans,system-ui,sans-serif}button,input,textarea{font:inherit}.wrap{max-width:1100px;min-height:100vh;margin:0 auto;padding:32px 16px 64px}.hero{margin-bottom:24px}.hero h1{margin:0 0 8px;font-size:clamp(32px,5vw,54px)}.hero p{color:var(--muted);max-width:720px;margin:0}.grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;display:grid}.onboarding-grid{max-width:920px}.session-grid{align-items:start}.card{border:1px solid var(--panel-border);background:#121c2ff5;border-radius:18px;padding:18px;box-shadow:0 18px 48px #0000003d}.onboarding-card{background:radial-gradient(circle at 100% 0,#40c4ff1f,#0000 34%),#121c2ff5;padding:26px}label{color:var(--muted);margin-bottom:12px;font-size:14px;display:block}input{width:100%;color:var(--text);background:#0a1322;border:1px solid #263657;border-radius:12px;margin-top:6px;padding:12px 14px}textarea{width:100%;color:var(--text);resize:vertical;background:#0a1322;border:1px solid #263657;border-radius:12px;margin-top:6px;padding:12px 14px}button{background:var(--accent);color:#04111e;cursor:pointer;border:0;border-radius:12px;padding:12px 16px;font-weight:700}button.secondary{color:var(--text);background:0 0;border:1px solid #30405f}.actions,.session-actions{flex-wrap:wrap;gap:10px;display:flex}.status,.session-status{min-height:22px;color:var(--muted);margin-top:14px}.status.error,.session-status.error{color:var(--danger)}.status.success,.session-status.success{color:var(--success)}.session-list{gap:12px;display:grid}.session-item{background:#0b1526;border:1px solid #2a3959;border-radius:14px;padding:14px}.pill{color:var(--success);background:#34d39929;border-radius:999px;margin-bottom:8px;padding:4px 8px;font-size:12px;display:inline-flex}.muted{color:var(--muted)}code{color:#9edbff}.eyebrow{color:#7dd3fc;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px;font-size:12px;font-weight:700}.auth-switch{gap:10px;margin:18px 0;display:flex}.auth-panel{margin-top:12px}.qr-shell{text-align:center;justify-items:center;gap:18px;display:grid}.qr-copy h3{margin:0 0 8px;font-size:24px}.qr-copy p{margin:0}.qr-badge{color:#7dd3fc;letter-spacing:.06em;text-transform:uppercase;background:#7dd3fc1f;border-radius:999px;margin-bottom:10px;padding:6px 10px;font-size:12px;font-weight:700;display:inline-flex}.qr-panel img{background:#fff;border:1px solid #2a3959;border-radius:16px;width:100%;max-width:320px;padding:12px}.qr-panel{justify-items:center;gap:8px;width:100%;display:grid}.qr-placeholder{background:#0b1526b3;border:1px dashed #35507d;border-radius:18px;place-items:center;width:100%;min-height:340px;display:grid}.qr-refresh{margin-top:6px}.qr-status{text-align:center}.meta-row{flex-wrap:wrap;align-items:center;gap:10px;margin:14px 0 18px;display:flex}.workspace-header{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:14px;display:flex}.workspace-switch{margin:0}.hint-box{background:#0b1526;border:1px solid #2a3959;border-radius:14px;margin-top:18px;padding:16px}.experimental-box{color:#fde68a;background:#78350f2e;border:1px solid #fbbf2466;border-radius:14px;margin-bottom:16px;padding:14px 16px}.revoked-box{color:#fecdd3;background:#7f1d1d38;border:1px solid #fb718573;border-radius:14px;margin-bottom:18px;padding:14px 16px}.animation-editor{gap:14px;display:grid}.frame-toolbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.frame-pill{color:#7dd3fc;background:#40c4ff1f;margin-bottom:0}.frame-editor{white-space:pre-wrap;overflow-wrap:anywhere;tab-size:2;caret-color:#d7f2ff;outline:none;min-height:240px;padding:12px 14px;font-family:IBM Plex Mono,Fira Code,monospace;line-height:1.35}.frame-editor-stack{background:linear-gradient(#9edbff0d,#0000 45%),#0a1322;border:1px solid #263657;border-radius:12px;margin-top:6px;position:relative;overflow:hidden}.frame-ghost{z-index:0;color:#9edbff3d;pointer-events:none;white-space:pre-wrap;overflow-wrap:anywhere;tab-size:2;margin:0;padding:12px 14px;font-family:IBM Plex Mono,Fira Code,monospace;line-height:1.35;position:absolute;inset:0;overflow:hidden}.frame-editor-with-ghost{z-index:1;background:0 0;position:relative}.frame-editor:empty:before{content:attr(data-placeholder);color:#93a4bfad}.animation-preview-card{background:radial-gradient(circle at 100% 0,#40c4ff1a,#0000 36%),#0b1526;border:1px solid #2a3959;border-radius:14px;padding:14px}.animation-preview-header{justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;display:flex}.animation-preview-screen,.animation-preview-empty{white-space:pre-wrap;overflow-wrap:anywhere;tab-size:2;background:#08111f;border-radius:12px;min-height:180px;margin:0;padding:14px;font-family:IBM Plex Mono,Fira Code,monospace;line-height:1.35}.animation-preview-screen{color:#d7f2ff;border:1px solid #40c4ff3d;box-shadow:inset 0 0 0 1px #40c4ff14}.animation-preview-empty{border:1px dashed #30405f;place-items:center;display:grid}.animation-list{margin-top:24px}.animation-list-header{justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;display:flex}.animation-items{gap:12px;display:grid}.animation-item{background:#0b1526;border:1px solid #2a3959;border-radius:14px;flex-wrap:wrap;justify-content:space-between;gap:16px;padding:14px;display:flex}@media (width<=720px){.frame-toolbar,.animation-item,.workspace-header,.animation-preview-header{flex-direction:column;align-items:stretch}}