:root{--paper:#ede5d4;--ink:#182c24;--dark:#172c24;--deep:#0d2026;--lime:#bce66d;--light:#f3ebd9;--line:#9c9f80;--type:system-ui,sans-serif;--mono:"Courier New",monospace}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(ellipse at 26% 4%,#f5efdf,transparent 62%),var(--paper);color:var(--ink);font-family:var(--type)}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;cursor:pointer;color:inherit}
button:disabled{cursor:default;opacity:.38}
[hidden]{display:none!important}
:focus-visible{outline:3px solid #168b83;outline-offset:4px}
.wrap{width:min(100% - 64px,1270px);margin-inline:auto}
.site-header{height:91px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:inline-block}
.brand img{width:147px;height:auto}
nav{display:flex;gap:32px;align-items:center;font-weight:780}
nav a{text-decoration:none}
nav a:hover,.text-link:hover{text-decoration-thickness:3px}
nav a:hover{text-decoration:underline;text-underline-offset:4px}
h1,h2,p{margin:0}
.eyebrow{font:800 .9rem/1.1 var(--mono);letter-spacing:.13em;color:var(--lime)}
.eyebrow.ink{color:#496140;font-size:.77rem}
.hero{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.84fr);grid-template-rows:auto auto;column-gap:26px;min-height:390px;align-items:center;padding:38px 7%;background:radial-gradient(circle,#cce9b425 1px,transparent 1.35px) 0 0/17px 17px,linear-gradient(115deg,#233b2d,#152720);color:var(--light);border-radius:23px;box-shadow:inset 0 0 0 1px #1b2b23}
.hero-intro{grid-area:1/1;align-self:end}
.hero h1,.info-heading h1{font-family:var(--mono);font-weight:1000;letter-spacing:-.075em;text-shadow:1px 0 currentColor,-1px 0 currentColor}
.hero h1{margin-top:12px;font-size:clamp(3.2rem,7vw,6.35rem);line-height:.89}
.hero-game{grid-area:2/1;align-self:start;margin-top:24px;padding-top:14px;border-top:2px solid #9ab461;width:fit-content;min-width:min(100%,390px)}
.hero-game h2{font-size:clamp(1.5rem,3vw,2.45rem);line-height:1.04;letter-spacing:-.045em}
.hero-game p{margin-top:3px;font:700 1.03rem/1.3 var(--mono);color:#dfe3c8}
.actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px 20px;margin-top:18px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:47px;padding:10px 18px;border:1.5px solid var(--ink);border-radius:7px;font-weight:850;text-decoration:none;white-space:nowrap}
.primary{background:var(--lime);color:#12271b;box-shadow:0 2px 0 #09130c55}
.play-icon{display:inline-block;width:.9em;height:.9em;background:currentColor;clip-path:polygon(9% 0,100% 50%,9% 100%)}
.primary:hover{background:#d0f390}
.outline:hover{background:#d9deba}
.text-link{border:0;background:none;padding:4px 0;font-weight:750;text-decoration:underline;text-underline-offset:4px}
.machine{grid-area:1/2/3/3;justify-self:center;text-align:center;width:min(100%,263px)}
.device{position:relative;max-width:240px;width:100%;margin:auto}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .device-stage{perspective:760px}
  .device{transform:rotateX(var(--device-tilt-x,0deg)) rotateY(var(--device-tilt-y,0deg));transition:transform 175ms ease-out}
}
.shell{width:100%;height:auto;filter:drop-shadow(0 14px 12px #05140da8)}
.device-window{display:grid;overflow:hidden;padding:6px 8px 13px;isolation:isolate}
.device-stage{grid-area:1/1;min-width:0}
.device-stage[inert]{pointer-events:none}
.lcd{position:absolute;left:23.4%;top:10.8%;width:58.6%;height:33%;overflow:hidden;background:#122329;isolation:isolate}
.device[data-device="dmg"] .lcd{left:24%;top:11.55%;width:54.41%;height:30.83%;background:#819646}
.lcd img,.lcd video{display:block;width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
.lcd::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(transparent 0 2px,#101b2926 2px 3px);pointer-events:none}
.booting .lcd{background:#101a1a!important}
.booting .lcd img,.booting .lcd video{visibility:hidden}
.dpad{position:absolute;left:6.687%;top:59.152%;width:29.179%;aspect-ratio:96/94;pointer-events:none;perspective:85px}
.dpad svg{position:absolute;inset:0;width:100%;height:100%}
.dpad-cap{--shell-saturation:1;--shell-brightness:1;filter:saturate(var(--shell-saturation)) brightness(calc(var(--shell-brightness) * var(--dpad-shade,1)));transform:rotateY(var(--dpad-tilt,0deg)) skewY(var(--dpad-skew,0deg));transition:transform 140ms ease-out,filter 140ms ease-out}
.device[data-dpad-pressed="left"],.device:has(.pad-left:enabled:active){--dpad-tilt:-28deg;--dpad-skew:-5deg;--dpad-shade:.82}
.device[data-dpad-pressed="right"],.device:has(.pad-right:enabled:active){--dpad-tilt:28deg;--dpad-skew:5deg;--dpad-shade:.82}
.device[data-dpad-pressed] .dpad-cap,.device:has(.pad:enabled:active) .dpad-cap{transition-duration:0s}
.pad{position:absolute;border:0;background:transparent;padding:0;touch-action:manipulation}
.pad{top:63.7%;width:13%;height:11%}
.pad-left{left:3%}.pad-right{left:20%}
.clip-tools{margin:9px auto 0;display:flex;align-items:center;justify-content:center;gap:5px;flex-wrap:wrap;font:700 .72rem/1.2 var(--mono);white-space:nowrap}
.clip-tools button{color:#d9edbd;min-height:32px;border:1px solid #9bb27f88;background:#15261d;border-radius:4px;padding:2px 6px;font-size:.7rem}
.view-mode{display:flex;gap:3px}
.clip-tools button[aria-pressed="true"]:not(#preview-pause){background:#d0ed9f;color:#17291b;border-color:#d0ed9f}
.library{margin-block:25px 39px;scroll-margin-top:12px}
.shelf-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:12px;gap:15px}
.shelf-heading h2{font-weight:900;letter-spacing:-.045em;font-size:clamp(1.65rem,4vw,2.65rem);line-height:1.1;margin-top:5px}
.shelf-controls{display:flex;gap:7px}
.shelf-controls button{height:42px;width:45px;border:1.5px solid var(--ink);border-radius:6px;background:#f5edda;font-size:1.15rem;font-weight:850}
.shelf-controls button:hover:enabled{background:var(--lime)}
.shelf{display:flex;gap:16px;overflow-x:auto;padding:5px 4px 12px;scroll-snap-type:x mandatory;scroll-padding-inline:4px;scrollbar-color:#657453 #e4dbc5;scrollbar-width:thin}
.cartridge{scroll-snap-align:start;flex:0 0 calc((100% - 72px)/3.16);min-width:202px;max-width:400px;display:flex;flex-direction:column;align-items:center;text-align:center;border:0;padding:4px 8px 7px;background:none;color:var(--ink);text-decoration:none;cursor:pointer}
.cartridge:focus-visible{outline-offset:-2px;border-radius:10px}
.cartridge-display{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:1.67}
.cartridge-display::after{content:"";position:absolute;bottom:1%;left:50%;width:min(44%,112px);height:8%;transform:translateX(-50%);background:radial-gradient(ellipse,#332b2152,transparent 72%);pointer-events:none}
.cartridge-flat{position:absolute;left:50%;top:7%;height:86%;aspect-ratio:.91;transform:translateX(-50%);filter:drop-shadow(1px 2px 1px #181f1b7c)}
.cartridge-shell{position:relative;display:block;width:100%;height:100%;clip-path:polygon(7% 0,80% 0,85% 9%,95% 9%,100% 14%,100% 94%,94% 100%,6% 100%,0 94%,0 8%);background:linear-gradient(144deg,#73796e,#343c36);border:1px solid #9c9f8f}
.cartridge-ribs{position:absolute;top:12%;left:7%;right:7%;height:12%;background:repeating-linear-gradient(#262e28 0 2px,#7f857a 2px 3px,transparent 3px 4px)}
.cartridge-shell img{position:absolute;top:29%;left:12%;width:76%;height:54%;border:1px solid #252b26;object-fit:cover;background:#262d27}
.cartridge-shell::after{content:"";position:absolute;left:44%;width:12%;bottom:6%;height:5%;background:#9b9f8d;clip-path:polygon(0 0,100% 0,50% 100%)}
.model-canvas{display:none}
.cartridge-display .model-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.workbench[data-display-mode="3d"] .model-canvas{display:block}
.workbench[data-display-mode="3d"] .cartridge.has-model .cartridge-flat{visibility:hidden}
.cartridge strong{display:block;font-size:clamp(.9rem,1.4vw,1.11rem);line-height:1.12;margin-top:8px;letter-spacing:-.02em}
.cartridge:hover strong{color:#47663c}
.cartridge small{font-size:.7rem;line-height:1.25;margin-top:3px}
.cartridge-label{visibility:hidden;margin-top:6px;background:var(--lime);color:#142317;padding:4px 7px;border-radius:20px;font:900 .55rem/1 var(--mono)}
.cartridge[aria-current=true] .cartridge-label{visibility:visible}
.site-footer{border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:15px;padding-block:20px 28px;font-size:.88rem;scroll-margin-top:12px}
.site-footer p+p{margin-top:6px}
.back{display:inline-block;margin-block:8px 16px}
.info-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:21px}
.info-heading h1{font-size:clamp(2.45rem,6.2vw,5.4rem);line-height:.95;margin-top:5px}
.info-heading .actions{margin-top:0;flex-shrink:0}
.info-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.49fr);gap:clamp(18px,3.2vw,48px);align-items:center}
.box-unit{position:relative;container-type:inline-size}
.box{position:relative;display:grid;grid-template-rows:12% minmax(0,1fr) 14%;aspect-ratio:1;border:1px solid #192a2b;border-radius:2px;background:var(--deep);color:var(--light);box-shadow:-6px 3px #6e7165,-7px 3px #494b44,-8px 3px #b8b4a3,-10px 9px 16px #2b241847;font-size:clamp(.67rem,3.55cqw,1.14rem)}
.box-band{display:flex;align-items:stretch;justify-content:space-between;background:linear-gradient(104deg,#d2d5ce,#a9b1b0);color:#13242b;font-weight:1000;font-style:italic;font-size:1.65em;line-height:1}
.box-band>span:first-child{padding:.23em .6em;align-self:center}
.box-band>span:last-child{padding:.35em .7em .35em 1.3em;display:flex;align-items:center;background:var(--lime);clip-path:polygon(13% 0,100% 0,100% 100%,0 100%);font-size:.58em}
.box-body{min-height:0;display:grid;grid-template-rows:1fr 36%;gap:5%;padding:5% 5.5% 5%;background:radial-gradient(ellipse at 100% 12%,#284b42 0%,transparent 60%)}
.box-feature{min-height:0;display:grid;grid-template-columns:1.25fr 1fr;gap:5%;align-items:center}
.box-feature h2{font:1000 clamp(1.22rem,7.9cqw,2.65rem)/.94 var(--mono);letter-spacing:-.085em;text-transform:uppercase;overflow-wrap:anywhere}
.box-feature>img{width:100%;max-height:100%;aspect-ratio:1;object-fit:cover;align-self:center;border:1px solid #e9e8bf;border-radius:3px}
.tagline{color:var(--lime);font-size:1.04em;font-style:italic;font-weight:900;line-height:1.15;margin-top:4%}
.box-copy{font-size:.89em;line-height:1.27;margin-top:5%}
.box-previews{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4%;min-height:0}
.box-previews a{display:block;min-width:0;min-height:0;padding:0;border:1.5px solid #b9d677;border-radius:5px;background:#142623;overflow:hidden}
.box-previews a:hover{border-color:#fff5c4}
.box-previews img{width:100%;height:100%;object-fit:cover}
.box-specs{display:flex;justify-content:space-between;align-items:center;gap:3%;padding:2% 5%;color:#182821;background:#efe4ca;font:800 .65em/1.15 var(--mono);text-align:center}
.box-specs img{width:22%;height:auto}.barcode{width:17%;height:65%;background:repeating-linear-gradient(90deg,#181b17 0 1px,transparent 1px 3px,#181b17 3px 5px,transparent 5px 6px,#181b17 6px 7px,transparent 7px 10px,#181b17 10px 13px,transparent 13px 15px)}
.box-caption{margin-top:11px;text-align:center;color:#54674f;font:800 .63rem/1.3 var(--mono);letter-spacing:.14em}
.box-caption span{color:#849473}
.manual summary{display:none}
.manual-spread{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));background:linear-gradient(90deg,#f8edce 0%,#f5e8c8 46%,#dbc7a0 49.8%,#eee0bd 50.3%,#f9efd0 55%);border:1px solid #ab9b73;border-radius:12px 12px 8px 8px;box-shadow:0 3px #cab58b,0 6px #a48b62,0 12px 15px #46382336;overflow:hidden}
.manual-page{padding:clamp(12px,2vw,24px);position:relative;min-width:0;display:flex;flex-direction:column;min-height:clamp(240px,34vw,425px)}
.manual-page:first-child{border-right:1px solid #7a60394d}
.manual-page h2{margin-bottom:14px;font:900 clamp(.78rem,1.7vw,1.2rem)/1.17 var(--mono);letter-spacing:-.045em}
.manual-page h2 span{display:inline-block;background:#d0e482;padding:.28em .48em;border-radius:4px}
.manual-page p{font-size:clamp(.75rem,1.5vw,.99rem);line-height:1.45}
.manual-page p+p{margin-top:.65em}
.manual-art{width:100%;aspect-ratio:1.58;object-fit:cover;border:1px solid #19352c;margin-bottom:12px}
.page-no{margin-top:auto;padding-top:16px;text-align:right;font:800 .7rem var(--mono)}
.page-no::before{content:"";display:block;border-top:1px solid #a6ac72;margin-bottom:6px}
.diagram{height:auto;width:100%;max-width:180px;margin:1px auto 12px;color:#223c2e}
.controls{margin:0;font-size:clamp(.75rem,1.55vw,1rem)}
.controls div{display:grid;grid-template-columns:3.25em 1fr;gap:.5em;align-items:center;padding:.35em 0;border-top:1px solid #98a969}
.controls dt{font-weight:950}.controls dd{margin:0}
.manual-nav{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:14px;font-size:.78rem}
.manual-nav>span{color:#536149;font:700 .68rem var(--mono);white-space:nowrap}
dialog{width:min(90vw,630px);border:1px solid var(--ink);border-radius:9px;padding:17px;background:var(--paper);color:var(--ink)}
dialog::backdrop{background:#091915bd}
dialog form{text-align:right;margin-bottom:12px}
dialog img{width:100%}dialog p{margin-top:9px;font-size:.9rem}
@media(max-width:820px){
  .wrap{width:calc(100% - 40px)}
  .hero{padding:25px 5%;gap:16px}
  .machine{width:min(100%,213px)}
  .actions{gap:9px 13px}
  .info-heading{align-items:start;flex-direction:column;gap:12px}
  .info-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.16fr);gap:19px}
}
@media(max-width:600px){
  .wrap{width:calc(100% - 30px)}
  .site-header{height:64px}
  .brand img{width:106px}
  nav{gap:14px;font-size:.78rem}
  .hero{grid-template-columns:1fr;grid-template-rows:auto auto auto;gap:0;justify-items:center;text-align:center;padding:17px 12px 16px;border-radius:14px;min-height:auto}
  .hero-intro{grid-area:1/1}.hero-intro .eyebrow{font-size:.68rem}
  .hero h1{font-size:clamp(2rem,8.2vw,3.3rem);margin-top:6px;line-height:.98}
  .hero h1 br{display:none}
  .machine{grid-area:2/1;width:clamp(124px,38vw,164px);margin-top:10px}
  .clip-tools{margin-top:4px}
  .pad{width:17%;height:15%;top:61.7%}
  .pad-left{left:1%}.pad-right{left:20%}
  .clip-tools button{min-height:28px}
  .hero-game{grid-area:3/1;width:100%;min-width:0;border:0;margin:4px 0 0;padding:0}
  .hero-game h2{font-size:1.36rem}
  .hero-game p{font-size:.78rem}
  .hero-game .actions{justify-content:center;margin-top:9px;font-size:.78rem}
  .hero-game .button{min-height:39px;padding:7px 10px}
  .library{margin-top:14px}
  .shelf-heading{margin-bottom:6px}
  .shelf-controls button{height:36px;width:35px}
  .shelf{gap:10px}
  .cartridge{flex-basis:43%;min-width:129px;padding:3px 5px 7px}
  .cartridge-label{font-size:.5rem}
  .cartridge strong{font-size:.79rem}
  .cartridge small{font-size:.59rem}
  .site-footer{align-items:start;flex-direction:column}
  .info-heading{margin-bottom:18px}
  .info-heading h1{font-size:2.7rem}
  .info-heading .actions{flex-wrap:wrap;font-size:.75rem}
  .info-heading .button{min-height:41px;padding:8px 12px}
  .info-grid{display:block}
  .box-unit{width:min(100% - 12px,445px);margin:0 auto}
  .manual{margin-top:17px}
  .manual summary{display:flex;justify-content:space-between;align-items:center;padding:11px 12px;margin-bottom:12px;background:#dce3bd;border:1px solid var(--line);border-radius:5px;font-weight:800;cursor:pointer;list-style:none}
  .manual summary::-webkit-details-marker{display:none}
  .manual[open] summary span{transform:rotate(45deg)}
  .manual-page{padding:11px;min-height:205px}
  .manual-page h2{margin-bottom:9px}
  .manual-art{margin-bottom:7px}
  .manual-nav{font-size:.73rem}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation:none!important}
  .dpad-cap{transform:none;transition:none}
}
.box-feature h2.long-title{font-size:clamp(.93rem,5.4cqw,1.75rem)}
.box-previews.single{grid-template-columns:minmax(0,1fr)}
.box-previews.single a{width:55%;justify-self:center}
/* The display and controls stay aligned with the mesh's front face. */
.device > .model-canvas{position:absolute;left:-6%;top:-3%;width:112%;height:106%;max-width:none;pointer-events:none;filter:drop-shadow(0 14px 12px #05140da8)}
.workbench[data-display-mode="3d"] .device.has-model > .shell{visibility:hidden}

.header-brand{display:flex;gap:14px;align-items:center}
.socials{display:flex;gap:3px;align-items:center}
.socials a{display:grid;place-items:center;width:30px;height:35px}
.socials svg{width:20px;height:20px}
.socials a:hover{color:#4e683d}
.footer-links{display:flex;gap:12px;flex-wrap:wrap}
.info-grid,.standard-page{margin-bottom:32px}
.standard-page article + article{margin-top:24px}
.box-body.no-screens{grid-template-rows:minmax(0,1fr)}
.box-feature.no-cover{grid-template-columns:1fr}
.manual-text{overflow-wrap:anywhere}
.manual-text ul,.manual-text ol{padding-inline-start:1.25em}
.empty-state{padding-block:12px;color:#536149}
.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.screen-reader-text:focus{width:auto;height:auto;clip-path:none;margin:5px;padding:8px;background:var(--paper);z-index:20}
@media(max-width:600px){
  .header-brand{gap:5px}
  .socials{gap:0}
  .socials a{width:26px}
  .socials svg{width:17px;height:17px}
  .device-window{padding:5px 5px 9px}
}