/* WarGames command terminal meets a restrained cyberpunk bezel. Native canvases remain untouched. */
:root{--product-bg:#050d16;--product-accent:#65fbd2;--product-line:#285564;--os-bg:#050d16;--os-text:#e0f2ee;--os-accent:#65fbd2;--accent:#65fbd2;--line:#285564;--ink:#e0f2ee;--paper:#050d16}
html[data-theme=light]{--product-bg:#e6eeed;--product-accent:#005b4c;--product-line:#759b9c;--os-bg:#e6eeed;--os-text:#102c32;--os-accent:#005b4c;--accent:#005b4c;--ink:#102c32;--paper:#e6eeed;--line:#759b9c}
html,body{background:var(--product-bg);color:var(--os-text)}
body{background-image:linear-gradient(125deg,transparent 65%,#ee5fc609),repeating-linear-gradient(0deg,transparent 0 3px,#65fbd204 3px 4px)}
.product-app .console{border:1px solid var(--product-line);box-shadow:0 0 45px #22d8cb0a}
.product-app .reader-header{border-bottom:1px solid #ee5fc677;background:var(--product-bg)}
.reader-wordmark{font-family:ui-monospace,monospace!important;letter-spacing:.14em;text-transform:uppercase;color:var(--product-accent)!important}
.reader-wordmark::before{content:'> ';color:#ee5fc6}
.product-app .transport,.product-app .bezel,.product-app .identity,.product-app .instrument-title{font-family:ui-monospace,monospace}
.product-app .instrument{background-image:linear-gradient(#65fbd206 1px,transparent 1px),linear-gradient(90deg,#65fbd206 1px,transparent 1px);background-size:64px 64px}
.product-app .narrative-window{border-left:2px solid var(--product-accent)}
.product-app button:focus-visible,.product-app select:focus-visible,a:focus-visible{outline:2px solid #ee5fc6;outline-offset:3px}
#hacker-read{color:var(--product-accent);font:12px ui-monospace,monospace;white-space:nowrap;padding:8px}
body:has(.room-book){background-color:var(--product-bg)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

html[data-theme=dark]{--paper:#050d16;--ink:#e0f2ee;--muted:#9cbfb9;--accent:#65fbd2;--line:#285564}
.read-brand{font-family:ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.read-brand::before{content:'> ';color:#ee5fc6}

#hacker-app-controls{display:grid;gap:10px;width:100%;padding-block:14px;border-top:1px solid var(--line,var(--product-line));font:12px/1.5 ui-monospace,monospace}
#hacker-app-controls button{width:100%;text-align:left;white-space:normal}
#hacker-app-controls output{display:block;font:inherit;overflow-wrap:anywhere}