:root {
  color-scheme: dark;
  font-family: var(
    --label-font,
    "Roboto Condensed",
    "Arial Narrow",
    Arial,
    sans-serif
  );
  color: var(--text-color, #ffffff);
  background: var(--background-color, #1f2937);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-width: 320px;
  min-height: 100%;
  margin: 0;
}

body {
  min-height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 48% 46%,
      rgb(
        var(--background-glow-color, 192 168 255) /
          var(--background-glow-opacity, 0.06)
      ),
      transparent 34%
    ),
    var(--background-color, #1f2937);
}

a {
  color: inherit;
}

.constellation-shell {
  position: relative;
  min-height: 100svh;
  isolation: isolate;
}

.prototype-header {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: clamp(22px, 4vw, 48px) clamp(24px, 5vw, 72px);
  pointer-events: none;
}

.prototype-nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.5vw, 34px);
  pointer-events: auto;
}

.site-mark {
  font-family: var(--display-font, "Anton", Impact, sans-serif);
  font-size: 25px;
  line-height: 1;
  text-decoration: none;
  pointer-events: auto;
}

.site-mark span,
.km-logo span {
  color: var(--primary-color, #c0a8ff);
}

.view-toggle {
  color: rgb(255 255 255 / 62%);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 180ms ease;
}

.view-toggle:hover,
.view-toggle:focus-visible {
  color: var(--primary-color, #c0a8ff);
}

.prototype-header p,
.interaction-hint {
  margin: 0;
  color: rgb(255 255 255 / 55%);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.project-gallery {
  width: min(1120px, calc(100% - clamp(48px, 10vw, 144px)));
  margin: 0 auto;
  padding: clamp(104px, 12vw, 142px) 0 clamp(56px, 8vw, 96px);
}

.project-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 54px) clamp(18px, 3vw, 40px);
}

.gallery-card {
  display: grid;
  gap: 9px;
  min-width: 0;
  text-decoration: none;
}

.gallery-card-thumbnail,
.gallery-card-title {
  border: 1px solid rgb(255 255 255 / 18%);
  background: rgb(5 5 7 / 76%);
  transition:
    border-color 180ms ease,
    background-color 180ms ease,
    transform 180ms ease;
}

.gallery-card-thumbnail {
  position: relative;
  display: grid;
  aspect-ratio: 16 / 8;
  place-items: center;
  overflow: hidden;
}

.gallery-card-thumbnail .gallery-card-logo {
  width: var(--logo-width, var(--default-logo-width, 58%));
  max-width: 78%;
  max-height: min(var(--logo-max-height, var(--default-logo-max-height, 58%)), 72%);
  object-fit: contain;
  filter: var(--logo-filter, none);
  opacity: 1;
  transform: translate(var(--gallery-logo-x, 0%), var(--gallery-logo-y, 0%))
    scale(var(--gallery-logo-zoom, 1));
}

.gallery-card-thumbnail .km-logo {
  width: auto;
  max-width: none;
  font-size: clamp(42px, 6vw, 76px);
}

.gallery-card-title {
  display: flex;
  min-height: clamp(54px, 6vw, 68px);
  align-items: center;
  padding: 15px clamp(16px, 2.2vw, 26px);
  font-family: var(--display-font, "Anton", Impact, sans-serif);
  font-size: clamp(18px, 2.1vw, 28px);
  letter-spacing: 0.02em;
  line-height: 1.05;
  text-transform: uppercase;
}

.gallery-card:hover .gallery-card-thumbnail,
.gallery-card:hover .gallery-card-title,
.gallery-card:focus-visible .gallery-card-thumbnail,
.gallery-card:focus-visible .gallery-card-title {
  border-color: var(--primary-color, #c0a8ff);
  background: rgb(192 168 255 / 8%);
}

.gallery-card:hover .gallery-card-thumbnail,
.gallery-card:focus-visible .gallery-card-thumbnail {
  transform: translateY(-2px);
}

.gallery-card:focus-visible {
  outline: none;
}

body.gallery-is-open {
  overflow-y: auto;
}

.gallery-is-open .constellation,
.gallery-is-open .interaction-hint {
  display: none;
}

.constellation {
  position: absolute;
  inset: clamp(82px, 10vw, 112px) clamp(12px, 4vw, 56px) clamp(54px, 8vw, 76px);
  min-height: var(--constellation-min-height, 480px);
}

.connections {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.connections line {
  stroke: var(--connection-color, rgb(255 255 255 / 34%));
  stroke-width: var(--connection-width, 1.25);
  vector-effect: non-scaling-stroke;
  transition: stroke var(--connection-transition-duration, 240ms) ease;
}

.node {
  position: absolute;
  z-index: 2;
  top: var(--y);
  left: var(--x);
  width: var(--open);
  height: var(--open);
  color: var(--text-color, #ffffff);
  text-decoration: none;
  transform: translate(
    calc(-50% + var(--motion-x, 0px)),
    calc(-50% + var(--motion-y, 0px))
  );
  will-change: transform;
  cursor: var(--cursor-rest, grab);
  touch-action: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.node.is-dragging {
  z-index: 3;
  cursor: var(--cursor-dragging, grabbing);
}

.node-core {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: var(--rest);
  height: var(--rest);
  place-items: center;
  overflow: hidden;
  border: 0 solid var(--primary-color, #c0a8ff);
  border-radius: 50%;
  background: var(--primary-color, #c0a8ff);
  box-shadow: 0 0 var(--rest-glow-radius, 20px)
    rgb(var(--node-glow-color, 192 168 255) / var(--rest-glow-opacity, 0.16));
  transform: translate(-50%, -50%);
  transition:
    width var(--expansion-duration, 430ms) var(--expansion-easing),
    height var(--expansion-duration, 430ms) var(--expansion-easing),
    border-width 260ms ease,
    background-color var(--color-duration, 240ms) ease,
    box-shadow var(--expansion-duration, 430ms) cubic-bezier(0.18, 1.1, 0.32, 1);
}

.node:hover .node-core,
.node:focus-visible .node-core {
  width: var(--open);
  height: var(--open);
  border-width: var(--node-border-width, 3px);
  background: var(--node-interior-color, #050507);
  box-shadow:
    0 0 0 1px rgb(var(--node-glow-color, 192 168 255) / 12%),
    0 0 var(--expanded-glow-radius, 38px)
      rgb(
        var(--node-glow-color, 192 168 255) / var(--expanded-glow-opacity, 0.2)
      );
}

.node:focus-visible {
  outline: none;
}

.node-core img,
.km-logo {
  width: var(--logo-width, var(--default-logo-width, 58%));
  max-height: var(--logo-max-height, var(--default-logo-max-height, 58%));
  object-fit: contain;
  filter: var(--logo-filter, none);
  opacity: 0;
  transform: translate(var(--logo-offset-x, 0%), var(--logo-offset-y, 0%))
    scale(calc(var(--logo-rest-scale, 0.72) * var(--logo-crop-scale, 1)));
  transition:
    opacity var(--logo-fade-duration, 150ms) ease var(--logo-fade-delay, 70ms),
    transform var(--logo-scale-duration, 410ms) var(--expansion-easing)
      var(--logo-scale-delay, 35ms);
}

.node:hover .node-core img,
.node:hover .km-logo,
.node:focus-visible .node-core img,
.node:focus-visible .km-logo {
  opacity: 1;
  transform: translate(var(--logo-offset-x, 0%), var(--logo-offset-y, 0%))
    scale(var(--logo-crop-scale, 1));
}

.km-logo {
  width: auto;
  font-family: var(--display-font, "Anton", Impact, sans-serif);
  font-size: var(--mark-font-size, 38px);
  line-height: 1;
  white-space: nowrap;
}

.node-label {
  position: absolute;
  top: calc(50% + (var(--rest) / 2) + var(--label-rest-gap, 13px));
  left: 50%;
  color: var(--label-color, rgb(255 255 255 / 82%));
  font-size: var(--label-size, 12px);
  font-weight: var(--label-weight, 500);
  letter-spacing: var(--label-letter-spacing, 0.05em);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  transform: translateX(-50%);
  transition:
    top var(--label-duration, 300ms) cubic-bezier(0.2, 0.78, 0.2, 1),
    color 200ms ease;
}

.node:hover .node-label,
.node:focus-visible .node-label {
  top: calc(50% + (var(--open) / 2) + var(--label-expanded-gap, 14px));
  color: var(--label-active-color, #ffffff);
}

.interaction-hint {
  position: fixed;
  bottom: clamp(20px, 3vw, 34px);
  left: 50%;
  transform: translateX(-50%);
}

@media (max-width: 760px) {
  .prototype-header {
    padding: calc(18px + env(safe-area-inset-top))
      calc(18px + env(safe-area-inset-right)) 18px
      calc(18px + env(safe-area-inset-left));
  }

  .prototype-header p {
    display: none;
  }

  .prototype-nav {
    gap: 18px;
  }

  .site-mark {
    font-size: 23px;
  }

  .view-toggle {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .project-gallery {
    width: calc(100% - 36px);
    padding-top: calc(90px + env(safe-area-inset-top));
    padding-bottom: calc(48px + env(safe-area-inset-bottom));
  }

  .project-gallery-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .gallery-card-thumbnail {
    aspect-ratio: 16 / 9;
  }

  .gallery-card-title {
    min-height: 58px;
    font-size: clamp(21px, 6vw, 27px);
  }

  .constellation {
    inset: calc(80px + env(safe-area-inset-top)) 8px
      calc(58px + env(safe-area-inset-bottom));
  }

  .node-about {
    --open: 124px !important;
  }

  .node-ridesafe {
    --open: 108px !important;
  }

  .node-rise {
    --open: 84px !important;
  }

  .node-orca {
    --open: 94px !important;
  }

  .node-novo {
    --open: 94px !important;
  }

  .node-dc-probe {
    --open: 132px !important;
  }

  .node-3d-printing {
    --open: 98px !important;
  }

  .node-trash2danger {
    --open: 104px !important;
  }

  .node-speech-debate {
    --open: 96px !important;
  }

  .node-guitar {
    --open: 94px !important;
  }

  .node-athletics {
    --open: 90px !important;
  }

  .connections line {
    stroke-width: 1;
  }

  .node-label {
    font-size: 13px;
  }

  .interaction-hint {
    width: 100%;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .node-core,
  .node-core img,
  .km-logo,
  .node-label {
    transition-duration: 0.01ms;
  }
}