/* Themes of the simulator, chosen in the options (js/themes.js adds the moving parts).
   The default look has no rules here: it is style.css and cpu.css, with the diagram colours from the options. */

@font-face { font-family: "Silkscreen"; font-weight: 400; font-display: swap; src: url(../assets/fonts/silkscreen-400-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Silkscreen"; font-weight: 400; font-display: swap; src: url(../assets/fonts/silkscreen-400-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Silkscreen"; font-weight: 700; font-display: swap; src: url(../assets/fonts/silkscreen-700-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Silkscreen"; font-weight: 700; font-display: swap; src: url(../assets/fonts/silkscreen-700-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "VT323"; font-weight: 400; font-display: swap; src: url(../assets/fonts/vt323-400-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "VT323"; font-weight: 400; font-display: swap; src: url(../assets/fonts/vt323-400-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------------------------------------------------------------- shared effect parts */
.fx-back, .fx-front { position: fixed; inset: 0; pointer-events: none; }
.fx-back { z-index: -1; }
.fx-photo { position: fixed; inset: 0; z-index: -2; background: center / cover no-repeat; filter: var(--fx-photo-filter, none); pointer-events: none; }
.fx-front { z-index: 30; }
.fx-wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.fx-signal {
  fill: none;
  stroke-width: var(--fx-signal-width, 3);
  stroke-dasharray: var(--fx-signal-dash, 14 186);
}
.fx-banner {
  position: absolute;
  left: 50%;
  top: 44%;
  transform: translate(-50%, -50%);
  z-index: 5;
  padding: 0.4em 0.9em;
  font-size: 4cqw;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  animation: fx-banner 1.3s ease-out forwards;
}
@keyframes fx-banner {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(1.4); }
  12%, 70% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -60%) scale(1); }
}
.fx-particle { position: fixed; z-index: 35; pointer-events: none; font-size: 15px; line-height: 1; }
.fx-float { position: fixed; z-index: 35; pointer-events: none; white-space: nowrap; animation: fx-float 1.1s ease-out forwards; }
@keyframes fx-float { from { transform: translate(-50%, 0); opacity: 1; } to { transform: translate(-50%, -46px); opacity: 0; } }
.fx-notice {
  position: fixed;
  top: 66px;
  left: 50%;
  z-index: 36;
  min-width: 290px;
  padding: 9px 30px 11px;
  text-align: center;
  pointer-events: none;
  transform: translateX(-50%);
  animation: fx-notice 3.4s ease-in-out forwards;
}
.fx-notice-title { font-size: 21px; font-weight: 700; }
@keyframes fx-notice { 0% { opacity: 0; } 12%, 80% { opacity: 1; } 100% { opacity: 0; } }
.fx-ring {
  position: fixed;
  z-index: 35;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  pointer-events: none;
  animation: fx-ring 0.65s ease-out forwards;
}
@keyframes fx-ring { from { transform: scale(0.4); opacity: 1; } to { transform: scale(7); opacity: 0; } }
/* square checkboxes for the looks without rounded corners */
:root:is([data-look="cogmind"], [data-look="cyberpunk"], [data-look="pcb"], [data-look="ascii"], [data-look="military"], [data-look="temple"]) { --check-radius: 0; }
:root[data-look="temple"] .topbar input[type="checkbox"] { border-color: #fff; } /* the accent is the blue of the bar itself */
.fx-chip { font: 700 12px var(--mono); color: var(--accent); white-space: nowrap; margin-left: auto; }
/* wider fonts and the extra parts must not push the title to a second row */
:root[data-look]:not([data-look="default"]) .title { flex: 1 1 0; min-width: 0; text-align: right; }
.cpu.fx-shake { animation: fx-shake 0.4s linear; }
/* the diagram shaken for a moment must not bring up a scroll bar */
.cpu-scroll:has(.fx-shake, .fx-glitch, .mx-glitch) { overflow-x: hidden; }
@keyframes fx-shake { 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }

/* the long displays of the looks give way before the menus do */
@media (max-width: 1000px) {
  .cp-ticker, .mil-clock, .mil-ammo { display: none !important; }
  .fx-chip, .pcb-seg, .mil-hud { margin-left: 0; }
}

:root.fx-calm {
  .fx-signal, .fx-lights i, .cpu.fx-shake, .cpu.fx-glitch, 
  .cpu .reg.check::before, .cpu .reg.check::after { animation: none !important; }
  .mx-cat, .status, .cpu .reg.check input { animation: none !important; }
  .cp-wipe { display: none; }
}
@media print {
  .fx-photo, .fx-back, .fx-front, .fx-notice, .cp-tear, .cp-wipe, .asc-logo, .cog-log, .mil-brief, .mil-stamp, .tos-boot { display: none; }
}

/* ---------------------------------------------------------------- Cogmind: everything framed by the game's wall tiles, its pixel type and its green */
:root[data-look="cogmind"] {
  --bg: #000; --surface: #000; --surface-2: #041007; --text: #2fd84e; --muted: #17883a; --border: #17883a;
  --accent: #2fd84e; --accent-text: #000; --accent-soft: #0a3a18; --row-current: #3a2a0c; --cell-current: #ffb02e; --cell-current-text: #140b00;
  --check: #ffb02e; --danger: #ff4a2e; --danger-soft: #3c150b; --ok: #2fd84e; --mem-cursor: #0a4a1c; --select: #0a3a18;
  --info: #5fe07a; --warn: #ffb02e; --confirm: #ffb02e; --attempt-bg: #041007; --attempt-line: #17883a; --finished-bg: #041007; --finished-line: #2fd84e;
  --viewer-bg: #041007; --viewer-line: #17883a; --log-change: #ffb02e; --log-auto: #5fe07a; --toast-bg: #000; --toast-text: #2fd84e;
  --mono: VT323, Consolas, monospace; --sans: VT323, Consolas, monospace;
  --cog-title: Silkscreen, VT323, Consolas, monospace;
  --fx-photo-filter: brightness(0.32) saturate(0.7);
  --shadow: 0 0 0 2px #2fd84e;
  color-scheme: dark;

  body { background: #000; font-size: 18px; }
  @media (max-width: 1400px) { .title { display: none; } }
  &.cog-open .panel, &.cog-open .cpu { animation: cog-open 0.6s steps(12); }
  .panel, .topbar, .menu-list, dialog, .btn, .lang, .table-scroll, .cell-desc, .minilog, .info div, .toast, .menu summary, .menu-list button { border-radius: 0; }

  .topbar { padding: 2px 10px 18px; background: url(../assets/looks/cog-tile.png) left bottom / 16px 16px repeat-x, #000; border: 0; image-rendering: pixelated; }
  .brand { color: #ffb02e; font: 700 16px var(--cog-title); }
  .brand::before, .brand::after { color: #17883a; }
  .brand::before { content: "-= "; }
  .brand::after { content: " =-"; }
  .menu summary { padding: 2px 8px; font: 14px var(--cog-title); letter-spacing: 0.04em; }
  .menu summary::before { content: "< "; color: #17883a; }
  .menu summary::after { content: " >"; color: #17883a; }
  .menu summary:hover, .menu[open] summary { color: #000; background: #2fd84e; }
  .menu summary:hover::before, .menu[open] summary::before, .menu summary:hover::after, .menu[open] summary::after { color: #000; }
  .menu-list { background: #000; border: 2px solid #2fd84e; }
  .menu-list button { font-size: 18px; }
  .menu-list button:hover:not(:disabled) { color: #000; background: #2fd84e; }
  .title { color: #17883a; font: 12px var(--cog-title); }
  .lang { color: #2fd84e; background: #000; border: 2px solid #2fd84e; font: 12px var(--cog-title); }

  /* the frame of every panel is a row of wall tiles */
  .panel { padding: 4px 6px; background: #000; border: 16px solid transparent; border-image: url(../assets/looks/cog-wall.png) 24 round; image-rendering: pixelated; }
  .panel > * { image-rendering: auto; }
  .panel h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; color: #2fd84e; font: 400 14px var(--cog-title); letter-spacing: 0.22em; text-transform: uppercase; white-space: nowrap; }
  .panel h2::before { content: "/"; }
  .panel h2::after { content: "/"; order: 1; }
  .panel h2 { justify-content: flex-end; box-shadow: inset 0 -2px 0 #17883a; padding-bottom: 3px; }
  .panel h3 { color: #17883a; font: 400 12px var(--cog-title); letter-spacing: 0.08em; text-transform: uppercase; }
  .table-scroll { background: #000; border: 2px solid #17883a; }
  .grid { font: 17px/1 var(--mono); }
  .grid th { color: #2fd84e; background: #000; font: 400 11px var(--cog-title); border-bottom: 2px solid #17883a; }
  .grid td { height: 20px; border-color: #041007; }
  .grid td:first-child { color: #17883a; background: #000; }
  .info { gap: 6px; }
  .info div { background: #000; box-shadow: inset 0 0 0 2px #17883a; }
  .info dt { font: 10px var(--cog-title); color: #17883a; }
  .info dd { color: #2fd84e; font: 400 24px/1 var(--mono); }
  .status { color: #2fd84e; font: 400 15px var(--cog-title); }
  .clock { color: #17883a; font: 16px var(--mono); }
  .minilog, .cell-desc { color: #2fd84e; background: #000; box-shadow: inset 0 0 0 2px #17883a; font: 17px/1.15 var(--mono); }
  .btn { color: #2fd84e; background: #000; border: 2px solid #2fd84e; font: 400 14px var(--cog-title); }
  .btn.primary { color: #000; background: #2fd84e; }
  .btn:hover:not(:disabled), .btn.primary:hover:not(:disabled) { color: #000; background: #ffb02e; border-color: #ffb02e; }
  .btn.confirm { color: #000; background: #ffb02e; border-color: #ffb02e; }
  .btn.link { color: #5fe07a; background: none; border: 0; font-size: 12px; }

  /* CORE, ENERGY and MATTER as the game's full-width bars */
  .cog-status { margin-bottom: 6px; font: 19px/1 var(--mono); }
  .cog-row { position: relative; height: 22px; margin-bottom: 2px; background: #041007; }
  .cog-row b { position: absolute; inset: 0 auto 0 0; transition: width 0.3s; }
  .cog-row span { position: absolute; left: 8px; top: 1px; white-space: nowrap; }
  .cog-core b { background: #0b5a18; }
  .cog-core span { color: #4dff6e; }
  .cog-energy { background: #03191f; }
  .cog-energy b { background: #0d6480; }
  .cog-energy span { color: #7fe8ff; }
  .cog-matter { background: #150420; }
  .cog-matter b { background: #560d7a; }
  .cog-matter span { color: #e88bff; }
  .cog-line { color: #2fd84e; padding: 3px 0 0 8px; }

  .cpu {
    --d-bg: rgb(0 0 0 / 0.88); --d-bus: #6e6e6e; --d-text: #2fd84e; --d-ps: #041007; --d-font: var(--mono);
    --d-reg-bg: #000; --d-reg-text: #2fd84e; --d-reg-border: #2fd84e; --d-reg-hint: #17883a;
    --d-edit-bg: #2b1e07; --d-edit-border: #ffb02e; --d-check-text: #120a00; --d-focus: #ffb02e; --d-wrong: #a4240c; --d-right: #17683d;
    border: 16px solid transparent;
    border-image: url(../assets/looks/cog-wall.png) 24 round;
    image-rendering: pixelated;
    border-radius: 0;
    overflow: hidden;
  }
  /* the buses are the grey pipes of the game's machines */
  .cpu .wires .bus { stroke-width: 3; stroke-linejoin: miter; }
  .cpu .wires .bus.thin { stroke-width: 2; }
  .cpu .wires .alu { fill: #1a1a1a; stroke: #8c8c8c; stroke-width: 3; }
  .cpu .reg input, .cpu .flag input { border-width: 2px; border-radius: 0; font: 2cqw/1 var(--mono); image-rendering: auto; }
  .cpu .reg.bus input { color: #000; background: #2fd84e; }
  .cpu .flag.on input { color: #000; background: #2fd84e; }
  .cpu .reg-name { padding: 0 0.3cqw; font: 1.05cqw var(--cog-title); letter-spacing: 0.1em; background: #000; }
  .cpu.fx-sweep::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgb(47 216 78 / 0.22), transparent) no-repeat;
    background-size: 22% 100%;
    animation: cog-sweep 0.65s linear;
  }
  /* the register to check flashes in the orange of a target */
  .cpu .reg.check input { animation: cog-aim 0.8s steps(1) infinite; }
  .cog-log { position: absolute; left: 1%; bottom: 2%; width: 25.5%; padding: 0.2cqw 0.5cqw; overflow: hidden; white-space: nowrap; color: #17883a; font: 1.45cqw/1.05 var(--mono); background: #000; box-shadow: inset 0 0 0 2px #17883a; pointer-events: none; }
  .cog-log .cog-bad { color: #ff4a2e; }
  .cog-log .cog-good { color: #2fd84e; }
  .fx-banner { color: #ff4a2e; background: #000; border: 2px solid #ff4a2e; font: 2.4cqw var(--cog-title); }
}
@keyframes cog-open { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@keyframes cog-aim { 50% { filter: brightness(1.45); } }
@keyframes cog-sweep { from { background-position: -30% 0; } to { background-position: 130% 0; } }

/* ---------------------------------------------------------------- Cyberpunk: Night City behind a hard-edged HUD */
:root[data-look="cyberpunk"] {
  --bg: #05060d; --surface: #0b0d18; --surface-2: #12152a; --text: #dff9ff; --muted: #7f90a8; --border: #27304a;
  --accent: #fcee0a; --accent-text: #05060d; --accent-soft: #3d3a08; --row-current: #3a0c18; --cell-current: #fcee0a; --cell-current-text: #05060d;
  --check: #fcee0a; --danger: #ff2a3c; --danger-soft: #3d0614; --ok: #00f0ff; --mem-cursor: #063a48; --select: #1f2440;
  --info: #00f0ff; --warn: #fcee0a; --confirm: #00f0ff; --attempt-bg: #12152a; --attempt-line: #fcee0a; --finished-bg: #06303a; --finished-line: #00f0ff;
  --viewer-bg: #2e0d2c; --viewer-line: #ff2bd6; --log-change: #fcee0a; --log-auto: #ff2bd6; --toast-bg: #fcee0a; --toast-text: #05060d;
  --sans: "Bahnschrift SemiCondensed", Bahnschrift, "Arial Narrow", "Segoe UI", sans-serif; --mono: "Cascadia Mono", Consolas, monospace;
  --shadow: 0 0 0 1px #fcee0a, 0 0 26px rgb(252 238 10 / 0.25);
  color-scheme: dark;

  --fx-photo-filter: brightness(0.8) saturate(1.15);
  .topbar {
    background: none;
    color: #05060d;
    border: 0;
    padding-right: 34px;
    --select: #05060d;
    --muted: #4a4600;
  }
  /* on the bar's background only: a clip-path on the bar itself would cut off the drop-down menus */
  .topbar::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: #fcee0a;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
  }
  .brand { position: relative; color: #05060d; font-weight: 800; font-style: italic; font-size: 20px; text-transform: uppercase; letter-spacing: 0.04em; }
  .brand.fx-glitch::before, .brand.fx-glitch::after { content: attr(data-text); position: absolute; left: 0; top: 0; }
  .brand.fx-glitch::before { color: #ff2a3c; animation: cp-slice 0.3s steps(2) infinite; }
  .brand.fx-glitch::after { color: #008fa0; animation: cp-slice 0.3s steps(3) infinite reverse; }
  .menu summary { font-weight: 700; text-transform: uppercase; border-radius: 0; }
  .menu summary:hover, .menu[open] summary { color: #fcee0a; }
  .menu-list { --accent: #fcee0a; --select: #1f2440; color: var(--text); border: 1px solid #fcee0a; border-radius: 0; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%); }
  .menu-list button { border-radius: 0; text-transform: uppercase; letter-spacing: 0.03em; }
  .menu-list button:hover:not(:disabled) { background: #fcee0a; color: #05060d; }
  .title { color: #4a4600; text-transform: uppercase; font-size: 12px; font-weight: 700; }
  .lang { background: #05060d; color: #fcee0a; border: 0; border-radius: 0; font-weight: 700; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%); }
  .fx-hud { display: flex; align-items: center; gap: 12px; margin-left: 12px; min-width: 0; }
  .cp-ticker { font: 700 11px var(--mono); color: #6a6400; white-space: nowrap; overflow: hidden; max-width: 150px; }
  .cp-wallet { background: #05060d; color: #fcee0a; font: 700 13px var(--mono); padding: 2px 8px; white-space: nowrap; }
  .cp-wallet.cp-gain { color: #00f0ff; }
  .cp-wallet.cp-loss { color: #ff2a3c; }

  .panel {
    position: relative;
    background:
      linear-gradient(#00f0ff, #00f0ff) left top / 18px 2px no-repeat, linear-gradient(#00f0ff, #00f0ff) left top / 2px 18px no-repeat,
      linear-gradient(#ff2a3c, #ff2a3c) right bottom / 18px 2px no-repeat, linear-gradient(#ff2a3c, #ff2a3c) right bottom / 2px 18px no-repeat,
      rgb(9 9 22 / 0.88);
    border: 1px solid var(--border);
    border-radius: 0;
  }
  .panel h2 {
    align-self: flex-start;
    margin: -8px 0 8px -8px;
    padding: 3px 22px 3px 10px;
    background: #fcee0a;
    color: #05060d;
    font-size: 13px;
    font-weight: 800;
    font-style: italic;
    letter-spacing: 0.06em;
    clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  }
  .panel h2::before { content: "// "; }
  .panel h3 { color: #00f0ff; text-transform: uppercase; letter-spacing: 0.1em; font-size: 11px; }
  .panel h3::before { content: "▸ "; }
  .table-scroll, .cell-desc, .minilog, .info div { border-radius: 0; }
  .info div { border-left: 2px solid #00f0ff; text-align: left; }
  .info dt { text-transform: uppercase; letter-spacing: 0.08em; }
  .info dd { text-shadow: 0 0 8px currentColor; }
  .status { text-transform: uppercase; font-style: italic; letter-spacing: 0.06em; text-shadow: 0 0 10px currentColor; }
  .btn, .btn.primary {
    border-radius: 0;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 0.08em;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
  }
  .btn { background: #12152a; border-color: #00f0ff; color: #00f0ff; }
  .btn.primary { background: #fcee0a; color: #05060d; border-color: #fcee0a; }
  .btn.confirm { background: #00f0ff; color: #05060d; }
  .btn.danger { background: #ff2a3c; color: #05060d; }
  .btn:hover:not(:disabled) { filter: brightness(1.2); box-shadow: inset 0 0 14px rgb(0 240 255 / 0.6); }
  .btn:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px #ff2a3c; }
  .btn.link { background: none; clip-path: none; color: #00f0ff; text-transform: uppercase; font-size: 12px; }
  .grid th { text-transform: uppercase; letter-spacing: 0.06em; color: #fcee0a; }
  .toast { border-radius: 0; font-weight: 700; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); }
  .toast.bad { color: #05060d; }
  dialog { border-radius: 0; border-color: #fcee0a; }

  .cpu {
    --d-bg: rgb(6 5 16 / 0.6); --d-bus: #00d5e6; --d-text: #05060d; --d-ps: #1a1d36; --d-font: var(--sans);
    --d-reg-bg: rgb(5 6 13 / 0.94); --d-reg-text: #dff9ff; --d-reg-border: #00d5e6; --d-reg-hint: #56708a;
    --d-edit-bg: #2b2906; --d-edit-border: #fcee0a; --d-check-text: #05060d; --d-focus: #ff2bd6; --d-wrong: #a60028; --d-right: #067d8e;
    border-radius: 0;
    overflow: hidden;
    outline: 1px solid #00d5e6;
    outline-offset: -1px;
  }
  .cpu .wires .bus { stroke-width: 5; }
  .cpu .wires .bus.thin { stroke-width: 2.5; }
  .cpu .wires { filter: drop-shadow(0 0 4px #00d5e6); }
  .cpu .wires .alu { stroke: #fcee0a; stroke-width: 5; stroke-linejoin: round; filter: drop-shadow(0 0 5px rgb(252 238 10 / 0.5)); }
  .alu-block { fill: url(#cp-hazard); }
  .cpu .reg input, .cpu .flag input { font-weight: 600; border-width: 0 0 0 3px; border-radius: 0; box-shadow: inset 0 0 0 1px rgb(0 213 230 / 0.4); }
  .cpu .flag input { border-width: 1px; }
  .cpu .flag.on input { background: #00f0ff; color: #05060d; box-shadow: 0 0 10px #00f0ff; }
  .cpu .flag.editable input { color: #fcee0a; }
  .cpu .reg-name {
    padding: 0 0.7cqw 0 0.4cqw;
    background: #00d5e6;
    font-size: 1.4cqw;
    font-weight: 800;
    clip-path: polygon(0 0, 100% 0, calc(100% - 0.5cqw) 100%, 0 100%);
  }
  .cpu .flag .reg-name { padding: 0 0.3cqw; clip-path: none; font-size: 1cqw; }
  .cpu .reg.bus input { background: #fcee0a; color: #05060d; border-color: #05060d; }
  .cpu .reg.ps input { border-color: #ff2bd6; }
  /* the register being checked is locked on by a scanner */
  .cpu .reg.check::after {
    content: "";
    position: absolute;
    inset: -7px;
    pointer-events: none;
    background:
      linear-gradient(#ff2a3c, #ff2a3c) 0 0 / 12px 2px no-repeat, linear-gradient(#ff2a3c, #ff2a3c) 0 0 / 2px 12px no-repeat,
      linear-gradient(#ff2a3c, #ff2a3c) 100% 0 / 12px 2px no-repeat, linear-gradient(#ff2a3c, #ff2a3c) 100% 0 / 2px 12px no-repeat,
      linear-gradient(#ff2a3c, #ff2a3c) 0 100% / 12px 2px no-repeat, linear-gradient(#ff2a3c, #ff2a3c) 0 100% / 2px 12px no-repeat,
      linear-gradient(#ff2a3c, #ff2a3c) 100% 100% / 12px 2px no-repeat, linear-gradient(#ff2a3c, #ff2a3c) 100% 100% / 2px 12px no-repeat;
    animation: cp-lock 0.9s ease-in-out infinite;
  }
  .cpu.fx-glitch { animation: cp-glitch 0.3s steps(2) 1; }
  .cp-tear { position: fixed; left: 0; right: 0; z-index: 36; pointer-events: none; backdrop-filter: hue-rotate(150deg) saturate(3) brightness(1.3); background: rgb(255 42 60 / 0.12); border-top: 1px solid rgb(0 240 255 / 0.5); }
  .cp-wipe {
    position: fixed;
    inset: 0;
    z-index: 37;
    display: grid;
    place-items: center;
    background: #fcee0a;
    color: #05060d;
    font: italic 800 clamp(28px, 7vw, 84px) var(--sans);
    pointer-events: none;
    animation: cp-wipe 1s cubic-bezier(.7,0,.2,1) forwards;
  }
  .fx-banner { color: #05060d; background: #ff2a3c; font-style: italic; font-weight: 800; letter-spacing: 0.04em; text-shadow: 3px 0 #00f0ff; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%); }
  .fx-ring { border-radius: 0; border-color: #00f0ff; box-shadow: 0 0 12px #00f0ff; }
  .fx-float { font: italic 800 20px var(--sans); text-shadow: 0 0 8px currentColor, 0 1px 2px #000; }
}
@keyframes cp-glitch {
  0% { transform: translateX(-5px) skewX(1.4deg); filter: hue-rotate(40deg); }
  50% { transform: translateX(6px) skewX(-1.8deg); filter: hue-rotate(-50deg) saturate(1.8); }
  100% { transform: none; filter: none; }
}
@keyframes cp-slice {
  0% { clip-path: inset(10% 0 55% 0); transform: translateX(-3px); }
  100% { clip-path: inset(55% 0 8% 0); transform: translateX(3px); }
}
@keyframes cp-lock { 50% { transform: scale(1.04); opacity: 0.55; } }
@keyframes cp-wipe {
  0% { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
  35%, 65% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
  100% { clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); }
}

/* ---------------------------------------------------------------- Matrix: digital rain behind everything */
:root[data-look="matrix"] {
  --bg: #000000; --surface: #020a04; --surface-2: #04140a; --text: #5dff8a; --muted: #1f9c47; --border: #0d5c28;
  --accent: #00c83c; --accent-text: #000000; --accent-soft: #063d18; --row-current: #063d18; --cell-current: #d8ffe0; --cell-current-text: #001a08;
  --check: #d8ffe0; --danger: #ff3347; --danger-soft: #3a0810; --ok: #5dff8a; --mem-cursor: #0a4f22; --select: #06331a;
  --info: #d8ffe0; --warn: #d8ffe0; --confirm: #d8ffe0; --attempt-bg: #04140a; --attempt-line: #0d5c28; --finished-bg: #04140a; --finished-line: #00c83c;
  --viewer-bg: #04140a; --viewer-line: #0d5c28; --log-change: #d8ffe0; --log-auto: #9dffb8; --toast-bg: #04140a; --toast-text: #d8ffe0;
  --mono: Consolas, "Cascadia Mono", monospace; --sans: var(--mono);
  --shadow: 0 0 22px rgb(0 200 60 / 0.4);
  color-scheme: dark;

  .topbar { background: rgb(0 8 3 / 0.9); }
  .panel { background: rgb(0 8 3 / 0.84); }
  .panel h2, .brand, .status, .info dd { text-shadow: 0 0 8px currentColor; }
  .btn, .lang { background: #000; border-color: var(--accent); }
  .btn.primary { background: var(--accent); }
  .btn:hover:not(:disabled) { box-shadow: 0 0 10px var(--accent); }
  .btn.link { background: none; }
  .cpu {
    --d-bg: transparent; --d-bus: rgb(0 200 60 / 0.5); --d-text: #d8ffe0; --d-ps: #042410; --d-font: var(--mono);
    --d-reg-bg: #000; --d-reg-text: #5dff8a; --d-reg-border: #00c83c; --d-reg-hint: #1f9c47;
    --d-edit-bg: #063d18; --d-edit-border: #d8ffe0; --d-check-text: #001a08; --d-focus: #d8ffe0; --d-wrong: #a00c1c; --d-right: #128a38;
  }
  .cpu .reg.editable input, .cpu .flag.editable input { color: #d8ffe0; }
  .cpu .reg.check input { color: #001a08; }
  .cpu .reg.bus input { background: #063d18; }
  .cpu .reg-name { text-shadow: 0 0 6px #00c83c, 0 0 2px #000; }
  .fx-banner { color: #ff3347; background: #000; border: 1px solid #ff3347; text-shadow: 0 0 10px #ff3347; }
  .cpu { overflow: hidden; }
  .cpu.mx-glitch { animation: mx-glitch 0.45s steps(3); }
  .mx-cat { position: absolute; bottom: 4%; left: -6%; z-index: 4; font-size: 3.4cqw; pointer-events: none; animation: mx-cat 0.9s linear forwards; }
  .fx-ring { border-color: #d8ffe0; box-shadow: 0 0 14px #00c83c; }
}
@keyframes mx-glitch { 0% { transform: translateX(-4px); filter: brightness(1.7); } 50% { transform: translateX(4px); filter: hue-rotate(-90deg); } 100% { transform: none; } }
@keyframes mx-cat { to { left: 104%; } }

/* ---------------------------------------------------------------- Christmas: a snowy night outside, candy canes and wrapped presents inside */
:root[data-look="christmas"] {
  --bg: #0d1b33; --surface: #fbf5e6; --surface-2: #f3e9d2; --text: #2c1a14; --muted: #7a6152; --border: #d8c6a6;
  --accent: #b81f2a; --accent-text: #ffffff; --accent-soft: #f7d9d2; --row-current: #ffe9a8; --cell-current: #b81f2a; --cell-current-text: #ffffff;
  --check: #ffd34d; --danger: #b81f2a; --danger-soft: #f7d9d2; --ok: #1e7a40; --mem-cursor: #cfe8d4; --select: #efe0c2;
  --info: #1e7a40; --warn: #a8660a; --confirm: #1e7a40; --confirm-text: #ffffff; --attempt-bg: #f3e9d2; --attempt-line: #d8c6a6; --finished-bg: #d9eedd; --finished-line: #1e7a40;
  --viewer-bg: #f3e9d2; --viewer-line: #d8c6a6; --log-change: #b81f2a; --log-auto: #1e7a40; --toast-bg: #1e7a40; --toast-text: #ffffff;
  --sans: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --shadow: 0 10px 28px rgb(20 10 5 / 0.55);
  --fx-signal-width: 5; --fx-signal-dash: 0 44;
  --xmas-knit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='18' shape-rendering='crispEdges'%3E%3Crect width='48' height='18' fill='%23a81d27'/%3E%3Cpath fill='%23fbf5e6' d='M0 0h48v2H0zM0 16h48v2H0zM6 8h4v2H6zM4 6h2v2H4zM10 6h2v2h-2zM4 10h2v2H4zM10 10h2v2h-2zM2 4h2v2H2zM12 4h2v2h-2zM2 12h2v2H2zM12 12h2v2h-2zM30 8h4v2h-4zM28 6h2v2h-2zM34 6h2v2h-2zM28 10h2v2h-2zM34 10h2v2h-2zM26 4h2v2h-2zM36 4h2v2h-2zM26 12h2v2h-2zM36 12h2v2h-2z'/%3E%3Cpath fill='%231e7a40' d='M19 7h4v4h-4zM43 7h4v4h-4z'/%3E%3C/svg%3E");
  --xmas-cane: repeating-linear-gradient(-45deg, #c8232c 0 9px, #fff 9px 18px);
  color-scheme: light;

  .topbar { z-index: 21; padding-bottom: 22px; color: #fff; background: var(--xmas-knit) left bottom / 48px 18px repeat-x, linear-gradient(#8f1620, #a81d27); border: 0; --muted: #ffdcdc; --select: #6e0f17; --accent: #f4c95d; }
  .topbar .menu-list { color: var(--text); --accent: #b81f2a; --select: #efe0c2; --muted: #7a6152; }
  .brand { color: #fff; font-size: 17px; }
  .brand::before { content: "🎄 "; }
  .menu summary:hover, .menu[open] summary { color: #fff; }
  .lang { color: #fff; background: #6e0f17; border-color: #f4c95d; }
  .xmas-gifts { color: #fff; font-size: 14px; }
  .xmas-gifts.xmas-pop { animation: xmas-pop 0.45s ease-out; }
  .fx-lights { position: absolute; left: 0; right: 0; bottom: -10px; height: 16px; display: flex; justify-content: space-around; pointer-events: none; overflow: hidden; }
  .fx-lights i { width: 8px; height: 13px; border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%; background: #ff4752; box-shadow: 0 0 9px 2px currentColor; color: #ff4752; animation: xmas-blink 1.8s steps(1) infinite; }
  .fx-lights i:nth-child(4n + 2) { background: #4be36a; color: #4be36a; animation-delay: -0.45s; }
  .fx-lights i:nth-child(4n + 3) { background: #f4c95d; color: #f4c95d; animation-delay: -0.9s; }
  .fx-lights i:nth-child(4n + 4) { background: #5cc8ff; color: #5cc8ff; animation-delay: -1.35s; }

  /* a panel is a card framed with a candy cane */
  .panel { position: relative; margin-top: 9px; overflow: visible; color: var(--text); background: #fbf5e6; border: 6px solid transparent; border-radius: 12px; background: linear-gradient(#fbf5e6, #fbf5e6) padding-box, var(--xmas-cane) border-box; box-shadow: 0 8px 18px rgb(0 0 0 / 0.45); }
  .panel h2 { color: #b81f2a; font-size: 15px; letter-spacing: 0.02em; text-transform: none; }
  .panel h2::before { content: "❄ "; color: #3a78b8; }
  .panel h3 { color: #1e7a40; }
  .table-scroll { background: #fffdf6; }
  .grid th { color: #fff; background: #1e7a40; }
  .grid td { border-color: #efe0c2; }
  .grid td:first-child { color: #7a6152; background: #f3e9d2; }
  .info div { background: #f3e9d2; }
  .info dd { color: #b81f2a; }
  .status { color: #1e7a40; }
  .btn { color: #2c1a14; background: #fff; border: 2px solid #d8c6a6; border-radius: 9px; }
  .btn.primary { color: #fff; background: #b81f2a; border-color: #8f1620; box-shadow: 0 3px 0 #6e0f17; }
  .btn.confirm { color: #fff; background: #1e7a40; border-color: #145a2e; box-shadow: 0 3px 0 #0f4522; }
  .btn:active:not(:disabled) { transform: translateY(2px); box-shadow: none; }
  .btn.link { color: #b81f2a; background: none; border: 0; }

  /* the diagram is a window onto the night; the buses are strings of lights */
  .cpu {
    --d-bg: #0d1b33; --d-bus: #173d28; --d-text: #ffffff; --d-ps: #e7dcc4; --d-font: var(--sans);
    --d-reg-bg: #fbf5e6; --d-reg-text: #2c1a14; --d-reg-border: #8f1620; --d-reg-hint: #8c7d6a;
    --d-edit-bg: #fff4d0; --d-edit-border: #b81f2a; --d-check-text: #2a1a00; --d-focus: #ffd34d; --d-wrong: #ff8a8a; --d-right: #a5eab0;
    overflow: hidden;
    border: 6px solid #5c3a1c;
    border-radius: 10px;
    box-shadow: inset 0 0 0 2px #2c1a0c, 0 8px 18px rgb(0 0 0 / 0.5);
  }
  .xmas-night { position: absolute; inset: 0; width: 100%; height: 100%; }
  .cpu .wires .bus { stroke-width: 2.5; }
  .cpu .wires .bus.thin { stroke-width: 1.5; }
  .cpu .wires .alu { fill: rgb(244 201 93 / 0.28); stroke: #f4c95d; stroke-width: 2; }
  .fx-signal { stroke-linecap: round; opacity: 0.75; animation: xmas-glow 3.6s ease-in-out infinite; }
  .fx-signal.p0 { stroke: #ff4752; color: #ff4752; }
  .fx-signal.p1 { stroke: #4be36a; color: #4be36a; stroke-dashoffset: -15; animation-delay: -0.6s; }
  .fx-signal.p2 { stroke: #ffd34d; color: #ffd34d; stroke-dashoffset: -30; animation-delay: -1.2s; }
  /* registers are presents: a ribbon across the wrapping paper */
  .cpu .reg input { padding-right: 2cqw; border-width: 1px; border-radius: 3px; background-image: linear-gradient(90deg, transparent calc(100% - 1.7cqw), #c8232c calc(100% - 1.7cqw) calc(100% - 0.9cqw), transparent calc(100% - 0.9cqw)); box-shadow: 0 2px 5px rgb(0 0 0 / 0.5); }
  .cpu .flag input { border-radius: 50%; color: #fff; background: radial-gradient(circle at 35% 30%, #5a78b8, #1f3a70); border-color: #f4c95d; }
  .cpu .flag.on input { color: #2a1a00; background: radial-gradient(circle at 35% 30%, #fff3b0, #ffc21f); box-shadow: 0 0 12px #ffd34d; }
  .cpu .reg.bus input { color: #2a1a00; background-color: #ffe9a8; }
  .cpu .reg.ps input { background-color: #e7dcc4; }
  .cpu .reg-name { text-shadow: 0 1px 3px #000; font-weight: 700; }
  .cpu .reg.check input { background-image: none; box-shadow: 0 0 14px #ffd34d; }
  .cpu .reg.check::after { content: "🎀"; position: absolute; right: -0.8cqw; top: -55%; font-size: 2.4cqw; pointer-events: none; animation: xmas-swing 1s ease-in-out infinite; }
  .fx-banner { color: #fff; background: #b81f2a; border: 3px solid #f4c95d; border-radius: 10px; }
  .fx-float { font: 700 18px var(--sans); text-shadow: 0 1px 3px #000; }
  .fx-notice { color: #fff; font-size: 14px; background: #1e7a40; border: 3px solid #f4c95d; border-radius: 12px; box-shadow: 0 8px 22px rgb(0 0 0 / 0.5); }
  .fx-notice-title { color: #ffd34d; font-size: 23px; }
}
@keyframes xmas-glow { 50% { opacity: 0.4; } }
@keyframes xmas-pop { 40% { transform: scale(1.5); } }
@keyframes xmas-swing { 50% { transform: rotate(14deg) translateY(-2px); } }
@keyframes xmas-blink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: 0.3; } }

/* ---------------------------------------------------------------- PCB: the whole page is one green board, with buses of parallel traces under the solder mask */
:root[data-look="pcb"] {
  --pcb-mask: #0a5a37; --pcb-trace: #22a264; --pcb-gold: #e2bd62; --pcb-silk: #f4f4ea;
  --bg: #0a5a37; --surface: #0a5a37; --surface-2: #084a2d; --text: #f4f4ea; --muted: #a8dcc0; --border: #f4f4ea;
  --accent: #e2bd62; --accent-text: #1a1204; --accent-soft: #3d6a30; --row-current: #1c7a4c; --cell-current: #e2bd62; --cell-current-text: #1a1204;
  --check: #ffe08a; --danger: #ff8a78; --danger-soft: #4a2018; --ok: #e2bd62; --mem-cursor: #1c7a4c; --select: #137048;
  --info: #ffe08a; --warn: #ffe08a; --confirm: #e2bd62; --confirm-text: #1a1204; --attempt-bg: #084a2d; --attempt-line: #f4f4ea; --finished-bg: #084a2d; --finished-line: #e2bd62;
  --viewer-bg: #084a2d; --viewer-line: #f4f4ea; --log-change: #ffe08a; --log-auto: #bfe9ff; --toast-bg: #101214; --toast-text: #f4f4ea;
  --mono: Consolas, "Cascadia Mono", monospace; --sans: "Arial Narrow", Bahnschrift, Arial, sans-serif;
  --shadow: 0 0 0 1px #f4f4ea, 0 12px 28px rgb(0 0 0 / 0.55);
  color-scheme: dark;
  counter-reset: refdes;

  /* the edge of the board with its gold connector fingers */
  .topbar { padding-bottom: 16px; background: repeating-linear-gradient(90deg, #e2bd62 0 10px, transparent 10px 15px) left bottom / 100% 10px no-repeat, #074a2c; border: 0; }
  .brand { color: #f4f4ea; font: 700 15px var(--mono); letter-spacing: 0.1em; }
  .brand::before { content: "⏚ "; color: #e2bd62; }
  .menu summary { border-radius: 0; font-family: var(--mono); }
  .menu summary:hover, .menu[open] summary { color: #1a1204; background: #e2bd62; }
  .menu-list { background: #074a2c; border: 1px solid #f4f4ea; border-radius: 0; }
  .menu-list button { border-radius: 0; font-family: var(--mono); }
  .menu-list button:hover:not(:disabled) { color: #1a1204; background: #e2bd62; }
  .title { color: #a8dcc0; font: 12px var(--mono); }
  .lang { color: #1a1204; background: #e2bd62; border: 0; border-radius: 1px; font-family: var(--mono); }
  .pcb-seg { margin-left: auto; padding: 0 8px; color: #ff4a36; background: #0a0b0c; box-shadow: 0 0 0 2px #2a2c2e; font: 700 20px/24px Consolas, monospace; letter-spacing: 0.1em; text-shadow: 0 0 7px #ff4a36; }
  .pcb-seg.pcb-fault { color: #ffe08a; text-shadow: 0 0 7px #ffe08a; animation: blink 0.2s steps(1) 4; }
  .fx-scope { flex: none; box-shadow: 0 0 0 2px #2a2c2e; }

  /* a panel is no card: only a silkscreen outline printed on the board, with its reference */
  .panel { counter-increment: refdes; color: #f4f4ea; background: #0a5a37; border: 1px solid #f4f4ea; border-radius: 0; box-shadow: none; }
  .panel h2 { margin: 0 0 6px; color: #f4f4ea; font: 400 13px var(--mono); letter-spacing: 0.08em; }
  .panel h2::before { content: "U" counter(refdes) "  "; color: #e2bd62; font-weight: 700; }
  .panel h3 { color: #f4f4ea; font: 400 12px var(--mono); }
  .table-scroll, .cell-desc, .minilog, .info div, dialog, .toast { border-radius: 0; }
  .table-scroll { background: rgb(6 66 40 / 0.85); border: 1px solid #a8dcc0; }
  .grid th { color: #f4f4ea; background: #074a2c; font: 400 12px var(--mono); border-bottom: 1px solid #f4f4ea; }
  .grid td { border-color: rgb(244 244 234 / 0.14); }
  .grid td:first-child { color: #a8dcc0; background: none; }
  .cell-desc, .minilog { background: rgb(6 66 40 / 0.85); box-shadow: inset 0 0 0 1px #a8dcc0; }
  .minilog .tact { color: #ffe08a; }
  /* the counters are seven-segment modules */
  .info div { background: #0a0b0c; box-shadow: 0 0 0 2px #2a2c2e; }
  .info dt { color: #9a9c9e; font-family: var(--mono); }
  .info dd { color: #ff4a36; font-family: var(--mono); text-shadow: 0 0 7px #ff4a36; }
  .status { color: #f4f4ea; font: 700 15px var(--mono); }
  /* the buttons are tactile switches */
  .btn { color: #f4f4ea; background: radial-gradient(ellipse at 50% 30%, #3a3d40, #141618); border: 2px solid #b8bcc0; border-radius: 3px; font-family: var(--mono); box-shadow: 0 2px 0 #04261a, inset 0 1px 0 rgb(255 255 255 / 0.2); }
  .btn:active:not(:disabled) { transform: translateY(2px); box-shadow: none; }
  .btn:hover:not(:disabled) { border-color: #e2bd62; }
  .btn.primary, .btn.confirm { color: #1a1204; background: linear-gradient(#f4d98c, #b8913a); border-color: #6e5620; }
  .btn.danger { color: #fff; background: linear-gradient(#c43a2a, #8f2013); }
  .btn.link { color: #ffe08a; background: none; border: 0; box-shadow: none; }

  .cpu {
    --d-bg: #0a5a37; --d-bus: #22a264; --d-text: #f4f4ea; --d-ps: #2d2f31; --d-font: var(--mono);
    --d-reg-bg: #17191b; --d-reg-text: #f4f4ea; --d-reg-border: #000; --d-reg-hint: #777;
    --d-edit-bg: #4a3a12; --d-edit-border: #ffe08a; --d-check-text: #17191b; --d-focus: #ffe08a; --d-wrong: #b4301f; --d-right: #16713a;
    border: 1px solid #f4f4ea;
    border-radius: 0;
    overflow: hidden;
  }
  /* light falling across the mask */
  .cpu::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(115deg, transparent 20%, rgb(255 255 255 / 0.05) 38%, transparent 56%); }
  /* each bus is a bundle of six traces: strokes of falling width, trace and mask in turn */
  .cpu .wires { opacity: 0; }
  .pcb-t { fill: none; stroke-linejoin: bevel; stroke-linecap: butt; }
  .pcb-t.l0, .pcb-t.l2, .pcb-t.l4 { stroke: var(--pcb-trace); }
  .pcb-t.l1, .pcb-t.l3, .pcb-t.l5 { stroke: var(--pcb-mask); }
  .pcb-t.l0 { stroke-width: 24; }
  .pcb-t.l1 { stroke-width: 20.5; }
  .pcb-t.l2 { stroke-width: 15; }
  .pcb-t.l3 { stroke-width: 11.5; }
  .pcb-t.l4 { stroke-width: 6; }
  .pcb-t.l5 { stroke-width: 2.5; }
  .pcb-t.thin.l0 { stroke-width: 10; }
  .pcb-t.thin.l1 { stroke-width: 7; }
  .pcb-t.thin.l2, .pcb-t.thin.l3, .pcb-t.thin.l4, .pcb-t.thin.l5 { stroke-width: 0; }
  .fx-wires { transition: filter 0.2s; }
  .cpu.pcb-live .fx-wires { filter: brightness(1.4); }
  /* the ALU is a copper pour with a cross-hatch */
  .cpu .alu-block { fill: url(#pcb-hatch); stroke: #e2bd62; stroke-width: 2; }
  /* registers are SOIC chips: black body, legs on gold pads along the long sides */
  .cpu .reg:not(.bus)::before, .cpu .reg:not(.bus)::after {
    content: "";
    position: absolute;
    left: 3%;
    right: 3%;
    height: 0.65cqw;
    background: repeating-linear-gradient(90deg, #d6dadd 0 0.55cqw, transparent 0.55cqw 1.3cqw);
    pointer-events: none;
  }
  .cpu .reg:not(.bus)::before { bottom: 100%; }
  .cpu .reg:not(.bus)::after { top: 100%; }
  .cpu .reg-name { bottom: calc(100% + 0.7cqw); color: #f4f4ea; font-size: 1.25cqw; }
  .cpu .reg input { border: 0; border-radius: 1px; background-image: radial-gradient(circle at 0.8cqw 50%, #3a3d40 0.25cqw, transparent 0.3cqw), linear-gradient(#26282b, #131416); padding-left: 1.6cqw; box-shadow: 0 2px 3px rgb(0 0 0 / 0.65), inset 0 1px 0 rgb(255 255 255 / 0.08); }
  .cpu .reg.check input { background-image: none; }
  .cpu .reg.editable input, .cpu .flag.editable input { color: #ffe08a; }
  /* the bus is a row of gold connector fingers */
  .cpu .reg.bus:not(.check) input { color: #1a1204; background: linear-gradient(#f4d98c, #b8913a); box-shadow: inset 0 0 0 1px #6e5620; font-weight: 700; padding-left: 0.6cqw; }
  /* flags are 0805 LEDs with silver end caps */
  .cpu .flag .reg-name { bottom: 100%; }
  .cpu .flag input { color: #b89088; background: linear-gradient(90deg, #d6dadd 0 16%, #4a1a14 16% 84%, #d6dadd 84%); border: 0; border-radius: 1px; box-shadow: 0 2px 3px rgb(0 0 0 / 0.6); }
  .cpu .flag.on input { color: #fff; background: linear-gradient(90deg, #d6dadd 0 16%, #ff4a36 16% 84%, #d6dadd 84%); box-shadow: 0 0 12px 2px rgb(255 74 54 / 0.8); }
  .pcb-silk { font: 11px var(--mono); fill: #f4f4ea; stroke: none; filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.6)); }
  .pcb-mark { position: absolute; right: 3%; top: 50%; transform: translateY(-50%); color: #8f9396; font: 0.95cqw var(--mono); pointer-events: none; white-space: nowrap; }
  .cpu .reg.check .pcb-mark, .cpu .reg.editable .pcb-mark { display: none; }
  .fx-banner { color: #ffe08a; background: #0a0b0c; border: 1px solid #ffe08a; font-family: var(--mono); font-weight: 400; }
  .fx-ring { border-radius: 0; border-color: #e2bd62; box-shadow: 0 0 12px #e2bd62; }
  .fx-float { font: 700 14px var(--mono); text-shadow: 0 1px 2px #000; }
  body.pcb-power { animation: pcb-power 0.5s steps(4); }
  .pcb-scorch { position: fixed; z-index: 34; width: 90px; height: 90px; margin: -45px 0 0 -45px; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgb(15 10 5 / 0.95), rgb(40 30 15 / 0.55) 55%, transparent); animation: pcb-scorch 6s ease-in forwards; }
}
@keyframes pcb-power { 0% { filter: brightness(0.15); } 50% { filter: brightness(1.5); } 75% { filter: brightness(0.5); } 100% { filter: none; } }
@keyframes pcb-scorch { to { opacity: 0; } }

/* ---------------------------------------------------------------- ASCII: nothing but characters */
:root[data-look="ascii"] {
  --bg: #000; --surface: #000; --surface-2: #000; --text: #c8c8c8; --muted: #8a8a8a; --border: #000;
  --accent: #fff; --accent-text: #000; --accent-soft: #333; --row-current: #2a2a2a; --cell-current: #fff; --cell-current-text: #000;
  --check: #fff; --danger: #fff; --danger-soft: #333; --ok: #fff; --mem-cursor: #444; --select: #333;
  --info: #fff; --warn: #fff; --confirm: #fff; --attempt-bg: #000; --attempt-line: #8a8a8a; --finished-bg: #000; --finished-line: #fff;
  --viewer-bg: #000; --viewer-line: #8a8a8a; --log-change: #fff; --log-auto: #fff; --toast-bg: #fff; --toast-text: #000;
  --mono: "Courier New", Consolas, "Lucida Console", monospace; --sans: var(--mono);
  --shadow: none;
  color-scheme: dark;

  .topbar { border-bottom: 1px dashed #8a8a8a; }
  .brand::before { content: "=["; }
  .brand::after { content: "]="; }
  .menu summary::before { content: "["; }
  .menu summary::after { content: "]"; }
  .menu summary, .menu-list, .menu-list button, .btn, .lang, dialog, .table-scroll, .cell-desc, .minilog, .info div, .blocker-box { border-radius: 0; }
  .menu summary:hover, .menu[open] summary, .menu-list button:hover:not(:disabled), .grid tbody tr:hover td { background: #fff; color: #000; }
  .menu-list, dialog, .blocker-box { border: 1px dashed #c8c8c8; }
  .panel {
    position: relative;
    padding: 20px 16px;
    border: 0;
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='17'%3E%3Ctext x='0' y='13' font-family='monospace' font-size='14' fill='%238a8a8a'%3E%7C%3C/text%3E%3C/svg%3E") left top / 8px 17px repeat-y,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='17'%3E%3Ctext x='0' y='13' font-family='monospace' font-size='14' fill='%238a8a8a'%3E%7C%3C/text%3E%3C/svg%3E") right top / 8px 17px repeat-y;
  }
  .panel::before, .panel::after {
    content: "+----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------";
    position: absolute;
    left: 0;
    right: 0;
    overflow: hidden;
    white-space: nowrap;
    color: #8a8a8a;
    background: #000;
    line-height: 1;
  }
  .panel::before { top: 2px; }
  .panel::after { bottom: 2px; }
  .panel h2 { color: #fff; }
  .panel h2::before { content: "== "; }
  .panel h2::after { content: " =="; }
  .table-scroll { border: 0; }
  .grid th { border-bottom: 1px dashed #8a8a8a; }
  .grid td, .grid td:first-child { border: 0; }
  .btn, .lang { border: 0; background: #000; font-weight: 400; color: #fff; }
  .btn::before, .lang::before { content: "[ "; }
  .btn::after, .lang::after { content: " ]"; }
  .btn:hover:not(:disabled), .btn:focus-visible, .btn.primary:hover:not(:disabled), .lang:hover { background: #fff; color: #000; outline: 0; }
  .btn.primary, .btn.confirm, .btn.danger { background: #000; color: #fff; font-weight: 700; border: 0; }
  .btn.link { color: #c8c8c8; text-decoration: underline; }
  .btn.link::before, .btn.link::after { content: none; }
  .status::before { content: "> "; }
  .status::after { content: "_"; animation: blink 1s steps(1) infinite; }
  .toast { border-radius: 0; }
  .cpu {
    --d-bg: #000; --d-bus: #000; --d-text: #fff; --d-ps: #000; --d-font: var(--mono);
    --d-reg-bg: #000; --d-reg-text: #c8c8c8; --d-reg-border: transparent; --d-reg-hint: #666;
    --d-edit-bg: #333; --d-edit-border: #fff; --d-check-text: #000; --d-focus: #fff; --d-wrong: #fff; --d-right: #666;
    border-radius: 0;
    outline: 1px dashed #8a8a8a;
    outline-offset: -1px;
  }
  .cpu .wires { display: none; }
  .fx-wires text { fill: #6f6f6f; font: 17px var(--mono); white-space: pre; }
  .cpu .reg::before, .cpu .reg::after { position: absolute; top: 50%; transform: translateY(-50%); color: #fff; font-size: 2cqw; }
  .cpu .reg::before { content: "["; left: -0.2cqw; }
  .cpu .reg::after { content: "]"; right: -0.2cqw; }
  .cpu .reg input, .cpu .flag input { padding-left: 1.2cqw; }
  .cpu .flag input { padding: 0; }
  .cpu .flag::before { content: "("; position: absolute; left: 0; top: 50%; transform: translateY(-50%); color: #fff; }
  .cpu .flag::after { content: ")"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: #fff; }
  .cpu .reg.bus input { color: #fff; font-weight: 700; }
  .cpu .reg.editable input, .cpu .flag.editable input { color: #fff; }
  .fx-chip { color: #fff; }
  .fx-banner { color: #000; background: #fff; font-family: var(--mono); }
  .fx-chip + .fx-chip { margin-left: 0; }
  .asc-face { white-space: pre; }
  .asc-donut { position: absolute; left: 8%; top: 70%; margin: 0; color: #9a9a9a; font: 1.1cqw/1 var(--mono); pointer-events: none; }
  .asc-cow { position: absolute; left: 50%; top: 42%; z-index: 5; margin: 0; padding: 6px 10px; color: #000; background: #fff; font: 1.5cqw/1.15 var(--mono); white-space: pre; transform: translate(-50%, -50%); pointer-events: none; }
  .asc-logo { position: fixed; inset: 0; z-index: 37; display: grid; place-content: center; background: #000; color: #fff; font: clamp(10px, 2.2vw, 26px)/1.15 var(--mono); white-space: pre; pointer-events: none; }
  .fx-float { font: 700 16px var(--mono); }
}

/* ---------------------------------------------------------------- Military: a command post with a tactical map */
:root[data-look="military"] {
  --bg: #2c3020; --surface: #2a2e1e; --surface-2: #363b27; --text: #e6e2c4; --muted: #a8a67e; --border: #5c6040;
  --accent: #c9b458; --accent-text: #1c1e10; --accent-soft: #4c4c26; --row-current: #4c4c26; --cell-current: #e6dc8a; --cell-current-text: #1c1e10;
  --check: #ff9a3c; --danger: #ff6a50; --danger-soft: #4a1e14; --ok: #9fd46a; --mem-cursor: #4f5434; --select: #464b30;
  --info: #e6dc8a; --warn: #ff9a3c; --confirm: #6b7a32; --confirm-text: #f4f2d8; --attempt-bg: #363b27; --attempt-line: #5c6040; --finished-bg: #38441f; --finished-line: #9fd46a;
  --viewer-bg: #2c3442; --viewer-line: #52627c; --log-change: #ff9a3c; --log-auto: #7fb8ff; --toast-bg: #1c1e10; --toast-text: #e6e2c4;
  --sans: "Segoe UI Semibold", "Segoe UI", sans-serif; --mono: "Courier New", Consolas, monospace;
  --mil-head: Impact, Haettenschweiler, "Arial Narrow", sans-serif; /* Stencil would garble the Polish letters */
  --shadow: 0 0 0 1px #1c1e10, 0 10px 26px rgb(0 0 0 / 0.65);
  color-scheme: dark;

  body { background: var(--mil-camo) #4b5232; }
  .topbar { background: linear-gradient(rgb(20 22 12 / 0.9), rgb(28 30 16 / 0.82)), var(--mil-camo); border-bottom: 3px solid #1c1e10; box-shadow: 0 3px 0 #c9b458; }
  .brand { color: #e6dc8a; font: 400 22px var(--mil-head); letter-spacing: 0.08em; text-transform: uppercase; }
  .menu summary { border-radius: 0; text-transform: uppercase; font-size: 13px; letter-spacing: 0.05em; }
  .menu summary:hover, .menu[open] summary { background: #c9b458; color: #1c1e10; }
  .menu-list, .menu-list button, .lang, dialog, .table-scroll, .cell-desc, .minilog, .info div, .toast { border-radius: 0; }
  .menu-list button:hover:not(:disabled) { background: #c9b458; color: #1c1e10; }
  .title { color: var(--muted); font: 12px var(--mono); text-transform: uppercase; }
  .mil-hud { display: flex; align-items: center; gap: 12px; margin-left: auto; font: 700 13px var(--mono); white-space: nowrap; }
  .mil-rank { display: flex; align-items: center; gap: 4px; color: #e6dc8a; }
  .mil-insignia { display: block; flex: none; width: 24px; height: 24px; color: #e6dc8a; }
  .mil-defcon { padding: 1px 6px; color: #1c1e10; background: #9fd46a; }
  .mil-defcon[data-level="4"] { background: #c9d46a; }
  .mil-defcon[data-level="3"] { background: #ffd24a; }
  .mil-defcon[data-level="2"] { background: #ff9a3c; }
  .mil-defcon[data-level="1"] { background: #ff4a30; color: #fff; }
  .mil-defcon.mil-alarm { animation: blink 0.2s steps(1) 4; }
  .mil-ammo { color: #ffcf5e; font-weight: 700; }
  .mil-clock { color: #9fd46a; }

  .panel {
    position: relative;
    border: 2px solid #1c1e10;
    border-radius: 0;
    background:
      radial-gradient(circle at 8px 8px, #8a8a60 2.5px, transparent 3px),
      radial-gradient(circle at calc(100% - 8px) 8px, #8a8a60 2.5px, transparent 3px),
      radial-gradient(circle at 8px calc(100% - 8px), #8a8a60 2.5px, transparent 3px),
      radial-gradient(circle at calc(100% - 8px) calc(100% - 8px), #8a8a60 2.5px, transparent 3px),
      #2f3322;
    box-shadow: 0 5px 14px rgb(0 0 0 / 0.55);
  }
  .panel h2 { align-self: flex-start; width: fit-content; margin: 0 0 8px 12px; padding: 2px 16px; color: #1c1e10; background: #c9b458; font: 400 16px var(--mil-head); letter-spacing: 0.12em; text-transform: uppercase; transform: rotate(-0.7deg); box-shadow: 1px 2px 3px rgb(0 0 0 / 0.5); }
  .panel h3 { color: #e6dc8a; font: 700 12px var(--mono); text-transform: uppercase; }
  .status { color: #9fd46a; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.08em; }
  .info div { background: #23261a; box-shadow: inset 0 0 0 1px #5c6040; }
  .info dd { font-family: var(--mono); color: #e6dc8a; }
  .grid th { color: #e6dc8a; font-family: var(--mono); text-transform: uppercase; }
  .btn { border-radius: 0; border: 2px solid #1c1e10; background: linear-gradient(#5a6038, #3a3f26); color: #f4f2d8; font: 400 16px var(--mil-head); letter-spacing: 0.1em; text-transform: uppercase; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.2), 0 2px 0 #1c1e10; }
  .btn:hover:not(:disabled) { background: linear-gradient(#6f7648, #4a5030); }
  .btn:active:not(:disabled) { transform: translateY(2px); box-shadow: none; }
  .btn.primary { background: linear-gradient(#c9b458, #8f7f34); color: #1c1e10; }
  .btn.danger { background: linear-gradient(#b84a30, #7a2a18); }
  .btn.link { background: none; border: 0; box-shadow: none; color: #e6dc8a; font: 700 12px var(--mono); }

  .cpu {
    --d-bg: #d8d2a8; --d-bus: #2a2418; --d-text: #1c1e10; --d-ps: #4c5236; --d-font: var(--mono);
    --d-reg-bg: #1c1e10; --d-reg-text: #e6e2c4; --d-reg-border: #8a8a60; --d-reg-hint: #7f7f5e;
    --d-edit-bg: #4c4c26; --d-edit-border: #ffcf5e; --d-check-text: #1c1e10; --d-focus: #ffcf5e; --d-wrong: #a4301c; --d-right: #4f7a24;
    border: 2px solid #1c1e10;
    border-radius: 0;
    overflow: hidden;
  }
  .mil-map { position: absolute; inset: 0; width: 100%; height: 100%; }
  .cpu .wires .bus { stroke-width: 5; }
  .cpu .wires .bus.thin { stroke-width: 2.5; }
  .cpu .wires .alu { stroke: #2a2418; stroke-width: 4; stroke-linejoin: round; }
  .alu-block { fill: #4c5236; }
  .cpu .wires { filter: drop-shadow(1px 1px 0 rgb(240 232 190 / 0.7)); }
  .cpu .reg input { border-radius: 2px; font-family: var(--mono); font-weight: 700; }
  .cpu .reg-name { color: #1c1e10; font-weight: 700; text-shadow: 0 0 3px #efe8c4, 0 0 3px #efe8c4; }
  .cpu .flag.on input { background: #9fd46a; color: #1c1e10; box-shadow: 0 0 8px #9fd46a; }
  /* the register to check is in the crosshair */
  .cpu .reg.check::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 7cqw;
    height: 7cqw;
    margin: -3.5cqw 0 0 -3.5cqw;
    border: 2px solid #ff4a30;
    border-radius: 50%;
    pointer-events: none;
    background: linear-gradient(#ff4a30, #ff4a30) center / 100% 1px no-repeat, linear-gradient(#ff4a30, #ff4a30) center / 1px 100% no-repeat;
    animation: mil-aim 1.3s ease-in-out infinite;
  }
  /* a scope in a steel housing with four screws */
  .mil-radar {
    position: absolute;
    left: 1.2%;
    bottom: 3%;
    width: 15%;
    aspect-ratio: 1;
    border-radius: 50%;
    box-shadow:
      0 0 0 0.25cqw #0c0d07, 0 0 0 1cqw #4a4d3a, 0 0 0 1.15cqw #1c1e10,
      0.4cqw 0.7cqw 1.2cqw 1.1cqw rgb(0 0 0 / 0.6), inset 0 0 1.6cqw rgb(0 0 0 / 0.85);
    pointer-events: none;
  }
  .mil-radio { position: absolute; left: 18.6%; bottom: 2.5%; width: 9%; padding: 0.2cqw 0.4cqw; background: #1c1e10; border: 1px solid #4a4d3a; overflow: hidden; white-space: nowrap; color: #9fd46a; font: 0.95cqw/1.35 var(--mono); pointer-events: none; }
  .mil-radio .mil-bad { color: #ff7a60; }
  .mil-radio .mil-good { color: #e6dc8a; }
  .mil-stamp {
    position: absolute;
    left: 50%;
    top: 40%;
    z-index: 5;
    padding: 0.3em 0.6em;
    color: #ff4a30;
    font: 400 3.8cqw var(--mil-head);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    border: 0.5cqw solid #ff4a30;
    background: rgb(28 30 16 / 0.82);
    pointer-events: none;
    animation: mil-stamp 1.5s ease-out forwards;
  }
  .mil-brief { position: fixed; inset: 0; z-index: 37; display: grid; place-items: center; background: rgb(14 16 8 / 0.92); pointer-events: none; }
  .mil-brief-page { position: relative; width: min(560px, 88vw); min-height: 280px; padding: 40px 32px; color: #2a2412; background: #d8ceb0; box-shadow: 0 16px 50px #000; transform: rotate(-1deg); }
  .mil-brief pre { margin: 0; font: 700 16px/1.5 var(--mono); white-space: pre-wrap; }
  .mil-brief-stamp { position: absolute; right: 18px; top: 16px; padding: 2px 10px; color: #a4201c; font: 400 26px var(--mil-head); text-transform: uppercase; border: 3px solid #a4201c; transform: rotate(9deg); }
  .fx-float { font: 700 18px var(--mono); text-shadow: 0 1px 2px #000; }
  .fx-ring { border-radius: 0; border-color: #ffcf5e; }
  .fx-notice { color: #e6e2c4; font: 700 14px var(--mono); background: #23261a; border: 3px double #c9b458; box-shadow: 0 8px 22px rgb(0 0 0 / 0.6); }
  .fx-notice-title { color: #e6dc8a; font: 400 24px var(--mil-head); letter-spacing: 0.1em; text-transform: uppercase; }
  .fx-notice .mil-insignia { width: 42px; height: 42px; margin: 0 auto; }
}
@keyframes mil-aim { 50% { transform: scale(0.82) rotate(45deg); opacity: 0.65; } }
@keyframes mil-stamp { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(-8deg) scale(2.4); } 14% { opacity: 1; transform: translate(-50%, -50%) rotate(-8deg) scale(1); } 80% { opacity: 1; transform: translate(-50%, -50%) rotate(-8deg) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(-8deg) scale(1); } }

/* ---------------------------------------------------------------- TempleOS: 640 x 480, sixteen colours, white paper, blue ink */
:root[data-look="temple"] {
  --bg: #ffffff; --surface: #ffffff; --surface-2: #ffffff; --text: #0000aa; --muted: #555555; --border: #0000aa;
  --accent: #0000aa; --accent-text: #ffffff; --accent-soft: #55ffff; --row-current: #ffff55; --cell-current: #ffff55; --cell-current-text: #aa0000;
  --check: #ffff55; --danger: #aa0000; --danger-soft: #ffffff; --ok: #00aa00; --mem-cursor: #55ffff; --select: #55ffff;
  --info: #00aaaa; --warn: #aa5500; --confirm: #aa00aa; --confirm-text: #ffffff; --attempt-bg: #ffffff; --attempt-line: #0000aa; --finished-bg: #ffffff; --finished-line: #00aa00;
  --viewer-bg: #ffffff; --viewer-line: #aa00aa; --log-change: #aa0000; --log-auto: #aa00aa; --toast-bg: #0000aa; --toast-text: #ffffff;
  --mono: "Lucida Console", Consolas, "Courier New", monospace; --sans: var(--mono);
  --shadow: none;
  color-scheme: light;
  cursor: crosshair;
  &.tos-invert { filter: invert(1); }

  .topbar { color: #ffffff; background: #0000aa; border: 0; --select: #ffffff; --muted: #ffff55; }
  .brand { color: #ffff55; }
  .brand::after { content: " V5.03"; color: #ffffff; font-weight: 400; }
  .menu summary { border-radius: 0; color: #ffffff; }
  .menu summary:hover, .menu[open] summary { color: #0000aa; background: #ffffff; }
  .menu-list { color: #0000aa; background: #ffffff; border: 4px double #0000aa; border-radius: 0; --select: #55ffff; }
  .menu-list button { border-radius: 0; color: #0000aa; }
  .menu-list button:hover:not(:disabled) { color: #ffffff; background: #0000aa; }
  .lang { color: #0000aa; background: #ffffff; border: 0; border-radius: 0; font-weight: 700; }
  .title { color: #ffff55; }
  .fx-chip.tos-bar { color: #55ffff; font-weight: 400; white-space: pre; }

  /* every panel is a window: a double frame and a title bar with the closing mark */
  .panel { border: 4px double #0000aa; border-radius: 0; background: #ffffff; box-shadow: none; }
  .panel h2 { display: flex; justify-content: space-between; margin: -8px -8px 6px; padding: 1px 8px; color: #ffffff; background: #0000aa; font-size: 14px; font-weight: 400; text-transform: none; }
  .panel h2::after { content: "[X]"; color: #ffff55; }
  .panel h3 { color: #aa00aa; font-weight: 400; }
  .table-scroll, .cell-desc, .minilog, .info div, dialog, .toast { border-radius: 0; }
  .table-scroll { border: 1px solid #0000aa; }
  .grid th { color: #aa0000; background: #ffffff; font-weight: 400; border-bottom: 1px solid #0000aa; }
  .grid td, .grid td:first-child { border-color: #55ffff; }
  .info div { background: #ffffff; box-shadow: inset 0 0 0 1px #0000aa; }
  .info dd { color: #aa0000; font-family: var(--mono); }
  .status { color: #00aa00; }
  .status.running { animation: blink 0.6s steps(1) infinite; }
  .btn, .btn.primary, .btn.confirm, .btn.danger { border: 1px solid #0000aa; border-radius: 0; box-shadow: 2px 2px 0 #0000aa; font-weight: 400; }
  .btn { color: #0000aa; background: #ffffff; }
  .btn.primary { color: #ffffff; background: #0000aa; }
  .btn.confirm { color: #ffffff; background: #aa00aa; }
  .btn.danger { color: #ffffff; background: #aa0000; }
  .btn:hover:not(:disabled) { color: #0000aa; background: #ffff55; }
  .btn:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: none; }
  .btn.link { color: #00aaaa; background: none; border: 0; box-shadow: none; text-decoration: underline; }
  dialog { border: 4px double #0000aa; }

  .cpu {
    --d-bg: #ffffff; --d-bus: #0000aa; --d-text: #aa0000; --d-ps: #aaaaaa; --d-font: var(--mono);
    --d-reg-bg: #ffffff; --d-reg-text: #0000aa; --d-reg-border: #0000aa; --d-reg-hint: #555555;
    --d-edit-bg: #ffff55; --d-edit-border: #aa0000; --d-check-text: #aa0000; --d-focus: #aa00aa; --d-wrong: #ff5555; --d-right: #55ff55;
    border: 4px double #0000aa;
    border-radius: 0;
    overflow: hidden;
  }
  .cpu .wires .bus { stroke-width: 4; shape-rendering: crispEdges; }
  .cpu .wires .bus.thin { stroke-width: 2; }
  .cpu .wires .alu { stroke: #0000aa; stroke-width: 2; shape-rendering: crispEdges; }
  .alu-block { fill: #55ffff; shape-rendering: crispEdges; }
  .cpu .reg input, .cpu .flag input { border-radius: 0; }
  .cpu .reg.bus input { color: #ffffff; background: #0000aa; }
  .cpu .flag.on input { color: #ffffff; background: #00aa00; }
  .cpu .reg.check input { animation: blink 0.6s steps(1) infinite; }
  .tos-cross { position: absolute; left: 1.2%; bottom: 2%; width: 13%; aspect-ratio: 1; image-rendering: pixelated; border: 1px solid #0000aa; pointer-events: none; }
  .tos-god { position: absolute; left: 15%; bottom: 2.5%; width: 12.5%; color: #aa00aa; font: 1.05cqw/1.3 var(--mono); pointer-events: none; }
  .tos-god b { color: #aa0000; font-weight: 400; }
  .tos-boot { position: fixed; inset: 0; z-index: 37; padding: 24px; color: #0000aa; background: #ffffff; font: 18px/1.4 var(--mono); white-space: pre-wrap; pointer-events: none; }
  .tos-boot::after { content: "█"; animation: blink 0.6s steps(1) infinite; }
  .fx-banner { color: #ffff55; background: #aa0000; border: 4px double #ffff55; font-weight: 400; }
  .fx-float { font: 16px var(--mono); }
  .fx-particle { font-size: 10px; }
}