:root {
  --coffee-deep: #0a0908;
  --coffee: #100d0b;
  --coffee-low: #0d0b0a;
  --milk: #ddd2c1;
  --milk-soft: #c7baa8;
  --quiet: #91867a;
  --faint: #655e57;
  --cinnamon: #9a6548;
  --cinnamon-2: #b88769;
  --north: #829196;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--milk-soft);
  background: var(--coffee-deep);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

#capo-home {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  overflow: clip;
  isolation: isolate;
  background:
    radial-gradient(
      ellipse at 47% 48%,
      rgba(16, 13, 11, 0.92) 0%,
      rgba(15, 12, 10, 0.7) 20%,
      rgba(13, 11, 9, 0.38) 40%,
      rgba(11, 10, 9, 0.14) 57%,
      rgba(10, 9, 8, 0) 74%
    ),
    linear-gradient(152deg, #0a0908 0%, #0d0b0a 53%, #090909 100%);
}

#capo-home::before,
#capo-home::after {
  content: "";
  position: absolute;
  inset: -12%;
  pointer-events: none;
}

/* Light, not a pane: a broad refracted wash creates the sense of looking through glass. */
#capo-home::before {
  z-index: 2;
  opacity: 0.56;
  background:
    linear-gradient(
      110deg,
      transparent 12%,
      rgba(130, 145, 150, 0.004) 24%,
      rgba(130, 145, 150, 0.009) 35%,
      rgba(220, 228, 226, 0.029) 46%,
      rgba(220, 228, 226, 0.012) 55%,
      rgba(130, 145, 150, 0.004) 66%,
      transparent 77%
    ),
    linear-gradient(
      113deg,
      transparent 25%,
      rgba(183, 135, 105, 0.004) 36%,
      rgba(183, 135, 105, 0.013) 49%,
      rgba(220, 228, 226, 0.007) 59%,
      rgba(183, 135, 105, 0.003) 70%,
      transparent 82%
    );
  filter: blur(22px);
  mix-blend-mode: screen;
  transform: translate3d(-3vw, 0, 0) rotate(-2deg);
}

/* A very quiet edge falloff adds distance without drawing a literal glass surface. */
#capo-home::after {
  z-index: 6;
  inset: 0;
  pointer-events: none;
  background:
    url("data:image/png;base64,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") 0 0 / 96px 96px repeat,
    radial-gradient(
      ellipse at 50% 45%,
      transparent 54%,
      rgba(0, 0, 0, 0.018) 66%,
      rgba(0, 0, 0, 0.05) 78%,
      rgba(0, 0, 0, 0.09) 90%,
      rgba(0, 0, 0, 0.13) 100%
    ),
    linear-gradient(118deg, rgba(130, 145, 150, 0.008), transparent 19% 81%, rgba(183, 135, 105, 0.007));
  box-shadow: inset 0 0 72px rgba(0, 0, 0, 0.16);
}

@keyframes glass-refraction-drift {
  0% { opacity: 0.38; transform: translate3d(-4vw, 0.8vh, 0) rotate(-2.4deg) scaleX(0.98); }
  52% { opacity: 0.54; transform: translate3d(0.7vw, -0.6vh, 0) rotate(-1.2deg) scaleX(1.025); }
  100% { opacity: 0.42; transform: translate3d(4.8vw, -1.5vh, 0) rotate(0.2deg) scaleX(1.055); }
}

.air,
.paths,
.project-space {
  position: absolute;
  inset: 0;
}

.air {
  overflow: hidden;
  pointer-events: none;
}

.air::before,
.air::after {
  content: "";
  position: absolute;
  inset: -8%;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* Sparse optical dust: fixed gradients, not a particle system. */
.air::before {
  opacity: 0.29;
  background:
    radial-gradient(circle at 13% 27%, rgba(221, 210, 193, 0.24) 0 0.55px, transparent 1.7px),
    radial-gradient(circle at 29% 74%, rgba(183, 135, 105, 0.22) 0 0.7px, transparent 2.1px),
    radial-gradient(circle at 46% 18%, rgba(221, 210, 193, 0.17) 0 0.45px, transparent 1.55px),
    radial-gradient(circle at 62% 61%, rgba(130, 145, 150, 0.23) 0 0.7px, transparent 2.2px),
    radial-gradient(circle at 78% 31%, rgba(221, 210, 193, 0.2) 0 0.5px, transparent 1.8px),
    radial-gradient(circle at 91% 79%, rgba(183, 135, 105, 0.19) 0 0.75px, transparent 2.3px);
  filter: blur(0.35px);
}

.air::after {
  opacity: 0.18;
  background:
    radial-gradient(circle at 20% 58%, rgba(220, 228, 226, 0.21) 0 1px, transparent 3.4px),
    radial-gradient(circle at 54% 83%, rgba(183, 135, 105, 0.18) 0 1.25px, transparent 4px),
    radial-gradient(circle at 73% 13%, rgba(220, 228, 226, 0.18) 0 0.9px, transparent 3px),
    radial-gradient(circle at 87% 51%, rgba(130, 145, 150, 0.2) 0 1.15px, transparent 3.8px);
  filter: blur(1.5px);
}

@keyframes glass-dust-near {
  0% { opacity: 0.19; transform: translate3d(-1.2vw, 0.4vh, 0); }
  50% { opacity: 0.33; }
  100% { opacity: 0.22; transform: translate3d(2.2vw, -1.8vh, 0); }
}

@keyframes glass-dust-far {
  0% { opacity: 0.12; transform: translate3d(1vw, -1vh, 0) scale(1); }
  100% { opacity: 0.21; transform: translate3d(-2vw, 1.4vh, 0) scale(1.035); }
}

.far-city {
  position: absolute;
  z-index: 3;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.78;
  background:
    radial-gradient(circle at 62% 23%, rgba(102, 160, 168, 0.012), transparent 13%),
    radial-gradient(circle at 79% 68%, rgba(168, 78, 86, 0.01), transparent 12%),
    radial-gradient(circle at 18% 74%, rgba(194, 132, 77, 0.012), transparent 15%);
}

.far-house {
  --house-tone: 183, 135, 105;
  --edge-tone: var(--house-tone);
  --house-size: 24px;
  --house-height: 19px;
  --headlight-hit: 0;
  position: absolute;
  left: var(--house-x);
  top: var(--house-y);
  width: var(--house-size);
  height: var(--house-height);
  border: 0.5px solid rgba(var(--house-tone), calc(0.058 + var(--headlight-hit) * 0.14));
  background:
    linear-gradient(135deg, rgba(var(--house-tone), calc(0.018 + var(--headlight-hit) * 0.035)), transparent 47%),
    radial-gradient(circle at 56% 48%, rgba(var(--house-tone), calc(0.018 + var(--headlight-hit) * 0.045)), transparent 61%),
    rgba(10, 9, 8, 0.31);
  box-shadow:
    inset 1px 1px 0 rgba(var(--house-tone), calc(0.026 + var(--headlight-hit) * 0.06)),
    inset -1px -1px 0 rgba(0, 0, 0, 0.33),
    2px 3px 7px rgba(0, 0, 0, 0.22),
    0 0 12px rgba(var(--house-tone), calc(0.038 + var(--headlight-hit) * 0.07)),
    0 0 36px rgba(var(--house-tone), calc(0.022 + var(--headlight-hit) * 0.04));
  transform: translate(-50%, -50%);
  transition: border-color 120ms linear;
}

.far-house::before,
.far-house::after {
  content: "";
  position: absolute;
}

.far-house::before {
  inset: 14%;
  opacity: calc(0.22 + var(--headlight-hit) * 0.4);
  background:
    linear-gradient(90deg, transparent 48%, rgba(var(--house-tone), 0.09) 49% 51%, transparent 52%),
    linear-gradient(transparent 47%, rgba(var(--house-tone), 0.075) 48% 51%, transparent 52%);
}

.far-house--capo-flash::before {
  opacity: 0.92;
}

.far-house::after {
  display: none;
  pointer-events: none;
  opacity: 0.012;
  filter: blur(1.2px);
  mix-blend-mode: screen;
}

.far-house[data-light-side]::after {
  display: block;
}

.far-house[data-light-side="top"]::after,
.far-house[data-light-side="bottom"]::after {
  left: var(--edge-pos, 50%);
  width: clamp(10px, calc(var(--house-size) * 0.65), 19px);
  height: clamp(8px, calc(var(--house-height) * 0.58), 14px);
}

.far-house[data-light-side="top"]::after {
  top: -1px;
  transform: translate(-50%, -100%);
  background: radial-gradient(
    ellipse at 50% 100%,
    rgba(var(--edge-tone), 0.58) 0%,
    rgba(var(--edge-tone), 0.15) 24%,
    rgba(var(--edge-tone), 0.038) 49%,
    rgba(var(--edge-tone), 0) 76%
  );
}

.far-house[data-light-side="bottom"]::after {
  bottom: -1px;
  transform: translate(-50%, 100%);
  background: radial-gradient(
    ellipse at 50% 0%,
    rgba(var(--edge-tone), 0.58) 0%,
    rgba(var(--edge-tone), 0.15) 24%,
    rgba(var(--edge-tone), 0.038) 49%,
    rgba(var(--edge-tone), 0) 76%
  );
}

.far-house[data-light-side="left"]::after,
.far-house[data-light-side="right"]::after {
  top: var(--edge-pos, 50%);
  width: clamp(8px, calc(var(--house-size) * 0.46), 14px);
  height: clamp(10px, calc(var(--house-height) * 0.78), 19px);
}

.far-house[data-light-side="left"]::after {
  left: -1px;
  transform: translate(-100%, -50%);
  background: radial-gradient(
    ellipse at 100% 50%,
    rgba(var(--edge-tone), 0.58) 0%,
    rgba(var(--edge-tone), 0.15) 24%,
    rgba(var(--edge-tone), 0.038) 49%,
    rgba(var(--edge-tone), 0) 76%
  );
}

.far-house[data-light-side="right"]::after {
  right: -1px;
  transform: translate(100%, -50%);
  background: radial-gradient(
    ellipse at 0% 50%,
    rgba(var(--edge-tone), 0.58) 0%,
    rgba(var(--edge-tone), 0.15) 24%,
    rgba(var(--edge-tone), 0.038) 49%,
    rgba(var(--edge-tone), 0) 76%
  );
}

.far-house[data-tone="cold"] {
  --house-tone: 145, 170, 175;
}

.far-house[data-neon="cyan"] { --edge-tone: 103, 164, 174; }
.far-house[data-neon="rose"] { --edge-tone: 165, 78, 85; }
.far-house[data-neon="amber"] { --edge-tone: 201, 137, 78; }

/* Only a few distant buildings carry a readable centre, as in Observer. */
.far-house:nth-child(6n + 2) {
  border-color: rgba(var(--house-tone), calc(0.084 + var(--headlight-hit) * 0.13));
  box-shadow:
    0 0 12px rgba(var(--house-tone), 0.058),
    0 0 38px rgba(var(--house-tone), 0.032),
    0 0 82px rgba(var(--house-tone), 0.014);
}

.far-house:nth-child(9n + 4) {
  border-color: rgba(var(--house-tone), calc(0.1 + var(--headlight-hit) * 0.15));
}

@keyframes far-edge-light-life {
  0%, 57% { opacity: 0.018; }
  64% { opacity: 0.12; }
  69% { opacity: 0.52; }
  72% { opacity: 0.32; }
  77% { opacity: 0.43; }
  83% { opacity: 0.34; }
  91% { opacity: 0.05; }
  100% { opacity: 0.012; }
}

.air__field,
.air__distance {
  position: absolute;
  pointer-events: none;
}

.air__field {
  border-radius: 50%;
  opacity: 0.75;
  mix-blend-mode: screen;
}

.air__field--cold {
  top: -23vh;
  right: -20vw;
  width: 108vw;
  height: 78vh;
  background: radial-gradient(
    ellipse,
    rgba(130, 145, 150, 0.041) 0%,
    rgba(130, 145, 150, 0.035) 18%,
    rgba(130, 145, 150, 0.027) 36%,
    rgba(130, 145, 150, 0.018) 52%,
    rgba(130, 145, 150, 0.01) 66%,
    rgba(130, 145, 150, 0.004) 79%,
    rgba(130, 145, 150, 0) 90%
  );
  filter: blur(18px);
  transform: rotate(8deg);
}

.air__field--warm {
  left: -28vw;
  bottom: -31vh;
  width: 112vw;
  height: 92vh;
  background: radial-gradient(
    ellipse,
    rgba(154, 101, 72, 0.038) 0%,
    rgba(154, 101, 72, 0.033) 19%,
    rgba(154, 101, 72, 0.025) 38%,
    rgba(154, 101, 72, 0.016) 55%,
    rgba(154, 101, 72, 0.008) 69%,
    rgba(154, 101, 72, 0.003) 80%,
    rgba(154, 101, 72, 0) 91%
  );
  filter: blur(20px);
  transform: rotate(-11deg);
}

.air__field--refraction {
  top: 16vh;
  left: 7vw;
  width: 112vw;
  height: 58vh;
  opacity: 0.68;
  background: radial-gradient(
    ellipse at 48% 51%,
    rgba(220, 228, 226, 0.044) 0%,
    rgba(220, 228, 226, 0.034) 11%,
    rgba(220, 228, 226, 0.023) 24%,
    rgba(220, 228, 226, 0.014) 40%,
    rgba(220, 228, 226, 0.007) 57%,
    rgba(220, 228, 226, 0.003) 72%,
    rgba(220, 228, 226, 0) 87%
  );
  filter: blur(24px);
  transform: rotate(-8deg) scaleY(0.72);
}

.air__distance {
  inset: -16%;
  opacity: 0.7;
  background:
    radial-gradient(
      ellipse 43% 39% at 84% 77%,
      rgba(130, 145, 150, 0.017),
      rgba(130, 145, 150, 0.009) 42%,
      rgba(130, 145, 150, 0.003) 67%,
      rgba(130, 145, 150, 0) 86%
    ),
    radial-gradient(
      ellipse 37% 31% at 18% 20%,
      rgba(183, 135, 105, 0.014),
      rgba(183, 135, 105, 0.007) 44%,
      rgba(183, 135, 105, 0.002) 69%,
      rgba(183, 135, 105, 0) 87%
    );
  filter: blur(18px);
}

@keyframes air-cold-drift {
  0% { opacity: 0.61; transform: translate3d(0, 0, 0) rotate(8deg) scale(1); }
  48% { opacity: 0.78; transform: translate3d(-2.2vw, 1.4vh, 0) rotate(6.8deg) scale(1.035); }
  100% { opacity: 0.68; transform: translate3d(-4.1vw, 3vh, 0) rotate(5.7deg) scale(1.065); }
}

@keyframes air-warm-drift {
  0% { opacity: 0.62; transform: translate3d(0, 0, 0) rotate(-11deg) scale(1.02); }
  53% { opacity: 0.79; transform: translate3d(2.1vw, -1.8vh, 0) rotate(-9.6deg) scale(1.055); }
  100% { opacity: 0.66; transform: translate3d(4.4vw, -3.2vh, 0) rotate(-8.4deg) scale(1.085); }
}

@keyframes air-refraction-drift {
  0% { opacity: 0.52; transform: translate3d(-1.5vw, 0.8vh, 0) rotate(-8deg) scale(1, 0.72); }
  45% { opacity: 0.76; transform: translate3d(1.2vw, -1vh, 0) rotate(-6.7deg) scale(1.025, 0.76); }
  100% { opacity: 0.58; transform: translate3d(3.8vw, -2.4vh, 0) rotate(-5.6deg) scale(1.055, 0.7); }
}

@keyframes air-distance-drift {
  0% { opacity: 0.52; transform: translate3d(-1.5vw, -1vh, 0) scale(1); }
  100% { opacity: 0.76; transform: translate3d(2.8vw, 2.1vh, 0) scale(1.045); }
}

.paths {
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  opacity: 1;
  transition: opacity 160ms ease;
}

#capo-home:not([data-road-ready]) .paths {
  opacity: 0;
}

#capo-home:not([data-road-ready]) .road-lamps {
  opacity: 0;
}

.road-lamps {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
}

.road-lamp {
  position: absolute;
  left: var(--lamp-x, -20px);
  top: var(--lamp-y, -20px);
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(221, 210, 193, 0.78);
  box-shadow:
    0 0 3px rgba(221, 210, 193, 0.42),
    0 0 10px rgba(183, 135, 105, 0.15);
  opacity: 0.02;
  transform: translate(-50%, -50%);
}

.performance-meter {
  position: absolute;
  z-index: 8;
  right: calc(var(--safe-right) + 14px);
  bottom: calc(var(--safe-bottom) + 12px);
  min-width: 178px;
  padding: 4px 6px 3px;
  border: 1px solid rgba(221, 210, 193, 0.055);
  color: rgba(199, 186, 168, 0.56);
  background: rgba(10, 9, 8, 0.7);
  font: 600 8px/1.2 ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  contain: layout paint style;
}

.performance-meter[data-health="warn"] {
  color: rgba(225, 168, 126, 0.86);
  border-color: rgba(183, 135, 105, 0.14);
}

.road-lamp::before,
.road-lamp::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.road-lamp::before {
  inset: -12px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(183, 135, 105, 0.12) 0%,
    rgba(154, 101, 72, 0.047) 28%,
    rgba(154, 101, 72, 0.015) 52%,
    rgba(154, 101, 72, 0) 76%
  );
}

/* A tiny arm points back to the road and keeps the lights from reading as stars. */
.road-lamp::after {
  left: 50%;
  top: 50%;
  width: var(--lamp-offset, 6px);
  height: 0.55px;
  background: linear-gradient(90deg, rgba(221, 210, 193, 0.16), rgba(183, 135, 105, 0.035));
  transform: translateY(-50%) rotate(var(--lamp-road-angle, 0deg));
  transform-origin: 0 50%;
}

.road-lamp[hidden] {
  display: none;
}

@keyframes road-lamp-life {
  0%, 56% { opacity: 0.02; }
  63% { opacity: 0.1; }
  67% { opacity: 0.46; }
  69.5% { opacity: 0.25; }
  72.5% { opacity: 0.43; }
  79% { opacity: 0.36; }
  87% { opacity: 0.045; }
  100% { opacity: 0.02; }
}

.topology--phone {
  display: none;
}

.route,
.haze,
.impulse,
.impulse-trail {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.capo-flash-impulse {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-width: 1.45px;
  stroke-linecap: round;
  opacity: 0;
  mix-blend-mode: normal;
  pointer-events: none;
}

.route {
  stroke-width: 0.56px;
  opacity: 0.27;
  transition: stroke 180ms ease, opacity 180ms ease, stroke-width 180ms ease;
}

.route--warm {
  stroke: rgba(211, 170, 124, 0.24);
}

.route--cold {
  stroke: rgba(145, 158, 161, 0.07);
}

.haze {
  stroke-width: 23px;
  opacity: 0.19;
  filter: url(#haze-blur);
}

.haze--warm {
  stroke: rgba(183, 135, 105, 0.058);
}

.haze--cold {
  stroke: rgba(130, 145, 150, 0.02);
}

.impulse {
  --pulse-travel: 82vw;
  stroke-width: 1.58px;
  stroke-linecap: round;
  stroke-dasharray: 18px 200vw;
  opacity: 0;
  mix-blend-mode: normal;
}

.impulse-twin {
  stroke-width: 1.12px;
  opacity: 0;
  filter: drop-shadow(0 0 4px rgba(183, 135, 105, 0.24))
    drop-shadow(0 0 12px rgba(154, 101, 72, 0.13));
}

.impulse-trail {
  stroke-width: 1.05px;
  stroke-linecap: round;
  stroke-dasharray: 112px 200vw;
  opacity: 0;
  mix-blend-mode: screen;
  pointer-events: none;
}

.impulse-trail.impulse--warm {
  filter: drop-shadow(0 0 5px rgba(183, 135, 105, 0.28))
    drop-shadow(0 0 13px rgba(154, 101, 72, 0.12));
}

.impulse-trail.impulse--cold {
  filter: drop-shadow(0 0 5px rgba(145, 170, 175, 0.24))
    drop-shadow(0 0 13px rgba(130, 145, 150, 0.1));
}

.impulse--warm {
  stroke: rgba(238, 184, 139, 0.88);
  filter: none;
}

.impulse-twin.impulse--warm {
  filter: drop-shadow(0 0 4px rgba(183, 135, 105, 0.24))
    drop-shadow(0 0 12px rgba(154, 101, 72, 0.13));
}

.impulse--cold {
  stroke: rgba(204, 225, 228, 0.88);
  filter: none;
}

.impulse-twin.impulse--cold {
  filter: drop-shadow(0 0 4px rgba(145, 170, 175, 0.22))
    drop-shadow(0 0 12px rgba(130, 145, 150, 0.12));
}

.home-mark {
  position: absolute;
  z-index: 6;
  top: calc(var(--safe-top) + clamp(38px, 8vh, 86px));
  left: calc(var(--safe-left) + clamp(28px, 7.2vw, 138px));
  margin: 0;
  pointer-events: auto;
}

.home-mark::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -36px;
  left: -46px;
  width: 260px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(199, 186, 168, 0.035), transparent 68%);
  filter: blur(22px);
}

.home-mark__build {
  display: block;
  margin: 0 0 9px 2px;
  color: var(--quiet);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    monospace;
  font-size: clamp(11px, 0.7vw, 12px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.19em;
}

.home-mark h1 {
  margin: 0;
  color: var(--milk);
  font-size: clamp(28px, 2vw, 34px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.home-mark__auth-trigger {
  display: block;
  min-width: 44px;
  min-height: 44px;
  margin: -7px 0 -7px -8px;
  padding: 7px 8px;
  border: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: color 180ms ease, text-shadow 180ms ease;
}

.home-mark__auth-trigger:hover,
.home-mark__auth-trigger:focus-visible,
.home-mark__auth-trigger[aria-expanded="true"] {
  color: #e5dac9;
  text-shadow: 0 0 18px rgba(221, 210, 193, 0.065);
}

.home-mark__auth-trigger:focus-visible {
  outline: 1px solid rgba(221, 210, 193, 0.18);
  outline-offset: 2px;
  border-radius: 2px;
}

.home-auth {
  position: absolute;
  top: calc(100% + 13px);
  left: 0;
  width: min(290px, calc(100vw - var(--safe-left) - var(--safe-right) - 48px));
  min-height: 44px;
  color: var(--quiet);
  animation: home-auth-arrive 180ms ease both;
}

.home-auth-route-reserve {
  position: absolute;
  top: calc(100% + 13px);
  left: 0;
  width: min(290px, calc(100vw - var(--safe-left) - var(--safe-right) - 48px));
  height: 84px;
  opacity: 0;
  pointer-events: none;
}

.home-auth[hidden],
.home-auth__vk[hidden],
.home-auth__logout[hidden],
.project__doors[hidden] {
  display: none;
}

.home-auth::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -30px;
  left: -38px;
  width: 128%;
  height: 118px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(183, 135, 105, 0.035), transparent 70%);
  filter: blur(24px);
  pointer-events: none;
}

.home-auth__status {
  max-width: 270px;
  margin: 0;
  color: var(--quiet);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.45;
}

.home-auth[data-state="authenticated"] .home-auth__status {
  color: var(--milk-soft);
}

.home-auth[data-state="error"] .home-auth__status {
  color: var(--cinnamon-2);
}

.home-auth__vk {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin: 7px 0 0;
  padding: 7px 8px 7px 0;
  border: 0;
  color: var(--milk-soft);
  font: inherit;
  text-align: left;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: color 180ms ease, opacity 180ms ease;
}

.home-auth__vk:hover,
.home-auth__vk:focus-visible {
  color: var(--milk);
}

.home-auth__vk:focus-visible {
  outline: 1px solid rgba(221, 210, 193, 0.18);
  outline-offset: 2px;
  border-radius: 2px;
}

.home-auth__vk:disabled {
  opacity: 0.48;
  cursor: wait;
}

.home-auth__vk span {
  color: var(--cinnamon-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    monospace;
  font-size: 10px;
  font-weight: 560;
  letter-spacing: 0.12em;
}

.home-auth__vk strong {
  font-size: 13px;
  font-weight: 450;
}

.home-auth__logout {
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  margin: 5px 0 0 -8px;
  padding: 7px 8px;
  border: 0;
  color: var(--faint);
  font: 400 11.5px/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", monospace;
  letter-spacing: 0.04em;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: color 180ms ease, opacity 180ms ease;
}

.home-auth__logout:hover,
.home-auth__logout:focus-visible {
  color: var(--milk-soft);
}

.home-auth__logout:focus-visible {
  outline: 1px solid rgba(221, 210, 193, 0.18);
  outline-offset: 2px;
  border-radius: 2px;
}

.home-auth__logout:disabled {
  opacity: 0.45;
  cursor: wait;
}

@keyframes home-auth-arrive {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: translateY(0); }
}

.project-space {
  z-index: 5;
  pointer-events: none;
}

.project {
  --x: 50;
  --y: 50;
  --mx: 50;
  --my: 50;
  --mass: rgba(154, 101, 72, 0.045);
  --mass-core: rgba(183, 135, 105, 0.05);
  position: absolute;
  top: calc(var(--y) * 1%);
  left: calc(var(--x) * 1%);
  width: min(29vw, 460px);
  min-width: 180px;
  min-height: 44px;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

.project::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 43%;
  width: 72%;
  height: 76px;
  border-radius: 50%;
  background: radial-gradient(ellipse, var(--mass-core), transparent 68%);
  filter: blur(19px);
  opacity: 0.58;
  transform: translate(-50%, -50%);
  transition: opacity 180ms ease, transform 180ms ease;
}

.project::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 47%;
  width: 166%;
  height: 176px;
  border-radius: 50%;
  background: radial-gradient(ellipse, var(--mass) 0%, transparent 69%);
  filter: blur(31px);
  opacity: 0.76;
  transform: translate(-50%, -50%);
  transition: opacity 180ms ease, transform 180ms ease;
}

.project[data-tone="cold"] {
  --mass: rgba(130, 145, 150, 0.043);
  --mass-core: rgba(145, 170, 175, 0.05);
}

.project[data-tone="warm"] {
  --mass: rgba(154, 101, 72, 0.039);
  --mass-core: rgba(183, 135, 105, 0.047);
}

.project__target {
  position: relative;
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  padding: 9px 12px;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  flex-direction: column;
  justify-content: center;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.project[data-project="capo"] {
  --mass: rgba(183, 135, 105, 0.09);
  --mass-core: rgba(211, 170, 124, 0.135);
  display: flex;
  justify-content: center;
  z-index: 2;
  width: min(38vw, 600px);
}

.project[data-project="capo"]::before {
  width: 202%;
  height: 226px;
  opacity: 0.94;
}

.project[data-project="capo"]::after {
  width: 108%;
  height: 116px;
  opacity: 0.9;
}

.project[data-project="capo"] .project__target {
  align-items: center;
  padding: 17px 20px;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: center;
  transform-origin: 50% 50%;
}

.project__signal {
  position: relative;
  display: block;
  width: clamp(52px, 4.2vw, 76px);
  height: 8px;
  margin: 0 0 10px 1px;
  opacity: 0.6;
  transform: scaleX(.82);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, rgba(238, 184, 139, .08), rgba(238, 184, 139, .62) 48%, rgba(238, 184, 139, .06));
  mask: linear-gradient(transparent 45%, #000 46% 55%, transparent 56%);
}

.project[data-project="capo"][data-flash-mode="surge"]::after {
  animation: capo-halo-surge 980ms cubic-bezier(.16,.74,.2,1);
}

.project[data-project="capo"][data-flash-mode="echo"]::after {
  animation: capo-halo-echo 1120ms cubic-bezier(.2,.66,.26,1);
}

.project[data-project="capo"][data-flash-mode="lanterns"]::before {
  animation: capo-halo-lanterns 1260ms ease-out;
}

.project[data-project="capo"][data-flash-mode="breath"]::before {
  animation: capo-halo-breath 1420ms cubic-bezier(.2,.58,.24,1);
}

@keyframes capo-halo-surge {
  0% { opacity: .34; transform: translate(-50%, -50%) scale(.72, .72); }
  38% { opacity: 1; transform: translate(-50%, -50%) scale(1.42, .78); }
  100% { opacity: .9; transform: translate(-50%, -50%) scale(1); }
}

@keyframes capo-halo-echo {
  0%, 100% { opacity: .9; transform: translate(-50%, -50%) scale(1); }
  24% { opacity: 1; transform: translate(-50%, -50%) scale(1.18); }
  48% { opacity: .56; transform: translate(-50%, -50%) scale(1.42); }
  70% { opacity: .96; transform: translate(-50%, -50%) scale(1.12); }
}

@keyframes capo-halo-lanterns {
  0%, 100% { opacity: .76; transform: translate(-50%, -50%) scale(1); }
  22% { opacity: 1; transform: translate(-50%, -50%) scale(.9, 1.08); }
  52% { opacity: .46; transform: translate(-50%, -50%) scale(1.16, .92); }
  76% { opacity: .92; transform: translate(-50%, -50%) scale(1.04); }
}

@keyframes capo-halo-breath {
  0%, 100% { opacity: .76; transform: translate(-50%, -50%) scale(1); }
  46% { opacity: 1; transform: translate(-50%, -50%) scale(1.34, 1.18); }
}

.project__signal::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  border: 1px solid rgba(244, 208, 164, .68);
  border-radius: 50%;
  background: rgba(183, 135, 105, .18);
  box-shadow: 0 0 9px rgba(211, 170, 124, .32);
  transform: translate(-50%, -50%);
}

.project[data-project="capo"] .project__name {
  color: #edcda4;
  font-size: clamp(34px, 2.65vw, 48px);
  font-weight: 640;
  letter-spacing: 0.018em;
  text-shadow: 0 0 14px rgba(238, 184, 139, 0.12), 0 0 34px rgba(183, 135, 105, 0.13);
}

.project[data-project="capo"] .project__description {
  margin-top: 9px;
  color: rgba(226, 206, 181, 0.82);
  font-size: clamp(13.5px, 1vw, 16px);
  font-weight: 450;
  letter-spacing: 0.012em;
}

.project[data-project="capo"] .project__target:hover .project__name,
.project[data-project="capo"] .project__target:focus-visible .project__name {
  color: #f0dfc8;
  text-shadow: 0 0 28px rgba(223, 181, 131, 0.18);
}

.project[data-project="capo"] .project__target:focus-visible {
  outline: 1px solid rgba(224, 195, 157, 0.28);
  outline-offset: 4px;
  border-radius: 2px;
}

.door-notice[hidden] { display: none; }

.door-notice {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: max(22px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(22px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
}

.door-notice__veil {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, rgba(91, 72, 53, .18), transparent 42%), rgba(7, 6, 5, .82);
  backdrop-filter: blur(8px);
}

.door-notice__card {
  position: relative;
  width: min(430px, 100%);
  padding: 34px 32px 30px;
  border: 1px solid rgba(216, 194, 166, .17);
  border-radius: 3px;
  background: linear-gradient(145deg, rgba(38, 31, 25, .96), rgba(16, 14, 12, .98));
  box-shadow: 0 26px 90px rgba(0, 0, 0, .55), inset 0 1px rgba(255, 255, 255, .035);
  color: #ddd2c3;
}

.door-notice__capo {
  display: block;
  margin-bottom: 18px;
  color: #a9957e;
  font-size: 10px;
  letter-spacing: .34em;
}

.door-notice h2 {
  margin: 0 0 12px;
  color: #eee5d9;
  font-size: clamp(26px, 6vw, 38px);
  font-weight: 600;
  line-height: 1.05;
}

.door-notice p {
  margin: 0 0 28px;
  color: #aa9a88;
  font-size: 15px;
  line-height: 1.55;
}

.door-notice button {
  border: 0;
  border-bottom: 1px solid rgba(207, 181, 151, .42);
  padding: 7px 0;
  background: transparent;
  color: #cfb597;
  font: inherit;
  cursor: pointer;
}

.door-notice button:hover,
.door-notice button:focus-visible { color: #f0ddc5; border-bottom-color: #f0ddc5; }
.door-notice button:focus-visible { outline: 1px solid rgba(240, 221, 197, .35); outline-offset: 6px; }

.project__name {
  display: block;
  color: var(--milk-soft);
  font-size: clamp(19px, 1.4vw, 23px);
  font-weight: 440;
  line-height: 1.16;
  letter-spacing: -0.018em;
  transition: color 180ms ease, text-shadow 180ms ease;
}

.project__description {
  display: block;
  max-width: 390px;
  margin-top: 7px;
  color: var(--quiet);
  font-size: clamp(12.5px, 0.85vw, 14px);
  font-weight: 390;
  line-height: 1.35;
  letter-spacing: -0.006em;
}

.project__doors {
  position: absolute;
  top: calc(100% - 6px);
  left: 0;
  display: flex;
  max-width: 390px;
  margin: -3px 0 0 12px;
  flex-wrap: wrap;
  gap: 0 12px;
}

.project__door {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--faint);
  font: 400 10.5px/1.25 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", monospace;
  letter-spacing: 0.025em;
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: color 180ms ease, text-shadow 180ms ease;
}

.project__door:hover,
.project__door:focus-visible {
  color: var(--milk-soft);
  text-shadow: 0 0 14px rgba(183, 135, 105, 0.11);
}

.project__door:focus-visible {
  outline: 1px solid rgba(221, 210, 193, 0.16);
  outline-offset: 2px;
  border-radius: 2px;
}

.project[data-project="syria"] .project__doors {
  max-width: none;
  flex-wrap: nowrap;
  gap: 0 4px;
}

.project[data-project="syria"] .project__door {
  min-width: 44px;
  min-height: 44px;
  padding: 0 4px;
  justify-content: center;
  white-space: nowrap;
}

.project[data-project="syria"] .project__door[data-surface="vk-admin"] {
  order: 1;
}

.project[data-project="syria"] .project__door[data-surface="telegram-admin"] {
  order: 2;
}

.project[data-project="diamante"] .project__doors {
  max-width: none;
  flex-wrap: nowrap;
}

.project[data-project="diamante"] .project__door--icon {
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
}

.project[data-enabled="false"] {
  pointer-events: none;
}

.project[data-enabled="false"] .project__name {
  color: #a69b8d;
}

.project[data-enabled="false"] .project__description {
  color: #756d65;
}

.project[data-enabled="false"]::before {
  opacity: 0.57;
}

.project[data-enabled="true"]:hover::before,
.project[data-enabled="true"]:focus-within::before {
  opacity: 1.52;
  transform: translate(-50%, -50%) scale(1.035);
}

.project[data-enabled="true"]:hover::after,
.project[data-enabled="true"]:focus-within::after {
  opacity: 0.92;
  transform: translate(-50%, -50%) scale(1.04);
}

.road-car,
.road-car-light {
  --headlight-live: 0.54;
  position: absolute;
  width: 34px;
  height: 12.4px;
  opacity: 0;
  pointer-events: none;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

.road-car {
  z-index: 2;
}

.road-car-light {
  --beam-upper-reach: 1;
  --beam-lower-reach: 1;
  --road-light-reach: 1;
  z-index: 4;
}

.road-car__svg {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.road-car__beam,
.road-car__road-light {
  position: absolute;
  z-index: 1;
  left: 67%;
  pointer-events: none;
  mix-blend-mode: screen;
}

.road-car__beam {
  width: 82px;
  height: 13px;
  opacity: var(--headlight-live);
  clip-path: polygon(0 36%, 100% 5%, 100% 95%, 0 64%);
  background: linear-gradient(
    90deg,
    rgba(238, 225, 207, 0.15),
    rgba(183, 135, 105, 0.065) 32%,
    rgba(154, 101, 72, 0.022) 64%,
    transparent 100%
  );
  filter: blur(1.7px);
  transform-origin: 0 50%;
  transition: transform 110ms linear;
}

.road-car__beam--upper {
  top: 4%;
  transform: rotate(-3.2deg) scaleX(var(--beam-upper-reach));
}

.road-car__beam--lower {
  bottom: 4%;
  transform: rotate(3.2deg) scaleX(var(--beam-lower-reach));
}

.road-car__road-light {
  top: 50%;
  width: 92px;
  height: 33px;
  border-radius: 50%;
  opacity: calc(var(--headlight-live) * 0.74);
  background: radial-gradient(
    ellipse at 4% 50%,
    rgba(221, 210, 193, 0.13),
    rgba(183, 135, 105, 0.052) 33%,
    rgba(154, 101, 72, 0.016) 58%,
    transparent 76%
  );
  filter: blur(4.5px);
  transform: translateY(-50%) scaleX(var(--road-light-reach));
  transform-origin: 0 50%;
  transition: transform 110ms linear;
}

.road-car__halo {
  fill: rgba(183, 135, 105, 0.12);
  filter: blur(3px);
}

.road-car__body {
  fill: rgba(16, 13, 11, 0.96);
  stroke: rgba(221, 210, 193, 0.72);
  stroke-width: 0.55px;
  filter: drop-shadow(0 0 2px rgba(183, 135, 105, 0.22));
}

.road-car__cabin {
  fill: rgba(183, 135, 105, 0.48);
}

.road-car__power {
  fill: rgba(238, 184, 139, 0.82);
  filter: drop-shadow(0 0 2px rgba(183, 135, 105, 0.58));
}

.road-car__headlight-beam {
  fill: rgba(221, 210, 193, 0.075);
  filter: blur(0.65px);
}

.road-car__headlight {
  fill: rgba(238, 225, 207, 0.92);
  filter:
    drop-shadow(0 0 1.5px rgba(221, 210, 193, 0.82))
    drop-shadow(0 0 4px rgba(183, 135, 105, 0.45));
}

.road-car__tail-light {
  fill: rgba(183, 135, 105, 0.58);
  filter: drop-shadow(0 0 2px rgba(154, 101, 72, 0.42));
}

.road-car__value {
  fill: rgba(221, 210, 193, 0.78);
  font: 3.7px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  text-anchor: middle;
  dominant-baseline: central;
}

.project[data-enabled="true"]:hover .project__name,
.project[data-enabled="true"]:focus-within .project__name {
  color: #e5dac9;
  text-shadow: 0 0 18px rgba(221, 210, 193, 0.065);
}

.project__target:focus-visible {
  outline: 1px solid rgba(221, 210, 193, 0.18);
  outline-offset: 4px;
  border-radius: 2px;
}

#capo-home[data-focus] .route {
  stroke: rgba(205, 187, 170, 0.2);
  stroke-width: 0.58px;
  opacity: 0.28;
}

#capo-home[data-focus] .haze {
  opacity: 0.27;
}

@media (max-width: 700px) {
  /* One soft shadow keeps the moving SVG light fluid on high-DPR phones. */
  .impulse.impulse--warm,
  .impulse-twin.impulse--warm,
  .impulse-trail.impulse--warm {
    filter: none;
  }

  .impulse.impulse--cold,
  .impulse-twin.impulse--cold,
  .impulse-trail.impulse--cold {
    filter: none;
  }

  .far-city {
    opacity: 0.67;
  }

  .far-house:nth-child(n + 13) {
    display: none;
  }

  .route,
  .haze {
    opacity: 0.22;
  }

  .topology--desktop {
    display: none;
  }

  .topology--phone {
    display: block;
  }

  .home-mark {
    top: calc(var(--safe-top) + clamp(26px, 6.6vh, 52px));
    left: calc(var(--safe-left) + 24px);
  }

  .home-mark__build {
    margin-bottom: 7px;
    font-size: clamp(10px, 2.7vw, 11px);
  }

  .home-mark h1 {
    font-size: clamp(24px, 7vw, 28px);
  }

  .project {
    top: calc(var(--my) * 1%);
    left: calc(var(--mx) * 1%);
    width: min(48vw, 215px);
    min-width: 0;
  }

  .project[data-project="capo"] {
    width: min(62vw, 292px);
  }

  .project[data-project="capo"]::before {
    width: 180%;
    height: 156px;
  }

  .project[data-project="capo"]::after {
    width: 98%;
    height: 76px;
  }

  .project[data-project="capo"] .project__target {
    padding: 14px 14px;
  }

  .project[data-project="capo"] .project__name {
    font-size: clamp(29px, 8.7vw, 36px);
  }

  .project[data-project="capo"] .project__description {
    max-width: 260px;
    font-size: clamp(12px, 3.4vw, 14px);
  }

  .project__signal {
    width: 58px;
    margin-bottom: 8px;
  }

  .project__target {
    padding: 8px 9px;
  }

  .project__name {
    font-size: clamp(17px, 4.8vw, 20px);
  }

  .project__description {
    max-width: 220px;
    margin-top: 5px;
    font-size: clamp(11.5px, 3vw, 13px);
  }

  .project__doors {
    max-width: 220px;
    margin-left: 9px;
  }

  .project__door {
    font-size: 10px;
  }

  .project::before {
    width: 174%;
    height: 132px;
    filter: blur(27px);
  }

  .project::after {
    width: 82%;
    height: 64px;
    filter: blur(17px);
  }

  .air__field--cold {
    top: -16vh;
    right: -72vw;
    width: 190vw;
    height: 68vh;
  }

  .air__field--warm {
    left: -89vw;
    bottom: -28vh;
    width: 190vw;
    height: 86vh;
  }

  .air__field--refraction {
    top: 19vh;
    left: -45vw;
    width: 205vw;
    height: 55vh;
    filter: blur(22px);
    transform: rotate(-14deg) scaleY(0.78);
  }
}

@media (max-height: 690px) {
  .project__description {
    display: none;
  }

  .project::before {
    height: 102px;
  }
}

@media (max-width: 700px) and (max-height: 760px) {
  .project__description {
    display: none;
  }
}

@media (orientation: landscape) and (min-width: 701px) and (max-width: 1000px) {
  .project__description {
    display: block;
  }

  .project[data-project="bet"] {
    left: 43%;
  }
}

@media (max-height: 520px) {
  .home-mark {
    top: calc(var(--safe-top) + 22px);
  }

  .home-mark__build {
    margin-bottom: 5px;
  }

  .home-mark h1 {
    font-size: 24px;
  }

  .project__name {
    font-size: 17px;
  }

  .project[data-project="capo"] .project__target {
    padding-block: 6px;
  }

  .project[data-project="capo"] .project__name {
    font-size: 28px;
  }

  .project[data-project="capo"] .project__description {
    margin-top: 4px;
    font-size: 12px;
  }

  .project[data-project="capo"] .project__signal {
    height: 6px;
    margin-bottom: 3px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .project[data-project="capo"][data-flash-mode]::before,
  .project[data-project="capo"][data-flash-mode]::after {
    animation: none;
  }

  #capo-home::before,
  .air::before,
  .air::after,
  .air__field,
  .air__distance {
    animation: none;
  }

  .far-house {
    animation: none;
    opacity: 1;
  }

  .far-house::after {
    animation: none;
    opacity: 0.035;
  }

  .far-house[data-neon]::after {
    opacity: 0.09;
  }

  .road-lamp {
    animation: none;
    opacity: 0.025;
  }

  .home-auth {
    animation: none;
  }

  .impulse {
    opacity: 0;
  }

  .capo-flash-impulse {
    opacity: 0;
  }

  .route,
  .project::before,
  .project::after,
  .project__name {
    transition: none;
  }
}