:root { --ink:#ecf3ef; --muted:#b8c8c2; --paper:#edf2ed; --paper-ink:#0b2927; --acid:#d2f587; --aqua:#90e4d7; --night:#07141d; --deep:#0c2228; --line:rgba(226,244,235,.18); --display:Georgia,"Times New Roman",serif; --sans:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; background:var(--night); } body { margin:0; background:var(--night); color:var(--ink); font:16px/1.6 var(--sans); } a { color:inherit; } img,video { display:block; max-width:100%; }
.skip-link { position:fixed; top:-4rem; left:1rem; z-index:20; padding:.7rem 1rem; border-radius:.3rem; background:var(--acid); color:#09201d; font-weight:850; }.skip-link:focus { top:1rem; }
.site-header { display:flex; align-items:center; justify-content:space-between; max-width:1380px; margin:auto; padding:1.25rem clamp(1.25rem,5vw,5rem); border-bottom:1px solid rgba(226,244,235,.1); }.studio-mark { color:var(--ink); font-size:.72rem; font-weight:900; letter-spacing:.13em; text-decoration:none; }.studio-mark span { color:var(--acid); }.header-link { color:var(--aqua); font-size:.82rem; font-weight:800; text-underline-offset:.25em; }
.hero { display:grid; grid-template-columns:minmax(18rem,.78fr) minmax(34rem,1.22fr); align-items:center; gap:clamp(2rem,5vw,5.5rem); max-width:1380px; margin:auto; padding:clamp(3.2rem,6vw,5.8rem) clamp(1.25rem,5vw,5rem) clamp(4rem,7vw,6.5rem); }.hero-copy { min-width:0; }.eyebrow { margin:0 0 .9rem; color:var(--acid); font-size:.7rem; font-weight:850; letter-spacing:.15em; text-transform:uppercase; } h1,h2,p { margin-top:0; } h1,h2 { font-family:var(--display); font-weight:500; letter-spacing:-.042em; line-height:.96; } h1 { margin-bottom:1.35rem; font-size:clamp(3.05rem,5.5vw,6.5rem); } h1 em { color:var(--aqua); }.hero-taglines { display:grid; grid-template-columns:minmax(0,1fr); min-width:0; margin-bottom:1.35rem; font-size:clamp(2.7rem,4.3vw,5.25rem); }.hero-tagline { grid-area:1/1; min-width:0; opacity:0; pointer-events:none; transition:opacity .62s ease; }.hero-tagline .tagline-prefix,.hero-tagline em { display:block; }.hero-tagline .tagline-prefix { font-size:.48em; white-space:nowrap; }.hero-tagline.is-active { opacity:1; }.hero-copy p:not(.eyebrow) { max-width:36rem; color:#c6d4cf; font-size:clamp(1rem,1.28vw,1.16rem); }.hero-video { position:relative; margin:0; overflow:hidden; border:1px solid rgba(210,245,135,.48); background:#02090e; box-shadow:1rem 1rem 0 rgba(78,126,107,.22); }.hero-video video { width:100%; aspect-ratio:16/9; object-fit:cover; }.hero-video figcaption,.explainer figcaption { position:absolute; right:0; bottom:0; margin:0; padding:.52rem .72rem; background:rgba(3,12,18,.84); color:#e8f3ed; font-size:.63rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.play { display:grid; grid-template-columns:.7fr 1.3fr; gap:clamp(2rem,6vw,6rem); align-items:center; padding:clamp(3.5rem,7vw,6rem) clamp(1.25rem,8vw,10rem); background:var(--paper); color:var(--paper-ink); }.play .eyebrow { color:#40776c; }.play h2 { margin-bottom:1rem; font-size:clamp(2.9rem,5vw,5rem); }.play-copy { color:#3c5e55; font-size:1.05rem; }.play code { display:inline-block; margin-top:.25rem; padding:.18rem .4rem; background:#dce9e1; color:#123d36; font:700 .9rem ui-monospace,SFMono-Regular,Menlo,monospace; }.downloads { display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }.download-card { position:relative; display:flex; flex-direction:column; min-height:8.5rem; padding:1.25rem; border:1px solid #103e38; background:#133f39; color:#effbf1; text-decoration:none; transition:transform .18s,background .18s; }.download-card:hover { transform:translateY(-3px); background:#1b5148; }.download-card span { color:#acdccc; font-size:.67rem; font-weight:850; letter-spacing:.12em; text-transform:uppercase; }.download-card strong { margin-top:.42rem; font:1.6rem/.98 var(--display); }.download-card b { position:absolute; right:1rem; bottom:.75rem; color:var(--acid); font-size:1.2rem; }.fineprint { grid-column:1/-1; max-width:67rem; margin:0; color:#507268; font-size:.8rem; }.fineprint a { text-underline-offset:.22em; }
.capacity-notice { display:grid; grid-template-columns:.9fr 1.1fr; grid-column:1/-1; gap:1.5rem 3rem; align-items:center; padding:1.35rem 1.5rem; border:1px solid #9db8ad; background:#f7faf6; }.capacity-notice .eyebrow { margin-bottom:.45rem; font-size:.64rem; }.capacity-notice h3 { margin:0 0 .55rem; font:1.7rem/1 var(--display); letter-spacing:-.025em; }.capacity-notice p { margin-bottom:0; color:#49675f; font-size:.88rem; }.creator-note { padding-left:1.25rem; border-left:2px solid #6b9789; }.creator-note strong { color:#123d36; }.creator-note a { color:#1c6256; font-weight:800; text-underline-offset:.22em; }
.release-notice { display:grid; grid-template-columns:.72fr 1.28fr; grid-column:1/-1; gap:1.5rem 3rem; align-items:center; padding:1.25rem 1.5rem; border-left:3px solid #40776c; background:#dfeae3; }.release-notice .eyebrow { margin-bottom:.45rem; font-size:.64rem; }.release-notice h3 { margin:0; font:1.7rem/1 var(--display); letter-spacing:-.025em; }.release-notice p { margin:0; color:#34584e; font-size:.88rem; }
.explainer { display:grid; grid-template-columns:1.12fr .88fr; align-items:center; gap:clamp(2rem,7vw,8rem); padding:clamp(4.2rem,8vw,7.5rem) clamp(1.25rem,8vw,10rem); background:var(--deep); }.explainer figure { position:relative; margin:0; }.explainer img { width:100%; border:1px solid rgba(226,244,235,.18); }.explainer h2 { margin-bottom:1.15rem; font-size:clamp(2.7rem,4.8vw,4.8rem); }.explainer div > p:not(.eyebrow) { color:var(--muted); }.explainer dl { margin:1.75rem 0 0; }.explainer dl div { display:grid; grid-template-columns:9.4rem 1fr; padding:.62rem 0; border-top:1px solid var(--line); }.explainer dt { color:var(--acid); font-size:.7rem; font-weight:850; letter-spacing:.09em; text-transform:uppercase; }.explainer dd { margin:0; color:#d7e6df; }
.ratios { display:grid; grid-template-columns:.78fr 1.22fr; align-items:center; gap:clamp(2rem,8vw,9rem); padding:clamp(4.2rem,8vw,7.5rem) clamp(1.25rem,8vw,10rem); background:var(--paper); color:var(--paper-ink); }.ratios .eyebrow { color:#3d766a; }.ratios h2 { margin-bottom:1.15rem; font-size:clamp(2.7rem,4.8vw,4.8rem); }.ratios-copy p:not(.eyebrow) { color:#47655d; }.ratio-carousel { min-width:0; }.ratio-carousel__slides { overflow:hidden; border:1px solid #94b2a7; background:#d7e5de; }.ratio-slide { position:relative; margin:0; }.ratio-slide img { width:100%; aspect-ratio:16/9; object-fit:cover; }.ratio-slide figcaption { position:absolute; right:0; bottom:0; margin:0; padding:.55rem .75rem; background:rgba(3,12,18,.84); color:#e8f3ed; font-size:.64rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }.ratio-carousel__controls { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.85rem; }.ratio-control { border:1px solid #7fa397; padding:.55rem .75rem; background:transparent; color:#345f56; font:700 .74rem var(--sans); cursor:pointer; }.ratio-control:hover,.ratio-control.is-active { border-color:#143f38; background:#143f38; color:#f0faed; }
.atlas { display:grid; grid-template-columns:1.22fr .78fr; align-items:center; gap:clamp(2rem,8vw,9rem); padding:clamp(4.2rem,8vw,7.5rem) clamp(1.25rem,8vw,10rem); background:var(--deep); }.atlas-carousel { min-width:0; }.atlas-carousel__slides { overflow:hidden; border:1px solid rgba(226,244,235,.2); background:#0a1b22; }.atlas-slide { position:relative; margin:0; }.atlas-slide img { width:100%; aspect-ratio:3.25/1; object-fit:cover; }.atlas-slide figcaption { position:absolute; right:0; bottom:0; margin:0; padding:.55rem .75rem; background:rgba(3,12,18,.84); color:#e8f3ed; font-size:.64rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }.atlas-carousel__controls { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.85rem; }.atlas-control { border:1px solid rgba(144,228,215,.55); padding:.55rem .75rem; background:transparent; color:var(--aqua); font:700 .74rem var(--sans); cursor:pointer; }.atlas-control:hover,.atlas-control.is-active { border-color:var(--acid); background:var(--acid); color:#09201d; }.atlas .eyebrow { color:var(--acid); }.atlas h2 { margin-bottom:1.15rem; font-size:clamp(2.7rem,4.8vw,4.8rem); }.atlas-copy p:not(.eyebrow) { color:var(--muted); }
.atlas-steps { margin:1.5rem 0; padding:0; counter-reset:atlas-step; list-style:none; }.atlas-steps li { position:relative; padding:.68rem 0 .68rem 2.6rem; border-top:1px solid var(--line); color:#c6d5cf; }.atlas-steps li::before { position:absolute; left:0; top:.68rem; counter-increment:atlas-step; content:counter(atlas-step,decimal-leading-zero); color:var(--acid); font-size:.68rem; font-weight:900; letter-spacing:.08em; }.atlas-steps strong { display:block; color:#f0f7f3; }
footer { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.35rem clamp(1.25rem,5vw,5rem); background:#061018; color:#97aaa5; font-size:.75rem; } footer p { margin:0; }
@media (max-width:800px) { .hero,.play,.explainer,.ratios,.atlas,.capacity-notice,.release-notice { grid-template-columns:1fr; }.hero { padding-top:3rem; }.hero-video { box-shadow:.65rem .65rem 0 rgba(78,126,107,.22); }.downloads { grid-template-columns:1fr; }.fineprint { grid-column:auto; }.creator-note { padding-left:0; border-left:0; border-top:1px solid #bdcfc5; padding-top:1rem; }.explainer figure { order:-1; } }
@media (max-width:520px) { .hero { gap:1.8rem; }.header-link { font-size:.74rem; }.explainer dl div { grid-template-columns:1fr; gap:.15rem; }.explainer dd { font-size:.92rem; } footer { flex-direction:column; text-align:center; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition-duration:.01ms!important; } }