/* Landing-page-only canvas treatment. The renderer owns the animation state. */
.hero.hero--city{
  --city-bg:#020609;
  --city-ink:#fff;
  --city-heading-accent:#e600ff;
  --city-muted:rgba(255,255,255,.83);
  --city-faint:rgba(255,255,255,.66);
  position:relative;
  isolation:isolate;
  width:100%;
  max-width:none;
  min-height:calc(100svh - 106px);
  margin:0;
  padding:clamp(64px,10vh,128px) 24px clamp(86px,13vh,150px);
  display:grid;
  place-items:center;
  overflow:hidden;
  color:var(--city-ink);
  background:var(--city-bg);
}

#hero-city-canvas{
  position:absolute;
  z-index:0;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  background:var(--city-bg);
  outline-offset:-6px;
  touch-action:pan-y pinch-zoom;
}

.hero--city [hidden]{display:none!important}
#hero-city-canvas:focus-visible{outline:2px solid #ef6bff}

.hero--city::before,
.hero--city::after{
  content:"";
  position:absolute;
  z-index:1;
  pointer-events:none;
}

.hero--city::before{
  inset:0;
  background:radial-gradient(ellipse at 50% 45%,rgb(var(--city-scrim-rgb,2 6 9) / calc(.78 * var(--city-scrim-strength,1))) 0%,rgb(var(--city-scrim-rgb,2 6 9) / calc(.52 * var(--city-scrim-strength,1))) 30%,rgb(var(--city-scrim-rgb,2 6 9) / calc(.15 * var(--city-scrim-strength,1))) 65%,rgb(var(--city-scrim-rgb,2 6 9) / calc(.38 * var(--city-scrim-strength,1))) 100%);
}

.hero--city::after{
  inset:auto 0 0;
  height:24%;
  background:linear-gradient(transparent,var(--bg));
}

.hero--city .hero__content{
  position:relative;
  z-index:2;
  width:min(100%,1020px);
  text-align:center;
  pointer-events:none;
}

.hero--city .hero__content > *{pointer-events:auto}
.hero--city .availability{color:var(--city-muted);border-color:rgba(255,255,255,.30);background:rgba(5,3,24,.28);backdrop-filter:blur(10px)}
.hero--city .availability > span:last-child{color:var(--city-heading-accent,#f26cff)}
.hero--city .status-dot{background:var(--city-heading-accent,#ff58ee);box-shadow:0 0 14px rgba(255,88,238,.85)}
.hero--city h1{color:var(--city-ink);text-shadow:0 5px 28px rgba(0,0,0,.48)}
.hero--city h1 span{color:var(--city-heading-accent,#ef6bff)}
.hero--city .hero__sub{color:var(--city-muted);text-shadow:0 2px 20px rgba(0,0,0,.55)}
.hero--city .system-note{color:var(--city-faint);text-shadow:0 2px 12px rgba(0,0,0,.55)}
.hero--city .text-link{color:var(--city-ink);text-shadow:0 2px 12px rgba(0,0,0,.55)}
.hero--city .text-link:hover{color:#f48aff}

.hero-city-tune-trigger{
  position:absolute;
  z-index:3;
  right:clamp(16px,3vw,42px);
  bottom:calc(clamp(16px,3vw,32px) + 50px);
  border:1px solid rgba(255,255,255,.34);
  border-radius:999px;
  padding:8px 11px;
  color:var(--city-muted);
  background:rgba(5,3,24,.85);
  box-shadow:0 8px 24px rgba(0,0,0,.20);
  cursor:pointer;
  font-family:inherit;
  font-size:14px;
  font-weight:600;
  line-height:1.2;
  min-height:40px;
  backdrop-filter:blur(10px);
}
.hero-city-tune-trigger:hover{color:#fff;border-color:rgba(255,255,255,.68)}
.hero-city-tuner{
  position:absolute;
  z-index:4;
  top:clamp(12px,2vw,28px);
  right:clamp(12px,2vw,28px);
  width:min(320px,calc(100% - 24px));
  max-height:min(calc(100% - 24px),calc(100svh - 40px));
  overflow:auto;
  overscroll-behavior:contain;
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,.26);
  border-radius:14px;
  color:#f6f3ff;
  background:rgba(7,5,28,.90);
  box-shadow:0 18px 52px rgba(0,0,0,.42);
  font-family:inherit;
  font-size:14px;
  line-height:1.35;
  backdrop-filter:blur(16px);
}
.hero-city-tuner__header{display:flex;align-items:center;justify-content:space-between;padding:11px 12px 7px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;font-size:12px;color:rgba(255,255,255,.78)}
.hero-city-tuner__close{appearance:none;border:0;background:transparent;color:#fff;font:24px/1 sans-serif;cursor:pointer;padding:0 2px}
.hero-city-tuner__details{padding:0 12px 12px}
.hero-city-tuner__details summary{cursor:pointer;font-weight:700;color:#fff;padding:4px 0 10px}
.hero-city-tuner__controls{display:grid;gap:10px}
.hero-city-tuner__group{min-inline-size:0;margin:0;padding:8px;border:1px solid rgba(255,255,255,.14);border-radius:8px}
.hero-city-tuner__group legend{padding:0 4px;color:#ef9cff;font-weight:700;font-size:12px;letter-spacing:.035em;text-transform:uppercase}
.hero-city-tuner__control{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:3px 8px;padding:4px 0;color:rgba(255,255,255,.84);cursor:default}
.hero-city-tuner__control output{font-variant-numeric:tabular-nums;color:#fff;font-size:12px}
.hero-city-tuner__control input{grid-column:1 / -1;width:100%;accent-color:#ef6bff;cursor:pointer}
.hero-city-tuner__control select{min-width:112px;border:1px solid rgba(255,255,255,.22);border-radius:5px;padding:3px 5px;color:#fff;background:#16102c;cursor:pointer}
.hero-city-tuner__actions{display:flex;gap:8px;padding-top:12px}
.hero-city-tuner__actions button{border:1px solid rgba(255,255,255,.28);border-radius:6px;padding:8px 10px;min-height:38px;color:#fff;background:rgba(255,255,255,.08);font-family:inherit;font-size:14px;font-weight:600;line-height:1.2;cursor:pointer}
.hero-city-tuner__actions button:hover{background:rgba(239,107,255,.25);border-color:#ef9cff}
.hero-city-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

:root[data-theme="light"] .hero--city{
  --city-bg:#ffffff;
  --city-scrim-rgb:255 255 255;
  --city-ink:#292929;
  --city-heading-accent:#fb00ff;
  --city-muted:#30485a;
  --city-faint:#496172;
}

:root[data-theme="light"] .hero--city::before{
  background:radial-gradient(ellipse at 50% 45%,rgb(var(--city-scrim-rgb,249 250 252) / calc(.78 * var(--city-scrim-strength,1))) 0%,rgb(var(--city-scrim-rgb,249 250 252) / calc(.42 * var(--city-scrim-strength,1))) 30%,rgb(var(--city-scrim-rgb,249 250 252) / calc(0 * var(--city-scrim-strength,1))) 65%,rgb(var(--city-scrim-rgb,249 250 252) / calc(.08 * var(--city-scrim-strength,1))) 100%);
}
:root[data-theme="light"] .hero--city :is(h1,.hero__sub,.system-note,.text-link){text-shadow:none}
:root[data-theme="light"] .hero--city h1 span,
:root[data-theme="light"] .hero--city .availability > span:last-child,
:root[data-theme="light"] .hero--city .text-link:hover{color:var(--city-heading-accent,#9c169e)}
:root[data-theme="light"] .hero--city .availability{border-color:rgba(48,72,90,.25);background:rgba(249,250,252,.64)}
:root[data-theme="light"] .hero--city .status-dot{background:var(--city-heading-accent,#b923c6);box-shadow:0 0 12px rgba(185,35,198,.30)}
:root[data-theme="light"] .hero-city-tune-trigger{border-color:rgba(48,72,90,.30);background:rgba(249,250,252,.92);box-shadow:0 8px 24px rgba(26,49,68,.10)}
:root[data-theme="light"] .hero-city-tune-trigger:hover{color:var(--city-ink);border-color:rgba(48,72,90,.60);background:#fff}
:root[data-theme="light"] .hero-city-tuner{color-scheme:light;color:var(--city-ink);border-color:rgba(48,72,90,.25);background:rgba(249,250,252,.96);box-shadow:0 18px 52px rgba(26,49,68,.18)}
:root[data-theme="light"] :is(.hero-city-tuner__header,.hero-city-tuner__control){color:var(--city-muted)}
:root[data-theme="light"] :is(.hero-city-tuner__close,.hero-city-tuner__details summary,.hero-city-tuner__control output){color:var(--city-ink)}
:root[data-theme="light"] .hero-city-tuner__group{border-color:rgba(48,72,90,.18)}
:root[data-theme="light"] .hero-city-tuner__group legend{color:#9c169e}
:root[data-theme="light"] .hero-city-tuner__control input{accent-color:#9c169e}
:root[data-theme="light"] :is(.hero-city-tuner__control select,.hero-city-tuner__actions button){color:var(--city-ink);border-color:rgba(48,72,90,.25);background:#fff}
:root[data-theme="light"] .hero-city-tuner__actions button:hover{background:#f7e9fb;border-color:#9c169e}

@media(max-width:700px){
  .hero.hero--city{min-height:calc(100svh - 82px);padding:72px 20px 102px}
  .hero--city h1{font-size:clamp(54px,13vw,76px)}
  .hero-city-tune-trigger{right:16px;bottom:66px}
  .hero-city-tuner{top:12px;right:12px;max-height:min(calc(100% - 24px),calc(100svh - 40px))}
}