:root{color-scheme:dark light;--page-top: #151e33;--page-mid: #0b1220;--page-bottom: #050810;--page-grid-line: rgb(143 190 255 / 7%);--text: #eaf0fa;--text-muted: #a8b8d4;--lede: #a9c7f5;--link: #8fbeff;--link-visited: #c3b5ff;--alert: #7ee7a8;--panel: #111a2c;--panel-border: #5a6d8c;--input-bg: #0b1220;--input-border: #5a6d8c;--btn-bg: #1e4fd8;--btn-bg-hover: #183fae;--btn-border: #6c97f0;--btn-text: #ffffff;--btn-disabled-bg: #3e4b63;--btn-disabled-text: #d6deec;--btn-disabled-border: #6b7a94;--focus-ring: #ffce5c;--focus-halo: #0b1220;--canvas-bg: #111827;--canvas-border: #60a5fa;--canvas-glow: rgb(96 165 250 / 35%);--logo-frame: #47638f;--logo-grid: #2a3a57;--logo-wave: #8fbeff;--logo-dot: #ffce5c;--font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Consolas, "Courier New", monospace;font-family:var(--font-mono)}@media(prefers-color-scheme:light){:root{--page-top: #ffffff;--page-mid: #f2f6fc;--page-bottom: #e4ebf7;--page-grid-line: rgb(30 79 216 / 7%);--text: #0e1626;--text-muted: #455875;--lede: #26456e;--link: #0b47c0;--link-visited: #6b2bc4;--alert: #136b39;--panel: #ffffff;--panel-border: #63738f;--input-bg: #ffffff;--input-border: #63738f;--btn-disabled-bg: #c7cfdd;--btn-disabled-text: #1f2937;--btn-disabled-border: #67748c;--focus-ring: #000000;--focus-halo: #ffffff;--canvas-bg: #0f172a;--canvas-glow: rgb(30 79 216 / 22%);--logo-frame: #7e93b8;--logo-grid: #c3cfe2;--logo-wave: #1e4fd8;--logo-dot: #b45309}}*,*:before,*:after{box-sizing:border-box}body{margin:0;min-height:100vh;display:grid;place-items:center;background-color:var(--page-bottom);background-image:linear-gradient(var(--page-grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--page-grid-line) 1px,transparent 1px),radial-gradient(circle at 50% 0%,var(--page-top),var(--page-mid) 45%,var(--page-bottom));background-size:48px 48px,48px 48px,auto;background-attachment:fixed;color:var(--text);line-height:1.5}.app{width:min(860px,100%);padding:1rem 1rem 2rem;text-align:center}.brand{display:flex;flex-direction:column;align-items:center;gap:.6rem;margin:1.5rem 0 .6rem}.brand-mark{width:clamp(56px,13vw,84px);height:auto;fill:none;stroke-linecap:round}.brand-frame{stroke:var(--logo-frame);stroke-width:2.5}.brand-grid path{stroke:var(--logo-grid);stroke-width:1.25}.brand-wave path{stroke:var(--logo-wave);stroke-width:2.75}.brand-wave-2{opacity:.62}.brand-wave-3{opacity:.34}.brand-dot{fill:var(--logo-dot);stroke:none}#gridTitle{margin:0;font-size:clamp(1.6rem,5vw,2.4rem);font-weight:700;letter-spacing:.055em;line-height:1.15;color:var(--text);overflow-wrap:anywhere}#connectionStatus{color:var(--lede);min-height:1.25rem;max-width:56ch;margin:0 auto 1.25rem;font-size:1rem}.auth-panel{width:100%;max-width:460px;margin:0 auto .85rem;padding:.9rem;border:1px solid var(--panel-border);border-radius:.75rem;background:var(--panel);text-align:left}.auth-panel h2{margin:0 0 .6rem;font-size:.85rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}.auth-row{display:flex;align-items:center;justify-content:center;gap:.5rem;margin:.45rem 0}.auth-row label{color:var(--text);min-width:135px;text-align:right}.auth-row input,.nickname-row input{background:var(--input-bg);color:var(--text);border:1px solid var(--input-border);border-radius:.5rem;padding:.45rem .6rem;width:280px;max-width:100%;font-family:inherit;font-size:1rem}.auth-hint{color:var(--text-muted);margin:.35rem 0 .5rem;font-size:.92rem}#authSessionText{margin:0;color:var(--text)}.nickname-row{display:flex;justify-content:center;align-items:center;gap:.5rem;margin-bottom:.75rem}.nickname-row label{color:var(--text)}.nickname-row input{width:320px;max-width:100%}.controls{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;margin-bottom:.85rem;align-items:center}#authModeSeparator{color:var(--text-muted)}button,select{background:var(--btn-bg);color:var(--btn-text);border:1px solid var(--btn-border);border-radius:.5rem;padding:.5rem .85rem;font-family:inherit;font-size:.95rem;transition:background-color .12s ease}button:hover{background:var(--btn-bg-hover)}button:disabled{background:var(--btn-disabled-bg);border-color:var(--btn-disabled-border);color:var(--btn-disabled-text);cursor:not-allowed}:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px;box-shadow:0 0 0 2px var(--focus-halo)}canvas{background:var(--canvas-bg);border:2px solid var(--canvas-border);border-radius:8px;box-shadow:0 0 20px var(--canvas-glow);touch-action:none;max-width:100%;height:auto}#deviceSummary{color:var(--text-muted);margin:0 auto .75rem;min-height:2.4rem}#deviceSummary p{margin:.15rem 0}#status{min-height:2rem;color:var(--alert);margin-bottom:.75rem}#touchTextBar{display:flex;align-items:center;gap:.5rem;margin:.5rem 0}#touchTextBar input{flex:1;min-width:8rem;padding:.6rem;font-size:1rem;font-family:inherit;background:var(--input-bg);color:var(--text);border:1px solid var(--input-border);border-radius:.5rem}#appFooter{margin-top:1.25rem;padding-top:1rem;border-top:1px solid var(--panel-border)}.updates-section{color:var(--text-muted);text-align:left;width:fit-content;margin:0 auto}.updates-section h2{color:var(--text);font-size:1rem;margin:.35rem 0}#helpToggle,#updatesToggle{margin-bottom:.35rem}#updatesPanel h3{color:var(--text);font-size:.95rem;margin:.35rem 0 .2rem}#updatesPanel ul{margin:0 0 .5rem 1.1rem;padding:0}#instructions{color:var(--text-muted);text-align:left;margin:.35rem auto 0;width:fit-content}#instructions h3{color:var(--text);font-size:.95rem;margin:.35rem 0 .2rem}#appVersion{display:block;color:var(--text-muted);margin-top:1rem;margin-bottom:.2rem}#appGithubLinkWrap{display:block;margin-bottom:.5rem}#appGithubLink{color:var(--link)}#appGithubLink:visited{color:var(--link-visited)}#settingsModal{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;display:grid;place-items:center;padding:1rem}.modal-content{min-width:min(300px,100%);max-width:min(460px,100%);max-height:90vh;overflow-y:auto;background:var(--panel);border:1px solid var(--panel-border);border-radius:.75rem;padding:1.15rem;display:grid;gap:.5rem;text-align:left}.modal-content h2{margin:0 0 .35rem;font-size:1.15rem}#selfVoiceGroup{display:grid;gap:.5rem;border-top:1px solid var(--panel-border);padding-top:.65rem}#selfVoiceGroup h3{margin:0;font-size:1rem;color:var(--text)}#selfVoiceGroup input[type=range]{width:100%}.setting-row{display:flex;align-items:center;gap:.5rem}.hidden{display:none!important}@media(max-width:32rem){.auth-row,.nickname-row{flex-direction:column;align-items:stretch;gap:.25rem}.auth-row label,.nickname-row label{min-width:0;text-align:left}.auth-row input,.nickname-row input{width:100%}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}@media(prefers-contrast:more){:root{--text-muted: var(--text);--panel-border: var(--text);--input-border: var(--text)}}@media(forced-colors:active){:focus-visible{outline:3px solid Highlight;outline-offset:2px;box-shadow:none}.brand-frame,.brand-grid path,.brand-wave path{stroke:CanvasText}.brand-dot{fill:CanvasText}}