:root{color-scheme:dark;--paper:#e3e4da;--black:#151715;--chip-w:740px;--chip-h:500px;--square:72px}
*{box-sizing:border-box}html{scroll-behavior:auto}body{margin:0;background:var(--black);color:var(--paper);font-family:Arial,Helvetica,sans-serif}button,input{font:inherit}a{color:inherit;text-underline-offset:.22em}button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid #d5e5ae;outline-offset:5px}.stage{height:100svh;min-height:500px;position:relative;overflow:hidden;isolation:isolate;background:#131713}.perspective{position:absolute;inset:0;perspective:1350px;perspective-origin:50% 48%;overflow:hidden}.camera{position:absolute;left:50%;top:50%;width:1600px;height:1000px;margin:-500px 0 0 -800px;transform-style:preserve-3d;transform-origin:800px 500px;will-change:transform}.board,.level{position:absolute;inset:0;transform-style:preserve-3d}.quarter{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform;pointer-events:none}.board-face,.reverse{position:absolute;inset:0;backface-visibility:hidden}.board-face{background:url(assets/board.svg?v=f97dd58a6997) 0 0/1600px 1000px no-repeat}.reverse{transform:rotateY(180deg);filter:brightness(.67)}.north{clip-path:polygon(0 0,100% 0,100% 25%,0 25%);transform-origin:50% 15%}.south{clip-path:polygon(0 75%,100% 75%,100% 100%,0 100%);transform-origin:50% 85%}.west{clip-path:polygon(0 25%,26.875% 25%,26.875% 75%,0 75%);transform-origin:15% 50%}.east{clip-path:polygon(73.125% 25%,100% 25%,100% 75%,73.125% 75%);transform-origin:85% 50%}.cpu{position:absolute;left:800px;top:500px;width:var(--chip-w);height:var(--chip-h);margin-left:calc(var(--chip-w)/-2);margin-top:calc(var(--chip-h)/-2);transform-style:preserve-3d;transform:translateZ(22px)}.terminal-shell{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}.terminal{position:absolute;inset:0;background:#1b1d1b;border:2px solid #313930;border-radius:3px;box-shadow:0 0 0 7px #1b261e,0 12px 0 6px #080d09,20px 35px 36px #0006;transform:translateZ(18px);padding:25px 30px;overflow:hidden;font-family:"SF Mono",ui-monospace,"SFMono-Regular",Menlo,Monaco,Consolas,"Liberation Mono",monospace;font-size:14px;line-height:1.52;letter-spacing:-.025em}.terminal p{margin:0 0 16px}.terminal-meta{color:#8b9789;font-size:11px}.monologue{max-width:630px}.monologue span{color:#91a28c}.command-form{display:flex;align-items:center;gap:10px;margin-top:34px;white-space:nowrap}.command-form label{color:#91a28c}.command-form input{min-width:0;flex:1;border:0;border-bottom:1px solid #525c4f;background:none;color:#e3e4da;outline-offset:3px;padding:6px 0;border-radius:0}.command-form input::placeholder{color:#899084}.command-form button{border:0;background:none;color:#cbd4bd;padding:6px;cursor:pointer}.response{color:#db796d;font-size:13px;margin-top:18px}.unknown-error{opacity:0}.shell-edge{position:absolute;inset:8px -14px -13px 8px;background:#0a110c;transform:translateZ(-4px)}.cpu-pins{position:absolute;inset:-24px;z-index:-1;background:repeating-linear-gradient(90deg,#87947d 0 4px,#263b2c 4px 9px);box-shadow:0 0 0 3px #3e5741}.cpu-pins::after{content:"";position:absolute;inset:20px -6px;background:repeating-linear-gradient(0deg,#a4ac92 0 4px,#273d2c 4px 9px)}.chip{position:absolute;transform-style:preserve-3d;transform:translateZ(35px);will-change:transform}.chip .package{position:absolute;inset:0;background:linear-gradient(125deg,#30392f,#101b13 45%,#1d291f);box-shadow:8px 12px 0 #07100b,13px 20px 20px #0007;border:2px solid #4b5d46}.package::before,.package::after{content:"";position:absolute;left:-20px;right:-20px;height:17px;background:repeating-linear-gradient(90deg,#b6bca4 0 4px,#2f4836 4px 10px);transform:translateZ(-8px)}.package::before{top:-18px}.package::after{bottom:-18px}.package i{position:absolute;width:8px;height:8px;border:1px solid #7b886e;border-radius:50%;left:12px;top:12px}.memory-one{left:100px;top:440px;width:210px;height:130px}.memory-two{left:130px;top:665px;width:210px;height:130px}.controller{left:1230px;top:375px;width:230px;height:190px}.socket{left:990px;top:80px;width:260px;height:110px}.ribbon{position:absolute;left:1310px;top:600px;width:200px;height:330px;transform:translateZ(10px) rotate(-9deg);transform-origin:top center;background:repeating-linear-gradient(90deg,#94805b 0 2px,#4b442d 2px 6px);border:10px solid #18271b;border-top:24px solid #d2c49a;will-change:transform}.checker{background-color:#111312;background-image:conic-gradient(#a855a4 25%,transparent 0 50%,#a855a4 0 75%,transparent 0);background-size:calc(var(--square)*2) calc(var(--square)*2)}.level{transform:translateZ(-36px);pointer-events:none}.level-back{position:absolute;left:430px;top:250px;width:740px;height:500px;box-shadow:inset 0 0 0 2px #bd73b1;transform:translateZ(-80px)}.doorway{position:absolute;left:63%;top:30%;width:17%;height:70%;background:#090c09;border-left:5px solid #b36dab}.level-left{position:absolute;left:60px;top:120px;width:520px;height:730px;transform-origin:right center;transform:rotateY(73deg) translateZ(-400px);filter:brightness(.65)}.level-floor{position:absolute;left:270px;top:750px;width:1000px;height:1000px;transform-origin:50% 0;transform:rotateX(72deg) translateZ(-10px);filter:brightness(.7)}.level-return{position:absolute;left:1165px;top:250px;width:480px;height:500px;transform-origin:left center;transform:rotateY(-72deg) translateZ(-80px);filter:brightness(.75)}.level-slice{position:absolute;left:860px;top:-100px;width:260px;height:620px;transform-origin:50% 100%;transform:translateZ(-780px) rotateY(-25deg);filter:brightness(.5)}.passage-copy{position:absolute;left:7vw;top:15vh;width:min(720px,65vw);transform:translateY(110vh);pointer-events:none}.passage-copy p{font-family:Arial,Helvetica,sans-serif;font-size:clamp(38px,5.9vw,92px);letter-spacing:-.065em;line-height:.97;margin:0}.scroll-cue{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);font-family:Menlo,monospace;font-size:11px;color:#9ca294;letter-spacing:.01em;white-space:nowrap}.scroll-cue span{margin-left:20px}.afterword{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr;gap:8vw;align-items:center;padding:12vh 7vw 15vh;background:#d9dfcc;color:#182318}.afterword-quote{font-size:clamp(36px,5.6vw,88px);font-weight:600;line-height:1;letter-spacing:-.06em;margin:0}.afterword-body{max-width:520px;font-size:20px;line-height:1.5}.afterword-body a{font-size:13px;display:inline-block;margin:25px 25px 0 0}footer{padding:40px 7vw 65px;max-width:1100px;font-size:13px;line-height:1.6;color:#b5bdaa}body:not(.animated) .stage{height:auto;min-height:0}.static-view{display:none}body:not(.animated) .perspective{position:relative;height:800px;perspective:none}body:not(.animated) .camera{transform:scale(.7)}body:not(.animated) .passage-copy{position:relative;transform:none;left:auto;top:auto;width:auto;padding:60px 7vw}body:not(.animated) .scroll-cue{display:none}
@media(max-width:700px){:root{--chip-w:380px;--chip-h:680px;--square:60px}.stage{min-height:480px}.perspective{perspective:1100px}.terminal{padding:34px 30px;font-size:14px;line-height:1.65}.terminal p{margin-bottom:25px}.command-form{flex-wrap:wrap;margin-top:25px;gap:8px}.command-form label{width:100%;font-size:12px}.command-form input{width:230px;flex:1}.terminal-meta{font-size:10px}.response{font-size:12px}.cpu-pins{inset:-22px}.monologue{width:100%}.passage-copy{left:7vw;top:12vh;width:85vw}.passage-copy p{font-size:clamp(34px,9.5vw,64px);line-height:1.03}.afterword{display:block;padding:70px 7vw}.afterword-quote{font-size:47px;margin-bottom:70px}.afterword-body{font-size:18px}.scroll-cue{bottom:20px;font-size:10px}body:not(.animated) .perspective{height:850px}body:not(.animated) .camera{transform:scale(.53)}}
/* Keep the reading area inside the visible part of the opening surface at every aspect ratio. */
.terminal>.terminal-meta,.terminal>.monologue,.terminal>.command-form,.terminal>.response{width:var(--reading-width,100%);max-width:100%;margin-left:auto;margin-right:auto}
.terminal{padding-top:50px}
@media(max-width:700px){:root{--chip-w:740px}.terminal{padding-top:48px}.terminal>.monologue{font-size:15px}}
.cpu-pins{background:repeating-linear-gradient(90deg,#a4ac92 0 4px,transparent 4px 9px) left top/100% 22px no-repeat,repeating-linear-gradient(90deg,#a4ac92 0 4px,transparent 4px 9px) left bottom/100% 22px no-repeat,repeating-linear-gradient(0deg,#a4ac92 0 4px,transparent 4px 9px) left top/22px 100% no-repeat,repeating-linear-gradient(0deg,#a4ac92 0 4px,transparent 4px 9px) right top/22px 100% no-repeat;box-shadow:none}
.cpu-pins::after{display:none}.terminal{backface-visibility:hidden}
.passage-copy{width:38vw}.passage-copy p{font-size:clamp(38px,4.5vw,70px);line-height:1.03}
.static-board{display:none}
body:not(.animated) .perspective{height:auto;overflow:visible}
body:not(.animated) .camera{position:relative;left:auto;top:auto;width:100%;height:auto;margin:0;transform:none}
body:not(.animated) .board,body:not(.animated) .chip,body:not(.animated) .ribbon,body:not(.animated) .level,body:not(.animated) .cpu-pins,body:not(.animated) .shell-edge{display:none}
body:not(.animated) .cpu,body:not(.animated) .terminal-shell{position:relative;left:auto;top:auto;width:auto;height:auto;margin:0;transform:none}
body:not(.animated) .terminal{position:relative;transform:none;padding:70px 7vw;font-size:19px;box-shadow:none;border:0}
body:not(.animated) .terminal>.terminal-meta,body:not(.animated) .terminal>.monologue,body:not(.animated) .terminal>.command-form,body:not(.animated) .terminal>.response{width:100%;max-width:800px}
body:not(.animated) .static-board{display:block;margin:0;background:#132c20}
.static-board img{display:block;width:100%;height:auto}
@media(max-width:700px){.passage-copy{width:85vw}.passage-copy p{font-size:clamp(34px,9vw,48px)}body:not(.animated) .terminal{font-size:17px;padding:45px 7vw}body:not(.animated) .terminal>.monologue{font-size:17px}.static-board img{min-height:400px;object-fit:cover}}
.terminal .monologue{font-size:var(--reading-font,14px)}
@media(max-width:700px){.command-form input{font-size:var(--reading-font,14px)}body:not(.animated) .terminal .monologue,body:not(.animated) .command-form input{font-size:17px}}

/* Terminal-only typing: full-size hidden copies reserve the final line geometry. */
.terminal .typing-row{display:grid}
.terminal .typing-reserve,.terminal .typing-line{grid-area:1/1}
.terminal .typing-reserve{visibility:hidden;pointer-events:none}
.terminal .typing-line,.terminal .typing-text{color:inherit}
.terminal .typing-cursor{display:none;width:0;height:1em;border-right:1px solid currentColor;vertical-align:-.1em}
.terminal .typing-line[data-typing-active] .typing-cursor{display:inline-block;animation:terminal-caret .8s step-end infinite}
.terminal[data-terminal-typing="running"] .command-form{visibility:hidden}
@keyframes terminal-caret{50%{opacity:0}}
@media(prefers-reduced-motion:reduce){.terminal .typing-cursor{animation:none}}