@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");

:root { --paper:#f4eddb; --ink:#151413; --red:#e43828; --green:#a4c95f; --cyan:#25b9cf; --yellow:#f4ce45; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--ink); color:var(--ink); font-family:"Courier New",monospace; }
a { color:inherit; text-decoration:none; }
::selection { background:var(--yellow); color:var(--ink); }

.console-bar { min-height:58px; padding:0 3vw; display:grid; grid-template-columns:auto 1fr auto 1fr auto; gap:24px; align-items:center; color:var(--paper); background:var(--ink); font:400 clamp(7px,.7vw,10px)/1 "Press Start 2P",monospace; }
.console-dots { display:flex; gap:7px; justify-content:center; }
.console-dots i { width:7px; height:7px; display:block; background:var(--paper); opacity:.48; }
.console-dots i:nth-child(2){opacity:.7}.console-dots i:nth-child(3){opacity:.88}.console-dots i:nth-child(4){opacity:1}

.hero { margin:0 18px; min-height:min(900px,calc(100svh - 76px)); padding:clamp(46px,6vw,94px) 7vw clamp(62px,7vw,108px); position:relative; display:flex; flex-direction:column; justify-content:flex-start; background:var(--paper); clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px),calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px),0 14px); box-shadow:inset 0 0 0 8px var(--ink); }
.hero::before { content:""; position:absolute; inset:12px; pointer-events:none; border:3px solid var(--ink); }
.hero-status { display:flex; justify-content:space-between; gap:30px; font:400 clamp(7px,.75vw,11px)/1.5 "Press Start 2P",monospace; }
.hero-status span:last-child { color:var(--red); animation:pulse 1.15s steps(2,end) infinite; }
@keyframes pulse { 50%{opacity:.25} }
.hero h1 { margin:clamp(58px,8vw,112px) 0 0; display:flex; flex-direction:column; gap:clamp(12px,1.6vw,24px); font-family:"Arial Black","Arial Narrow Bold",Arial,sans-serif; font-size:clamp(64px,8.7vw,140px); font-weight:900; line-height:.88; letter-spacing:-.045em; text-transform:uppercase; }
.hero h1 span { position:relative; display:block; width:max-content; max-width:100%; white-space:nowrap; }
.hero h1 span:first-child { color:var(--ink); text-shadow:5px 5px 0 var(--cyan); }
.hero h1 span:last-child { color:var(--red); text-shadow:5px 5px 0 var(--ink); }
.hero-copy { margin-top:clamp(56px,7vw,94px); max-width:600px; padding-left:28px; border-left:10px solid var(--ink); }
.hero-copy .placeholder { margin:0 0 24px; color:var(--red); font:400 clamp(8px,.85vw,12px)/1.7 "Press Start 2P",monospace; }
.hero-body { max-width:540px; font:700 clamp(13px,1.15vw,17px)/1.55 "Courier New",monospace; }
.hero-body p { margin:0; }
.hero-body p+p { margin-top:14px; }
.pixel-palette { position:absolute; right:7vw; bottom:8vw; display:flex; gap:10px; }
.pixel-palette i { width:19px; height:19px; background:var(--red); box-shadow:5px 5px 0 var(--ink); }
.pixel-palette i:nth-child(2){background:var(--green)}.pixel-palette i:nth-child(3){background:var(--cyan)}.pixel-palette i:nth-child(4){background:var(--yellow)}

.works { margin-top:18px; background:var(--paper); }
.works-title { min-height:88px; padding:0 4vw; display:grid; grid-template-columns:auto 1fr auto; gap:22px; align-items:center; border-block:8px solid var(--ink); }
.works-title>span { color:var(--red); font-size:22px; animation:arrow .8s steps(2,end) infinite; }
@keyframes arrow { 50%{transform:translateX(7px)} }
.works-title h2 { margin:0; font:400 clamp(15px,2vw,29px)/1 "Press Start 2P",monospace; }
.works-title b { font:400 10px/1 "Press Start 2P",monospace; color:var(--red); }

.stage-list { background:var(--ink); }
.stage { --panel:var(--paper); --panel-ink:var(--ink); min-height:clamp(330px,34vw,540px); display:grid; grid-template-columns:minmax(440px,45%) 1fr; gap:8px; padding-bottom:8px; background:var(--ink); }
.stage--red{--panel:var(--red);--panel-ink:var(--paper)}.stage--green{--panel:var(--green);--panel-ink:var(--ink)}.stage--cream{--panel:var(--paper);--panel-ink:var(--ink)}.stage--cyan{--panel:var(--cyan);--panel-ink:var(--ink)}.stage--yellow{--panel:var(--yellow);--panel-ink:var(--ink)}
.stage-copy { min-width:0; padding:clamp(28px,3.3vw,58px); position:relative; display:flex; flex-direction:column; justify-content:space-between; color:var(--panel-ink); background:var(--panel); clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px); }
.stage-copy::after { content:""; position:absolute; right:18px; bottom:18px; width:8px; height:8px; color:currentColor; background:currentColor; opacity:.22; box-shadow:-10px 0 currentColor,-20px 0 currentColor,0 -10px currentColor,-20px -10px currentColor,0 -20px currentColor,-10px -20px currentColor,-20px -20px currentColor; }
.stage-hud { display:flex; justify-content:space-between; gap:18px; font:400 clamp(7px,.7vw,10px)/1.4 "Press Start 2P",monospace; }
.stage-hud span:last-child { opacity:.58; }
.stage-heading { display:grid; grid-template-columns:auto 1fr; align-items:start; gap:clamp(28px,3vw,52px); }
.stage-heading strong { font:400 clamp(78px,8.2vw,132px)/.82 "Press Start 2P",monospace; letter-spacing:-.08em; text-shadow:6px 6px 0 rgba(21,20,19,.2); }
.stage-heading h2 { margin:0; font:700 clamp(13px,1.1vw,18px)/1.55 "Courier New",monospace; letter-spacing:-.025em; }
.stage-heading h2 span { display:block; }
.stage-meter { display:flex; align-items:center; gap:7px; font:400 7px/1 "Press Start 2P",monospace; }
.stage-meter i { width:13px; height:13px; display:block; background:currentColor; }
.stage-meter i:nth-of-type(5),.stage-meter i:nth-of-type(6){opacity:.22}
.stage-meter b { margin-left:auto; font-size:18px; }
.screen { min-width:0; position:relative; background:#080808; clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px)); }
.screen::after { content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 0 8px var(--ink); }
.screen video { position:absolute; inset:8px; width:calc(100% - 16px); height:calc(100% - 16px); border:0; background:#000; object-fit:contain; }
.screen-label { position:absolute; z-index:2; top:18px; left:18px; padding:10px 12px; color:var(--paper); background:var(--ink); font:400 7px/1 "Press Start 2P",monospace; pointer-events:none; }

footer { min-height:110px; padding:0 4vw; display:flex; align-items:center; gap:14px; color:var(--paper); font:400 8px/1 "Press Start 2P",monospace; }
footer i { width:14px; height:14px; border-radius:50%; background:var(--red); box-shadow:28px 0 0 var(--cyan); margin-right:28px; }
footer b { margin-left:auto; font-weight:400; opacity:.7; }

@media(max-width:980px){.hero h1{font-size:clamp(58px,10vw,98px)}.stage{grid-template-columns:minmax(330px,44%) 1fr;min-height:410px}.stage-heading{grid-template-columns:1fr;gap:28px}.stage-heading strong{font-size:92px}}
@media(max-width:680px){
  .console-bar{min-height:50px;padding-inline:14px;grid-template-columns:auto 1fr auto;gap:12px}.console-bar>span:nth-of-type(2),.console-dots:nth-of-type(2){display:none}.console-dots{justify-content:end}
  .hero{margin-inline:8px;min-height:auto;padding:44px 22px 70px;clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px)}.hero::before{inset:7px;border-width:2px}.hero-status{font-size:6px}
  .hero h1{margin-top:50px;gap:10px;font-size:clamp(46px,14vw,76px);line-height:.9;letter-spacing:-.04em}.hero h1 span:first-child{text-shadow:3px 3px 0 var(--cyan)}.hero h1 span:last-child{text-shadow:3px 3px 0 var(--ink)}
  .hero-copy{margin-top:56px;padding-left:16px;border-left-width:7px}.hero-copy .placeholder{font-size:7px}.pixel-palette{position:static;margin-top:42px}.pixel-palette i{width:14px;height:14px}
  .works-title{min-height:76px;padding-inline:18px;border-block-width:6px}.works-title h2{font-size:11px}
  .stage{min-height:0;grid-template-columns:1fr;gap:6px;padding-bottom:6px}.stage-copy{min-height:360px;padding:28px 22px}.stage-heading{grid-template-columns:78px minmax(0,1fr);gap:20px}.stage-heading strong{font-size:38px;line-height:1;letter-spacing:-.1em;text-shadow:3px 3px 0 rgba(21,20,19,.2)}.stage-heading h2{min-width:0;font-size:12px;line-height:1.5}.screen{aspect-ratio:16/9}
  footer{min-height:92px;padding-inline:18px;font-size:6px}footer b{max-width:150px;line-height:1.5;text-align:right}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important}}