:root {
  --bg: #f2f8f8;
  --fg: #173f47;
  --muted: #738a90;
  --ink: #0f6a7b;
  --track: rgba(15, 106, 123, .13);
  --card: #fff;
  --size: min(64vw, 42svh, 320px);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0e1c21; --fg: #e6f3f4; --muted: #95acb1; --ink: #7cc7d2; --track: #7cc7d22e; --card: #192d33; }
}
:root[data-theme="classic"] { --bg: #f2f8f8; --fg: #173f47; --muted: #738a90; --ink: #0f6a7b; --track: #0f6a7b21; --card: #fff; color-scheme: light; }
:root[data-theme="paper"] { --bg: #faf7f0; --fg: #173f47; --muted: #7a827d; --ink: #0f6a7b; --track: #0f6a7b21; --card: #fffdf8; color-scheme: light; }
:root[data-theme="night"] { --bg: #0e1c21; --fg: #e6f3f4; --muted: #95acb1; --ink: #7cc7d2; --track: #7cc7d22e; --card: #192d33; color-scheme: dark; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0; min-height: 100vh; min-height: 100svh;
  display: grid; place-items: center;
  padding: 36px 20px 58px;
  background: var(--bg); color: var(--fg);
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-tap-highlight-color: transparent;
}
main { display: flex; flex-direction: column; align-items: center; gap: 34px; text-align: center; max-width: 100%; }
.emblem-wrap { transition: transform .45s cubic-bezier(.5, 0, .75, 0), opacity .45s ease-in; }
.emblem { position: relative; width: var(--size); aspect-ratio: 1; border-radius: 50%; background: #fff; }
.emblem img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
.progress { position: absolute; inset: -5.5%; width: 111%; height: 111%; transform: rotate(-90deg); overflow: visible; }
.progress circle { fill: none; stroke-width: 1.1; stroke-linecap: round; }
.track { stroke: var(--track); }
.bar { stroke: var(--ink); stroke-dasharray: 100; stroke-dashoffset: 100; }
.copy { display: flex; flex-direction: column; align-items: center; gap: 11px; transition: opacity .3s, transform .3s; }
h1 { font-size: clamp(26px, 7vw, 40px); font-weight: 800; letter-spacing: .12em; padding-left: .12em; line-height: 1.35; margin: 0; }
.status { margin: 0; font-size: clamp(14px, 3.7vw, 17px); line-height: 1.8; }
.status strong { font-weight: 650; }
.dots { white-space: nowrap; }
.dots i { display: inline-block; width: .3em; height: .3em; margin-left: .2em; border-radius: 50%; background: currentColor; vertical-align: middle; animation: dot 1s ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay: .15s; }
.dots i:nth-child(3) { animation-delay: .3s; }
.go, .replay { color: var(--muted); font-size: 13px; line-height: 1.8; text-underline-offset: 4px; }
.go { margin-top: 1px; }
.go:hover, .replay:hover { color: var(--ink); }
.replay { border: 0; padding: 1px 6px; background: transparent; text-decoration: underline; font-family: inherit; cursor: pointer; }
.preview-hint { margin: 0; font-size: 12px; line-height: 1.8; color: var(--muted); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; border-radius: 2px; }
.about-button { position: fixed; bottom: max(10px, env(safe-area-inset-bottom)); right: max(12px, env(safe-area-inset-right)); border: 0; padding: 10px; font: inherit; font-size: 13px; background: none; color: var(--muted); cursor: pointer; }
.about-button:hover { color: var(--fg); }
.about { width: min(390px, calc(100vw - 36px)); max-height: 80svh; margin: auto; padding: 26px; border: 0; border-radius: 16px; background: var(--card); color: var(--fg); box-shadow: 0 18px 50px #0003; }
.about::backdrop { background: #0b1b2466; backdrop-filter: blur(3px); }
.about h2 { margin: 0 0 14px; font-size: 19px; }
.about p { margin: 9px 0; font-size: 14px; line-height: 1.85; }
.about a { color: var(--ink); text-underline-offset: 4px; }
.destination { padding-top: 5px; }
.about form { margin-top: 20px; text-align: right; }
.close-button { padding: 9px 20px; border: 0; border-radius: 999px; background: var(--ink); color: var(--card); font-family: inherit; font-weight: 600; cursor: pointer; }
.entering .emblem { animation: pop .7s cubic-bezier(.34, 1.56, .64, 1) backwards; }
.entering .copy { animation: rise .5s ease-out .15s backwards; }
.leaving .emblem-wrap { transform: scale(1.18); opacity: 0; }
.leaving .copy { transform: translateY(8px); opacity: 0; }
.leaving .about-button { opacity: 0; pointer-events: none; }
.paused .dots i { animation-play-state: paused; }
@keyframes pop { from { transform: scale(.55); opacity: 0; } }
@keyframes rise { from { transform: translateY(10px); opacity: 0; } }
@keyframes dot { 0%, 100% { opacity: .25; } 40% { opacity: 1; transform: translateY(-.25em); } }
@media (max-height: 500px) and (min-width: 650px) {
  :root { --size: min(42svh, 190px); }
  main { flex-direction: row; gap: 40px; }
  h1 { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .entering .emblem, .entering .copy, .dots i { animation: none; }
  .emblem-wrap, .copy { transition: none; }
}