:root {
    --fg: #33ff66; --fg-rgb: 51, 255, 102; --bg: #031a07; --bg-hi: #073012; --bg-lo: #010c03; --hot: #dcffe5;
    --mono: "SF Mono", "IBM Plex Mono", Menlo, Consolas, "Cascadia Mono", "DejaVu Sans Mono", "Liberation Mono", "Nimbus Mono PS", monospace;
    --fs-base: clamp(13px, 0.5rem + 0.62vw, 17.5px);
    --fs: calc(var(--fs-base) * var(--text-scale));
    --lh: 1.38;
    --bezel: clamp(8px, 1.9vw, 28px);
    --status-h: calc(var(--fs) * 1.95);
    --pad-x: clamp(16px, 3vw, 50px);
    --warn: #ffd166; --bad: #ff7b72;
    --shadow: 0 0 1px rgba(var(--fg-rgb), .9), 0 0 6px rgba(var(--fg-rgb), .5), 0 0 17px rgba(var(--fg-rgb), .22);
}
html[data-preset="p3"] { --fg: #ffb000; --fg-rgb: 255, 176, 0; --bg: #1a0f00; --bg-hi: #2c1a02; --bg-lo: #0c0600; --hot: #fff1cc; }
html[data-preset="ice"] { --fg: #9fe7ff; --fg-rgb: 159, 231, 255; --bg: #02111a; --bg-hi: #07243a; --bg-lo: #01070c; --hot: #f2fcff; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0a0b09; }
body {
    /* --viewport-h is the part an on-screen keyboard leaves visible; main.ts keeps it current. */
    height: 100vh; height: 100dvh; height: var(--viewport-h, 100dvh);
    display: grid; grid-template-rows: minmax(0, 1fr) auto;
    font-family: var(--mono); color: var(--fg);
    -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
kbd { font: inherit; border: 1px solid currentColor; border-radius: 3px; padding: 0 .4ch; margin: 0 .1ch; }

/* ---- the monitor: housing, glass and phosphor */
.monitor {
    position: relative; min-height: 0;
    padding: var(--bezel) var(--bezel) calc(var(--bezel) * .55);
    background:
        radial-gradient(120% 70% at 50% -10%, rgba(255, 255, 255, .05), transparent 60%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .012) 0 1px, transparent 1px 3px),
        linear-gradient(#1d1f1a, #121310 70%, #0e0f0c);
}
.screen {
    position: relative; height: 100%; overflow: hidden; isolation: isolate;
    border-radius: 30px / 26px; background: #000;
    box-shadow: 0 0 0 1px #000, 0 0 0 6px #161814, 0 0 0 7px #262822, 0 0 70px 6px rgba(var(--fg-rgb), .09), 0 14px 40px rgba(0, 0, 0, .6);
}
.crt {
    position: absolute; inset: 0; border-radius: inherit; overflow: hidden;
    background: radial-gradient(120% 95% at 50% 46%, var(--bg-hi) 0%, var(--bg) 52%, var(--bg-lo) 100%);
}

/* ---- transcript */
.term {
    position: absolute; inset: 0 0 var(--status-h) 0; z-index: 1;
    overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
    padding: clamp(16px, 2.6vw, 38px) var(--pad-x) 14px;
    font-size: var(--fs); line-height: var(--lh); color: var(--fg);
    scrollbar-width: thin; scrollbar-color: rgba(var(--fg-rgb), .35) transparent;
    outline: none;
}
html[data-scanlines="on"] .term { text-shadow: var(--shadow); }
.term::-webkit-scrollbar { width: 8px; }
.term::-webkit-scrollbar-thumb { background: rgba(var(--fg-rgb), .3); border-radius: 4px; }
.term ::selection { background: var(--fg); color: var(--bg); text-shadow: none; }
.l { white-space: pre-wrap; overflow-wrap: anywhere; min-height: calc(var(--lh) * 1em); }
.logo { margin: 0 0 .6em; font: inherit; line-height: 1.04; white-space: pre; overflow: hidden; color: var(--hot); }
.dim, .hint { color: rgba(var(--fg-rgb), .58); }
.mark { color: var(--fg); font-weight: 700; }
.message { color: var(--hot); }
.answered { color: rgba(var(--fg-rgb), .8); }
.err { color: var(--bad); }
.ok { color: var(--fg); }
.fail { color: var(--bad); }
.frame { display: inline-block; min-width: 1ch; }

.prompt { margin: .15em 0; }
.field { display: flex; flex-wrap: wrap; gap: 0 1ch; }
.field-input {
    flex: 1 1 14ch; min-width: 0; padding: 0; margin: 0; border: 0; border-radius: 0; outline: 0;
    background: transparent; color: var(--hot); font: inherit; letter-spacing: inherit;
    caret-color: var(--hot); text-shadow: inherit;
}
.field-input.short { flex: 0 0 2ch; width: 2ch; }
.field-input.masked { -webkit-text-security: disc; }
.choices { list-style: none; margin: 0; padding: 0; outline: none; }
.choice { white-space: pre-wrap; overflow-wrap: anywhere; cursor: pointer; padding-right: 1ch; }
.choice .ptr { display: inline-block; white-space: pre; }
.choice.sel { color: var(--hot); font-weight: 700; }
.choice:not(.sel):hover { color: var(--hot); }
.choices:focus-visible .choice.sel { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ---- tables */
.tbl-wrap { --tone: var(--fg); margin: .5em 0; max-width: 100%; overflow-x: auto; }
.tbl-wrap[data-tone="red"] { --tone: var(--bad); }
.tbl { border-collapse: collapse; max-width: 100%; }
.tbl th, .tbl td {
    border: 1px solid rgba(var(--fg-rgb), .5); padding: .12em 1ch; text-align: left; vertical-align: top;
    overflow-wrap: anywhere; font-weight: 400;
}
.tbl thead th { color: var(--tone); font-weight: 700; border-color: var(--tone); }
.tbl-wrap[data-tone="red"] .tbl th, .tbl-wrap[data-tone="red"] .tbl td { border-color: var(--bad); }
.link { color: inherit; text-decoration: none; }
.secret .tbl-wrap { outline: 1px dashed var(--warn); outline-offset: 3px; }
.secret .dim { color: var(--warn); }

/* ---- status line, in the manner of tmux */
.status {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: var(--status-h);
    display: flex; align-items: center; gap: 1.4ch; padding: 0 var(--pad-x);
    font-size: calc(var(--fs) * .8); letter-spacing: .05em; white-space: nowrap; overflow: hidden;
    background: rgba(var(--fg-rgb), .86); color: var(--bg);
    box-shadow: 0 0 26px rgba(var(--fg-rgb), .38), 0 -1px 0 rgba(var(--fg-rgb), .5);
}
.status .tag { font-weight: 700; background: var(--bg); color: var(--fg); padding: .12em .7ch; }
.status .state { font-weight: 700; }
.status .state.unlocked::before { content: "● "; }
.status .fill { flex: 1; }
.status kbd { border-color: rgba(0, 0, 0, .55); }

/* ---- glass */
.ov { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; }
.scan { z-index: 5; background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, .3) 2px, rgba(0, 0, 0, .3) 3px); }
.scan::after {
    content: ""; position: absolute; inset: 0;
    background: repeating-linear-gradient(90deg, rgba(255, 40, 40, .035) 0 1px, rgba(40, 255, 40, .02) 1px 2px, rgba(40, 40, 255, .035) 2px 3px);
}
.roll {
    z-index: 6; inset: auto 0 auto 0; top: 0; height: 20%; border-radius: 0;
    background: linear-gradient(180deg, rgba(var(--fg-rgb), 0) 0%, rgba(var(--fg-rgb), .025) 55%, rgba(var(--fg-rgb), .055) 90%, rgba(var(--fg-rgb), .085) 96%, rgba(var(--fg-rgb), .02) 99%, rgba(var(--fg-rgb), 0) 100%);
    animation: roll 8.5s linear infinite;
}
@keyframes roll { from { transform: translateY(-100%); } to { transform: translateY(520%); } }
.flicker { z-index: 7; background: #000; opacity: 0; animation: flicker 5.3s steps(1) infinite; }
@keyframes flicker {
    0% { opacity: .02; } 4% { opacity: .05; } 8% { opacity: 0; } 12% { opacity: .035; } 19% { opacity: .01; } 23% { opacity: .06; } 26% { opacity: .015; }
    34% { opacity: .04; } 41% { opacity: 0; } 47% { opacity: .03; } 52% { opacity: .07; } 54% { opacity: .01; } 63% { opacity: .045; } 71% { opacity: .02; }
    77% { opacity: .055; } 83% { opacity: .01; } 90% { opacity: .04; } 96% { opacity: .02; }
}
.vignette {
    z-index: 8;
    background: radial-gradient(ellipse 78% 74% at 50% 50%, rgba(0, 0, 0, 0) 56%, rgba(0, 0, 0, .32) 78%, rgba(0, 0, 0, .78) 100%);
    box-shadow: inset 0 0 90px 18px rgba(0, 0, 0, .72), inset 0 0 8px 2px rgba(0, 0, 0, .95);
}
.glass {
    z-index: 9;
    background:
        radial-gradient(55% 40% at 20% 6%, rgba(255, 255, 255, .075), rgba(255, 255, 255, 0) 70%),
        radial-gradient(40% 22% at 84% 96%, rgba(255, 255, 255, .028), rgba(255, 255, 255, 0) 70%),
        linear-gradient(168deg, rgba(255, 255, 255, .035) 0%, rgba(255, 255, 255, 0) 32%);
}
html[data-sweep="soft"] .roll { opacity: .3; animation-duration: 16s; }
html[data-sweep="off"] .roll { display: none; }
html[data-scanlines="off"] .scan { display: none; }
html[data-curvature="off"] .roll, html[data-curvature="off"] .flicker, html[data-curvature="off"] .vignette, html[data-curvature="off"] .glass { display: none; }
html[data-curvature="off"] .monitor { padding: 0; background: #000; }
html[data-curvature="off"] .screen { border-radius: 0; box-shadow: none; }

/* ---- bezel strip: brand and display dials */
.strip {
    display: flex; align-items: center; justify-content: space-between; gap: clamp(10px, 1.6vw, 22px);
    padding: calc(var(--bezel) * .35) var(--bezel) calc(var(--bezel) * .6 + env(safe-area-inset-bottom));
    background: linear-gradient(#10110e, #0b0c0a); border-top: 1px solid rgba(255, 255, 255, .035);
    color: #9d9889; min-width: 0;
}
.brand { display: flex; align-items: center; gap: 10px; flex: none; }
.led { width: 9px; height: 9px; border-radius: 50%; background: var(--fg); box-shadow: 0 0 6px var(--fg), 0 0 14px rgba(var(--fg-rgb), .6); }
.brand-name { font-size: 12px; font-weight: 700; letter-spacing: .34em; text-transform: uppercase; color: #b9b3a2; }
.dials { display: flex; align-items: center; gap: 8px; flex: none; }
.key {
    flex: none; font: 600 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
    color: #d4cebd; background: linear-gradient(#2d2f29, #1e201b 60%, #1a1b17);
    border: 1px solid #060705; border-radius: 5px; padding: 9px 12px 8px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), inset 0 -2px 0 rgba(0, 0, 0, .25), 0 2px 0 #050604, 0 4px 8px rgba(0, 0, 0, .45);
    cursor: pointer; touch-action: manipulation;
}
.key:hover { color: #fff8e6; }
.key:active { transform: translateY(2px); }
.key:disabled { opacity: .4; cursor: default; }
.key:disabled:hover { color: #d4cebd; }
.key:disabled:active { transform: none; }
/* A key that switches something lights up in the phosphor colour while it is on and goes dark while it is off. */
.key[aria-pressed="false"], .key[data-level="off"] { color: #8f8a7e; }
.key[aria-pressed="false"]:hover, .key[data-level="off"]:hover { color: #d4cebd; }
.key[aria-pressed="true"], .key[data-level="full"] {
    color: var(--fg); text-shadow: 0 0 4px rgba(var(--fg-rgb), .9), 0 0 10px rgba(var(--fg-rgb), .5);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), inset 0 -2px 0 rgba(0, 0, 0, .25), inset 0 0 10px rgba(var(--fg-rgb), .18),
        0 2px 0 #050604, 0 4px 8px rgba(0, 0, 0, .45), 0 0 12px rgba(var(--fg-rgb), .22);
}
.key[data-level="soft"] {
    color: rgba(var(--fg-rgb), .7); text-shadow: 0 0 4px rgba(var(--fg-rgb), .45);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), inset 0 -2px 0 rgba(0, 0, 0, .25), inset 0 0 8px rgba(var(--fg-rgb), .08),
        0 2px 0 #050604, 0 4px 8px rgba(0, 0, 0, .45);
}
.key:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }

@media (max-width: 720px) {
    :root { --fs-base: 12px; --pad-x: 12px; --bezel: 8px; }
    .screen { border-radius: 18px / 16px; box-shadow: 0 0 0 1px #000, 0 0 0 4px #161814, 0 0 40px 4px rgba(var(--fg-rgb), .09); }
    .brand { display: none; }
    .strip { justify-content: center; padding: 6px 8px calc(8px + env(safe-area-inset-bottom)); }
    .dials { flex: 1 1 auto; flex-wrap: wrap; justify-content: center; }
    .key { padding: 9px 10px 8px; letter-spacing: .1em; }
    .status .wide { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .roll, .flicker { animation: none; display: none; }
}