#top .hero-core-ready > .hero-copy { grid-column: 1 / span 7; }
#top .hero-core-ready > .hero-panel--core { grid-column: 8 / -1; align-self: center; }
#top .hero-panel.hero-panel--core {
  display: block;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  overflow: visible;
}
#top .hero-panel--core::before,
#top .hero-panel--core::after,
#top .hero-panel--core > .hero-panel__star,
#top .hero-panel--core > p,
#top .hero-panel--core > dl { display: none; }
.hero-core {
  --core-ink: var(--color-warm-ink);
  --core-muted: rgba(var(--rgb-warm-ink), .57);
  --core-rule: rgba(var(--rgb-warm-ink), .15);
  --core-signal: var(--color-signal-red);
  position: relative;
  width: 100%;
  min-width: 0;
  color: var(--core-ink);
  font-family: var(--font-mono);
}
:root[data-theme="light"] .hero-core {
  padding: 0 14px 14px;
  border: 1px solid rgba(var(--rgb-warm-ink), .16);
  background: #0a080c;
}
.hero-core .hero-core__heading {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 14px 0;
  border-block: 1px solid var(--core-rule);
  color: var(--core-muted);
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: .06em;
}
.hero-core .hero-core__heading > span:first-child { color: var(--core-signal); }
.hero-core .hero-core__stage {
  position: relative;
  height: clamp(330px, 29vw, 430px);
  perspective: 1200px;
  background: radial-gradient(ellipse at 50% 61%, rgba(var(--rgb-signal-red), .09), transparent 58%);
}
.hero-core .hero-core__field { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hero-core .hero-core__field-lines { stroke: var(--core-rule); stroke-width: .8; }
.hero-core .hero-core__flow {
  stroke: var(--core-signal);
  stroke-width: 1.3;
  stroke-dasharray: 22 240;
  opacity: .7;
  animation: hero-core-flow 4s linear infinite paused;
}
.hero-core[data-active="true"] .hero-core__flow { animation-play-state: running; }
.hero-core .hero-core__nodes { fill: var(--core-signal); }
.hero-core .hero-core__field-labels { fill: var(--core-muted); font-size: 8px; letter-spacing: 1px; }
.hero-core .hero-core__assembly {
  --core-rx: 0deg;
  --core-ry: 0deg;
  --core-base-z: -20px;
  --core-route-z: 2px;
  --core-die-z: 32px;
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(220px, 23vw, 320px);
  aspect-ratio: 1;
  transform-style: preserve-3d;
  transform: translate(-50%, -48%) rotateX(calc(55deg + var(--core-rx))) rotateY(var(--core-ry)) rotateZ(-34deg);
  transition: transform 360ms cubic-bezier(.2, .75, .3, 1);
}
.hero-core[data-expanded="true"] .hero-core__assembly { --core-base-z: -54px; --core-route-z: 10px; --core-die-z: 108px; }
.hero-core .hero-core__layer {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 850ms cubic-bezier(.16, 1, .3, 1), box-shadow 850ms ease;
  cursor: pointer;
}
.hero-core[data-selected="logic"] .hero-core__layer--die,
.hero-core[data-selected="signal"] .hero-core__layer--routing,
.hero-core[data-selected="base"] .hero-core__layer--substrate { outline: 1px solid var(--core-signal); outline-offset: 3px; }
.hero-core .hero-core__layer--substrate {
  border: 1px solid rgba(var(--rgb-warm-ink), .3);
  background:
    radial-gradient(rgba(var(--rgb-warm-ink), .18) .8px, transparent .9px) 0 0 / 15px 15px,
    linear-gradient(135deg, #252027, #0a080c 70%);
  box-shadow: 3px 3px #31242c, 6px 6px #171017, 9px 9px #24151d, 12px 12px 32px rgba(0, 0, 0, .45);
  transform: translateZ(var(--core-base-z));
}
.hero-core .hero-core__board-mark { position: absolute; bottom: 13px; left: 15px; font-size: 10px; color: var(--core-muted); }
.hero-core .hero-core__layer--routing {
  inset: 12px;
  border: 1px solid rgba(var(--rgb-signal-red), .5);
  background: rgba(26, 9, 17, .72);
  box-shadow: 0 0 24px rgba(var(--rgb-signal-red), .07);
  transform: translateZ(var(--core-route-z));
}
.hero-core .hero-core__layer--routing svg { display: block; width: 100%; height: 100%; }
.hero-core .hero-core__routes { fill: none; stroke: var(--core-signal); stroke-opacity: .62; stroke-width: .8; }
.hero-core .hero-core__routing-window { fill: rgba(6, 5, 9, .92); stroke: rgba(var(--rgb-warm-ink), .25); }
.hero-core .hero-core__layer--die {
  inset: 24%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--rgb-warm-ink), .65);
  background: linear-gradient(145deg, #4a172c 0%, #1b101d 46%, #100c13 100%);
  box-shadow: 3px 3px #8e254b, 6px 6px #3a1427, 9px 9px #210f1d, 0 0 36px rgba(var(--rgb-signal-red), .13);
  transform: translateZ(var(--core-die-z));
}
.hero-core .hero-core__die-grid {
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(var(--rgb-warm-ink), .15);
  background: repeating-linear-gradient(0deg, transparent 0 9px, rgba(var(--rgb-signal-red), .15) 9px 10px), repeating-linear-gradient(90deg, transparent 0 9px, rgba(var(--rgb-warm-ink), .055) 9px 10px);
}
.hero-core .hero-core__die-mark { position: relative; display: grid; gap: 4px; text-align: center; text-shadow: 0 0 18px rgba(var(--rgb-signal-red), .24); }
.hero-core .hero-core__die-mark strong { color: #fff0eb; font-size: clamp(30px, 3.2vw, 46px); font-weight: 600; line-height: 1; letter-spacing: -.08em; }
.hero-core .hero-core__die-mark span { color: rgba(255, 240, 235, .7); font-size: 6px; letter-spacing: .12em; }
.hero-core .hero-core__die-code { position: absolute; left: 12px; bottom: 9px; color: rgba(255, 240, 235, .6); font-size: 6px; letter-spacing: .08em; }
.hero-core .hero-core__pins { position: absolute; z-index: -1; background: repeating-linear-gradient(90deg, #78616c 0 4px, transparent 4px 12px); transform: translateZ(var(--core-base-z)); transition: transform 850ms cubic-bezier(.16, 1, .3, 1); }
.hero-core .hero-core__pins--north { top: -11px; left: 11%; width: 78%; height: 16px; }
.hero-core .hero-core__pins--south { bottom: -11px; left: 11%; width: 78%; height: 16px; }
.hero-core .hero-core__pins--west { top: 11%; left: -11px; width: 16px; height: 78%; background: repeating-linear-gradient(0deg, #78616c 0 4px, transparent 4px 12px); }
.hero-core .hero-core__pins--east { top: 11%; right: -11px; width: 16px; height: 78%; background: repeating-linear-gradient(0deg, #78616c 0 4px, transparent 4px 12px); }
.hero-core .hero-core__annotation { position: absolute; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 8px; border: 1px solid transparent; background: rgba(10, 8, 12, .55); color: var(--core-muted); font: 10px/1.5 var(--font-mono); text-align: left; cursor: pointer; transition: color .2s ease, border-color .2s ease; }
.hero-core .hero-core__annotation[aria-pressed="true"] { color: var(--core-ink); border-color: rgba(var(--rgb-signal-red), .45); }
.hero-core .hero-core__annotation:hover { color: var(--core-ink); border-color: var(--core-signal); }
.hero-core .hero-core__annotation:focus-visible { outline: 2px solid var(--core-ink); outline-offset: 3px; }
.hero-core .hero-core__annotation > span:first-child { color: var(--core-signal); }
.hero-core .hero-core__annotation--logic { top: 18%; right: 2%; }
.hero-core .hero-core__annotation--signal { top: 52%; left: 0; }
.hero-core .hero-core__annotation--base { bottom: 10%; right: 4%; }
.hero-core .hero-core__controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0 16px; }
.hero-core .hero-core__controls button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 46px; padding: 12px 17px; border: 1px solid var(--core-signal); background: rgba(var(--rgb-signal-red), .07); color: var(--core-ink); font: 600 12px/1.4 var(--font-mono); cursor: pointer; transition: background-color .2s ease; }
.hero-core .hero-core__controls button:hover { background: rgba(var(--rgb-signal-red), .16); }
.hero-core .hero-core__controls button:focus-visible { outline: 2px solid var(--core-ink); outline-offset: 4px; }
.hero-core .hero-core__toggle-icon { color: var(--core-signal); font-size: 20px; line-height: 1; transition: transform .5s ease; }
.hero-core[data-expanded="true"] .hero-core__toggle-icon { transform: rotate(180deg); }
.hero-core .hero-core__hint { max-width: 24ch; color: var(--core-muted); font-size: 10px; line-height: 1.6; }
.hero-core .hero-core__detail { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 14px; padding: 18px 0; border-top: 1px solid var(--core-rule); }
.hero-core .hero-core__detail > strong { grid-column: 1 / -1; color: var(--core-ink); font: 600 15px/1.5 var(--font-sans, sans-serif); }
.hero-core .hero-core__detail > p { grid-column: 1 / -1; margin: 0; color: rgba(var(--rgb-warm-ink), .76); font: 13px/1.8 var(--font-sans, sans-serif); }
.hero-core .hero-core__tags { display: flex; flex-wrap: wrap; align-content: center; align-items: center; gap: 6px; min-width: 0; }
.hero-core .hero-core__tags > span { padding: 4px 6px; border: 1px solid var(--core-rule); color: var(--core-muted); font-size: 9px; line-height: 1.5; }
.hero-core .hero-core__detail-link { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; color: var(--core-ink); font: 500 11px/1.6 var(--font-mono); text-decoration: underline; text-underline-offset: 5px; }
.hero-core .hero-core__detail-link > span:last-child { color: var(--core-signal); }
.hero-core .hero-core__detail-link:hover { color: var(--core-signal); }
.hero-core .hero-core__detail-link:focus-visible { outline: 2px solid var(--core-ink); outline-offset: 4px; }
.hero-core .hero-core__footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; border-top: 1px solid var(--core-rule); padding-top: 13px; color: var(--core-muted); font-size: 10px; line-height: 1.6; }
.hero-core .hero-core__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@keyframes hero-core-flow { to { stroke-dashoffset: -262; } }
@media (max-width: 1040px) {
  #top .hero-core-ready > .hero-copy, #top .hero-core-ready > .hero-panel--core { grid-column: 1 / -1; }
  #top .hero-panel--core { width: min(100%, 620px); margin-top: 22px; }
  .hero-core .hero-core__stage { height: 420px; }
  .hero-core .hero-core__assembly { width: 300px; }
}
@media (max-width: 640px) {
  #top .hero-panel--core { margin-top: 14px; }
  .hero-core .hero-core__stage { height: 330px; }
  .hero-core .hero-core__assembly { width: 224px; }
  .hero-core .hero-core__heading { font-size: 9px; letter-spacing: .02em; }
  .hero-core .hero-core__annotation { font-size: 10px; }
  .hero-core .hero-core__annotation--signal { top: 62%; }
  .hero-core .hero-core__hint { max-width: 22ch; text-align: right; }
  .hero-core .hero-core__detail { grid-template-columns: minmax(0, 1fr); }
  .hero-core .hero-core__detail-link { justify-self: start; }
  .hero-core .hero-core__die-mark strong { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-core *, .hero-core *::before, .hero-core *::after { animation: none !important; transition: none !important; }
}