:root {
  /* Palette taken from the app icon: teal #01565E, leaf #75BC9A, arrow orange #FA8335 */
  --teal: #01565E;
  --leaf: #75BC9A;
  --accent: #FA8335;
  --ink: #12302F;
  --paper: #EFF6F2;
  --room: #062B2F;
  --cream: #EAF4EE;
  --safe: #A8470F; /* icon orange, darkened for AA: only the QEMTR wordmark + active EN/中文 on light pages */
  --link: #01565E;
  --link-hover: #013F45;
  --rule: #CFE3D8;
  --mute: #4E6B66;
  --display: "Fraunces", "Iowan Old Style", "Palatino Linotype", serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html { font-size: 18px; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--mono);
  font-size: 0.92rem;
  line-height: 1.55;
}
a { color: var(--link); text-decoration-color: currentColor; }
a:hover { color: var(--link-hover); }
.top a, footer a { color: inherit; }
.top a:hover, footer a:hover { color: var(--link); }
.top a.mark, .top .mark { color: var(--safe); }
.wrap {
  width: min(42rem, calc(100% - 2.4rem));
  margin: 0 auto;
  padding: 2.2rem 0 4.5rem;
}
.top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.7rem;
  margin-bottom: 2rem;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.top a { text-decoration: none; }
.mark { color: var(--safe); font-weight: 500; }
h1, h2 {
  font-family: var(--display);
  font-weight: 560;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
h1 { font-size: 2.1rem; margin: 0 0 0.8rem; }
h2 { font-size: 1.15rem; margin: 2rem 0 0.5rem; }
p, li { max-width: 40rem; }
ul { padding-left: 1.15rem; }
.lede { color: var(--mute); margin: 0 0 1.6rem; }
.zh { margin-top: 2.8rem; padding-top: 1.4rem; border-top: 1px solid var(--rule); }
.zh h1 { font-size: 1.7rem; }
footer {
  margin-top: 3rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--rule);
  color: var(--mute);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body.home {
  --safe: var(--accent);
  --link: var(--accent);
  --link-hover: var(--accent);
  background: var(--room);
  color: var(--cream);
  min-height: 100vh;
}
body.home .top { border-color: #12454A; }
body.home .mute { color: #9DBDB2; }
body.home h1 {
  font-size: clamp(2.6rem, 8vw, 4.4rem);
  margin: 2.4rem 0 0.6rem;
}
body.home .tag {
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 560;
  max-width: 22rem;
  margin: 0 0 1.1rem;
}
body.home .store {
  margin: 0 0 2rem;
}
body.home .store a {
  display: inline-block;
  line-height: 0;
}
body.home .store img {
  display: block;
  height: 48px;
  width: auto;
}
body.home .acts {
  display: grid;
  gap: 0.35rem;
  margin: 0 0 2.4rem;
  padding: 0;
  list-style: none;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
body.home .acts a { text-decoration: none; }
body.home footer { border-color: #12454A; }

body.home .wrap {
  width: min(68rem, calc(100% - 2.4rem));
}
body.home h1,
body.home .acts,
body.home .mute,
body.home footer,
body.home .moves h2,
body.home .faq,
body.home .zh {
  max-width: 40rem;
}


/* End frame is the resting style. Keyframes hide it, play in, then fade. */
body.home .moves { margin: 0 0 2.6rem; }
body.home .moves h2,
body.home .faq h2,
body.home .zh h2 {
  margin: 0 0 1rem;
  font-size: 1.45rem;
}
body.home .move-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2.2rem;
}
body.home .move {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(16rem, 1.15fr);
  gap: 1.2rem 1.8rem;
  align-items: center;
  max-width: none;
}
body.home .move:nth-child(even) .move-copy { order: 2; }
body.home .move:nth-child(even) .stage { order: 1; }
body.home .move-copy { min-width: 0; }
body.home .kicker {
  margin: 0 0 0.4rem;
  color: var(--safe);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
body.home .move-copy p:last-child {
  margin: 0;
  max-width: 26rem;
  font-size: 0.92rem;
  line-height: 1.45;
}

body.home .stage {
  position: relative;
  height: 220px;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(117, 188, 154, 0.18);
  border-radius: 10px;
  background: #0B3A3F;
  box-shadow: inset 0 14px 28px rgba(0, 0, 0, 0.28);
}
body.home .file,
body.home .born,
body.home .hud {
  margin: 0;
  max-width: none;
  color: #CFE6DC;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0;
  line-height: 1.35;
  text-transform: none;
}
body.home .file,
body.home .born {
  position: absolute;
  z-index: 5;
  left: 0.85rem;
}
body.home .file { top: 0.62rem; }
body.home .born { top: 0.62rem; left: 3.15rem; }
body.home .result {
  position: absolute;
  z-index: 4;
  top: 2rem;
  left: 0.8rem;
  right: 0.8rem;
}
body.home .cascade {
  position: absolute;
  bottom: 0.4rem;
  left: 50%;
  width: min(24rem, calc(100% - 1rem));
  height: 5.7rem;
  transform: translateX(-50%);
}
body.home .menu {
  position: absolute;
  z-index: 1;
  margin: 0;
  padding: 0.16rem;
  list-style: none;
  border-radius: 8px;
  background: #EAF4EE;
  color: #0E2A2D;
  font-size: 0.6rem;
  line-height: 1.2;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
}
body.home .menu li {
  max-width: none;
  padding: 0.1rem 0.42rem;
  border-radius: 4px;
  white-space: nowrap;
}
body.home .menu-root { top: 1.45rem; left: 0; z-index: 1; min-width: 5.2rem; }
body.home .menu-verb { top: 0.62rem; left: 5rem; z-index: 2; min-width: 5.5rem; }
body.home .menu-leaf { top: 0; left: 9.5rem; z-index: 3; }
body.home .menu-root li::after,
body.home .menu-verb li.sub::after {
  content: "›";
  float: right;
  margin-left: 0.55rem;
  opacity: 0.45;
}
body.home .menu li.hit {
  background: var(--accent);
  color: #0E2A2D;
  font-weight: 500;
}
body.home .hud { color: #CFE6DC; }
body.home .namer,
body.home .slip {
  width: fit-content;
  max-width: 100%;
  border-radius: 8px;
  background: #EAF4EE;
  color: #0E2A2D;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
}
body.home .namer { padding: 0.4rem 0.5rem 0.45rem; }
body.home .namer-title,
body.home .namer-field,
body.home .slip p {
  margin: 0;
  max-width: none;
  color: #0E2A2D;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0;
  line-height: 1.35;
  text-transform: none;
}
body.home .namer-title { margin-bottom: 0.28rem; }
body.home .namer-field {
  min-height: 1.3rem;
  padding: 0.12rem 0.4rem;
  border: 1px solid #B9D3C8;
  border-radius: 4px;
  background: #F7FBF9;
}
body.home .typed {
  box-sizing: content-box;
  display: inline-block;
  width: 8ch;
  overflow: hidden;
  vertical-align: bottom;
  white-space: nowrap;
  border-right: 1px solid #0E2A2D;
}
body.home .slip { padding: 0.38rem 0.5rem; }
body.home .scene-ai .hud { margin-top: 0.35rem; }

body.home .scene-copy { --d: 0s; }
body.home .scene-new { --d: 2s; }
body.home .scene-open { --d: 4s; }
body.home .scene-ai { --d: 6s; }
body.home .menu-root {
  animation-name: rise-root;
  animation-duration: 8s;
  animation-timing-function: ease;
  animation-delay: var(--d, 0s);
  animation-iteration-count: infinite;
  animation-fill-mode: backwards;
}
body.home .menu-verb {
  animation-name: rise-verb;
  animation-duration: 8s;
  animation-timing-function: ease;
  animation-delay: var(--d, 0s);
  animation-iteration-count: infinite;
  animation-fill-mode: backwards;
}
body.home .menu-leaf {
  animation-name: rise-leaf;
  animation-duration: 8s;
  animation-timing-function: ease;
  animation-delay: var(--d, 0s);
  animation-iteration-count: infinite;
  animation-fill-mode: backwards;
}
body.home .menu li.hit {
  animation-name: hit-row;
  animation-duration: 8s;
  animation-timing-function: ease;
  animation-delay: var(--d, 0s);
  animation-iteration-count: infinite;
  animation-fill-mode: backwards;
}
body.home .result,
body.home .born {
  animation-name: rise-result;
  animation-duration: 8s;
  animation-timing-function: ease;
  animation-delay: var(--d, 0s);
  animation-iteration-count: infinite;
  animation-fill-mode: backwards;
}
body.home .typed {
  animation-name: type-name;
  animation-duration: 8s;
  animation-timing-function: linear;
  animation-delay: var(--d, 0s);
  animation-iteration-count: infinite;
  animation-fill-mode: backwards;
}

@keyframes rise-root {
  0%, 12% { opacity: 0; transform: translateY(8px); }
  21%, 86% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: translateY(6px); }
}
@keyframes rise-verb {
  0%, 24% { opacity: 0; transform: translateY(8px); }
  34%, 86% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: translateY(6px); }
}
@keyframes rise-leaf {
  0%, 36% { opacity: 0; transform: translateY(8px); }
  46%, 86% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: translateY(6px); }
}
@keyframes hit-row {
  0%, 36% { background-color: transparent; color: #0E2A2D; }
  46%, 86% { background-color: #FA8335; color: #0E2A2D; }
  96%, 100% { background-color: transparent; color: #0E2A2D; }
}
@keyframes rise-result {
  0%, 52% { opacity: 0; transform: translateY(6px); }
  62%, 86% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: translateY(6px); }
}
@keyframes type-name {
  0%, 58% { width: 0; }
  74%, 96% { width: 8ch; }
  100% { width: 0; }
}

body.home .faq { margin-top: 2.4rem; scroll-margin-top: 1.2rem; }
body.home .faq details,
body.home .zh details {
  max-width: 40rem;
  border-bottom: 1px solid #12454A;
}
body.home .faq summary,
body.home .zh summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  max-width: 40rem;
  padding: 0.8rem 0;
  list-style: none;
  cursor: pointer;
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 560;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
body.home .faq summary::-webkit-details-marker,
body.home .zh summary::-webkit-details-marker { display: none; }
body.home .faq summary::marker,
body.home .zh summary::marker { content: ""; }
body.home .faq summary::after,
body.home .zh summary::after {
  content: "+";
  flex: none;
  color: #9DBDB2;
  font-family: var(--mono);
  font-size: 0.85rem;
  font-weight: 400;
}
body.home .faq details[open] summary::after,
body.home .zh details[open] summary::after { content: "–"; }
body.home .faq summary:hover,
body.home .zh summary:hover,
body.home .faq summary:hover::after,
body.home .zh summary:hover::after,
body.home .faq summary:focus-visible,
body.home .zh summary:focus-visible,
body.home .faq summary:focus-visible::after,
body.home .zh summary:focus-visible::after { color: var(--safe); }
body.home .faq summary:focus-visible,
body.home .zh summary:focus-visible {
  outline: 1px solid var(--safe);
  outline-offset: 3px;
}
body.home .faq details p,
body.home .zh details p {
  margin: 0 0 0.9rem;
  max-width: 40rem;
  color: #9DBDB2;
  font-size: 0.84rem;
}
body.home .zh {
  border-top-color: #12454A;
  background: transparent;
  color: var(--cream);
}

@media (max-width: 1100px) {
  body.home .menu { font-size: 0.56rem; }
  body.home .menu-verb { left: 4.15rem; }
  body.home .menu-leaf { left: 7.7rem; }
}
@media (max-width: 720px) {
  body.home .move,
  body.home .move:nth-child(even) {
    grid-template-columns: minmax(0, 1fr);
  }
  body.home .move:nth-child(even) .move-copy,
  body.home .move:nth-child(even) .stage { order: 0; }
  body.home .menu-verb { left: 3.6rem; }
  body.home .menu-leaf { left: 6.7rem; }
  body.home .scene-ai { height: 280px; }
}
@media (prefers-reduced-motion: reduce) {
  body.home .menu-root,
  body.home .menu-verb,
  body.home .menu-leaf,
  body.home .menu li.hit,
  body.home .result,
  body.home .born,
  body.home .typed { animation: none; }
}

.os {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
  margin: -0.2rem 0 0.6rem;
}
figure {
  margin: 0.8rem 0 1.6rem;
}
figure img {
  display: block;
  width: 100%;
  max-width: 28rem;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--rule);
}
figure.narrow img { max-width: 18rem; }
figcaption {
  color: var(--mute);
  font-size: 0.72rem;
  margin-top: 0.45rem;
  max-width: 28rem;
}

/* Language switch + Chinese pages */
.lang-switch { white-space: nowrap; }
.lang-switch a { color: var(--mute); }
body.home .lang-switch a { color: #9DBDB2; }
.lang-switch a[aria-current],
body.home .lang-switch a[aria-current] { color: var(--safe); }
.lang-switch a:hover { color: var(--link); }
html:lang(zh-Hans) {
  --display: "Fraunces", "PingFang SC", "Hiragino Sans GB", "Noto Serif SC", "Source Han Serif SC", serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", ui-monospace, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", monospace;
}
html:lang(zh-Hans) .top { letter-spacing: 0.04em; }

/* App icon in header and hero */
.mark { display: inline-flex; align-items: center; gap: 0.45rem; }
.mark-icon {
  width: 22px; height: 22px;
  border-radius: 22.5%;
  flex: none;
}
body.home .hero-icon {
  display: block;
  width: 120px; height: 120px;
  margin: 2.2rem 0 0;
  border-radius: 22.5%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 12px 32px rgba(0, 0, 0, 0.45);
}
body.home .hero-icon + h1 { margin-top: 24px; }
@media (max-width: 720px) {
  body.home .hero-icon { width: 96px; height: 96px; margin-top: 1.4rem; }
}

/* Nav: one row; under 360px collapse links into a ☰ menu (lang switch stays visible) */
.top { position: relative; }
.nav { display: flex; align-items: baseline; justify-content: flex-end; flex-wrap: wrap; column-gap: 0.55em; row-gap: 0.2rem; }
.nav-links { display: inline-flex; align-items: baseline; flex-wrap: wrap; column-gap: 0.55em; }
.nav .sep { opacity: 0.6; }
.nav-toggle {
  display: none;
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  color: inherit;
  background: none;
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 0.2rem 0.45rem;
  cursor: pointer;
}
body.home .nav-toggle { border-color: #12454A; }
.nav-toggle:focus-visible, .nav a:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
@media (max-width: 600px) {
  .top { font-size: 0.64rem; letter-spacing: 0.03em; gap: 0.6rem; align-items: center; }
  .wrap, body.home .wrap { width: calc(100% - 2rem); }
  .nav { flex-wrap: nowrap; white-space: nowrap; }
  .nav-links { flex-wrap: nowrap; }
  /* the in-page FAQ link is dropped from the one-row mobile header (same items as the other pages) */
  .nav-links .nav-faq { display: none; }
}
@media (max-width: 420px) {
  .top { font-size: 0.62rem; letter-spacing: 0; gap: 0.4rem; }
  .nav, .nav-links { column-gap: 0.4em; }
  .mark { gap: 0.35rem; }
}
@media (max-width: 360px) {
  .nav-ready .nav-toggle { display: inline-block; }
  .nav-ready .nav-links { display: none; }
  .nav-ready > .sep { display: none; }
  .nav-ready.open .nav-links {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    position: absolute;
    right: 0;
    top: calc(100% + 0.3rem);
    z-index: 20;
    padding: 0.8rem 1rem;
    border: 1px solid var(--rule);
    border-radius: 8px;
    background: var(--paper);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  }
  body.home .nav-ready.open .nav-links { background: #0B3A3F; border-color: rgba(117, 188, 154, 0.18); }
  .nav-ready.open .nav-links .sep { display: none; }
  .nav-ready.open .nav-links a.nav-faq { display: inline; }
}

/* Chinese: no uppercase on the feature list; keep CJK words together when wrapping */
html:lang(zh-Hans) body.home .acts {
  text-transform: none;
  letter-spacing: 0.02em;
  word-break: keep-all;
  line-break: strict;
}
@media (max-width: 600px) {
  body.home .acts { font-size: 0.74rem; letter-spacing: 0.04em; }
  html:lang(zh-Hans) body.home .acts { font-size: 0.8rem; letter-spacing: 0; }
}