:root{color-scheme:dark;--green:#a5edb1;--dim:#658371;--amber:#efbd70;--line:#2c4033;--black:#090e0c;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:radial-gradient(ellipse at top,#203127 0,var(--black) 70%) fixed;color:var(--green);overflow:hidden;-webkit-text-size-adjust:100%}
.console{height:100%;height:100svh;display:flex;flex-direction:column;align-items:center;padding:max(14px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}
.masthead{flex:none;text-align:center;margin:0 0 12px}
.eyebrow{font-size:10px;letter-spacing:.16em;color:var(--dim)}
h1{font-size:clamp(15px,3.4vw,22px);font-weight:500;margin:4px 0 0;letter-spacing:.07em}
.monitor{flex:1 1 auto;min-height:0;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}
.screen{position:relative;line-height:0;background:#020503;border:3px solid #070b08;border-radius:7px;box-shadow:0 0 0 1px #415145,0 18px 60px #000a,0 0 40px #1c3a2a40;overflow:hidden;touch-action:none;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
#feed{display:block;image-rendering:pixelated;image-rendering:crisp-edges;image-rendering:pixelated;width:320px;height:240px;cursor:pointer;outline:none}
#feed:focus-visible{outline:2px solid var(--amber);outline-offset:-2px}
.vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse,transparent 55%,#0006 100%);box-shadow:inset 0 0 28px #0006}
.loading{position:absolute;inset:0;display:grid;place-content:center;text-align:center;line-height:1.5;background:#020503}
.loading strong{font-weight:500;font-size:clamp(14px,3.4vw,20px);letter-spacing:.14em}
.loading small{color:var(--dim);font-size:10px;letter-spacing:.1em;margin-top:6px}
.loading.err strong{color:var(--amber)}
.hint{position:absolute;left:0;right:0;top:46%;text-align:center;font-size:11px;letter-spacing:.16em;color:var(--green);text-shadow:0 1px 4px #000,0 0 8px #000;pointer-events:none;opacity:0;transition:opacity 1.2s}
.hint.on{opacity:.85}
.caption{display:flex;justify-content:space-between;gap:12px;margin-top:9px;font-size:10px;letter-spacing:.12em;color:var(--dim);white-space:nowrap}
.caption .demo{color:var(--amber)}
footer{flex:none;margin-top:12px;color:var(--dim);font-size:10px;letter-spacing:.06em;line-height:1.6;text-align:center;max-width:60ch}
.fatal{color:var(--amber);text-align:center}
@media (max-height:420px){.masthead{display:none}footer{display:none}.caption{margin-top:4px}}
[hidden]{display:none!important}