:root { color-scheme: dark; --ink: #eef2ed; --line: rgba(220, 230, 220, .28); --accent: #d5ff63; }

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #080b0b; }
body { color: var(--ink); font-family: ui-monospace, Consolas, monospace; overflow: hidden; }
.stage { min-height: 100vh; display: grid; grid-template-rows: minmax(0, 1fr) auto; position: relative; isolation: isolate; }
.stage::before { content: ''; position: fixed; inset: 0; z-index: -2; background: radial-gradient(ellipse at 50% 38%, #26372f 0%, #101714 47%, #080b0b 82%); }
.viewport { min-height: 0; position: relative; overflow: hidden; }
.viewport canvas { display: block; width: 100%; height: 100%; }
.loading, .error { position: absolute; z-index: 5; inset: 50% auto auto 50%; transform: translate(-50%, -50%); font-size: 11px; letter-spacing: .12em; color: var(--accent); }
.error { width: min(90%, 620px); padding: 18px; border: 1px solid #ff7b63; color: #ff9a86; background: rgba(40, 10, 7, .9); line-height: 1.7; }
.console { position: relative; z-index: 6; width: min(100%, 760px); margin: 0 auto; padding: 12px 6vw 24px; }
.speech-form { display: flex; gap: 10px; }
.speech-form input { min-width: 0; flex: 1; border: 1px solid var(--line); border-radius: 3px; padding: 13px 14px; outline: 0; color: var(--ink); background: rgba(8, 11, 11, .84); font: 600 17px system-ui, sans-serif; letter-spacing: .03em; }
.speech-form input::placeholder { color: rgba(238, 242, 237, .5); }
.speech-form button { border: 1px solid var(--accent); border-radius: 3px; padding: 0 18px; color: #0b100c; background: var(--accent); cursor: pointer; font: 700 12px ui-monospace, monospace; transition: filter .2s; }
.speech-form button:hover, .speech-form button:focus-visible { filter: brightness(1.15); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 600px) { .console { padding-inline: 5vw; } .speech-form input { font-size: 18px; } .speech-form button { padding-inline: 14px; } }