:root{--bg:#f6f7f9;--panel:#fff;--ink:#1b2430;--muted:#5b6675;--line:#d6dce3;--accent:#1f7a64;--warn-bg:#fdf0e3;--warn-ink:#8a4308;--sans:system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;--mono:ui-monospace, SFMono-Regular, Menlo, monospace}@media (prefers-color-scheme:dark){:root{--bg:#12161c;--panel:#1a2029;--ink:#e6ebf1;--muted:#9aa5b3;--line:#2f3844;--accent:#5cc9a8;--warn-bg:#33241a;--warn-ink:#f5c08a}}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--bg);color:var(--ink);font-family:var(--sans)}#app{flex-direction:column;height:100dvh;display:flex}header{padding:8px 16px;padding-top:max(8px, env(safe-area-inset-top));border-bottom:1px solid var(--line);background:var(--panel);flex-wrap:wrap;align-items:center;gap:10px;display:flex}.brand{letter-spacing:.02em;font-weight:700}.file{font-family:var(--mono);color:var(--muted);text-overflow:ellipsis;white-space:nowrap;flex:96px;min-width:0;font-size:.85rem;overflow:hidden}.status{color:var(--muted);align-items:center;gap:6px;font-size:.8rem;display:flex}.dot{background:var(--muted);border-radius:50%;width:8px;height:8px}.status[data-status=connected] .dot{background:var(--accent)}.people{flex-wrap:wrap;gap:4px;margin:0;padding:0;list-style:none;display:flex}.people li{color:#fff;background:var(--c);white-space:nowrap;border-radius:999px;padding:2px 8px;font-size:.75rem}.banner{background:var(--warn-bg);color:var(--warn-ink);padding:8px 16px;font-size:.85rem}.banner[hidden]{display:none}main.editor{flex:1;min-height:0;display:flex}main.editor .cm-editor{background:var(--panel);height:100%;color:var(--ink);flex:1;font-size:15px}main.editor .cm-scroller{font-family:var(--mono);padding-bottom:env(safe-area-inset-bottom);line-height:1.6}main.editor .cm-content{max-width:820px;padding:16px 0}.cm-focused{outline:none!important}.center{flex:1;place-items:center;padding:24px 16px;display:grid}.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;width:min(420px,100%);padding:20px}.card h1{margin:0 0 8px;font-size:1.3rem}.card p{color:var(--muted);margin:0 0 12px;line-height:1.6}.card code{font-family:var(--mono);background:var(--bg);color:var(--ink);border-radius:4px;padding:2px 6px}.card form{gap:8px;display:flex}.card input{min-width:0;font:inherit;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:8px;flex:1;padding:8px 10px;font-size:16px}.card button{font:inherit;background:var(--accent);color:var(--panel);cursor:pointer;border:0;border-radius:8px;padding:8px 14px;font-weight:600}