:root { --case:#1b2624; --case2:#0c1211; --line:#52635d; --ink:#dbe6df; --muted:#91a099; --amber:#e2b149; --green:#73dc91; --red:#f06a59; }
* { box-sizing:border-box; }
body { min-height:100vh; margin:0; padding:30px 0 0; background:#0b1110; color:var(--ink); font:14px/1.6 system-ui,sans-serif; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.08; background:repeating-linear-gradient(0deg,transparent 0 2px,#fff 3px); }
.site-nav { margin:-30px 0 28px; min-height:58px; padding:0 max(5%,calc((100% - 1160px) / 2)); }
.shell { position:relative; width:min(1160px,90%); margin:auto; }
.page-header { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:18px; }
.eyebrow,.mono { font-family:ui-monospace,monospace; letter-spacing:.12em; }
.eyebrow { color:var(--amber); font-size:11px; }
h1 { margin:2px 0 0; font:700 clamp(30px,5vw,54px)/.95 ui-monospace,monospace; letter-spacing:.08em; }
.header-meta { color:var(--muted); text-align:right; font:11px/1.55 ui-monospace,monospace; letter-spacing:.08em; }
.exhibit-intro { display:grid; grid-template-columns:1.1fr .9fr; gap:18px; margin:0 0 22px; }
.exhibit-intro article { padding:20px 21px; border-top:2px solid #465754; background:#111718; }
.exhibit-intro h2 { margin:0 0 10px; color:#e1ebe6; font:700 14px ui-monospace,monospace; letter-spacing:.12em; }
.exhibit-intro p { margin:0; color:#aebbb5; font-size:13px; }.exhibit-intro p + p { margin-top:9px; }
.machine { border:1px solid #596a63; background:linear-gradient(135deg,#263331,#111817 54%,#17201e); box-shadow:0 25px 60px #000a; }
.plate { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:11px 18px; background:#bdc6bc; color:#15211e; font:700 13px ui-monospace,monospace; letter-spacing:.1em; }
.plate-meta { display:flex; align-items:center; gap:12px; }
.mode-state { display:inline-flex; align-items:center; min-height:24px; padding:4px 8px; border:1px solid #6f7c75; color:#314139; background:#d9dfd7; font:700 9px ui-monospace,monospace; letter-spacing:.08em; white-space:nowrap; }
.mode-state::before { content:""; width:6px; height:6px; margin-right:6px; border-radius:50%; background:#4e8e5d; box-shadow:0 0 5px #4e8e5d77; }
.mode-state.modified { border-color:#986c18; color:#5f3f08; background:#f1c765; }
.mode-state.modified::before { background:#b83f31; box-shadow:0 0 5px #b83f3188; }
.machine-body { padding:clamp(16px,3vw,30px); }
.readout { border:1px solid #263e35; background:#060b0a; box-shadow:inset 0 0 22px #000; }
.readout-head { display:flex; justify-content:space-between; padding:8px 12px; color:#82928a; font:10px ui-monospace,monospace; letter-spacing:.12em; }
.crt { display:grid; place-items:center; min-height:310px; padding:28px; color:var(--green); text-shadow:0 0 8px #74dc9190; }
.crt-grid { display:grid; grid-template-columns:repeat(3,76px); grid-template-rows:repeat(3,76px); border:1px solid #67ca82; }
.crt-cell { display:grid; place-items:center; border:1px solid #4b9e65; background:#0a1912; color:var(--green); font:700 45px ui-monospace,monospace; }
.crt-cell.mark-x { color:#e6f4e9; }.crt-cell.mark-o { color:#83e99d; }
.crt-caption { padding:0 14px 13px; color:#73887b; font:10px ui-monospace,monospace; letter-spacing:.09em; }
.console-row { display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:18px; margin-top:20px; }
.dial-panel,.status-panel { padding:17px; border:1px solid #31423c; background:#0b1110; }
.control-label { display:block; color:#9baaa3; font:10px ui-monospace,monospace; letter-spacing:.1em; }
.dial-wrap { display:grid; grid-template-columns:188px minmax(0,1fr); align-items:center; gap:28px; margin-top:15px; }
.dial { position:relative; width:177px; aspect-ratio:1; flex:0 0 auto; border:11px solid #2f3a36; border-radius:50%; background:#151d1b; box-shadow:inset 0 0 0 2px #070b0a, inset 0 0 18px #000; }
.dial::before { content:""; position:absolute; inset:36px; border:1px solid #82928a; border-radius:50%; }
.dial-number { position:absolute; left:50%; top:50%; display:grid; width:29px; height:29px; place-items:center; transform:translate(-50%,-50%) rotate(var(--a)) translateY(-64px) rotate(calc(-1 * var(--a))); border:1px solid #73817b; border-radius:50%; background:#22302c; color:#dce6e0; cursor:pointer; font:700 12px ui-monospace,monospace; }
.dial-number:hover,.dial-number[aria-pressed="true"] { border-color:var(--amber); background:var(--amber); color:#17211e; }
.dial.dialing .dial-number[aria-pressed="true"] { animation:dial-pulse .36s ease-out; }
@keyframes dial-pulse { 0%{box-shadow:0 0 0 0 #e2b149cc} 100%{box-shadow:0 0 0 15px #e2b14900} }
.dial-center { position:absolute; left:50%; top:50%; display:grid; width:58px; height:58px; place-items:center; transform:translate(-50%,-50%); border:1px solid #69776f; border-radius:50%; color:var(--amber); font:700 27px/1 ui-monospace,monospace; }
.dial-note { max-width:34ch; margin:0; color:#a9b6af; font-size:13px; line-height:1.75; }
.status-panel { display:flex; flex-direction:column; }
.status-value { margin:11px 0 18px; color:var(--amber); font:700 22px/1.2 ui-monospace,monospace; letter-spacing:.05em; }
.status-panel .historical-control { display:grid; grid-template-columns:1fr; gap:7px; margin-bottom:7px; }
.status-panel > .button { width:100%; margin-top:7px; }
.oxo-page .button { letter-spacing:.06em; }
.oxo-page .crt-cell { font-family:ui-monospace,monospace; font-weight:500; }
.button { min-height:42px; padding:9px 13px; border:1px solid #596a63; border-radius:3px; background:#1d2926; color:#e3ebe6; cursor:pointer; font:700 11px ui-monospace,monospace; letter-spacing:.08em; }.button:hover{border-color:#c7d4cb}.button.primary{border-color:#d6a541;background:#e2b149;color:#17211e}.button:disabled{opacity:.45;cursor:not-allowed}
.message { min-height:29px; margin:17px 0 0; color:#aebbb5; font:12px ui-monospace,monospace; }.message.good{color:var(--green)}.message.bad{color:var(--amber)}
.references { margin:21px 0 0; padding:17px 18px 0; border-top:2px solid #596a63; background:#101716; }
.references h2 { margin:0 0 8px; color:#dce6e0; font:700 12px ui-monospace,monospace; letter-spacing:.1em; }
.references > p { max-width:90ch; margin:0 0 14px; color:#9ca9a3; font-size:12px; }
.reference-list { margin:0; padding:0; list-style:none; border-top:1px solid #34443f; }
.reference-list li { display:grid; grid-template-columns:minmax(190px,260px) minmax(0,1fr); gap:18px; padding:12px 0; border-bottom:1px solid #2e3e39; }
.reference-list a { color:#e1b556; font:700 11px/1.5 ui-monospace,monospace; letter-spacing:.03em; text-underline-offset:3px; }
.reference-list span { color:#96a49d; font-size:12px; }
.site-footer { border-top:1px solid #2e3e39; background:transparent; }
.play-guide { margin:0 0 22px; border:1px solid #596a63; background:#111917; }
.play-guide-head { display:flex; align-items:baseline; justify-content:space-between; gap:18px; padding:14px 18px; border-bottom:1px solid #33443e; background:#17211f; }
.play-guide h2 { margin:0; color:#dfe9e2; font:700 13px ui-monospace,monospace; letter-spacing:.1em; }
.play-guide h2::before { content:"// "; color:var(--amber); }
.play-guide-lede { margin:0; color:#92a099; font-size:12px; }
.guide-grid { display:grid; grid-template-columns:repeat(4,1fr); }
.guide-step { min-height:142px; padding:16px 17px; border-right:1px solid #30413b; }
.guide-step:last-child { border-right:0; }
.guide-step b { display:block; margin-bottom:7px; color:var(--amber); font:700 11px ui-monospace,monospace; letter-spacing:.08em; }
.guide-step p { margin:0; color:#aebbb5; font-size:12px; line-height:1.65; }
.guide-step strong { color:#e1ebe5; }
.modifications { margin-top:-1px; padding:0; border:1px solid #596a63; background:#111917; box-shadow:0 18px 36px #0007; }
.modifications-head{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:48px;padding:0 18px;border-bottom:1px solid #33443e;background:#17211f}
.modifications h2{margin:0;color:#dfe9e2;font:700 11px ui-monospace,monospace;letter-spacing:.1em}.modifications h2::before{content:"// ";color:var(--amber)}
.modifications-head::after{content:"OPTIONAL / DEFAULT OFF";margin-left:auto;color:#708078;font:9px ui-monospace,monospace;letter-spacing:.09em}
.mod-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0;padding:12px 18px 0}
.mod-option{display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:10px;min-height:59px;padding:9px 10px;border-right:1px solid #30413b;color:#9eaca5;font:11px/1.35 ui-monospace,monospace;cursor:pointer}.mod-option:last-child{border-right:0}.mod-option:hover{background:#17221f}.mod-option input{position:relative;width:32px;height:18px;margin:0;appearance:none;border:1px solid #64736c;border-radius:10px;background:#202b28;cursor:pointer}.mod-option input::after{content:"";position:absolute;top:3px;left:3px;width:10px;height:10px;border-radius:50%;background:#84928b;transition:transform .15s,background .15s}.mod-option input:checked{border-color:#d5a340;background:#58471f}.mod-option input:checked::after{transform:translateX(14px);background:#f1bd4c}.mod-option b{display:block;margin-bottom:2px;color:#dce6df;font-size:10px;letter-spacing:.04em}.mod-note{margin:0;padding:10px 18px 14px;color:#819188;font-size:11px}.modifications:has(input:checked){border-color:#9e792f}.historical-control[hidden]{display:none!important}
.mod-option-range{align-items:start}.mod-option-main{display:contents;cursor:pointer}.mod-range-control{grid-column:2;display:grid;grid-template-columns:auto minmax(60px,1fr) auto;align-items:center;gap:7px}.mod-range-control label{color:#728078;font-size:9px}.mod-option .mod-range{width:100%;height:14px;margin:0;appearance:auto;border:0;border-radius:0;background:transparent;accent-color:var(--amber);cursor:pointer}.mod-option .mod-range::after{display:none}.mod-option .mod-range:disabled{opacity:.4;cursor:not-allowed}.mod-option-range output{color:#d5ad55;font:10px ui-monospace,monospace;letter-spacing:.04em}
.dynamic-control[hidden],.control-stack[hidden]{display:none!important}
/* Tennis for Two */
.scope { position:relative; min-height:370px; overflow:hidden; background:#050908; }
.scope canvas { display:block; width:100%; height:370px; image-rendering:pixelated; }
.scope::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.1; background:repeating-linear-gradient(0deg,transparent 0 3px,#b8ffcb 4px); }
.tennis-controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; width:100%; margin-top:22px; }.tennis-controls:has(.central-serve:not([hidden])){grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
.player-control { padding:16px; border:1px solid #31423c; background:#0b1110; }.player-control.right{text-align:right}.player-name{color:var(--amber);font:700 12px ui-monospace,monospace;letter-spacing:.1em}.angle-value{display:block;margin:9px 0;color:#e7f0e9;font:700 21px ui-monospace,monospace}.angle{width:100%;accent-color:var(--amber)}.central-serve{align-self:center;display:grid;justify-items:center;gap:7px}.serve-directions{display:grid;grid-template-columns:42px 42px;gap:5px}.serve-direction{width:42px;padding:0;font-size:18px}.scoreboard{display:flex;justify-content:center;gap:20px;padding-top:15px;color:#84958c;font:11px ui-monospace,monospace;letter-spacing:.09em}.scoreboard b{color:#e8f1eb;font-size:18px}
/* Nimrod */
.nim-lamps { display:grid; gap:18px; padding:34px min(9vw,100px); }
.nim-row { display:grid; grid-template-columns:92px 1fr; gap:17px; align-items:center; }.nim-row-label{color:#829189;font:11px ui-monospace,monospace;letter-spacing:.08em}.nim-row-lamps{display:flex;gap:clamp(7px,1.6vw,18px);flex-wrap:wrap}.nim-lamp{width:clamp(25px,4.5vw,44px);aspect-ratio:1;border:3px solid #07100e;border-radius:50%;background:#1b2923;box-shadow:inset 0 2px 7px #000;cursor:pointer}.nim-lamp.on{background:#e45e4f;box-shadow:0 0 16px #e45e4f8c}.nim-lamp.selected{background:#e5b04b;box-shadow:0 0 17px #e5b04b9e}.nim-lamp:disabled{cursor:not-allowed}.nim-console{display:grid;grid-template-columns:1fr auto;gap:20px;margin-top:21px;padding:16px;border:1px solid #31423c;background:#0b1110}.nim-state{margin:7px 0 0;color:#e8f1eb;font:700 20px ui-monospace,monospace}.nim-hint{margin-top:8px;color:#d5ad55;font:11px ui-monospace,monospace;letter-spacing:.06em}.nim-actions{display:flex;align-items:center;gap:9px}
@media(max-width:840px){.console-row{grid-template-columns:1fr}.dial-wrap{grid-template-columns:188px 1fr}.status-panel .historical-control{grid-template-columns:1fr 1fr}.status-panel{display:grid;grid-template-columns:1fr 1fr;gap:7px}.status-panel .control-label,.status-panel .status-value{grid-column:1/-1}.status-panel > .button{margin:0}.mod-options{grid-template-columns:1fr 1fr}.guide-grid{grid-template-columns:repeat(2,1fr)}.guide-step:nth-child(2){border-right:0}.guide-step:nth-child(-n+2){border-bottom:1px solid #30413b}}
@media(max-width:720px){body{padding:18px 0 0}.site-nav{margin:-18px 0 23px;padding:0 5vw}.site-nav-links a{padding:0 7px;font-size:9px}.page-header{align-items:start;flex-direction:column}.header-meta{text-align:left}.exhibit-intro,.console-row{grid-template-columns:1fr}.plate{align-items:flex-start}.plate-meta{flex-direction:column;align-items:flex-end;gap:5px}.crt{min-height:260px}.crt-grid{grid-template-columns:repeat(3,60px);grid-template-rows:repeat(3,60px)}.crt-cell{font-size:35px}.dial-wrap{grid-template-columns:1fr;justify-items:center}.dial{width:160px}.dial-note{max-width:none}.dial-number{transform:translate(-50%,-50%) rotate(var(--a)) translateY(-57px) rotate(calc(-1 * var(--a)))}.dial-center{width:54px;height:54px}.status-panel{display:flex}.status-panel .historical-control{grid-template-columns:1fr 1fr;width:100%}.tennis-controls,.tennis-controls:has(.central-serve:not([hidden])){grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.central-serve{grid-column:1/-1;grid-row:2;justify-self:center}.player-control.right{text-align:left}.scope,.scope canvas{height:300px}.nim-row{grid-template-columns:1fr;gap:8px}.nim-console{grid-template-columns:1fr}.nim-actions{justify-content:stretch}.nim-actions .button{flex:1}.mod-options{grid-template-columns:1fr}.mod-option{border-right:0;border-bottom:1px solid #30413b}.modifications-head::after{display:none}.play-guide-head{display:block}.play-guide-lede{margin-top:5px}.guide-grid{grid-template-columns:1fr}.guide-step,.guide-step:nth-child(2){border-right:0;border-bottom:1px solid #30413b}.guide-step:last-child{border-bottom:0}}
@media(max-width:720px){.site-nav{padding-left:5%;padding-right:5%}.reference-list li{grid-template-columns:1fr;gap:4px}}