:root {
  --ink: #0a0a09;
  --white: #fffdf8;
  --accent: #ff6b1a;
  --accent-hot: #ff8a44;
  --line: rgba(255,255,255,.18);
  --muted: rgba(255,255,255,.62);
  --display: "IBM Plex Sans", Arial, sans-serif;
  --mono: "IBM Plex Mono", Consolas, monospace;
  --ease: cubic-bezier(.22,.8,.24,1);
}

* { box-sizing: border-box; }
html { color-scheme: dark; background: var(--ink); }
body { margin: 0; min-width: 0; overflow-x: hidden; color: var(--white); background: var(--ink); font-family: var(--display); }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.skip-link { position: fixed; z-index: 100; left: 16px; top: 12px; padding: 10px 14px; color: var(--ink); background: var(--white); transform: translateY(-180%); transition: transform .2s; }
.skip-link:focus { transform: none; }

.prototype-header { position: fixed; z-index: 20; top: 0; left: 0; right: 0; height: 86px; padding: 0 clamp(24px,4vw,72px); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid rgba(255,255,255,.13); background: linear-gradient(180deg,rgba(5,6,8,.84),rgba(5,6,8,.18)); backdrop-filter: blur(12px); }
.is-embedded .prototype-header,.is-embedded .skip-link { display: none; }
.brand { justify-self: start; display: flex; align-items: center; gap: 13px; }
.brand-mark { position: relative; width: 52px; height: 35px; overflow: hidden; display: grid; place-items: center; color: var(--white); background: var(--accent); clip-path: polygon(0 0,100% 0,72% 100%,0 100%); }
.brand-mark i { position: absolute; inset: 5px 11px 5px 5px; border: 1px solid rgba(255,255,255,.34); clip-path: inherit; }
.brand-mark b { position: relative; z-index: 1; margin-right: 6px; font: 700 14px/1 var(--display); letter-spacing: -.04em; }
.brand-caption { color: rgba(255,255,255,.58); font: 500 8px/1.35 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.prototype-header-meta { display: flex; align-items: center; gap: 13px; color: rgba(255,255,255,.42); font: 500 8px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.prototype-header-meta i { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.back-link { justify-self: end; display: inline-flex; align-items: center; gap: 12px; padding-bottom: 5px; border-bottom: 1px solid rgba(255,255,255,.46); font: 600 9px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; transition: color .25s,border-color .25s; }
.back-link:hover { color: var(--accent); border-color: var(--accent); }
.back-link svg { width: 17px; }

.prototype-hero { position: relative; min-height: 800px; height: 100svh; overflow: hidden; isolation: isolate; background: #07080a; }
.prototype-media,.prototype-stage,.prototype-fallback,.prototype-shade,.prototype-noise { position: absolute; inset: 0; }
.prototype-fallback { width: 100%; height: 100%; object-fit: cover; filter: saturate(.55) contrast(1.1) brightness(.52); transform: scale(1.025); transition: opacity 1s var(--ease),filter 1s var(--ease); }
.prototype-stage { z-index: 1; opacity: 0; transition: opacity 1.2s var(--ease); }
.prototype-stage canvas { display: block; width: 100%; height: 100%; outline: none; }
.is-three-ready .prototype-stage { opacity: 1; }
.is-three-ready .prototype-fallback { opacity: .08; filter: saturate(.2) contrast(1.15) brightness(.24); }
.is-fallback .prototype-stage { opacity: 0; }
.is-fallback .prototype-fallback { opacity: 1; filter: saturate(.55) contrast(1.1) brightness(.52); }
.prototype-shade { z-index: 2; pointer-events: none; background: linear-gradient(90deg,rgba(5,6,8,.98) 0%,rgba(5,6,8,.91) 31%,rgba(5,6,8,.46) 52%,rgba(5,6,8,.04) 75%),linear-gradient(0deg,rgba(5,6,8,.88) 0%,transparent 34%,rgba(5,6,8,.24) 100%); }
.prototype-noise { z-index: 3; pointer-events: none; opacity: .09; 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='.95' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; }

.prototype-shell { width: min(100% - clamp(48px,8vw,144px),1480px); margin: 0 auto; }
.prototype-layout { position: relative; z-index: 5; height: 100%; display: grid; grid-template-columns: minmax(500px,.92fr) minmax(250px,.38fr); gap: 8vw; align-items: center; padding-top: 70px; }
.prototype-copy { align-self: center; max-width: 820px; padding-bottom: 34px; }
.eyebrow { display: flex; align-items: center; gap: 11px; margin: 0 0 25px; color: var(--accent); font: 600 9px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.eyebrow span { width: 30px; height: 1px; background: currentColor; }
.prototype-copy h1 { margin: 0; max-width: 960px; font: 500 clamp(52px,4.7vw,84px)/.98 var(--display); letter-spacing: -.055em; }
.prototype-copy h1 span,.prototype-copy h1 em { display: block; white-space: nowrap; }
.prototype-copy h1 em { color: var(--accent); font-style: normal; }
.prototype-lead { max-width: 590px; margin: 30px 0 36px; color: rgba(255,255,255,.72); font-size: clamp(15px,1.15vw,18px); line-height: 1.65; }
.prototype-actions { position: absolute; z-index: 9; left: 0; bottom: 38px; display: flex; align-items: center; flex-wrap: wrap; gap: 28px; }
.button-primary { min-height: 54px; padding: 0 22px; display: inline-flex; align-items: center; justify-content: center; gap: 18px; color: var(--white); background: var(--accent); font: 600 10px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; transition: background .25s,transform .25s; }
.button-primary:hover { background: var(--accent-hot); transform: translateY(-2px); }
.button-primary svg { width: 18px; }
.text-link { padding-bottom: 7px; border-bottom: 1px solid rgba(255,255,255,.55); font: 600 10px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; transition: color .25s,border-color .25s; }
.text-link:hover { color: var(--accent); border-color: var(--accent); }

.system-readout { position: relative; isolation: isolate; justify-self: end; align-self: center; width: min(100%,310px); margin-top: 74px; padding: 0 0 22px 23px; border-left: 1px solid rgba(255,255,255,.24); text-shadow: 0 2px 18px rgba(0,0,0,.45); }
.system-readout::before { content: ""; position: absolute; z-index: 0; top: -224px; right: -28px; bottom: -28px; left: -28px; border: 1px solid rgba(255,255,255,.08); background: linear-gradient(180deg,rgba(3,4,6,.54),rgba(3,4,6,.72)); box-shadow: 0 24px 70px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.025); backdrop-filter: blur(14px) saturate(.72); -webkit-backdrop-filter: blur(14px) saturate(.72); pointer-events: none; }
.system-readout > * { position: relative; z-index: 1; }
.sci-hologram { position: absolute; left: 50%; bottom: calc(100% + 24px); width: 220px; height: 154px; transform: translateX(-50%); color: var(--accent); pointer-events: none; filter: drop-shadow(0 0 12px rgba(255,107,26,.35)); }
.sci-hologram::before,.sci-hologram::after { content: ""; position: absolute; left: 50%; border: 1px solid rgba(255,107,26,.72); border-radius: 50%; transform: translateX(-50%) rotateX(67deg); box-shadow: 0 0 18px rgba(255,107,26,.28),inset 0 0 12px rgba(255,107,26,.2); }
.sci-hologram::before { bottom: 8px; width: 178px; height: 62px; animation: holoBase 3.2s linear infinite; }
.sci-hologram::after { bottom: 23px; width: 118px; height: 38px; border-style: dashed; opacity: .52; animation: holoBaseReverse 2.4s linear infinite; }
.holo-orbit { position: absolute; left: 50%; top: 49%; border: 1px solid rgba(255,107,26,.58); border-radius: 50%; transform-style: preserve-3d; }
.holo-orbit--a { width: 152px; height: 62px; transform: translate(-50%,-50%) rotateX(66deg) rotateZ(8deg); animation: holoOrbitA 4.8s linear infinite; }
.holo-orbit--b { width: 100px; height: 118px; transform: translate(-50%,-53%) rotateY(67deg) rotateZ(-12deg); border-style: dotted; opacity: .48; animation: holoOrbitB 3.8s linear infinite reverse; }
.holo-scan { position: absolute; z-index: 3; left: 30px; right: 30px; top: 26px; height: 1px; background: linear-gradient(90deg,transparent,currentColor,transparent); box-shadow: 0 0 13px currentColor; opacity: .8; animation: holoScan 2.4s ease-in-out infinite; }
.holo-raster { position: absolute; z-index: 2; left: 50%; top: -28px; width: 174px; height: 174px; display: none; transform: translateX(-50%); object-fit: contain; mix-blend-mode: screen; opacity: .76; filter: saturate(1.06) contrast(1.04) drop-shadow(0 0 5px rgba(255,107,26,.48)); animation: holoReveal .48s cubic-bezier(.2,.9,.2,1) both,holoFloat 3s ease-in-out .48s infinite; }
.sci-hologram[data-hologram="diagnostics"] .holo-raster--diagnostics,.sci-hologram[data-hologram="engine"] .holo-raster--engine,.sci-hologram[data-hologram="electrics"] .holo-raster--electrics,.sci-hologram[data-hologram="brakes"] .holo-raster--brakes,.sci-hologram[data-hologram="climate"] .holo-raster--climate,.sci-hologram[data-hologram="suspension"] .holo-raster--suspension { display: block; }
.holo-caption { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); color: rgba(255,151,91,.68); font: 500 7px/1 var(--mono); letter-spacing: .17em; white-space: nowrap; }
.system-readout-top { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px; color: rgba(255,255,255,.42); font: 500 8px/1 var(--mono); letter-spacing: .1em; }
.system-readout-top i { height: 1px; background: rgba(255,255,255,.18); }
.system-kicker { margin: 26px 0 9px; color: var(--accent); font: 600 8px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.system-readout h2 { margin: 0; max-width: 280px; font: 500 25px/1.12 var(--display); letter-spacing: -.035em; }
.system-readout > p:last-of-type { margin: 17px 0 15px; color: rgba(255,255,255,.64); font-size: 12px; line-height: 1.6; }
.system-more { width: fit-content; min-height: 40px; margin: 0 0 16px; padding: 0 15px; display: inline-flex; align-items: center; gap: 18px; color: var(--white); background: var(--accent); box-shadow: 0 10px 34px rgba(255,107,26,.22); font: 600 9px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; transition: transform .25s var(--ease),background .25s,box-shadow .25s; }
.system-more:hover { background: var(--accent-hot); box-shadow: 0 14px 42px rgba(255,107,26,.34); transform: translateY(-2px); }
.system-more svg { width: 16px; }
.system-scale { height: 17px; display: flex; align-items: end; gap: 5px; }
.system-scale i { width: 2px; height: 6px; background: rgba(255,255,255,.24); animation: scalePulse 1.8s ease-in-out infinite; }
.system-scale i:nth-child(2),.system-scale i:nth-child(6){height:10px;animation-delay:-.2s}.system-scale i:nth-child(3),.system-scale i:nth-child(5){height:14px;animation-delay:-.4s}.system-scale i:nth-child(4){height:17px;background:var(--accent);animation-delay:-.6s}

.system-dock { position: absolute; z-index: 7; right: clamp(24px,4vw,72px); bottom: 38px; width: min(56vw,1000px); display: grid; grid-template-columns: repeat(6,1fr); border: 1px solid rgba(255,255,255,.2); background: rgba(8,9,11,.66); box-shadow: 0 18px 50px rgba(0,0,0,.28); backdrop-filter: blur(16px); }
.system-dock-shell { display: contents; }
.dock-arrow { display: none; }
.system-dock button { position: relative; min-width: 0; height: 62px; padding: 0 16px; display: flex; align-items: center; gap: 10px; border: 0; border-right: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.58); background: transparent; cursor: pointer; font: 600 9px/1 var(--mono); letter-spacing: .03em; text-align: left; transition: color .25s,background .25s; }
.system-dock button:last-child { border-right: 0; }
.system-dock button::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -1px; height: 2px; background: var(--accent); transition: right .35s var(--ease); }
.system-dock button small { color: rgba(255,255,255,.3); font: 500 7px/1 var(--mono); }
.system-dock button:hover,.system-dock button.is-active { color: var(--white); background: rgba(255,255,255,.055); }
.system-dock button.is-active::after { right: 0; }
.system-dock button.is-active small { color: var(--accent); }
.system-dock button:focus-visible,.button-primary:focus-visible,.system-more:focus-visible,.text-link:focus-visible,.back-link:focus-visible,.brand:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; }

.scene-status { position: absolute; z-index: 8; right: clamp(25px,4vw,70px); top: 108px; display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.55); font: 500 8px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; transition: opacity .45s; }
.scene-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(255,107,26,.6); animation: statusPulse 1.5s infinite; }
.is-three-ready .scene-status { opacity: 0; pointer-events: none; }
.model-credit { position: absolute; z-index: 8; right: clamp(25px,4vw,70px); bottom: 20px; color: rgba(255,255,255,.34); font: 500 7px/1.4 var(--mono); letter-spacing: .07em; text-decoration: none; transition: color .2s ease; }
.model-credit:hover,.model-credit:focus-visible { color: rgba(255,255,255,.72); }
.focus-frame { position: absolute; z-index: 3; right: 5.5vw; top: 19%; width: min(48vw,780px); height: min(52vw,620px); opacity: .38; pointer-events: none; }
.focus-frame i { position: absolute; width: 28px; height: 28px; border-color: var(--accent); }
.focus-frame i:nth-child(1){left:0;top:0;border-left:1px solid;border-top:1px solid}.focus-frame i:nth-child(2){right:0;top:0;border-right:1px solid;border-top:1px solid}.focus-frame i:nth-child(3){left:0;bottom:0;border-left:1px solid;border-bottom:1px solid}.focus-frame i:nth-child(4){right:0;bottom:0;border-right:1px solid;border-bottom:1px solid}
.axis { position: absolute; z-index: 4; pointer-events: none; color: rgba(255,255,255,.28); font: 500 7px/1 var(--mono); letter-spacing: .09em; }
.axis::after { content: ""; display: block; background: rgba(255,255,255,.13); }
.axis-x { right: 6vw; top: 17%; width: 170px; text-align: right; }.axis-x::after{height:1px;margin-top:7px}
.axis-y { right: 4vw; top: 48%; height: 140px; writing-mode: vertical-rl; }.axis-y::after{width:1px;height:100%;margin-right:7px}
.interaction-hint { display: none; }
.interaction-hint i { width: 22px; height: 22px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; }
.interaction-hint i::after { content: ""; display: block; width: 3px; height: 3px; margin: 4px auto; border-radius: 50%; background: var(--accent); animation: cursorMove 2.2s var(--ease) infinite; }

@keyframes statusPulse { 70%{box-shadow:0 0 0 9px rgba(255,107,26,0)}100%{box-shadow:0 0 0 0 rgba(255,107,26,0)} }
@keyframes scalePulse { 50%{opacity:.35;transform:scaleY(.65)} }
@keyframes cursorMove { 0%,100%{transform:translateY(0)}50%{transform:translateY(10px)} }
@keyframes holoReveal { 0%{opacity:0;transform:translateX(-50%) translateY(16px) scaleY(.2)}55%{opacity:1}100%{opacity:.82;transform:translateX(-50%) translateY(0) scaleY(1)} }
@keyframes holoFloat { 0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-6px)} }
@keyframes holoScan { 0%,100%{top:23px;opacity:.12}50%{top:111px;opacity:.9} }
@keyframes holoBase { to{transform:translateX(-50%) rotateX(67deg) rotateZ(360deg)} }
@keyframes holoBaseReverse { to{transform:translateX(-50%) rotateX(67deg) rotateZ(-360deg)} }
@keyframes holoOrbitA { to{transform:translate(-50%,-50%) rotateX(66deg) rotateZ(368deg)} }
@keyframes holoOrbitB { to{transform:translate(-50%,-53%) rotateY(67deg) rotateZ(348deg)} }

@media (min-width: 2000px) and (min-height: 820px) {
  .prototype-shell { width: min(100% - clamp(128px,8vw,260px),calc(100vw - 12vw)); }
  .prototype-layout { grid-template-columns: minmax(680px,1.02fr) minmax(390px,.42fr); gap: clamp(110px,8vw,220px); padding-top: clamp(90px,7vh,150px); }
  .prototype-copy { max-width: clamp(900px,45vw,1320px); padding-bottom: clamp(44px,4vh,80px); }
  .prototype-copy h1 { max-width: none; font-size: clamp(82px,4.45vw,142px); }
  .eyebrow { margin-bottom: clamp(28px,2.1vh,42px); font-size: clamp(10px,.48vw,15px); }
  .prototype-lead { max-width: clamp(680px,31vw,940px); margin-top: clamp(34px,3vh,54px); font-size: clamp(18px,.86vw,27px); }
  .system-readout { width: clamp(390px,17vw,540px); margin-top: clamp(90px,7vh,140px); padding: 0 0 30px 32px; }
  .system-readout::before { top: clamp(-350px,-28vh,-245px); right: -42px; bottom: -38px; left: -42px; }
  .sci-hologram { bottom: calc(100% + 36px); width: clamp(270px,12vw,380px); height: clamp(188px,9vw,280px); }
  .holo-raster { top: -38px; width: clamp(210px,9vw,290px); height: clamp(210px,9vw,290px); }
  .system-readout h2 { max-width: 430px; font-size: clamp(30px,1.3vw,42px); }
  .system-readout > p:last-of-type { font-size: clamp(14px,.62vw,20px); }
  .system-more { min-height: clamp(48px,3vw,64px); padding-inline: 22px; font-size: clamp(10px,.46vw,14px); }
  .prototype-actions { left: 0; bottom: clamp(42px,4vh,72px); gap: clamp(34px,2.2vw,68px); }
  .button-primary { min-height: clamp(62px,3vw,82px); padding-inline: clamp(28px,1.7vw,46px); font-size: clamp(11px,.5vw,15px); }
  .text-link { font-size: clamp(11px,.5vw,15px); }
  .system-dock { right: clamp(70px,4vw,140px); bottom: clamp(42px,4vh,72px); width: min(57vw,1700px); }
  .system-dock button { height: clamp(70px,4vw,98px); padding-inline: clamp(18px,1.2vw,32px); font-size: clamp(10px,.48vw,15px); }
  .system-dock button small { font-size: clamp(8px,.36vw,11px); }
  .focus-frame { right: 4vw; top: 16%; width: 52vw; height: 61vh; }
  .scene-status { right: clamp(70px,4vw,140px); top: clamp(118px,9vh,170px); font-size: clamp(8px,.38vw,12px); }
}

@media (max-width: 1120px) {
  .prototype-header-meta,.interaction-hint { display: none; }
  .prototype-header { grid-template-columns: 1fr 1fr; }
  .prototype-layout { grid-template-columns: minmax(430px,1fr) 240px; gap: 5vw; }
  .prototype-copy h1 { font-size: clamp(46px,6.2vw,70px); }
  .prototype-shade { background: linear-gradient(90deg,rgba(5,6,8,.98) 0%,rgba(5,6,8,.86) 38%,rgba(5,6,8,.3) 65%,rgba(5,6,8,.08)),linear-gradient(0deg,rgba(5,6,8,.88),transparent 38%); }
}

@media (max-width: 820px) {
  .prototype-header { height: 72px; padding: 0 18px; background: rgba(5,6,8,.64); }
  .brand-caption { display: none; }
  .back-link span { display: none; }
  .back-link { width: 40px; height: 40px; padding: 0; justify-content: center; border: 1px solid rgba(255,255,255,.23); }
  .prototype-hero { min-height: 880px; height: 100svh; max-height: none; }
  .prototype-shell { width: min(100% - 36px,720px); }
  .prototype-layout { display: block; padding-top: 118px; }
  .prototype-copy { max-width: 620px; padding: 0; }
  .prototype-copy h1 { font-size: clamp(32px,8.75vw,58px); line-height: 1.02; }
  .prototype-lead { max-width: 520px; margin: 21px 0 26px; font-size: 14px; line-height: 1.55; }
  .eyebrow { margin-bottom: 18px; font-size: 8px; }
  .prototype-shade { background: linear-gradient(180deg,rgba(5,6,8,.98) 0%,rgba(5,6,8,.93) 38%,rgba(5,6,8,.44) 60%,rgba(5,6,8,.62) 100%); }
  .focus-frame { right: -10vw; top: 41%; width: 88vw; height: 43vh; }
  .axis { display: none; }
  .system-readout { position: absolute; left: 0; right: 0; bottom: 84px; width: auto; margin: 0; padding: 13px 14px; display: grid; grid-template-columns: 104px minmax(0,1fr); grid-template-rows: auto auto auto; column-gap: 13px; align-items: center; border: 1px solid rgba(255,255,255,.13); background: transparent; }
  .system-readout::before { top: -1px; right: -1px; bottom: -1px; left: -1px; border-color: rgba(255,255,255,.06); background: linear-gradient(90deg,rgba(3,4,6,.14),rgba(3,4,6,.25)); box-shadow: 0 12px 34px rgba(0,0,0,.14); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .sci-hologram { position: relative; grid-column: 1; grid-row: 1 / 4; left: auto; right: auto; bottom: auto; width: 104px; height: 100px; transform: none; align-self: center; }
  .sci-hologram::before { width: 108px; height: 38px; bottom: 3px; }
  .sci-hologram::after { width: 72px; height: 24px; bottom: 12px; }
  .holo-orbit--a { width: 94px; height: 40px; }
  .holo-orbit--b { width: 62px; height: 72px; }
  .holo-raster { top: -18px; width: 108px; height: 108px; }
  .holo-scan { left: 20px; right: 20px; top: 13px; animation-name: holoScanMobile; }
  .holo-caption { font-size: 5px; }
  .system-readout-top,.system-kicker,.system-scale { display: none; }
  .system-readout h2 { grid-column: 2; grid-row: 1; max-width: none; font-size: 17px; }
  .system-readout > p:last-of-type { grid-column: 2; grid-row: 2; max-width: none; margin: 6px 0 8px; padding: 0; font-size: 9px; line-height: 1.42; }
  .system-more { grid-column: 2; grid-row: 3; min-height: 34px; margin: 0; padding: 0 12px; gap: 12px; font-size: 8px; }
  .system-more svg { width: 14px; }
  .system-dock-shell { position: absolute; z-index: 7; left: 6px; right: 6px; bottom: 12px; display: grid; grid-template-columns: 36px minmax(0,1fr) 36px; align-items: stretch; gap: 5px; }
  .system-dock { position: relative; z-index: auto; left: auto; right: auto; bottom: auto; width: 100%; display: flex; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; scroll-snap-type: x mandatory; touch-action: pan-x; -webkit-overflow-scrolling: touch; }
  .system-dock::-webkit-scrollbar { display: none; }
  .system-dock button { flex: 0 0 33.333%; min-width: 0; height: 60px; padding: 0 8px; gap: 6px; scroll-snap-align: start; scroll-snap-stop: always; }
  .dock-arrow { display: grid; place-items: center; min-width: 0; padding: 0; border: 1px solid rgba(255,255,255,.2); color: var(--white); background: rgba(8,9,11,.78); backdrop-filter: blur(16px); cursor: pointer; transition: color .2s,background .2s,opacity .2s; }
  .dock-arrow svg { width: 17px; }
  .dock-arrow:not(:disabled):hover,.dock-arrow:not(:disabled):active { color: var(--accent); background: rgba(255,107,26,.12); }
  .dock-arrow:disabled { opacity: .28; cursor: default; }
  .dock-arrow:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
  .scene-status { top: 88px; right: 18px; }
  .model-credit { right: 18px; bottom: 2px; max-width: 230px; text-align: right; font-size: 6px; }
  .prototype-actions { left: 0; right: 0; bottom: 312px; justify-content: center; flex-wrap: nowrap; gap: 18px; }
}

@media (max-width: 560px) {
  .prototype-hero { min-height: 840px; }
  .prototype-layout { padding-top: 108px; }
  .prototype-copy h1 { font-size: clamp(29px,8.7vw,44px); letter-spacing: -.045em; }
  .prototype-lead { max-width: 390px; font-size: 13px; }
  .prototype-actions { gap: 18px; }
  .button-primary { min-height: 50px; padding: 0 17px; }
  .text-link { font-size: 9px; }
  .eyebrow { max-width: 330px; line-height: 1.4; }
  .system-readout { bottom: 82px; }
  .system-dock-shell { bottom: 12px; }
  .prototype-actions { bottom: 306px; }
  .system-dock button { height: 58px; padding: 0 7px; }
  .focus-frame { top: 46%; height: 36vh; }
  .model-credit { display: none; }
}

@keyframes holoScanMobile { 0%,100%{top:12px;opacity:.12}50%{top:67px;opacity:.9} }

@media (max-width: 340px) {
  .prototype-fallback { transform: none; }
  .focus-frame { right: 0; width: 78vw; }
  .system-dock-shell { left: 3px; right: 3px; grid-template-columns: 32px minmax(0,1fr) 32px; gap: 3px; }
  .prototype-actions { gap: 10px; }
  .button-primary { padding: 0 12px; gap: 10px; font-size: 9px; }
  .text-link { font-size: 8px; }
}

@media (max-height: 760px) and (min-width: 821px) {
  .prototype-hero { min-height: 700px; }
  .prototype-layout { padding-top: 60px; }
  .prototype-copy h1 { font-size: clamp(48px,5.6vw,78px); }
  .prototype-lead { margin: 20px 0 25px; }
  .system-dock { bottom: 22px; }
  .interaction-hint { bottom: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto!important; animation-duration: .01ms!important; animation-iteration-count: 1!important; transition-duration: .01ms!important; }
  .interaction-hint { display: none; }
  .system-dock { scroll-behavior: auto; }
}