.hero-art.engine-art {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  isolation: isolate;
  min-width: 0;
  height: auto !important;
  min-height: 590px;
  align-self: start;
  --engine-figure-height: 424px;
  --engine-detail-height: 110px;
  --engine-detail-gap: 12px;
  color: var(--ink, #171715);
}
.engine-figure { position: relative; width: 100%; flex: 0 0 var(--engine-figure-height); height: var(--engine-figure-height); min-height: var(--engine-figure-height); max-height: var(--engine-figure-height); }
.engine-svg { display: block; width: 100%; height: 100%; overflow: visible; font-family: var(--mono, "Berkeley Mono", monospace); }
.engine-svg text { text-transform: uppercase; }
.engine-box-back, .engine-box-front, .engine-api, .engine-leaders, .engine-learning { pointer-events: none; }
.engine-back-outline { fill: none; stroke: #aeaeae; stroke-width: .8; }
.engine-back-seam { fill: none; stroke: #c4c4c4; stroke-width: .7; }
.engine-glass-left { fill: url(#engine-glass-left); stroke: #939393; stroke-width: .85; }
.engine-glass-right { fill: url(#engine-glass-right); stroke: #939393; stroke-width: .85; }
.engine-roof { fill: #ffffff30; stroke: #939393; stroke-width: .85; }
.engine-glass-edge { fill: none; stroke: #727272; stroke-width: .9; }
.engine-etch { fill: #4d4942; opacity: 1; stroke: #ffffff; stroke-width: 1.1; paint-order: stroke fill; font-size: 15px; letter-spacing: .025em; }
.engine-api text { fill: #38352f; font-size: 14px; letter-spacing: .04em; }
.engine-api path { fill: none; stroke: #939393; stroke-width: .9; }
.engine-api rect { fill: var(--paper, #f5f3f0); stroke: none; }
.engine-plane { cursor: pointer; }
.engine-plane-face { fill: url(#engine-plane-fill); stroke: none; }
.engine-slab-left, .engine-slab-right { fill: url(#engine-slab-edge); stroke: #a5a5a5; stroke-width: .65; }
.engine-slab-left { fill-opacity: .85; }
.engine-plane-boundary { fill: none; stroke: #a5a5a5; stroke-width: 1; transition: stroke 200ms ease; }
.engine-plane.is-selected .engine-plane-boundary { stroke: #5c5c5c; }
.engine-plane.is-selected .engine-plane-face { fill: #ffffff; }
.engine-plane.is-selected .engine-slab-left, .engine-plane.is-selected .engine-slab-right { stroke: #707070; }
.engine-writing { pointer-events: none; }
.engine-face-label { fill: #625e56; font-size: 14px; letter-spacing: 0; }
.engine-plane.is-selected .engine-face-label { fill: #171715; }
.engine-face-label .engine-redline { fill: #a73731; color: #a73731; text-decoration: line-through; text-decoration-color: #a73731; text-decoration-thickness: 1.4px; }
.engine-code-keyword { fill: #75597f; color: #75597f; }
.engine-code-number { fill: #8d6933; color: #8d6933; }
.engine-boundary-shine { fill: none; stroke-width: 2; opacity: 0; pointer-events: none; }
.engine-leaders path { fill: none; stroke: #b1b1b1; stroke-width: .75; transition: stroke 200ms ease; }
.engine-leaders path.is-selected { stroke: #606060; }
.engine-learning-line { fill: none; stroke: #939393; stroke-width: .9; }
.engine-learning-flow { fill: none; stroke: #717171; stroke-width: 1.3; stroke-dasharray: 8 340; animation: engine-learning-return 8s linear infinite; }
.engine-review-ground { fill: var(--paper, #f5f3f0); stroke: none; }
.engine-review-text { fill: #736d63; font-size: 12px; letter-spacing: 0; }
.engine-art:not(.is-expanded) .engine-learning-flow, .engine-art.is-paused * { animation-play-state: paused !important; }
.engine-labels { position: absolute; inset: 0; pointer-events: none; }
.engine-layer-label {
  position: absolute;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  align-content: center;
  gap: 10px;
  min-height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: #7b756b;
  text-align: left;
  font: 400 12px/1.4 var(--mono, "Berkeley Mono", monospace);
  text-transform: uppercase;
  letter-spacing: -.015em;
  transform: translateY(-50%);
  cursor: pointer;
  pointer-events: auto;
  transition: color 180ms ease;
}
.engine-layer-number { color: #98948c; font: inherit; transition: color 180ms ease; }
.engine-layer-copy, .engine-layer-name { display: block; max-width: 100%; }
.engine-layer-name { white-space: nowrap; }
.engine-layer-label.is-selected, .engine-layer-label:hover, .engine-layer-label:focus-visible { color: #171715; }
.engine-layer-label.is-selected .engine-layer-number { color: #4f4941; }
.engine-layer-label:focus-visible { outline: 1px solid #6d675e; outline-offset: 4px; }
.engine-detail { box-sizing: border-box; flex: 0 0 var(--engine-detail-height); height: var(--engine-detail-height); min-height: var(--engine-detail-height); max-height: var(--engine-detail-height); margin: var(--engine-detail-gap) 0 0; padding: 15px 0 7px; border-top: 1px solid var(--line, #d2cdc5); }
.engine-detail-title { margin: 0 0 7px; color: var(--ink, #171715); font: 23px/1.2 var(--serif, Reckless, serif); letter-spacing: -.018em; }
.engine-detail-number { display: inline-block; margin-right: 6px; color: #686868; font: 400 12px/1.4 var(--mono, "Berkeley Mono", monospace); letter-spacing: 0; }
.engine-detail-description { max-width: 510px; margin: 0; color: var(--body, #68635b); font: 16px/1.5 var(--sans, Mori, sans-serif); }
.engine-controls { display: flex; align-items: center; flex: 0 0 44px; height: 44px; min-height: 44px; max-height: 44px; }
.engine-explore { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: space-between; gap: 20px; width: 200px; max-width: 100%; height: 44px; min-height: 44px; padding: 10px 15px; border: 1px solid #a19a90; border-radius: 3px; background: transparent; color: var(--ink, #171715); font: 12px/1.4 var(--mono, "Berkeley Mono", monospace); text-transform: uppercase; letter-spacing: -.015em; cursor: pointer; }
.engine-explore:hover { border-color: #6b645b; background: rgba(255,255,255,.65); }
.engine-explore svg { width: 20px; height: 20px; transition: transform 220ms ease; }
.engine-explore svg path { fill: none; stroke: currentColor; stroke-width: 1.1; }
.engine-explore:hover svg { transform: translateX(3px); }
.engine-explore[aria-expanded="true"] svg { transform: rotate(-90deg); }
.engine-explore:focus-visible { outline: 1px solid #787268; outline-offset: 4px; }
.hero-art.engine-art.is-expanded { height: auto !important; min-height: 590px; }
.hero-art.engine-art.engine-compact { min-height: 760px; --engine-figure-height: 608px; --engine-detail-gap: 8px; }
.hero-art.engine-art.engine-compact.is-expanded { height: auto !important; }
.engine-example-panel { flex: 0 0 auto; min-height: 180px; margin: 16px 0 0; padding: 18px 20px; border: 1px solid #c7c1b7; border-radius: 6px; background: linear-gradient(135deg,rgba(255,255,255,.8),rgba(255,255,255,.4)); box-shadow: inset 0 1px 0 #fff; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.engine-example-panel[hidden] { display: none; }
.engine-example-context { margin: 0 0 14px; color: #756f65; font: 12px/1.5 var(--mono, "Berkeley Mono", monospace); text-transform: uppercase; }
.engine-example-facts { margin: 0; display: grid; gap: 14px; }
.engine-example-facts>div { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.engine-example-facts dt { color: #756f65; font: 12px/1.5 var(--mono, "Berkeley Mono", monospace); text-transform: uppercase; }
.engine-example-facts dd { margin: 0; color: #171715; font: 15px/1.5 var(--sans, Mori, sans-serif); text-align: right; }
.engine-example-code { margin: 0; color: #38342f; font: 12px/1.9 var(--mono, "Berkeley Mono", monospace); white-space: pre-wrap; text-transform: uppercase; }
.engine-example-panel blockquote { margin: 0; color: #38342f; font: 16px/1.5 var(--sans, Mori, sans-serif); }
.engine-example-note { margin: 0 0 10px; color: #716a60; font: 14px/1.5 var(--sans, Mori, sans-serif); }
.engine-example-status { margin: 0 0 10px; color: #715c36; font: 12px/1.5 var(--mono, "Berkeley Mono", monospace); text-transform: uppercase; }
.engine-compact .engine-example-panel { min-height: 210px; padding: 16px 14px; }
.engine-compact .engine-example-facts>div { display: block; }
.engine-compact .engine-example-facts dd { margin-top: 3px; text-align: left; }
.engine-compact .engine-example-panel blockquote { font-size: 15px; line-height: 1.5; }
.hero-art.engine-art.engine-compact.is-expanded { min-height: 760px; }
.engine-compact .engine-detail { padding-top: 14px; }
.engine-compact .engine-layer-label { grid-template-columns: 22px minmax(0, 1fr); gap: 10px; font-size: 13px; }
@keyframes engine-learning-return { to { stroke-dashoffset: -348; } }
@media (max-width: 600px) {
  .engine-detail-title { font-size: 22px; }
  .engine-detail-description { font-size: 16px; line-height: 1.45; }
}
@media (prefers-reduced-motion: reduce) {
  .engine-art * { animation: none !important; transition: none !important; }
  .engine-learning-flow, .engine-boundary-shine { display: none; }
}

/* One rounded contour clips the frost and every outer face. */
.hero-art.engine-art .engine-glass-left,
.hero-art.engine-art .engine-glass-right,
.hero-art.engine-art .engine-roof { stroke: none; }
.hero-art.engine-art .engine-box-outline { fill: none; stroke: #727272; stroke-width: .9; stroke-linecap: round; stroke-linejoin: round; }
.hero-art.engine-art .engine-glass-edge { stroke-linecap: round; stroke-linejoin: round; }
.hero-art.engine-art .engine-slab-body { fill: url(#engine-slab-edge); stroke: #a5a5a5; stroke-width: .65; stroke-linejoin: round; }
.hero-art.engine-art .engine-plane.is-selected .engine-slab-body { stroke: #707070; }

/* Neutral frost is painted in SVG; only the internal layers are diffused. */
.hero-art.engine-art .engine-frost { pointer-events:none; }
.hero-art.engine-art .engine-frost-veil { fill:#ffffff;fill-opacity:.09;stroke:none; }
.hero-art.engine-art .engine-frost-grain { fill:#ffffff;stroke:none; }
.hero-art.engine-art .engine-frost-reflection { fill:url(#engine-frost-reflection);stroke:none; }
.hero-art.engine-art .engine-roof { fill:url(#engine-glass-roof); }
.hero-art.engine-art .engine-etch { fill:#707070;stroke:none;filter:url(#engine-engraving);paint-order:normal;font-weight:400;letter-spacing:-.25px; }

/* Ground-plane glass slabs: physical faces, an outer fade and luminous traffic. */
.hero-art.engine-art .engine-box-outline { stroke:#ffffffde;stroke-width:.85; }
.hero-art.engine-art .engine-glass-edge { stroke:#ffffffe0;stroke-width:.85; }
.hero-art.engine-art .engine-depth-left { fill:url(#engine-depth-left);stroke:none; }
.hero-art.engine-art .engine-depth-right { fill:url(#engine-depth-right);stroke:none; }
.hero-art.engine-art .engine-glass-contact { fill:none;stroke:#5d5d5d;stroke-opacity:.17;stroke-width:5; }
.hero-art.engine-art .engine-api .engine-road-shadow { fill:#666666;fill-opacity:.12;stroke:none;filter:url(#engine-contact-soften); }
.hero-art.engine-art .engine-api .engine-road-side,
.hero-art.engine-art .engine-api .engine-road-end { fill:url(#engine-road-edge);stroke:#ffffff85;stroke-width:.45;stroke-linejoin:round; }
.hero-art.engine-art .engine-api .engine-road-surface { fill:url(#engine-road-glass);stroke:none; }
.hero-art.engine-art .engine-api .engine-road-grain { fill:#ffffff;stroke:none;opacity:.8; }
.hero-art.engine-art .engine-api .engine-road-lip { fill:none;stroke:#ffffffe6;stroke-width:.75;stroke-linejoin:round; }
.hero-art.engine-art .engine-api .engine-road-glow,
.hero-art.engine-art .engine-api .engine-road-core { fill:none;stroke:#ffffff;stroke-linecap:round;stroke-dasharray:none;stroke-dashoffset:0;animation:none; }
.hero-art.engine-art .engine-api .engine-road-glow { stroke-width:6;opacity:1; }
.hero-art.engine-art .engine-api .engine-road-core { stroke-width:2.5; }
.hero-art.engine-art .engine-port-backs,
.hero-art.engine-art .engine-port-fronts,
.hero-art.engine-art .engine-api-annotation { pointer-events:none; }
.hero-art.engine-art .engine-port-return { fill:#666666;fill-opacity:.45;stroke:none; }
.hero-art.engine-art .engine-port-shadow { fill:none;stroke:#747474;stroke-opacity:.65;stroke-width:.75;stroke-linejoin:round; }
.hero-art.engine-art .engine-port-lip { fill:none;stroke:#ffffff;stroke-opacity:.96;stroke-width:1.05;stroke-linejoin:round; }
.hero-art.engine-art .engine-api-annotation text { fill:#686868;font:400 12px/1 var(--mono,"Berkeley Mono",monospace);letter-spacing:0; }
.hero-art.engine-art .engine-api-link { fill:none;stroke:#a4a4a4;stroke-width:.7;stroke-linecap:round;stroke-linejoin:round; }
@media(prefers-reduced-motion:reduce) { .engine-road-traffic { display:none; } }

/* The connector uses the same numbered selector and description as the layers. */
.engine-api-help{z-index:4}
.hero-art.engine-art .engine-api-annotation.is-selected .engine-api-link{stroke:#606060}