:root {
  --asphalt: #080b0f;
  --asphalt-2: #10151b;
  --steel: #202830;
  --fluoro: #edf2e9;
  --muted: #a8b2af;
  --orange: #ff5a1f;
  --amber: #ffb21c;
  --violet: #9b5bdb;
  --cold: #4c8fff;
  --zone: #4c8fff;
  --display: 'Bebas Neue', sans-serif;
  --mono: 'Space Mono', monospace;
  --header-h: 76px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--asphalt); }
body { margin: 0; min-width: 320px; overflow-x: hidden; background: var(--asphalt); color: var(--fluoro); font-family: var(--mono); font-size: 14px; }
body::before { content: ''; position: fixed; inset: 0; z-index: 50; pointer-events: none; background: linear-gradient(90deg, transparent 49.8%, rgba(255,255,255,.018) 50%, transparent 50.2%), radial-gradient(circle at 50% -20%, rgba(255,255,255,.08), transparent 44%); mix-blend-mode: screen; }
::selection { color: var(--asphalt); background: var(--orange); }
a { color: inherit; }
button, input { font: inherit; }
button { color: inherit; }
.skip-link { position: absolute; top: 8px; left: 8px; z-index: 1000; padding: 12px 16px; transform: translateY(-160%); background: var(--fluoro); color: var(--asphalt); }
.skip-link:focus { transform: none; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
.noise { position: fixed; inset: 0; z-index: 49; pointer-events: none; opacity: .13; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; }

.site-header { position: fixed; inset: 0 0 auto; height: var(--header-h); z-index: 40; display: flex; align-items: center; border-bottom: 1px solid rgba(237,242,233,.18); background: rgba(8,11,15,.86); backdrop-filter: blur(18px); }
.team-mark { height: 100%; width: 270px; display: flex; align-items: center; text-decoration: none; border-right: 1px solid rgba(237,242,233,.18); }
.mark-plate { align-self: stretch; width: 76px; display: grid; place-items: center; background: var(--orange); color: var(--asphalt); font: 56px/.8 var(--display); transform: skewX(-7deg); transform-origin: left; }
.mark-copy { padding-left: 18px; color: var(--muted); font-size: 9px; line-height: 1.5; letter-spacing: .14em; text-transform: uppercase; }
.mark-copy b { color: var(--fluoro); font-weight: 700; }
.header-status { height: 100%; display: flex; align-items: center; gap: 10px; padding: 0 22px; color: var(--muted); font-size: 9px; letter-spacing: .12em; }
.header-status i, .release-status i { width: 7px; height: 7px; background: #9ff45a; border-radius: 50%; box-shadow: 0 0 14px #9ff45a; animation: pulse 1.6s steps(2) infinite; }
.header-status time { color: var(--fluoro); }
.corner-toggle { display: none; }
.corner-nav { margin-left: auto; height: 100%; display: flex; align-items: stretch; }
.corner-nav a { min-width: 46px; display: flex; flex-direction: column; justify-content: center; align-items: center; border-left: 1px solid rgba(237,242,233,.12); text-decoration: none; transition: background .2s, color .2s, transform .2s; }
.corner-nav b { font: 18px/1 var(--display); letter-spacing: .04em; }
.corner-nav span { display: none; }
.corner-nav a:hover, .corner-nav a:focus-visible { color: var(--asphalt); background: var(--zone); transform: translateY(3px); }

.temp-zone { --zone: #4c8fff; position: relative; isolation: isolate; transition: background-color 1.2s ease; }
.temp-zone::after { content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(circle at var(--heat-x, 75%) 20%, color-mix(in srgb, var(--zone) 16%, transparent), transparent 38%); opacity: .45; transition: opacity 1s; }
.temp-zone.is-warm::after { opacity: 1; }
.section-index { position: absolute; top: 34px; right: 38px; color: color-mix(in srgb, var(--zone) 80%, white); font-size: 10px; letter-spacing: .14em; }
.eyebrow { margin: 0 0 20px; color: var(--zone); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
h1, h2 { margin: 0; font-family: var(--display); font-weight: 400; letter-spacing: -.025em; text-transform: uppercase; }

.hero { --zone: var(--cold); min-height: 100svh; padding-top: var(--header-h); overflow: hidden; background: radial-gradient(circle at 66% 35%, #1e2834 0, #0b1117 36%, #06080b 70%); }
.hero::before { content: ''; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 28%; background: repeating-linear-gradient(170deg, rgba(255,255,255,.045) 0 1px, transparent 1px 9px), linear-gradient(180deg, transparent, #050608 60%); transform: skewY(-2deg); transform-origin: right; }
.light-rail { position: absolute; z-index: 0; top: 96px; left: 24%; width: 67%; height: 14px; background: var(--fluoro); box-shadow: 0 0 20px rgba(237,242,233,.8), 0 0 90px rgba(220,238,255,.32); transform: skewX(-25deg); animation: fluorescent 6s steps(1) infinite; }
.light-rail::after { content: ''; position: absolute; inset: 26px 0 auto; height: 48vh; background: linear-gradient(180deg, rgba(237,242,233,.07), transparent); clip-path: polygon(0 0,100% 0,85% 100%,15% 100%); }
.hero-copy { position: absolute; z-index: 3; top: clamp(125px, 17vh, 190px); left: clamp(20px, 5vw, 78px); width: min(500px, 42vw); }
.session-code { margin: 0 0 14px; color: var(--cold); font-size: 10px; font-weight: 700; letter-spacing: .14em; }
.hero h1 { font-size: clamp(100px, 13.6vw, 214px); line-height: .7; }
.hero h1 span { color: transparent; -webkit-text-stroke: 1px rgba(237,242,233,.68); }
.hero-deck { width: 320px; margin: 32px 0 0 6px; color: #c3ccca; font-size: 12px; line-height: 1.75; }
.lean-stage { --lean: 0deg; position: absolute; z-index: 2; inset: 11% -2% 10% 32%; overflow: hidden; cursor: ew-resize; touch-action: pan-y; }
.stage-grid { position: absolute; inset: 0; opacity: .22; background-image: linear-gradient(rgba(111,143,168,.19) 1px, transparent 1px), linear-gradient(90deg, rgba(111,143,168,.19) 1px, transparent 1px); background-size: 55px 55px; mask-image: linear-gradient(90deg, transparent, #000 20%); transform: perspective(600px) rotateX(56deg) translateY(42%); }
.bike-rig { position: absolute; width: min(63vw, 950px); aspect-ratio: 900/560; left: 50%; bottom: 2%; transform-origin: 50% 82%; transform: translateX(-50%) rotate(var(--lean)); will-change: transform; filter: drop-shadow(0 22px 22px rgba(0,0,0,.55)); }
.bike { display: block; width: 100%; height: 100%; overflow: visible; }
.bike-shadow { position: absolute; width: 62%; height: 9%; left: 23%; bottom: 5%; border-radius: 50%; background: rgba(0,0,0,.75); filter: blur(19px); transform: translateX(var(--shadow-shift, 0)); }
.contact-wrap { position: absolute; z-index: 4; left: calc(59% + var(--patch-shift, 0px)); bottom: 4.5%; color: var(--orange); transition: left .06s linear; }
.contact-patch { width: var(--patch-w, 34px); height: var(--patch-h, 9px); border: 1px solid currentColor; border-radius: 50%; background: color-mix(in srgb, var(--orange) 60%, transparent); box-shadow: 0 0 18px var(--orange); transform: rotate(var(--patch-rot, 0deg)); }
.contact-wrap span { position: absolute; top: 14px; left: 50%; font-size: 7px; letter-spacing: .12em; transform: translateX(-50%); }
.lean-crosshair { position: absolute; left: 54%; bottom: 12%; width: 160px; height: 160px; border: 1px solid rgba(237,242,233,.18); border-radius: 50%; transform: translateX(-50%); }
.lean-crosshair i:first-child { position: absolute; left: 50%; top: -32%; bottom: -32%; border-left: 1px dashed rgba(237,242,233,.25); }
.lean-crosshair i:last-child { position: absolute; top: 50%; left: -32%; right: -32%; border-top: 1px dashed rgba(237,242,233,.25); }
.lean-readout { position: absolute; z-index: 6; top: 15%; right: 4%; width: 130px; border-left: 2px solid var(--cold); padding-left: 14px; }
.lean-readout span, .load-readout span { display: block; color: var(--muted); font-size: 8px; letter-spacing: .14em; }
.lean-readout strong { display: block; font: 46px/1 var(--display); letter-spacing: .02em; }
.lean-readout small { color: var(--cold); font-size: 9px; }
.load-readout { position: absolute; z-index: 6; right: 4%; bottom: 16%; padding: 12px 15px; border: 1px solid rgba(237,242,233,.22); background: rgba(8,11,15,.68); backdrop-filter: blur(6px); }
.load-readout strong { margin-right: 4px; font: 34px/1 var(--display); }
.load-readout small { color: var(--orange); font-size: 8px; }
.wrist-cue { position: absolute; z-index: 8; right: 4%; bottom: 5%; margin: 0; color: var(--muted); font-size: 8px; letter-spacing: .14em; }
.wrist-cue span { display: inline-block; width: 38px; height: 6px; margin-right: 9px; border: 1px solid currentColor; border-radius: 50%; }
.hero-meta { position: absolute; z-index: 7; left: clamp(20px,5vw,78px); bottom: 30px; display: flex; gap: 1px; }
.hero-meta div { min-width: 112px; padding: 10px 13px; background: rgba(18,24,30,.82); border-top: 1px solid rgba(237,242,233,.24); }
.hero-meta span { display: block; color: var(--muted); font-size: 7px; letter-spacing: .13em; }
.hero-meta b { font: 19px/1.3 var(--display); letter-spacing: .04em; }
.scroll-key { position: absolute; z-index: 7; left: 50%; bottom: 26px; display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: 8px; letter-spacing: .12em; text-decoration: none; writing-mode: vertical-rl; }
.scroll-key i { height: 38px; border-left: 1px solid var(--orange); }
.load-item { opacity: 0; transform: translateY(18px); animation: enter .7s cubic-bezier(.2,.9,.2,1) forwards; }
.lean-stage.load-item { animation-delay: .25s; }
.hero-meta.load-item { animation-delay: .55s; }

.run-plan { --zone: #699eee; min-height: 940px; padding: 140px 6vw 100px; display: grid; grid-template-columns: .75fr 1.25fr; gap: 8vw; background: #0c1219; border-top: 1px solid #314154; }
.plan-heading { align-self: start; position: sticky; top: 130px; }
.plan-heading h2, .setup-intro h2, .clicker-copy h2, .window-copy h2, .debrief h2 { font-size: clamp(70px, 9vw, 142px); line-height: .78; }
.plan-heading h2 span, .clicker-copy h2 span { color: transparent; -webkit-text-stroke: 1px var(--zone); }
.plan-heading > p:last-child, .setup-intro > p:last-child, .clicker-copy > p:last-child { max-width: 470px; color: #bac4c2; line-height: 1.85; }
.lap-stack { padding-top: 70px; }
.lap-card { position: relative; min-height: 155px; margin-bottom: 20px; padding: 28px 34px; display: grid; grid-template-columns: 70px 1fr auto; align-items: center; border: 1px solid #34414e; background: #111922; box-shadow: 0 16px 30px rgba(0,0,0,.24); transform: rotate(var(--r, -.8deg)); }
.lap-card:nth-child(2) { --i: 1; --r: .6deg; }
.lap-card:nth-child(3) { --i: 2; --r: -.35deg; }
.lap-card:nth-child(4) { --i: 3; --r: .3deg; }
.lap-card > span { color: var(--zone); font: 44px/1 var(--display); }
.lap-card b { font: 34px/1 var(--display); font-weight: 400; letter-spacing: .02em; text-transform: uppercase; }
.lap-card p { grid-column: 2; margin: 10px 0 0; color: var(--muted); font-size: 9px; }
.lap-card em { grid-column: 3; grid-row: 1 / span 2; color: var(--fluoro); font-style: normal; font-size: 10px; border: 1px solid currentColor; padding: 9px 12px; }
.lap-card.hot { border-color: var(--orange); background: linear-gradient(100deg, #201510, #111922 50%); }
.lap-card.hot > span { color: var(--orange); }
.lap-card.caution { background: repeating-linear-gradient(135deg, rgba(255,178,28,.06) 0 12px, transparent 12px 24px), #15191b; }
.pit-note { grid-column: 2; margin: 20px 10% 0 0; padding: 22px; color: var(--fluoro); border-left: 4px solid var(--orange); font-family: var(--mono); font-style: italic; transform: rotate(-1deg); }
.pit-note b { display: block; margin-top: 8px; color: var(--muted); font-size: 9px; font-style: normal; }

.setup { --zone: #8f68d3; min-height: 1050px; padding: 140px 6vw; display: grid; grid-template-columns: .65fr 1.35fr; gap: 6vw; background: #0f1117; overflow: hidden; }
.setup::before { content: ''; position: absolute; inset: 0 0 0 41%; z-index: -1; background: repeating-linear-gradient(90deg, transparent 0 69px, rgba(255,255,255,.025) 70px), linear-gradient(110deg, #151b21, #090c10); border-left: 1px solid #30343a; }
.setup-intro { position: sticky; top: 130px; align-self: start; z-index: 2; }
.paper-board { position: relative; min-height: 780px; padding: 60px 3%; }
.setup-sheet { position: relative; width: 74%; min-height: 430px; padding: 34px; color: #141619; background: #dfe2d8; box-shadow: 0 22px 50px rgba(0,0,0,.55); clip-path: polygon(0 1.4%, 2% 0, 5% 1%, 9% 0, 13% 1%, 18% .2%, 24% 1.1%, 31% 0, 39% 1%, 48% .3%, 58% 1%, 70% 0, 82% 1%, 91% .2%, 100% 1.2%, 99% 98%, 92% 99%, 83% 98%, 72% 100%, 61% 98.5%, 51% 100%, 42% 98%, 31% 99.5%, 20% 98%, 10% 100%, 0 98%); }
.setup-sheet::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .16; background: repeating-linear-gradient(0deg, transparent 0 24px, #69716b 25px); }
.setup-sheet header { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto; gap: 6px; padding-bottom: 14px; border-bottom: 3px solid #16191b; }
.setup-sheet header span { font-size: 9px; letter-spacing: .12em; }
.setup-sheet header b { grid-row: 2; font: 55px/.8 var(--display); }
.setup-sheet header small { grid-column: 2; grid-row: 1 / span 2; align-self: end; font-weight: 700; }
.setup-sheet dl { position: relative; z-index: 1; margin: 28px 0; }
.setup-sheet dl div { display: grid; grid-template-columns: 1fr 1.2fr .6fr; padding: 12px 0; border-bottom: 1px solid rgba(20,22,25,.3); }
.setup-sheet dt { font-size: 9px; font-weight: 700; }
.setup-sheet dd { margin: 0; font-weight: 700; }
.setup-sheet dl i { color: #a23320; font-size: 10px; text-align: right; font-style: normal; }
.scribble { position: relative; z-index: 2; width: max-content; margin-left: auto; color: #3d2877; font-size: 13px; font-style: italic; transform: rotate(-5deg); }
.sheet-a { transform: rotate(-3deg); }
.sheet-b { position: absolute; top: 340px; right: 0; background: #cfd5ce; transform: rotate(5deg); }
.trace { position: relative; z-index: 2; width: 100%; height: auto; margin-top: 25px; color: #6e3699; }
.trace text { fill: #141619; font: 10px var(--mono); }
.tape { position: absolute; z-index: 3; top: -18px; left: 35%; width: 120px; height: 45px; opacity: .76; background: #e9d7ad; clip-path: polygon(0 10%, 7% 0, 14% 7%, 23% 0, 31% 9%, 42% 1%, 50% 8%, 60% 0, 70% 8%, 80% 0, 89% 7%, 100% 2%, 98% 90%, 90% 100%, 80% 92%, 70% 100%, 61% 90%, 51% 99%, 40% 91%, 31% 100%, 20% 90%, 10% 99%, 0 91%); transform: rotate(2deg); box-shadow: 0 2px 4px rgba(0,0,0,.2); }
.mechanic-tag { position: absolute; top: 90px; right: -3%; z-index: 4; width: 190px; padding: 16px; color: var(--asphalt); background: var(--orange); transform: rotate(6deg); box-shadow: 0 10px 20px rgba(0,0,0,.35); }
.mechanic-tag b, .mechanic-tag span, .mechanic-tag strong { display: block; }
.mechanic-tag b { font: 30px/1 var(--display); }
.mechanic-tag span { margin: 4px 0 12px; font-size: 8px; }
.mechanic-tag strong { border-top: 1px solid; padding-top: 8px; }

.clicker { --zone: var(--orange); padding: 115px 6vw; min-height: 800px; display: grid; grid-template-columns: .75fr 1.25fr; gap: 8vw; background: radial-gradient(circle at 70% 42%, #2c1a12 0, #111418 42%, #090b0e 72%); border-block: 1px solid #3b2a22; }
.clicker-copy { align-self: center; }
.clicker-console { display: grid; grid-template-columns: 1fr 1fr; align-content: center; gap: 18px; }
.dial-unit { min-height: 380px; padding: 30px; border: 1px solid #42494c; background: linear-gradient(145deg, #20262b, #0a0d10); box-shadow: inset 0 1px rgba(255,255,255,.1), 0 28px 50px rgba(0,0,0,.35); }
.dial-unit label { display: block; color: var(--fluoro); font: 26px var(--display); letter-spacing: .03em; }
.dial-unit label span { display: block; margin-top: 3px; color: var(--muted); font: 7px var(--mono); letter-spacing: .11em; }
.dial-shell { width: 174px; height: 174px; margin: 35px auto 24px; display: grid; place-items: center; border: 1px solid #4b5154; border-radius: 50%; background: repeating-conic-gradient(from -120deg, var(--orange) 0 1deg, transparent 1deg 10deg); box-shadow: 0 0 35px rgba(255,90,31,.12); }
.dial-shell.violet { background: repeating-conic-gradient(from -120deg, var(--violet) 0 1deg, transparent 1deg 10deg); box-shadow: 0 0 35px rgba(155,91,219,.15); }
.dial { position: relative; width: 118px; height: 118px; border: 3px solid #636b6e; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #4e5659, #101417 68%); box-shadow: 0 10px 20px #000, inset 0 2px 3px rgba(255,255,255,.23); transform: rotate(var(--dial-angle, 0deg)); }
.dial i { position: absolute; top: 8px; left: 50%; width: 3px; height: 29px; background: var(--orange); box-shadow: 0 0 9px var(--orange); transform: translateX(-50%); }
.violet .dial i { background: var(--violet); box-shadow: 0 0 9px var(--violet); }
.dial b { position: absolute; inset: 0; display: grid; place-items: center; font: 36px var(--display); transform: rotate(calc(-1 * var(--dial-angle, 0deg))); }
.dial-unit input { display: block; width: 100%; accent-color: var(--orange); cursor: ew-resize; }
.dial-unit:nth-child(2) input { accent-color: var(--violet); }
.dial-unit output { display: block; margin-top: 15px; color: var(--muted); font-size: 8px; text-align: center; letter-spacing: .11em; }
.dial-unit output strong { color: var(--fluoro); font: 32px var(--display); }
.consequence { grid-column: 1 / -1; min-height: 190px; padding: 25px 30px; display: grid; grid-template-columns: 1.25fr 1fr; gap: 8px 32px; align-items: center; border-left: 4px solid var(--orange); background: rgba(8,11,15,.9); }
.consequence > span { grid-column: 1 / -1; color: var(--muted); font-size: 8px; letter-spacing: .13em; }
.exit-meter { grid-column: 1 / -1; height: 5px; overflow: hidden; background: #2b3034; }
.exit-meter i { display: block; width: 88%; height: 100%; background: linear-gradient(90deg, var(--violet), var(--orange), var(--amber)); box-shadow: 0 0 16px var(--orange); transition: width .3s; }
.consequence > strong { font: 36px/1 var(--display); letter-spacing: .03em; }
.consequence > p { color: var(--muted); font-size: 10px; line-height: 1.7; }
.exit-stats { grid-column: 1 / -1; display: flex; gap: 26px; }
.exit-stats span { color: var(--muted); font-size: 8px; }
.exit-stats b { color: var(--fluoro); font-size: 12px; }

.windows { --zone: var(--amber); min-height: 850px; padding: 130px 6vw; background: #12130e; overflow: hidden; }
.windows::before { content: '86.1°'; position: absolute; left: 3.5vw; top: 270px; color: rgba(255,178,28,.055); font: min(27vw, 390px)/.75 var(--display); letter-spacing: -.05em; transform: rotate(-90deg) translateX(-100%); transform-origin: left top; }
.window-copy { display: flex; align-items: end; justify-content: space-between; margin-bottom: 70px; }
.window-copy .eyebrow { align-self: start; }
.thermal-map { position: relative; height: 290px; margin-left: 12vw; border: 1px solid #414238; background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), rgba(255,255,255,.1) 25%); }
.temp-scale { display: flex; justify-content: space-between; padding: 12px; color: var(--muted); font-size: 8px; }
.tire-lane { position: absolute; left: 3%; right: 3%; height: 70px; display: grid; grid-template-columns: 90px 1fr 70px 90px; align-items: center; gap: 16px; }
.tire-lane.front { top: 62px; }
.tire-lane.rear { top: 162px; }
.tire-lane > span { font: 26px var(--display); }
.tire-lane > i { height: 30px; background: linear-gradient(90deg, #3e70cc, #8a61cb 37%, #ff772d 70%, #ffce38); clip-path: polygon(0 26%, 92% 26%, 92% 0,100% 50%,92% 100%,92% 74%,0 74%); }
.tire-lane.front > i { width: 73%; }
.tire-lane.rear > i { width: 84%; }
.tire-lane b { color: var(--amber); font: 30px var(--display); }
.tire-lane small { color: var(--muted); font-size: 8px; }
.operating-band { position: absolute; top: 0; bottom: 0; left: 51%; width: 26%; border-inline: 1px solid rgba(255,178,28,.55); background: rgba(255,178,28,.06); }
.operating-band span { position: absolute; top: 12px; left: 8px; color: var(--amber); font-size: 7px; writing-mode: vertical-rl; }
.window-notes { margin: 45px 0 0 12vw; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #414238; }
.window-notes article { padding: 25px; border-right: 1px solid #414238; }
.window-notes article > b { display: block; color: var(--amber); font: 45px var(--display); }
.window-notes span { color: var(--muted); font-size: 8px; }
.window-notes strong { display: block; margin-top: 8px; font: 28px var(--display); }
.window-notes p { color: var(--muted); font-size: 9px; line-height: 1.6; }

.debrief { --zone: #bb66df; padding: 140px 6vw; min-height: 1000px; display: grid; grid-template-columns: .65fr 1.35fr; gap: 7vw; background: radial-gradient(circle at 18% 20%, rgba(121,55,164,.22), transparent 34%), #080a0d; }
.debrief-heading { position: sticky; top: 130px; align-self: start; }
.transcript-toggle { min-height: 48px; margin-top: 38px; padding: 0 17px; display: inline-flex; align-items: center; gap: 14px; border: 1px solid #6c5276; background: transparent; cursor: pointer; text-transform: uppercase; font-size: 8px; letter-spacing: .12em; }
.transcript-toggle i { width: 30px; height: 14px; border: 1px solid var(--violet); border-radius: 8px; }
.transcript-toggle i::after { content: ''; display: block; width: 8px; height: 8px; margin: 2px; border-radius: 50%; background: var(--violet); transition: transform .25s; }
.transcript-toggle[aria-pressed="true"] i::after { transform: translateX(16px); }
.transcript { padding-top: 40px; }
.transcript article { display: grid; grid-template-columns: 90px 170px 1fr; gap: 20px; padding: 24px 0; border-top: 1px solid #30333a; transition: opacity .3s, filter .3s, max-height .3s, padding .3s; }
.transcript time { color: var(--muted); font-size: 9px; }
.transcript b { color: var(--zone); font-size: 9px; }
.transcript p { margin: 0; color: #d5dbd5; line-height: 1.8; }
.transcript .noise-line { opacity: .48; }
.transcript.condensed .noise-line { max-height: 0; padding: 0; opacity: 0; overflow: hidden; border: 0; }
.transcript .decision { margin-top: 22px; padding: 28px 22px; border: 1px solid var(--orange); background: rgba(255,90,31,.08); }
.transcript .decision b, .transcript .decision p { color: var(--orange); }

.release { --zone: var(--orange); min-height: 76vh; overflow: hidden; display: grid; place-items: center; background: #0b0d0d; }
.garage-door { position: absolute; inset: 0; display: grid; grid-template-rows: repeat(3, 1fr); transform: perspective(900px) rotateX(var(--door, 0deg)); transform-origin: top; }
.garage-door i { border-bottom: 5px solid #080a0b; background: repeating-linear-gradient(90deg, #1a2023 0 7%, #15191c 7% 14%); box-shadow: inset 0 2px rgba(255,255,255,.05); }
.garage-door span { position: absolute; right: 8%; top: 10%; color: rgba(237,242,233,.06); font: 40vw/.8 var(--display); }
.release-copy { position: relative; z-index: 2; width: min(880px, 88vw); padding: 60px; border-left: 7px solid var(--orange); background: rgba(8,11,15,.76); backdrop-filter: blur(5px); }
.release-copy > p { color: var(--orange); font-size: 9px; letter-spacing: .16em; }
.release-copy h2 { font-size: clamp(100px, 15vw, 220px); line-height: .7; }
.release-copy > div { margin-top: 30px; display: flex; gap: 25px; align-items: center; }
.release-copy span { font: 40px var(--display); }
.release-copy b { color: var(--muted); font-size: 9px; }
.release-status { position: absolute; z-index: 3; right: 5vw; bottom: 35px; display: flex; align-items: center; gap: 10px; color: #9ff45a; font-size: 9px; }

.site-footer { min-height: 190px; padding: 50px 5vw; display: grid; grid-template-columns: 1fr 2fr; gap: 20px; align-items: center; border-top: 1px solid #30363a; background: #050607; color: var(--muted); font-size: 9px; }
.site-footer p { margin: 0; }
.site-footer nav { display: flex; justify-content: flex-end; gap: 28px; }
.site-footer a { min-height: 44px; display: inline-flex; align-items: center; text-underline-offset: 4px; }
.site-footer a:hover { color: var(--orange); }
.site-footer > span { grid-column: 1 / -1; padding-top: 20px; border-top: 1px solid #25282a; color: #555f60; text-align: right; }

/* Build guide */
.guide-page { background: #090c10; }
.guide-header { position: absolute; inset: 0 0 auto; z-index: 40; height: 76px; display: flex; justify-content: space-between; border-bottom: 1px solid rgba(237,242,233,.18); background: rgba(8,11,15,.9); backdrop-filter: blur(18px); }
.guide-return { min-width: 190px; padding: 0 24px; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; text-decoration: none; border-left: 1px solid rgba(237,242,233,.18); }
.guide-return span { color: var(--muted); font-size: 7px; letter-spacing: .12em; text-transform: uppercase; }
.guide-return b { margin-top: 3px; color: var(--orange); font: 19px var(--display); letter-spacing: .06em; }
.guide-main { padding-top: 76px; }
.guide-hero { position: relative; min-height: 720px; padding: 10vw 6vw 7vw; overflow: hidden; border-bottom: 1px solid #303840; background: radial-gradient(circle at 80% 30%, rgba(76,143,255,.18), transparent 24%), linear-gradient(118deg, #111820, #080a0d 67%); }
.guide-hero::before { content: ''; position: absolute; top: 70px; right: -9%; width: 65%; height: 9px; background: var(--fluoro); box-shadow: 0 0 28px rgba(237,242,233,.7), 0 0 100px rgba(76,143,255,.26); transform: rotate(-9deg); }
.guide-kicker { margin-bottom: 24px; color: var(--cold); font-size: 9px; letter-spacing: .17em; }
.guide-hero h1 { position: relative; z-index: 2; font-size: clamp(110px, 16vw, 238px); line-height: .72; }
.guide-hero h1 span { color: transparent; -webkit-text-stroke: 1px var(--fluoro); }
.guide-lead { position: absolute; z-index: 3; right: 6vw; bottom: 70px; width: min(390px, 35vw); padding: 24px; border-left: 4px solid var(--orange); background: rgba(8,11,15,.77); }
.guide-lead b { color: var(--orange); font: 24px var(--display); letter-spacing: .04em; }
.guide-lead p { margin: 10px 0 0; color: #bbc5c2; line-height: 1.75; }
.angle-diagram { position: absolute; right: 11%; top: 29%; width: 270px; height: 270px; border: 1px solid rgba(237,242,233,.18); border-radius: 50%; transform: rotate(64deg); }
.angle-diagram i { position: absolute; left: 50%; top: -15%; bottom: 50%; border-left: 2px solid var(--orange); }
.angle-diagram b { position: absolute; top: 5%; left: 54%; color: var(--orange); font: 52px var(--display); transform: rotate(-64deg); }
.angle-diagram span { position: absolute; bottom: 8%; right: -5%; color: var(--muted); font-size: 8px; transform: rotate(-64deg); }
.guide-article { width: min(1180px, 88vw); margin: 0 auto; padding: 70px 0 130px; }
.guide-block { position: relative; display: grid; grid-template-columns: 100px 1fr; gap: 5vw; padding: 70px 0; border-top: 1px solid #303840; }
.guide-block:first-child { border-top: 0; }
.guide-no { color: var(--orange); font: 64px/1 var(--display); }
.guide-block h2 { margin-bottom: 24px; color: var(--fluoro); font-size: clamp(52px, 7vw, 94px); line-height: .85; }
.guide-block p { max-width: 830px; margin: 0; color: #bac4c2; font-size: 12px; line-height: 1.95; }
.guide-block code { padding: 2px 5px; color: #080b0f; background: var(--fluoro); font-family: var(--mono); font-weight: 700; }
.code-strip { max-width: 820px; margin-top: 30px; padding: 18px 20px; display: grid; grid-template-columns: auto 1fr; gap: 8px 20px; border-left: 4px solid var(--violet); background: #111820; }
.code-strip span { grid-row: 1 / span 2; color: var(--violet); font: 28px var(--display); }
.code-strip b { font-size: 10px; }
.code-strip i { color: var(--muted); font-size: 9px; font-style: normal; }
.palette-row { margin-top: 34px; display: grid; grid-template-columns: repeat(5, 1fr); }
.palette-row span { position: relative; min-height: 115px; padding: 58px 11px 11px; color: #88918f; font-size: 8px; border: 1px solid #2c3339; }
.palette-row span::before { content: ''; position: absolute; inset: 0 0 auto; height: 46px; background: var(--swatch); }
.palette-row b { display: block; margin-bottom: 5px; color: var(--fluoro); font: 19px var(--display); }
.reproduce-block { padding: 70px 5vw; border: 1px solid #674026; background: radial-gradient(circle at 100% 0, rgba(255,90,31,.16), transparent 45%), #121414; }

@media (max-width: 600px) {
  .guide-header { height: 64px; }
  .guide-main { padding-top: 64px; }
  .guide-header .team-mark { width: 175px; }
  .guide-return { min-width: 135px; padding: 0 12px; }
  .guide-return span { display: none; }
  .guide-hero { min-height: 640px; padding: 100px 18px 40px; }
  .guide-hero h1 { font-size: 102px; }
  .guide-lead { right: 18px; left: 18px; bottom: 42px; width: auto; }
  .angle-diagram { width: 190px; height: 190px; right: -26%; top: 42%; opacity: .55; }
  .guide-article { width: auto; margin: 0 18px; padding: 35px 0 85px; }
  .guide-block { grid-template-columns: 48px 1fr; gap: 12px; padding: 48px 0; }
  .guide-no { font-size: 40px; }
  .guide-block h2 { font-size: 49px; }
  .guide-block p { font-size: 10px; line-height: 1.85; }
  .code-strip { grid-template-columns: 1fr; }
  .code-strip span { grid-row: auto; }
  .palette-row { grid-template-columns: 1fr 1fr; }
  .palette-row span:last-child { grid-column: 1 / -1; }
  .reproduce-block { margin-inline: -18px; padding-inline: 18px; }
}

@keyframes enter { to { opacity: 1; transform: none; } }
@keyframes pulse { 50% { opacity: .35; } }
@keyframes fluorescent { 0%, 96%, 100% { opacity: 1; } 97% { opacity: .4; } 97.5% { opacity: .9; } 98% { opacity: .2; } }

@media (max-width: 1180px) {
  .header-status { display: none; }
  .corner-nav a { min-width: 42px; }
  .lean-stage { left: 27%; }
  .bike-rig { width: min(76vw, 900px); }
  .run-plan, .setup, .clicker, .debrief { gap: 4vw; }
  .mechanic-tag { right: 0; }
}

@media (max-width: 900px) {
  :root { --header-h: 70px; }
  .team-mark { width: 235px; }
  .mark-plate { width: 68px; }
  .corner-toggle { margin-left: auto; height: 100%; min-width: 112px; padding: 0 16px; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; border: 0; border-left: 1px solid rgba(237,242,233,.18); background: transparent; cursor: pointer; }
  .corner-toggle span { color: var(--muted); font-size: 7px; text-transform: uppercase; }
  .corner-toggle b { font: 22px var(--display); }
  .corner-nav { position: fixed; inset: var(--header-h) 0 auto; height: auto; max-height: calc(100svh - var(--header-h)); overflow-y: auto; display: grid; grid-template-columns: repeat(2, 1fr); background: rgba(8,11,15,.98); transform: translateY(-115%); opacity: 0; pointer-events: none; transition: transform .35s, opacity .35s; }
  .corner-nav.open { transform: none; opacity: 1; pointer-events: auto; }
  .corner-nav a { min-height: 58px; padding: 0 18px; flex-direction: row; justify-content: flex-start; gap: 14px; border-bottom: 1px solid #292e31; }
  .corner-nav b { color: var(--orange); }
  .corner-nav span { display: block; color: var(--muted); font-size: 8px; }
  .hero { min-height: 900px; }
  .hero-copy { width: 65vw; }
  .hero h1 { font-size: clamp(100px, 21vw, 170px); }
  .lean-stage { inset: 23% -12% 12% 13%; }
  .bike-rig { width: 95vw; bottom: 8%; }
  .lean-readout { top: 17%; right: 13%; }
  .load-readout { right: 13%; bottom: 16%; }
  .wrist-cue { right: 13%; }
  .hero-meta { bottom: 28px; }
  .scroll-key { display: none; }
  .run-plan, .setup, .clicker, .debrief { min-height: 0; padding: 110px 6vw; grid-template-columns: 1fr; }
  .plan-heading, .setup-intro, .debrief-heading { position: relative; top: auto; }
  .lap-stack { padding-top: 25px; }
  .lap-card { position: relative; top: auto; }
  .pit-note { grid-column: 1; }
  .setup::before { left: 0; }
  .paper-board { min-height: 790px; }
  .setup-sheet { width: 70%; }
  .clicker-console { margin-top: 30px; }
  .thermal-map, .window-notes { margin-left: 0; }
  .debrief .transcript { padding-top: 10px; }
  .angle-diagram span { display: none; }
}

@media (max-width: 600px) {
  body { font-size: 12px; }
  .site-header { height: 64px; }
  :root { --header-h: 64px; }
  .team-mark { width: 172px; }
  .mark-plate { width: 58px; font-size: 44px; }
  .mark-copy { padding-left: 10px; font-size: 7px; }
  .corner-toggle { min-width: 104px; }
  .corner-nav { grid-template-columns: 1fr; }
  .hero { min-height: 830px; }
  .light-rail { top: 88px; left: 14%; width: 90%; height: 9px; }
  .hero-copy { top: 112px; left: 18px; width: 92%; }
  .session-code { font-size: 8px; }
  .hero h1 { font-size: clamp(94px, 31vw, 124px); line-height: .72; }
  .hero-deck { width: 245px; margin-top: 22px; font-size: 10px; }
  .lean-stage { inset: 29% -15% 14% -15%; }
  .bike-rig { width: 116vw; bottom: 6%; }
  .lean-readout { top: 7%; right: 18%; width: 100px; }
  .lean-readout strong { font-size: 36px; }
  .load-readout { right: 18%; bottom: 12%; }
  .wrist-cue { right: 18%; bottom: 3%; }
  .contact-wrap { left: calc(48% + var(--patch-shift, 0px)); bottom: 6%; }
  .hero-meta { left: 18px; bottom: 22px; right: 18px; gap: 0; }
  .hero-meta div { min-width: 0; flex: 1; padding: 8px; }
  .hero-meta b { font-size: 15px; }
  .section-index { top: 24px; right: 20px; }
  .run-plan, .setup, .clicker, .windows, .debrief { padding: 88px 18px; }
  .plan-heading h2, .setup-intro h2, .clicker-copy h2, .window-copy h2, .debrief h2 { font-size: 69px; }
  .lap-card { min-height: 150px; padding: 22px 18px; grid-template-columns: 52px 1fr; }
  .lap-card > span { font-size: 34px; }
  .lap-card b { font-size: 27px; }
  .lap-card em { grid-column: 2; grid-row: 3; justify-self: start; margin-top: 14px; }
  .pit-note { margin-right: 0; }
  .paper-board { min-height: 740px; padding: 45px 0 0; }
  .setup-sheet { width: 88%; min-height: 390px; padding: 26px 22px; }
  .setup-sheet header b { font-size: 44px; }
  .sheet-b { top: 330px; right: -5px; }
  .mechanic-tag { top: 42px; right: -8px; width: 125px; padding: 10px; transform: rotate(3deg); }
  .mechanic-tag b { font-size: 25px; }
  .tape { width: 90px; }
  .clicker-console { grid-template-columns: 1fr; }
  .dial-unit { min-height: 360px; }
  .consequence { grid-column: 1; grid-template-columns: 1fr; }
  .consequence > span, .exit-meter, .exit-stats { grid-column: 1; }
  .window-copy { display: block; margin-bottom: 45px; }
  .thermal-map { height: 330px; }
  .tire-lane { left: 5%; right: 5%; grid-template-columns: 62px 1fr 55px; gap: 8px; }
  .tire-lane.front { top: 72px; }
  .tire-lane.rear { top: 190px; }
  .tire-lane > span { font-size: 20px; }
  .tire-lane b { font-size: 24px; }
  .tire-lane small { grid-column: 2 / -1; }
  .operating-band { left: 54%; width: 25%; }
  .windows::before { left: -3px; top: 330px; font-size: 210px; opacity: .5; }
  .window-notes { grid-template-columns: 1fr; }
  .window-notes article { border-right: 0; border-bottom: 1px solid #414238; }
  .transcript article { grid-template-columns: 76px 1fr; gap: 8px 12px; }
  .transcript p { grid-column: 1 / -1; }
  .transcript .decision { display: block; }
  .transcript .decision b { display: block; margin: 8px 0; }
  .release { min-height: 650px; }
  .release-copy { padding: 40px 24px; }
  .release-copy h2 { font-size: 100px; }
  .release-copy > div { align-items: flex-start; flex-direction: column; gap: 5px; }
  .site-footer { padding: 42px 20px; grid-template-columns: 1fr; }
  .site-footer nav { justify-content: flex-start; flex-direction: column; gap: 0; }
  .site-footer > span { grid-column: 1; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .load-item { opacity: 1; transform: none; }
  .bike-rig { transform: translateX(-50%) rotate(0deg) !important; }
}

/* Pass 2 — the garage behaves like one live instrument. */
html { color-scheme: dark; scroll-padding-top: var(--header-h); }
body { min-height: 100%; background:
  radial-gradient(circle at 76% 8%, rgba(76,143,255,.055), transparent 24%),
  linear-gradient(90deg, #07090c, #0a0e12 52%, #07090c); }
body::after { content: ''; position: fixed; z-index: 48; inset: 0; pointer-events: none; opacity: .18; background: repeating-linear-gradient(180deg, transparent 0 3px, rgba(255,255,255,.018) 4px); mix-blend-mode: overlay; }
button, a, input { touch-action: manipulation; -webkit-tap-highlight-color: rgba(255,90,31,.22); }
h1, h2, .lap-card b, .guide-block h2 { text-wrap: balance; }
strong, time, output, .hero-meta, .thermal-rail { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }

.thermal-rail { position: fixed; z-index: 39; right: 11px; top: 50%; width: 42px; height: 270px; padding: 10px 7px; display: grid; grid-template-rows: auto 1fr auto auto; justify-items: center; gap: 9px; border: 1px solid rgba(237,242,233,.16); background: rgba(6,8,10,.82); backdrop-filter: blur(12px); transform: translateY(-50%); }
.thermal-rail > span { color: var(--muted); font-size: 6px; letter-spacing: .13em; writing-mode: vertical-rl; }
.thermal-track { position: relative; width: 4px; min-height: 90px; overflow: hidden; background: linear-gradient(#26313f, #2e2439, #3c231d, #3e3114); }
.thermal-track i { position: absolute; inset: auto 0 0; height: var(--thermal-progress, 6%); background: linear-gradient(to top, var(--amber), var(--orange), var(--violet), var(--cold)); box-shadow: 0 0 14px var(--thermal-color, var(--cold)); transition: height .75s cubic-bezier(.2,.85,.2,1), box-shadow .75s; }
.thermal-rail strong { color: var(--thermal-color, var(--cold)); font: 17px/1 var(--display); writing-mode: vertical-rl; transition: color .75s; }
.thermal-rail small { color: var(--fluoro); font-size: 6px; line-height: 1.2; letter-spacing: .08em; text-align: center; }

.site-header { box-shadow: 0 8px 28px rgba(0,0,0,.28); }
.corner-nav a { position: relative; }
.corner-nav a::after { content: attr(data-corner); position: absolute; top: calc(100% + 1px); right: 0; width: max-content; max-width: 150px; padding: 8px 10px; color: var(--asphalt); background: var(--zone); font: 700 7px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .18s, transform .18s; }
.corner-nav a:hover::after, .corner-nav a:focus-visible::after { opacity: 1; transform: none; }
.corner-nav a.is-active { color: var(--asphalt); background: var(--zone); }
.corner-nav a.is-active::before { content: ''; position: absolute; inset: auto 8px 6px; height: 2px; background: var(--asphalt); }

.hero { min-height: max(780px, 100svh); background:
  radial-gradient(ellipse at 73% 42%, rgba(45,63,82,.92), transparent 34%),
  radial-gradient(circle at 48% 88%, rgba(255,90,31,.045), transparent 25%),
  linear-gradient(112deg, #06080b 4%, #0d141b 47%, #070a0e 79%); }
.light-rail { box-shadow: 0 0 8px rgba(237,242,233,.9), 0 0 35px rgba(220,238,255,.35), 0 0 120px rgba(76,143,255,.18); }
.light-rail::before { content: 'BAY 46 / 6200K'; position: absolute; right: 0; top: -20px; color: rgba(237,242,233,.5); font: 6px var(--mono); letter-spacing: .15em; transform: skewX(25deg); }
.hero-copy { mix-blend-mode: normal; }
.hero h1 { filter: drop-shadow(0 15px 28px rgba(0,0,0,.22)); }
.hero h1 span { -webkit-text-stroke-color: rgba(237,242,233,.54); }
.hero-deck { max-width: 38ch; font-size: 13px; line-height: 1.8; }
.lean-stage { outline-offset: -8px; }
.lean-stage::before, .lean-stage::after { content: ''; position: absolute; z-index: 1; left: 23%; right: 6%; height: 1px; background: linear-gradient(90deg, transparent, rgba(76,143,255,.28), transparent); transform: rotate(-9deg); transform-origin: center; }
.lean-stage::before { top: 37%; }
.lean-stage::after { top: 47%; opacity: .55; }
.lean-envelope { position: absolute; z-index: 5; left: 47%; bottom: 7%; width: min(390px, 42vw); display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 9px; color: rgba(237,242,233,.5); font-size: 6px; letter-spacing: .1em; transform: translateX(-50%); }
.lean-envelope i { height: 5px; border-inline: 1px solid var(--cold); background: linear-gradient(90deg, var(--cold), var(--violet) 28%, transparent 50%, var(--orange) 72%, var(--amber)); opacity: .68; }
.lean-envelope b { color: var(--muted); font-size: 6px; font-weight: 400; }
.bike-rig { bottom: 1%; filter: drop-shadow(0 24px 18px rgba(0,0,0,.65)) drop-shadow(0 0 18px rgba(155,91,219,.07)); }
.bike-rig::before { content: ''; position: absolute; z-index: -1; left: 13%; right: 3%; top: 57%; height: 4px; background: linear-gradient(90deg, transparent, rgba(76,143,255,.5), rgba(255,90,31,.42), transparent); filter: blur(3px); opacity: calc(.18 + var(--lean-force, .25)); transform: skewX(-28deg); }
.contact-patch { border-width: 2px; background: rgba(255,90,31,.28); box-shadow: 0 0 8px rgba(255,90,31,.8), 0 0 34px rgba(255,90,31,.36); }
.lean-readout, .load-readout { box-shadow: 0 14px 36px rgba(0,0,0,.2); }
.lean-readout strong { font-size: 52px; }
.vector-cue { position: absolute; z-index: 5; left: 55%; bottom: 23%; margin: 0; color: rgba(237,242,233,.34); font-size: 6px; letter-spacing: .12em; transform: rotate(var(--lean)); transform-origin: left; }
.vector-cue i { display: inline-block; width: 90px; margin-left: 8px; border-top: 1px solid var(--orange); box-shadow: 0 0 9px rgba(255,90,31,.55); vertical-align: middle; }

.run-plan { grid-template-columns: .68fr 1.32fr; background:
  linear-gradient(90deg, transparent 0 49.85%, rgba(105,158,238,.035) 50%, transparent 50.15%),
  radial-gradient(circle at 82% 38%, rgba(76,143,255,.07), transparent 29%), #0b1118; }
.plan-heading > p:last-child, .setup-intro > p:last-child, .clicker-copy > p:last-child { font-size: 13px; }
.lap-stack { position: relative; display: grid; grid-template-columns: .84fr 1.16fr; gap: 18px; padding: 45px 0 0 30px; }
.lap-card { min-height: 148px; margin: 0; padding: 27px 30px; overflow: hidden; grid-template-columns: 64px 1fr auto; background: linear-gradient(105deg, rgba(18,28,38,.97), rgba(12,17,23,.94)); box-shadow: 0 18px 45px rgba(0,0,0,.3); clip-path: polygon(0 0, 96% 0, 100% 18%, 100% 100%, 3% 100%, 0 82%); transition: transform .28s cubic-bezier(.2,.8,.2,1), border-color .28s; }
.lap-card::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 54%, rgba(255,255,255,.035) 55%, transparent 56%); }
.lap-card:hover { z-index: 2; border-color: var(--zone); transform: rotate(0deg) translateY(-5px); }
.lap-card:nth-child(1) { grid-column: 1 / -1; width: 82%; justify-self: end; }
.lap-card:nth-child(2) { grid-column: 1 / -1; min-height: 178px; width: 94%; transform: rotate(.5deg) translateX(-2%); }
.lap-card:nth-child(3) { grid-column: 2; }
.lap-card:nth-child(4) { grid-column: 1; grid-row: 3; }
.lap-card:nth-child(4) { grid-template-columns: 52px 1fr; }
.lap-card:nth-child(4) b { font-size: 28px; }
.lap-card:nth-child(4) em { grid-column: 2; grid-row: 3; justify-self: start; margin-top: 11px; }
.lap-card.hot { background: linear-gradient(104deg, rgba(65,25,12,.62), rgba(19,25,32,.96) 55%); box-shadow: 0 22px 60px rgba(255,90,31,.08); }
.run-channel { position: absolute; left: calc(40.5% + 4vw); top: 160px; bottom: 155px; display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--zone); font-size: 6px; letter-spacing: .12em; writing-mode: vertical-rl; }
.run-channel i { width: 1px; flex: 1; background: linear-gradient(var(--zone), transparent); }

.paper-board { perspective: 1200px; }
.setup-sheet { background-image:
  linear-gradient(100deg, transparent 0 47%, rgba(0,0,0,.045) 48%, transparent 50%),
  repeating-linear-gradient(0deg, transparent 0 24px, rgba(40,48,43,.05) 25px); transition: transform .42s cubic-bezier(.2,.8,.2,1), box-shadow .42s; }
.paper-board:hover .sheet-a { transform: rotate(-4deg) translate3d(-8px,-8px,22px); box-shadow: 0 32px 65px rgba(0,0,0,.68); }
.paper-board:hover .sheet-b { transform: rotate(6deg) translate3d(10px,-4px,40px); box-shadow: 0 34px 70px rgba(0,0,0,.7); }
.setup-sheet::before { content: ''; position: absolute; z-index: 2; width: 15px; height: 15px; top: 20px; right: 24px; border-radius: 50%; background: #b9bdb5; box-shadow: inset 2px 3px 5px rgba(0,0,0,.35), 0 0 0 8px rgba(255,255,255,.12); }
.sheet-stamp { position: absolute; z-index: 3; left: 30px; bottom: 25px; padding: 6px 9px; border: 2px solid rgba(125,40,25,.58); color: rgba(125,40,25,.7); font-size: 8px; font-weight: 700; letter-spacing: .12em; transform: rotate(-4deg); }

.dial-unit { position: relative; overflow: hidden; background:
  linear-gradient(115deg, rgba(255,255,255,.055), transparent 23%),
  repeating-linear-gradient(90deg, transparent 0 34px, rgba(255,255,255,.017) 35px),
  linear-gradient(145deg, #20262b, #090c0f); }
.dial-unit::after { content: '16  ·  12  ·  08  ·  04  ·  00'; position: absolute; left: 30px; right: 30px; bottom: 74px; color: rgba(237,242,233,.27); font-size: 6px; letter-spacing: .12em; text-align: center; }
.dial { transition: transform .26s cubic-bezier(.2,.9,.2,1.15); }
.dial-unit input { height: 44px; margin: 0; padding: 0; appearance: none; background: transparent; }
.dial-unit input::-webkit-slider-runnable-track { height: 7px; border: 1px solid #72797b; border-radius: 0; background: linear-gradient(90deg, rgba(255,90,31,.9), #c4cac6); }
.dial-unit:nth-child(2) input::-webkit-slider-runnable-track { background: linear-gradient(90deg, rgba(155,91,219,.95), #d9ded9); }
.dial-unit input::-webkit-slider-thumb { width: 25px; height: 25px; margin-top: -10px; appearance: none; border: 3px solid #e6ebe4; border-radius: 50%; background: #11161a; box-shadow: 0 0 0 4px rgba(255,90,31,.35), 0 3px 10px #000; }
.dial-unit:nth-child(2) input::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(155,91,219,.35), 0 3px 10px #000; }
.dial-unit input::-moz-range-track { height: 7px; border: 1px solid #72797b; background: linear-gradient(90deg, rgba(255,90,31,.9), #c4cac6); }
.dial-unit input::-moz-range-thumb { width: 22px; height: 22px; border: 3px solid #e6ebe4; border-radius: 50%; background: #11161a; }
.consequence { position: relative; overflow: hidden; padding-right: 250px; }
.consequence::after { content: ''; position: absolute; right: -7%; top: -65%; width: 360px; height: 360px; border: 1px solid rgba(237,242,233,.08); border-radius: 50%; }
.exit-meter { height: 7px; }
.exit-meter i { transition: width .38s cubic-bezier(.2,.8,.2,1); }
.exit-vector { position: absolute; z-index: 2; right: 32px; bottom: 26px; width: 180px; height: 68px; border-bottom: 1px solid rgba(237,242,233,.26); }
.exit-vector i { position: absolute; left: 6px; bottom: 0; width: 140px; height: 54px; border-top: 3px solid var(--zone); border-radius: 70% 0 0; transform: rotate(var(--exit-angle, -4deg)); transform-origin: left bottom; transition: transform .38s cubic-bezier(.2,.8,.2,1); }
.exit-vector i::after { content: ''; position: absolute; right: -3px; top: -7px; border: 6px solid transparent; border-left-color: var(--zone); transform: rotate(18deg); }
.exit-vector span, .exit-vector b { position: absolute; bottom: -18px; color: var(--muted); font-size: 6px; letter-spacing: .1em; }
.exit-vector span { left: 0; }
.exit-vector b { right: 0; color: var(--fluoro); }
.consequence[data-state="critical"] { border-left-color: #ff3b1a; }
.consequence[data-state="critical"] .exit-meter i { background: linear-gradient(90deg, #7d2631, #ff3b1a); }

.windows { background:
  radial-gradient(circle at 78% 34%, rgba(255,117,30,.12), transparent 31%),
  linear-gradient(100deg, #0d100c, #191108 72%, #0f0d09); }
.window-copy h2 { width: 62%; max-width: none; font-size: clamp(68px, 7.3vw, 112px); }
.thermal-map { overflow: hidden; box-shadow: inset 0 0 80px rgba(0,0,0,.22); }
.lap-stamps { position: absolute; z-index: 3; top: 0; bottom: 0; left: 0; right: 0; display: grid; grid-template-columns: repeat(4,1fr); pointer-events: none; }
.lap-stamps span { padding: 13px; color: rgba(237,242,233,.18); font: 24px var(--display); border-right: 1px solid rgba(237,242,233,.06); text-align: right; }
.tire-lane > i { transform-origin: left; }
.windows.is-warm .tire-lane > i { animation: temp-build .8s cubic-bezier(.2,.8,.2,1) both; }
.windows.is-warm .tire-lane.rear > i { animation-delay: .16s; }
.window-notes article { position: relative; overflow: hidden; }
.window-notes article::after { content: ''; position: absolute; inset: auto 0 0; height: 2px; background: var(--amber); transform: scaleX(0); transform-origin: left; transition: transform .35s; }
.window-notes article:hover::after { transform: scaleX(1); }

.debrief { background:
  linear-gradient(90deg, transparent 49.85%, rgba(187,102,223,.035) 50%, transparent 50.15%),
  radial-gradient(circle at 20% 22%, rgba(121,55,164,.22), transparent 33%), #07090c; }
.transcript article { padding: 27px 0; }
.transcript article[data-speaker="RIDER"] { border-left: 2px solid rgba(187,102,223,.26); padding-left: 16px; }
.transcript article[data-speaker="DATA"] { border-left: 2px solid rgba(76,143,255,.3); padding-left: 16px; }
.debrief-summary { grid-column: 2; display: grid; grid-template-columns: auto 1fr 42px auto 1fr; gap: 14px; align-items: center; padding: 18px 20px; border: 1px solid rgba(187,102,223,.38); color: var(--muted); font-size: 7px; letter-spacing: .11em; }
.debrief-summary b { color: var(--fluoro); font: 22px var(--display); }
.debrief-summary i { height: 1px; background: var(--violet); }

.release { background:
  radial-gradient(ellipse at 72% 100%, rgba(159,244,90,.09), transparent 24%),
  linear-gradient(90deg, #080b0b, #0c0f0e 55%, #080b0b); }
.release-copy { box-shadow: 0 36px 100px rgba(0,0,0,.45); }
.release-copy ul { margin: 32px 0 0; padding: 16px 0 0; display: flex; gap: 28px; border-top: 1px solid rgba(237,242,233,.18); list-style: none; }
.release-copy li { position: relative; padding-left: 13px; color: var(--muted); font-size: 8px; text-transform: uppercase; }
.release-copy li::before { content: ''; position: absolute; left: 0; top: .45em; width: 5px; height: 5px; background: #9ff45a; box-shadow: 0 0 8px #9ff45a; }

.guide-code-badge { position: absolute; z-index: 3; top: 115px; right: 6vw; display: flex; gap: 10px; align-items: center; color: var(--muted); font-size: 7px; letter-spacing: .12em; }
.guide-code-badge i { width: 3px; height: 3px; border-radius: 50%; background: var(--orange); }
.guide-axis { position: absolute; z-index: 3; left: 7vw; bottom: 36px; display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 7px; letter-spacing: .12em; }
.guide-axis i { width: 70px; border-top: 1px solid rgba(237,242,233,.28); }
.guide-axis b { color: var(--orange); font-weight: 700; }
.guide-block { isolation: isolate; }
.guide-block::after { position: absolute; z-index: -1; right: 0; bottom: 22px; color: rgba(237,242,233,.018); font: 90px/.8 var(--display); text-transform: uppercase; }
.concept-block::after { content: 'CONCEPT / 02:13'; }
.technique-block::after { content: 'INPUT / SPRING / LOAD'; }
.thermal-block::after { content: '26°C → 96°C'; }
.type-block::after { content: 'TYPE / CLICKER / EXIT'; }
.reproduce-block::after { content: 'REPRODUCTION PROTOCOL'; }
.guide-block:nth-child(even) > div:last-child { transform: translateX(4vw); }
.material-ledger { max-width: 830px; margin-top: 32px; display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid #303840; }
.material-ledger span { padding: 18px; color: var(--orange); font: 22px var(--display); border-right: 1px solid #303840; }
.material-ledger span:last-child { border-right: 0; }
.material-ledger i { display: block; margin-top: 5px; color: var(--muted); font: 8px/1.5 var(--mono); }
.palette-row span { transition: min-height .25s, filter .25s; }
.palette-row span:hover { min-height: 135px; filter: brightness(1.15); }
.reproduce-block { clip-path: polygon(0 0, 97% 0, 100% 10%, 100% 100%, 2% 100%, 0 88%); }

@keyframes temp-build { from { transform: scaleX(.08); filter: brightness(.7); } to { transform: scaleX(1); filter: brightness(1); } }

@media (max-width: 1180px) {
  .thermal-rail { right: 6px; }
  .run-channel { display: none; }
  .consequence { padding-right: 220px; }
}

@media (max-width: 900px) {
  .corner-nav a::after { display: none; }
  .hero-deck { font-size: 12px; }
  .lap-stack { grid-template-columns: 1fr 1fr; padding-left: 0; }
  .lap-card:nth-child(1), .lap-card:nth-child(2) { width: 100%; }
  .debrief-summary { grid-column: 1; }
  .window-copy { gap: 28px; }
  .guide-block:nth-child(even) > div:last-child { transform: none; }
}

@media (max-width: 600px) {
  .thermal-rail { z-index: 35; top: auto; right: 8px; bottom: 12px; width: 168px; height: 34px; padding: 5px 8px; grid-template-columns: auto 1fr auto auto; grid-template-rows: 1fr; align-items: center; gap: 7px; transform: none; }
  .thermal-rail > span { font-size: 5px; writing-mode: horizontal-tb; }
  .thermal-track { width: auto; height: 3px; min-height: 0; justify-self: stretch; }
  .thermal-track i { width: var(--thermal-progress, 6%); height: 100%; inset: 0 auto 0 0; transition-property: width, box-shadow; }
  .thermal-rail strong { font-size: 15px; writing-mode: horizontal-tb; }
  .thermal-rail small { max-width: 42px; font-size: 5px; }
  .hero { min-height: 880px; }
  .hero-copy { top: 116px; }
  .hero h1 { font-size: clamp(96px, 31vw, 121px); }
  .hero-deck { width: 260px; font-size: 10.5px; }
  .lean-stage { top: 28%; }
  .lean-envelope { left: 50%; bottom: 2%; width: 57%; grid-template-columns: auto 1fr auto; }
  .lean-envelope b { display: none; }
  .bike-rig { width: 121vw; bottom: 7%; }
  .vector-cue { left: 45%; bottom: 23%; }
  .vector-cue i { width: 52px; }
  .lean-readout { right: 16%; }
  .load-readout { right: 16%; }
  .wrist-cue { right: 16%; bottom: 4%; }
  .contact-wrap { bottom: 8%; }
  .lap-stack { display: grid; grid-template-columns: 1fr; gap: 14px; padding-top: 28px; }
  .lap-card:nth-child(1), .lap-card:nth-child(2), .lap-card:nth-child(3), .lap-card:nth-child(4) { grid-column: 1; grid-row: auto; width: 100%; transform: none; }
  .lap-card:nth-child(4) { grid-template-columns: 52px 1fr; }
  .lap-card { clip-path: polygon(0 0, 95% 0, 100% 15%, 100% 100%, 3% 100%, 0 86%); }
  .paper-board:hover .sheet-a { transform: rotate(-3deg); }
  .paper-board:hover .sheet-b { transform: rotate(5deg); }
  .sheet-stamp { left: 22px; bottom: 20px; font-size: 6px; }
  .dial-unit::after { bottom: 70px; }
  .consequence { padding-right: 24px; padding-bottom: 120px; }
  .exit-vector { left: 24px; right: 24px; bottom: 28px; width: auto; }
  .window-copy { display: block; }
  .window-copy h2 { width: 100%; max-width: none; font-size: 69px; }
  .lap-stamps span { font-size: 17px; padding: 8px; }
  .debrief-summary { grid-template-columns: auto 1fr; }
  .debrief-summary i { display: none; }
  .release-copy ul { flex-direction: column; gap: 10px; }
  .guide-code-badge { top: 82px; right: 18px; font-size: 5px; }
  .guide-axis { display: none; }
  .material-ledger { grid-template-columns: 1fr; }
  .material-ledger span { border-right: 0; border-bottom: 1px solid #303840; }
  .material-ledger span:last-child { border-bottom: 0; }
  .guide-block::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .windows.is-warm .tire-lane > i { animation: none; }
  .thermal-track i, .dial, .exit-vector i { transition: none; }
  .corner-nav a::after { display: none; }
}

/* Pass 3 — edge capture, optical finish and inspection-grade tactility. */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--orange) #0b0e12;
}
html::-webkit-scrollbar { width: 11px; }
html::-webkit-scrollbar-track { background: #0b0e12; border-left: 1px solid #252c31; }
html::-webkit-scrollbar-thumb { border: 3px solid #0b0e12; background: linear-gradient(var(--cold), var(--violet) 35%, var(--orange) 72%, var(--amber)); }
body { font-kerning: normal; text-rendering: optimizeLegibility; }
p { text-wrap: pretty; }
.session-code, .eyebrow, .section-index, .mark-copy, .header-status, .thermal-rail, .wrist-cue, .guide-kicker, .guide-code-badge { font-variant-numeric: tabular-nums slashed-zero; }
.team-mark, .guide-return, .scroll-key, .site-footer a, .transcript-toggle { transition: color .24s ease, background-color .24s ease, border-color .24s ease, box-shadow .24s ease, transform .24s cubic-bezier(.2,.8,.2,1); }
.team-mark:hover .mark-copy, .team-mark:focus-visible .mark-copy { color: var(--fluoro); }
.team-mark:hover .mark-plate, .team-mark:focus-visible .mark-plate { box-shadow: 14px 0 36px rgba(255,90,31,.18); }
.corner-toggle:hover, .corner-toggle:focus-visible { background: rgba(76,143,255,.1); }
.scroll-key:hover, .scroll-key:focus-visible { color: var(--fluoro); transform: translateY(5px); }
.scroll-key:hover i, .scroll-key:focus-visible i { box-shadow: 0 0 12px var(--orange); }
.transcript-toggle:hover, .transcript-toggle:focus-visible { border-color: var(--violet); background: rgba(155,91,219,.1); box-shadow: inset 0 0 24px rgba(155,91,219,.06); }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--orange); text-decoration-thickness: 2px; }
.guide-return:hover, .guide-return:focus-visible { background: rgba(255,90,31,.08); }
.guide-return:hover b, .guide-return:focus-visible b { transform: translateX(-4px); }
.guide-return b { transition: transform .24s cubic-bezier(.2,.8,.2,1); }
.dial-unit input:focus-visible { outline: 2px solid var(--fluoro); outline-offset: 4px; }
.site-footer > span { color: #7f8988; }

.lean-stage { isolation: isolate; }
.edge-gate { position: absolute; z-index: 6; left: calc(54% + 88px); bottom: calc(12% + 70px); width: 92px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 5px; color: rgba(237,242,233,.42); font-size: 6px; letter-spacing: .11em; transform: rotate(-8deg); transition: color .25s, filter .25s; }
.edge-gate span { color: var(--orange); font-weight: 700; }
.edge-gate i { height: 1px; background: currentColor; }
.edge-gate b { grid-column: 1 / -1; font-size: 6px; font-weight: 400; text-align: right; }
.edge-flare { position: absolute; z-index: 3; left: calc(59% + var(--patch-shift, 0px)); bottom: 1%; width: 250px; height: 250px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(255,178,28,.36) 0 2%, rgba(255,90,31,.18) 8%, rgba(155,91,219,.12) 25%, transparent 67%); mix-blend-mode: screen; opacity: 0; transform: translate(-50%, 42%) scale(.35); transition: left .06s linear, opacity .18s, transform .7s cubic-bezier(.12,.75,.18,1); }
.edge-capture { position: absolute; z-index: 9; left: 7%; bottom: 18%; width: 226px; padding: 16px 18px 14px; overflow: hidden; border: 1px solid var(--orange); border-left-width: 5px; background: rgba(7,9,12,.9); box-shadow: 0 18px 55px rgba(0,0,0,.48), inset 0 0 28px rgba(255,90,31,.06); opacity: 0; clip-path: polygon(0 0, 90% 0, 100% 18%, 100% 100%, 0 100%); transform: translateX(-22px) skewX(-3deg); pointer-events: none; }
.edge-capture::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 46%, rgba(237,242,233,.08) 47%, transparent 49%); }
.edge-capture p { margin: 0 0 6px; color: var(--orange); font-size: 6px; font-weight: 700; letter-spacing: .18em; }
.edge-capture > strong { display: block; font: 42px/.78 var(--display); letter-spacing: .015em; }
.edge-capture > div { margin-top: 13px; padding-top: 9px; display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 8px; border-top: 1px solid rgba(237,242,233,.2); }
.edge-capture span, .edge-capture i { color: var(--muted); font-size: 6px; font-style: normal; letter-spacing: .12em; }
.edge-capture b { color: var(--fluoro); font: 22px/1 var(--display); }
.lean-stage.at-edge .edge-gate { color: var(--orange); filter: drop-shadow(0 0 5px rgba(255,90,31,.7)); }
.lean-stage.edge-locked .edge-flare { opacity: 1; transform: translate(-50%, 42%) scale(1.45); }
.lean-stage.edge-locked .edge-capture { animation: edge-stamp 1.9s cubic-bezier(.16,.82,.18,1) both; }
.lean-stage.edge-locked .contact-patch { animation: patch-hit .56s cubic-bezier(.15,.8,.2,1) both; }
.lean-stage.edge-locked .bike-rig { animation: edge-settle .55s cubic-bezier(.15,.85,.2,1) both; }

.debrief::before { content: 'REC  ·  46-B  ·  02:41:08'; position: absolute; z-index: -1; inset: 14% 0 auto 0; height: 118px; padding: 12px 6vw; color: rgba(237,242,233,.16); font-size: 6px; letter-spacing: .18em; background: repeating-linear-gradient(90deg, transparent 0 12px, rgba(187,102,223,.09) 13px, transparent 14px 24px); border-block: 1px solid rgba(187,102,223,.09); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.transcript article { transition-timing-function: cubic-bezier(.2,.8,.2,1); }
.transcript article:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--zone) 8%, transparent), transparent 72%); }
.release-copy { border-top: 1px solid rgba(237,242,233,.13); }
.release-copy::after { content: 'BAY DOOR / INTERLOCK CLEAR'; position: absolute; top: 16px; right: 18px; color: rgba(237,242,233,.35); font-size: 6px; letter-spacing: .16em; }

.guide-hero h1, .hero h1, .release-copy h2 { letter-spacing: -.032em; }
.guide-block h2, .plan-heading h2, .setup-intro h2, .clicker-copy h2, .window-copy h2, .debrief h2 { letter-spacing: -.018em; }
.guide-block p { max-width: 76ch; }
.guide-lead p { max-width: 32ch; }

@keyframes edge-stamp {
  0% { opacity: 0; transform: translateX(-22px) skewX(-3deg); }
  14%, 76% { opacity: 1; transform: translateX(0) skewX(-3deg); }
  100% { opacity: 0; transform: translateX(10px) skewX(-3deg); }
}
@keyframes patch-hit {
  0% { filter: brightness(1); }
  28% { filter: brightness(2.5); box-shadow: 0 0 8px var(--amber), 0 0 55px var(--orange); }
  100% { filter: brightness(1); }
}
@keyframes edge-settle {
  0%, 100% { transform: translateX(-50%) rotate(var(--lean)); }
  38% { transform: translateX(-50%) rotate(var(--lean)) scale(1.012); }
}

@media (max-width: 900px) {
  .edge-capture { left: 8%; bottom: 20%; width: 205px; }
  .edge-gate { left: calc(54% + 76px); }
}

@media (max-width: 600px) {
  .edge-capture { left: 16%; bottom: 22%; width: 190px; padding: 13px 15px 12px; }
  .edge-capture > strong { font-size: 36px; }
  .edge-gate { left: calc(54% + 61px); bottom: calc(12% + 64px); width: 74px; }
  .debrief::before { top: 8%; }
}

@media (prefers-reduced-motion: reduce) {
  .lean-stage.edge-locked .edge-capture { animation: none; opacity: 1; transform: none; }
  .lean-stage.edge-locked .edge-flare { opacity: .5; transform: translate(-50%, 42%) scale(.8); }
  .lean-stage.edge-locked .contact-patch, .lean-stage.edge-locked .bike-rig { animation: none; }
  html { scroll-behavior: auto; }
}