.scrolly { height: 230vh; position: relative }
.stick { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden }
.stick canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block }
.vig { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 60% at 62% 50%, transparent 40%, rgba(6, 8, 14, .85) 100%), linear-gradient(90deg, rgba(6, 8, 14, .85) 0%, transparent 46%) }
.copy { position: absolute; left: max(20px, calc((100vw - 1240px) / 2 + 20px)); top: 50%; transform: translateY(-50%); width: min(560px, calc(100vw - 40px)); display: grid; gap: 14px; opacity: 0; pointer-events: none; transition: opacity .35s }
.copy.on { opacity: 1; pointer-events: auto }
.copy h1 { font-size: clamp(76px, 12vw, 190px); font-style: italic; line-height: .86 }
.copy h2 { font-size: clamp(48px, 7vw, 104px); font-style: italic; line-height: .9 }
.copy em { font-style: italic; color: #14100a; background: var(--amber); padding: 0 .12em; border-radius: 8px }
.copy p { color: #c6ccda; font-size: clamp(16px, 1.6vw, 20px); max-width: 44ch }
.copy .btn { justify-self: start } .ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px }
.prog { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .06) } .prog i { display: block; height: 100%; width: 0; background: var(--red) }
.scrollhint { text-decoration: none; white-space: nowrap; position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); font: 700 12px var(--f-mono); letter-spacing: 2px; color: var(--dim); animation: bob 1.8s infinite }
@keyframes bob { 50% { transform: translate(-50%, 6px) } }
@media (max-width: 760px) { .copy { top: auto; bottom: 14%; transform: none } .vig { background: linear-gradient(0deg, rgba(6, 8, 14, .92) 0%, rgba(6, 8, 14, .4) 45%, transparent 70%) } .stick canvas { object-fit: contain } .scrolly { height: 200vh } }
@media (prefers-reduced-motion: reduce) { .scrolly { height: auto } .stick { position: relative; height: 82vh } .copy.c0 { opacity: 1 } .copy:not(.c0), .scrollhint, .prog { display: none } }
.nextcard h3 { margin-top: 6px } .big { font: 900 clamp(40px, 6vw, 64px)/.95 var(--f-display); font-variant-numeric: tabular-nums }
.sess-list { display: grid; gap: 4px; margin-top: 14px; font-size: 14px } .sess-list div { display: flex; justify-content: space-between; gap: 8px; border-top: 1px solid var(--line); padding: 6px 0 } .sess-list .t { font: 600 13px var(--f-mono) } .sess-list .past { opacity: .45 }
.mini-st { display: grid; gap: 6px; margin-top: 12px } .mini-st div { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: center; font-size: 15px } .mini-st .n { font: 900 18px var(--f-display); color: var(--dim) } .mini-st b { font: 800 19px var(--f-display) }
.pod { display: grid; gap: 8px; margin-top: 12px } .pod div { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; background: rgba(0, 0, 0, .25); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px } .pod .p { font: 900 26px var(--f-display) } .pod .p1 { color: var(--amber) }
.teamrow { display: flex; gap: 10px; overflow-x: auto; padding: 16px 2px 6px; scrollbar-width: thin }
.tm { flex: 0 0 auto; display: grid; gap: 4px; justify-items: center; width: 92px; padding: 8px 6px; border-radius: 14px; border: 1.5px solid var(--line); background: rgba(0, 0, 0, .25); color: var(--chalk); cursor: pointer; font: 800 13px var(--f-display); letter-spacing: .4px }
.tm img { height: 44px; width: auto } .tm[aria-pressed="true"] { border-color: var(--amber); background: rgba(255, 200, 61, .1) }
#garagegrid { align-items: stretch } @media (max-width: 880px) { #garagegrid { grid-template-columns: minmax(0, 1fr) !important } }
.feats .feat { text-decoration: none; display: grid; gap: 10px; align-content: start; transition: transform .2s, border-color .2s } .feats .feat:hover { transform: translateY(-3px); border-color: var(--amber) }
.feat p { color: #c6ccda; font-size: 15px } .feat .go { color: var(--amber); font: 800 16px var(--f-display); letter-spacing: .6px }
.news { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px; align-items: center; padding: clamp(24px, 4vw, 44px); background: linear-gradient(120deg, rgba(225, 6, 0, .14), var(--glass) 60%) } @media (max-width: 800px) { .news { grid-template-columns: minmax(0, 1fr) } }
.news h2 em { font-style: italic; color: var(--red) } .news p { color: #c6ccda; margin-top: 12px }
.frow { display: flex; gap: 10px; flex-wrap: wrap } .frow input { flex: 1 1 220px; border-radius: 999px; padding: 14px 20px }
#hint[style*="opacity: 0"] { pointer-events: none }

/* garage overhaul */
.gar { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; margin-top: 8px } @media (max-width: 880px) { .gar { grid-template-columns: minmax(0, 1fr) } }
.stage { --tc: #888; position: relative; overflow: hidden; border-radius: 22px; border: 1px solid var(--line); min-height: 320px; display: grid; align-items: center; background: radial-gradient(70% 70% at 50% 58%, color-mix(in srgb, var(--tc) 38%, transparent), transparent 70%), linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(0, 0, 0, .3)); transition: background .4s }
.stage .wm { position: absolute; left: 0; right: 0; top: 10%; text-align: center; font: italic 900 clamp(60px, 11vw, 150px)/1 var(--f-display); color: color-mix(in srgb, var(--tc) 22%, transparent); letter-spacing: -2px; white-space: nowrap; pointer-events: none }
.stage .badge { position: absolute; left: 18px; top: 14px; z-index: 2; font: 900 34px var(--f-display); font-style: italic; color: #0b0d12; background: var(--tc); padding: 0 14px; border-radius: 10px }
.stage .spin { position: relative; z-index: 1 }
.ginfo { --tc: #888; padding: clamp(18px, 3vw, 28px); border-radius: 22px; border: 1px solid var(--line); background: var(--glass); border-top: 3px solid var(--tc) } .ginfo h2 { font-size: clamp(36px, 5vw, 56px); font-style: italic; line-height: 1; margin-top: 4px }
.gstats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 16px } .gstats div { display: grid; gap: 2px } .gstats small { font: 600 10px var(--f-mono); letter-spacing: 1.2px; text-transform: uppercase; color: var(--dim) } .gstats b { font: 900 clamp(20px, 2.4vw, 28px) var(--f-display) }
@media (max-width: 520px) { .gstats { grid-template-columns: repeat(3, 1fr) } }
.gdrv { display: grid; gap: 8px; margin-top: 16px } .dcard { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; background: rgba(0, 0, 0, .25); border: 1px solid var(--line) }
.dcard .num { font: italic 900 30px var(--f-display); color: var(--tc); min-width: 36px; text-align: center } .dcard b { font: 800 19px var(--f-display) } .dcard .pt { font-size: 26px; font-variant-numeric: tabular-nums } .dcard .dim { font-size: 13px }
.form { display: flex; gap: 4px; align-items: center; margin-top: 6px; flex-wrap: wrap } .pch { font: 700 11px var(--f-mono); min-width: 24px; text-align: center; padding: 2px 5px; border-radius: 6px; background: rgba(255, 255, 255, .07); color: var(--dim) } .pch.pts { color: var(--chalk) } .pod1 { background: var(--amber); color: #14100a } .pod2 { background: #c4c9d4; color: #14100a } .pod3 { background: #c68a52; color: #14100a }
.ppr { margin-top: 16px } .ppr small { font: 600 10px var(--f-mono); letter-spacing: 1.2px; text-transform: uppercase; color: var(--dim) } .bars { display: flex; align-items: flex-end; gap: 3px; height: 54px; margin-top: 8px } .bars i { flex: 1; background: var(--tc); border-radius: 3px 3px 0 0; opacity: .85; min-width: 3px }
.rail { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 16px }
.rl { --tc: #888; position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "p i" "n n" "t t"; gap: 2px 8px; align-items: center; padding: 10px 12px 14px; border-radius: 14px; border: 1.5px solid var(--line); background: rgba(0, 0, 0, .25); color: var(--chalk); cursor: pointer; text-align: left; font: 800 15px var(--f-display) }
.rl .rp { grid-area: p; font: italic 900 26px var(--f-display); color: var(--tc) } .rl img { grid-area: i; justify-self: end; height: 34px; width: auto; transform: rotate(90deg) scale(.8) } .rl .rn { grid-area: n } .rl .rpts { grid-area: t; font: 600 12px var(--f-mono); color: var(--dim) }
.rl .rbar { position: absolute; left: 0; bottom: 0; height: 4px; background: var(--tc) } .rl[aria-pressed="true"] { border-color: var(--tc); background: color-mix(in srgb, var(--tc) 14%, transparent) } .rl:hover { border-color: var(--tc) }
.stage .spin { transform: scale(1.28); transform-origin: 50% 55% }
.stage .spin.live { transform: none; cursor: grab; touch-action: pan-y } .stage .spin.live:active { cursor: grabbing }

.nowchip { justify-self: start; display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: rgba(8, 11, 18, .7); backdrop-filter: blur(6px); color: var(--chalk); text-decoration: none; font: 700 14px var(--f-display); letter-spacing: .4px }
.nowchip b { color: var(--amber); font-size: 13px } .nowchip:hover { border-color: var(--amber) }
.pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 0 rgba(255, 200, 61, .6); animation: pl 2s infinite } .pulse.on { background: #ff3b30; box-shadow: 0 0 0 0 rgba(255, 59, 48, .6) }
@keyframes pl { 70% { box-shadow: 0 0 0 9px rgba(255, 200, 61, 0) } 100% { box-shadow: 0 0 0 0 rgba(255, 200, 61, 0) } }
@media (prefers-reduced-motion: reduce) { .pulse { animation: none } }

.board { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: center; padding: clamp(22px, 4vw, 40px); background: linear-gradient(120deg, rgba(255, 200, 61, .1), var(--glass) 60%) } @media (max-width: 800px) { .board { grid-template-columns: minmax(0, 1fr) } }
.board h2 { font-size: clamp(40px, 6vw, 72px); font-style: italic; line-height: .95 } .board h2 em { color: #14100a; background: var(--amber); padding: 0 .12em; border-radius: 8px } .board .btn { margin-top: 16px }
.top3 { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px } .top3 li { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; padding: 12px 16px; border-radius: 14px; background: rgba(0, 0, 0, .28); border: 1px solid var(--line) } .top3 .p { font: italic 900 26px var(--f-display); color: var(--dim) } .top3 .p1 { color: var(--amber) } .top3 b { font: 800 22px var(--f-display); letter-spacing: .5px } .top3 .empty { display: block; color: var(--dim); text-align: center }

/* hero globe */
.gwrap { position: absolute; z-index: 2; right: max(20px, calc((100vw - 1240px) / 2 + 20px)); top: 50%; width: min(46vw, 74vh, 640px); aspect-ratio: 1; transform: translateY(-50%) scale(.92); opacity: 0; pointer-events: none; transition: opacity .45s, transform .45s }
.gwrap.on { opacity: 1; transform: translateY(-50%); pointer-events: auto }
.gwrap canvas { width: 100%; height: 100%; display: block; cursor: grab; touch-action: pan-y } .gwrap canvas:active { cursor: grabbing }
.gcard { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); width: min(92%, 400px); display: grid; gap: 4px; justify-items: start; padding: 14px 18px; border-radius: 16px; border: 1px solid var(--line); background: rgba(8, 11, 18, .82); backdrop-filter: blur(8px) } .gcard h3 { font-size: 26px; margin: 0 } .gcard .btn { margin-top: 8px }
@media (max-width: 760px) { .gwrap { right: 50%; top: 4%; width: min(88vw, 52vh); transform: translate(50%, 0) scale(.92) } .gwrap.on { transform: translate(50%, 0) } .gcard { bottom: -4px } }

/* globe hero (replaces the scroll-scrubbed car) */
.hero { min-height: calc(100svh - 70px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(16px, 4vw, 56px); align-items: center; padding-top: 24px; padding-bottom: 40px }
.hcopy { display: grid; gap: 16px; justify-items: start; align-content: center }
.hcopy h1 { font-size: clamp(76px, 12vw, 190px); font-style: italic; line-height: .86 } .hcopy em { font-style: italic; color: #14100a; background: var(--amber); padding: 0 .12em; border-radius: 8px }
.hcopy p { color: #c6ccda; font-size: clamp(16px, 1.6vw, 20px); max-width: 40ch }
.hero .gwrap { position: relative; right: auto; top: auto; transform: none; opacity: 1; pointer-events: auto; width: min(100%, 680px, 78vh); justify-self: end; margin-bottom: 40px }
@media (max-width: 860px) { .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: 12px } .hero .gwrap { order: -1; justify-self: center; width: min(100%, 440px); margin-bottom: 70px } .hcopy h1 { font-size: clamp(64px, 20vw, 110px) } }