@font-face{font-family:"Archivo";font-style:italic;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(/fonts/archivo-italic.woff2) format("woff2");}@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(/fonts/archivo.woff2) format("woff2");}@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:100 800;font-display:swap;src:url(/fonts/jetbrains-mono.woff2) format("woff2");}/* PURELAP. Layout concept: the page is a lap. A fixed 3D world flies along the driven line behind
   everything; sections are the sectors of that lap and float over it. Every colour comes from the
   tokens below, which app.js fills per section from the chosen world. */
:root {
  --bg: #07060b; --fg: #f5f3fa; --muted: #a19cb4; --rule: #2a2838; --panel: #0f0e16;
  --accent: #e040fb; --on-accent: #0b0210; --best: #e040fb; --on-best: #0b0210; --good: #2fe08a;
  --display: "Archivo", "Arial Black", Arial, sans-serif; --body: "Archivo", Arial, sans-serif; --mono: "JetBrains Mono", Consolas, monospace;
  --d-wght: 800; --d-wdth: 125%; --d-style: italic; --d-track: -.02em; --d-case: uppercase; --d-scale: 1; --b-wdth: 100%;
  --gut: clamp(18px, 3.2vw, 56px);
  --ang: 12deg;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; scroll-padding-top: 0; overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--body); font-stretch: var(--b-wdth); font-size: clamp(16px, 1.08vw + 11px, 20px); line-height: 1.5; overflow-x: clip; }
a { color: inherit; }
img, svg, canvas { max-width: 100%; }
#world { position: fixed; left: 0; top: 0; width: 100vw; height: 100lvh; z-index: 0; display: block; }
#labels { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
html[data-mobile] #grain { display: none; }
#lvh { position: fixed; left: -9px; top: 0; width: 1px; height: 100lvh; visibility: hidden; pointer-events: none; }
#grain { position: fixed; inset: -10%; z-index: 3; pointer-events: none; opacity: var(--grain, 0); mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"); }
#vignette { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: var(--vig, 0); background: radial-gradient(ellipse at 50% 46%, transparent 42%, rgba(0,0,0,.72) 100%); }
#flood { position: fixed; inset: 0; z-index: 4; pointer-events: none; background: var(--best); opacity: 0; }
#flood.go { animation: floodhit 1.5s cubic-bezier(.2,.7,.2,1) 1; }
@keyframes floodhit { 0% { opacity: 0; } 8% { opacity: 1; } 34% { opacity: 1; } 100% { opacity: 0; } }
main { position: relative; z-index: 2; }
html[data-nogl] .sec { background: var(--bg); margin-top: 0; }

/* ---------- type */
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
.wordmark, h2, .tease-big, .finish-time, .stat, .price b, .sec-no, .bar-mark {
  font-family: var(--display); font-weight: var(--d-wght); font-style: var(--d-style); font-stretch: var(--d-wdth); letter-spacing: var(--d-track);
}
h2, .tease-big { text-transform: var(--d-case); line-height: .94; text-wrap: balance; font-size: calc(clamp(36px, 7.4vw, 136px) * var(--d-scale)); overflow-wrap: break-word; }
html[data-size="xl"] h2, html[data-size="xl"] .tease-big { font-size: calc(clamp(48px, 9.4vw, 176px) * var(--d-scale)); }
html[data-size="m"] h2, html[data-size="m"] .tease-big { font-size: calc(clamp(34px, 5.2vw, 92px) * var(--d-scale)); }
.lead { font-size: clamp(18px, 1.5vw + 8px, 28px); line-height: 1.34; max-width: 34em; text-wrap: pretty; }
.mono, .eyebrow, .sec-head, .bar-nav, .when, .cue, .hud, figcaption, .fine, .spec dt, .label3d { font-family: var(--mono); }

/* ---------- top bar */
.bar { position: fixed; z-index: 6; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 22px; padding-block: max(14px, env(safe-area-inset-top, 0px)) 14px; padding-left: max(var(--gut), env(safe-area-inset-left, 0px)); padding-right: max(var(--gut), env(safe-area-inset-right, 0px)); pointer-events: none; color: var(--uifg, var(--fg)); transition: color .4s; }
.bar > * { pointer-events: auto; }
.bar::before { content: ""; position: absolute; inset: 0 0 -26px; z-index: -1; pointer-events: none; background: linear-gradient(var(--wbg, transparent) 34%, transparent); }
.bar-mark { font-size: 19px; text-decoration: none; text-transform: uppercase; }
.bar-nav { display: flex; gap: 16px; font-size: 12.5px; letter-spacing: .02em; margin-left: 10px; }
.bar-nav a { text-decoration: none; opacity: .68; }
.bar-nav a:hover, .bar-nav a:focus-visible { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.bar-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.lang { display: flex; gap: 8px; font-family: var(--mono); font-size: 12.5px; }
.lang a { text-decoration: none; opacity: .6; }
.lang a[aria-current] { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
html[data-konfig] .bar-right { margin-right: min(372px, 0px); }
@media (max-width: 1040px) { .bar-nav { display: none; } }
@media (max-width: 560px) { .lang { display: none; } }

.btn { display: inline-block; font-family: var(--display); font-weight: var(--d-wght); font-stretch: var(--d-wdth); font-style: var(--d-style); text-transform: var(--d-case); letter-spacing: var(--d-track);
  background: var(--accent); color: var(--on-accent); text-decoration: none; border: 0; cursor: pointer; padding: .82em 1.7em; font-size: clamp(15px, 1.2vw + 5px, 21px); line-height: 1;
  clip-path: polygon(.62em 0, 100% 0, calc(100% - .62em) 100%, 0 100%); transition: filter .15s, transform .15s; }
.btn:hover { filter: brightness(1.14); transform: translateX(3px); }
.btn:focus-visible { outline: 3px solid var(--fg); outline-offset: 3px; }
.btn-s { font-size: 13px; padding: .72em 1.4em; }
.bar .btn { background: var(--uiacc, var(--accent)); color: var(--uionacc, var(--on-accent)); }

/* ---------- hud: the lap of this page */
.hud { position: fixed; z-index: 6; left: calc(var(--gut) - 8px); bottom: max(10px, env(safe-area-inset-bottom)); padding: 5px 9px; color: var(--uifg, var(--fg)); font-size: 12.5px; line-height: 1.35; pointer-events: none; transition: color .4s; font-variant-numeric: tabular-nums; background: color-mix(in srgb, var(--wbg, transparent) 80%, transparent); }
.hud-row { display: flex; gap: 12px; align-items: baseline; }
.hud-k { text-transform: uppercase; letter-spacing: .08em; opacity: .7; }
.hud-t { font-weight: 700; font-size: 15px; }
.hud-sub { opacity: .62; text-transform: uppercase; letter-spacing: .05em; }
.hud-flash { position: absolute; left: 0; bottom: calc(100% + 8px); white-space: nowrap; background: var(--best); color: var(--on-best); padding: .3em .7em; font-weight: 700; font-size: 14px; opacity: 0; transform: translateX(-8px); }
.hud-flash.show { animation: hudflash 2.6s ease-out 1; }
@keyframes hudflash { 0% { opacity: 0; transform: translateX(-8px); } 6% { opacity: 1; transform: none; } 80% { opacity: 1; transform: none; } 100% { opacity: 0; } }
html[data-hud="big"] .hud-t { font-size: clamp(24px, 3vw, 44px); font-family: var(--display); font-style: var(--d-style); font-stretch: var(--d-wdth); font-weight: var(--d-wght); }
html[data-hud="off"] .hud { display: none; }
.wrong .hud-k { color: var(--best); opacity: 1; }

/* ---------- corner names in the world */
.label3d { position: absolute; left: 0; top: 0; font-size: 12px; line-height: 1; white-space: nowrap; color: var(--uifg, var(--fg)); text-transform: uppercase; letter-spacing: .1em; will-change: transform, opacity; opacity: 0; display: none; }
.label3d::before { content: ""; position: absolute; left: 0; bottom: 100%; width: 1px; height: var(--stem, 46px); background: currentColor; opacity: .55; transform-origin: bottom; }
.label3d b { position: absolute; left: 0; bottom: calc(100% + var(--stem, 46px)); padding: 0 0 4px 0; font-weight: 500; }
html[data-labels="0"] #labels { display: none; }

/* ---------- viewfinder while Overlay is on screen */
#viewfinder { position: fixed; inset: clamp(46px, 7vh, 80px) clamp(14px, 3vw, 44px); z-index: 2; pointer-events: none; opacity: 0; transition: opacity .5s; color: var(--uifg, #fff); font-family: var(--mono); font-size: 13px; }
#viewfinder.on { opacity: .9; }
#viewfinder i { position: absolute; width: 34px; height: 34px; border: 2px solid currentColor; }
#viewfinder i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; }
#viewfinder i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; }
#viewfinder i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; }
#viewfinder i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; }
#viewfinder b { position: absolute; right: 48px; top: 8px; font-weight: 700; color: var(--best); }
#viewfinder b::before { content: ""; display: inline-block; width: .7em; height: .7em; border-radius: 50%; background: var(--best); margin-right: .45em; animation: rec 1.2s steps(2) infinite; }
@keyframes rec { 50% { opacity: .15; } }
#vf-tc { position: absolute; left: 48px; top: 8px; font-variant-numeric: tabular-nums; }
html[data-mobile] #viewfinder { display: none; }

/* ---------- sections */
.sec { position: relative; padding-block: clamp(84px, 13vh, 150px); padding-left: max(var(--gut), env(safe-area-inset-left, 0px)); padding-right: max(var(--gut), env(safe-area-inset-right, 0px)); color: var(--fg); }
.sec + .sec { margin-top: var(--gap, 72vh); }

.hero { min-height: 100svh; display: flex; flex-direction: column; padding-block: clamp(58px, 9vh, 90px) clamp(70px, 10vh, 96px); }
.hero-h { display: block; font-weight: inherit; }
.eyebrow { display: block; font-size: clamp(12px, .9vw + 4px, 15px); letter-spacing: .14em; text-transform: uppercase; margin-bottom: .55em; }
.wordmark { display: block; white-space: nowrap; line-height: .86; text-transform: uppercase; font-size: 16vw; transform-origin: left top; }
html[data-wm="small"] .wordmark { max-width: 62%; }
.tagline { display: block; margin-top: .3em; font-family: var(--body); font-weight: 500; font-stretch: var(--b-wdth); font-size: clamp(22px, 3.2vw, 56px); letter-spacing: -.012em; line-height: 1.1; }
.hero-foot { margin-top: auto; display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: flex-end; justify-content: space-between; padding-right: clamp(0px, 10vw, 180px); }
.hero-foot .lead { max-width: 21em; }
.cta-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.when { font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }
.cue { position: absolute; right: var(--gut); bottom: clamp(16px, 3vh, 30px); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; display: flex; gap: 10px; align-items: center; opacity: .8; }
.cue i { display: block; width: 1px; height: 44px; background: linear-gradient(currentColor 50%, transparent 50%); background-size: 1px 12px; animation: cue 1s linear infinite; }
@keyframes cue { to { background-position: 0 12px; } }

.tease { min-height: 92svh; display: flex; flex-direction: column; justify-content: center; gap: 28px; }
.tease-big { max-width: 15em; }
.tease-small { max-width: 38em; font-size: clamp(16px, 1.1vw + 8px, 22px); }

.sec-head { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; margin-bottom: clamp(14px, 2.2vh, 26px); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.sec-no { font-size: clamp(30px, 3.4vw, 60px); line-height: 1; color: var(--best); letter-spacing: -.02em; }
.sec-name { font-weight: 600; }
.sec-km { opacity: .62; }

.sector, .wall-sec, .prices { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: clamp(20px, 3.4vh, 36px); }
.sector > *, .prices > * { position: relative; z-index: 1; }
.sector.right { justify-items: end; text-align: left; }
.sector.right > * { width: min(100%, 1040px); max-width: none; }
/* a percentage here is of the whole section, not of this 1040 px column: without the min() a wide window leaves the text one word per line */
.sector.right > .lead { padding-right: max(0px, calc(min(100%, 1040px) - 35em)); }
.sector.left > * { max-width: min(100%, 1040px); }

/* the veil keeps text readable over the world. It is part of the section's own colour */
.sector::before, .wall-sec::before, .prices::before { content: ""; position: absolute; inset: -12vh 0; pointer-events: none; z-index: 0; opacity: var(--veil, .86);
  -webkit-mask-image: linear-gradient(transparent, #000 16vh, #000 calc(100% - 16vh), transparent); mask-image: linear-gradient(transparent, #000 16vh, #000 calc(100% - 16vh), transparent); }
.sector.left::before { background: linear-gradient(90deg, var(--bg) 0, color-mix(in srgb, var(--bg) 82%, transparent) 46%, transparent 74%); }
.sector.right::before { background: linear-gradient(270deg, var(--bg) 0, color-mix(in srgb, var(--bg) 82%, transparent) 46%, transparent 74%); }
.wall-sec::before, .prices::before { background: color-mix(in srgb, var(--bg) 76%, transparent); }
.wall-sec > *, .prices > * { position: relative; z-index: 1; }
html[data-panels="solid"] .sector::before, html[data-panels="solid"] .wall-sec::before, html[data-panels="solid"] .prices::before { display: none; }
html[data-panels="solid"] .feats, html[data-panels="solid"] .sector .lead, html[data-panels="solid"] .rules, html[data-panels="solid"] .spec, html[data-panels="solid"] .pic, html[data-panels="solid"] .wall { background: var(--panel); padding: clamp(14px, 2vw, 28px); }
html[data-panels="glass"] .sector::before, html[data-panels="glass"] .wall-sec::before, html[data-panels="glass"] .prices::before { display: none; }
html[data-panels="glass"] .feats, html[data-panels="glass"] .sector .lead, html[data-panels="glass"] .rules, html[data-panels="glass"] .spec, html[data-panels="glass"] .pic, html[data-panels="glass"] .wall { background: color-mix(in srgb, var(--bg) 52%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); padding: clamp(14px, 2vw, 28px); }

/* ---------- features: three ways to set the same list */
.feats { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); }
.feat { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); column-gap: 22px; padding: 14px 0; border-top: 1px solid var(--rule); align-items: baseline; }
.feat:last-child { border-bottom: 1px solid var(--rule); }
.stat { font-size: clamp(26px, 2.5vw + 6px, 44px); line-height: 1; color: var(--stat, var(--accent)); grid-row: span 2; white-space: nowrap; }
.feat h3 { font-size: 1.02em; font-weight: 700; line-height: 1.2; }
.feat p { color: var(--muted); font-size: .94em; line-height: 1.42; margin-top: 2px; }
html[data-list="tiles"] .feats { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 12px; }
html[data-list="tiles"] .feat { display: block; border: 1px solid var(--rule); background: color-mix(in srgb, var(--panel) 72%, transparent); padding: 18px; }
html[data-list="tiles"] .stat { display: block; margin-bottom: 12px; }
html[data-list="big"] .feats { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 30px 34px; }
html[data-list="big"] .feat { display: block; border: 0; padding: 0; }
html[data-list="big"] .stat { display: block; font-size: clamp(44px, 5.6vw, 96px); margin-bottom: 8px; white-space: normal; }
@media (max-width: 560px) { .feat { grid-template-columns: minmax(0, 1fr); } .stat { grid-row: auto; margin-bottom: 6px; } }

.rules h3, .spec h3 { font-family: var(--mono); font-weight: 500; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 10px; color: var(--muted); }
.rules ol { list-style: none; counter-reset: r; }
.rules li { counter-increment: r; display: grid; grid-template-columns: 2.4em minmax(0, 1fr); padding: 8px 0; border-top: 1px solid var(--rule); font-weight: 500; }
.rules li::before { content: counter(r); font-family: var(--mono); color: var(--best); }
.abo { font-family: var(--display); font-style: var(--d-style); font-weight: var(--d-wght); font-stretch: var(--d-wdth); text-transform: var(--d-case); font-size: clamp(22px, 2.6vw, 44px); line-height: 1.02; color: var(--accent); }

/* ---------- the redacted spec sheet */
.spec dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); font-family: var(--mono); font-size: 14px; }
.spec dt, .spec dd { padding: 8px 0; border-top: 1px solid var(--rule); }
.spec dt { color: var(--muted); }
.spec dd { font-weight: 600; font-variant-numeric: tabular-nums; }
.redact { display: inline-block; height: 1em; width: var(--w, 8em); max-width: 100%; vertical-align: -.12em; background: var(--fg); position: relative; overflow: hidden; }
.redact::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, var(--best) 50%, transparent 70%); background-size: 300% 100%; animation: redact 4.2s linear infinite; }
@keyframes redact { from { background-position: 120% 0; } to { background-position: -120% 0; } }

/* ---------- data pictures */
.pic { position: relative; }
.pic figcaption { font-size: 12px; letter-spacing: .03em; color: var(--muted); margin-top: 8px; }
.pic canvas { display: block; width: 100%; }
.pic-speed canvas { height: clamp(110px, 16vh, 170px); }
.pic-scope canvas { height: clamp(150px, 24vh, 240px); }
.pic-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 22px; max-width: 760px; }
.pic-gg canvas { aspect-ratio: 1; height: auto; }
.pic-corner svg { display: block; width: 100%; height: auto; aspect-ratio: 1; }
.legend { display: inline-flex; gap: 6px; align-items: center; margin-left: 8px; flex-wrap: wrap; }
.legend i { display: inline-block; width: 14px; height: 3px; margin-left: 6px; }
.legend .la { background: var(--best); }
.legend .lb { background: var(--fg); }
html[data-data="0"] [data-mod="data"] { display: none; }

/* ---------- the wall of circuits */
.wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(58px, 6.4vw, 96px), 1fr)); gap: clamp(6px, 1vw, 16px); }
.wall svg { display: block; width: 100%; height: auto; aspect-ratio: 1; overflow: visible; }
.wall a { display: block; color: inherit; cursor: default; }
.wall.live a { cursor: pointer; transition: transform .18s ease, color .18s ease; }
.wall.live a:hover, .wall.live a:focus-visible { transform: scale(1.22); color: var(--best); outline: 0; }
/* ---------- one circuit, standing up */
.cz { position: fixed; inset: 0; z-index: 60; display: none; background: var(--wbg, var(--bg)); animation: cz-in .4s ease both; overscroll-behavior: contain; color: var(--fg); outline: 0; }
@keyframes cz-in { from { background: transparent; } }
.cz canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.cz canvas:active { cursor: grabbing; }
.cz-ui { position: absolute; inset: 0; pointer-events: none; opacity: 0; padding: clamp(16px, 2.4vw, 44px); display: flex; flex-direction: column; justify-content: space-between; }
.cz-ui button, .cz-ui a { pointer-events: auto; }
.cz-c { font-family: var(--mono); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.cz-n { font-size: clamp(30px, 4.4vw, 76px); line-height: .98; max-width: 62vw; margin: 6px 0 clamp(12px, 2vh, 22px); text-shadow: 0 0 18px var(--bg); }
.cz-s { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px clamp(18px, 2.4vw, 38px); }
.cz-s b { display: block; font-family: var(--display); font-style: var(--d-style); font-stretch: var(--d-wdth); font-weight: var(--d-wght); font-size: clamp(22px, 2.4vw, 38px); line-height: 1.05; color: var(--best); }
.cz-s span { font-family: var(--mono); font-size: 11.5px; letter-spacing: .05em; color: var(--muted); }
.cz-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: clamp(10px, 1.6vh, 18px); max-width: min(58vw, 760px); }
.cz-chips button, .cz-b { font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em; color: var(--fg); background: color-mix(in srgb, var(--bg) 70%, transparent); border: 1px solid var(--rule); padding: 7px 11px; cursor: pointer; }
.cz-chips button:hover, .cz-b:hover { border-color: var(--fg); }
.cz-chips button[aria-pressed="true"], .cz-b[aria-pressed="true"] { background: var(--best); border-color: var(--best); color: var(--on-best); }
.cz-x { position: absolute; top: clamp(12px, 2vw, 30px); right: clamp(12px, 2vw, 30px); width: 46px; height: 46px; font-size: 28px; line-height: 1; color: var(--fg); background: color-mix(in srgb, var(--bg) 70%, transparent); border: 1px solid var(--rule); cursor: pointer; }
.cz-x:hover { border-color: var(--fg); }
.cz-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.cz-h, .cz-note { font-family: var(--mono); font-size: 11.5px; line-height: 1.5; color: var(--muted); text-shadow: 0 0 6px var(--bg); }
.cz :focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
@media (max-width: 720px) { .cz-n { max-width: 80vw; } .cz-chips { max-width: none; } .cz-h { display: none; } }
.wall path { fill: none; stroke: currentColor; stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke .2s; }
html[data-anim] .wall:not(.seen) path { stroke-dashoffset: 1; }
.wall.seen path { animation: draw 1.5s cubic-bezier(.3,.6,.2,1) both; animation-delay: var(--d, 0s); }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.wall a:hover path, .wall a.hot path { stroke: var(--best); stroke-width: 2.4; }
.wall-tip { font-family: var(--mono); font-size: 14px; min-height: 1.6em; letter-spacing: .03em; text-transform: uppercase; }
html[data-wall="off"] #strecken { display: none; }
html[data-wall="names"] .wall { display: block; line-height: 1.02; font-family: var(--display); font-style: var(--d-style); font-weight: var(--d-wght); font-stretch: var(--d-wdth); text-transform: var(--d-case); font-size: clamp(20px, 3vw, 54px); letter-spacing: var(--d-track); }
html[data-wall="names"] .wall a { display: inline; }
html[data-wall="names"] .wall a::after { content: " / "; color: var(--best); }
html[data-wall="names"] .wall svg { display: none; }
.wall .nm { display: none; }
html[data-wall="names"] .wall .nm { display: inline; }

/* ---------- prices */
.price-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(20px, 3vw, 50px); }
.price { border-top: 3px solid var(--fg); padding-top: 12px; }
.price span { display: block; font-weight: 600; }
.price b { display: block; font-size: calc(clamp(36px, 5.3vw, 100px) * var(--d-scale)); line-height: 1.08; color: var(--stat, var(--accent)); white-space: nowrap; }
.price em { font-family: var(--mono); font-style: normal; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
.fine { font-size: 12.5px; color: var(--muted); max-width: 60em; }
.partner { font-size: clamp(18px, 1.3vw + 8px, 26px); line-height: 1.3; max-width: 40em; }
.partner span { font-family: var(--mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 4px; }
.partner a { font-weight: 600; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.swiss { font-family: var(--mono); font-size: 14px; letter-spacing: .04em; }
html[data-claim-prices="0"] [data-claim="prices"], html[data-claim-scheider="0"] [data-claim="scheider"], html[data-claim-swiss="0"] [data-claim="swiss"] { display: none; }
html[data-claim-abo="0"] .abo { display: none; }
html[data-claim-cams="0"] .c-cams, html[data-claim-cams="1"] .c-nocams { display: none; }
html[data-claim-nords="0"] .c-nords, html[data-claim-nords="1"] .c-plain { display: none; }

/* ---------- finish */
.finish { min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; row-gap: clamp(30px, 6vh, 70px); padding-bottom: 74px; }
.finish-form, .foot { position: relative; }
.finish-form::before, .foot::before { content: ""; position: absolute; inset: -70px -40px; z-index: -1; pointer-events: none; background: linear-gradient(90deg, var(--bg) 60%, transparent); opacity: .82; -webkit-mask-image: linear-gradient(transparent, #000 70px, #000 calc(100% - 70px), transparent); mask-image: linear-gradient(transparent, #000 70px, #000 calc(100% - 70px), transparent); }
.finish .finish-sub, .finish .finish-pb { text-shadow: 0 0 14px var(--bg), 0 0 3px var(--bg); }
html[data-mobile] .finish-form::before, html[data-mobile] .foot::before { background: var(--bg); inset: -14px calc(var(--gut) * -1); }
.finish-top { min-height: 72svh; display: flex; flex-direction: column; justify-content: center; }
.finish-k { font-family: var(--mono); letter-spacing: .3em; text-transform: uppercase; font-size: 15px; }
.finish-pb { font-weight: 700; font-size: clamp(20px, 2.4vw, 40px); margin-top: 6px; line-height: 1.15; max-width: 26em; }
.finish-time { font-size: clamp(64px, 17.4vw, 330px); line-height: .92; font-variant-numeric: tabular-nums; white-space: nowrap; margin: .06em 0 .1em -.03em; }
.finish-sub { font-size: clamp(16px, 1.2vw + 8px, 24px); max-width: 32em; }
.finish-form { display: grid; row-gap: 22px; max-width: 980px; }
#wl { display: grid; gap: 14px; max-width: 620px; }
.fld span { display: block; font-family: var(--mono); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }
.fld input { width: 100%; font: inherit; font-size: 1.1em; background: transparent; color: inherit; border: 0; border-bottom: 2px solid currentColor; padding: 8px 2px; border-radius: 0; }
.fld input:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.ints { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; }
.ints legend { font-family: var(--mono); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; padding: 0; margin-bottom: 8px; }
.ints label, .cons { display: inline-flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.cons { font-size: .9em; line-height: 1.35; }
.cons a { text-underline-offset: 2px; }
input[type="checkbox"], input[type="radio"] { width: 1.15em; height: 1.15em; accent-color: var(--fg); margin: .12em 0 0; flex: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.wl-msg { min-height: 1.4em; font-weight: 600; }
#wl .btn { justify-self: start; background: var(--fg); color: var(--bg); }
.foot { font-size: 12px; line-height: 1.5; display: grid; gap: 4px; max-width: 76em; padding-top: clamp(30px, 6vh, 60px); opacity: .86; }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 18px; font-family: var(--mono); font-size: 13px; margin-bottom: 6px; }

/* ---------- arrivals: only once script runs; the page reads fine without any of this */
html[data-anim] .rise { transform: translateY(26px); opacity: .001; transition: transform .8s cubic-bezier(.2,.7,.2,1), opacity .8s; }
html[data-anim] .rise.in { transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  html[data-anim] .rise { transform: none; opacity: 1; transition: none; }
  .cue i, .redact::after, #viewfinder b::before { animation: none; }
  .wall.seen path { animation: none; }
}
@media (max-width: 720px) {
  .sector::before { background: color-mix(in srgb, var(--bg) 66%, transparent) !important; }
  .sector.right { justify-items: start; }
  .sec + .sec { margin-top: var(--gap-m, 46vh); }
  .hero-foot { padding-right: 0; padding-bottom: 34px; }
  .cue { display: none; }
  .hud { font-size: 11.5px; }
  .hud-sub { display: none; }
}
:root{--bg:#07060B;--fg:#F5F3FA;--muted:#A7A2BA;--rule:#2A2838;--panel:#0F0E16;--wbg:#07060B;--uifg:#F5F3FA;--accent:#E040FB;--on-accent:#0B0210;--uiacc:#E040FB;--uionacc:#0B0210;--best:#E040FB;--on-best:#0B0210;--display:"Archivo","Arial Black",Arial,sans-serif;--body:"Archivo",Arial,sans-serif;--mono:"JetBrains Mono",Consolas,monospace;--d-wght:800;--d-wdth:125%;--d-style:italic;--d-track:-.025em;--d-case:uppercase;--d-scale:0.86;--b-wdth:100%;--veil:0.86;--gap:72vh;--gap-m:45vh;--grain:0.12;--vig:0.2;color-scheme:dark;}