:root {
  color-scheme: light;
  --paper: #fffbef;
  --ink: #40320a;
  --muted: #877340;
  --gold: #efad00;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  background: var(--paper);
  color: var(--ink);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: max(40px, env(safe-area-inset-top)) 20px max(50px, env(safe-area-inset-bottom));
}
.journey { width: 100%; max-width: 1000px; text-align: center; }
.crest { width: min(46vh, 410px, 76vw); aspect-ratio: 1; position: relative; margin: 0 auto; }
.emblem { position: absolute; inset: 22px; overflow: hidden; border-radius: 50%; mix-blend-mode: darken; animation: float 3.4s ease-in-out infinite; }
.brand-art { display: block; position: absolute; max-width: none; height: auto; pointer-events: none; user-select: none; filter: brightness(1.035); }
/* Two display windows use the exact approved artwork, without redrawing or modifying it. */
.emblem .brand-art { width: 156.75%; left: -28.375%; top: -8%; }
.wordmark { position: relative; overflow: hidden; width: min(640px, 100%); aspect-ratio: 1180 / 314; margin: 22px auto 17px; padding: 0; line-height: 1; mix-blend-mode: darken; }
.wordmark .brand-art { width: 106.2712%; left: -3.1356%; top: -273.2484%; }
.orbit { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); }
.orbit circle { fill: none; stroke-width: 4; }
.orbit-track { stroke: #fff0ad; }
.orbit-runner { stroke: var(--gold); stroke-linecap: round; stroke-dasharray: 1020 520; transform-origin: center; animation: orbit 2.6s linear infinite; }
.escort { margin: 0; font-size: clamp(17px, 2.25vw, 22px); line-height: 1.7; }
.escort-label { display: block; white-space: nowrap; }
.destination-line { display: inline-flex; align-items: center; justify-content: center; position: relative; width: 16em; }
#destination { font-weight: 700; display: inline-block; white-space: nowrap; }
.dots { display: inline-flex; gap: 4px; align-items: center; margin-left: 6px; }
.dots i { display: block; width: 5px; height: 5px; border-radius: 50%; background: var(--ink); opacity: .25; animation: dot 1.4s ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay: .16s; }
.dots i:nth-child(3) { animation-delay: .32s; }
.go { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 15px; padding: 5px 15px; font-size: 18px; color: var(--muted); text-decoration: none; text-underline-offset: 5px; border-radius: 6px; transition: color .2s; }
.go:hover { color: var(--ink); text-decoration: underline; }
.go:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
body[data-state="settled"] .orbit-runner { animation-play-state: paused; }
body[data-state="settled"] .dots i { animation: none; opacity: .65; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.no-script { color: var(--muted); font-size: 14px; }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes dot { 0%, 65%, 100% { opacity: .2; } 30% { opacity: .85; } }
@media (max-width: 600px) {
  .crest { width: min(77vw, 370px, 43svh); }
  .emblem { inset: 18px; }
  .wordmark { width: min(410px, 100%); margin-top: 22px; margin-bottom: 19px; }
  .escort { display: block; font-size: 18px; }
  .escort-label { display: block; }
  .destination-line { margin-top: 2px; width: 100%; max-width: 100%; padding-right: 0; }
  .dots { position: static; margin-left: 6px; }
  #destination { font-size: clamp(15px, 4.5vw, 19px); }
  .go { font-size: 16px; margin-top: 14px; }
}
@media (max-height: 540px) and (min-width: 601px) {
  body { padding: 24px; }
  .journey { display: grid; grid-template-columns: min(48vh, 210px) minmax(0, 400px); column-gap: 28px; justify-content: center; align-items: center; }
  .crest { width: 48vh; }
  .crest { grid-column: 1; grid-row: 1 / 4; }
  .wordmark { grid-column: 2; grid-row: 1; width: 100%; margin: 0 0 10px; }
  .escort { grid-column: 2; grid-row: 2; }
  .go { grid-column: 2; grid-row: 3; justify-self: center; }
  .escort { font-size: 17px; }
  .go { margin-top: 4px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .emblem, .orbit-runner, .dots i { animation: none; }
  .go { transition: none; }
}