:root {
  color-scheme: dark;
  --lab: #11130f;
  --lab-deep: #080a08;
  --case: #d1d0ca;
  --case-mid: #a8a8a3;
  --case-dark: #686963;
  --panel: #343732;
  --screen: #10170f;
  --phosphor: #e8f0df;
  --phosphor-soft: #aebca7;
  --amber: #e8b865;
  --blue: #6c91b8;
  --red: #d35c4a;
  --green: #74c873;
  --line: rgba(255,255,255,.15);
  font-family: Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--lab-deep); }
body {
  min-height: 100vh;
  margin: 0;
  color: #ecece8;
  background:
    radial-gradient(circle at 23% 12%, rgba(225, 222, 199, .10), transparent 29rem),
    linear-gradient(155deg, #20221d 0%, #11130f 48%, #070907 100%);
}
a { color: inherit; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.skip-link {
  position: fixed;
  top: -90px;
  left: 12px;
  z-index: 100;
  padding: 10px 14px;
  border-radius: 7px;
  color: #10170f;
  background: var(--phosphor);
  font-weight: 800;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }

.lab { width: min(1320px, calc(100% - 26px)); margin: 0 auto; padding: 12px 0 32px; }
.lab-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 7px 4px 17px;
  color: #bfc2b9;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .10em;
}
.lab-header .lab-link:last-child { justify-self: end; }
.lab-link { color: #d9dbd5; text-decoration: none; }
.lab-link:hover, .lab-link:focus-visible { color: #fff; }

.lab-scene {
  position: relative;
  min-height: calc(100vh - 72px);
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 70px 40px 96px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 28px;
  background:
    linear-gradient(to bottom, transparent 0 74%, rgba(34,28,18,.76) 74% 100%),
    radial-gradient(circle at 18% 15%, rgba(218,205,165,.12), transparent 29rem),
    linear-gradient(142deg, #292b25, #11130f 61%, #080a08);
  box-shadow: inset 0 -80px 120px rgba(0,0,0,.40), 0 34px 100px rgba(0,0,0,.42);
}
.lab-light { position:absolute; inset:-20% auto auto -12%; width:55%; height:65%; background:radial-gradient(circle,rgba(232,210,159,.15),transparent 66%); pointer-events:none; }

.machine-wrap { position: relative; z-index: 3; width: min(1060px, 91vw); filter: drop-shadow(0 38px 38px rgba(0,0,0,.55)); }
.machine {
  overflow: hidden;
  border: 1px solid #efefe9;
  border-radius: 10px 10px 19px 19px;
  color: #20221f;
  background: linear-gradient(145deg, #dddcd7 0%, #c4c4be 52%, #9c9d97 100%);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.55), inset 0 -9px 17px rgba(52,54,50,.24);
}
.machine-topline {
  min-height: 82px;
  display: grid;
  grid-template-columns: 135px 1fr auto;
  align-items: center;
  gap: 21px;
  padding: 15px 23px;
  border-bottom: 2px solid #777a73;
  background: linear-gradient(#e3e2dd,#c7c7c1);
}
.ibm-wordmark { font-size: 2.2rem; font-weight: 950; letter-spacing: -.08em; color:#30332f; }
.model-block strong, .model-block span { display:block; }
.model-block strong { font-size:1.65rem; line-height:1; letter-spacing:.08em; }
.model-block span { margin-top:6px; color:#555951; font-size:.64rem; font-weight:800; letter-spacing:.11em; }
.power-block { display:flex; align-items:center; gap:9px; color:#4c504a; font-size:.62rem; font-weight:900; letter-spacing:.09em; }
.power-switch { width:49px; height:27px; position:relative; border:2px inset #eeeee9; border-radius:3px; background:#646660; cursor:pointer; }
.power-switch i { position:absolute; width:20px; height:19px; left:4px; top:2px; border-radius:2px; background:#b44b3e; box-shadow:inset 0 1px 0 rgba(255,255,255,.3); transition:left .15s ease, background .15s ease; }
.power-switch.is-on i { left:21px; background:#66a95f; }

.machine-face { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(280px,.55fr); gap:24px; padding:26px 28px 20px; }
.crt-bezel { padding:15px; border-radius:7px; background:linear-gradient(145deg,#52554f,#2b2d2a); box-shadow:inset 0 2px 1px rgba(255,255,255,.12),inset 0 -5px 10px rgba(0,0,0,.28); }
.crt-label { display:flex; justify-content:space-between; margin:0 3px 10px; color:#d6d8d1; font-size:.58rem; font-weight:900; letter-spacing:.13em; }
.crt {
  position: relative;
  min-height: 420px;
  overflow: hidden;
  border: 9px solid #171a17;
  border-radius: 42px / 19px;
  color: var(--phosphor);
  background: radial-gradient(ellipse at center, #263224 0%, #121a11 58%, #050805 100%);
  box-shadow: inset 0 0 65px rgba(191,211,181,.14), inset 0 0 0 2px #020302, 0 7px 12px rgba(0,0,0,.40);
  font-family: "Courier New", ui-monospace, monospace;
  text-shadow: 0 0 6px rgba(232,240,223,.36);
}
.crt-glass { position:absolute; inset:0; z-index:20; pointer-events:none; background:repeating-linear-gradient(to bottom,rgba(255,255,255,.026) 0 1px,transparent 2px 5px),radial-gradient(ellipse at 28% 5%,rgba(255,255,255,.055),transparent 36%); mix-blend-mode:screen; }
.boot-screen,.terminal-screen,.engineer-screen { position:relative; z-index:2; min-height:402px; padding:22px 24px; }
.boot-screen { display:flex; flex-direction:column; }
.boot-screen pre { flex:1; margin:0; white-space:pre-wrap; font:700 .88rem/1.48 "Courier New",monospace; }
.crt-button { align-self:flex-start; min-height:37px; padding:7px 10px; border:1px solid rgba(232,240,223,.48); color:var(--phosphor); background:transparent; cursor:pointer; font:800 .7rem "Courier New",monospace; }
.crt-button:hover,.crt-button:focus-visible { background:rgba(232,240,223,.10); outline:none; }

.terminal-screen { display:grid; grid-template-rows:1fr auto auto; gap:8px; }
.terminal-output { min-height:0; overflow:hidden; white-space:pre-wrap; font-size:.83rem; line-height:1.42; }
.terminal-form { display:flex; align-items:center; gap:7px; }
.terminal-form label { font-weight:900; }
.terminal-form input { min-width:0; flex:1; padding:2px; border:0; border-bottom:1px solid rgba(232,240,223,.25); outline:none; color:var(--phosphor); background:transparent; text-transform:uppercase; text-shadow:inherit; font:inherit; }
.terminal-help { margin:0; color:var(--phosphor-soft); font-size:.62rem; line-height:1.3; }

.engineer-screen { color:#dfe9da; }
.engineer-header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:8px; border-bottom:1px solid rgba(232,240,223,.35); font-size:.73rem; letter-spacing:.07em; }
.engineer-header button { border:1px solid rgba(232,240,223,.42); color:inherit; background:transparent; cursor:pointer; font:inherit; }
.engineer-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:18px 0; }
.engineer-grid div { padding:12px; border:1px solid rgba(232,240,223,.24); background:rgba(232,240,223,.035); }
.engineer-grid span,.engineer-grid strong { display:block; }
.engineer-grid span { color:var(--phosphor-soft); font-size:.61rem; letter-spacing:.08em; }
.engineer-grid strong { margin-top:5px; font-size:.82rem; }
.engineer-note { padding-top:12px; border-top:1px solid rgba(232,240,223,.24); color:var(--phosphor-soft); font-size:.72rem; line-height:1.48; }

.tape-bay { display:flex; flex-direction:column; gap:14px; padding:14px; border:2px solid #7f817b; border-radius:6px; background:linear-gradient(145deg,#b8b8b2,#90918b); box-shadow:inset 0 2px 0 rgba(255,255,255,.35); }
.tape-drive { position:relative; min-height:104px; padding:13px; border:2px inset #e0e0db; background:#454842; color:#dfe1da; }
.drive-label { display:block; margin-bottom:8px; font-size:.57rem; font-weight:900; letter-spacing:.14em; }
.tape-slot { height:25px; position:relative; overflow:hidden; border:4px inset #222420; background:#080908; }
.tape-slot i { position:absolute; left:7%; right:7%; top:7px; height:5px; background:#171916; }
.tape-slot.mounted::before { content:""; position:absolute; inset:3px 11% -8px; background:linear-gradient(#d8cda9,#9f9478); transform:translateY(0); animation:insertTape .35s ease both; }
.drive-light { position:absolute; right:12px; bottom:13px; width:9px; height:9px; border-radius:50%; background:#473f35; }
.drive-light.active { background:#d88648; box-shadow:0 0 10px #d88648; }
.tape-drive > strong { display:block; margin-top:10px; max-width:85%; overflow:hidden; font-size:.64rem; letter-spacing:.08em; text-overflow:ellipsis; white-space:nowrap; }
.control-row { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.panel-key { min-height:40px; padding:6px; border:2px outset #e2e2dc; color:#252824; background:#bbbcb6; cursor:pointer; font-size:.56rem; font-weight:900; letter-spacing:.05em; }
.panel-key:active { border-style:inset; }
.panel-key:focus-visible,.tape:focus-visible { outline:3px solid #355d7c; outline-offset:2px; }
.tape-library { display:grid; gap:9px; }
.tape { min-height:72px; display:grid; grid-template-columns:54px 1fr; grid-template-rows:auto auto; column-gap:9px; align-items:center; padding:10px; border:1px solid #5e605a; border-radius:3px; color:#242722; background:linear-gradient(145deg,#ddd2b2,#bdb08f); box-shadow:3px 4px 0 rgba(53,55,50,.25); cursor:pointer; text-align:left; }
.tape span { grid-row:1/3; display:grid; place-items:center; align-self:stretch; border:2px double #5e5c4e; font-size:.63rem; font-weight:900; }
.tape strong { font-size:.77rem; letter-spacing:.03em; }
.tape small { color:#5f5e53; font-size:.55rem; font-weight:800; }
.tape:hover { transform:translateY(-1px); }

.keyboard { position:relative; height:150px; margin:0 28px 19px; border-radius:6px 6px 13px 13px; background:linear-gradient(150deg,#c5c5bf,#969791); box-shadow:inset 0 -7px 12px rgba(44,46,42,.22); }
.key-grid { position:absolute; left:30px; right:30px; top:24px; height:78px; border-radius:4px; background:repeating-linear-gradient(90deg,#3d403b 0 18px,transparent 18px 23px),repeating-linear-gradient(#3d403b 0 14px,transparent 14px 20px); opacity:.78; transform:perspective(420px) rotateX(45deg); }
.spacebar { position:absolute; left:36%; right:27%; bottom:20px; height:15px; border-radius:2px; background:#4a4d47; box-shadow:inset 0 2px 0 rgba(255,255,255,.15); }
.machine-footer { display:flex; justify-content:space-between; gap:16px; padding:0 28px 17px; color:#565a53; font-size:.57rem; font-weight:900; letter-spacing:.07em; }

.manual-stack { position:absolute; z-index:2; left:5%; bottom:9%; width:150px; height:112px; padding:15px; transform:rotate(-3deg); color:#252820; background:#bbb89f; border-left:10px solid #72766e; box-shadow:6px 12px 24px rgba(0,0,0,.35); font-size:.66rem; font-weight:900; letter-spacing:.08em; }
.manual-stack i { position:absolute; right:13px; bottom:11px; font-style:normal; font-size:1.5rem; color:#60645c; }
.research-note { position:absolute; z-index:4; right:4%; bottom:7%; width:178px; padding:16px; transform:rotate(2deg); color:#28251e; background:#d0bb78; box-shadow:7px 11px 22px rgba(0,0,0,.32); }
.research-note p { margin:0 0 9px; font-size:.58rem; font-weight:900; letter-spacing:.12em; }
.research-note strong { font-size:.93rem; line-height:1.1; }
.research-note span { display:block; margin-top:12px; font:italic .68rem/1.35 Georgia,serif; }

.catalog-dialog { width:min(920px,calc(100% - 28px)); max-height:min(720px,calc(100vh - 34px)); padding:0; overflow:hidden; border:5px double #4d514b; border-radius:3px; color:#20231e; background:#d5d5cf; box-shadow:0 28px 95px rgba(0,0,0,.68); }
.catalog-dialog::backdrop { background:rgba(0,0,0,.76); backdrop-filter:blur(3px); }
.catalog-titlebar { min-height:41px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:5px 7px 5px 12px; color:#ecede8; background:#3d423c; border-bottom:3px double #1d201c; font-size:.77rem; letter-spacing:.08em; }
.catalog-titlebar button { width:34px; height:29px; border:2px outset #eee; color:#252823; background:#c4c5bf; cursor:pointer; font-weight:900; }
.catalog-tools { display:flex; align-items:center; gap:10px; padding:9px 11px; border-bottom:2px solid #6e726b; background:#b8bab3; font-size:.67rem; font-weight:900; }
.catalog-tools input { min-width:0; flex:1; padding:8px; border:2px inset #ecece7; color:#1f221e; background:#f2f2ed; text-transform:uppercase; outline:none; }
.catalog-body { min-height:430px; display:grid; grid-template-columns:minmax(240px,.72fr) minmax(0,1.28fr); }
.catalog-list { max-height:510px; overflow:auto; padding:8px; border-right:3px double #747870; background:#a8aaa3; }
.catalog-item { width:100%; display:grid; grid-template-columns:63px minmax(0,1fr); gap:10px; align-items:center; padding:9px; border:0; color:#20231e; background:transparent; text-align:left; cursor:pointer; }
.catalog-item:hover,.catalog-item:focus-visible,.catalog-item[aria-selected="true"] { outline:none; color:#f2f3ef; background:#3d423c; }
.catalog-mark { min-height:38px; display:grid; place-items:center; border:2px double currentColor; font-size:.67rem; font-weight:900; }
.catalog-item strong,.catalog-item small { display:block; }
.catalog-item strong { overflow:hidden; font-size:.76rem; text-overflow:ellipsis; white-space:nowrap; }
.catalog-item small { margin-top:4px; font-size:.59rem; opacity:.82; }
.catalog-detail { max-height:510px; overflow:auto; padding:24px; background:#e4e4de; }
.catalog-detail h2 { margin:.35rem 0 .7rem; font-size:clamp(1.7rem,4vw,2.7rem); letter-spacing:-.035em; }
.catalog-detail p { line-height:1.55; }
.catalog-kicker { color:#555a52; font-size:.65rem; font-weight:900; letter-spacing:.10em; }
.catalog-meta { color:#555a52; font-size:.65rem; font-weight:900; letter-spacing:.07em; text-transform:uppercase; }
.catalog-facts { display:grid; gap:9px; margin:16px 0; }
.catalog-facts div { padding:11px; border:1px solid #969990; background:rgba(255,255,255,.34); }
.catalog-facts strong { display:block; margin-bottom:4px; color:#555a52; font-size:.64rem; letter-spacing:.06em; }
.catalog-actions { display:flex; flex-wrap:wrap; gap:8px; }
.catalog-action { display:inline-flex; align-items:center; min-height:41px; padding:9px 12px; border:2px outset #ecece7; color:#f1f2ed; background:#3d423c; font-size:.68rem; font-weight:900; text-decoration:none; }
.catalog-action.secondary { color:#22251f; background:#c2c4bd; }
.catalog-status { min-height:29px; padding:7px 10px; border-top:2px solid #747870; background:#b8bab3; font-size:.65rem; font-weight:800; }
.noscript { width:min(900px,calc(100% - 24px)); margin:18px auto; padding:15px; border:1px solid var(--line); }

.machine.powered-off .crt { color:transparent; text-shadow:none; background:#060806; box-shadow:inset 0 0 28px #000; }
.machine.powered-off .crt > * { visibility:hidden; }
.machine.powered-off .drive-light { background:#3f3f3b; box-shadow:none; }

@keyframes insertTape { from { transform:translateY(-25px); } to { transform:translateY(0); } }

@media (max-width: 1050px) {
  .lab-scene { padding-left:22px; padding-right:22px; }
  .machine-face { grid-template-columns:1fr; }
  .tape-bay { display:grid; grid-template-columns:.8fr 1fr; align-items:start; }
  .control-row { grid-column:1; }
  .tape-library { grid-column:2; grid-row:1/3; }
  .manual-stack,.research-note { display:none; }
}

@media (max-width: 700px) {
  .lab { width:100%; padding:0; }
  .lab-header { grid-template-columns:1fr 1fr; padding:10px 12px; }
  .lab-header > span { display:none; }
  .lab-scene { min-height:calc(100vh - 44px); padding:12px 7px 30px; border:0; border-radius:0; align-items:start; }
  .machine-wrap { width:100%; }
  .machine-topline { grid-template-columns:76px 1fr auto; gap:10px; padding:12px; }
  .ibm-wordmark { font-size:1.45rem; }
  .model-block strong { font-size:1.25rem; }
  .model-block span { display:none; }
  .power-block > span { display:none; }
  .machine-face { gap:14px; padding:14px 12px; }
  .crt-bezel { padding:9px; }
  .crt { min-height:455px; border-width:7px; border-radius:28px / 15px; }
  .boot-screen,.terminal-screen,.engineer-screen { min-height:439px; padding:17px 15px; }
  .terminal-output { font-size:.76rem; }
  .terminal-help { font-size:.55rem; }
  .tape-bay { display:flex; }
  .tape-library { grid-template-columns:1fr; }
  .keyboard { height:105px; margin:0 12px 14px; }
  .key-grid { left:18px; right:18px; top:15px; height:54px; }
  .spacebar { bottom:12px; }
  .machine-footer { padding:0 13px 13px; }
  .machine-footer span:first-child { display:none; }
  .catalog-body { min-height:0; grid-template-columns:1fr; }
  .catalog-list { max-height:200px; border-right:0; border-bottom:3px double #747870; }
  .catalog-detail { max-height:390px; padding:18px; }
  .engineer-grid { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important; }
}