:root {
  --bg0: #0a0e14;
  --frame-blue: #2f7fc4;
  --frame-blue-dk: #185a92;
  --face: #2c3138;
  --face-dk: #22262c;
  --red-on: #ff2a20;
  --red-glow: rgba(255,42,32,0.9);
  --green-on: #39ff6a;
  --amber-on: #ffb320;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background:
    radial-gradient(circle at 20% -10%, rgba(56,90,140,0.18), transparent 45%),
    radial-gradient(circle at 90% 110%, rgba(180,60,40,0.14), transparent 40%),
    linear-gradient(160deg, #1a0d0d 0%, #0d1016 55%, #070a0f 100%);
  background-attachment: fixed;
  font-family: 'IBM Plex Mono', monospace;
  color: #d4d9e0;
  min-height: 100vh;
}

.page { padding: 20px 12px; }
.wrap { max-width: 1080px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.hidden { display: none !important; }
.dim { color: #7f8fa6; }

/* ---------- Altair case (blue frame from the photo) ---------- */
.altair-case {
  background: linear-gradient(155deg, var(--frame-blue) 0%, var(--frame-blue-dk) 55%, #0e3f68 100%);
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.6), inset 0 2px 0 rgba(255,255,255,0.25), inset 0 -6px 14px rgba(0,0,0,0.4);
}
.case-inner {
  background: linear-gradient(180deg, #33383f 0%, #292d33 4%, #23262b 100%);
  border-radius: 6px;
  padding: 16px 18px;
  border: 1px solid #14161a;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), inset 0 -3px 10px rgba(0,0,0,0.55);
  position: relative;
}
.case-inner::before {
  content: '';
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0.015) 0 1px, transparent 1px 4px);
}
.altair-case.shake { animation: shake 0.5s cubic-bezier(.36,.07,.19,.97); }
@keyframes shake {
  10%,90% { transform: translateX(-2px) rotate(-0.15deg); }
  20%,80% { transform: translateX(3px) rotate(0.15deg); }
  30%,50%,70% { transform: translateX(-5px); }
  40%,60% { transform: translateX(5px); }
}

.panel-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
.altair-logo-sm { font-size: 10px; letter-spacing: 0.3em; color: #8fbfe6; }
.readout { text-align: right; font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #ffb877; line-height: 1.5; }

/* ---------- LED rows ---------- */
.led-section { margin-bottom: 14px; }
.row-lights { display: flex; gap: 14px; flex-wrap: wrap; }
.row-lights.grow { flex: 1; justify-content: space-between; gap: 4px; }
.row-lights.right-align { justify-content: flex-start; gap: 14px; }
.row-line { height: 1px; background: linear-gradient(90deg, transparent, #6b7683 20%, #6b7683 80%, transparent); margin: 6px 0 2px; }
.row-label { font-size: 8px; letter-spacing: 0.25em; color: #7b828c; margin-top: 3px; }
.row-label.center { text-align: center; }
.row-label.right { text-align: left; }

.lamp-col { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.tiny { font-size: 7px; letter-spacing: 0.05em; color: #8b929b; white-space: nowrap; }

.addr-row { display: flex; align-items: flex-start; gap: 18px; }
.wait-group { display: flex; gap: 14px; padding-right: 10px; border-right: 1px solid #3a3f46; }

/* ---------- LEDs ---------- */
.led {
  width: 15px; height: 15px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.65);
  background: radial-gradient(circle at 35% 30%, #4a1414, #1a0808);
}
.led-sm { width: 13px; height: 13px; }
.led-xs { width: 10px; height: 10px; }
.led-off { background: radial-gradient(circle at 35% 30%, #4a1414, #180808); }
.led-red.led-on {
  background: radial-gradient(circle at 35% 30%, #ff9a90, var(--red-on) 55%, #a00 100%);
  box-shadow: 0 0 8px var(--red-glow), 0 0 16px rgba(255,42,32,0.5);
}
.led-green.led-off { background: radial-gradient(circle at 35% 30%, #133a1e, #08160c); }
.led-green.led-on {
  background: radial-gradient(circle at 35% 30%, #b6ffc9, var(--green-on) 60%, #1a8a3a 100%);
  box-shadow: 0 0 8px rgba(57,255,106,0.8), 0 0 14px rgba(57,255,106,0.4);
}
.led-amber.led-off { background: radial-gradient(circle at 35% 30%, #3a2c10, #16100a); }
.led-amber.led-on {
  background: radial-gradient(circle at 35% 30%, #ffe0a0, var(--amber-on) 60%, #a06800 100%);
  box-shadow: 0 0 8px rgba(255,179,32,0.8), 0 0 14px rgba(255,179,32,0.4);
}

/* ---------- big logo bar (silver strip w/ MITS badge) ---------- */
.logo-bar {
  margin: 18px 0 14px;
  padding: 8px 14px;
  background: linear-gradient(180deg, #d7dbe0 0%, #b3b9c0 50%, #9aa0a8 100%);
  border-radius: 3px;
  border: 1px solid #7b818a;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 2px 5px rgba(0,0,0,0.5);
  display: flex; align-items: center; gap: 14px;
}
.mits-badge {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800;
  font-size: 12px; letter-spacing: 0.05em;
  color: #fff; background: linear-gradient(135deg, #2f7fc4, #14507f);
  padding: 3px 8px; border-radius: 2px; transform: skewX(-8deg);
  box-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.altair-logo {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800;
  font-size: clamp(20px, 5vw, 34px); letter-spacing: 0.06em;
  color: #23262b; text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
.altair-logo .thin { font-weight: 200; }

/* ---------- control toggles ---------- */
.toggle-rail {
  background: linear-gradient(180deg, #16191e, #101216);
  border: 1px solid #05070a; border-radius: 6px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.7);
  padding: 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.ctl-btn {
  font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: 12px;
  letter-spacing: 0.06em; padding: 8px 12px; border-radius: 5px;
  border: 1px solid rgba(0,0,0,0.5); color: #0a0e14; cursor: pointer;
  transition: transform 0.08s, filter 0.15s;
  box-shadow: 0 3px 0 rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.35);
}
.ctl-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,0.4); }
.ctl-green { background: linear-gradient(180deg,#5fe08a,#2fb85f); }
.ctl-red { background: linear-gradient(180deg,#ff8a80,#e0483c); color:#2a0806; }
.ctl-blue { background: linear-gradient(180deg,#7fc0ff,#3d8fe0); }
.ctl-amber { background: linear-gradient(180deg,#ffd77f,#e0a020); }

/* ---------- address/data switch rail (front panel paddle toggles) ---------- */
.switch-section {
  margin-top: 14px; padding: 12px 10px 8px;
  background: linear-gradient(180deg, #1a1d22, #101216);
  border: 1px solid #05070a; border-radius: 6px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.7);
}
.switch-rail { display: flex; gap: 4px; justify-content: space-between; flex-wrap: nowrap; }
.sw-toggle {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: none; border: none; padding: 0; cursor: pointer;
}
.sw-body {
  position: relative; width: 20px; height: 40px; border-radius: 6px;
  background: linear-gradient(180deg, #3a3f46 0%, #23262b 50%, #16181c 100%);
  border: 1px solid #05070a;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 2px 4px rgba(0,0,0,0.6);
}
.sw-body::before { /* mounting collar */
  content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px;
  transform: translate(-50%,-50%); border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #4a4f57, #1a1c20);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.7);
}
.sw-lever {
  position: absolute; left: 50%; width: 9px; height: 20px; border-radius: 5px 5px 3px 3px;
  transform-origin: center bottom;
  background: linear-gradient(180deg, #f2f4f7 0%, #c3cad2 45%, #9aa2ac 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 2px 4px rgba(0,0,0,0.6);
  transition: transform 0.12s cubic-bezier(.34,1.56,.64,1), top 0.12s, box-shadow 0.12s;
  z-index: 1;
}
/* down (0) = lever points to bottom */
.sw-toggle .sw-lever { top: 2px; transform: translateX(-50%) rotateX(0deg); }
/* up (1) = lever flipped up, glowing */
.sw-toggle.on .sw-lever {
  top: 2px;
  transform: translateX(-50%) translateY(-2px) rotateX(0deg) scaleY(1);
  background: linear-gradient(180deg, #fff7dc 0%, #ffd98a 50%, #f0b45a 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 0 8px rgba(255,190,80,0.6), 0 2px 4px rgba(0,0,0,0.6);
}
.sw-toggle.on .sw-body { box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 2px 4px rgba(0,0,0,0.6), 0 0 6px rgba(255,190,80,0.25); }
.sw-num { font-size: 8px; letter-spacing: 0.02em; color: #8b929b; }
.sw-toggle.on .sw-num { color: #ffcf8a; }
.switch-labels { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.sw-word { font-size: 11px; color: #ffcf8a; letter-spacing: 0.05em; }
.sw-word span { color: #fff2cc; }
.sw-hint { font-size: 8px; letter-spacing: 0.18em; color: #7b828c; }
.ctl-cyan { background: linear-gradient(180deg,#7fe6ff,#2fb8d8); color:#04222a; }
.ctl-violet { background: linear-gradient(180deg,#c79fff,#8a5fe0); color:#1a0a2a; }

/* ---------- dark panels ---------- */
.panel-dark {
  background: linear-gradient(180deg, #131b26 0%, #0d131c 100%);
  border: 1px solid #1e2a38; border-radius: 10px; padding: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}
.mini-label { font-size: 10px; letter-spacing: 0.2em; color: #7b8494; margin-bottom: 6px; }

/* ---------- corrupter ---------- */
.corrupter { border-color: #5a2020; box-shadow: inset 0 1px 0 rgba(255,120,80,0.06), 0 0 22px rgba(255,60,40,0.08); }
.corrupt-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.corrupt-title { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 18px; color: #ff7a55; letter-spacing: 0.04em; text-shadow: 0 0 12px rgba(255,80,40,0.4); }
.corrupt-sub { font-size: 10px; color: #b88; letter-spacing: 0.05em; }
.corrupt-body { display: flex; flex-direction: column; gap: 10px; }
.corrupt-field { display: flex; flex-direction: column; gap: 4px; font-size: 10px; letter-spacing: 0.12em; color: #caa; }
.corrupt-field input {
  font-family: 'IBM Plex Mono', monospace; font-size: 16px; color: #ffd0b0;
  background: #0c0808; border: 1px solid #6a2a2a; border-radius: 4px; padding: 8px 10px;
  outline: none;
}
.corrupt-field input:focus { border-color: #ff5a3a; box-shadow: 0 0 10px rgba(255,60,40,0.4); }
.corrupt-modes { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: #d0b8b8; }
.corrupt-modes label { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.corrupt-btn {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 15px; letter-spacing: 0.05em;
  padding: 12px; border-radius: 6px; cursor: pointer; color: #1a0400;
  background: linear-gradient(180deg, #ff8a5a, #e0341c);
  border: 1px solid #7a1c0c;
  box-shadow: 0 4px 0 rgba(90,10,0,0.6), inset 0 1px 0 rgba(255,255,255,0.35);
  transition: transform 0.08s;
}
.corrupt-btn:hover { filter: brightness(1.08); }
.corrupt-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(90,10,0,0.6); }
.corrupt-status { font-size: 11px; color: #d9a; font-family: 'IBM Plex Mono', monospace; line-height: 1.5; min-height: 30px; }

/* ---------- dropzone ---------- */
.dropzone {
  border: 2px dashed #33475e; background: rgba(20,32,48,0.4);
  border-radius: 8px; padding: 20px; text-align: center; cursor: pointer;
  transition: all 0.15s;
}
.dropzone.drag-over { border-color: #5fa8ff; background: rgba(40,80,140,0.25); transform: scale(1.01); }
.dz-title { color: #7fc0ff; font-size: 14px; margin-bottom: 4px; }
.dz-sub { color: #8b929b; font-size: 12px; }
.file-info { font-size: 11px; color: #6fdca0; margin-top: 8px; }
.demo-wrap { margin-top: 14px; }
.demo-row { display: flex; flex-wrap: wrap; gap: 8px; }
.demo-btn {
  font-size: 11px; font-family: 'IBM Plex Mono', monospace; padding: 5px 10px;
  border-radius: 4px; background: #1a2634; border: 1px solid #2d4056; color: #9dc3e6; cursor: pointer;
}
.demo-btn:hover { background: #24374d; color: #cfe6ff; }

/* ---------- sense switches ---------- */
.sense-block { margin-top: 16px; padding-top: 12px; border-top: 1px solid #1e2a38; }
.sense-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.sense-val { font-size: 10px; color: #ffcf8a; }
.sense-row { display: flex; gap: 6px; }
.sense-note { font-size: 10px; color: #7b8494; margin-top: 8px; }
.sense-note .hl { color: #6fdca0; }
.sense-sw {
  display: flex; flex-direction: column; align-items: center; width: 28px; padding: 4px 0 2px;
  border-radius: 5px; background: linear-gradient(180deg, #202b38, #131b26);
  border: 1px solid #0a0f16; cursor: pointer; transition: background 0.12s;
}
.sense-sw:hover { background: linear-gradient(180deg, #2a3949, #182230); }
.sense-nub {
  width: 12px; height: 20px; border-radius: 3px;
  background: linear-gradient(180deg, #e8edf3, #9aa6b3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 2px 4px rgba(0,0,0,0.6);
  transition: transform 0.12s ease, box-shadow 0.12s; transform-origin: center bottom;
}
.sense-up .sense-nub {
  transform: perspective(40px) rotateX(-22deg) translateY(-2px);
  background: linear-gradient(180deg, #fff6d8, #ffcf6a);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 0 8px rgba(255,179,32,0.5), 0 3px 5px rgba(0,0,0,0.6);
}
.sense-down .sense-nub { transform: perspective(40px) rotateX(22deg) translateY(2px); }
.sense-lab { font-size: 8px; color: #7b8494; margin-top: 3px; }

/* ---------- CRT terminal ---------- */
.crt-frame {
  background: linear-gradient(180deg, #141a12, #0a0d08);
  border: 1px solid #1c2416; border-radius: 10px; padding: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 6px 20px rgba(0,0,0,0.5);
}
.crt-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.crt-head-l { display: flex; align-items: center; gap: 8px; }
.crt-title { font-size: 11px; letter-spacing: 0.2em; color: rgba(77,255,122,0.8); }
.crt-head-r { display: flex; gap: 8px; align-items: center; }
.baud-toggle {
  display: flex; align-items: center; gap: 5px;
  font-size: 10px; letter-spacing: 0.12em; color: rgba(77,255,122,0.75);
  cursor: pointer; user-select: none;
  border: 1px solid #2a5a38; border-radius: 4px; padding: 2px 7px;
  background: rgba(0,20,6,0.5);
}
.baud-toggle:hover { background: rgba(0,40,12,0.6); }
.baud-toggle input { accent-color: #39ff6a; cursor: pointer; margin: 0; }
.baud-toggle #baudLabel.baud-off { color: rgba(255,179,32,0.85); }
.crt-head-r select { background: rgba(0,0,0,0.6); color: #ccc; font-size: 11px; border: 1px solid #444; border-radius: 4px; padding: 1px 4px; }
.small-btn { font-size: 11px; padding: 2px 8px; border: 1px solid #3a3f46; border-radius: 4px; background: transparent; color: #ccc; cursor: pointer; }
.small-btn:hover { background: #2a2f36; }
.crt-screen {
  font-family: 'Spleen 6x12', 'VT323', 'IBM Plex Mono', monospace;
  font-size: 18px; line-height: 1.6; letter-spacing: 0.5px;
  background: radial-gradient(ellipse at center, #0a1408 0%, #050a04 100%);
  position: relative; border-radius: 6px; padding: 12px;
  height: 300px; overflow-y: auto; white-space: pre-wrap; word-break: break-word;
  outline: none; cursor: text; text-shadow: 0 0 5px currentColor;
}
.crt-screen::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.15) 0 1px, transparent 1px 3px);
}
.crt-green { color: #4dff7a; }
.crt-amber { color: #ffb84d; background: radial-gradient(ellipse at center, #14100a 0%, #0a0704 100%); }
.crt-cursor { animation: blink 1s step-end infinite; opacity: 0.9; }
@keyframes blink { 50% { opacity: 0; } }
.crt-note { font-size: 10px; color: #5a6470; margin-top: 6px; }

/* ---------- inspector ---------- */
.insp-head { margin-bottom: 12px; }
.insp-title { font-size: 13px; letter-spacing: 0.2em; color: #7fc0ff; }
.insp-block { margin-bottom: 16px; }
.flag-row { display: flex; gap: 14px; }
.reg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; margin-bottom: 16px; }
.reg-row { display: flex; justify-content: space-between; font-size: 12px; padding: 2px 0; border-bottom: 1px solid rgba(60,80,100,0.25); }
.reg-name { color: rgba(127,192,255,0.8); }
.reg-val { color: #7fe6b0; }
.dis-box, .dump-box { background: rgba(0,0,0,0.4); border-radius: 4px; padding: 8px; font-size: 11px; }
.dis-line { display: flex; gap: 8px; color: #8b929b; }
.dis-line.cur { color: #ffcf6a; font-weight: 600; }
.dis-cur { width: 8px; }
.dis-addr { color: rgba(127,192,255,0.7); }
.dump-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.dump-ctl { display: flex; align-items: center; gap: 4px; font-size: 10px; color: #7b8494; }
.dump-ctl input { width: 60px; background: rgba(0,0,0,0.6); color: #7fe6b0; font-family: 'IBM Plex Mono', monospace; font-size: 11px; border: 1px solid #3a3f46; border-radius: 4px; padding: 1px 4px; }
.dump-box { overflow-x: auto; }
.dump-row { display: flex; gap: 8px; font-size: 10px; white-space: nowrap; margin-bottom: 1px; }
.dump-addr { color: rgba(127,192,255,0.7); }
.dump-cells { display: flex; }
.dump-cell { display: inline-block; width: 20px; text-align: center; color: #cbd3dc; }
.dump-cell.pc { background: rgba(255,180,60,0.45); color: #fff; border-radius: 3px; }
.dump-ascii { color: rgba(77,255,122,0.5); margin-left: 4px; }
.speed-row { display: flex; gap: 6px; }
.speed-btn { flex: 1; font-family: 'IBM Plex Mono', monospace; font-size: 11px; padding: 6px 0; border-radius: 4px; border: none; background: #1c232c; color: #8b929b; cursor: pointer; }
.speed-btn.active { background: #2f7fc4; color: #fff; }

/* ---------- footer ---------- */
.footer { text-align: center; font-size: 11px; color: #5a6470; padding: 8px 0 20px; }
.footer a { color: rgba(127,192,255,0.8); }

/* scrollbars */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,0.3); }
::-webkit-scrollbar-thumb { background: #2d4056; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #3d5570; }

@media (min-width: 900px) {
  .wrap { display: grid; grid-template-columns: 1fr 380px; grid-template-areas: "panel insp" "corrupt insp" "loader insp" "term insp" "foot foot"; align-items: start; }
  .altair-case { grid-area: panel; }
  .corrupter { grid-area: corrupt; }
  .panel-dark:not(.corrupter):not(.inspector) { grid-area: loader; }
  .crt-frame { grid-area: term; }
  .inspector { grid-area: insp; }
  .footer { grid-area: foot; }
}
</parameter>