:root {
  --bg: #ffffff;
  --wire: #d9d9d9;
  --wire-strong: #cfcfcf;
  --wire-focus: #c8c8c8;
  --wire-focus-strong: #bfbfbf;
  --label: #111111;
  --t-wire: 360ms;
  --t-wire-complete: 180ms;
  --t-hex: 360ms;
  --t-outline: 360ms;
  --t-fill: 220ms;
  --t-stagger: 90ms;
  --t-label: 160ms;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  background: var(--bg);
  overflow: hidden;
}

main {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
}

svg {
  width: 100%;
  height: 100%;
  display: block;
}

#scene {
  outline: none;
}

body:not(.ready) .hex {
  transition: none;
}

body:not(.ready) .hex-wiring {
  transition: none;
}

.hex {
  cursor: pointer;
  filter: url(#depth);
  -webkit-tap-highlight-color: transparent;
  transform: translate(var(--x, 0px), var(--y, 0px)) scale(1);
  transition: transform var(--t-hex) cubic-bezier(0.2, 0.7, 0.2, 1),
    opacity var(--t-hex) ease;
  transform-origin: 0 0;
}

.hex-wiring {
  pointer-events: none;
  transform: translate(var(--x, 0px), var(--y, 0px)) scale(1);
  transition: transform var(--t-hex) cubic-bezier(0.2, 0.7, 0.2, 1);
  transform-origin: 0 0;
}

.hex.secondary {
  pointer-events: none;
}

.hex.secondary.is-visible {
  pointer-events: auto;
}

.hex-surface {
  fill: #ffffff;
}

.hex-rim {
  fill: url(#rimLight);
  opacity: 0.26;
  mix-blend-mode: multiply;
}

.hex-spec {
  fill: url(#specular);
  opacity: 0.45;
  mix-blend-mode: screen;
}

.hex.secondary .hex-surface,
.hex.secondary .hex-rim,
.hex.secondary .hex-spec {
  opacity: 0;
  transition: opacity var(--t-fill) ease;
  transition-delay: calc(var(--delay, 0ms) + 120ms);
}

.hex.secondary.is-visible .hex-surface,
.hex.secondary.is-visible .hex-rim,
.hex.secondary.is-visible .hex-spec {
  opacity: 1;
}

.wire {
  fill: none;
  stroke: var(--wire);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  stroke-dasharray: var(--len, 120);
  stroke-dashoffset: var(--len, 120);
  transition: opacity 160ms ease;
}

.wire.strong {
  stroke: var(--wire-strong);
  stroke-width: 1.2;
}

.wire-hex {
  stroke-width: 0.9;
}

.hex-wiring.is-hovered .wire {
  opacity: 1;
  animation: draw var(--t-wire) ease forwards;
}

.hex-wiring.is-hovered.is-locked .wire {
  animation: none;
  stroke-dashoffset: 0;
}

.hex-wiring.is-expanded .wire {
  opacity: 1;
  stroke-dashoffset: 0;
  animation: none;
  transition: stroke-dashoffset var(--t-wire-complete) ease;
}

.hex-wiring.is-focus-branch .wire {
  stroke: var(--wire-focus);
}

.hex-wiring.is-focus-branch .wire.strong {
  stroke: var(--wire-focus-strong);
}

.hex-outline {
  fill: none;
  stroke: var(--wire-strong);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  stroke-dasharray: var(--len, 120);
  stroke-dashoffset: var(--len, 120);
  transition: opacity var(--t-outline) ease;
}

.hex.is-focus-branch .hex-outline {
  stroke: var(--wire-focus);
}

.hex.secondary.is-visible:not(.is-expanded) .hex-outline {
  opacity: 1;
  animation: draw var(--outline-duration, var(--t-outline)) ease forwards;
  animation-delay: var(--outline-delay, var(--delay, 0ms));
}

.hex.root .hex-outline {
  opacity: 1;
  stroke-dashoffset: 0;
  animation: none;
}

.hex.is-expanded .hex-outline {
  opacity: 0;
}

.hex-label {
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  fill: var(--label);
  opacity: 0;
  transform: translate(0, 6px);
  transition: opacity var(--t-label) ease, transform var(--t-label) ease;
  pointer-events: none;
}

.hex.root .hex-label {
  opacity: 1;
  transform: translate(0, 0);
}

.hex.secondary.is-visible .hex-label {
  opacity: 1;
  transform: translate(0, 0);
}

.hex.is-leaf .hex-label {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.hex.secondary.has-children.is-expanded .hex-label {
  opacity: 0.5;
}

.hex.secondary.is-visible.is-dimmed .hex-label {
  opacity: 0.5;
}

.modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  --modal-bg: #f8f8f8;
  --modal-bg-image: none;
  --modal-bg-overlay: none;
  --modal-bg-size: cover;
  --modal-bg-position: center;
  --modal-title: #111111;
  --modal-text: #111111;
  --modal-text-muted: rgba(17, 17, 17, 0.7);
  --modal-link: #111111;
  --modal-link-border: rgba(17, 17, 17, 0.35);
  --modal-wire: var(--wire);
  --modal-wire-strong: var(--wire-strong);
  --modal-frame: var(--wire-strong);
  --modal-frame-inner: var(--wire);
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease;
  z-index: 10;
}

.modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.92);
}

.modal-card {
  position: relative;
  width: min(560px, 88vw);
  max-height: min(84vh, 720px);
  padding: 44px 46px 38px;
  display: flex;
  flex-direction: column;
  background-color: var(--modal-bg);
  background-image: var(--modal-bg-overlay), var(--modal-bg-image);
  background-size: 100% 100%, var(--modal-bg-size);
  background-position: center, var(--modal-bg-position);
  background-repeat: no-repeat;
  transform: scale(0.988);
  transition: transform 260ms ease;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.14),
    inset 0 1px 2px rgba(255, 255, 255, 0.9),
    inset 0 -1px 3px rgba(0, 0, 0, 0.04);
}

.modal.is-open .modal-card {
  transform: translateY(0) scale(1);
}

.modal-wiring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.modal-outline {
  position: absolute;
  inset: -16px;
  width: calc(100% + 32px);
  height: calc(100% + 32px);
  pointer-events: none;
  overflow: visible;
}

.modal-line {
  fill: none;
  stroke: var(--modal-wire);
  stroke-width: 0.85;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  stroke-dasharray: var(--len, 120);
  stroke-dashoffset: var(--len, 120);
  transition: opacity 160ms ease;
}

.modal.is-open .modal-line {
  opacity: 0.6;
  animation: draw var(--t-wire) ease forwards;
}

.modal-line.strong {
  stroke: var(--modal-wire-strong);
  stroke-width: 1;
}

.modal-trace {
  stroke-width: 0.7;
  opacity: 0;
}

.modal.is-open .modal-trace {
  opacity: 0.3;
  animation: draw var(--t-wire) ease forwards;
  animation-delay: 40ms;
}

.modal-frame {
  fill: none;
  stroke: var(--modal-frame);
  stroke-width: 0.7;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  stroke-dasharray: var(--len, 220);
  stroke-dashoffset: var(--len, 220);
}

.modal-frame.inner {
  stroke: var(--modal-frame-inner);
  stroke-width: 0.6;
}

.modal.is-open .modal-frame {
  opacity: 0.42;
  animation: draw var(--t-outline) ease forwards;
  animation-delay: 140ms;
}

.modal.is-open .modal-frame.outer {
  animation-delay: 140ms;
}

.modal.is-open .modal-frame.inner {
  opacity: 0.28;
  animation-delay: 220ms;
}


.modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 30px;
  height: 30px;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.modal-close::before,
.modal-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 1px;
  background: var(--wire-strong);
  transform-origin: center;
}

.modal-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.modal-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.modal-title {
  margin: 0 0 14px;
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-size: 20px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--modal-title);
}

.modal-link {
  display: inline-block;
  margin-bottom: 16px;
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--modal-link);
  text-decoration: none;
  border-bottom: 1px solid var(--modal-link-border);
}

.modal-content {
  margin: 0;
  max-width: 48ch;
  min-height: 0;
  overflow-y: auto;
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-size: 13px;
  line-height: 1.6;
  color: var(--modal-text-muted);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.modal-content::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.modal-content p {
  margin: 0 0 12px;
}

.modal-content p:last-child {
  margin-bottom: 0;
}

.modal-content ul {
  margin: 0 0 12px;
  padding-left: 18px;
}

.modal-content li {
  margin-bottom: 6px;
}

.modal-content a {
  color: var(--modal-link);
  text-decoration: none;
  border-bottom: 1px solid var(--modal-link-border);
}

.modal-content .content-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.modal-content .content-link svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.modal-content img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 10px 0 16px;
  border-radius: 4px;
}

.hex:focus,
.hex:focus-visible {
  outline: none;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hex,
  .hex-wiring,
  .hex-label,
  .wire,
  .hex-outline,
  .modal,
  .modal-card,
  .modal-line,
  .modal-frame,
  .hex.secondary .hex-surface,
  .hex.secondary .hex-rim,
  .hex.secondary .hex-spec {
    transition-duration: 1ms !important;
    animation: none !important;
  }
}

@media (max-width: 640px) {
  .hex-label {
    font-size: 11px;
    letter-spacing: 0.06em;
  }
}