:root{color-scheme:dark;--bg:#0b0e16;--surface:#141b2b;--line:#2b3750;--text:#f4f6fc;--muted:#acb8d1;--accent:#a8b7ff;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:16px;line-height:1.5;background:var(--bg);color:var(--text)}
*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{min-height:44px;border:1px solid var(--line);border-radius:10px;background:#202b42;color:var(--text);padding:.65rem 1rem;font-weight:600;cursor:pointer;touch-action:manipulation}button:disabled{opacity:.5;cursor:default}button:not(:disabled):hover{filter:brightness(1.12)}button.primary{background:var(--accent);color:#0b1736;border-color:var(--accent)}button.danger{background:#57263c;border-color:#90516c}button[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}button:focus-visible,input:focus-visible,canvas:focus-visible,a:focus-visible{outline:3px solid #dae1ff;outline-offset:3px}[hidden]{display:none!important}
main{max-width:1000px;margin:auto;padding:0 24px calc(24px + env(safe-area-inset-bottom))}.header{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;min-height:88px;padding-top:env(safe-area-inset-top)}.brand{font-size:1.25rem;font-weight:750;letter-spacing:-.035em;color:var(--text);text-decoration:none}#status{font-size:.875rem;color:var(--muted)}#status[data-live=true]{color:#b6e5ce}
.connect-card{max-width:460px;margin:clamp(20px,7vh,72px) auto 0;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:32px}h1{font-size:1.75rem;line-height:1.2;margin:0 0 28px;letter-spacing:-.035em}h2{font-size:1.4rem;line-height:1.25;margin:0 0 14px}label{display:block;font-size:.875rem;margin:18px 0 8px}input{width:100%;min-width:0;min-height:48px;border:1px solid #40506c;border-radius:10px;background:var(--bg);color:var(--text);padding:12px}input::placeholder{color:#8999b8}#key{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:1rem}#join{width:100%;margin-top:24px}.hint,.muted{color:var(--muted);font-size:.875rem}.hint{margin:20px 0 0}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:0 0 12px}.toolbar button{padding:.45rem 1rem;font-size:.875rem}#session{max-width:680px;margin:auto}.stage{position:relative;display:flex;justify-content:center;align-items:center;min-height:240px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#060910}canvas{display:block;max-width:100%;max-height:calc(100svh - 200px);width:auto;height:auto;touch-action:none;user-select:none;-webkit-user-select:none}.screen-hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;margin:0;padding:32px;background:#0b0e16f0;text-align:center;color:var(--muted)}.controls{display:flex;gap:8px;margin-top:12px}.controls button{flex:1;font-size:.875rem}.text-controls{padding-top:4px}.text-row,.key-row{display:flex;gap:8px}.text-row input{flex:1}.text-row button{flex:none}.key-row{margin-top:8px;flex-wrap:wrap}.key-row button{font-size:.875rem;flex:1}.notice{border:1px solid #5b6cac;background:#182340;border-radius:12px;padding:16px;margin:12px 0}.notice p{margin:0 0 12px}.notice button{width:100%}.error{max-width:680px;margin:20px auto 0;border:1px solid #945770;border-radius:12px;background:#382231;padding:16px;overflow-wrap:anywhere}dialog{color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:16px;max-width:min(420px,calc(100% - 32px));padding:24px}dialog::backdrop{background:#03060dbb}.dialog-actions{display:flex;justify-content:flex-end;gap:12px;flex-wrap:wrap;margin-top:24px}dialog p{color:var(--muted);margin:0}
@media(max-width:600px){main{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}.header{min-height:72px;gap:8px}.brand{font-size:1.125rem}.connect-card{margin-top:16px;padding:24px 20px;border-radius:16px}h1{font-size:1.6rem}#key{font-size:1rem;letter-spacing:-.04em}canvas{max-height:calc(100svh - 194px)}.stage{border-radius:8px}.controls{gap:8px}.controls button{padding:10px 8px}.text-row{flex-wrap:wrap}.text-row input{flex-basis:65%}}
@media(prefers-reduced-motion:no-preference){button{transition:background-color .12s}}
.diagnostics{max-width:680px;margin:16px auto;border:1px solid var(--line);border-radius:12px;padding:16px;color:var(--muted);font-size:.875rem}.diagnostics summary{cursor:pointer;min-height:32px}.diagnostics pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:.8125rem}