/* Solid hero materials are the neutral faces, outline and detail colours of
   js/illustration-palette.js; the orange anchor uses its white-mixed tints. */
.w-build-track .w-hero__art {
 --hairline-plate: #F1F3F2;
 --hairline-hi: var(--brand-orange);
 --hairline-edge: #62696B;
 --hairline-mid: #62696B;
 --hairline-lo: #9BA3A5;
 --hairline-stroke: .75;
 --hero-front: #F1F3F2;
 --hero-side: #D5DADB;
 --hero-top: #FFFFFF;
 background: var(--site-paper, #F8F8F8);
 color: #232323;
}
.w-hero__stage {
 position: relative;
 flex: 1;
 width: 100%;
 min-height: 300px;
 aspect-ratio: 5 / 4;
 touch-action: pan-y;
}
.w-build-track .w-hero__stage > .w-hero__drawing {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 min-height: 0;
 aspect-ratio: auto;
 overflow: hidden;
}
/* Static/no-JavaScript fallback uses the same kernel styling and palette. This angular
   finish outranks the kernel's zero-specificity defaults once they are injected. */
.w-hero__drawing path {
 fill: var(--hairline-plate);
 stroke: var(--hairline-mid);
 stroke-width: var(--hairline-stroke);
 vector-effect: non-scaling-stroke;
 stroke-linejoin: miter;
 stroke-linecap: butt;
}
.w-hero__drawing .nf { fill: none; }
.w-hero__drawing .sil { stroke: var(--hairline-edge); }
.w-hero__drawing .hi { stroke: var(--hairline-hi); }
.w-hero__drawing .lo { stroke: var(--hairline-lo); }
/* The ground grid matches the opportunity illustrations' grid line. */
.w-hero__stage .w-hero__drawing [data-hero-grid] { stroke: #CDD3D4; stroke-opacity: .35; stroke-width: .5; }
.w-hero__drawing .hero-accent { --hero-front: var(--brand-orange-40); --hero-side: var(--brand-orange-65); --hero-top: var(--brand-orange-20); --hairline-edge: var(--brand-orange-65); }
.w-hero__stage .w-hero__drawing .hero-face { stroke: none; }
.w-hero__stage .w-hero__drawing .hero-face--front { fill: var(--hero-front); }
.w-hero__stage .w-hero__drawing .hero-face--side { fill: var(--hero-side); }
.w-hero__stage .w-hero__drawing .hero-face--top { fill: var(--hero-top); }
.w-hero__stage .w-hero__drawing .hero-activity { fill: var(--hairline-hi); stroke: none; }
.w-hero__stage .w-hero__drawing .sil { fill: var(--hero-front); }
.w-hero__stage .w-hero__drawing [data-hero-slot] > g > .nf { stroke: var(--hairline-edge); }
/* The crease path restrokes the silhouette above the faces, so it carries the selected part's orange outline. */
.w-hero__stage .w-hero__drawing .sil.hi ~ .nf { stroke: var(--hairline-hi); }
/* The dense 364-cell calendar uses a lighter, finer detail line. */
.w-hero__stage .w-hero__drawing [data-hairline-part="commit history"] > .nf { stroke: #BBC2C3; stroke-width: .45; }
/* Automatic artwork has no toolbar. Keyboard users can still stop its motion. */
.w-hero__pause { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
.w-hero__art .w-hero__pause:focus-visible { bottom: 16px; right: 16px; z-index: 2; width: auto; height: auto; min-height: 44px; padding: 8px 12px; clip-path: none; border: 1px solid var(--hairline-hi); border-radius: 0; color: var(--hairline-edge); background: var(--hairline-plate); font: 12px/18px var(--arch-mono); outline: 2px solid var(--focus-ring, #1B1B1B); outline-offset: 2px; }
.w-hero__read { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 800px) {
 .w-hero__stage { flex: none; min-height: 0; }
}
@media (forced-colors: active) {
 .w-build-track .w-hero__art { --hairline-plate: Canvas; --hairline-edge: CanvasText; --hairline-mid: CanvasText; --hairline-lo: CanvasText; --hairline-hi: Highlight; --hero-front: Canvas; --hero-side: Canvas; --hero-top: Canvas; }
 .w-hero__drawing .hero-accent { --hero-front: Canvas; --hero-side: Canvas; --hero-top: Canvas; --hairline-edge: CanvasText; }
 .w-hero__stage .w-hero__drawing .nf, .w-hero__stage .w-hero__drawing [data-hero-grid] { stroke: CanvasText; }
}