/* Colours from the app icon: pond water, a lotus leaf, a lotus petal, and the pale
   light on the water. Fonts are the system's own, so the site loads nothing from
   elsewhere and reads the same where outside font services are blocked. */
:root {
  --pond: #0b2624;
  --pond-deep: #061715;
  --pond-raised: #10302d;
  --leaf: #5e9a74;
  --leaf-light: #a8cbb3;
  --petal: #efa3b8;
  --paper: #edf1e8;
  --mist: #9eb6ae;
  --line: rgba(237, 241, 232, 0.12);
  --glass: rgba(6, 23, 21, 0.5);

  /* Chinese pages set Chinese punctuation in the Song face too; English pages
     prefer the system's Latin serif. */
  --serif: "Songti SC", "STSong", "Noto Serif CJK SC", "Source Han Serif SC", "SimSun", ui-serif, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI",
          "Noto Sans CJK SC", sans-serif;

  --gutter: clamp(20px, 5vw, 72px);
  --radius: 14px;
  --content: 1240px;
}
:root:lang(en) {
  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Georgia, "Songti SC", serif;
}

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

html {
  background: var(--pond);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--pond);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }
h1, h2 { font-family: var(--serif); font-weight: 400; }
ul { margin: 0; padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
::selection { background: rgba(239, 163, 184, 0.35); }

:focus-visible { outline: 2px solid var(--petal); outline-offset: 3px; border-radius: 6px; }

.icon { width: 1.15em; height: 1.15em; flex: none; }

.skip-link {
  position: absolute;
  z-index: 100;
  left: var(--gutter);
  top: -80px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--pond-deep);
  font-weight: 600;
}
.skip-link:focus { top: 14px; }

/* Buttons that lead somewhere: a solid lotus one for the main action, a glass one beside it. */
.button {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  min-height: 46px;
  padding: 0 22px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background-color 0.2s, border-color 0.2s;
}
.button.primary { background: var(--petal); color: var(--pond-deep); }
.button.primary:hover { background: #f5bccb; }
.button.quiet {
  border: 1px solid rgba(237, 241, 232, 0.3);
  background: var(--glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.button.quiet:hover { border-color: rgba(237, 241, 232, 0.6); }

/* Page sections below the live scene share one measure. */
.section {
  max-width: var(--content);
  margin: 0 auto;
  padding: clamp(84px, 11vw, 150px) var(--gutter) 0;
}
.section-head { display: grid; gap: 14px; max-width: 44rem; margin-bottom: clamp(34px, 5vw, 58px); }
.section-head h2 { font-size: clamp(1.9rem, 3.2vw, 2.75rem); line-height: 1.3; letter-spacing: 0.08em; }
:lang(en) .section-head h2 { letter-spacing: 0; }
.section-head p { color: var(--mist); font-size: 1.05rem; }
/* A short notice under a section's lead, e.g. what the store versions include so far. */
.section-head .section-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--glass);
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--leaf-light);
}
.section-note .icon { flex: none; width: 18px; height: 18px; margin-top: 0.2em; }

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

/* Lies over the top of the live scene rather than above it. */
.site-header {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: max(18px, env(safe-area-inset-top)) var(--gutter) 0;
  pointer-events: none;
}
.site-header a { pointer-events: auto; }

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--serif);
  font-size: 1.15rem;
  letter-spacing: 0.14em;
  text-shadow: 0 1px 14px rgba(6, 23, 21, 0.7);
}
:lang(en) .brand { letter-spacing: 0.02em; }
.brand img { width: 32px; height: 32px; border-radius: 8px; box-shadow: 0 2px 10px rgba(6, 23, 21, 0.4); }

.site-nav { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 30px); font-size: 0.92rem; }
.site-nav a { opacity: 0.86; text-shadow: 0 1px 12px rgba(6, 23, 21, 0.8); }
.site-nav a:hover { opacity: 1; }
.site-nav .lang-switch {
  padding: 5px 14px;
  border: 1px solid rgba(237, 241, 232, 0.3);
  border-radius: 999px;
  background: var(--glass);
  opacity: 1;
}

@media (max-width: 640px) {
  .site-nav .nav-optional { display: none; }
  .brand span { font-size: 1rem; }
}

/* The first screen is a wallpaper: a live scene fills it, and everything else sits
   on top without taking the water away from the pointer. */
.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: var(--pond-deep);
  isolation: isolate;
}

.stage { position: absolute; inset: 0; }
.stage-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--pond-deep); }
/* While a scene loads, a blurred still of it stands in, then fades away. */
.stage-poster {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(12px) saturate(1.1);
  transform: scale(1.06);
  transition: opacity 0.9s ease;
  pointer-events: none;
}
.stage.is-ready .stage-poster { opacity: 0; }

/* Shade under the words so they read on any scene; clicks pass straight through. */
.hero::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(6, 23, 21, 0.55) 0%, transparent 18%),
    linear-gradient(0deg, rgba(6, 23, 21, 0.72) 0%, transparent 42%),
    linear-gradient(90deg, rgba(6, 23, 21, 0.5) 0%, transparent 52%),
    linear-gradient(270deg, rgba(6, 23, 21, 0.5) 0%, transparent 24%);
}

.hero-copy {
  position: absolute;
  z-index: 2;
  left: var(--gutter);
  bottom: clamp(96px, 15vh, 170px);
  max-width: min(36rem, calc(100% - 2 * var(--gutter)));
  display: grid;
  gap: 22px;
  pointer-events: none;
  text-shadow: 0 2px 24px rgba(6, 23, 21, 0.6);
}
.hero-copy a { pointer-events: auto; }
.hero-copy h1 { font-size: clamp(2.3rem, 4.8vw, 4.3rem); line-height: 1.28; letter-spacing: 0.08em; }
.hero-copy h1 span { display: block; }
:lang(en) .hero-copy h1 { font-size: clamp(2.1rem, 4.3vw, 3.9rem); line-height: 1.1; letter-spacing: -0.01em; }
.hero-copy .lead { max-width: 30em; font-size: clamp(1rem, 1.25vw, 1.12rem); line-height: 1.8; color: rgba(237, 241, 232, 0.88); }
.hero-copy .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; text-shadow: none; }

/* Scene names hang down the right edge like the labels on scrolls, read right to
   left; the one playing hangs on a lotus-coloured cord. */
.scene-scroll {
  position: absolute;
  z-index: 3;
  top: 50%;
  right: var(--gutter);
  transform: translateY(-50%);
  display: flex;
  flex-direction: row-reverse;
  gap: 4px;
}
.scene-scroll button {
  position: relative;
  padding: 40px 9px 12px;
  border: 0;
  background: none;
  writing-mode: vertical-rl;
  font-family: var(--serif);
  font-size: 1.08rem;
  letter-spacing: 0.34em;
  opacity: 0.72;
  cursor: pointer;
  text-shadow: 0 0 3px rgba(6, 23, 21, 0.9), 0 1px 14px rgba(6, 23, 21, 0.9);
  transition: opacity 0.25s;
}
:lang(en) .scene-scroll button { font-size: 0.98rem; letter-spacing: 0.06em; }
.scene-scroll button::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(50% - 0.5px);
  width: 1px;
  height: 28px;
  background: currentColor;
  opacity: 0.4;
  transition: height 0.3s, opacity 0.3s, background-color 0.3s;
}
.scene-scroll button:hover { opacity: 0.9; }
.scene-scroll button[aria-pressed="true"] { opacity: 1; }
.scene-scroll button[aria-pressed="true"]::before { height: 34px; opacity: 1; background: var(--petal); }

.stage-bar {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px var(--gutter) max(18px, env(safe-area-inset-bottom));
  pointer-events: none;
}
.stage-bar button { pointer-events: auto; }
.stage-hint {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  font-size: 0.86rem;
  color: rgba(237, 241, 232, 0.8);
  text-shadow: 0 1px 10px rgba(6, 23, 21, 0.9);
}
.stage-hint:has(span:empty) { visibility: hidden; }
.stage-controls { display: flex; gap: 10px; }

.round {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: border-color 0.2s;
}
.round:hover { border-color: rgba(237, 241, 232, 0.45); }
.round .icon { width: 18px; height: 18px; }

/* On touch screens the scene would swallow every swipe, so a shield keeps the page
   scrolling until the visitor taps to play with the scene. */
.stage-shield {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: max(96px, 20svh);
  border: 0;
  background: transparent;
  cursor: pointer;
}
.stage-shield[hidden] { display: none; }
.shield-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid rgba(237, 241, 232, 0.3);
  border-radius: 999px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: 0.9rem;
}

.hero:fullscreen .hero-copy { display: none; }
.hero:fullscreen { min-height: 0; }

@media (max-width: 760px) {
  .hero-copy { bottom: 150px; gap: 16px; }
  .hero-copy .lead { font-size: 0.95rem; }
  /* The labels fold into a row of chips above the controls. */
  .scene-scroll {
    top: auto;
    bottom: 76px;
    left: 0;
    right: 0;
    transform: none;
    flex-direction: row;
    gap: 8px;
    padding: 0 var(--gutter);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .scene-scroll::-webkit-scrollbar { display: none; }
  .scene-scroll button {
    writing-mode: horizontal-tb;
    padding: 7px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--glass);
    font-size: 0.9rem;
    letter-spacing: 0.08em;
    white-space: nowrap;
  }
  .scene-scroll button::before { display: none; }
  .scene-scroll button[aria-pressed="true"] { border-color: var(--petal); color: var(--petal); }
}

/* Scenes: a still of each, which plays it at the top of the page. */
.scene-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: clamp(28px, 3vw, 40px);
}
.scene-filter[hidden] { display: none; }
.scene-filter button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: none;
  font-size: 0.92rem;
  color: var(--mist);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}
.scene-filter .icon { width: 16px; height: 16px; }
.scene-filter span { font-variant-numeric: tabular-nums; opacity: 0.7; }
.scene-filter button:hover { color: var(--paper); border-color: rgba(237, 241, 232, 0.3); }
.scene-filter button[aria-pressed="true"] { color: var(--pond); border-color: var(--leaf-light); background: var(--leaf-light); }
.scene-card[hidden] { display: none; }
.scene-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: clamp(34px, 4vw, 52px) clamp(20px, 2.4vw, 32px);
}
.scene-try {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 800 / 552;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--pond-raised);
  cursor: pointer;
}
.scene-try img, .scene-blank { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.scene-blank { display: block; background: linear-gradient(135deg, var(--pond-raised), var(--leaf)); }
.scene-try:hover img { transform: scale(1.035); }
.scene-try-label {
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: 0.85rem;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.25s, transform 0.25s;
}
.scene-try-label .icon { width: 14px; height: 14px; }
.scene-try:hover .scene-try-label, .scene-try:focus-visible .scene-try-label { opacity: 1; transform: none; }
@media (hover: none) { .scene-try-label { opacity: 1; transform: none; } }

.scene-card h3 { margin: 20px 0 6px; font-family: var(--serif); font-size: 1.4rem; font-weight: 400; letter-spacing: 0.1em; }
:lang(en) .scene-card h3 { letter-spacing: 0; }
.scene-card p { color: var(--mist); }
.scene-card .scene-hint {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--leaf-light);
}
.scene-hint .icon { margin-top: 0.2em; }
.scene-open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: 0.85rem;
  color: var(--mist);
}
.scene-open:hover { color: var(--paper); }
.scene-open .icon { width: 14px; height: 14px; }

/* Features */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: 46px clamp(28px, 3.4vw, 48px);
}
.feature-grid li { padding-top: 24px; border-top: 1px solid var(--line); }
.feature-icon { width: 28px; height: 28px; color: var(--leaf-light); }
.feature-grid h3 { margin: 16px 0 8px; font-size: 1.06rem; font-weight: 600; }
.feature-grid p { color: var(--mist); font-size: 0.96rem; line-height: 1.8; }

/* Download */
.platform-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 20px;
}
.platform {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 10px;
  padding: clamp(26px, 3vw, 36px);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(16, 48, 45, 0.75), rgba(16, 48, 45, 0.2));
}
.platform-icon { width: 36px; height: 36px; margin-bottom: 8px; color: var(--leaf-light); }
.platform h3 { font-family: var(--serif); font-size: 1.65rem; font-weight: 400; }
.platform .requirement { font-size: 0.88rem; color: var(--mist); margin-bottom: 14px; }
.platform .status {
  padding: 6px 14px;
  border: 1px dashed currentColor;
  border-radius: 999px;
  font-size: 0.88rem;
  color: var(--petal);
}
.platform .status[data-status="planned"] { color: var(--mist); }
.platform[data-status="planned"] { background: none; }

/* Questions */
.faq-list { max-width: 820px; border-bottom: 1px solid var(--line); }
.faq-list details { border-top: 1px solid var(--line); }
.faq-list summary {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
  font-family: var(--serif);
  font-size: 1.18rem;
  list-style: none;
  cursor: pointer;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; font-family: var(--sans); font-size: 1.4rem; line-height: 1; color: var(--mist); transition: transform 0.25s; }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details p { max-width: 44rem; padding-bottom: 24px; color: var(--mist); }

/* Footer */
.site-footer { margin-top: clamp(96px, 12vw, 170px); border-top: 1px solid var(--line); background: var(--pond-deep); }
.footer-inner {
  display: grid;
  gap: 14px;
  max-width: var(--content);
  margin: 0 auto;
  padding: 44px var(--gutter) max(44px, env(safe-area-inset-bottom));
}
.footer-brand { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 1.05rem; letter-spacing: 0.12em; }
:lang(en) .footer-brand { letter-spacing: 0.02em; }
.footer-brand img { width: 24px; height: 24px; border-radius: 6px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 26px; font-size: 0.92rem; }
.footer-links a { color: var(--mist); }
.footer-links a:hover { color: var(--paper); }
.footer-note { font-size: 0.82rem; color: rgba(158, 182, 174, 0.75); }