@font-face{font-family:ATRACT ROM;src:url(/fonts/atract-rom.ttf) format("truetype");font-display:swap}@font-face{font-family:ATRACT Hand;src:url(/fonts/atract-hand.ttf) format("truetype");font-display:swap}:root{color-scheme:dark;--desk: #331f00;--desk-ink: #ebd77e;--desk-ink-2: #c3b057;--case: #ababab;--case-hi: #d3d3d3;--case-mid: #898989;--case-lo: #686868;--bezel: #4f4f4f;--recess: #1b1b1b;--ink: #040404;--screen: #143382;--screen-ink: #b5d3ff;--led: #e0949c;--paper: #d3d3d3;--bar: #a3f3ab;--paper-ink: #333333;--label: #d3d3d3;--cream: #ebd77e;--rom: "ATRACT ROM", ui-monospace, "SF Mono", Menlo, Consolas, monospace;--hand: "ATRACT Hand", var(--rom);--sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif}*{box-sizing:border-box}[hidden]{display:none!important}html{background:var(--desk)}body{margin:0;color:var(--desk-ink);font:16px/1.55 var(--sans);background:var(--desk);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));background-image:repeating-linear-gradient(90deg,rgb(0 0 0 / .08) 0 2px,transparent 2px 23px,rgb(255 255 255 / .03) 23px 24px)}.desk{max-width:68rem;margin:0 auto;padding-block:28px 56px;display:grid;gap:40px}a{color:var(--desk-ink)}:focus-visible{outline:3px solid var(--screen-ink);outline-offset:3px}h2{font:16px/1.2 var(--rom);margin:0;color:var(--desk-ink-2)}h3,p{margin:0}.machine{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:28px;align-items:center}@media(max-width:52rem){.machine{grid-template-columns:1fr}}.case{background:var(--case);border-radius:16px;padding:14px 18px 34px;display:grid;gap:16px;color:var(--ink);position:relative;box-shadow:inset 0 2px #ffffff59,inset 0 -3px #0003,0 24px 40px -20px #000c}.vent{height:54px;clip-path:polygon(31px 0,100% 0,calc(100% - 31px) 100%,0 100%);margin-inline:3% 1%;background:repeating-linear-gradient(120deg,var(--case-lo) 0 6px,var(--case-mid) 6px 15px)}.bezel{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start;justify-content:space-between}.badge{margin:0;font:400 16px/1 var(--rom);letter-spacing:.3em;padding:8px 2em 8px 1.4em;background:var(--recess);color:var(--case-hi);clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);flex:0 1 auto;align-self:center}.console{display:flex;flex-wrap:wrap;margin-left:auto;margin-right:16px}.key{position:relative;display:block;width:6.6em;padding:50px 0 0;border:0;background:none;cursor:pointer;font:600 12px/1.3 var(--sans);color:var(--ink);text-align:center;text-decoration:none}.key:before{content:"";position:absolute;top:0;left:1px;right:1px;height:40px;border-radius:2px;transform:skew(-38deg);background:linear-gradient(var(--case-hi),var(--case) 85%);box-shadow:0 0 0 2px var(--recess),0 3px 0 2px var(--recess);transition:translate .15s}.key .cap{position:absolute;top:6px;left:7px;right:-7px;font:11px/1 var(--rom);transition:translate .15s}.key:focus-visible{outline-color:var(--ink)}.key:active:before,.key:active .cap{translate:0 3px}@media(max-width:30rem){.console{flex:1 1 100%;flex-wrap:nowrap;margin-right:0}.key{flex:1 1 0;width:auto;min-width:0;padding-top:40px;font-size:10px}.key:before{height:32px;transform:skew(-28deg)}.key .cap{top:5px;left:3px;right:-3px;font-size:clamp(6px,2.1vw,9px)}}.led{position:absolute;left:20px;bottom:12px;width:20px;height:4px;border-radius:2px;background:var(--case-lo)}:root[data-machine=booting] .led,:root[data-machine=running] .led,:root[data-machine=demo] .led{background:var(--led);box-shadow:0 0 8px 2px var(--led)}.set{display:grid;gap:10px}.tv{position:relative;container-type:inline-size;background:var(--ink);border-radius:18px;padding:16px;box-shadow:inset 0 0 0 2px var(--bezel),0 24px 40px -20px #000c}#screen{display:block;width:100%;aspect-ratio:336 / 240;image-rendering:pixelated;border-radius:6px}.screen-text{margin:0;aspect-ratio:336 / 240;padding:10% 0 0 calc(100cqi * 16 / 336);overflow:hidden;border-radius:6px;background:var(--screen);color:var(--screen-ink);font:calc(100cqi * 8 / 336)/1.25 var(--rom);white-space:pre}.readout{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}#peek{font:16px/1 var(--rom);font-variant-numeric:tabular-nums}#demo{font:13px/1 var(--rom);padding:6px 10px;border:0;border-radius:3px;cursor:pointer;background:var(--desk-ink);color:var(--desk)}.say{color:var(--desk-ink-2);font-size:14px;min-height:3em}.box{display:grid;gap:14px}.disks{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:18px}.slot{margin:0;display:grid;gap:10px;align-content:start;min-width:0}.slot figcaption{font-size:14px;line-height:1.4;color:var(--desk-ink-2)}.disk{aspect-ratio:1;width:100%;min-width:0;container-type:inline-size;background:var(--ink);border-radius:3px;padding:10px;display:grid;grid-template-rows:auto 1fr;position:relative;rotate:var(--tilt, 0deg);transition:rotate .2s,translate .2s;box-shadow:0 2px #0006,0 10px 18px -8px #000000b3}.slot:nth-child(2n) .disk{--tilt: 1.5deg}.slot:nth-child(3n) .disk{--tilt: -2deg}.slot:nth-child(5n) .disk{--tilt: 2.5deg}.disk:hover{rotate:0deg;translate:0 -4px}.disk:after{content:"";position:absolute;left:50%;top:50%;width:26%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,var(--desk) 0 36%,rgb(255 255 255 / .1) 38% 46%,rgb(0 0 0 / .5) 48% 100%)}.disk:before{content:"";position:absolute;left:50%;top:69%;width:9%;height:24%;translate:-50% 0;border-radius:999px;background:var(--desk);box-shadow:inset 0 0 0 2px #00000080}.label{min-width:0;overflow:hidden;background:var(--label);color:var(--ink);padding:6px 8px 8px;border-radius:2px;background-image:repeating-linear-gradient(to bottom,transparent 0 23px,var(--case) 23px 24px)}:lang(en) .word{--letters: 9.2}:lang(es) .word{--letters: 12.2}.word{font:calc((100cqi - 20px) / var(--letters)) / 1.4 var(--hand);white-space:nowrap}.word b{font-weight:400;font-size:1.3em;line-height:1;vertical-align:-.1em}.notch{position:absolute;right:-1px;top:24%;width:8px;height:12px;background:var(--desk)}.notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:16px 24px}.note{display:grid;gap:6px;align-content:start;color:var(--desk-ink-2);font-size:15px}.note.wide{grid-column:1 / -1;max-width:70ch;gap:10px}.note h3{color:var(--desk-ink);font:16px/1.4 var(--rom)}.looks{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:16px}.look{border-radius:10px;padding:12px;display:grid;gap:6px;min-height:7.5rem;align-content:start}.look h3{font:16px/1.2 var(--rom)}.look p{font-size:13px}.look.ready{background:var(--screen);color:var(--screen-ink);box-shadow:inset 0 0 0 6px var(--ink);padding:16px}.look.xe{background:var(--case);color:var(--ink);padding-top:30px;background-image:linear-gradient(var(--case),var(--case)),repeating-linear-gradient(120deg,var(--case-lo) 0 4px,var(--case-mid) 4px 10px);background-size:100% calc(100% - 22px),100% 22px;background-position:0 22px,0 0;background-repeat:no-repeat}.look.drive{background:var(--cream);color:var(--ink);padding-bottom:38px;background-image:linear-gradient(var(--paper-ink),var(--paper-ink));background-size:100% 26px;background-position:0 100%;background-repeat:no-repeat}.printout{position:relative;max-width:50rem;justify-self:center;width:100%;background:var(--paper);color:var(--paper-ink);padding:24px 46px;font:16px/24px var(--rom);rotate:-.6deg;box-shadow:0 16px 30px -14px #000c;background-image:repeating-linear-gradient(to bottom,var(--bar) 0 48px,var(--paper) 48px 96px);display:grid;gap:24px}.printout:before,.printout:after{content:"";position:absolute;top:0;bottom:0;width:30px;background-color:var(--paper);background-image:radial-gradient(circle at 15px 12px,var(--desk) 0 5px,transparent 6px);background-size:30px 24px}.printout:before{left:0;border-right:1px dashed var(--case-mid)}.printout:after{right:0;border-left:1px dashed var(--case-mid)}.printout h2{color:var(--paper-ink);font:inherit}.printout a{color:var(--paper-ink)}.log{list-style:none;margin:0;padding:0;display:grid;gap:24px}.log li{display:grid;grid-template-columns:11ch 1fr;gap:1ch}.log time{font-variant-numeric:tabular-nums}@media(max-width:40rem){.printout{padding-inline:38px}.log li{grid-template-columns:1fr;gap:0}}.foot{color:var(--desk-ink-2);font-size:13px;display:grid;gap:6px;padding-top:16px;border-top:1px solid color-mix(in srgb,var(--desk-ink) 25%,transparent)}@media(prefers-reduced-motion:reduce){.disk,.key:before,.key .cap{transition:none}}