/* SPDX-License-Identifier: Apache-2.0 */
.hero-inner{grid-template-columns:38% 62%;min-height:650px}
.hero-copy{padding-top:72px;padding-bottom:48px}
.hero{overflow:clip}
.hero-shards{--slant:-7deg;--counter:7deg;position:relative;display:flex;align-items:stretch;min-height:650px;min-width:0;padding-left:34px;isolation:isolate;overflow:clip;background:#071728}
.hero-shard{position:relative;flex:1 1 0;min-width:0;margin-left:-10px;transform:skewX(var(--slant));border-left:1px solid #58d6fa70;overflow:clip;background:#0b2033;transition:flex-basis .34s ease,flex-grow .34s ease}
.hero-shard:last-of-type{margin-right:-35px}
.shard-scene{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:54% center;transform:skewX(var(--counter)) scale(1.16);filter:brightness(.85);transition:filter .24s ease}
.hero-shard[data-shard="test"] .shard-scene{object-position:35% center}
.hero-shard[data-shard="train"] .shard-scene{object-position:61% center}
.hero-shard:before{content:'';position:absolute;z-index:1;inset:0;pointer-events:none;background:linear-gradient(180deg,#04111ee8 0%,#04111e35 30%,transparent 48%,#04111ec9 100%)}
.shard-toggle,.shard-static-link{position:absolute;z-index:4;top:70px;left:20px;right:12px;border:0;background:transparent;color:#eef8ff;display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-height:76px;padding:0 0 10px;cursor:pointer;text-align:left;transform:skewX(var(--counter))}
.shard-toggle[hidden]{display:none}.has-shards .shard-static-link{display:none}
.shard-label{color:#8ee8ff;font-size:18px;font-weight:600;letter-spacing:.09em;line-height:1.15}
.shard-kind{font-size:12px;line-height:1.4;letter-spacing:0;color:#d4e9f5;font-weight:400}
.shard-toggle:focus-visible,.shard-static-link:focus-visible{outline:2px solid #a0e9ff;outline-offset:5px;border-radius:3px}
.shard-preview{position:absolute;z-index:3;left:34px;right:32px;bottom:82px;max-width:450px;padding:18px 20px 20px;background:#061421ed;border-left:2px solid #51d3fa;transform:skewX(var(--counter));animation:shard-copy-in .24s ease-out}
.shard-preview[hidden]{display:none}.shard-preview h2{font-size:clamp(25px,2.4vw,38px);line-height:1.12;margin:0 0 16px;color:#f2f7ff}
.shard-preview p{font-size:17px;line-height:1.6;color:#deebf5;margin:0 0 20px}
.shard-preview .shard-status{font-size:13px;line-height:1.5;color:#a9d4e8;margin-bottom:16px}
.shard-cta{display:inline-flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;padding:10px 14px;border:1px solid #65c6e8;border-radius:4px;background:#071c2d;color:#a3e9ff;font-size:14px;font-weight:600;line-height:1.4}
.shard-cta:hover{background:#113448}.shard-cta:focus-visible{outline:3px solid #a0e9ff;outline-offset:4px}
.has-active .hero-shard{flex:0 0 56px}.has-active .hero-shard.is-active{flex:1 1 0}
.has-active .hero-shard:last-of-type{margin-right:0}
.has-active .hero-shard:not(.is-active) .shard-toggle{top:90px;left:8px;right:0;width:40px;min-height:150px;align-items:center}
.has-active .hero-shard:not(.is-active) .shard-label{writing-mode:vertical-rl;text-orientation:mixed;font-size:16px;letter-spacing:.08em}
.has-active .hero-shard:not(.is-active) .shard-kind{display:none}
.hero-shard.is-active .shard-scene{filter:brightness(1)}
.has-active .hero-shard.is-active .shard-toggle{right:48px}
.hero-shard.is-active:after{content:'';position:absolute;z-index:5;top:-100px;left:0;width:2px;height:90px;pointer-events:none;background:linear-gradient(transparent,#ccf7ff,#22d3ee,transparent);box-shadow:0 0 5px #54d8ff55;animation:shard-border-streak .8s ease-out 1}
.shards-reset{position:absolute;z-index:6;right:14px;bottom:16px;border:1px solid #47687e;border-radius:4px;background:#061421ec;color:#d3e6f3;padding:10px 12px;min-height:44px;font-size:13px;font-weight:600;cursor:pointer}
.shards-reset[hidden]{display:none}
.shards-caption{position:absolute;z-index:6;left:30px;bottom:16px;margin:0;padding:5px 9px;background:#05131fed;color:#c4d6e4;font-size:12px;line-height:1.4;max-width:calc(100% - 200px);pointer-events:none}
.shard-diagnostics,.shard-perception{position:absolute;z-index:2;pointer-events:none;opacity:.45;transform:skewX(var(--counter))}
.shard-diagnostics{left:15%;right:10%;top:40%;height:90px;border:1px dashed #74d9ff}
.shard-diagnostics svg{width:100%;height:100%;stroke:#98e5ff;stroke-width:1.3;fill:none}
.shard-perception{left:44%;top:48%;width:22%;height:25%;border:1px solid #82f0df;box-shadow:inset 0 0 0 1px #071522}
.shard-perception:after{content:'';position:absolute;top:88%;left:-28%;width:160%;height:55%;border:1px dashed #91cfff}
.has-active .hero-shard:not(.is-active) :is(.shard-diagnostics,.shard-perception){display:none}
.hero-shard.image-unavailable .shard-scene{opacity:0}
.pillar-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.pillar .pillar-art{background-size:cover;background-position:center}
.pillar-play .pillar-art{background-image:url('/assets/shard-play-768.webp')}
.pillar-test .pillar-art{background-image:url('/assets/shard-test-768.webp');background-position:35% center}
.pillar-train .pillar-art{background-image:url('/assets/shard-train-768.webp')}
.pillar-learn .pillar-art{background-image:url('/assets/shard-learn-768.webp')}
.learn-content{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding-bottom:40px}
.learn-content>img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border:1px solid var(--line);border-radius:6px}
.learn-content h3{font-size:28px;line-height:1.2;margin-top:0}.learn-content p{font-size:17px;line-height:1.65;color:var(--muted)}
.experiment-image{background-image:linear-gradient(90deg,#08111d33,transparent),url('/assets/vehicle-study-1536.webp')}
@keyframes shard-border-streak{to{transform:translateY(780px);opacity:0}}
@keyframes shard-copy-in{from{opacity:0;translate:0 6px}to{opacity:1;translate:0 0}}
@media(max-width:1200px){.hero-inner{grid-template-columns:40% 60%}.shard-toggle,.shard-static-link{left:14px;right:8px}.shard-label{font-size:16px}.shard-kind{font-size:11px}.shard-preview{left:22px;right:24px;padding:16px;bottom:90px}.has-active .hero-shard{flex-basis:44px}.pillar-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:980px){.hero-inner{grid-template-columns:1fr}.hero-copy{padding:40px 0 30px}.hero-shards{min-height:500px;margin-inline:-16px;padding-left:32px}.shard-toggle,.shard-static-link{top:34px;left:18px}.shard-preview{bottom:80px;left:30px;right:28px}.shard-label{font-size:18px}.shard-kind{font-size:12px}.has-active .hero-shard{flex-basis:54px}}
@media(max-width:620px){.hero-shards{--slant:-4deg;--counter:4deg;min-height:530px;padding-left:20px}.hero-shard{margin-left:-4px}.hero-shard:last-of-type{margin-right:-18px}.shard-toggle,.shard-static-link{top:30px;left:8px;right:4px;gap:8px;min-height:80px}.shard-label{font-size:13px;letter-spacing:.06em}.shard-kind{font-size:11px;max-width:74px}.has-active .hero-shard{flex-basis:24px}.has-active .hero-shard:not(.is-active) .shard-toggle{left:0;width:22px;top:34px;min-height:150px}.has-active .hero-shard:not(.is-active) .shard-label{font-size:12px}.is-active .shard-toggle{left:14px}.is-active .shard-label{font-size:18px}.shard-preview{left:14px;right:18px;bottom:110px;padding:14px 12px}.shard-preview h2{font-size:24px;margin-bottom:12px}.shard-preview p{font-size:16px;line-height:1.5;margin-bottom:14px}.shard-preview .shard-status{font-size:12px;line-height:1.45;margin-bottom:12px}.shard-cta{font-size:13px;gap:10px;padding:9px 10px}.shards-caption{left:12px;bottom:14px;max-width:calc(100% - 128px);font-size:11px}.shards-reset{right:8px;bottom:14px;max-width:112px;font-size:12px;padding:8px}.has-active .hero-shard:not(.is-active) .shard-scene{filter:brightness(.55)}}
@media(prefers-reduced-motion:reduce){.hero-shards *,.hero-shards *:before,.hero-shards *:after{animation:none!important;transition:none!important}}
@media(max-width:620px){.pillar-grid{grid-template-columns:1fr}.learn-content{grid-template-columns:1fr;gap:24px}.learn-content h3{font-size:26px}}
/* Preview copy sets its own height on smaller screens; focus must not scroll a clipped shard canvas. */
@media(max-width:980px){.shard-preview{position:relative;left:auto;right:auto;bottom:auto;margin:130px 38px 90px 30px}}
@media(max-width:620px){.shard-preview{margin:130px 18px 110px 14px}}
/* Align counter-skew origins at the pane midpoint so compressed labels stay inside their strips. */
.has-active .hero-shard:not(.is-active) .shard-toggle{top:50%;transform:translateY(-50%) skewX(var(--counter));justify-content:center}
/* Keep the resting last label inside the narrow clipped canvas, including its native no-JS link. */
@media(max-width:620px){.hero-shards:not(.has-active) .hero-shard[data-shard="learn"] :is(.shard-toggle,.shard-static-link){translate:-8px 0}}
/* The folded last label also needs an inset from the clipped canvas/scrollbar edge. */
@media(max-width:620px){.hero-shards.has-active .hero-shard[data-shard="learn"] .shard-toggle{translate:-8px 0}}