:root {
  --bg: #050505;
  --fg: #f5f5f2;
  --brand-width: clamp(920px, 94vw, 1640px);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; }

body {
  margin: 0;
  overflow: hidden;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.018), transparent 42%), var(--bg);
  color: var(--fg);
  font-family: Inter, Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.space {
  position: relative;
  width: 100vw;
  height: 100svh;
  min-height: 540px;
  overflow: hidden;
}

.brand {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--brand-width);
  aspect-ratio: 1182 / 834;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.brand__symbol {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.logo-part path { fill: #fff; }

.logo-part-motion {
  mix-blend-mode: difference;
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform;
}

.svg-ui {
  fill: #fff;
  font-family: Inter, Arial, Helvetica, sans-serif;
  mix-blend-mode: difference;
}

.svg-axis__label {
  font-size: 23px;
  font-weight: 500;
  letter-spacing: 0;
  opacity: .86;
  transition: opacity 220ms ease;
}

.svg-axis__label.is-hovered { opacity: .58; }

.svg-axis__wordmark {
  font-size: 68px;
  font-weight: 500;
  letter-spacing: -4px;
}

.svg-axis__tm {
  font-size: .34em;
  letter-spacing: 0;
}

.axis {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}

.axis__hit {
  position: absolute;
  top: 50%;
  width: clamp(138px, 15vw, 230px);
  height: clamp(76px, 9vw, 116px);
  transform: translate(-50%, -50%);
  pointer-events: auto;
  cursor: pointer;
}

.axis__hit--labor { left: 22%; }
.axis__hit--shop  { left: 78%; }

/* Footer geometry copied from beo™ Labor: fixed 88px footer,
   24px desktop frame inset, 12/10px mobile inset, vertically centered UI. */
.legal-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(88px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  z-index: 220;
  pointer-events: none;
  background: transparent;
  mix-blend-mode: difference;
}

.legal-footer__inner {
  width: 100%;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.legal-footer a {
  color: #666;
  font-family: Inter, Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-decoration: none;
  pointer-events: auto;
  cursor: pointer;
  opacity: 1;
  mix-blend-mode: inherit;
  transition: color 180ms ease, opacity 180ms ease;
}

.legal-footer a:hover,
.legal-footer a:focus-visible { color: #999; }


@media (max-width: 900px) {
  :root {
    --brand-width: max(148vw, 98svh);
  }

  .axis__hit { width: 28vw; max-width: 180px; }
  .axis__hit--labor { left: 25%; }
  .axis__hit--shop  { left: 75%; }
}

@media (max-width: 620px) {
  :root {
    --brand-width: max(176vw, 118svh);
  }

  .space { min-height: 480px; }

  .svg-axis__label { font-size: 23px; }
  .svg-axis__wordmark { font-size: 62px; }

  .axis__hit {
    top: 50%;
    width: 31vw;
    height: 104px;
  }

  .axis__hit--labor { left: 21%; }
  .axis__hit--shop  { left: 79%; }

}

@media (max-height: 620px) and (orientation: landscape) {
  :root {
    --brand-width: max(112vw, 136svh);
  }
}



@media (hover: none) {
  .svg-axis__label.is-hovered { opacity: .86; }
}

@media (prefers-reduced-motion: reduce) {
  .logo-part-motion { transform: none !important; }
}