/* tripmo.me. Souvenir's tokens (web/souvenir/tokens.css), the ones the page needs, Daylight and Night. */
@font-face {
  font-family: Figtree;
  src: url("/fonts/Figtree-Variable.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
}
@font-face {
  font-family: Fraunces;
  src: url("/fonts/Fraunces-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
/* Local fallbacks sized to the web fonts' metrics, so nothing moves when they arrive. */
@font-face {
  font-family: "Figtree fallback";
  src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Roboto");
  size-adjust: 100.8%;
  ascent-override: 94.2%;
  descent-override: 24.8%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Fraunces fallback";
  src: local("Georgia"), local("Times New Roman");
  size-adjust: 99.5%;
  ascent-override: 98.3%;
  descent-override: 25.6%;
  line-gap-override: 0%;
}

:root {
  color-scheme: light;
  --paper: #fbf8f3;
  --paper-raised: #ffffff;
  --paper-sunk: #f2ede4;
  --line: #e7dfd2;
  --line-strong: #8f8475;
  --ink: #241d16;
  --ink-muted: #6a5f54;
  --sun: #f4b33f;
  --on-sun: #241d16;
  --sun-soft: #fdefd2;
  --sun-text: #8a5200;
  --sea: #1d6b73;
  --on-sea: #ffffff;
  --sea-soft: #dcefed;
  --coral: #a9412d;
  --moss: #45702a;
  --moss-soft: #e6f0da;
  --person-amber: #f6bb4f;
  --person-teal: #5ec0c7;
  --person-coral: #f39b82;
  --person-violet: #b89bdf;
  --person-sky: #7fb3e6;
  --night: #13204a;
  --map-land: var(--paper-sunk);
  --map-road: var(--paper-raised);
  --map-park: var(--moss-soft);
  --card-edge: transparent;
  --shade: #241d16;
  --shadow-lift: 0 1px 2px #241d1614, 0 4px 12px #241d160f;
  --shadow-float: 0 8px 28px #241d1629, 0 2px 6px #241d1614;
  --font-display: Fraunces, "Fraunces fallback", "Iowan Old Style", Georgia, serif;
  --font-sans: Figtree, "Figtree fallback", ui-sans-serif, system-ui, sans-serif;
  --ease-settle: cubic-bezier(0.2, 0.8, 0.2, 1);
  --gutter: 16px;
  --section: 72px;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --paper: #16130f;
    --paper-raised: #211c17;
    --paper-sunk: #0e0c09;
    --line: #332c24;
    --line-strong: #8c8173;
    --ink: #f4eee5;
    --ink-muted: #b0a595;
    --sun: #f6bb4f;
    --sun-soft: #3a2a0e;
    --sun-text: #f6bb4f;
    --sea: #76c9cf;
    --on-sea: #10201f;
    --sea-soft: #12302f;
    --coral: #f39b82;
    --moss: #a6d27a;
    --moss-soft: #1d2b12;
    --night: #03060f;
    --map-land: #1f1a15;
    --map-road: #2f2821;
    --map-park: #222c18;
    --card-edge: #3a3229;
    --shade: #000000;
    --shadow-lift: 0 1px 2px #00000066;
    --shadow-float: 0 8px 28px #0000008c;
  }
}
@media (min-width: 600px) {
  :root {
    --gutter: 32px;
    --section: 96px;
  }
}
@media (min-width: 900px) {
  :root {
    --gutter: 48px;
    --section: 120px;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  background: var(--paper);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 24px;
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
body {
  margin: 0;
  background: var(--paper);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
h1,
h2,
h3,
p,
figure,
ol {
  margin: 0;
}
a {
  color: var(--sea);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
:focus-visible {
  outline: 3px solid var(--sea);
  outline-offset: 3px;
  border-radius: 6px;
}
.wrap {
  width: min(100% - 2 * var(--gutter), 1120px);
  margin-inline: auto;
}
.narrow {
  width: min(100% - 2 * var(--gutter), 720px);
}
.skip {
  position: absolute;
  left: 16px;
  top: -64px;
  z-index: 10;
  background: var(--paper-raised);
  padding: 8px 16px;
  border-radius: 999px;
}
.skip:focus {
  top: 16px;
  box-shadow: var(--shadow-float);
}

/* The top bar: the lockup and one way in. */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 72px;
}
.lockup {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.01em;
  font-variation-settings: "opsz" 36;
}
.tm-mark {
  width: 30px;
  height: 30px;
  flex: none;
}
.top-cta {
  font-weight: 650;
  font-size: 15px;
  color: var(--ink);
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper-raised);
  transition: border-color 0.2s;
}
.top-cta:hover {
  border-color: var(--line-strong);
}

/* Type. */
.eyebrow {
  font-size: 13px;
  line-height: 16px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sun-text);
}
h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(38px, 4.4vw + 18px, 62px);
  line-height: 1.04;
  letter-spacing: -0.012em;
  font-variation-settings: "opsz" 60;
  text-wrap: balance;
}
.section-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(32px, 2vw + 24px, 46px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  font-variation-settings: "opsz" 48;
  text-wrap: balance;
}
.big {
  font-size: clamp(18px, 0.5vw + 16px, 21px);
  line-height: 1.55;
  color: var(--ink-muted);
  text-wrap: pretty;
}

/* Buttons. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 24px;
  border-radius: 999px;
  font: inherit;
  font-weight: 700;
  font-size: 17px;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.2s var(--ease-settle),
    box-shadow 0.2s var(--ease-settle),
    border-color 0.2s;
}
.primary {
  background: var(--sun);
  color: var(--on-sun);
  border: 0;
  box-shadow: 0 1px 0 #241d161f inset;
}
.primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-lift);
}
.quiet {
  color: var(--ink);
  border: 1.5px solid var(--line);
  background: transparent;
}
.quiet:hover {
  border-color: var(--line-strong);
}

/* The hero. */
.hero {
  display: grid;
  gap: 40px;
  padding-block: 32px calc(var(--section) / 2);
}
.hero-copy {
  display: grid;
  gap: 20px;
  align-content: center;
}
.hero-copy .eyebrow {
  margin-bottom: -4px;
}
.line {
  font-size: clamp(20px, 0.6vw + 17px, 23px);
  line-height: 1.35;
  font-weight: 650;
  letter-spacing: -0.005em;
}
.lede {
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-muted);
  max-width: 34em;
  text-wrap: pretty;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}
@media (max-width: 420px) {
  .actions .button {
    flex: 1 1 100%;
  }
}

/* Films: a drawn stage that keeps its shape before and after the script draws in it. */
.film {
  position: relative;
  aspect-ratio: var(--fx-ratio, 1);
  width: 100%;
  border-radius: 24px;
  background: var(--paper-sunk);
}
.film-hero {
  --fx-ratio: 440 / 500;
  max-width: 560px;
  justify-self: center;
}
.film[data-scene="notes"] {
  --fx-ratio: 440 / 420;
}
.film[data-scene="group"] {
  --fx-ratio: 440 / 420;
}
.film[data-scene="working"] {
  --fx-ratio: 440 / 420;
}
.film[data-scene="hotels"] {
  --fx-ratio: 440 / 420;
}
.film[data-scene="onsen"] {
  --fx-ratio: 440 / 420;
}
.film[data-scene="changes"] {
  --fx-ratio: 440 / 420;
}
.fx {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  border-radius: 24px;
}

@media (min-width: 900px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
    gap: 56px;
    align-items: center;
    padding-top: 48px;
    min-height: min(calc(100svh - 72px), 820px);
  }
  .film-hero {
    max-width: none;
  }
}

/* The scenes: a pain, the relief, the motion. */
.scene {
  padding-block: calc(var(--section) / 2);
}
.scene:first-child {
  padding-top: var(--section);
}
.scene:last-child {
  padding-bottom: var(--section);
}
.scene-grid {
  display: grid;
  gap: 32px;
}
.scene-copy {
  display: grid;
  gap: 16px;
  align-content: center;
  justify-items: start;
}
.pain {
  font-family: var(--font-display);
  font-weight: 560;
  font-size: clamp(30px, 2.2vw + 22px, 46px);
  line-height: 1.1;
  letter-spacing: -0.008em;
  font-variation-settings: "opsz" 48;

  text-wrap: balance;
}
.relief {
  font-size: clamp(18px, 0.4vw + 16.5px, 21px);
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 28em;
  text-wrap: pretty;
}
@media (min-width: 600px) {
  .pain {
    text-indent: -0.36em;
  }
}
.relief em,
.lede em {
  font-style: normal;
  color: var(--ink);
  font-weight: 600;
  background: linear-gradient(transparent 62%, var(--sun-soft) 62%, var(--sun-soft) 94%, transparent 94%);
  padding-inline: 1px;
}
.early {
  font-weight: 650;
  font-size: 16px;
  color: var(--sea);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-block: 4px;
}
.early::after {
  content: "";
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9M8.5 4.5 12 8l-3.5 3.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9M8.5 4.5 12 8l-3.5 3.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
  transition: transform 0.2s var(--ease-settle);
}
.early:hover {
  text-decoration: underline;
}
.early:hover::after {
  transform: translateX(3px);
}
.scene .film {
  max-width: 560px;
  justify-self: center;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line);
}
@media (min-width: 900px) {
  .scene {
    min-height: min(100svh, 720px);
    display: grid;
    align-items: center;
  }
  .scene-grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
    gap: 72px;
    align-items: center;
  }
  .scene .film {
    max-width: none;
  }
  .scene:nth-child(even) .film {
    order: -1;
  }
}

/* How it works. */
.how {
  padding-block: var(--section);
  background: var(--paper-raised);
  border-block: 1px solid var(--line);
}
.steps {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 32px;
  margin-top: 48px;
}
.steps li {
  display: grid;
  gap: 8px;
  align-content: start;
}
.step-n {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--sun-soft);
  color: var(--sun-text);
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 20px;
  margin-bottom: 8px;
}
.steps h3 {
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.005em;
}
.steps p {
  color: var(--ink-muted);
  text-wrap: pretty;
}
.price {
  margin-top: 56px;
  padding: 24px;
  border-radius: 24px;
  background: var(--paper);
  border: 1px solid var(--line);
  display: grid;
  gap: 4px;
  font-size: 18px;
  color: var(--ink-muted);
}
.price-big {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
  font-variation-settings: "opsz" 72;
}
@media (min-width: 900px) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
  }
  .price {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    gap: 16px;
    padding: 28px 32px;
  }
}

/* Not an AI trip planner; questions. */
.not {
  padding-block: var(--section) 0;
}
.not .big {
  margin-top: 24px;
}
.faq {
  padding-block: var(--section);
}
.qa {
  margin-top: 32px;
  border-top: 1px solid var(--line);
}
.qa details {
  border-bottom: 1px solid var(--line);
}
.qa summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0;
  font-size: 19px;
  line-height: 1.35;
  font-weight: 650;
}
.qa summary::-webkit-details-marker {
  display: none;
}
.qa summary::after {
  content: "";
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background:
    linear-gradient(var(--ink), var(--ink)) center / 12px 2px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 2px 12px no-repeat,
    var(--paper-sunk);
  transition: background-size 0.25s var(--ease-settle);
}
.qa details[open] summary::after {
  background:
    linear-gradient(var(--ink), var(--ink)) center / 12px 2px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 2px 0 no-repeat,
    var(--paper-sunk);
}
.qa summary:hover::after {
  background-color: var(--line);
}
.qa details p {
  padding: 0 52px 24px 0;
  color: var(--ink-muted);
  font-size: 17px;
  text-wrap: pretty;
}

/* Made on a real trip. */
.founder {
  padding-block: 0 var(--section);
}
.founder-grid {
  display: grid;
  gap: 40px;
  align-items: center;
}
.founder-copy .big {
  margin-top: 24px;
}
.trip-card {
  background: var(--paper-raised);
  border-radius: 24px;
  box-shadow: var(--shadow-float);
  overflow: hidden;
}
.trip-map {
  display: block;
  width: 100%;
  height: auto;
}
.tm-sea {
  fill: var(--sea-soft);
}
.tm-land {
  fill: var(--map-land);
  stroke: var(--line);
  stroke-width: 1;
}
.tm-route {
  fill: none;
  stroke: var(--sea);
  stroke-width: 2.5;
  stroke-dasharray: 2 7;
  stroke-linecap: round;
}
.tm-dots circle {
  fill: var(--sea);
  stroke: var(--paper-raised);
  stroke-width: 3;
}
.tm-labels text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 21px;
  fill: var(--ink);
  paint-order: stroke;
  stroke: var(--map-land);
  stroke-width: 5px;
  stroke-linejoin: round;
}
.trip-card figcaption {
  display: grid;
  gap: 2px;
  padding: 20px 24px 24px;
}
.trip-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.2;
  font-variation-settings: "opsz" 36;
}
.trip-meta {
  color: var(--ink-muted);
  font-size: 15px;
}
@media (min-width: 900px) {
  .founder-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 72px;
  }
}

/* The form. */
.signup {
  padding-block: var(--section);
  background: var(--paper-sunk);
  border-top: 1px solid var(--line);
}
.signup .narrow {
  max-width: 560px;
}
.join {
  display: grid;
  gap: 20px;
  margin-top: 32px;
  padding: 24px;
  background: var(--paper-raised);
  border-radius: 24px;
  box-shadow: var(--shadow-lift);
}
.field {
  display: grid;
  gap: 8px;
}
label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.optional {
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  margin-left: 4px;
}
input,
select {
  font: inherit;
  color: inherit;
  background: var(--paper-sunk);
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 12px 14px;
  min-height: 50px;
  width: 100%;
  min-width: 0;
}
input:focus,
select:focus {
  outline: 2px solid var(--sun);
  outline-offset: 0;
  border-color: var(--sun);
}
.join .button {
  margin-top: 4px;
  width: 100%;
}
.error {
  color: var(--coral);
}
@media (min-width: 600px) {
  .join {
    padding: 32px;
  }
}

/* The footer. */
.foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px 32px;
  padding-block: 32px 48px;
  font-size: 15px;
  color: var(--ink-muted);
}
.foot-brand {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
}
.foot nav {
  display: flex;
  gap: 24px;
}
.foot a {
  color: var(--ink-muted);
}
.foot a:hover {
  color: var(--ink);
}

/* Small pages: thanks, not found, privacy, terms. */
.simple {
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}
.simple main {
  padding-block: 48px var(--section);
}
.simple main > * {
  max-width: 680px;
}
.simple h1 {
  font-size: clamp(34px, 3vw + 22px, 52px);
}
.simple .lede {
  margin-top: 20px;
}
.simple .back {
  margin-top: 32px;
}
.foot a[aria-current="page"] {
  color: var(--ink);
}
.prose {
  display: grid;
  gap: 16px;
  margin-top: 32px;
  color: var(--ink-muted);
}
.prose h2 {
  font-size: 20px;
  line-height: 1.3;
  color: var(--ink);
  margin-top: 16px;
}

/* Inside the films: SVG drawn in the product's shapes. */
.fx text {
  font-family: var(--font-sans);
  fill: var(--ink);
}
.fx .muted {
  fill: var(--ink-muted);
}
.fx .stage-bg {
  fill: var(--paper-sunk);
}
.fx .card {
  fill: var(--paper-raised);
  stroke: var(--card-edge);
  stroke-width: 1;
}
.fx .sunk {
  fill: var(--paper-sunk);
}
.fx .paper {
  fill: var(--paper);
}
.fx .hairline {
  fill: none;
  stroke: var(--line);
  stroke-width: 1;
}
.fx .fx-shade {
  flood-color: var(--shade);
}
.map-land {
  fill: var(--map-land);
}
.map-water {
  fill: var(--sea-soft);
}
.map-river {
  fill: none;
  stroke: var(--sea-soft);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.map-park {
  fill: var(--map-park);
}
.map-road {
  fill: none;
  stroke: var(--map-road);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fx .map-label {
  fill: var(--ink-muted);
  font-weight: 600;
  letter-spacing: 0.04em;
  opacity: 0.75;
}
.fx .place {
  font-family: var(--font-display);
  font-weight: 600;
  font-variation-settings: "opsz" 24;
  paint-order: stroke;
  stroke: var(--map-land);
  stroke-width: 4px;
  stroke-linejoin: round;
}
.fx .place.on-card {
  stroke: none;
}
.face-disc {
  stroke: var(--paper-raised);
}
.p-amber .face-disc {
  fill: var(--person-amber);
}
.p-teal .face-disc {
  fill: var(--person-teal);
}
.p-coral .face-disc {
  fill: var(--person-coral);
}
.p-violet .face-disc {
  fill: var(--person-violet);
}
.p-sky .face-disc {
  fill: var(--person-sky);
}
.fx .face-initial {
  fill: #241d16;
  font-weight: 700;
}
.pin-ring {
  fill: var(--paper-raised);
}
.pin-disc {
  fill: var(--sea);
}
.pin-ic,
.ic {
  fill: none;
  stroke: var(--on-sea);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fx .solid {
  stroke: none;
  fill: var(--on-sea);
}
.fx .ic-sea.solid,
.fx .pin-quiet .solid {
  fill: var(--sea);
}
.fx .ic-ink.solid,
.fx .pin-sun .solid {
  fill: var(--ink);
}
.fx .ic-muted.solid {
  fill: var(--ink-muted);
}
.pin-sun .pin-disc {
  fill: var(--sun);
}
.pin-sun .pin-ic {
  stroke: var(--on-sun);
}
.pin-quiet .pin-disc {
  fill: var(--paper-raised);
  stroke: var(--sea);
  stroke-width: 1.6;
  stroke-dasharray: 3 2.6;
}
.pin-quiet .pin-ic {
  stroke: var(--sea);
}
.ic-ink {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ic-muted {
  fill: none;
  stroke: var(--ink-muted);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ic-sea {
  fill: none;
  stroke: var(--sea);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fx .ai-mark {
  fill: var(--line-strong);
}
.fx .ai-name {
  font-weight: 600;
}
.fx .ai-chatgpt .ai-name {
  font-family: ui-sans-serif, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.fx .ai-claude .ai-name {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-weight: 500;
  letter-spacing: 0;
}
.fx .ai-grok .ai-name {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.fx .caret {
  fill: var(--sea);
}
.fx .dot {
  fill: var(--ink-muted);
}
.fx .bubble {
  fill: var(--paper-sunk);
}
.fx .composer {
  fill: var(--paper-raised);
  stroke: var(--line);
}
.fx .eyebrow-t {
  fill: var(--sun-text);
  font-weight: 700;
  letter-spacing: 0.08em;
}
.fx .band {
  fill: var(--paper-sunk);
  stroke: var(--line-strong);
  stroke-width: 1;
  stroke-dasharray: 4 3;
}
.fx .lane {
  fill: var(--paper-sunk);
}
.fx .sun-fill {
  fill: var(--sun);
}
.fx .sun-soft {
  fill: var(--sun-soft);
}
.fx .sea-fill {
  fill: var(--sea);
}
.fx .sea-soft {
  fill: var(--sea-soft);
}
.fx .night {
  fill: var(--night);
}
.fx .line-fill {
  fill: var(--line);
}
.fx .route {
  fill: none;
  stroke: var(--sea);
  stroke-width: 2.2;
  stroke-dasharray: 1 6;
  stroke-linecap: round;
}
.fx .sun-text {
  fill: var(--sun-text);
}
.fx .sea-text {
  fill: var(--sea);
}
.fx .moss-text {
  fill: var(--moss);
}
.fx .coral-text {
  fill: var(--coral);
}
.fx .strong {
  font-weight: 650;
}
.fx .x-stroke {
  fill: none;
  stroke: var(--coral);
  stroke-width: 1.7;
  stroke-linecap: round;
}
.fx .ok-stroke {
  fill: none;
  stroke: var(--moss);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}