:root{color-scheme:dark;--paper:#f3f1ea;--red:#ff382b;--rule:#343537;--mute:#afb1b3;--display:Impact,"DIN Condensed","Arial Narrow",sans-serif;--mono:ui-monospace,SFMono-Regular,Consolas,monospace}*{box-sizing:border-box}body{margin:0;background:#101112;color:var(--paper);font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}a{color:inherit}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #f5c518;outline-offset:3px}header,footer{display:flex;align-items:center;padding:20px clamp(18px,5vw,90px);gap:32px}header{position:relative;z-index:2;background:#101112;border-bottom:1px solid var(--rule);justify-content:space-between}.brand img,footer img{width:146px;display:block}nav,.actions,footer div{display:flex;gap:24px;align-items:center}nav a,.navbeta,footer a,.btn,.sample a{text-decoration:none}nav a{font-size:14px;color:var(--mute)}nav a:hover,nav a[aria-current],footer a:hover{color:white}.navbeta{border:1px solid #555;padding:8px 15px;border-radius:3px;font-weight:650;font-size:14px}.hero,.banner{position:relative;isolation:isolate;overflow:hidden}.hero{min-height:615px;padding:clamp(42px,5vw,84px) clamp(20px,6vw,112px);background:#141617}.art{position:absolute;inset:0 0 0 26%;background:linear-gradient(0deg,#101112 0%,transparent 38%),linear-gradient(90deg,#141617,transparent 55%),url(assets/vegas.webp) center / cover;z-index:-2}.hero:after,.banner:after{content:"";position:absolute;inset:0;background:radial-gradient(#0006 .7px,transparent 1px) 0 0 / 3px 3px;pointer-events:none;z-index:-1}.heroCopy{max-width:530px}.tag,.sample small,.card small,label,.stripe,.sample a,.muted,.credit a{font:600 11px/1.5 var(--mono);letter-spacing:.09em;text-transform:uppercase}.tag,.sample small{display:flex;align-items:center;gap:10px}.tag i,.sample i{width:24px;height:4px;display:inline-block;background:var(--red)}h1,h2,h3,.sample b,.panelhead strong{font-family:var(--display);font-weight:800;line-height:.94;letter-spacing:-.025em;margin:0}h1{font-size:clamp(62px,7.4vw,118px);margin:22px 0}h1 em{color:var(--red);font-style:italic}.hero p,.banner p,.feature p,.rules p,.card p{color:#d2d2cf;max-width:49ch}.hero p{font-size:17px;max-width:41ch}.actions{gap:12px;flex-wrap:wrap;margin-top:26px}.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:20px;background:var(--paper);color:#131414;font:700 14px/1.4 inherit;font-family:inherit;font-size:14px;font-weight:700;padding:13px 17px;border:1px solid transparent;border-radius:3px;cursor:pointer}.btn.secondary{background:#151617bb;border-color:#555;color:var(--paper)}.btn:hover,.navbeta:hover{border-color:var(--red)}.sample{position:absolute;right:6vw;bottom:42px;padding:14px 19px;width:240px;background:#111315ed;border:1px solid #525357;border-left:3px solid var(--red)}.sample b{display:block;font-size:24px;margin:9px 0}.sample b span{color:#76787a}.sample i{width:6px;height:6px;border-radius:50%}.sample a{font-size:10px}.splits{height:3px;background:linear-gradient(90deg,#be64ff 33%,#49cf7b 33% 66%,#f5cb43 66%);margin-bottom:6px}.stripe{display:flex;justify-content:space-evenly;align-items:center;background:var(--paper);color:#242424;padding:13px 2vw;letter-spacing:.15em}.stripe b{color:#dc271e}.wrap{max-width:1320px;margin:auto;padding:clamp(40px,6vw,90px) clamp(18px,5vw,80px)}h2{font-size:clamp(36px,4vw,64px);margin:0 0 24px}h3{font-size:clamp(25px,2.4vw,38px)}.cards,.rules,.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.card,.deskpanel,.feature,details,article.credit{border:1px solid var(--rule);background:#17191a}.card{text-decoration:none;overflow:hidden}.card img{width:100%;aspect-ratio:1.85;object-fit:cover;display:block;transition:filter .2s}.card:hover img{filter:brightness(1.18)}.card div,.rules article{padding:20px}.card small{color:#aaa}.card h3{margin:10px 0}.card p,.rules p{font-size:15px}.banner{padding:75px max(5vw,calc((100vw - 1180px)/2));background:linear-gradient(90deg,#101112 8%,#101112c9 48%,#10111244),var(--art) center 54% /cover}.banner h1{font-size:clamp(55px,7vw,104px)}.banner p{margin:0}.controls,.feature,.panelhead{display:flex;align-items:end;gap:20px}.controls{margin-bottom:22px}.controls label{flex:1;max-width:440px}input,select{display:block;margin-top:6px;width:100%;border:1px solid #454749;border-radius:3px;background:#191b1d;color:var(--paper);font:500 16px inherit;font-family:inherit;font-size:16px;padding:12px}input[type=range]{accent-color:var(--red);padding:0;margin:14px 0 26px}.deskpanel,.feature{padding:clamp(18px,4vw,48px)}.panelhead{justify-content:space-between;align-items:center}.panelhead strong{font-size:clamp(32px,5vw,76px);font-variant-numeric:tabular-nums}.panelhead h2{margin:10px 0 18px}.metrics{margin-bottom:30px}.metrics div{border-top:3px solid #9257b7;padding:12px 0}.metrics div:nth-child(2){border-color:#53b987}.metrics div:nth-child(3){border-color:#e4b951}.metrics strong{display:block;font:700 clamp(20px,3vw,38px) var(--display)}canvas{display:block;width:100%;height:170px}details{padding:0 16px;margin:9px 0}summary{cursor:pointer;padding:15px 0;font-weight:650}summary span{display:inline-block;color:var(--mute);margin-right:12px;font:12px var(--mono)}.rows{overflow-x:auto}table{width:100%;border-collapse:collapse;margin:10px 0 18px;font-size:14px}td,th{text-align:left;padding:9px;border-bottom:1px solid var(--rule)}th{color:var(--mute)}.feature{align-items:center;justify-content:space-between;gap:40px;margin-bottom:48px}.feature>div,.feature form{flex:1}.feature h2,.feature h3{margin:12px 0}.feature form .btn{margin-top:12px}.rules article,.credit{border-top:1px solid var(--rule)}.credit{padding:16px;margin:10px 0}.credit h3{font-size:24px}.muted{color:var(--mute);letter-spacing:.04em}footer{border-top:1px solid var(--rule);flex-wrap:wrap;color:#b6b7b8;font-size:13px}footer small{margin-left:auto}.skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:12px;z-index:10;background:#000;padding:8px}
@media(max-width:740px){header{flex-wrap:wrap;gap:12px;padding:14px 18px}.brand img{width:122px}nav{order:3;width:100%;justify-content:space-between;gap:8px}.hero{min-height:0;padding:32px 20px 20px}.hero h1{font-size:clamp(70px,16vw,110px)}.art{inset:0;background-position:58% center;background-image:linear-gradient(0deg,#111 6%,#1115 65%),linear-gradient(90deg,#111c,transparent),url(assets/vegas.webp)}.heroCopy{max-width:400px}.sample{position:static;margin:28px 0 0 auto;width:215px}.stripe{font-size:8px;letter-spacing:.05em}.cards,.rules{grid-template-columns:1fr}.feature,.controls{flex-direction:column;align-items:stretch}.controls label{max-width:none}.banner{padding:50px 20px}.metrics{gap:7px}.metrics small{font-size:11px}.deskpanel{padding:15px}.actions{gap:8px}.btn{padding:12px}.panelhead .tag{font-size:9px}footer small{margin-left:0}footer div{gap:14px}}

.pitch .story { max-width: 780px; margin-bottom: 40px; }
.story p { max-width: 62ch; font-size: clamp(18px, 2vw, 24px); color: #cececa; }
.capture { margin: 0 0 42px; }
.capture img { display: block; width: min(100%, 760px); border: 1px solid var(--rule); }
.capture figcaption { margin-top: 10px; color: var(--mute); font: 12px var(--mono); }
.launch { display:none; }
.opening .launch {
  display:block; position:fixed; inset:0; z-index:100; pointer-events:none;
  animation:clear-launch 0s 3.38s forwards;
}
.launch .native-mark { width:min(260px,57vmin); height:min(191.803px,42.049vmin); }
@keyframes clear-launch { to {visibility:hidden} }
.opening:has(:focus-visible) .launch { display:none; }
@media(prefers-reduced-motion:reduce) {
  .opening .launch { background:black url(assets/sector1.png) center / min(260px,57vmin) auto no-repeat; animation:clear-launch 0s .36s forwards; }
  .launch-film {visibility:hidden;}
}
.filmhero { display:grid; grid-template-columns: minmax(280px,.85fr) minmax(0,1.4fr); gap:4vw; align-items:center; min-height:0; }
.highlight,.films figure { margin:0; min-width:0; }
.highlight iframe { display:block; width:100%; aspect-ratio:16/9; border:0; background:#080809; }
.highlight figcaption { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 0; font:11px/1.5 var(--mono); color:var(--mute); }
.filmstrip .tag,.favorite .tag { margin-bottom:14px; }
.films,.favorite { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(16px,3vw,46px); }
.films video { width:100%; display:block; background:#0b0c0d; aspect-ratio:1.505; }
.films h3 { margin-top:18px; }
.films p,.favorite p { color:#c0c2c2; max-width:50ch; }
.favorite { border-block:1px solid var(--rule); align-items:center; background:#17191b; }
.favorite h2 label { font:inherit; text-transform:none; letter-spacing:inherit; }
.favorite select { max-width:370px; }
.driver-preview { position:relative; isolation:isolate; padding:20px; background:linear-gradient(125deg,#151619,color-mix(in srgb,var(--team) 26%,#111)); border-left:3px solid var(--team); }
.driver-preview b { font:italic 800 clamp(28px,4vw,58px)/1 var(--display); }
.driver-preview img { display:block; width:100%; }
footer div {flex-wrap:wrap;}
@media(max-width:800px){.filmhero,.films,.favorite{grid-template-columns:1fr}.filmhero{padding-bottom:22px}.highlight figcaption{flex-wrap:wrap}.films{gap:30px}.favorite{gap:10px}}

.stories { padding-top:0; }
.story-spread { display:grid; grid-template-columns: .9fr 1.1fr; align-items:center; gap:clamp(24px,5vw,80px); padding:clamp(28px,4vw,60px) 0; border-top:1px solid var(--rule); }
.story-spread h3 { font-size:clamp(40px,5vw,76px); }
.story-spread .tag { color:var(--mute); margin:0 0 14px; }
.story-spread p:not(.tag) { max-width:48ch; color:#c7c8c7; }
.story-spread figure {margin:0;}.story-spread figure img { width:100%;display:block; }
.story-spread figcaption,.story-spread small { font:11px/1.6 var(--mono); }
.story-spread figcaption { margin-top:8px;color:var(--mute); }
.points-art,.recap-art { background:#17191a;padding:clamp(18px,3vw,45px); }
.points-art {border-left:3px solid #00d7b6;}.points-art div { margin-top:18px;font:700 clamp(26px,4.2vw,65px)/1 var(--display); }.points-art strong {color:#00d7b6;}
.recap-art img { width:100%; }.recap-art ol { display:grid;grid-template-columns:repeat(3,1fr);padding:0;list-style:none;gap:10px; }.recap-art li {border-top:2px solid #4781d7;padding-top:8px;}.recap-art b{display:block;font:700 clamp(22px,3vw,42px)/1.2 var(--display);}
@media(max-width:740px){.story-spread{grid-template-columns:1fr;}.stories{padding-top:18px;}}

html, body { overscroll-behavior-y: none; }
html { background: #101112; }
html.opening { animation: hold-launch-scroll 3.38s step-end; }
@keyframes hold-launch-scroll { from, to { overflow: hidden; } }
@media (prefers-reduced-motion: reduce) { html.opening { animation-duration: .36s; } }
body[data-page="home"] > header {
  position: absolute; inset: 0 0 auto; z-index: 3;
  padding-top: max(16px,env(safe-area-inset-top));
  background: linear-gradient(#08090be0,transparent); border: 0;
}
.filmhero {
  display: flex; align-items: flex-end;
  min-height: 100vh; min-height: 100dvh;
  padding-top: max(125px,calc(108px + env(safe-area-inset-top)));
  padding-bottom: max(clamp(30px,7vh,90px),env(safe-area-inset-bottom));
  background: #141617 url(assets/interlagos.webp) center / cover;
}
.filmhero::after { z-index: 0; background: linear-gradient(90deg,#06080bdc,transparent 85%),linear-gradient(0deg,#08090bca,transparent 85%); }
.hero-film { position: absolute; inset: 0; overflow: hidden; container-type: size; pointer-events: none; }
.hero-film iframe { border: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: max(100cqw,177.78cqh); height: max(100cqh,56.25cqw); opacity: 0; transition: opacity .35s; }
.hero-film.playing iframe { opacity: 1; }
.filmhero .heroCopy { position: relative; z-index: 1; }
.films video { pointer-events: none; -webkit-touch-callout: none; user-select: none; }
@media (max-width: 740px) {
  .filmhero { padding-inline: max(20px,env(safe-area-inset-left)) max(20px,env(safe-area-inset-right)); }
  .filmhero h1 { font-size: clamp(55px,min(15vw,10dvh),84px); }
  .filmhero .actions { margin-top: 16px; }
  body { overflow-x: clip; }
}

/* Safari draws its floating toolbar over the large viewport. Keep the film
   behind that toolbar and keep the actions inside the visible viewport. */
@media (hover: none) and (pointer: coarse) {
  body[data-page="home"] .filmhero {
    min-height: 100lvh;
    padding-bottom: calc(max(24px, env(safe-area-inset-bottom)) + 100lvh - 100svh);
  }
  html:has(body[data-page="home"]) {
    background: #090a0b;
    overscroll-behavior: none;
  }
  body[data-page="home"] > header {
    background: linear-gradient(to bottom, #090a0b 0, #090a0bb3 35%, transparent);
  }
}

@media (hover: none) and (pointer: coarse) {
  html.launch-active, html.launch-active body {
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: none;
  }
  .opening .launch {
    /* Safari's fixed-position viewport can end inside its translucent bars. */
    inset: -120px 0;
    pointer-events: auto;
    touch-action: none;
  }
  .launch-film { display: block; }
}
/* Safari also samples the underlying document when painting its glass bars. */
@media (hover: none) and (pointer: coarse) {
  html.launch-active { background: #000; }
  html.launch-active body { background: transparent; }
  html.launch-active body > :is(header,main,footer,.skip) {
    animation: launch-page-ready 2.4s step-end;
  }
}
@keyframes launch-page-ready { from, to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  html.launch-active body > :is(header,main,footer,.skip) { animation-duration: .36s; }
}
