*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  text-size-adjust: 100%;
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100dvh;
  color: var(--text);
  font: 400 var(--fs-16) var(--font-ui);
  accent-color: var(--accent);
}

* {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

*::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

img,
video,
svg {
  max-width: 100%;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: var(--focus-ring) solid var(--accent);
  outline-offset: 3px;
}

.stars {
  background-color: var(--bg);
  background-image: var(--starfield-1), var(--starfield-2), var(--starfield-3), var(--starfield-4), var(--starfield-5), var(--starfield-6);
  background-size: var(--starfield-tile);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: var(--sp-8);
  left: var(--sp-8);
  z-index: 20;
  padding: var(--sp-12) var(--sp-16);
  background: var(--accent);
  color: var(--accent-ink);
  translate: 0 -200%;
}

.skip-link:focus-visible {
  translate: 0 0;
}

.on-narrow {
  display: none;
}

.container {
  width: 100%;
  max-width: 44rem;
  margin-inline: auto;
  padding-inline: var(--sp-24);
}

.container--wide {
  max-width: 72rem;
}

.page {
  padding-block: var(--sp-32);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
}

.stack > * {
  margin-block: 0;
}

.stack--tight {
  gap: var(--sp-4);
}

.stack--loose {
  gap: var(--sp-32);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: var(--sp-16);
}

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-12);
}

.form-stack {
  display: flex;
  flex-direction: column;
  gap: var(--panel-gap);
}

.stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100dvh;
  min-height: 40rem;
  overflow: hidden;
}

.stage__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, var(--accent-wash), transparent 45%);
  pointer-events: none;
}

.stage .orbit {
  position: absolute;
  width: var(--orbit-size);
  height: var(--orbit-size);
}

.stage .orbit-ring {
  position: absolute;
  width: var(--ring-size);
  height: var(--ring-size);
}

.stage__bar {
  position: absolute;
  inset: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--sp-22) var(--sp-32) 0;
}

.stage__bar .wordmark {
  padding-top: var(--sp-4);
}

.stage__panel {
  width: min(100%, var(--auth-width));
  padding: var(--panel-pad-block) var(--panel-pad-inline);
  display: flex;
  flex-direction: column;
  gap: var(--panel-gap);
}

.stage__note {
  position: absolute;
  bottom: var(--sp-24);
  margin: 0;
}

.step {
  display: flex;
  flex-direction: column;
  gap: var(--step-gap);
}

.step__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
}

.step__form {
  display: flex;
  margin: 0;
}

.shell {
  position: relative;
  display: flex;
  height: 100dvh;
  overflow: hidden;
}

.shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 60% at 80% 10%, var(--haze-pink), transparent 70%),
    radial-gradient(ellipse 40% 50% at 30% 100%, var(--haze-cyan), transparent 70%);
  pointer-events: none;
}

.shell__nav {
  position: relative;
  flex: 0 0 var(--rail-width);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  padding: var(--sp-22) var(--sp-16);
  border-right: var(--hairline) solid var(--rail-line);
  background: var(--rail-bg);
}

.shell__brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 var(--sp-6) var(--sp-18);
}

.shell__exit {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  margin-top: auto;
}

.shell__form {
  display: flex;
  margin: 0;
}

.shell__main {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-18);
  padding: var(--sp-26) var(--sp-32);
  overflow-y: auto;
}

@media (width <= 40rem) {
  :root {
    --starfield-tile: 300px 300px;
    --field-h: 3.125rem;
    --btn-lg-h: 3.375rem;
    --btn-md-h: 3.125rem;
    --btn-sm-h: 2.875rem;
    --btn-quiet-h: 2.75rem;
    --bracket-size: 10px;
    --panel-pad-block: var(--sp-24);
    --panel-pad-inline: var(--sp-20);
    --panel-gap: var(--sp-16);
    --step-gap: var(--sp-12);
    --scan-star: 6.875rem;
    --arrival-title: 1.625rem;
    --arrival-tracking: 0.4em;
    --arrival-line: var(--fs-14);
    --title-lg: var(--fs-30);
    --title-md: var(--fs-28);
    --wordmark-bar-size: var(--fs-13);
    --wordmark-bar-tracking: var(--tracking-24);
    --link-ghost-size: var(--fs-10);
    --link-ghost-tracking: var(--tracking-12);
    --link-ghost-pad: var(--sp-12);
    --orbit-size: 740px;
    --page-inline: var(--sp-16);
    --page-end: var(--sp-48);
    --section-gap: var(--sp-48);
    --haze-height: 37.5rem;
    --hero-title: var(--fs-48);
    --hero-title-leading: 1;
    --hero-tagline: var(--fs-19);
    --hero-star: 17.5rem;
    --hero-gap: var(--sp-14);
    --open-size: var(--fs-13);
    --open-tracking: var(--tracking-12);
    --open-glow: none;
    --heart-pad: var(--sp-14);
    --mark-h: 1.75rem;
    --mark-pad: var(--sp-10);
    --story-title: var(--fs-26);
    --story-text: var(--fs-16);
    --story-leading: 1.65;
    --specs-key: 6.5rem;
    --specs-text: var(--fs-14);
    --inquiry-title: var(--fs-30);
    --done-title: var(--fs-40);
    --inbox-title: var(--fs-24);
    --lightbox-pad: var(--sp-16);
  }

  .stars {
    background-image: var(--starfield-1), var(--starfield-2), var(--starfield-3), var(--starfield-4), var(--starfield-5);
  }

  .on-wide {
    display: none;
  }

  .on-narrow {
    display: revert;
  }

  .stage {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    height: auto;
    min-height: 100dvh;
  }

  .stage__glow,
  .stage .orbit-ring,
  .stage .step__icon {
    display: none;
  }

  .stage .orbit {
    top: 60px;
    left: -175px;
  }

  .stage__bar {
    position: relative;
    align-items: center;
    padding: var(--sp-16);
  }

  .stage__bar .wordmark {
    padding-top: 0;
  }

  .stage__panel {
    width: auto;
    margin: auto var(--sp-14);
  }

  .stage__note {
    position: relative;
    bottom: auto;
    padding: var(--sp-24) var(--sp-20);
    text-align: center;
  }

  .step__actions {
    flex-flow: column nowrap;
    gap: var(--step-gap);
  }

  .step__form .btn,
  .step .btn--md {
    width: 100%;
  }

  .shell {
    flex-direction: column;
  }

  .shell__nav {
    order: 2;
    flex: none;
    flex-direction: row;
    gap: 0;
    padding: 0 0 var(--sp-8);
    border-top: var(--hairline) solid var(--tabbar-line);
    border-right: 0;
    background: var(--tabbar-bg);
  }

  .shell__brand,
  .shell__exit {
    display: none;
  }

  .shell__main {
    padding: var(--sp-14) var(--sp-16);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

@media (width <= 40rem) {
  .shell__nav .nav-link {
    position: relative;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    gap: var(--sp-4);
    height: auto;
    min-height: 3.5rem;
    padding: 0;
    border-color: transparent;
    color: var(--text-muted);
    font-size: var(--fs-9);
    letter-spacing: var(--tracking-12);
  }

  .shell__nav .nav-link:hover,
  .shell__nav .nav-link[aria-current="page"] {
    background: transparent;
    border-color: transparent;
  }

  .shell__nav .nav-link[aria-current="page"] {
    color: var(--text-strong);
  }
}

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-16);
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-10);
}

.fleet__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.fleet__row {
  display: grid;
  grid-template-columns:
    minmax(0, 2.4fr) minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1.1fr) 4.375rem 4.375rem 4.375rem minmax(0, 1.1fr)
    7.5rem;
  align-items: center;
  gap: var(--sp-12);
  padding: var(--sp-12) var(--sp-18);
}

.fleet__listing {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  min-width: 0;
}

.fleet__name {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.fleet__marks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

.fleet__now {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
}

.fleet__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-6);
}

.editor {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.shell__main--bare {
  gap: 0;
  padding: 0;
}

.editor__bar {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: var(--sp-14);
  padding: var(--sp-16) var(--sp-32);
}

.editor__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-14);
  min-width: 0;
}

.editor__actions {
  display: flex;
  gap: var(--sp-8);
  margin-left: auto;
}

.editor__back,
.editor__footbar {
  display: none;
}

.editor__notices {
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
  padding-inline: var(--sp-32);
}

.editor__notices:not(:empty) {
  padding-top: var(--sp-18);
}

.editor__grid {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-24);
  padding: var(--sp-22) var(--sp-32) 3.75rem;
}

.editor__main,
.editor__form {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--sp-18);
  min-width: 0;
}

.editor__aside {
  position: sticky;
  top: 5.75rem;
  display: flex;
  flex: 0 0 var(--aside-width);
  flex-direction: column;
  gap: var(--sp-14);
}

.editor__section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
  padding: var(--sp-22);
}

.editor__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sp-16);
}

.editor__row--between {
  align-items: center;
  justify-content: space-between;
}

.editor__grow {
  flex: 1;
  min-width: 13.75rem;
}

.words {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-20);
}

.words__col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
}

.media {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)) 1.2fr;
  gap: var(--sp-12);
}

.media__slot {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.facts,
.marks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-14);
}

@media (width <= 40rem) {
  .page-head .btn {
    width: var(--target);
    padding: 0;
  }

  .toolbar .segmented {
    flex: 1;
  }

  .toolbar .segmented__option {
    flex: 1;
    justify-content: center;
    padding-inline: var(--sp-4);
    font-size: var(--fs-9);
    letter-spacing: 0.04em;
    white-space: nowrap;
  }

  .search {
    flex: 1 1 100%;
  }

  .fleet.panel {
    background: none;
    border: 0;
    backdrop-filter: none;
  }

  .fleet.panel::before,
  .fleet.panel::after,
  .fleet__row--head,
  .fleet__host,
  .fleet__marks,
  .fleet__num,
  .fleet__actions {
    display: none;
  }

  .fleet__list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-8);
  }

  .fleet__row {
    position: relative;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "star name life"
      "star now now"
      "star ready ready";
    gap: 3px var(--sp-12);
    padding: var(--sp-12);
    background: var(--panel-bg);
    border: var(--hairline) solid var(--panel-border);
    border-radius: var(--radius);
  }

  .fleet__listing {
    display: contents;
  }

  .fleet__listing .star {
    grid-area: star;
  }

  .fleet__name {
    grid-area: name;
  }

  .fleet__life {
    grid-area: life;
  }

  .fleet__now {
    grid-area: now;
  }

  .fleet__ready {
    grid-area: ready;
  }

  .fleet__title::after {
    content: "";
    position: absolute;
    inset: 0;
  }

  .shell--editor .shell__nav,
  .shell--detail .shell__nav {
    display: none;
  }

  .editor__bar {
    padding: var(--sp-12) var(--sp-14);
  }

  .editor__title {
    flex: 1;
    gap: var(--sp-4) var(--sp-8);
  }

  .editor__name {
    flex-basis: 100%;
  }

  .editor__crumb,
  .editor__actions,
  .editor__map {
    display: none;
  }

  .editor__back {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: var(--target);
    padding: 0;
  }

  .editor__notices {
    padding-inline: var(--sp-14);
  }

  .editor__grid {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-14);
    padding: var(--sp-14) var(--sp-14) 7.5rem;
  }

  .editor__aside {
    position: static;
    flex: none;
    order: -1;
  }

  .editor__section {
    gap: var(--sp-14);
    padding: var(--sp-18) var(--sp-16);
  }

  .editor__footbar {
    position: sticky;
    bottom: 0;
    z-index: 4;
    display: flex;
    gap: var(--sp-8);
    padding: var(--sp-10) var(--sp-14) var(--sp-18);
  }

  .editor__footbar .btn {
    flex: 1;
    height: var(--btn-lg-h);
  }

  .words {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-12);
  }

  .words:has(#words-lang-en:checked) [data-lang="es"],
  .words:has(#words-lang-es:checked) [data-lang="en"] {
    display: none;
  }

  .media {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-10);
  }

  .facts,
  .marks {
    grid-template-columns: minmax(0, 1fr);
  }

  .checklist__head {
    pointer-events: auto;
    cursor: pointer;
  }

  .editor__section .segmented {
    display: flex;
  }

  .editor__section .segmented__option {
    flex: 1;
    justify-content: center;
    height: 2.5rem;
  }

  .marks {
    gap: 0;
  }

  .marks .mark-box {
    padding: var(--sp-10) 0;
    border-width: var(--hairline) 0 0;
    border-color: var(--rail-line);
    border-radius: 0;
  }

  .marks .mark-box:first-child {
    border-top-width: 0;
    padding-top: 0;
  }
}

.inline-form {
  display: flex;
  margin: 0;
}

.catalog {
  position: relative;
  min-height: 100dvh;
}

.catalog__haze {
  position: absolute;
  inset: 0 0 auto;
  height: var(--haze-height);
  background: radial-gradient(ellipse 60% 70% at 28% 34%, color-mix(in oklab, var(--hue, var(--accent)) 20%, transparent), transparent 70%);
  pointer-events: none;
}

.catalog__bar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-16);
  padding: var(--sp-18) var(--sp-32);
  background: linear-gradient(var(--bar-fade), transparent);
}

.catalog__main {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
  width: 100%;
  max-width: 82.5rem;
  margin-inline: auto;
  padding: 0 var(--page-inline) var(--page-end);
}

.catalog__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-12);
  padding-top: var(--sp-18);
  border-top: var(--hairline) solid var(--tabbar-line);
}

.lang {
  display: flex;
  gap: var(--sp-4);
}

.hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-40);
  min-height: 45rem;
}

.hero__stage {
  display: flex;
  flex: 1 1 32.5rem;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-18);
}

.hero__stage .star {
  --star-size: var(--hero-star);
}

.hero__copy {
  display: flex;
  flex: 1 1 32.5rem;
  flex-direction: column;
  gap: var(--hero-gap);
  max-width: 37.5rem;
}

.hero__tagline {
  max-width: 26ch;
}

.hero__marks,
.hero__actions,
.hero__jumps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
}

.hero__actions {
  margin-top: var(--sp-8);
}

.btn--open {
  flex: 1 1 16.25rem;
}

.heart {
  display: flex;
  margin: 0;
}

.preview {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
  padding: var(--sp-22);
  scroll-margin-top: 5rem;
}

.preview__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-12);
}

.preview__stage {
  display: flex;
  justify-content: center;
  padding: var(--sp-18) 0;
  background: radial-gradient(ellipse at center, var(--accent-wash), transparent 70%);
}

.preview__frame {
  position: relative;
  width: 60rem;
  max-width: 100%;
  height: 35rem;
  overflow: hidden;
  transition:
    width 0.4s,
    height 0.4s;
}

.preview:has(#frame-phone:checked) .preview__frame {
  width: 20rem;
  height: 37.5rem;
}

.preview__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  height: 1.875rem;
  padding: 0 var(--sp-12);
}

.preview__idle {
  position: absolute;
  inset: 1.875rem 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-14);
  padding: var(--sp-24);
  text-align: center;
}

.preview__still {
  position: absolute;
  inset: 0;
  opacity: 0.22;
}

.preview__above {
  position: relative;
}

.preview__note {
  max-width: 36ch;
}

.preview__app {
  position: absolute;
  inset: 1.875rem 0 0;
  width: 100%;
  height: calc(100% - 1.875rem);
  border: 0;
}

.preview__bar-fill {
  display: block;
  width: 13.75rem;
  height: 2px;
  overflow: hidden;
}

.preview__bar-fill-run {
  display: block;
  width: 40%;
  height: 2px;
}

.listing-body {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--section-gap) var(--sp-48);
}

.story {
  display: flex;
  flex: 999 1 35rem;
  flex-direction: column;
  gap: var(--sp-16);
  order: 1;
  min-width: 0;
}

.story__text {
  max-width: 62ch;
}

.specs {
  flex: 1 1 var(--specs-width);
  order: 2;
  padding: var(--sp-20);
}

.specs__list {
  display: grid;
  grid-template-columns: var(--specs-key) minmax(0, 1fr);
  gap: var(--sp-10) 0;
  margin: var(--sp-14) 0 0;
}

.gallery {
  display: flex;
  flex: 1 1 100%;
  flex-direction: column;
  gap: var(--sp-16);
  order: 3;
}

.gallery__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.gallery__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: var(--sp-14);
}

.tile {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.tile__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tile__tag {
  position: absolute;
  bottom: var(--sp-8);
  left: var(--sp-8);
}

.tile__play {
  position: absolute;
  right: var(--sp-8);
  bottom: var(--sp-8);
}

.lightbox[open] {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-16);
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  padding: var(--lightbox-pad);
}

.lightbox__image {
  width: min(68.75rem, 90vw);
  aspect-ratio: 16 / 10;
  object-fit: contain;
}

.lightbox__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
}

.lightbox__label {
  min-width: 10rem;
  text-align: center;
}

.inquiry {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-40);
  padding: var(--sp-32);
  scroll-margin-top: 5rem;
}

.inquiry__intro {
  display: flex;
  flex: 1 1 18.75rem;
  flex-direction: column;
  gap: var(--sp-14);
}

.inquiry__lede {
  max-width: 38ch;
}

.inquiry__body {
  flex: 1 1 28.75rem;
}

.inquiry__who {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(12.5rem, 100%), 1fr));
  gap: var(--sp-12);
}

.inquiry__send {
  gap: var(--sp-14);
}

.inquiry__received {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-12);
  padding: var(--sp-8) 0;
}

.inquiry__received .lede {
  max-width: 40ch;
}

.segmented--wide {
  display: flex;
  max-width: 26.25rem;
  padding: var(--sp-4);
}

.segmented--wide .segmented__option {
  flex: 1;
  justify-content: center;
  height: 2.375rem;
}

.inbox {
  display: flex;
  flex: 1;
  min-height: 0;
}

.inbox__list {
  display: flex;
  flex: 0 0 var(--inbox-list-width);
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border-right: var(--hairline) solid var(--rail-line);
}

.inbox__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-14);
  padding: var(--sp-26) var(--sp-22) var(--sp-14);
}

.inbox__items {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--sp-6);
  margin: 0;
  padding: 0 var(--sp-12) var(--sp-16);
  overflow-y: auto;
  list-style: none;
}

.inbox__item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.inbox__line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
}

.inbox__line--start {
  justify-content: flex-start;
}

.inbox__from {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
}

.inbox__detail {
  flex: 1;
  min-width: 0;
  padding: var(--sp-26) var(--sp-32);
  overflow-y: auto;
}

.inquiry-detail {
  display: flex;
  flex-direction: column;
  gap: var(--sp-20);
  max-width: 47.5rem;
  padding: var(--sp-28);
}

.inquiry-detail__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "kind state actions"
    "name name actions"
    "email email actions";
  align-items: center;
  gap: var(--sp-6) var(--sp-8);
}

.inquiry-detail__head .inquiry-detail__back {
  display: none;
  grid-area: back;
}

.inquiry-detail__kind {
  grid-area: kind;
}

.inquiry-detail__state {
  grid-area: state;
}

.inquiry-detail__name {
  grid-area: name;
}

.inquiry-detail__email {
  grid-area: email;
  justify-self: start;
}

.inquiry-detail__actions {
  display: flex;
  grid-area: actions;
  align-self: start;
  gap: var(--sp-8);
}

.inquiry-detail__facts {
  display: grid;
  grid-template-columns: 8.125rem minmax(0, 1fr);
  gap: var(--sp-10) 0;
  margin: 0;
  padding-top: var(--sp-16);
  border-top: var(--hairline) solid var(--rail-line);
}

.inquiry-detail__facts dd {
  margin: 0;
}

.inquiry-detail__reply {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  padding-top: var(--sp-16);
  border-top: var(--hairline) solid var(--rail-line);
}

.inbox__pick {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin: 0;
}

@media (width <= 40rem) {
  .catalog__bar {
    padding: var(--sp-14) var(--sp-14) var(--sp-18);
  }

  .lang__option[aria-current="true"] {
    display: none;
  }

  .hero {
    flex-flow: column nowrap;
    align-items: stretch;
    gap: var(--hero-gap);
    min-height: 0;
  }

  .hero__stage {
    flex: none;
    padding: var(--sp-8) 0 var(--sp-10);
  }

  .hero__address {
    display: none;
  }

  .hero__copy {
    flex: none;
    max-width: none;
  }

  .hero__marks,
  .hero__actions,
  .hero__jumps {
    gap: var(--sp-6);
  }

  .hero__actions {
    flex-wrap: nowrap;
    margin-top: var(--sp-6);
  }

  .btn--open,
  .hero__jumps .btn {
    flex: 1;
  }

  .hero__jumps .btn {
    justify-content: center;
  }

  .preview {
    gap: var(--sp-12);
    padding: var(--sp-16);
    scroll-margin-top: 4.375rem;
  }

  .preview__head .preview__title,
  .preview__head .preview__sizes {
    display: none;
  }

  .preview__stage {
    padding: 0;
    background: none;
  }

  .preview__frame,
  .preview:has(#frame-phone:checked) .preview__frame {
    width: 100%;
    height: 30rem;
  }

  .preview__idle {
    padding: var(--sp-20);
  }

  .listing-body {
    flex-flow: column nowrap;
    align-items: stretch;
    gap: var(--section-gap);
  }

  .story,
  .gallery,
  .specs {
    flex: none;
    order: 0;
  }

  .story {
    gap: var(--sp-12);
  }

  .specs {
    padding: var(--sp-16);
  }

  .gallery {
    gap: var(--sp-10);
  }

  .gallery__grid {
    display: flex;
    gap: var(--sp-10);
    margin-inline: calc(var(--sp-16) * -1);
    padding-inline: var(--sp-16);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .tile {
    flex: none;
    width: 17.5rem;
    scroll-snap-align: start;
  }

  .lightbox__image {
    width: 100%;
    max-height: 70vh;
    aspect-ratio: 10 / 16;
  }

  .lightbox__label {
    min-width: 7.5rem;
  }

  .inquiry {
    flex-flow: column nowrap;
    gap: var(--sp-12);
    padding: var(--sp-18) var(--sp-16);
  }

  .inquiry__intro {
    flex: none;
    gap: var(--sp-12);
  }

  .inquiry__body {
    flex: none;
  }

  .inquiry__send {
    flex-direction: column;
    align-items: stretch;
  }

  .inquiry__send .hint {
    display: none;
  }

  .inquiry__send .btn {
    height: var(--btn-lg-h);
  }

  .inquiry__received {
    gap: var(--sp-10);
  }

  .segmented--wide {
    max-width: none;
  }

  .segmented--wide .segmented__option {
    height: 2.5rem;
  }

  .catalog__foot {
    flex-direction: column;
    gap: var(--sp-10);
    padding-top: var(--sp-16);
  }

  .shell__nav .badge {
    position: absolute;
    top: var(--sp-8);
    left: 55%;
    min-width: 1rem;
    height: 1rem;
    margin: 0;
    border-radius: 8px;
    font-size: var(--fs-9);
  }

  .inbox {
    flex-direction: column;
  }

  .inbox__list {
    flex: 1;
    border-right: 0;
  }

  .inbox--open .inbox__list,
  .inbox:not(.inbox--open) .inbox__detail {
    display: none;
  }

  .inbox__head {
    padding: var(--sp-14) var(--sp-16) var(--sp-10);
    border-bottom: var(--hairline) solid var(--rail-line);
  }

  .inbox__items {
    gap: var(--sp-8);
    padding: var(--sp-10) var(--sp-14);
  }

  .inbox__list .segmented {
    display: flex;
  }

  .inbox__list .segmented__option {
    flex: 1;
    justify-content: center;
    height: 2.375rem;
    padding-inline: var(--sp-4);
    font-size: var(--fs-10);
    letter-spacing: 0.1em;
  }

  .inbox__detail {
    padding: 0;
  }

  .inquiry-detail {
    max-width: none;
    padding: var(--sp-12) var(--sp-14) var(--sp-20);
    gap: var(--sp-16);
  }

  .inquiry-detail__head {
    grid-template-areas:
      "back state actions"
      "kind kind kind"
      "name name name"
      "email email email";
    gap: var(--sp-10);
  }

  .inquiry-detail__head .inquiry-detail__back {
    display: inline-flex;
    width: var(--target);
    height: var(--target);
    padding: 0;
  }

  .inquiry-detail__kind {
    justify-self: start;
  }

  .inquiry-detail__actions {
    align-self: center;
  }

  .inquiry-detail__actions .on-wide {
    display: none;
  }

  .inquiry-detail__facts {
    grid-template-columns: 5rem minmax(0, 1fr);
  }

  .inquiry-detail__reply .btn {
    flex: 1;
    height: var(--btn-lg-h);
  }
}

.galaxy-page {
  margin: 0;
  overflow: hidden;
}

.galaxy {
  position: relative;
  height: 100dvh;
  min-height: 40rem;
  overflow: hidden;
  font-size: var(--fs-13);
  line-height: 1.45;
}

.galaxy__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

.galaxy__canvas:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 var(--focus-ring) var(--accent-line-on);
}

.galaxy__hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.galaxy__hud > * {
  pointer-events: auto;
}

.galaxy__head {
  position: absolute;
  top: var(--sp-22);
  left: var(--hud-gap);
  display: flex;
  align-items: baseline;
  gap: var(--sp-14);
  pointer-events: none;
}

.galaxy__makers {
  pointer-events: auto;
}

.galaxy .log {
  position: absolute;
  top: var(--log-top);
  bottom: var(--hud-gap);
  left: var(--hud-gap);
  display: flex;
  flex-direction: column;
  gap: var(--sp-14);
  width: var(--log-width);
  padding: var(--sp-14);
  overflow: hidden;
}

.log__group {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: var(--sp-8);
}

.log__regions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
}

.log__toggles {
  display: flex;
  flex: none;
  gap: var(--sp-6);
}

.log__list {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-height: 0;
  padding-bottom: var(--sp-24);
  overflow: hidden auto;
}

.galaxy__controls {
  position: absolute;
  right: var(--hud-controls-end);
  bottom: var(--hud-gap);
  left: var(--hud-controls-start);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-6);
  white-space: nowrap;
}

.galaxy .scan {
  position: absolute;
  top: var(--hud-gap);
  right: var(--hud-gap);
  bottom: var(--hud-gap);
  display: flex;
  flex-direction: column;
  width: var(--scan-width);
  padding: var(--sp-20);
  overflow: hidden;
}

.scan__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--sp-14);
  min-height: 0;
  overflow: hidden auto;
}

.scan__stage {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  height: var(--scan-stage);
  background: radial-gradient(ellipse at center, color-mix(in oklab, var(--hue) 22%, transparent), transparent 70%);
}

.scan__stage .star {
  --star-size: var(--scan-star);
}

.scan__copy {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.scan__facts {
  display: grid;
  grid-template-columns: var(--scan-key) minmax(0, 1fr);
  row-gap: var(--sp-8);
  margin: 0;
  padding-top: var(--sp-12);
  border-top: var(--hairline) solid var(--rail-line);
  font-size: var(--fs-12);
}

.scan__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
  margin-top: auto;
}

.galaxy .galaxy__jump,
.galaxy__chips,
.galaxy .scan__nav,
.galaxy .scan__state {
  display: none;
}

.galaxy__chips {
  position: absolute;
  top: calc(var(--sp-14) + env(safe-area-inset-top) + var(--target) + var(--sp-10));
  right: 0;
  left: 0;
  gap: var(--sp-6);
  padding-inline: var(--sp-14);
  overflow: auto hidden;
  scrollbar-width: none;
  mask-image: linear-gradient(to right, black calc(100% - var(--scroll-fade)), transparent);
}

.galaxy__chips > * {
  flex: none;
  white-space: nowrap;
}

.hover {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  width: var(--hover-width);
  padding: var(--sp-10);
  box-sizing: border-box;
  pointer-events: none;
  will-change: translate;
}

.hover__copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.arrival {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-14);
  padding: 0 var(--sp-20);
  text-align: center;
  pointer-events: none;
}

.arrival__titles {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-14);
}

.arrival__skip {
  position: absolute;
  right: var(--sp-28);
  bottom: var(--sp-28);
  pointer-events: auto;
}

.approach {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden auto;
}

.approach__page {
  flex: none;
}

@media (width <= 40rem) {
  .galaxy {
    --galaxy-phone: 1;
  }

  .galaxy__head {
    top: calc(var(--sp-14) + env(safe-area-inset-top));
    right: var(--sp-14);
    left: var(--sp-14);
    align-items: center;
    justify-content: space-between;
    pointer-events: auto;
  }

  .galaxy__view,
  .galaxy .galaxy__makers,
  .galaxy .log,
  .galaxy__controls,
  .hover {
    display: none;
  }

  .galaxy .galaxy__jump,
  .galaxy__chips {
    display: flex;
  }

  .galaxy .galaxy__jump {
    height: var(--target);
  }

  .galaxy .scan {
    inset: auto var(--sp-10) var(--sp-14) var(--sp-10);
    width: auto;
    padding: var(--sp-14);
  }

  .scan__body {
    display: grid;
    grid-template-areas:
      "stage kicker nav"
      "stage name nav"
      "stage state nav"
      "tagline tagline tagline"
      "actions actions actions";
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--sp-4) var(--sp-12);
    align-content: start;
    overflow: visible;
  }

  .scan__stage {
    grid-area: stage;
    align-self: center;
    height: auto;
  }

  .scan__copy {
    display: contents;
  }

  .scan__kicker {
    grid-area: kicker;
  }

  .galaxy .scan__name {
    grid-area: name;
    font-size: var(--fs-24);
    line-height: 1.1;
  }

  .galaxy .scan__tagline {
    font-size: var(--fs-14);
  }

  .scan__tagline {
    grid-area: tagline;
    margin-top: var(--sp-6);
  }

  .galaxy .scan__state {
    grid-area: state;
    display: flex;
    align-items: center;
    gap: var(--sp-6);
  }

  .galaxy .scan__nav {
    grid-area: nav;
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
  }

  .scan__facts,
  .scan__featured,
  .galaxy .scan__inquiry {
    display: none;
  }

  .scan__actions {
    grid-area: actions;
    flex-wrap: nowrap;
    gap: var(--sp-6);
    margin-top: var(--sp-8);
  }

  .arrival__skip {
    right: auto;
    bottom: var(--sp-40);
    left: 50%;
    translate: -50% 0;
  }
}

.plain-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.choice {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-10);
}

.numbered {
  display: flex;
  align-items: baseline;
  gap: var(--sp-16);
}

.table-scroll {
  max-width: 100%;
  overflow-x: auto;
}

.empty-state {
  align-items: flex-start;
}

.cap {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  max-width: 22rem;
}

.stage--tall {
  height: auto;
  min-height: 100dvh;
  padding-block: var(--sp-88) var(--sp-80);
}

.shell__group {
  padding: var(--sp-18) var(--sp-12) var(--sp-4);
}

.galaxy__home {
  pointer-events: auto;
}

.galaxy__brand {
  display: flex;
  align-items: baseline;
  gap: var(--sp-10);
}

.maker-card {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr) minmax(0, 1.4fr) 11rem auto;
  align-items: center;
  gap: var(--sp-20);
  padding: var(--sp-18) var(--sp-22);
}

.maker-card__stars {
  display: flex;
}

.maker-card__stars .star:not(:first-child) {
  margin-left: calc(var(--sp-8) * -1);
}

.maker-card__who,
.maker-card__facts {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-width: 0;
}

.category-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--sp-16);
  padding: var(--sp-14) var(--sp-18);
}

.region-map {
  position: relative;
  width: 100%;
  max-width: 40rem;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}


.region-map__region {
  position: absolute;
  top: var(--y);
  left: var(--x);
  display: grid;
  place-items: center;
  width: var(--size);
  translate: -50% -50%;
}

.region-map__region > * {
  grid-area: 1 / 1;
}

.region-map__glow {
  width: 100%;
  aspect-ratio: 1;
}

@media (width > 40rem) {
  .fleet--external .fleet__row {
    grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1.1fr) 4.375rem minmax(0, 1.1fr) 7.5rem;
  }
}

@media (width <= 40rem) {
  :root {
    --galaxy-maker-size: var(--fs-12);
  }

  .galaxy__brand {
    flex-direction: column;
    gap: var(--sp-4);
  }

  .catalog__main .container {
    padding-inline: 0;
  }

  .notice--row {
    flex-wrap: wrap;
  }

  .table thead {
    display: none;
  }

  .table tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0 var(--sp-12);
    padding-block: var(--sp-10);
  }

  .table tr > :last-child {
    grid-column: 1 / -1;
  }

  .notice--row .notice__text {
    flex-basis: 100%;
  }

  .stage--tall {
    padding-block: 0;
  }

  .shell__group {
    display: none;
  }

  .numbered {
    gap: var(--sp-12);
  }

  .maker-card {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "who stars"
      "bio bio"
      "facts go";
    gap: var(--sp-10) var(--sp-12);
    padding: var(--sp-16);
  }

  .maker-card__stars {
    grid-area: stars;
  }

  .maker-card__who {
    grid-area: who;
  }

  .maker-card__bio {
    grid-area: bio;
  }

  .maker-card__facts {
    grid-area: facts;
  }

  .maker-card__go {
    grid-area: go;
    place-self: end end;
  }

  .category-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "swatch names edit"
      "swatch count edit";
    gap: var(--sp-4) var(--sp-12);
    padding: var(--sp-12) var(--sp-14);
  }

  .category-row__swatch {
    grid-area: swatch;
  }

  .category-row > .stack {
    grid-area: names;
  }

  .category-row > .hint {
    grid-area: count;
  }

  .category-row > .btn {
    grid-area: edit;
  }

  .region-map {
    aspect-ratio: 4 / 3;
  }
}