:root { --ink:#06131d; --panel:#0a1c29; --cyan:#35b8e7; --pale:#d7e5e9; --muted:#8fa4ad; --cream:#eef0e4; --line:rgba(185,218,226,.18); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--ink); color:var(--pale); font-family:Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; overflow-x:hidden; }
a { color:inherit; }
button { font:inherit; }
.skip-link { position:fixed; z-index:100; left:1rem; top:-5rem; padding:.8rem 1rem; background:var(--cyan); color:var(--ink); font-weight:800; }
.skip-link:focus { top:1rem; }
.site-header { position:absolute; z-index:10; inset:0 0 auto; height:90px; padding:0 clamp(1.25rem,4vw,4.5rem); display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid rgba(255,255,255,.19); }
.wordmark { display:flex; gap:.75rem; align-items:center; text-decoration:none; font-size:.85rem; font-weight:900; letter-spacing:.16em; }
.wordmark > span:last-child > span { color:var(--cyan); }
.wordmark-mark { width:12px; height:12px; border:2px solid var(--cyan); transform:rotate(45deg); }
nav { display:flex; gap:2rem; align-items:center; }
nav a { text-decoration:none; text-transform:uppercase; font-size:.68rem; letter-spacing:.16em; font-weight:800; }
.nav-download { padding:.75rem 1rem; border:1px solid rgba(255,255,255,.55); }
.hero { min-height:100svh; position:relative; display:flex; align-items:center; overflow:hidden; }
.hero-image, .hero-shade, .hero-grid { position:absolute; inset:0; }
.hero-image { background:url("resources/gameplay-01.webp") 58% 50%/cover no-repeat; transform:scale(1.025); }
.hero-shade { background:linear-gradient(90deg,rgba(4,14,22,.96) 0%,rgba(4,14,22,.74) 37%,rgba(4,14,22,.2) 69%,rgba(4,14,22,.48)),linear-gradient(0deg,rgba(4,14,22,.85),transparent 42%); }
.hero-grid { opacity:.15; background-image:linear-gradient(rgba(68,194,233,.25) 1px,transparent 1px),linear-gradient(90deg,rgba(68,194,233,.25) 1px,transparent 1px); background-size:80px 80px; mask-image:linear-gradient(90deg,#000,transparent 68%); }
.hero-content { position:relative; z-index:2; width:min(720px,87vw); margin-left:clamp(1.25rem,8vw,9rem); padding-top:5rem; }
.eyebrow,.section-label { margin:0 0 1.4rem; color:var(--cyan); text-transform:uppercase; font:800 .7rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing:.2em; }
.eyebrow span { display:inline-block; width:34px; height:1px; margin-right:.8rem; vertical-align:middle; background:var(--cyan); }
h1 { margin:0; font-size:clamp(3.7rem,7.8vw,8rem); line-height:.83; letter-spacing:-.065em; text-transform:uppercase; max-width:1000px; }
h1 em { color:var(--cyan); font-style:normal; }
.hero-copy { max-width:520px; margin:2rem 0; color:#c0ced3; font-size:clamp(1rem,1.4vw,1.2rem); line-height:1.65; }
.hero-actions { display:flex; gap:2rem; align-items:center; }
.button { min-height:64px; display:inline-flex; align-items:center; gap:1rem; padding:.9rem 1.4rem; text-decoration:none; text-transform:uppercase; font-size:.85rem; font-weight:900; letter-spacing:.08em; transition:.2s ease; }
.button svg { width:25px; fill:currentColor; }
.button small { display:block; font-size:.58rem; font-weight:700; letter-spacing:.14em; opacity:.7; margin-bottom:.25rem; }
.button-primary { background:var(--cyan); color:var(--ink); box-shadow:0 14px 50px rgba(53,184,231,.22); }
.button-primary:hover { background:#75d7f5; transform:translateY(-2px); }
.text-link { font-size:.72rem; text-transform:uppercase; text-underline-offset:6px; letter-spacing:.13em; font-weight:800; }
.text-link span { color:var(--cyan); margin-left:.6rem; }
.release-meta { display:flex; gap:0; margin-top:2rem; color:var(--muted); text-transform:uppercase; font:700 .62rem ui-monospace, monospace; letter-spacing:.11em; }
.release-meta span { padding:0 1rem; border-right:1px solid rgba(255,255,255,.25); }
.release-meta span:first-child { padding-left:0; }
.release-meta span:last-child { border:0; }
.hero-index { position:absolute; z-index:2; right:4.5rem; bottom:3rem; display:flex; align-items:end; gap:.7rem; }
.hero-index span { color:var(--cyan); font:700 .65rem ui-monospace,monospace; letter-spacing:.2em; padding-bottom:.45rem; }
.hero-index strong { font-size:3.2rem; line-height:1; }
.manifesto { min-height:570px; padding:8rem clamp(1.25rem,8vw,9rem); background:var(--cream); color:var(--ink); display:grid; grid-template-columns:1fr auto; align-content:center; position:relative; }
.manifesto .section-label { grid-column:1/-1; }
.statement { margin:0; text-transform:uppercase; font-size:clamp(3rem,6.5vw,7rem); line-height:.92; font-weight:900; letter-spacing:-.055em; }
.statement span { color:transparent; -webkit-text-stroke:1.5px var(--cyan); }
.manifesto-side { max-width:275px; align-self:end; border-left:1px solid rgba(6,19,29,.2); padding-left:2rem; }
.manifesto-side p { font-size:.9rem; line-height:1.7; color:#43535a; }
.coordinates { color:#1594c1; font:700 .64rem/1.8 ui-monospace,monospace; letter-spacing:.15em; }
.gallery-section { padding:8rem clamp(1.25rem,4vw,4.5rem); }
.section-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:3rem; }
.section-heading h2,.install-intro h2 { margin:0; text-transform:uppercase; font-size:clamp(2.7rem,5vw,5.5rem); line-height:.9; letter-spacing:-.05em; }
.section-heading > p { color:var(--muted); font:700 .7rem ui-monospace,monospace; letter-spacing:.15em; }
.gallery { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.shot { position:relative; display:block; border:0; padding:0; background:#102b3b; color:white; cursor:zoom-in; overflow:hidden; aspect-ratio:1.35; text-align:left; }
.shot-wide { grid-column:span 2; aspect-ratio:2.2; }
.shot picture,.shot img { width:100%; height:100%; display:block; }
.shot img { object-fit:cover; transition:transform .55s ease,filter .4s ease; }
.shot:hover img,.shot:focus-visible img { transform:scale(1.025); filter:brightness(.78); }
.shot > span { position:absolute; left:1.3rem; bottom:1.2rem; opacity:0; transform:translateY(8px); transition:.25s ease; text-transform:uppercase; font-size:.7rem; font-weight:800; letter-spacing:.13em; }
.shot:hover > span,.shot:focus-visible > span { opacity:1; transform:none; }
.shot > span b { color:var(--cyan); margin-right:.7rem; }
.install-section { padding:8rem clamp(1.25rem,8vw,9rem); display:grid; grid-template-columns:minmax(250px,.75fr) minmax(440px,1.25fr); gap:clamp(4rem,8vw,9rem); background:#091a26; border-top:1px solid var(--line); }
.install-intro { position:sticky; top:3rem; align-self:start; }
.install-intro > p:not(.section-label) { max-width:520px; line-height:1.7; color:var(--muted); }
.notice { margin-top:2rem; padding:1.1rem; display:flex; gap:1rem; border:1px solid rgba(53,184,231,.4); background:rgba(53,184,231,.07); }
.notice svg { flex:0 0 auto; width:24px; fill:var(--cyan); }
.notice strong,.notice span { display:block; }
.notice strong { text-transform:uppercase; font-size:.68rem; letter-spacing:.12em; }
.notice span { margin-top:.35rem; color:var(--muted); font-size:.76rem; line-height:1.5; }
.steps { margin:0; padding:0; list-style:none; }
.steps > li { display:grid; grid-template-columns:50px 1fr; gap:1.5rem; padding:0 0 3.5rem; margin-bottom:3.5rem; border-bottom:1px solid var(--line); }
.steps > li:last-child { margin:0; border:0; }
.step-number { color:var(--cyan); font:800 .68rem ui-monospace,monospace; letter-spacing:.15em; padding-top:.35rem; }
.step-content h3 { margin:0 0 .7rem; text-transform:uppercase; font-size:1.2rem; letter-spacing:.02em; }
.step-content p { margin:.4rem 0 1.4rem; color:var(--muted); line-height:1.65; }
code { color:#c8ecf8; }
.terminal { border:1px solid #29404d; background:#040a0e; overflow:hidden; box-shadow:0 20px 45px rgba(0,0,0,.2); }
.terminal-bar { height:42px; padding:0 .9rem; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; background:#122531; border-bottom:1px solid #29404d; }
.terminal-bar > span { display:flex; gap:6px; }
.terminal-bar i { width:8px; height:8px; border-radius:50%; background:#435763; }
.terminal-bar b { color:#8ca0aa; text-transform:uppercase; font-size:.58rem; letter-spacing:.15em; }
.copy-button { justify-self:end; border:0; color:var(--cyan); background:transparent; cursor:pointer; text-transform:uppercase; font-size:.6rem; font-weight:800; letter-spacing:.12em; }
.terminal pre { margin:0; padding:1.25rem; overflow-x:auto; color:#d9e7ea; font:500 clamp(.7rem,1vw,.84rem)/1.8 ui-monospace,SFMono-Regular,Menlo,monospace; }
.prompt { color:var(--cyan); }
.output { color:#8fa4ad; }
.final-cta { min-height:590px; padding:8rem 1.25rem; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; background:radial-gradient(circle at 50% 70%,rgba(38,174,218,.18),transparent 35%),var(--ink); }
.final-cta h2 { margin:.5rem 0 2.5rem; font-size:clamp(4.4rem,10vw,10rem); line-height:.75; letter-spacing:-.07em; text-transform:uppercase; }
footer { min-height:110px; padding:2rem clamp(1.25rem,4vw,4.5rem); display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--line); color:var(--muted); text-transform:uppercase; font-size:.62rem; letter-spacing:.12em; }
footer .wordmark { color:var(--pale); }
.lightbox { width:min(94vw,1440px); max-width:none; padding:0; border:1px solid #395260; background:#030b10; box-shadow:0 30px 100px #000; }
.lightbox::backdrop { background:rgba(2,8,12,.9); backdrop-filter:blur(6px); }
.lightbox img { display:block; width:100%; height:auto; }
.lightbox-close { position:absolute; right:.8rem; top:.8rem; width:42px; height:42px; border:1px solid rgba(255,255,255,.3); background:rgba(4,15,22,.85); color:white; font-size:1.6rem; cursor:pointer; }
:focus-visible { outline:2px solid var(--cyan); outline-offset:4px; }
@media (max-width:800px) {
  .site-header { height:74px; } nav a:not(.nav-download) { display:none; } .nav-download { padding:.6rem .75rem; }
  .hero { min-height:760px; } .hero-content { margin:0 1.25rem; } .hero-index { display:none; } h1 { font-size:clamp(3.6rem,17vw,6rem); }
  .hero-image { background-position:62% center; } .hero-shade { background:linear-gradient(90deg,rgba(4,14,22,.93),rgba(4,14,22,.38)),linear-gradient(0deg,rgba(4,14,22,.95),transparent 50%); }
  .hero-actions { align-items:flex-start; flex-direction:column; gap:1.3rem; } .release-meta { flex-wrap:wrap; row-gap:.6rem; }
  .manifesto { min-height:520px; padding-block:6rem; grid-template-columns:1fr; gap:3rem; } .manifesto-side { align-self:auto; }
  .gallery-section,.install-section { padding-block:6rem; } .gallery { grid-template-columns:1fr; } .shot,.shot-wide { grid-column:auto; aspect-ratio:1.45; }
  .install-section { grid-template-columns:1fr; gap:4rem; } .install-intro { position:static; } .steps > li { grid-template-columns:35px 1fr; gap:.8rem; }
  .final-cta { min-height:500px; } footer { align-items:flex-start; flex-direction:column; gap:1.5rem; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition-duration:.01ms !important; animation-duration:.01ms !important; } }