:root {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #173b35;
  background: #edf2f1;
  font-synthesis: none;
  --green: #009b86;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
  --nav-height: calc(72px + var(--safe-bottom));
}
* { box-sizing: border-box; }
body { margin: 0; overflow: hidden; }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
button:focus-visible, a:focus-visible { outline: 3px solid #06aa95; outline-offset: -3px; }
button:disabled { cursor: default; opacity: .5; }
button:active { transform: scale(.97); }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; display: block; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.app {
  --screen-bg: #213740;
  --nav-bg: #fffffff5;
  --nav-text: #85948d;
  --nav-active: #009b86;
  --nav-highlight: #009b8610;
  --nav-border: #dce8e780;
  --surface: #fffffff0;
  --text: #6a8376;
  width: 100%;
  max-width: 440px;
  height: 100dvh;
  margin: auto;
  padding-top: var(--safe-top);
  display: grid;
  grid-template-rows: minmax(0, 1fr) var(--nav-height);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--screen-bg);
  transition: background-color .2s;
}
.app[data-theme="dark"] {
  --nav-bg: #132a2ef5;
  --nav-text: #829b9c;
  --nav-active: #48edcd;
  --nav-highlight: #47edcd15;
  --nav-border: #ffffff12;
  --surface: #18383bf0;
  --text: #b5d5cf;
}
#content {
  position: relative;
  min-height: 0;
  outline: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  overscroll-behavior-y: contain;
  background: var(--screen-bg);
}
#content::-webkit-scrollbar { display: none; }
.screen { position: relative; width: 100%; }
.screen-image { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.screen.is-entering { animation: page-in .28s cubic-bezier(.2,.7,.2,1) both; }
.screen[data-direction="back"].is-entering { animation-name: page-back; }
.screen[data-direction="tab"].is-entering { animation: tab-in .2s ease both; }
.hotspot {
  position: absolute; display: block; border: 1px solid transparent; border-radius: 10px;
  padding: 0; z-index: 1; transition: background .18s, border-color .18s;
}
.hotspot:focus-visible { background: #ffffff0e; border-color: #ffffff4d; }
.hotspot:active { background: #04c9ac2e; transform: none; }

.bottom-nav {
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: stretch;
  padding: 7px 8px calc(8px + var(--safe-bottom)); border-top: 1px solid var(--nav-border);
  background: var(--nav-bg); z-index: 20; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  transition: background-color .2s, border-color .2s;
}
.nav-item {
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 4px;
  position: relative; isolation: isolate; color: var(--nav-text); font-size: 11px; line-height: 16px;
  text-decoration: none; border-radius: 14px; transition: color .2s;
}
.nav-item svg { width: 23px; height: 23px; transition: transform .22s cubic-bezier(.2,.7,.2,1); }
.nav-item::before {
  content: ""; position: absolute; top: 2px; left: calc(50% - 20px); width: 40px; height: 31px;
  border-radius: 11px; background: var(--nav-highlight); z-index: -1; opacity: 0;
  transform: scale(.8); transition: opacity .2s, transform .25s;
}
.nav-item[aria-current="page"] { color: var(--nav-active); font-weight: 600; }
.nav-item[aria-current="page"]::before { opacity: 1; transform: scale(1); }
.nav-item[aria-current="page"] svg { transform: translateY(-1px); }
.nav-item:active svg { transform: scale(.9); }
.load-error { padding: 80px 25px; text-align: center; color: var(--text); }
.load-error button { background: var(--surface); padding: 12px 25px; border-radius: 20px; }
.no-script { position: fixed; inset: 0; z-index: 100; background: #fff; padding: 25px; text-align: center; }
.not-found { padding: 100px 30px; color: var(--text); text-align: center; }
.not-found h2 { font-size: 22px; }
.not-found p { font-size: 13px; opacity: .7; line-height: 1.8; }
.not-found button { margin-top: 15px; border-radius: 20px; background: #00a78e; color: #fff; padding: 12px 30px; }
@keyframes page-in { from { opacity: .35; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } }
@keyframes page-back { from { opacity: .35; transform: translateX(-12px); } to { opacity: 1; transform: translateX(0); } }
@keyframes tab-in { from { opacity: .5; } to { opacity: 1; } }
@media (hover: hover) {
  .hotspot:hover { background: #ffffff0e; border-color: #ffffff4d; }
}
@media (min-width: 700px) {
  body { padding: 24px 0; background: radial-gradient(ellipse at 20% 25%, #dfece6, transparent 50%), radial-gradient(ellipse at 85% 80%, #dce8e7, transparent 50%), #edf2f1; }
  .app { width: 414px; height: min(880px, calc(100dvh - 48px)); min-height: 300px; border: 5px solid #fff; border-radius: 32px; box-shadow: 0 24px 80px #2547381a, 0 2px 8px #25473808; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}