.hero--explore { overflow: hidden; border-bottom: 1px solid var(--line); background: var(--paper); }
.hero--explore.is-pannable { cursor: grab; touch-action: pan-y pinch-zoom; }
.hero--explore.is-pannable:focus-visible { outline: 2px solid var(--ink); outline-offset: -6px; }
.is-pannable .explore-canvas { transform: translate3d(var(--explore-pan, 0px), 0, 0); user-select: none; }
.hero--explore.is-dragging, .hero--explore.is-dragging .explore-object { cursor: grabbing; }
.explore-pan-help { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.explore-canvas { position: relative; width: min(calc(100% - 64px), 1280px); height: clamp(780px, calc(100svh - var(--nav-h)), 900px); margin: 0 auto; isolation: isolate; }
.explore-center { --stem-step: 42px; position: absolute; left: 50%; top: 50%; z-index: 3; width: clamp(313px, 29.44vw, 368px); transform: translate(-50%, -50%); display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: calc(7 * var(--stem-step)) auto calc(6 * var(--stem-step)); text-align: center; }
.explore-center h1 { grid-column: 1 / -1; grid-row: 2; margin: 8px 0; line-height: 1; }
/* Account for the official SVG's trailing viewBox space when aligning its letters. */
.explore-center h1 img { display: block; width: 118.13%; max-width: none; height: auto; margin: 0; }
.explore-stem { display: flex; flex-direction: column; align-items: center; align-self: start; color: #292b28; font: 32px/var(--stem-step) ui-monospace, SFMono-Regular, Consolas, monospace; }
.explore-stem span { display: block; height: var(--stem-step); }
.explore-stem--parallel { grid-column: 1; grid-row: 1; align-self: end; flex-direction: column-reverse; }
.explore-stem--compute { grid-column: 2; grid-row: 3; }
.explore-stem--core { grid-column: 3; grid-row: 1; align-self: end; flex-direction: column-reverse; }
.explore-stem--executor-prefix { grid-column: 4; grid-row: 1; align-self: end; }
.explore-stem--executor { grid-column: 4; grid-row: 3; }
.explore-object { position: absolute; display: block; z-index: 2; color: var(--ink); transform: rotate(var(--tilt)); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.explore-object:hover, .explore-object:focus-visible { z-index: 5; }
.explore-object:focus-visible { outline: 2px solid var(--ink); outline-offset: 10px; border-radius: 5px; }
.explore-drawing { display: block; filter: drop-shadow(0 12px 12px rgba(65,53,30,.09)); animation: explore-float var(--float-time, 8s) ease-in-out infinite; animation-delay: var(--float-delay, 0s); transition: translate .3s ease, filter .3s ease; }
.explore-drawing img { display: block; width: 100%; height: auto; }
.hero--explore.is-motion-idle .explore-drawing,
.hero--explore.is-motion-idle .explore-doodle { animation-play-state: paused; }
.explore-object:hover .explore-drawing, .explore-object:focus-visible .explore-drawing { animation-play-state: paused; translate: 0 -6px; filter: drop-shadow(0 17px 16px rgba(65,53,30,.15)); }
.explore-label { display: flex; align-items: baseline; justify-content: center; gap: 9px; margin: 9px auto 0; font-size: 13px; line-height: 1.5; font-weight: 600; }
.explore-label > span { color: #72766a; transition: translate .2s ease; }
.explore-object:hover .explore-label, .explore-object:focus-visible .explore-label { text-decoration: underline; text-underline-offset: 4px; }
.explore-object:hover .explore-label > span { translate: 2px -2px; }
.explore-object--isa { top: 8%; left: 5%; width: 232px; --tilt: -9deg; }
.explore-object--rtl { top: 7%; right: 7%; width: 228px; --tilt: 7deg; --float-time: 7.5s; --float-delay: -2s; }
.explore-object--fpga { top: 46%; right: 3%; width: 190px; --tilt: 11deg; --float-time: 9s; --float-delay: -4s; }
.explore-object--verify { top: 50%; left: 2%; width: 250px; --tilt: 4deg; --float-time: 8.5s; --float-delay: -3s; }
.explore-object--docs { bottom: 4%; left: 19%; width: 190px; --tilt: -7deg; --float-time: 7.5s; --float-delay: -1s; }
.explore-doodle { position: absolute; pointer-events: none; z-index: 0; animation: explore-float 9s ease-in-out infinite; }
.explore-doodle--ring { width: 42px; height: 42px; border: 8px solid #e6c56d; border-radius: 50%; top: 26%; left: 31%; }
.explore-doodle--bits { top: 42%; left: 7%; color: #b6b3a8; font: 12px/1.6 ui-monospace, monospace; letter-spacing: .2em; transform: rotate(-10deg); }
.explore-doodle--dot { width: 18px; height: 18px; border-radius: 50%; background: #97bda6; top: 35%; right: 14%; }
.explore-doodle--asterisk { width: 57px; height: 57px; bottom: 12%; right: 25%; color: #d5a083; }
.explore-doodle--trace { width: 85px; height: 40px; top: 10%; left: 25%; color: #b9b9ac; }
@keyframes explore-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@media (max-width: 1050px) {
  .explore-canvas { width: calc(100% - 44px); }
  .explore-center { --stem-step: 38px; width: 313px; }
  .explore-stem { font-size: 29px; }
  .explore-object--isa { width: 190px; left: 3%; }
  .explore-object--rtl { width: 188px; right: 3%; }
  .explore-object--fpga { width: 162px; right: 2%; }
  .explore-object--verify { width: 210px; left: 1%; }
  .explore-object--docs { width: 174px; left: 16%; }
  .explore-doodle--ring { top: 32%; left: 25%; }
  .explore-doodle--trace { display: none; }
}
@media (min-width: 701px) and (max-width: 850px) {
  .explore-center { --stem-step: 34px; width: 267px; }
  .explore-stem { font-size: 26px; }
  .explore-object--docs { width: 162px; }
  .explore-object--isa { width: 165px; }
  .explore-object--rtl { width: 163px; }
  .explore-object--fpga { width: 145px; }
  .explore-object--verify { width: 184px; }
  .explore-label { font-size: 12px; }
}
@media (max-width: 700px) {
  .explore-canvas { width: calc(100% - 32px); height: 1040px; }
  .explore-center { --stem-step: 29px; top: 44%; width: 236px; }
  .explore-stem { font-size: 24px; }
  .explore-center h1 { margin: 7px 0; }
  .explore-object--isa { top: 5%; left: 1%; width: 146px; }
  .explore-object--rtl { top: 12%; right: 1%; width: 142px; }
  .explore-object--fpga { top: 68.5%; right: 3%; width: 124px; }
  .explore-object--verify { top: 69%; left: 0; width: 157px; }
  .explore-object--docs { bottom: 2%; left: 7%; width: 147px; }
  .explore-label { margin-top: 7px; gap: 5px; font-size: 11px; }
  .explore-doodle--ring { width: 24px; height: 24px; border-width: 5px; top: 37%; left: 4%; }
  .explore-doodle--bits { display: none; }
  .explore-doodle--dot { width: 12px; height: 12px; top: 5%; right: 34%; }
  .explore-doodle--asterisk { width: 32px; height: 32px; bottom: 10%; right: 3%; }
}
@media (max-width: 359px) {
  .explore-center { --stem-step: 28px; width: 212px; }
  .explore-stem { font-size: 22px; }
  .explore-object--isa { width: 128px; }
  .explore-object--rtl { width: 124px; }
  .explore-object--fpga { width: 120px; }
  .explore-object--verify { width: 140px; }
  .explore-object--docs { width: 137px; }
  .explore-doodle--ring { left: 1%; }
}
@media (prefers-reduced-motion: reduce) {
  .explore-drawing, .explore-doodle { animation: none; }
  .explore-drawing, .explore-label > span { transition: none; }
  .explore-object:hover .explore-drawing, .explore-object:focus-visible .explore-drawing, .explore-object:hover .explore-label > span { translate: none; }
}