:root{color:#17211b;background:#f3f0e8;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;--ink: #17211b;--muted: #667068;--paper: #fffdf7;--line: #dcd8cb;--green: #1f7552;--green-dark: #15583d;--yellow: #f6cb5c;--code: #17201b}*{box-sizing:border-box}html,body,#app{min-height:100%;margin:0}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:wait;opacity:.65}input{color:var(--ink)}.shell{min-height:100vh;display:grid;grid-template-rows:68px minmax(0,1fr);background:radial-gradient(circle at 16% 0%,rgb(246 203 92 / 20%),transparent 32%),#f3f0e8}.topbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:0 22px;border-bottom:1px solid var(--line);background:#fffdf7e8;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.home-link{width:fit-content;color:var(--ink);font-size:13px;font-weight:700;text-decoration:none}.room-label{display:flex;align-items:baseline;gap:8px;padding:8px 13px;border-radius:999px;background:#ece8dd;font-size:13px}.eyebrow{color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.11em;text-transform:uppercase}.top-actions,.preview-actions,.people,.toggle{display:flex;align-items:center}.top-actions{justify-content:flex-end;gap:14px}.follow-toggle{white-space:nowrap}.status{display:inline-flex;gap:7px;align-items:center;color:var(--muted);font-size:12px;font-weight:700}.status-dot{width:8px;height:8px;border-radius:50%;background:#38a875;box-shadow:0 0 0 4px #38a8751f}.status-connecting .status-dot{background:#e7a928;box-shadow:0 0 0 4px #e7a92821}.status-offline .status-dot{background:#c65545;box-shadow:0 0 0 4px #c6554521}.save-status{color:var(--muted);font-size:11px;font-weight:700}.button{border:1px solid transparent;border-radius:9px;padding:8px 12px;font-size:12px;font-weight:800}.button-secondary{border-color:var(--line);background:var(--paper);color:var(--ink)}.button-primary{background:var(--green);color:#fff;box-shadow:0 2px 0 var(--green-dark)}.workspace{min-height:0;display:grid;grid-template-columns:minmax(360px,.95fr) minmax(380px,1.05fr);gap:12px;padding:12px}.pane{min-width:0;min-height:0;overflow:hidden;border:1px solid var(--line);border-radius:16px;background:var(--paper);box-shadow:0 12px 35px #3f372312}.code-pane,.preview-pane{display:grid;grid-template-rows:50px minmax(0,1fr)}.pane-toolbar{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:0 14px}.tabs{align-self:stretch;display:flex;gap:3px}.tab{position:relative;border:0;background:transparent;color:var(--muted);padding:0 14px;font-size:11px;font-weight:800;letter-spacing:.06em}.tab.active{color:var(--ink)}.tab.active:after{content:"";position:absolute;inset:auto 10px -1px;height:3px;border-radius:3px 3px 0 0;background:var(--yellow)}.people{gap:0;color:var(--muted);font-size:11px;font-weight:700}.avatar{width:25px;height:25px;display:grid;place-items:center;margin-right:-5px;border:2px solid var(--paper);border-radius:50%;color:#fff;font-size:9px;font-weight:800}.avatar:last-of-type{margin-right:8px}.people-label{margin-left:8px;white-space:nowrap}.editor-host{min-width:0;min-height:0;overflow:hidden;background:var(--code)}.editor-loading{display:grid;height:100%;place-items:center;color:#a8b2ab;font-size:13px}.preview-toolbar strong{font-size:13px}.preview-actions{gap:12px}.toggle{gap:6px;color:var(--muted);font-size:11px;font-weight:700}.toggle input{accent-color:var(--green)}kbd{margin-left:5px;font:9px/1 ui-monospace,monospace;opacity:.7}.preview-stack{min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto;background-color:#f8f6ef;background-image:linear-gradient(#e5e1d6 1px,transparent 1px),linear-gradient(90deg,#e5e1d6 1px,transparent 1px);background-size:28px 28px}.preview-stack iframe{width:calc(100% - clamp(24px,6vw,70px));height:calc(100% - clamp(24px,6vw,70px));min-height:240px;align-self:center;justify-self:center;border:1px solid #d7d2c5;border-radius:5px;background:#fff;box-shadow:0 18px 48px #3f37231f}.console-panel{max-height:150px;border-top:1px solid var(--line);background:#fffdf8;font-size:11px}.console-panel summary{padding:7px 12px;color:var(--muted);cursor:pointer;font-weight:800;-webkit-user-select:none;user-select:none}.console-output{max-height:110px;overflow:auto;border-top:1px solid #ece8dc;background:#fcfaf5;font:11px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace}.console-line{padding:4px 12px;border-bottom:1px solid #f0ede4;white-space:pre-wrap}.console-warn{color:#886414;background:#fff9e8}.console-error{color:#a93f32;background:#fff2ef}.dialog-backdrop{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:20px;background:#17211bb8;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}.hidden{display:none!important}.name-card{width:min(400px,100%);display:grid;gap:13px;padding:30px;border:1px solid #dcd8cb;border-radius:20px;background:var(--paper);box-shadow:0 24px 80px #0000003d}.name-icon{font-size:30px}.name-card h1{margin:0;font-size:27px;letter-spacing:-.04em}.name-card p{margin:-6px 0 5px;color:var(--muted);font-size:13px;line-height:1.55}.name-card label,.join-form label{font-size:11px;font-weight:800}.name-card input,.join-form input{width:100%;border:1px solid #cfcabd;border-radius:10px;background:#fff;padding:12px 13px;outline:none}.name-card input:focus,.join-form input:focus{border-color:var(--green);box-shadow:0 0 0 3px #1f75521f}.toast{position:fixed;z-index:30;left:50%;bottom:22px;translate:-50% 14px;padding:10px 14px;border-radius:9px;background:var(--ink);color:#fff;font-size:12px;font-weight:700;opacity:0;pointer-events:none;transition:.18s ease}.toast.visible{translate:-50% 0;opacity:1}.mobile-switch{display:none}.home-shell{min-height:100vh;display:grid;place-items:center;padding:24px}.home-card{width:min(420px,100%);padding:30px;border:1px solid var(--line);border-radius:12px;background:var(--paper);box-shadow:0 12px 35px #3f372312}.home-card h1{margin:0 0 24px;font-size:24px}.home-button{width:100%}.button-large{padding:12px 16px}.home-divider{display:flex;align-items:center;gap:10px;margin:22px 0;color:var(--muted);font-size:11px}.home-divider:before,.home-divider:after{content:"";height:1px;flex:1;background:var(--line)}.join-form{display:grid;gap:8px}.join-form input{font-size:12px}.form-error{min-height:18px;margin:10px 0 0;color:#a93f32;font-size:12px;font-weight:700}@media(max-width:760px){.shell{grid-template-rows:62px 44px minmax(0,1fr);height:100dvh;min-height:0}.topbar{grid-template-columns:1fr auto;padding:0 14px}.room-label,.status,.save-status{display:none}.mobile-switch{display:grid;grid-template-columns:1fr 1fr;padding:5px 12px;gap:5px;border-bottom:1px solid var(--line)}.mobile-view{border:0;border-radius:7px;background:transparent;color:var(--muted);font-size:11px;font-weight:800}.mobile-view.active{background:#fff;color:var(--ink);box-shadow:0 1px 4px #00000012}.workspace{display:block;padding:8px;overflow:hidden}.pane{height:100%;border-radius:12px}.shell[data-view=code] .preview-pane,.shell[data-view=preview] .code-pane{display:none}.preview-stack iframe{width:calc(100% - 20px);height:calc(100% - 20px)}.top-actions{gap:7px}.button{padding:8px 10px}.home-card{padding:24px}}@media(max-width:460px){.topbar{gap:8px}}