/*
 * Atelier Zero — canonical landing-page stylesheet.
 *
 * This file is the SINGLE SOURCE OF TRUTH for the open-design-landing
 * skill's visual system. It is consumed by:
 *
 *   1. `scripts/compose.ts` — inlined into the standalone HTML output.
 *   2. `apps/landing-page/app/globals.css` — copied verbatim for the
 *      Astro static deployable counterpart.
 *   3. `example.html` — the pre-rendered known-good demo.
 *
 * If you change tokens, layout, motion, or component styles, edit them
 * here. The `@import` at top loads self-hosted fonts from `./fonts.css`
 * (Inter Tight, Inter, Playfair Display, JetBrains Mono, Noto Serif SC).
 *
 * Tokens, grid posture, and motion language are defined by
 * `design-systems/atelier-zero/DESIGN.md`. Do not invent new colors or
 * typefaces here; either extend the design system first.
 */
@import url('./fonts.css');

:root {
  color-scheme: light only;
  --paper: #efe7d2;
  --paper-warm: #ece4cf;
  --paper-dark: #ddd2b6;
  --ink: #15140f;
  --ink-soft: #2a2620;
  --ink-mute: #5a5448;
  --ink-faint: #8b8676;
  --coral: #3a7594;
  --coral-soft: #6f9db5;
  --mustard: #e9b94a;
  --olive: #6e7448;
  --bone: #f7f1de;
  --line: rgba(21, 20, 15, 0.16);
  --line-soft: rgba(21, 20, 15, 0.08);
  --line-faint: rgba(21, 20, 15, 0.05);
  --shadow: 0 30px 60px -30px rgba(21, 20, 15, 0.18);
  --serif: 'Playfair Display', 'Times New Roman', serif;
  --sans: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --body: 'Inter', -apple-system, system-ui, sans-serif;
  --mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--paper); color: var(--ink); max-width: 100%; overflow-x: hidden; }
html, body { background-color: #efe7d2; }
body {
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  position: relative;
}

/* paper texture overlay across the whole page */
body::before {
  content: '';
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  z-index: 1;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(106, 92, 56, 0.07) 0, transparent 28%),
    radial-gradient(circle at 88% 72%, rgba(106, 92, 56, 0.06) 0, transparent 32%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.18  0 0 0 0 0.16  0 0 0 0 0.12  0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: auto, auto, 240px 240px;
  mix-blend-mode: multiply;
  opacity: 0.92;
}

.shell { position: relative; z-index: 2; padding-top: var(--nav-offset, 76px); }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.container {
  max-width: 1360px;
  padding: 0 64px;
  margin: 0 auto;
  position: relative;
}
.container.wide { max-width: 1480px; }

/* fixed side rails — rotated brand text on the right edge */
.side-rail {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 36px;
  z-index: 3;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.side-rail.right { right: 0; border-left: 1px solid var(--line-faint); }
.side-rail.left { left: 0; border-right: 1px solid var(--line-faint); }
.side-rail .rail-text {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--ink-faint);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}
.side-rail.right .rail-text { transform: rotate(180deg); }
.side-rail.left .rail-text { writing-mode: vertical-rl; transform: none; }

/* top metadata strip */
.topbar {
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
  background: var(--paper);
  position: relative;
  z-index: 4;
}
.topbar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.topbar-inner b { color: var(--ink); font-weight: 600; }
.topbar-inner .coral { color: var(--coral); }
.topbar-inner > span { white-space: nowrap; }
.topbar-inner .mid { display: inline-flex; gap: 26px; }
.topbar-inner .mid > span { white-space: nowrap; }
.topbar-inner .right { display: inline-flex; gap: 18px; align-items: center; }
.topbar-inner .right > span,
.topbar-inner .right > a { white-space: nowrap; }
.topbar-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}
.topbar-link:hover { color: var(--coral); border-bottom-color: var(--coral); }
.topbar .pulse {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--coral);
  display: inline-block;
  margin-right: 6px;
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* nav — always fixed at top */
:root {
  --nav-height: 76px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --nav-offset: calc(var(--nav-height) + var(--safe-top));
}
.login-toast {
  position: fixed;
  z-index: 52;
  top: calc(var(--nav-offset) + 12px);
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.login-toast[hidden] { display: none; }
.nav {
  padding: 22px 0;
  position: fixed;
  top: var(--safe-top);
  left: 0;
  right: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  z-index: 50;
  background: var(--paper);
  background-color: #efe7d2;
  border-bottom: 1px solid var(--line-soft);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  font-size: 18px;
}
.brand-mark {
  width: 36px;
  height: 36px;
  display: inline-block;
  flex-shrink: 0;
  background: var(--ink);
  --brand-mask: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20viewBox%3D%220%200%20376%20376%22%20fill%3D%22none%22%20aria-hidden%3D%22true%22%3E%20%3Cpath%20fill%3D%22%2315140f%22%20d%3D%22M270.366%2042.8698C271.149%2042.4304%20272.08%2042.2336%20272.934%2042.5119C273.514%2042.7012%20274.031%2042.9997%20274.568%2043.4777C279.558%2047.9275%20274.14%2051.282%20272.587%2055.0448C271.375%2057.9845%20271.177%2063.7685%20270.99%2066.9908C270.238%2079.946%20271.003%2092.7948%20272.204%20105.673C272.511%20108.971%20275.857%20110.914%20278.965%20109.766C279.786%20109.463%20280.609%20109.185%20281.43%20108.952C284.067%20108.203%20287.068%20107.874%20289.905%20107.576C290.947%20107.466%20291.957%20107.049%20292.502%20106.154C296.279%2099.9393%20297.316%2080.3456%20298.413%2073.7745C299.256%2068.7238%20300.421%2059.98%20300.695%2054.4256C300.739%2053.5209%20300.506%2052.6303%20300.058%2051.8428C299.658%2051.1388%20299.279%2050.4584%20298.915%2049.7522C298.277%2048.5155%20298.254%2047.0261%20299.029%2045.8707C300.858%2043.1448%20303.789%2041.273%20306.725%2044.3665C307.77%2045.4573%20308.21%2046.9935%20307.902%2048.473C307.387%2050.8507%20305.025%2052.4888%20304.03%2054.6948C302.23%2058.6895%20302.06%2070.4445%20302.082%2075.1875C302.112%2082.2653%20302.962%20106.541%20305.91%20111.841C307.167%20114.104%20309.742%20115.868%20311.557%20117.689C318.207%20124.361%20322.182%20134.316%20322.122%20143.683C322.047%20154.825%20316.392%20164.276%20306.08%20168.842C302.015%20170.641%20297.05%20171.975%20293.85%20175.186C284.475%20184.589%20298.612%20217.692%20301.65%20228.925C303.612%20236.187%20304.883%20243.476%20304.888%20251.015C304.895%20264.295%20300.982%20276.272%20291.465%20285.77C281.002%20296.21%20265.645%20302.3%20251.07%20303.767C243.647%20304.515%20236.041%20304.22%20228.586%20304.22L197.875%20304.213L107.426%20304.22C96.774%20304.245%2086.1213%20304.207%2075.469%20304.112C69.4118%20304.092%2060.9532%20304.53%2054.8532%20303.588C54.601%20303.548%2054.3373%20303.244%2054.0892%20302.834C53.2646%20301.473%2053.525%20299.7%2054.6427%20298.567C60.1445%20292.99%2072.9416%20288.245%2078.9782%20284.557C86.1872%20280.152%2092.62%20279.25%20100.758%20278.165L118.031%20275.842L191.284%20266.095C199.283%20264.992%20213.331%20263.643%20220.603%20261.26C227.105%20259.163%20233.039%20255.6%20237.95%20250.847C253.032%20236.371%20250.68%20218.213%20250.002%20199.039C249.466%20183.832%20248.49%20168.314%20249.863%20153.118C250.675%20146.818%20252.762%20135.153%20256.34%20129.799C262.352%20120.801%20261.177%20121.985%20261.96%20111.271C262.342%20106.441%20262.832%20101.62%20263.427%2096.8118C265.005%2083.8828%20267.315%2071.0245%20268.907%2058.092C269.059%2056.8714%20269.2%2055.7855%20269.278%2054.6286C269.337%2053.7602%20269.117%2052.9005%20268.697%2052.1379C268.06%2050.9788%20267.439%2049.8224%20266.954%2048.5942C266.762%2048.1097%20266.754%2047.5725%20266.93%2047.082C267.741%2044.8702%20268.67%2043.8219%20270.366%2042.8698Z%22/%3E%20%3Cpath%20fill%3D%22%2315140f%22%20d%3D%22M156.226%2090.2032C157.468%2090.1497%20158.768%2090.5935%20159.912%2091.0505C172.216%2095.9672%20184.446%20101.143%20196.706%20106.161L215.783%20113.92C219.316%20115.345%20228.353%20118.494%20230.693%20120.907C231.769%20124.36%20232.453%20130.569%20232.968%20134.357L235.87%20155.604C237.919%20169.832%20239.89%20184.072%20241.783%20198.322C242.723%20205.171%20244.446%20214.488%20244.655%20221.35C244.818%20225.75%20244.06%20230.137%20242.43%20234.227C238.387%20243.86%20230.704%20251.505%20221.053%20255.503C217.485%20256.955%20213.772%20258.02%20209.978%20258.682C202.42%20260.08%20192.876%20261.113%20185.093%20262.195C171.087%20264.268%20157.068%20266.252%20143.038%20268.15C128.43%20270.305%20113.81%20272.377%2099.1795%20274.372C95.1385%20274.932%2076.1617%20278.105%2073.2952%20276.905C72.521%20274.642%2071.7975%20268.39%2071.4425%20265.793L69.0807%20249.171L65.1113%20219.997C63.0863%20206.002%2061.0955%20192.003%2059.296%20177.973C58.9815%20175.521%2058.616%20171.368%2058.8507%20168.98C59.8615%20168.686%2061.015%20168.415%2062.0572%20168.253C69.5987%20167.08%2077.2307%20166.175%2084.7965%20165.128L130.721%20158.615L172.734%20152.674C181.717%20151.276%20190.718%20149.994%20199.734%20148.827C202.918%20148.408%20213.89%20146.346%20216.043%20147.845C217.594%20150.434%20220.539%20173.369%20220.434%20176.801C218.302%20179.557%20204.612%20189.865%20200.861%20192.824L180.821%20208.714C176.12%20212.4%20171.44%20216.299%20166.255%20219.264C161.268%20222.109%20155.811%20224.034%20150.143%20224.947C134.036%20227.567%20116.44%20221.138%20101.866%20215.003C97.8968%20213.333%2092.1207%20211.372%2088.7562%20208.949C87.7852%20206.288%2086.0373%20199.396%2086.995%20196.772C87.231%20196.125%2087.629%20195.641%2088.2717%20195.374C91.2477%20194.138%20103.952%20200.482%20107.562%20201.881C119.319%20206.745%20132.324%20211.878%20145.283%20211.197C155.854%20210.642%20163.04%20204.51%20170.89%20198.331L187.937%20184.809C191.419%20182.062%20202.866%20173.529%20205.246%20170.706C205.212%20168.245%20204.594%20165.1%20204.096%20162.691C199.035%20162.951%20190.184%20164.56%20184.899%20165.336L152.606%20169.895L98.6448%20177.553C91.0538%20178.636%2081.5827%20179.63%2074.2075%20180.967C74.2282%20183.849%2074.9953%20188.749%2075.4133%20191.718L77.8112%20208.525C80.279%20226.179%2082.5418%20243.903%2085.174%20261.527C88.3945%20261.36%2092.7455%20260.663%2096.016%20260.22C102.706%20259.328%20109.388%20258.373%20116.06%20257.35L161.04%20250.955L195.251%20246.189C201.539%20245.252%20208.775%20244.555%20214.623%20242.485C223.7%20239.145%20231.132%20230.556%20230.193%20220.5C227.763%20194.48%20222.35%20168.892%20219.775%20142.89C219.459%20139.7%20218.834%20133.457%20217.879%20130.66C214.208%20128.2%20202.14%20123.775%20197.202%20121.771L158.762%20106.076C156.656%20107.072%20153.046%20110.21%20151.031%20111.813L139.183%20121.177L118.49%20137.469C115.778%20139.609%20109.986%20143.909%20107.752%20146.19C108.227%20149.344%20108.748%20152.555%20108.994%20155.719C109.142%20158.211%20107.756%20159.495%20105.391%20159.79C102.202%20160.187%2098.943%20160.546%2095.744%20160.443C94.504%20155.555%2093.3655%20145.941%2092.6615%20140.62C95.0682%20137.067%20103.675%20131.032%20107.324%20128.131C116%20121.207%20124.713%20114.329%20133.462%20107.497C137.278%20104.505%20141.073%20101.486%20144.848%2098.4413C148.197%2095.7535%20152.49%2092.0805%20156.226%2090.2032Z%22/%3E%20%3C/svg%3E');
  -webkit-mask: var(--brand-mask) center / contain no-repeat;
  mask: var(--brand-mask) center / contain no-repeat;
}
.brand-meta {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  line-height: 1.3;
  margin-left: 10px;
  border-left: 1px solid var(--line);
  padding-left: 14px;
}
.brand-meta b { display: block; color: var(--ink); font-weight: 600; }

.nav-links {
  display: flex;
  gap: 38px;
  list-style: none;
}
.nav-links a {
  color: var(--ink);
  text-decoration: none;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  transition: color 0.18s ease;
  position: relative;
  white-space: nowrap;
}
.nav-links a:hover { color: var(--coral); }
.nav-links a.nav-download {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.nav-links a.nav-download:hover {
  color: var(--coral);
  border-color: var(--coral);
  background: color-mix(in oklch, var(--coral) 8%, transparent);
}
.nav-links a .num {
  font-size: 9px;
  color: var(--ink-faint);
  position: absolute;
  top: -7px;
  right: -16px;
  letter-spacing: 0.04em;
}
.nav-side {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  flex-shrink: 0;
}
.nav-toggle-bar {
  display: block;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  transition: transform 160ms ease, opacity 160ms ease;
}
.nav-toggle[aria-expanded='true'] .nav-toggle-bar:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.nav-toggle[aria-expanded='true'] .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded='true'] .nav-toggle-bar:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}
.nav-backdrop,
.nav-drawer {
  display: none;
}
html.nav-open,
html.nav-open body {
  overflow: hidden;
}
.theme-switch,
.lang-switch {
  position: relative;
  flex-shrink: 0;
}
.theme-toggle,
.lang-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #efe7d2;
  color: #15140f;
  line-height: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 160ms ease, color 160ms ease;
}
.theme-toggle:hover,
.theme-toggle[aria-expanded='true'],
.lang-toggle:hover,
.lang-toggle[aria-expanded='true'] {
  border-color: var(--coral);
  color: var(--coral);
}
.theme-toggle svg,
.lang-toggle svg,
.theme-menu svg {
  display: block;
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.theme-toggle svg *,
.lang-toggle svg * {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.theme-toggle .icon-auto-fill,
.theme-menu .icon-auto-fill { fill: currentColor; stroke: none; }
.theme-toggle .theme-icon { display: none; }
html[data-theme='light'] .theme-toggle [data-theme-icon='light'],
html[data-theme='dark'] .theme-toggle [data-theme-icon='dark'] {
  display: block;
}
.nav-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  margin: 0;
  cursor: pointer;
  gap: 6px;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.nav-login svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nav-login:hover {
  background: var(--coral);
  border-color: var(--coral);
  color: #fff;
}
.lang-menu,
.theme-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 148px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(28, 27, 26, 0.12);
  z-index: 60;
}
.lang-menu[hidden],
.theme-menu[hidden] { display: none; }
.lang-menu li,
.theme-menu li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.lang-menu li:hover,
.theme-menu li:hover { background: color-mix(in oklch, var(--coral) 8%, var(--paper)); }
.lang-menu li[aria-selected='true'],
.theme-menu li[aria-selected='true'] {
  color: var(--coral);
  font-weight: 600;
}
/* ---------- typography primitives ---------- */
.label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--coral);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.label::before {
  content: '';
  width: 18px;
  height: 1px;
  background: var(--coral);
  display: inline-block;
}
.label .ix {
  color: var(--ink-faint);
  font-weight: 500;
  margin-left: 4px;
}
.display {
  font-family: var(--sans);
  font-weight: 800;
  letter-spacing: -0.028em;
  color: var(--ink);
  line-height: 1.0;
}
.display em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.018em;
}
.display .dot { color: var(--coral); }
.lead {
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 36ch;
}
.meta {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.coord {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}
.roman {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  color: var(--coral);
}

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary {
  background: var(--coral);
  color: #fff;
  box-shadow: 0 14px 26px -16px color-mix(in oklch, var(--coral) 90%, transparent);
}
.btn-primary:hover,
.btn-primary:active {
  background: color-mix(in oklch, var(--coral) 78%, var(--ink));
  transform: translateY(-1px);
}
.btn-ghost:active { background: rgba(21, 20, 15, 0.04); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: rgba(21, 20, 15, 0.2);
}
.btn-ghost:hover { background: rgba(21, 20, 15, 0.04); }
.btn .arrow {
  width: 16px; height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn .arrow svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.6; }

/* helper used inline in headlines */
.code-inline {
  font-family: var(--mono);
  font-size: 14px;
  background: var(--bone);
  padding: 1px 6px;
  border-radius: 4px;
}

/* ---------- HERO ---------- */
.hero {
  position: relative;
  padding: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.hero > .container { flex: 0 0 auto; width: 100%; }
.hero > .container.hero-grid { flex: 1 1 auto; }
.hero::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line-soft);
  z-index: 0;
  display: none;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: 36px;
  align-items: stretch;
  width: 100%;
  position: relative;
}
.hero-copy {
  padding: 28px 0 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
.hero-copy .label { margin-bottom: 14px; }
.hero-copy .lead { margin-bottom: 22px; max-width: 36ch; font-size: 18px; line-height: 1.7; }
.hero-copy .lead em { font-family: var(--serif); font-style: italic; font-size: 1.22em; font-weight: 500; color: var(--ink); }
.hero h1 {
  font-size: clamp(36px, 3.8vw, 56px);
  line-height: 1.08;
  margin-bottom: 16px;
  white-space: nowrap;
}
.hero-actions {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 0;
}
.hero-stats {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: nowrap;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  width: fit-content;
  max-width: 100%;
}
.hero-stats .stat { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
.hero-stats .stat .ring {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px dashed var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.hero-stats .stat .ring.solid { border-style: solid; }
.hero-stats .stat .ring.coral { border-color: var(--coral); color: var(--coral); }
.hero-stats .stat-label {
  font-family: var(--sans);
  font-size: 11px;
  line-height: 1.25;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.hero-stats .stat-label b { display: block; font-weight: 700; color: var(--ink); font-size: 12px; }

.hero-foot {
  margin-top: auto;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.hero-foot .meta { line-height: 1.4; }

.hero-art {
  position: relative;
  height: clamp(520px, calc(100vh - 280px), 640px);
  height: clamp(520px, calc(100dvh - 280px), 640px);
  max-height: 640px;
  margin-left: auto;
  margin-right: -12px;
  width: 100%;
  overflow: visible;
}
.hero-art img {
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: right center;
  display: block;
}

/* Hero Collage (Code Implementation replacing Image) */
.hero-collage {
  position: absolute;
  top: 20px;
  right: 20px;
  bottom: 20px;
  left: 20px;
  inset: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1000px;
}
.hc-photo {
  position: absolute;
  width: 150px;
  height: 180px;
  background: #fff;
  padding: 10px 10px 32px 10px;
  box-shadow: 0 16px 32px -10px rgba(21, 20, 15, 0.25);
  transform: rotate(-15deg) translate(-150px, -70px);
  z-index: 2;
  border: 1px solid var(--line-soft);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), z-index 0s;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.hc-photo:hover,
.hc-photo.is-lifted {
  transform: rotate(-8deg) translate(-150px, -80px) scale(1.06);
  z-index: 10;
}
.hc-photo-img {
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, #d4e4ea, #f9ede3);
  position: relative;
  overflow: hidden;
}
.hc-sun {
  position: absolute; top: 16px; right: 16px; width: 22px; height: 22px; background: #fff; border-radius: 50%; opacity: 0.8;
}
.hc-mountain {
  position: absolute; bottom: -15px; left: -25px; width: 140px; height: 70px; background: #b4c4b9; border-radius: 50%;
}
.hc-photo-caption {
  position: absolute; bottom: 10px; left: 0; width: 100%; text-align: center; font-family: var(--serif); font-size: 10px; color: var(--ink-mute);
}
.hc-postcard {
  position: absolute;
  width: 80%;
  max-width: 340px;
  width: min(340px, 80%);
  height: 230px;
  background: var(--paper-warm);
  border-radius: 8px;
  box-shadow: var(--shadow);
  border: 1px solid var(--line-soft);
  transform: rotate(-5deg) translate(-40px, 100px);
  padding: 20px;
  display: flex;
  flex-direction: column;
  z-index: 3;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  overflow: hidden;
}
.hc-postcard::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 10px;
  background: repeating-linear-gradient(
    180deg,
    #c04538 0 7px,
    #2b5797 7px 14px,
    var(--paper-warm) 14px 18px
  );
}
.hc-postcard:hover,
.hc-postcard.is-lifted {
  transform: rotate(-2deg) translate(-40px, 90px) scale(1.02);
  z-index: 10;
}
.hc-pc-divider {
  position: absolute;
  left: 50%;
  top: 15%;
  bottom: 15%;
  width: 1px;
  background: var(--line);
}
.hc-airmail {
  position: absolute;
  top: 16px;
  left: 16px;
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 800;
  color: #2b5797;
  border: 1px solid #2b5797;
  padding: 2px 6px;
  border-radius: 2px;
  letter-spacing: 0.05em;
}
.hc-letter {
  position: absolute;
  width: 68%;
  max-width: 280px;
  width: min(280px, 68%);
  aspect-ratio: 3 / 4;
  height: auto;
  background-color: var(--bone);
  background-image: repeating-linear-gradient(transparent, transparent 25px, var(--line-faint) 25px, var(--line-faint) 26px);
  background-attachment: local;
  background-position: 0 42px;
  border-radius: 0;
  box-shadow: 0 20px 40px -20px rgba(21, 20, 15, 0.2);
  border: 1px solid var(--line-soft);
  transform: rotate(3deg) translate(72px, -36px);
  padding: 20px 22px;
  overflow: hidden;
  z-index: 1;
  font-family: var(--serif);
  color: var(--ink);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.hc-letter:hover,
.hc-letter.is-lifted {
  transform: rotate(1deg) translate(72px, -46px) scale(1.02);
  z-index: 10;
}
.hc-stamp {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 52px;
  background: var(--bone);
  border: 2px dashed var(--line);
  padding: 4px;
}
.hc-stamp-inner {
  width: 100%;
  height: 100%;
  background: var(--coral);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
.hc-stamp-inner::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 50%;
  background: var(--olive);
  clip-path: polygon(0 40%, 30% 10%, 60% 30%, 100% 0, 100% 100%, 0 100%);
}
.hc-postmark {
  position: absolute;
  top: 8px;
  right: 36px;
  width: 64px;
  height: 64px;
  border: 1.5px solid color-mix(in srgb, var(--ink) 25%, transparent);
  border-radius: 50%;
  transform: rotate(-12deg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 8px;
  color: color-mix(in srgb, var(--ink) 35%, transparent);
  text-align: center;
  line-height: 1.2;
  letter-spacing: 0.1em;
}
.hc-postmark::after {
  content: 'SLOWCHAT\A 2026';
  white-space: pre-wrap;
}
.hc-lines {
  margin-top: auto;
  width: 45%;
  align-self: flex-end;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 10px;
  margin-right: 10px;
}
.hc-line {
  height: 1px;
  background: var(--line);
  width: 100%;
}
.hc-barcode {
  height: 14px;
  width: 80%;
  margin-top: 6px;
  background-image: repeating-linear-gradient(to right,
    var(--ink-mute) 0, var(--ink-mute) 2px,
    transparent 2px, transparent 4px,
    var(--ink-mute) 4px, var(--ink-mute) 5px,
    transparent 5px, transparent 7px,
    var(--ink-mute) 7px, var(--ink-mute) 10px,
    transparent 10px, transparent 12px
  );
  opacity: 0.3;
}
.hc-text {
  position: absolute;
  left: 24px;
  bottom: 24px;
  font-family: var(--serif);
  font-size: 13px;
  color: var(--ink-soft);
  max-width: 45%;
  line-height: 1.6;
}
.hc-text b {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  margin-bottom: 6px;
  color: var(--coral);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.hc-letter-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}
.hc-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--paper-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: italic;
  font-size: 14px;
  border: 1px solid var(--line);
}
.hc-letter-head b {
  display: block;
  font-family: var(--sans);
  font-size: 13px;
  margin-bottom: 2px;
}
.hc-letter-head span {
  font-family: var(--sans);
  font-size: 9px;
  color: var(--ink-faint);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.hc-letter-date {
  margin-left: auto;
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 8px;
  color: var(--ink-faint);
  white-space: nowrap;
}
.hc-letter p {
  font-size: 12.5px;
  line-height: 26px;
  color: var(--ink-soft);
}
.hc-signature {
  margin-top: 20px;
  text-align: right;
  font-family: var(--serif);
  font-style: italic;
  font-size: 12px;
  color: var(--ink-soft);
}
/* image annotations */
.annot {
  position: absolute;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  line-height: 1.4;
  white-space: nowrap;
}
.annot.has-line::before {
  content: '';
  position: absolute;
  background: var(--ink-faint);
}
.annot-tl { top: 14px; left: 14px; }
.annot-tr { top: 14px; right: 14px; text-align: right; }
.annot-bl { bottom: 14px; left: 14px; }
.annot-br { bottom: 14px; right: 14px; text-align: right; }
.annot-br .accent { color: var(--coral); }
.annot.coord { font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; text-transform: none; }

.hero-art .index {
  position: absolute;
  right: 12px;
  top: 36%;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--ink-faint);
  text-transform: uppercase;
  background: rgba(239, 231, 210, 0.7);
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  backdrop-filter: blur(2px);
}
.hero-art .index span { display: block; line-height: 1.6; }
.hero-art .index span .n { color: var(--coral); margin-right: 6px; font-weight: 700; }
.hero-art .index span.on { color: var(--ink); font-weight: 700; }
.hero-art .index span.on .n { color: var(--coral); }

.hero-art .corner {
  position: absolute;
  width: 22px; height: 22px;
  border-color: var(--ink-faint);
  border-style: solid;
  border-width: 0;
}
.hero-art .corner.tl { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.hero-art .corner.tr { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.hero-art .corner.bl { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.hero-art .corner.br { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }

/* ---------- common section header ---------- */
section { position: relative; padding: 130px 0; }
section.tight { padding-top: 0; }
.sec-rule {
  border-top: 1px solid var(--line);
  padding-top: 18px;
  margin-bottom: 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.sec-rule .roman {
  font-family: var(--serif);
  font-style: italic;
  color: var(--coral);
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: none;
}
.sec-rule .meta-grp { display: inline-flex; gap: 26px; }
.sec-rule .dot-mark { color: var(--coral); }

.section-header { margin-bottom: 70px; }
.section-header .label { margin-bottom: 32px; }
.section-header h2 {
  font-size: clamp(40px, 4.6vw, 66px);
  max-width: 22ch;
}
.section-header .lead { margin-top: 22px; }

/* ---------- WIRE / GLOBAL TICKER ----------
 *
 * Slim editorial strip between the hero and the About section. Two
 * counter-scrolling marquees (cities → and contributors ←) signal that
 * the project is global and community-driven, without disrupting the
 * existing roman-numeral section count. Pure CSS animation; the track
 * content is duplicated in markup so the loop wraps seamlessly.
 */
.wire {
  border-bottom: 1px solid var(--line);
  padding: 26px 0 28px;
  background: var(--paper);
  position: relative;
  overflow: hidden;
}
.wire-inner {
  display: grid;
  grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}
.wire-left {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  border-right: 1px solid var(--line);
  padding-right: 24px;
  min-height: 56px;
}
.wire-mark {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wire-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--coral);
  display: inline-block;
  animation: pulse 2.4s ease-in-out infinite;
}
.wire-title {
  font-family: var(--sans);
  font-size: 11px;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.wire-title b {
  color: var(--ink);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.wire-title span {
  color: var(--ink-faint);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.wire-rows {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.wire-row {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
}
.marquee-track {
  display: inline-flex;
  align-items: center;
  gap: 36px;
  width: max-content;
  white-space: nowrap;
  animation: marquee-x 52s linear infinite;
  will-change: transform;
}
.wire-row.reverse .marquee-track {
  animation-direction: reverse;
  animation-duration: 64s;
}
.wire-row:hover .marquee-track {
  animation-play-state: paused;
}
@keyframes marquee-x {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.wire-item {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  text-decoration: none;
  flex-shrink: 0;
}
.wire-item .wire-dot {
  color: var(--coral);
  font-size: 16px;
  line-height: 0;
  position: relative;
  top: -1px;
  margin-right: 2px;
}
.wire-item .wire-coord {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-faint);
  letter-spacing: 0;
}
.wire-item .wire-name {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink);
  font-weight: 500;
}
.wire-item .wire-handle {
  font-family: var(--mono);
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 500;
}
.wire-item .wire-role {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--coral);
  font-size: 10px;
}
.wire-item.is-link {
  transition: color 160ms ease;
}
.wire-item.is-link:hover .wire-handle {
  color: var(--coral);
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* ---------- ABOUT ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 80px;
  align-items: center;
}
.about h2 {
  font-size: clamp(32px, 3.8vw, 56px);
  margin: 22px 0 14px;
}
.about .label { margin-bottom: 28px; }
.about .lead { margin-bottom: 36px; max-width: 42ch; font-size: 17px; }
.about .footer-row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 56px;
  color: var(--ink-faint);
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.about .footer-row .mark {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ink);
}
.about .stamp {
  margin-left: auto;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.4;
}
.about .stamp span:first-child { color: var(--coral); }
.about .stamp span:last-child { color: var(--ink); }
.about-art {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: none;
  margin-left: auto;
  overflow: visible;
}
.about-illu {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.about-illu-disc {
  fill: var(--bone);
  filter: drop-shadow(0 18px 28px color-mix(in oklch, var(--ink) 10%, transparent));
  transform-box: view-box;
  transform-origin: 200px 208px;
  transition:
    filter 420ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.about-illu-land { fill: color-mix(in oklch, var(--mustard) 58%, var(--olive)); }
.about-illu-route {
  fill: none;
  stroke: var(--coral);
  stroke-width: 2;
  stroke-dasharray: 4 6;
  stroke-linecap: round;
}
.about-illu-phone-shell {
  fill: var(--paper);
  stroke-linejoin: round;
}
.about-illu-send .about-illu-phone-shell { stroke: var(--coral); stroke-width: 2; }
.about-illu-recv .about-illu-phone-shell { stroke: var(--olive); stroke-width: 2; }
.about-illu-phone-island { fill: var(--ink); opacity: 0.45; }
.about-illu-phone-label {
  fill: var(--ink);
  font-family: var(--sans);
  font-size: 5.8px;
  font-weight: 600;
  letter-spacing: 0.16em;
}
.about-illu-icon { fill: var(--ink); }
.about-illu-mail { fill: none; stroke: var(--ink); stroke-width: 1.45; stroke-linejoin: round; }
.about-illu-sand { fill: var(--mustard); }
.about-illu-hourglass-disc {
  fill: color-mix(in oklch, var(--mustard) 28%, var(--paper));
  stroke: var(--coral);
  stroke-width: 1.8;
}
.about-illu-frame {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.about-illu-frame-cap { fill: var(--ink); }
.about-illu-pin-send { fill: var(--olive); }
.about-illu-pin-recv { fill: var(--coral); }
.about-illu-pin-hole { fill: var(--bone); }
.about-art[data-revealed='true'] .about-illu-land {
  animation: about-earth-drift 36s ease-in-out infinite;
}
.about-art[data-revealed='true'] .about-illu-route {
  animation: about-route-flow 10s linear infinite;
}
.about-illu-send .about-illu-phone-bob,
.about-illu-recv .about-illu-phone-bob,
.about-illu-send .about-illu-phone-hover,
.about-illu-recv .about-illu-phone-hover {
  transform-box: fill-box;
  transform-origin: 16px 50px;
}
.about-illu-phone-hover {
  transition: transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
}
.about-illu-pin-motion {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.about-illu-packet {
  fill: var(--coral);
  opacity: 0;
  pointer-events: none;
  offset-path: path('M94 163 Q200 250 306 163');
  offset-distance: 0%;
  offset-rotate: 0deg;
}
.about-art[data-revealed='true'] .about-illu-send .about-illu-phone-bob {
  animation: about-phone-bob 5.2s ease-in-out infinite;
}
.about-art[data-revealed='true'] .about-illu-recv .about-illu-phone-bob {
  animation: about-phone-bob 5.8s ease-in-out infinite reverse;
  animation-delay: -1.6s;
}
.about-art[data-revealed='true'] .about-illu-send .about-illu-icon {
  transform-box: fill-box;
  transform-origin: center;
  animation: about-send-nudge 3.8s ease-in-out infinite;
}
.about-art[data-revealed='true'] .about-illu-recv circle.about-illu-icon:nth-of-type(1) {
  animation: about-recv-dot 1.8s ease-in-out infinite;
}
.about-art[data-revealed='true'] .about-illu-recv circle.about-illu-icon:nth-of-type(2) {
  animation: about-recv-dot 1.8s ease-in-out 0.22s infinite;
}
.about-art[data-revealed='true'] .about-illu-recv circle.about-illu-icon:nth-of-type(3) {
  animation: about-recv-dot 1.8s ease-in-out 0.44s infinite;
}
@keyframes about-earth-drift {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-22px); }
}
@keyframes about-route-flow {
  to { stroke-dashoffset: -20; }
}
@keyframes about-phone-bob {
  0%, 100% { transform: translateY(0) rotate(-2.2deg); }
  50% { transform: translateY(-5px) rotate(2.2deg); }
}
@keyframes about-send-nudge {
  0%, 68%, 100% { transform: translate(0, 0); opacity: 1; }
  78% { transform: translate(2px, -2.4px); opacity: 0.55; }
  86% { transform: translate(-0.4px, 0.4px); opacity: 1; }
}
@keyframes about-recv-dot {
  0%, 100% { opacity: 0.28; }
  50% { opacity: 1; }
}
.about-art:hover .about-illu-disc,
.about-art.is-lifted .about-illu-disc {
  transform: scale(1.035);
  filter: drop-shadow(0 26px 36px color-mix(in oklch, var(--ink) 16%, transparent));
}
.about-art:hover .about-illu-route,
.about-art.is-lifted .about-illu-route {
  animation-duration: 3.2s;
  stroke-width: 2.5;
}
.about-art:hover .about-illu-send .about-illu-phone-hover,
.about-art.is-lifted .about-illu-send .about-illu-phone-hover {
  transform: translate(-5px, -11px) rotate(-9deg);
}
.about-art:hover .about-illu-recv .about-illu-phone-hover,
.about-art.is-lifted .about-illu-recv .about-illu-phone-hover {
  transform: translate(5px, -11px) rotate(9deg);
}
.about-art:hover .about-illu-send .about-illu-icon,
.about-art.is-lifted .about-illu-send .about-illu-icon {
  animation-duration: 1.6s;
}
.about-art:hover .about-illu-recv circle.about-illu-icon,
.about-art.is-lifted .about-illu-recv circle.about-illu-icon {
  animation-duration: 0.9s;
}
.about-art:hover .about-illu-pin-send .about-illu-pin-motion,
.about-art.is-lifted .about-illu-pin-send .about-illu-pin-motion {
  animation: about-pin-bounce 720ms ease-in-out infinite;
}
.about-art:hover .about-illu-pin-recv .about-illu-pin-motion,
.about-art.is-lifted .about-illu-pin-recv .about-illu-pin-motion {
  animation: about-pin-bounce 720ms ease-in-out 140ms infinite;
}
.about-art:hover .about-illu-packet,
.about-art.is-lifted .about-illu-packet {
  animation: about-packet-fly 1.7s cubic-bezier(0.42, 0, 0.2, 1) infinite;
}
@keyframes about-pin-bounce {
  0%, 100% { transform: translateY(0); }
  38% { transform: translateY(-5px); }
  62% { transform: translateY(-1px); }
}
@keyframes about-packet-fly {
  0% { offset-distance: 0%; opacity: 0; }
  10% { opacity: 1; }
  82% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .about-illu-land,
  .about-illu-route,
  .about-illu-phone-bob,
  .about-illu-send .about-illu-icon,
  .about-illu-recv .about-illu-icon,
  .about-illu-pin-motion,
  .about-illu-packet {
    animation: none;
  }
  .about-illu-disc,
  .about-illu-phone-hover {
    transition: none;
    transform: none;
  }
}
.about-side-note {
  position: absolute;
  right: -8px;
  top: 26px;
  text-align: right;
  font-family: var(--sans);
  font-size: 10.5px;
  line-height: 1.55;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
  max-width: 16ch;
}
.about-side-note b {
  display: block;
  color: var(--coral);
  width: 36px;
  height: 1px;
  background: var(--coral);
  margin: 0 0 10px auto;
}
.about-caption {
  position: absolute;
  right: 18px;
  bottom: 4px;
  font-family: var(--sans);
  font-size: 9.5px;
  color: var(--ink-faint);
  text-align: right;
  letter-spacing: 0.06em;
  line-height: 1.45;
}
.about-caption b { color: var(--ink); display: block; }

/* ---------- CAPABILITIES ---------- */
.capabilities-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
}
.capabilities-art {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 600px;
}
.capabilities-art img { width: 100%; height: 100%; object-fit: contain; }
.capabilities-art .ribbon {
  position: absolute;
  right: -42px;
  top: 50%;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--ink-faint);
  writing-mode: vertical-rl;
}
.capabilities-art .ribbon b { color: var(--coral); }
.capabilities-art .corner { position: absolute; width: 22px; height: 22px; border-color: var(--ink-faint); border-style: solid; border-width: 0; }
.capabilities-art .corner.tl { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.capabilities-art .corner.br { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }
.capabilities-copy h2 { font-size: clamp(32px, 3.6vw, 54px); margin: 22px 0 12px; }
.cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 22px;
}
.card {
  padding: 28px 26px 32px;
  background: var(--bone);
  border-radius: 18px;
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(21, 20, 15, 0.06);
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease;
}
.card:hover,
.card.is-lifted { transform: translateY(-3px); }
.card .num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  font-weight: 500;
  color: var(--coral);
  letter-spacing: 0.04em;
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.card .num .tag {
  font-family: var(--sans);
  font-size: 9.5px;
  color: var(--ink-faint);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-style: normal;
  font-weight: 500;
}
.card .icon {
  width: 28px;
  height: 28px;
  margin-bottom: 16px;
  color: var(--ink);
}
.card h3 {
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.014em;
  margin-bottom: 14px;
}
.card p {
  font-family: var(--body);
  font-size: 13.5px;
  color: var(--ink-mute);
  line-height: 1.55;
  max-width: 24ch;
}
.card .arrow-mark {
  position: absolute;
  right: 22px;
  bottom: 22px;
  width: 28px; height: 28px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  transition: all 0.18s ease;
}
.card:hover .arrow-mark { background: var(--coral); border-color: var(--coral); color: #fff; }
.card .arrow-mark svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 1.6; }

/* ---------- LABS ---------- */
.about { padding-bottom: 0; }
.method { padding-top: 0; padding-bottom: 0; }
.testimonial { padding-top: 40px; padding-bottom: 0; }
.labs-head {
  margin-bottom: 48px;
}
.labs-head h2 { font-size: clamp(32px, 3.6vw, 54px); margin-top: 30px; }
.labs-meta {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 22px;
  margin-bottom: 30px;
}
.labs-meta .ring {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px dashed var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
}
.labs-meta .meta-text {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.55;
  color: var(--ink-faint);
  max-width: 28ch;
}
.labs-meta .meta-text b { display: block; color: var(--ink); }
.labs-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 22px;
}
.lab {
  display: flex;
  flex-direction: column;
}
.app-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; margin-top: 48px; }
.app-item { text-align: center; }
.app-item h4 { margin: 4px 0 8px; font-size: 17px; font-family: var(--serif); }
.app-item > p { color: var(--ink); opacity: 0.68; font-size: 13.5px; line-height: 1.8; margin: 0 auto; max-width: 30ch; }

.app-grid .phone {
  --phone-tilt: 0deg;
  transform-origin: 50% 90%;
  transition:
    transform 720ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 720ms cubic-bezier(0.22, 1, 0.36, 1);
}
.app-grid .app-item:nth-child(1) .phone { --phone-tilt: -4.5deg; }
.app-grid .app-item:nth-child(2) .phone { --phone-tilt: 1.2deg; }
.app-grid .app-item:nth-child(3) .phone { --phone-tilt: 4.8deg; }
.app-grid .app-item:hover .phone,
.app-grid .app-item.is-lifted .phone {
  transform: translateY(-18px) rotate(var(--phone-tilt));
  box-shadow: 0 38px 58px -26px rgba(21, 20, 15, 0.46);
  animation: phone-awake 1080ms cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 2;
}

@keyframes phone-awake {
  0% { transform: translateY(0) rotate(0deg); }
  42% { transform: translateY(-24px) rotate(var(--phone-tilt)); }
  68% { transform: translateY(-12px) rotate(calc(var(--phone-tilt) * 0.4)); }
  100% { transform: translateY(-18px) rotate(var(--phone-tilt)); }
}

@media (prefers-reduced-motion: reduce) {
  .app-grid .phone,
  .app-grid .app-item:hover .phone,
  .app-grid .app-item.is-lifted .phone {
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ---------- App mock phones：布局参考 App，配色跟网站 ---------- */
.phone {
  --sc-bg: var(--bone);
  --sc-card: var(--paper);
  --sc-text: var(--ink);
  --sc-text2: var(--ink-mute);
  --sc-hint: var(--ink-faint);
  --sc-divider: var(--line);
  --sc-primary: var(--coral);
  --sc-on-primary: #fff8f5;
  --sc-parchment: var(--paper-warm);
  --sc-icon-bg: var(--paper-dark);
  --sc-envelope: color-mix(in oklch, var(--mustard) 62%, var(--paper-dark));
  --sc-env-ink: color-mix(in oklch, var(--ink) 72%, transparent);
  --sc-env-mute: color-mix(in oklch, var(--ink) 48%, transparent);
  --sc-transit-track: color-mix(in oklch, var(--ink) 12%, transparent);
  --sc-transit-fill: var(--coral);
  --sc-transit-dot: var(--ink);
  --sc-serif: 'Noto Serif SC', var(--serif);
  --sc-mono: var(--mono);
  position: relative;
  width: 100%;
  max-width: 268px;
  width: min(268px, 100%);
  margin: 0 auto 22px;
  aspect-ratio: 9 / 19.4;
  background: var(--ink);
  border-radius: 38px;
  padding: 8px;
  box-shadow: 0 26px 48px -30px rgba(21, 20, 15, 0.5);
}
.phone::before {
  content: '';
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  width: 68px;
  height: 6px;
  border-radius: 99px;
  background: var(--bone);
  opacity: 0.28;
  z-index: 4;
  pointer-events: none;
}
.sc-screen {
  height: 100%;
  background: var(--sc-bg);
  border-radius: 30px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-align: left;
  color: var(--sc-text);
  position: relative;
}
.sc-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 14px 0;
  font-family: var(--sc-mono);
  font-size: 8px;
  letter-spacing: 0.08em;
  color: var(--sc-text2);
  flex-shrink: 0;
}
.sc-ico {
  width: 1em;
  height: 1em;
  display: block;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sc-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--paper-dark);
  color: var(--ink);
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 12px;
  font-weight: 500;
  flex-shrink: 0;
  overflow: hidden;
}
.sc-avatar.lg { width: 30px; height: 30px; font-size: 13px; }
.sc-stamp {
  width: 42px;
  height: 50px;
  flex-shrink: 0;
  border-radius: 3px;
  padding: 3px;
  background: var(--bone);
  box-shadow: inset 0 0 0 1px var(--line);
  position: relative;
}
.sc-stamp-art {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 1px;
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(circle at 72% 22%, var(--mustard) 0 3.2px, transparent 3.4px),
    linear-gradient(
      180deg,
      color-mix(in oklch, var(--olive) 26%, var(--bone)) 0%,
      color-mix(in oklch, var(--olive) 40%, var(--paper-dark)) 100%
    );
}
.sc-stamp-art::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 62%;
  background: var(--olive);
  clip-path: polygon(0 48%, 22% 16%, 38% 42%, 56% 6%, 78% 38%, 100% 20%, 100% 100%, 0 100%);
}
.sc-stamp-slot {
  width: 42px;
  height: 50px;
  border-radius: 3px;
  border: 1px dashed color-mix(in srgb, var(--sc-primary) 40%, transparent);
  background: var(--sc-card);
  color: color-mix(in srgb, var(--sc-primary) 85%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sc-stamp-slot .sc-ico { width: 16px; height: 16px; }

/* 01 写信 — WriteLetterScreen */
.sc-write-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px 2px 6px;
  flex-shrink: 0;
}
.sc-head-btn {
  width: 22px;
  height: 22px;
  border: 0;
  background: transparent;
  color: var(--sc-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
}
.sc-write-to {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sc-write-to span {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--sc-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sc-paper {
  flex: 1;
  margin: 6px 8px 10px;
  padding: 10px 10px 8px;
  background: var(--sc-card);
  border-radius: 4px;
  box-shadow: 0 8px 18px -14px rgba(21, 20, 15, 0.35);
  border: 1px solid var(--line-soft);
  font-family: var(--sc-serif);
  font-size: 10.5px;
  line-height: 1.75;
  color: var(--sc-text);
  overflow: hidden;
}
.sc-write-bar {
  flex-shrink: 0;
  background: var(--sc-card);
  border-top: 0.5px solid color-mix(in srgb, var(--sc-divider) 50%, transparent);
  padding: 6px 10px 10px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.sc-bar-btn {
  width: 26px;
  height: 26px;
  color: var(--sc-text2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sc-bar-btn .sc-ico { width: 15px; height: 15px; }
.sc-send {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--sc-primary);
  color: var(--sc-on-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--sc-primary) 45%, transparent);
}
.sc-send .sc-ico { width: 14px; height: 14px; }

/* 02 等待 — ConversationScreen + in-transit envelope */
.sc-conv-head {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 4px 6px 6px;
  border-bottom: 0.5px solid var(--sc-divider);
  flex-shrink: 0;
}
.sc-conv-who {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
}
.sc-conv-who b {
  display: block;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--sc-text);
  letter-spacing: 0.02em;
}
.sc-conv-who small {
  display: block;
  font-size: 8px;
  color: var(--sc-text2);
  margin-top: 1px;
}
.sc-loc-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px 6px;
  color: var(--sc-text2);
  font-size: 8.5px;
  flex-shrink: 0;
}
.sc-loc-bar span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.sc-loc-bar .sc-ico { width: 9px; height: 9px; }
.sc-env-wrap { padding: 0 10px 10px; display: flex; flex-direction: column; gap: 10px; }
.sc-envelope {
  background: var(--sc-envelope);
  border-radius: 10px;
  padding: 11px 11px 10px;
  min-height: 124px;
  box-shadow: 0 10px 20px -16px rgba(21, 20, 15, 0.35);
  border: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.sc-envelope.is-opened { opacity: 0.92; }
.sc-env-stamp-read {
  position: absolute;
  right: 10px;
  bottom: 10px;
  font-family: var(--sc-serif);
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--coral);
  border: 1px solid color-mix(in oklch, var(--coral) 45%, transparent);
  border-radius: 3px;
  padding: 2px 5px;
  transform: rotate(-12deg);
}
.sc-env-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.sc-dir {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  border-radius: 4px;
  background: color-mix(in oklch, var(--ink) 6%, transparent);
  font-family: var(--sc-mono);
  font-size: 8.5px;
  letter-spacing: 0.04em;
  color: var(--sc-env-ink);
}
.sc-dir b { font-weight: 700; }
.sc-dir .sc-ico { width: 9px; height: 9px; }
.sc-eta {
  margin-top: 6px;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--sc-env-mute);
}
.sc-transit {
  position: relative;
  width: 118px;
  height: 8px;
  margin-top: 5px;
}
.sc-transit i,
.sc-transit b {
  position: absolute;
  left: 0;
  top: 2px;
  height: 4px;
  border-radius: 99px;
}
.sc-transit i { width: 100%; background: var(--sc-transit-track); }
.sc-transit b { width: 38%; background: var(--sc-transit-fill); }
.sc-transit em {
  position: absolute;
  left: calc(38% - 4px);
  top: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sc-transit-dot);
  box-shadow: 0 0 4px color-mix(in oklch, var(--ink) 35%, transparent);
  font-style: normal;
}
.sc-env-foot {
  margin-top: auto;
  padding-top: 10px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--sc-serif);
  font-size: 9px;
  color: var(--sc-env-ink);
}
.sc-env-foot .sc-ico { width: 9px; height: 9px; flex-shrink: 0; opacity: 0.6; }
.sc-env-foot .sep { color: var(--sc-env-mute); }

/* 03 收信 — LetterDetailScreen */
.sc-read { background: var(--sc-parchment); }
.sc-glass-nav {
  display: flex;
  justify-content: space-between;
  padding: 4px 12px 8px;
  flex-shrink: 0;
}
.sc-nav-orb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--sc-text) 5%, transparent);
  color: var(--sc-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sc-nav-orb .sc-ico { width: 12px; height: 12px; }
.sc-letter-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 14px 0;
}
.sc-letter-who {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}
.sc-letter-who b {
  display: block;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--sc-text);
}
.sc-meta-row {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 3px;
  font-size: 8px;
  color: var(--sc-text2);
}
.sc-meta-row .sc-ico { width: 8px; height: 8px; }
.sc-letter-rule {
  height: 0.5px;
  background: color-mix(in srgb, var(--sc-divider) 50%, transparent);
  margin: 8px 14px 8px;
}
.sc-letter-body {
  flex: 1;
  padding: 0 14px;
  overflow: hidden;
  font-family: var(--sc-serif);
  font-size: 10.5px;
  line-height: 1.7;
  color: var(--sc-text);
}
.sc-letter-date {
  font-family: var(--sans);
  font-size: 8px;
  color: var(--sc-text2);
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}
.sc-reply-bar {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  padding: 8px 16px 12px;
}
.sc-reply-pill {
  width: 172px;
  height: 38px;
  border-radius: 19px;
  background: var(--sc-card);
  border: 1px solid var(--line-soft);
  color: var(--sc-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px;
  box-shadow: 0 8px 18px -10px rgba(21, 20, 15, 0.25);
}
.sc-reply-pill .sc-ico { width: 13px; height: 13px; color: var(--sc-text2); }
.sc-reply-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--sc-text);
  color: var(--sc-bg);
  border-radius: 14px;
  padding: 5px 12px;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.sc-reply-cta .sc-ico { width: 11px; height: 11px; color: var(--sc-bg); }

@media (max-width: 900px) { .app-grid { grid-template-columns: 1fr; gap: 60px; } }
.lab-img {
  aspect-ratio: 4 / 5;
  background: var(--bone);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 18px;
  box-shadow: var(--shadow);
  position: relative;
}
.lab-img img { width: 100%; height: 100%; object-fit: cover; }
.lab-img .badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(239, 231, 210, 0.9);
  color: var(--ink);
  padding: 4px 9px;
  border-radius: 4px;
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.lab .num-row {
  font-family: var(--sans);
  font-size: 10.5px;
  color: var(--ink-faint);
  letter-spacing: 0.14em;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  text-transform: uppercase;
}
.lab h4 {
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.014em;
  margin-bottom: 8px;
}
.lab p {
  font-family: var(--body);
  font-size: 13px;
  color: var(--ink-mute);
  line-height: 1.55;
  margin-bottom: 14px;
}
.lab .arrow-mark {
  width: 28px; height: 28px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  margin-top: auto;
  align-self: flex-start;
}
.lab .arrow-mark svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.labs-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 50px;
  border-top: 1px dashed var(--line);
  padding-top: 22px;
}
.progress {
  display: flex;
  align-items: center;
  gap: 8px;
}
.progress span {
  width: 26px; height: 2px;
  background: var(--line);
  border-radius: 2px;
}
.progress span.on { background: var(--coral); }

/* ---------- METHOD ---------- */
.method-head {
  margin-bottom: 60px;
}
.method-head h2 { font-size: clamp(32px, 3.6vw, 54px); }
.method-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 50px;
  position: relative;
}
.method-grid::before { display: none; }
.method-step {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.method-step .num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 78px;
  color: var(--coral);
  line-height: 0.85;
  margin-bottom: 24px;
  letter-spacing: -0.02em;
  background: var(--paper);
  display: inline-block;
  padding-right: 12px;
  position: relative;
  z-index: 1;
}
.method-step h4 {
  font-family: var(--sans);
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 800;
  letter-spacing: -0.022em;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.method-step h4 .arrow-r {
  color: var(--ink-faint);
  font-size: 22px;
  line-height: 1;
}
.method-step:last-child h4 .arrow-r { display: none; }
.method-step > p {
  font-family: var(--body);
  font-size: 13.5px;
  color: var(--ink-mute);
  line-height: 1.55;
  margin-bottom: 24px;
  max-width: 24ch;
}
.method-step .img {
  aspect-ratio: 1 / 1;
  background: var(--bone);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.method-step .img img { width: 100%; height: 100%; object-fit: cover; }

/* PC 明信片流程：四步共用同一机模尺寸；文字可长短不同，机模顶边用 margin-top:auto 对齐 */
.method-grid {
  align-items: stretch;
}
.method-step .pc-phone {
  --pc-green: #2F524A;
  --pc-on-green: #f4efe4;
  --pc-w: 240px;
  --pc-tilt: 0deg;
  width: var(--pc-w);
  max-width: 100%;
  aspect-ratio: 9 / 19.4;
  height: auto;
  margin: auto auto 0;
  overflow: hidden;
  box-sizing: border-box;
  background: #1c1b1a;
  border-radius: 32px;
  padding: 8px;
  box-shadow: 0 22px 40px -26px rgba(21, 20, 15, 0.5);
  flex-shrink: 0;
  cursor: pointer;
  transform-origin: 50% 90%;
  transition:
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 520ms cubic-bezier(0.22, 1, 0.36, 1);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.method-grid .method-step:nth-child(1) .pc-phone { --pc-tilt: -3deg; }
.method-grid .method-step:nth-child(2) .pc-phone { --pc-tilt: -1deg; }
.method-grid .method-step:nth-child(3) .pc-phone { --pc-tilt: 1.2deg; }
.method-grid .method-step:nth-child(4) .pc-phone { --pc-tilt: 3deg; }
.method-step:hover .pc-phone,
.method-step.is-lifted .pc-phone {
  transform: translateY(-14px) rotate(var(--pc-tilt));
  box-shadow: 0 34px 52px -22px rgba(21, 20, 15, 0.48);
  z-index: 2;
}
@media (prefers-reduced-motion: reduce) {
  .method-step .pc-phone,
  .method-step:hover .pc-phone,
  .method-step.is-lifted .pc-phone {
    transform: none !important;
    transition: none !important;
  }
}
.pc-screen {
  height: 100%;
  min-height: 0;
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--bone);
  color: var(--ink);
}
.pc-status {
  display: flex;
  justify-content: space-between;
  padding: 7px 12px 0;
  font-family: var(--mono);
  font-size: 7.5px;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  flex-shrink: 0;
}
.pc-status.on-green,
.pc-draw .pc-status {
  background: var(--pc-green);
  color: color-mix(in oklch, var(--pc-on-green) 72%, transparent);
}
.pc-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px 8px;
  flex-shrink: 0;
}
.pc-bar b {
  font-family: var(--serif);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
}
.pc-bar-ico {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pc-bar-ico svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pc-bar-green { background: var(--pc-green); color: var(--pc-on-green); }
.pc-bar-plain { background: transparent; color: var(--ink); }
.pc-draw {
  background: var(--bone);
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
}
.pc-draw-slots {
  padding: 8px 12px 0;
  text-align: center;
}
.pc-draw-kicker {
  display: block;
  font-size: 7px;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
  margin-bottom: 5px;
}
.pc-draw-track {
  width: 62%;
  height: 3px;
  margin: 0 auto 6px;
  border-radius: 99px;
  background: var(--line);
  position: relative;
  overflow: hidden;
}
.pc-draw-track i {
  display: block;
  width: 40%;
  height: 100%;
  background-color: #c9a04a;
  background-image: linear-gradient(#c9a04a, #c9a04a);
  border-radius: 99px;
}
.pc-draw-count {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1;
}
.pc-draw-count em {
  font-style: normal;
  font-weight: 300;
  opacity: 0.4;
  margin: 0 1px;
  font-size: 13px;
}
.pc-draw-hint {
  margin: 4px auto 0;
  font-size: 7px;
  line-height: 1.4;
  color: var(--ink-mute);
  max-width: 20ch;
}
.pc-draw-hint b { color: var(--ink); font-weight: 600; }
.pc-draw-stage {
  display: grid;
  place-items: center;
  min-height: 0;
  overflow: hidden;
}
.pc-globe {
  --earth: 118px;
  --inner: calc(var(--earth) + 40px);
  --outer: calc(var(--earth) + 70px);
  --orbit-gold: #c9a04a;
  position: relative;
  width: calc(var(--earth) + 86px);
  height: calc(var(--earth) + 86px);
}
.pc-orbit,
.pc-earth {
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
}
.pc-orbit-outer {
  width: var(--outer);
  height: var(--outer);
  color: color-mix(in oklch, var(--orbit-gold) 62%, transparent);
  animation: pc-orbit-ccw 34s linear infinite;
}
.pc-orbit-inner {
  width: var(--inner);
  height: var(--inner);
  color: color-mix(in oklch, var(--orbit-gold) 78%, transparent);
  animation: pc-orbit-cw 22s linear infinite;
}
.pc-orbit-ring {
  width: 100%;
  height: 100%;
  display: block;
}
.pc-orbit-ring circle {
  stroke: currentColor;
  stroke-width: 0.85;
}
.pc-orbit-ring.is-dashed circle {
  stroke-width: 0.95;
  stroke-dasharray: 1.4 1.9;
}
.pc-orbit-star {
  position: absolute;
  fill: var(--orbit-gold);
  overflow: visible;
}
.pc-orbit-outer .pc-orbit-meteor {
  position: absolute;
  left: -8px;
  top: 50%;
  width: 11px;
  translate: 0 -50%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pc-orbit-outer .pc-orbit-star {
  position: static;
  width: 11px;
  height: 11px;
  opacity: 0.95;
}
.pc-orbit-tail {
  display: block;
  width: 1.2px;
  height: 16px;
  border-radius: 99px;
  background: linear-gradient(180deg, transparent, color-mix(in oklch, var(--orbit-gold) 85%, transparent));
}
.pc-orbit-inner .pc-orbit-star.is-top {
  top: -5px;
  left: 50%;
  width: 8px;
  height: 8px;
  translate: -50% 0;
  opacity: 0.95;
}
.pc-orbit-inner .pc-orbit-star.is-bottom {
  bottom: -3px;
  left: 50%;
  width: 6px;
  height: 6px;
  translate: -50% 0;
  opacity: 0.75;
}
.pc-orbit-spark {
  position: absolute;
  border-radius: 50%;
  background: var(--orbit-gold);
}
.pc-orbit-spark.is-left {
  left: -1px;
  top: 50%;
  width: 3px;
  height: 3px;
  translate: 0 -50%;
  opacity: 0.55;
}
.pc-orbit-spark.is-right {
  right: 16%;
  top: 20%;
  width: 2px;
  height: 2px;
  opacity: 0.3;
}
.pc-earth {
  width: calc(var(--earth) + 64px);
  height: calc(var(--earth) + 64px);
}
.pc-earth-glow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    transparent 0 58%,
    color-mix(in oklch, #7EB8C4 32%, transparent) 63%,
    color-mix(in oklch, #7EB8C4 7%, transparent) 78%,
    transparent 100%
  );
  pointer-events: none;
}
.pc-earth-ball {
  position: absolute;
  inset: 50% auto auto 50%;
  width: var(--earth);
  height: var(--earth);
  translate: -50% -50%;
  border-radius: 50%;
  overflow: hidden;
}
.pc-earth-map {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  animation: pc-earth-spin 48s linear infinite;
}
.pc-earth-shade {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.5));
  pointer-events: none;
}
@keyframes pc-earth-spin {
  to { transform: rotate(360deg); }
}
@keyframes pc-orbit-cw {
  to { transform: rotate(360deg); }
}
@keyframes pc-orbit-ccw {
  to { transform: rotate(-360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .pc-earth-map,
  .pc-orbit-outer,
  .pc-orbit-inner { animation: none; }
}
.pc-draw-actions {
  flex-shrink: 0;
  padding: 2px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.pc-draw-btn,
.pc-draw-pick {
  width: 100%;
  background: var(--pc-green);
  color: var(--pc-on-green);
  text-align: center;
}
.pc-draw-btn {
  border-radius: 11px;
  padding: 5px 6px 4px;
  box-shadow: 0 8px 12px -10px rgba(47, 82, 74, 0.8);
}
.pc-draw-btn b { display: block; font-size: 9px; font-weight: 500; letter-spacing: 0.03em; }
.pc-draw-btn small { display: block; font-size: 6.5px; opacity: 0.62; margin-top: 1px; }
.pc-draw-pick {
  border-radius: 11px;
  padding: 5px;
  font-size: 9px;
  font-weight: 500;
}
.pc-prepare { background: var(--pc-green); }
.pc-prepare-sheet {
  flex: 1;
  min-height: 0;
  background: var(--paper-warm);
  border-radius: 18px 18px 0 0;
  display: flex;
  flex-direction: column;
}
.pc-prepare-scroll {
  flex: 1;
  min-height: 0;
  padding: 8px 8px 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: auto;
}
.pc-id-card,
.pc-card,
.pc-addr,
.pc-note {
  background: var(--paper);
  border-radius: 10px;
  padding: 8px 9px;
  box-shadow: 0 8px 16px -14px rgba(21, 20, 15, 0.4);
  flex-shrink: 0;
}
.pc-prepare .pc-card {
  border-radius: 14px;
  padding-left: 14px;
  padding-right: 14px;
}
.pc-id-card { text-align: center; padding: 8px 8px 7px; }
.pc-id-card span {
  display: block;
  font-family: var(--serif);
  font-size: 7.5px;
  color: var(--ink-mute);
}
.pc-id-card strong {
  display: block;
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: 0.08em;
  margin-top: 4px;
}
.pc-penpal { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; }
.pc-prepare .pc-avatar {
  width: 22px; height: 22px; font-size: 11px;
}
.pc-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--paper-dark);
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  flex-shrink: 0;
}
.pc-avatar.sm { width: 22px; height: 22px; font-size: 10px; }
.pc-penpal b { display: block; font-size: 10px; }
.pc-penpal small { font-size: 8px; color: var(--ink-mute); }
.pc-addr { padding: 7px 9px; }
.pc-addr-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 8.5px;
  color: var(--ink-mute);
  margin-bottom: 4px;
}
.pc-copy { color: var(--pc-green); font-weight: 600; flex-shrink: 0; }
.pc-addr p {
  font-family: var(--serif);
  font-size: 10px;
  line-height: 1.4;
  color: var(--ink-soft);
  margin: 0;
  overflow-wrap: break-word;
}
.pc-uploads { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.pc-upload {
  aspect-ratio: 16 / 9;
  border: 1px dashed color-mix(in oklch, var(--ink) 18%, transparent);
  border-radius: 7px;
  background: var(--paper-warm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 7.5px;
  color: var(--ink-faint);
}
.pc-upload svg {
  width: 13px;
  height: 13px;
  stroke: var(--ink-faint);
  fill: none;
  stroke-width: 1.6;
}
.pc-prepare-bar {
  flex-shrink: 0;
  display: flex;
  gap: 6px;
  padding: 6px 8px 9px;
  border-top: 1px solid var(--line-soft);
}
.pc-prepare-ok, .pc-prepare-chat {
  border-radius: 10px;
  padding: 6px 5px;
  text-align: center;
  font-size: 9px;
  font-weight: 500;
}
.pc-prepare-ok { flex: 2; background: var(--pc-green); color: var(--pc-on-green); }
.pc-prepare-chat {
  flex: 1;
  border: 1px solid color-mix(in oklch, var(--pc-green) 40%, transparent);
  color: var(--pc-green);
}
/* 第三步：壳内无 App 顶栏，明信片投入邮筒铺满屏幕 */
.pc-mail {
  background: var(--bone);
}
.pc-mail-scene {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}
.pc-mail-scene > svg {
  width: 88%;
  height: 88%;
  display: block;
  grid-area: 1 / 1;
  z-index: 1;
}
.pc-mail-scene .hc-postcard {
  position: absolute;
  left: 50%;
  top: 32%;
  width: 340px;
  height: 230px;
  max-width: none;
  z-index: 2;
  transform: translate(-50%, -68%) rotate(-16deg) scale(0.22);
  transform-origin: center center;
  pointer-events: none;
  box-shadow: 0 12px 22px -12px rgba(21, 20, 15, 0.45);
}
.pc-mail-scene .hc-postcard:hover,
.pc-mail-scene .hc-postcard.is-lifted {
  transform: translate(-50%, -68%) rotate(-16deg) scale(0.22);
}
.pc-mail-route {
  fill: none;
  stroke: var(--coral);
  stroke-width: 2.2;
  stroke-dasharray: 5 6;
  stroke-linecap: round;
}
.pc-mail-dot { fill: var(--coral); }
.pc-mail-avion rect {
  fill: none;
  stroke: var(--coral);
  stroke-width: 1.6;
}
.pc-mail-avion text {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  fill: var(--coral);
}
.pc-mail-ground { fill: color-mix(in oklch, var(--olive) 38%, var(--paper)); }
.pc-mail-body,
.pc-mail-cap,
.pc-mail-base { fill: var(--pc-green); }
.pc-mail-ridge { fill: color-mix(in oklch, #17312c 42%, var(--pc-green)); }
.pc-mail-slot { fill: #17312c; }
.pc-mail-slot-lip { fill: color-mix(in oklch, #17312c 28%, var(--pc-green)); }
.pc-mail-window { fill: color-mix(in oklch, #17312c 22%, var(--pc-green)); }
.pc-mail-window-inner { fill: color-mix(in oklch, var(--mustard) 22%, #1f3d36); }
.pc-mail-badge { fill: var(--mustard); }
.pc-mail-badge-ico {
  fill: none;
  stroke: #2a2620;
  stroke-width: 1.7;
  stroke-linejoin: round;
}
.pc-reg { background: var(--bone); }
.pc-reg-body {
  flex: 1;
  padding: 4px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}
.pc-journey { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.pc-journey-who { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.pc-journey-who small { font-size: 8px; color: var(--ink-soft); }
.pc-journey-mid {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 2px;
}
.pc-journey-mid em { font-size: 9px; font-style: italic; color: var(--ink-mute); }
.pc-journey-mid i {
  display: block;
  width: 100%;
  height: 0;
  border-top: 1px dashed var(--line);
  margin: 3px 0;
}
.pc-journey-mid .pc-ico { width: 12px; height: 12px; stroke: var(--ink-mute); fill: none; stroke-width: 1.6; }
.pc-journey-mid span { font-size: 7.5px; color: var(--ink-faint); }
.pc-reg-dist { text-align: center; font-size: 8px; color: var(--ink-mute); }
.pc-polaroid {
  background: var(--paper);
  padding: 7px 7px 8px;
  border-radius: 3px;
  box-shadow: 0 8px 16px -12px rgba(21, 20, 15, 0.4);
  transform: rotate(-1deg);
}
.pc-polaroid-img {
  aspect-ratio: 3 / 2;
  background: linear-gradient(180deg, #d5e3e4, #e8d7c4);
  position: relative;
  overflow: hidden;
}
.pc-polaroid-img .pc-sun {
  position: absolute; top: 8px; right: 10px;
  width: 12px; height: 12px; border-radius: 50%; background: #fff8e8;
}
.pc-polaroid-img .pc-hill {
  position: absolute; left: -10px; right: -10px; bottom: -8px;
  height: 28px; background: #6e7448; border-radius: 50%;
}
.pc-cam {
  position: absolute; right: 6px; bottom: 6px;
  background: rgba(0,0,0,0.55); color: #fff;
  border-radius: 99px; padding: 2px 6px; font-size: 7px;
}
.pc-polaroid strong {
  display: block;
  text-align: center;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  margin-top: 6px;
}
.pc-note b { display: block; font-size: 10px; margin-bottom: 4px; }
.pc-note span { font-size: 9px; color: var(--ink-faint); }
.pc-reg-btn {
  margin-top: auto;
  background: var(--pc-green, #2F524A);
  color: #fff;
  border-radius: 10px;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
}
.pc-reg-btn .pc-ico { width: 12px; height: 12px; stroke: #fff; fill: none; stroke-width: 1.7; }
.method-foot {
  margin-top: 36px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px dashed var(--line);
  padding-top: 24px;
}
.method-foot .left,
.method-foot .right {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.method-foot .left {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.method-foot .left .ring {
  width: 20px; height: 20px;
  border: 1px dashed var(--ink-faint);
  border-radius: 50%;
}
.method-foot .right b { color: var(--ink); }

/* ---------- WORK ---------- */
.work {
  background: #15140f;
  color: var(--paper);
  border-radius: 32px;
  margin: 0 64px;
  overflow: hidden;
  position: relative;
  padding: 110px 64px;
}
.work::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n2'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 0.95  0 0 0 0 0.85  0 0 0 0.05 0'/></filter><rect width='100%' height='100%' filter='url(%23n2)'/></svg>");
  background-size: 240px 240px;
  opacity: 0.6;
  mix-blend-mode: screen;
}
.work-rule {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(247, 241, 222, 0.16);
  padding-top: 16px;
  margin-bottom: 60px;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(247, 241, 222, 0.55);
}
.work-rule .roman { color: var(--coral); font-family: var(--serif); font-style: italic; font-size: 14px; letter-spacing: 0.04em; text-transform: none; }
.work-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr 0.85fr;
  gap: 48px;
  align-items: center;
  position: relative;
}
.work .label { color: var(--coral); }
.work .label::before { background: var(--coral); }
.work-copy h2 {
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(32px, 3.6vw, 54px);
  line-height: 1.0;
  letter-spacing: -0.024em;
  margin: 28px 0 36px;
  color: var(--paper);
}
.work-copy h2 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
}
.work-copy h2 .dot { color: var(--coral); }
.work-link {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  color: var(--paper);
  font-family: var(--sans);
  font-size: 14px;
  text-decoration: none;
  border-bottom: 2px solid var(--coral);
  padding-bottom: 12px;
  width: fit-content;
}
.work-link::after { content: '↗'; color: var(--coral); }
.work-card {
  background: var(--paper);
  color: var(--ink);
  border-radius: 18px;
  padding: 32px 30px;
  position: relative;
  transform: rotate(-1.2deg);
  text-decoration: none;
  display: block;
  transition: transform 280ms ease, box-shadow 280ms ease;
}
.work-card:hover,
.work-card.is-lifted {
  transform: rotate(-1.2deg) translateY(-4px);
  box-shadow: var(--shadow);
}
.work-card.alt {
  transform: rotate(2.4deg) translateY(20px);
  padding: 28px 26px;
}
.work-card.alt:hover,
.work-card.alt.is-lifted {
  transform: rotate(2.4deg) translateY(16px);
  box-shadow: var(--shadow);
}
.work-card .label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
}
.work-card .small-label {
  font-family: var(--sans);
  font-size: 10.5px;
  color: var(--coral);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
}
.work-card .index {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}
.work-card h3 {
  font-family: var(--sans);
  font-size: clamp(26px, 2.4vw, 38px);
  font-weight: 800;
  letter-spacing: -0.022em;
  line-height: 1.05;
  margin-bottom: 14px;
}
.work-card p {
  font-family: var(--body);
  font-size: 14px;
  color: var(--ink-mute);
  line-height: 1.55;
  margin-bottom: 22px;
  max-width: 28ch;
}
.work-card .img {
  aspect-ratio: 4 / 3;
  background: var(--bone);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 22px;
}
.work-card .img img { width: 100%; height: 100%; object-fit: cover; }
.work-card .meta-row {
  display: flex;
  justify-content: space-between;
  color: var(--ink-faint);
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
.work-card .year { color: var(--coral); font-weight: 600; }
.work-arrows {
  position: absolute;
  right: 64px;
  bottom: 64px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.work-arrows .nav-btn {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(247, 241, 222, 0.2);
  background: transparent;
  color: var(--paper);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.work-arrows .nav-btn.active { background: var(--coral); border-color: var(--coral); }

/* ---------- TESTIMONIAL / COLLABORATORS ---------- */
.testimonial-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 80px;
  align-items: center;
}
.testimonial-copy h2 {
  font-family: var(--sans);
  font-size: clamp(24px, 2.8vw, 38px);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.15;
  margin-top: 30px;
  margin-bottom: 36px;
}
.testimonial-copy h2 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
}
.author {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 22px;
}
.author .avatar {
  width: 50px; height: 50px;
  border-radius: 50%;
  background: var(--ink);
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--paper);
  font-family: var(--serif);
  font-style: italic;
  font-size: 24px;
}
.author p {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  font-weight: 600;
}
.author p span {
  display: block;
  color: var(--ink-mute);
  font-weight: 400;
}
.divider {
  border-top: 1px solid var(--line);
  margin: 60px 0 32px;
}
.partners-text {
  font-family: var(--body);
  font-size: 14px;
  color: var(--ink-mute);
  margin-bottom: 26px;
  max-width: 38ch;
}
.partners {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 22px;
  align-items: end;
}
.partner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 220ms ease;
}
.partner:hover,
.partner.is-lifted { transform: translateY(-2px); }
.partner:hover .glyph { color: var(--coral); }
.partner:hover span { color: var(--coral); }
.partner .glyph {
  height: 28px;
  display: flex;
  align-items: center;
  color: var(--ink);
  transition: color 220ms ease;
}
.partner .glyph svg {
  height: 28px;
  width: 28px;
  max-width: 28px;
}
.partner span {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink);
  letter-spacing: -0.005em;
  font-weight: 600;
  transition: color 220ms ease;
}
.partner small {
  font-family: var(--sans);
  font-size: 10px;
  color: var(--ink-faint);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.read-more {
  margin-top: 56px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--coral);
  padding-bottom: 6px;
}
.read-more::after { content: '→'; color: var(--coral); }
.testimonial-art {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 560px;
  margin-left: auto;
}
.testimonial-art .corner {
  position: absolute;
  width: 22px;
  height: 22px;
  border-color: var(--ink-faint);
  border-style: solid;
  border-width: 0;
  z-index: 2;
}
.testimonial-art .corner.tl { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.testimonial-art .corner.tr { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.testimonial-art .corner.bl { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.testimonial-art .corner.br { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }
.testimonial-art .annot { z-index: 3; }
.testimonial-art .annot .accent { color: var(--coral); }
.tm-voices {
  position: absolute;
  top: 34px;
  right: 20px;
  bottom: 30px;
  left: 20px;
  inset: 34px 20px 30px;
}
.tm-voice-card {
  position: absolute;
  width: 78%;
  min-height: 148px;
  padding: 22px 24px 20px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background-color: var(--bone);
  background-image: repeating-linear-gradient(transparent, transparent 31px, var(--line-faint) 31px, var(--line-faint) 32px);
  box-shadow: 0 20px 38px -22px rgba(21, 20, 15, 0.38);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), z-index 0s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.tm-voice-card-one {
  left: 1%;
  top: 2%;
  transform: rotate(-4deg);
  z-index: 1;
}
.tm-voice-card-two {
  right: 0;
  top: 34%;
  transform: rotate(3deg);
  z-index: 2;
}
.tm-voice-card-three {
  left: 8%;
  bottom: 0;
  width: 84%;
  padding-left: 30px;
  background-color: var(--paper-warm);
  background-image: none;
  transform: rotate(-1.5deg);
  z-index: 3;
}
.tm-voice-card-three::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 10px;
  background: repeating-linear-gradient(
    180deg,
    #c04538 0 7px,
    #2b5797 7px 14px,
    var(--paper-warm) 14px 18px
  );
}
.tm-voice-card-one:hover,
.tm-voice-card-one.is-lifted {
  transform: rotate(-1deg) translateY(-7px) scale(1.025);
  z-index: 10;
}
.tm-voice-card-two:hover,
.tm-voice-card-two.is-lifted {
  transform: rotate(1deg) translateY(-7px) scale(1.025);
  z-index: 10;
}
.tm-voice-card-three:hover,
.tm-voice-card-three.is-lifted {
  transform: rotate(0deg) translateY(-7px) scale(1.025);
  z-index: 10;
}
.tm-voice-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
}
.tm-voice-index {
  color: var(--coral);
  font-weight: 700;
}
.tm-voice-card p {
  margin: 17px 0 14px;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
}
.tm-voice-tag {
  margin-top: auto;
  align-self: flex-end;
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--coral);
}

/* ---------- CTA ---------- */
.cta { padding-bottom: calc(36px + var(--safe-bottom, 0px)); }
.cta-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 80px;
  align-items: center;
}
.cta-copy { min-width: 0; }
.cta h2 {
  font-size: clamp(32px, 3.8vw, 56px);
  margin: 22px 0 14px;
}
.cta .lead { margin-bottom: 36px; max-width: 40ch; font-size: 16px; }
.cta-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 12px;
  margin-bottom: 0;
  max-width: none;
}
.store-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: auto;
  flex: 0 1 auto;
  min-width: 0;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.store-btn:hover,
.store-btn:active {
  border-color: color-mix(in oklch, var(--ink) 22%, var(--line));
  box-shadow: 0 10px 24px -18px rgba(28, 27, 26, 0.55);
  transform: translateY(-1px);
}
.store-btn .store-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.store-btn .store-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}
.store-btn .store-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}
.store-btn .store-kicker {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  line-height: 1.2;
}
.store-btn .store-label {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
}
.store-btn-ios {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.store-btn-ios:hover {
  background: color-mix(in oklch, var(--ink) 88%, var(--coral));
  border-color: transparent;
  box-shadow: 0 12px 28px -16px rgba(28, 27, 26, 0.7);
}
.store-btn-ios .store-kicker { color: color-mix(in oklch, var(--paper) 55%, transparent); }
.store-btn-ios .store-label { color: var(--paper); }
.store-btn-ios .store-icon svg { fill: var(--paper); }
.store-btn-play .store-icon svg { display: block; }
.store-btn-apk .store-icon svg { fill: var(--ink); }
.store-btn-apk { display: none; }

html[data-platform='ios'] .store-btn-play,
html[data-platform='ios'] .store-btn-apk { display: none; }

html[data-platform='android'] .store-btn-ios { display: none; }
html[data-platform='android'] .store-btn-apk,
html[data-platform='desktop'] .store-btn-apk { display: inline-flex; }

html[data-platform='ios'] .cta-qr,
html[data-platform='android'] .cta-qr { display: none; }
html[data-platform='ios'] .cta-grid,
html[data-platform='android'] .cta-grid { grid-template-columns: 1fr; }

html[data-platform='ios'] .cta-copy,
html[data-platform='android'] .cta-copy {
  opacity: 1;
  translate: none;
  will-change: auto;
}
html[data-platform='ios'] .shell,
html[data-platform='android'] .shell {
  padding-bottom: calc(76px + var(--safe-bottom));
}
html[data-platform='ios'] .cta-actions,
html[data-platform='android'] .cta-actions {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  flex-direction: row;
  margin: 0;
  padding: 10px 16px calc(10px + var(--safe-bottom));
  background: color-mix(in oklch, var(--paper) 94%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  box-sizing: border-box;
}
html[data-platform='ios'] .cta-actions .store-btn,
html[data-platform='android'] .cta-actions .store-btn {
  flex: 1 1 0;
  width: auto;
  justify-content: center;
}
html[data-platform='ios'] .inapp-overlay,
html[data-platform='android'] .inapp-overlay {
  bottom: calc(76px + var(--safe-bottom));
}

.cta-qr {
  --stamp: #f6efe0;
  --stamp-ink: var(--ink);
  width: 228px;
  justify-self: center;
  padding: 0;
  border: none;
  background: transparent;
  text-align: center;
  transform: rotate(-2deg);
  filter: drop-shadow(0 14px 16px color-mix(in oklch, var(--ink) 16%, transparent));
}
.cta-qr-stamp {
  background: var(--stamp);
  padding: 12px 11px 10px;
  --stamp-mask: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20viewBox%3D%220%200%20228%20296%22%20preserveAspectRatio%3D%22none%22%3E%20%3Cpath%20fill%3D%22%23ffffff%22%20fill-rule%3D%22evenodd%22%20d%3D%22M0%200H228V296H0ZM-7.40%20-2.90a7.40%207.40%200%201%200%2014.80%200a7.40%207.40%200%201%200%20-14.80%200M-7.40%20298.90a7.40%207.40%200%201%200%2014.80%200a7.40%207.40%200%201%200%20-14.80%200M8.10%20-2.90a7.40%207.40%200%201%200%2014.80%200a7.40%207.40%200%201%200%20-14.80%200M8.10%20298.90a7.40%207.40%200%201%200%2014.80%200a7.40%207.40%200%201%200%20-14.80%200M23.60%20-2.90a7.40%207.40%200%201%200%2014.80%200a7.40%207.40%200%201%200%20-14.80%200M23.60%20298.90a7.40%207.40%200%201%200%2014.80%200a7.40%207.40%200%201%200%20-14.80%200M39.10%20-2.90a7.40%207.40%200%201%200%2014.80%200a7.40%207.40%200%201%200%20-14.80%200M39.10%20298.90a7.40%207.40%200%201%200%2014.80%200a7.40%207.40%200%201%200%20-14.80%200M54.60%20-2.90a7.40%207.40%200%201%200%2014.80%200a7.40%207.40%200%201%200%20-14.80%200M54.60%20298.90a7.40%207.40%200%201%200%2014.80%200a7.40%207.40%200%201%200%20-14.80%200M70.10%20-2.90a7.40%207.40%200%201%200%2014.80%200a7.40%207.40%200%201%200%20-14.80%200M70.10%20298.90a7.40%207.40%200%201%200%2014.80%200a7.40%207.40%200%201%200%20-14.80%200M85.60%20-2.90a7.40%207.40%200%201%200%2014.80%200a7.40%207.40%200%201%200%20-14.80%200M85.60%20298.90a7.40%207.40%200%201%200%2014.80%200a7.40%207.40%200%201%200%20-14.80%200M101.10%20-2.90a7.40%207.40%200%201%200%2014.80%200a7.40%207.40%200%201%200%20-14.80%200M101.10%20298.90a7.40%207.40%200%201%200%2014.80%200a7.40%207.40%200%201%200%20-14.80%200M116.60%20-2.90a7.40%207.40%200%201%200%2014.80%200a7.40%207.40%200%201%200%20-14.80%200M116.60%20298.90a7.40%207.40%200%201%200%2014.80%200a7.40%207.40%200%201%200%20-14.80%200M132.10%20-2.90a7.40%207.40%200%201%200%2014.80%200a7.40%207.40%200%201%200%20-14.80%200M132.10%20298.90a7.40%207.40%200%201%200%2014.80%200a7.40%207.40%200%201%200%20-14.80%200M147.60%20-2.90a7.40%207.40%200%201%200%2014.80%200a7.40%207.40%200%201%200%20-14.80%200M147.60%20298.90a7.40%207.40%200%201%200%2014.80%200a7.40%207.40%200%201%200%20-14.80%200M163.10%20-2.90a7.40%207.40%200%201%200%2014.80%200a7.40%207.40%200%201%200%20-14.80%200M163.10%20298.90a7.40%207.40%200%201%200%2014.80%200a7.40%207.40%200%201%200%20-14.80%200M178.60%20-2.90a7.40%207.40%200%201%200%2014.80%200a7.40%207.40%200%201%200%20-14.80%200M178.60%20298.90a7.40%207.40%200%201%200%2014.80%200a7.40%207.40%200%201%200%20-14.80%200M194.10%20-2.90a7.40%207.40%200%201%200%2014.80%200a7.40%207.40%200%201%200%20-14.80%200M194.10%20298.90a7.40%207.40%200%201%200%2014.80%200a7.40%207.40%200%201%200%20-14.80%200M209.60%20-2.90a7.40%207.40%200%201%200%2014.80%200a7.40%207.40%200%201%200%20-14.80%200M209.60%20298.90a7.40%207.40%200%201%200%2014.80%200a7.40%207.40%200%201%200%20-14.80%200M220.60%20-2.90a7.40%207.40%200%201%200%2014.80%200a7.40%207.40%200%201%200%20-14.80%200M220.60%20298.90a7.40%207.40%200%201%200%2014.80%200a7.40%207.40%200%201%200%20-14.80%200M-10.30%2015.50a7.40%207.40%200%201%200%2014.80%200a7.40%207.40%200%201%200%20-14.80%200M223.50%2015.50a7.40%207.40%200%201%200%2014.80%200a7.40%207.40%200%201%200%20-14.80%200M-10.30%2031.00a7.40%207.40%200%201%200%2014.80%200a7.40%207.40%200%201%200%20-14.80%200M223.50%2031.00a7.40%207.40%200%201%200%2014.80%200a7.40%207.40%200%201%200%20-14.80%200M-10.30%2046.50a7.40%207.40%200%201%200%2014.80%200a7.40%207.40%200%201%200%20-14.80%200M223.50%2046.50a7.40%207.40%200%201%200%2014.80%200a7.40%207.40%200%201%200%20-14.80%200M-10.30%2062.00a7.40%207.40%200%201%200%2014.80%200a7.40%207.40%200%201%200%20-14.80%200M223.50%2062.00a7.40%207.40%200%201%200%2014.80%200a7.40%207.40%200%201%200%20-14.80%200M-10.30%2077.50a7.40%207.40%200%201%200%2014.80%200a7.40%207.40%200%201%200%20-14.80%200M223.50%2077.50a7.40%207.40%200%201%200%2014.80%200a7.40%207.40%200%201%200%20-14.80%200M-10.30%2093.00a7.40%207.40%200%201%200%2014.80%200a7.40%207.40%200%201%200%20-14.80%200M223.50%2093.00a7.40%207.40%200%201%200%2014.80%200a7.40%207.40%200%201%200%20-14.80%200M-10.30%20108.50a7.40%207.40%200%201%200%2014.80%200a7.40%207.40%200%201%200%20-14.80%200M223.50%20108.50a7.40%207.40%200%201%200%2014.80%200a7.40%207.40%200%201%200%20-14.80%200M-10.30%20124.00a7.40%207.40%200%201%200%2014.80%200a7.40%207.40%200%201%200%20-14.80%200M223.50%20124.00a7.40%207.40%200%201%200%2014.80%200a7.40%207.40%200%201%200%20-14.80%200M-10.30%20139.50a7.40%207.40%200%201%200%2014.80%200a7.40%207.40%200%201%200%20-14.80%200M223.50%20139.50a7.40%207.40%200%201%200%2014.80%200a7.40%207.40%200%201%200%20-14.80%200M-10.30%20155.00a7.40%207.40%200%201%200%2014.80%200a7.40%207.40%200%201%200%20-14.80%200M223.50%20155.00a7.40%207.40%200%201%200%2014.80%200a7.40%207.40%200%201%200%20-14.80%200M-10.30%20170.50a7.40%207.40%200%201%200%2014.80%200a7.40%207.40%200%201%200%20-14.80%200M223.50%20170.50a7.40%207.40%200%201%200%2014.80%200a7.40%207.40%200%201%200%20-14.80%200M-10.30%20186.00a7.40%207.40%200%201%200%2014.80%200a7.40%207.40%200%201%200%20-14.80%200M223.50%20186.00a7.40%207.40%200%201%200%2014.80%200a7.40%207.40%200%201%200%20-14.80%200M-10.30%20201.50a7.40%207.40%200%201%200%2014.80%200a7.40%207.40%200%201%200%20-14.80%200M223.50%20201.50a7.40%207.40%200%201%200%2014.80%200a7.40%207.40%200%201%200%20-14.80%200M-10.30%20217.00a7.40%207.40%200%201%200%2014.80%200a7.40%207.40%200%201%200%20-14.80%200M223.50%20217.00a7.40%207.40%200%201%200%2014.80%200a7.40%207.40%200%201%200%20-14.80%200M-10.30%20232.50a7.40%207.40%200%201%200%2014.80%200a7.40%207.40%200%201%200%20-14.80%200M223.50%20232.50a7.40%207.40%200%201%200%2014.80%200a7.40%207.40%200%201%200%20-14.80%200M-10.30%20248.00a7.40%207.40%200%201%200%2014.80%200a7.40%207.40%200%201%200%20-14.80%200M223.50%20248.00a7.40%207.40%200%201%200%2014.80%200a7.40%207.40%200%201%200%20-14.80%200M-10.30%20263.50a7.40%207.40%200%201%200%2014.80%200a7.40%207.40%200%201%200%20-14.80%200M223.50%20263.50a7.40%207.40%200%201%200%2014.80%200a7.40%207.40%200%201%200%20-14.80%200M-10.30%20279.00a7.40%207.40%200%201%200%2014.80%200a7.40%207.40%200%201%200%20-14.80%200M223.50%20279.00a7.40%207.40%200%201%200%2014.80%200a7.40%207.40%200%201%200%20-14.80%200M-10.30%20294.50a7.40%207.40%200%201%200%2014.80%200a7.40%207.40%200%201%200%20-14.80%200M223.50%20294.50a7.40%207.40%200%201%200%2014.80%200a7.40%207.40%200%201%200%20-14.80%200%22/%3E%20%3C/svg%3E');
  -webkit-mask: var(--stamp-mask) center / 100% 100% no-repeat;
  mask: var(--stamp-mask) center / 100% 100% no-repeat;
}
.cta-qr-mat {
  background: transparent;
  padding: 0;
}
.cta-qr-pictorial {
  position: relative;
  background: transparent;
  padding: 0;
}
.cta-qr-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 2px 2px;
  padding: 0;
}
.cta-qr-meta em {
  font-family: var(--mono);
  font-style: normal;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--ink-mute);
}
.cta-qr-meta i {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  color: var(--coral);
}
.cta-qr-frame {
  width: 100%;
  aspect-ratio: 1;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  display: grid;
  place-items: center;
}
.cta-qr-frame img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  grid-area: 1 / 1;
}
.cta-qr-frame .cta-qr-img-dark { display: none; }
.cta-qr-banner {
  padding: 2px 2px 2px;
  color: var(--stamp-ink);
}
.cta-qr-banner b {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: inherit;
}
.cta-qr-banner strong {
  display: block;
  margin-top: 2px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: inherit;
}
.cta-qr-banner span {
  display: block;
  margin-top: 4px;
  font-family: var(--sans);
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---------- FOOTER ---------- */
footer {
  border-top: 1px solid var(--line);
  padding: 22px 0 calc(22px + var(--safe-bottom, 0px));
  margin-top: 0;
}
.foot-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 28px;
  flex-wrap: wrap;
}
.foot-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 24px;
}
.foot-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.foot-brand .brand { margin-bottom: 0; }
.foot-brand p {
  margin-top: 10px;
  font-family: var(--body);
  font-size: 13px;
  color: var(--ink-mute);
  line-height: 1.5;
  max-width: 42ch;
}
.foot-links-row {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.foot-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
  max-width: none;
  width: 100%;
}
.foot-actions .store-btn {
  padding: 10px 14px;
  border-radius: 12px;
  flex: 0 1 auto;
}
.foot-actions .store-btn .store-kicker { font-size: 9px; }
.foot-actions .store-btn .store-label { font-size: 13px; }
.foot-actions .store-btn .store-icon,
.foot-actions .store-btn .store-icon svg {
  width: 18px;
  height: 18px;
}
.foot-brand p .inline-link,
.inline-link {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: color 160ms ease, border-color 160ms ease;
}
.inline-link:hover {
  color: var(--coral);
  border-bottom-color: var(--coral);
}
.method-repo-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}
.method-repo-link:hover {
  color: var(--coral);
  border-bottom-color: var(--coral);
}
.library-link {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 160ms ease;
}
.library-link:hover { border-bottom-color: var(--coral); }
.foot-col h5 {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ink);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 18px;
  font-weight: 700;
}
.foot-nav-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  font-family: var(--body);
  font-size: 13px;
}
.foot-nav-inline a {
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 160ms ease;
}
.foot-nav-inline a:hover { color: var(--coral); }
.foot-nav-inline .sep { color: var(--line); }
.foot-col ul { list-style: none; }
.foot-col li { margin-bottom: 10px; }
.foot-col a {
  font-family: var(--body);
  font-size: 13.5px;
  color: var(--ink-soft);
  text-decoration: none;
}
.foot-col a:hover { color: var(--coral); }
.foot-bottom {
  border-top: 1px solid var(--line);
  padding-top: 22px;
  padding-bottom: 8px;
}
.foot-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px 10px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  text-align: center;
}
.foot-legal a {
  color: var(--ink-faint);
  text-decoration: none;
  transition: color 160ms ease;
}
.foot-legal a:hover { color: var(--ink-soft); }
.foot-psb {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.foot-psb img {
  width: 14px;
  height: 14px;
  display: block;
}
.foot-legal-sep {
  color: var(--line);
  user-select: none;
}

/* ---------- in-app browser overlay ---------- */
.inapp-overlay {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(12px + var(--safe-bottom));
  z-index: 200;
  padding: 0 12px;
  pointer-events: none;
}
html[data-inapp='true'] .inapp-overlay { display: block; }
.inapp-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  width: min(100%, 420px);
  margin: 0 auto;
  padding: 12px 56px 12px 14px;
  border: 1px solid var(--line);
  background: color-mix(in oklch, var(--paper) 42%, transparent);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  text-align: left;
  box-shadow: var(--shadow);
  pointer-events: auto;
}
.inapp-close {
  position: absolute;
  top: 50%;
  right: 4px;
  width: 48px;
  height: 48px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 36px;
  transform: translateY(-50%);
  line-height: 1;
  cursor: pointer;
}
.inapp-close:focus,
.apk-sheet-close:focus,
.apk-sheet-option:focus {
  outline: none;
}
.inapp-close:focus-visible,
.apk-sheet-close:focus-visible,
.apk-sheet-option:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--coral);
}
.inapp-title {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 4px;
}
.inapp-body {
  font-family: var(--body);
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-mute);
}
html[data-platform='ios'][data-inapp='true'] .inapp-overlay {
  top: 0;
  bottom: 0;
  background: color-mix(in oklch, black 46%, transparent);
  pointer-events: none;
}
html[data-platform='ios'][data-inapp='true'] .inapp-card {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: calc(88px + var(--safe-bottom));
  width: auto;
  margin: 0;
  background: var(--paper);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  pointer-events: auto;
}

/* ---------- Android APK ABI sheet ---------- */
.apk-sheet {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 210;
  pointer-events: none;
}
html[data-apk-sheet='open'] .apk-sheet {
  display: block;
  pointer-events: auto;
}
.apk-sheet[hidden] { display: none; }
.apk-sheet-backdrop {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 0;
  margin: 0;
  padding: 0;
  background: rgba(0, 0, 0, 0.4);
  background: color-mix(in oklch, black 40%, transparent);
  cursor: pointer;
}
.apk-sheet-panel {
  position: fixed;
  z-index: 2;
  left: 50%;
  width: calc(100% - 24px);
  max-width: 420px;
  padding: 18px 16px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
  box-shadow: var(--shadow);
  pointer-events: auto;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  top: 12px;
}
.apk-sheet-close {
  position: absolute;
  top: 8px;
  right: 4px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-mute);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.apk-sheet-close:focus-visible {
  outline: none;
}
.apk-sheet-title {
  margin: 0 40px 14px 0;
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-align: center;
}
.apk-sheet-actions {
  display: flex;
  flex-direction: column;
}
.apk-sheet-option + .apk-sheet-option { margin-top: 10px; }
.apk-sheet-option {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--paper-dark);
  background: color-mix(in oklch, var(--paper) 92%, var(--ink) 8%);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 160ms ease, background 160ms ease;
}
.apk-sheet-option:hover,
.apk-sheet-option:active {
  border-color: color-mix(in oklch, var(--coral) 55%, var(--line));
}
.apk-sheet-option-primary {
  border-color: var(--coral);
  background: var(--coral);
  color: var(--paper);
}
.apk-sheet-option-primary .apk-sheet-option-hint {
  color: rgba(239, 231, 210, 0.75);
  color: color-mix(in oklch, var(--paper) 72%, transparent);
}
.apk-sheet-option-primary .apk-sheet-option-icon svg {
  fill: var(--paper);
}
.apk-sheet-option-icon {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  margin-right: 12px;
}
.apk-sheet-option-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: var(--ink);
}
.apk-sheet-option-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  text-align: left;
}
.apk-sheet-option-label {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.apk-sheet-option-hint {
  font-family: var(--body);
  font-size: 12px;
  line-height: 1.35;
  color: var(--ink-mute);
}
.apk-sheet-option:focus-visible {
  outline: none;
}

/* ---------- scroll-reveal motion ----------
 *
 * Driven by `app/_components/reveal-root.tsx`. Elements with
 * `data-reveal` start hidden + offset; the observer sets
 * `data-revealed='true'` once they enter the viewport, triggering
 * the transition.
 *
 * Uses `translate` / `scale` longhand properties (not `transform`) so
 * that elements like `.work-card` keep their static `transform: rotate()`
 * intact while still translating in.
 */
[data-reveal] {
  opacity: 0;
  translate: 0 28px;
  transition:
    opacity 900ms cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms),
    translate 900ms cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms),
    scale 900ms cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms);
  will-change: opacity, translate, scale;
}
[data-reveal='left'] { translate: -36px 0; }
[data-reveal='right'] { translate: 36px 0; }
[data-reveal='scale'] { translate: 0 0; scale: 0.96; }
[data-reveal='rise-lg'] { translate: 0 64px; scale: 0.985; }
[data-reveal][data-revealed='true'] {
  opacity: 1;
  translate: 0 0;
  scale: 1;
}

/* stagger primitives — set --reveal-delay on grid children so siblings
 * appear in sequence rather than all at once. */
.cards > .card[data-reveal]:nth-child(1) { --reveal-delay: 0ms; }
.cards > .card[data-reveal]:nth-child(2) { --reveal-delay: 90ms; }
.cards > .card[data-reveal]:nth-child(3) { --reveal-delay: 180ms; }
.cards > .card[data-reveal]:nth-child(4) { --reveal-delay: 270ms; }

.labs-grid > .lab[data-reveal]:nth-child(1) { --reveal-delay: 0ms; }
.labs-grid > .lab[data-reveal]:nth-child(2) { --reveal-delay: 90ms; }
.labs-grid > .lab[data-reveal]:nth-child(3) { --reveal-delay: 180ms; }
.labs-grid > .lab[data-reveal]:nth-child(4) { --reveal-delay: 270ms; }
.labs-grid > .lab[data-reveal]:nth-child(5) { --reveal-delay: 360ms; }

.method-grid > .method-step[data-reveal]:nth-child(1) { --reveal-delay: 0ms; }
.method-grid > .method-step[data-reveal]:nth-child(2) { --reveal-delay: 110ms; }
.method-grid > .method-step[data-reveal]:nth-child(3) { --reveal-delay: 220ms; }
.method-grid > .method-step[data-reveal]:nth-child(4) { --reveal-delay: 330ms; }

.partners > .partner[data-reveal]:nth-child(1) { --reveal-delay: 0ms; }
.partners > .partner[data-reveal]:nth-child(2) { --reveal-delay: 70ms; }
.partners > .partner[data-reveal]:nth-child(3) { --reveal-delay: 140ms; }
.partners > .partner[data-reveal]:nth-child(4) { --reveal-delay: 210ms; }
.partners > .partner[data-reveal]:nth-child(5) { --reveal-delay: 280ms; }
.partners > .partner[data-reveal]:nth-child(6) { --reveal-delay: 350ms; }

/* hero copy — let label, headline, lead, actions, stats arrive in sequence
 * so the headline isn't waiting on a single block-level reveal. */
.hero-copy > [data-reveal]:nth-of-type(1) { --reveal-delay: 0ms; }
.hero-copy > [data-reveal]:nth-of-type(2) { --reveal-delay: 80ms; }
.hero-copy > [data-reveal]:nth-of-type(3) { --reveal-delay: 160ms; }
.hero-copy > [data-reveal]:nth-of-type(4) { --reveal-delay: 240ms; }
.hero-copy > [data-reveal]:nth-of-type(5) { --reveal-delay: 320ms; }
.hero-copy > [data-reveal]:nth-of-type(6) { --reveal-delay: 400ms; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    translate: 0 0 !important;
    scale: 1 !important;
    transition: none !important;
  }
}

/* responsive */
@media (max-width: 1280px) {
  .container { padding: 0 44px; }
  .work { margin: 0 44px; padding: 90px 44px; }
  .side-rail { display: none; }
}
/* hide topbar mid text early — between 1200 and 1280 it crowds even with nowrap */
@media (max-width: 1200px) {
  .topbar-inner .mid { display: none; }
}
/* nav: between 1080 and 1180 the brand tail + 5 nav links crowd the row.
 * Drop the brand sub-meta first, then tighten link spacing. */
@media (max-width: 1180px) {
  .nav-inner { gap: 18px; }
  .brand-meta { display: none; }
  .nav-links { gap: 22px; }
}
@media (max-width: 1080px) {
  .nav-links { gap: 16px; }
  .container { padding: 0 32px; }
  .hero h1 { font-size: clamp(36px, 4.6vw, 54px); }
  .section-header h2 { font-size: clamp(32px, 4vw, 50px); }
  .labs-grid { grid-template-columns: repeat(5, 1fr); gap: 14px; }
  .partners { grid-template-columns: repeat(3, 1fr); gap: 18px; row-gap: 28px; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .foot-grid .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 880px) {
  .container { padding: 0 24px; }
  .hero-grid, .about-grid, .capabilities-grid, .testimonial-grid, .cta-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }
  .cta .cta-copy {
    opacity: 1;
    translate: none;
    will-change: auto;
  }
  .shell { padding-bottom: calc(76px + var(--safe-bottom)); }
  .cta .cta-actions {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 70;
    flex-direction: row;
    margin: 0;
    padding: 10px 16px calc(10px + var(--safe-bottom));
    background: var(--paper);
    background: color-mix(in oklch, var(--paper) 94%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
    box-sizing: border-box;
  }
  .cta .cta-actions .store-btn {
    flex: 1 1 0;
    width: auto;
    justify-content: center;
  }
  .inapp-overlay { bottom: calc(76px + var(--safe-bottom)); }
  .hero-copy { padding: 8px 0 0; }
  .hero h1 { white-space: normal; }
  .hero-actions { flex-wrap: wrap; }
  .hero-art {
    height: clamp(360px, 58vh, 460px);
    height: clamp(360px, 58dvh, 460px);
    max-height: 460px;
    margin-right: 0;
    overflow: hidden;
  }
  .hero-collage {
    transform: scale(0.74);
    transform-origin: center center;
  }
  .hc-photo { transform: rotate(-12deg) translate(-100px, -48px); }
  .hc-postcard { transform: rotate(-4deg) translate(-24px, 70px); }
  .hc-letter { transform: rotate(2deg) translate(48px, -24px); }
  .hc-photo:hover,
  .hc-photo.is-lifted {
    transform: rotate(-8deg) translate(-100px, -56px) scale(1.08);
    z-index: 10;
  }
  .hc-postcard:hover,
  .hc-postcard.is-lifted {
    transform: rotate(-2deg) translate(-24px, 60px) scale(1.04);
    z-index: 10;
  }
  .hc-letter:hover,
  .hc-letter.is-lifted {
    transform: rotate(1deg) translate(48px, -32px) scale(1.05);
    z-index: 10;
  }
  .pc-mail-scene .hc-postcard,
  .pc-mail-scene .hc-postcard:hover,
  .pc-mail-scene .hc-postcard.is-lifted {
    transform: translate(-50%, -68%) rotate(-16deg) scale(0.22);
  }
  .cta-qr { margin: 0 auto; transform: rotate(-1.5deg); }
  .foot-bar {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .foot-legal { justify-content: center; }
  .testimonial-art { max-width: 420px; margin: 0 auto; }
  .tm-voices { inset: 30px 14px 26px; }
  .tm-voice-card { min-height: 136px; padding: 17px 18px 16px; }
  .tm-voice-card-three { padding-left: 26px; }
  .tm-voice-card p { margin: 13px 0 10px; font-size: 15px; line-height: 1.55; }
  .labs-grid { grid-template-columns: repeat(2, 1fr); }
  .method-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; }
  .method-grid::before { display: none; }
  .work { margin: 0 12px; padding: 60px 24px; }
  .work-grid { grid-template-columns: 1fr; }
  .partners { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .nav-links, .brand-meta { display: none; }
  :root { --nav-height: 64px; }
  .nav {
    padding: 10px 0;
    overflow: visible;
    z-index: 80;
  }
  .nav-inner { gap: 10px; width: 100%; max-width: 100%; }
  .nav-side { gap: 8px; flex-shrink: 0; }
  .nav-toggle { display: inline-flex; }
  .theme-toggle,
  .lang-toggle {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
  }
  .nav-login { min-height: 40px; }
  .lang-menu li,
  .theme-menu li { min-height: 44px; }
  .btn { min-height: 44px; }
  .nav-backdrop:not([hidden]) {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0;
    z-index: 48;
    background: rgba(21, 20, 15, 0.38);
  }
  .nav-drawer:not([hidden]) {
    display: block;
    position: fixed;
    top: var(--nav-offset);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 49;
    overflow-y: auto;
    padding: 12px 24px calc(28px + var(--safe-bottom));
    background: var(--paper);
    border-top: 1px solid var(--line-soft);
  }
  .nav-drawer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 8px 0;
  }
  .nav-drawer-links a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 10px 4px;
    color: var(--ink);
    text-decoration: none;
    font-family: var(--sans);
    font-size: 18px;
    font-weight: 600;
    border-bottom: 1px solid var(--line-faint);
  }
  .nav-drawer-links a.nav-download {
    margin-top: 12px;
    justify-content: center;
    border: 1px solid var(--ink);
    border-radius: 999px;
    font-size: 16px;
  }
  /* wire — stack the field label above the marquee rows */
  .wire-inner { grid-template-columns: 1fr; gap: 14px; }
  .wire-left {
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding-right: 0;
    padding-bottom: 12px;
    min-height: 0;
  }
}
@media (max-width: 560px) {
  .container { padding: 0 16px; }
  .hero-copy { min-width: 0; }
  .hero-stats { gap: 6px; }
  .hero-stats .stat { gap: 7px; }
  .hero h1 { font-size: 38px; white-space: normal; }
  .hero-actions {
    flex-wrap: wrap;
    justify-content: center;
  }
  .hero-actions .btn { justify-content: center; }
  .partner { align-items: center; text-align: center; }
  .partner .glyph { justify-content: center; }
  .hero-art {
    height: clamp(280px, 50dvh, 380px);
    max-height: 380px;
  }
  .hero-collage { transform: scale(0.58); }
  .labs-grid { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr; }
  .method-grid { grid-template-columns: 1fr; gap: 40px; }
  .method-step .pc-phone {
    --pc-w: min(240px, 100%);
    margin-inline: auto;
  }
  .method-step > p { max-width: none; }
  section { padding: 80px 0; }
  .topbar-inner { font-size: 9px; }
  .cta-actions {
    flex-direction: column;
    gap: 10px;
  }
  .foot-actions { gap: 8px; }
  .store-btn {
    width: 100%;
    flex: 0 0 auto;
    min-width: 0;
    min-height: 44px;
    justify-content: center;
    padding: 12px 16px;
  }
  .store-btn .store-kicker { font-size: 9px; }
  .store-btn .store-label { font-size: 13px; }
  .foot-legal {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  .foot-legal-sep { display: none; }
  .app-grid { gap: 40px; }
  .nav-drawer:not([hidden]) { padding-left: 16px; padding-right: 16px; }
  .nav-inner { min-width: 0; }
  .brand { min-width: 0; }
  .nav-login { padding: 0 12px; }
  .testimonial-art {
    max-width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
  }
}
@media (max-width: 400px) {
  .hero-art {
    height: clamp(260px, 48vh, 340px);
    height: clamp(260px, 48dvh, 340px);
    max-height: 340px;
  }
  .hero-collage { transform: scale(0.56); }
  .hero h1 { font-size: 32px; white-space: normal; }
  .nav-side { gap: 6px; }
  .brand { gap: 8px; font-size: 16px; }
  .brand-mark { width: 30px; height: 30px; }
  .brand > span:not(.brand-mark):not(.brand-meta) { display: none; }
}

.code-inline {
  font-family: var(--mono);
  font-size: 14px;
  background: var(--bone);
  padding: 1px 6px;
  border-radius: 4px;
}
.code-inline.sm { font-size: 12px; padding: 0 4px; }

/* ---------- DARK MODE (NIGHT THEME) ----------
 * 未手动选择时跟随浏览器 prefers-color-scheme；
 * 用户点过切换后，以 html[data-theme] 为准。
 */
html[data-theme='dark'] {
  color-scheme: dark only;
  background-color: #1A1F2C;
  --paper: #1A1F2C;
  --paper-warm: #252836;
  --paper-dark: #0F111A;
  --ink: #F4E4C1;
  --ink-soft: #D5C6A7;
  --ink-mute: #C4A980;
  --ink-faint: #8B7C62;
  --coral: #5b87c7;
  --coral-soft: #7ea3d4;
  --mustard: #e9b94a;
  --olive: #8a915a;
  --bone: #252836;
  --line: rgba(244, 228, 193, 0.16);
  --line-soft: rgba(244, 228, 193, 0.08);
  --line-faint: rgba(244, 228, 193, 0.05);
  --shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
}
html[data-theme='dark'] body::before {
  mix-blend-mode: overlay;
  opacity: 0.15;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(244, 228, 193, 0.04) 0, transparent 28%),
    radial-gradient(circle at 88% 72%, rgba(244, 228, 193, 0.03) 0, transparent 32%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
html[data-theme='dark'] .work { background: #0F111A; color: var(--ink); }
html[data-theme='dark'] .work-rule { border-top-color: var(--line); color: var(--ink-mute); }
html[data-theme='dark'] .work-copy h2 { color: var(--ink); }
html[data-theme='dark'] .work-link { color: var(--ink); }
html[data-theme='dark'] .work-card { background: var(--paper-warm); color: var(--ink); }
html[data-theme='dark'] .work-card h3 { color: var(--ink); }
html[data-theme='dark'] .work-arrows .nav-btn { color: var(--ink); border-color: var(--line); }
html[data-theme='dark'] .work::before { opacity: 0.15; }
html[data-theme='dark'] .hero-art .index { background: rgba(26, 31, 44, 0.7); }
html[data-theme='dark'] .lab-img .badge { background: rgba(26, 31, 44, 0.9); color: var(--ink); }
html[data-theme='dark'] .cta-qr {
  --stamp: #2a3140;
  --stamp-ink: var(--ink);
}
html[data-theme='dark'] .cta-qr-frame { background: transparent; }
html[data-theme='dark'] .cta-qr-frame .cta-qr-img-light { display: none; }
html[data-theme='dark'] .cta-qr-frame .cta-qr-img-dark { display: block; }
html[data-theme='dark'] .nav-backdrop:not([hidden]) { background: rgba(0, 0, 0, 0.55); }
html[data-theme='dark'] .phone {
  --sc-card: var(--paper-warm);
  --sc-parchment: var(--paper-warm);
  --sc-on-primary: var(--paper);
  --sc-envelope: color-mix(in oklch, var(--coral) 35%, var(--paper-warm));
  background: var(--paper-dark);
}
html[data-theme='dark'] .sc-paper { box-shadow: none; }
html[data-theme='dark'] .pc-phone { --pc-green: #4A7A6F; }
html[data-theme='dark'] .pc-mail { background: var(--paper-warm); }
html[data-theme='dark'] .pc-mail-ground { fill: color-mix(in oklch, var(--olive) 48%, #1A1F2C); }
html[data-theme='dark'] .pc-mail-slot { fill: #10241f; }
html[data-theme='dark'] .pc-mail-window-inner { fill: color-mix(in oklch, var(--mustard) 28%, #1f3d36); }
html[data-theme='dark'] .pc-screen,
html[data-theme='dark'] .pc-reg { background: var(--paper-warm); }
html[data-theme='dark'] .pc-prepare-sheet { background: var(--paper); }
html[data-theme='dark'] .pc-id-card,
html[data-theme='dark'] .pc-prepare .pc-card,
html[data-theme='dark'] .pc-addr,
html[data-theme='dark'] .pc-note,
html[data-theme='dark'] .pc-polaroid { background: var(--paper-warm); }
html[data-theme='dark'] .pc-globe { --orbit-gold: #e2b56a; }
html[data-theme='dark'] .pc-orbit-outer { color: color-mix(in oklch, var(--orbit-gold) 48%, transparent); }
html[data-theme='dark'] .pc-orbit-inner { color: color-mix(in oklch, var(--orbit-gold) 68%, transparent); }
html[data-theme='dark'] .pc-orbit-outer .pc-orbit-star,
html[data-theme='dark'] .pc-orbit-inner .pc-orbit-star.is-top { opacity: 1; }
html[data-theme='dark'] .pc-orbit-inner .pc-orbit-star.is-bottom { opacity: 0.7; }
html[data-theme='dark'] .pc-earth-glow {
  background: radial-gradient(
    circle,
    transparent 0 58%,
    color-mix(in oklch, #7EB8C4 42%, transparent) 63%,
    color-mix(in oklch, #7EB8C4 9%, transparent) 78%,
    transparent 100%
  );
}
html[data-theme='dark'] .hc-postcard { background: var(--paper-dark); }
html[data-theme='dark'] .hc-postcard::before,
html[data-theme='dark'] .tm-voice-card-three::before {
  background: repeating-linear-gradient(
    180deg,
    #c04538 0 7px,
    #5b87c7 7px 14px,
    var(--paper-dark) 14px 18px
  );
}
html[data-theme='dark'] .hc-letter { background-color: var(--paper-warm); }
html[data-theme='dark'] .hc-photo { background: var(--paper-warm); }
html[data-theme='dark'] .hc-photo-img { background: linear-gradient(to bottom, #3a4750, #2a2d34); }
html[data-theme='dark'] .hc-mountain { background: #4a544d; }
html[data-theme='dark'] .hc-airmail { color: #5b87c7; border-color: #5b87c7; }
html[data-theme='dark'] .tm-voice-card {
  background-color: var(--paper-warm);
  box-shadow: 0 22px 44px -22px rgba(0, 0, 0, 0.55);
}
html[data-theme='dark'] .tm-voice-card-three { background-color: var(--paper-dark); }
html[data-theme='dark'] body,
html[data-theme='dark'] .nav {
  background-color: #1A1F2C;
}
html[data-theme='dark'] .theme-toggle,
html[data-theme='dark'] .lang-toggle {
  background: #1A1F2C;
  color: #F4E4C1;
}
html[data-theme='dark'] .apk-sheet-option-primary .apk-sheet-option-hint {
  color: rgba(26, 31, 44, 0.75);
  color: color-mix(in oklch, var(--paper) 72%, transparent);
}

/* 不支持 color-mix 的内核才走这里。新浏览器没有 data-legacy，仍用上面的原样式。 */
html[data-legacy='1'] body::before,
html[data-blend='off'] body::before { display: none; }
html[data-legacy='1'] .nav-side { gap: 0; }
html[data-legacy='1'] .nav-side > * + * { margin-left: 10px; }
html[data-legacy='1'] .about-illu-land { fill: #b59c49; }
html[data-legacy='1'] .about-illu-hourglass-disc { fill: #eddab0; }
html[data-legacy='1'] .pc-mail-ground { fill: #bebb9d; }
html[data-legacy='1'] .pc-mail-ridge { fill: #25453d; }
html[data-legacy='1'] .pc-mail-slot-lip { fill: #284941; }
html[data-legacy='1'] .pc-mail-window { fill: #2a4b44; }
html[data-legacy='1'] .pc-mail-window-inner { fill: #4b593a; }
html[data-legacy='1'] .pc-orbit-outer { color: rgba(201, 160, 74, 0.62); }
html[data-legacy='1'] .pc-orbit-inner { color: rgba(201, 160, 74, 0.78); }
html[data-legacy='1'] .pc-orbit-tail { background: linear-gradient(180deg, transparent, rgba(201, 160, 74, 0.85)); }
html[data-legacy='1'] .store-btn-ios .store-kicker { color: rgba(239, 231, 210, 0.55); }
html[data-legacy='1'] .store-btn-ios:hover { background: #24302c; }
html[data-legacy='1'] .phone {
  --sc-envelope: #e4c373;
  --sc-env-ink: rgba(21, 20, 15, 0.72);
  --sc-env-mute: rgba(21, 20, 15, 0.48);
  --sc-transit-track: rgba(21, 20, 15, 0.12);
}
html[data-legacy='1'] .sc-stamp-art {
  background:
    radial-gradient(circle at 72% 22%, var(--mustard) 0 3.2px, transparent 3.4px),
    linear-gradient(180deg, #d4d0b7 0%, #b1ac8a 100%);
}
html[data-legacy='1'] .sc-stamp-slot {
  border-color: rgba(58, 117, 148, 0.4);
  color: rgba(58, 117, 148, 0.85);
}
html[data-legacy='1'][data-theme='dark'] .pc-mail-ground { fill: #505642; }
html[data-legacy='1'][data-theme='dark'] .pc-mail-ridge { fill: #355c52; }
html[data-legacy='1'][data-theme='dark'] .pc-mail-slot-lip { fill: #3b665c; }
html[data-legacy='1'][data-theme='dark'] .pc-mail-window { fill: #3f6a61; }
html[data-legacy='1'][data-theme='dark'] .pc-mail-window-inner { fill: #57603c; }
html[data-legacy='1'][data-theme='dark'] .pc-orbit-outer { color: rgba(226, 181, 106, 0.48); }
html[data-legacy='1'][data-theme='dark'] .pc-orbit-inner { color: rgba(226, 181, 106, 0.68); }
html[data-legacy='1'][data-theme='dark'] .store-btn-ios .store-kicker { color: rgba(26, 31, 44, 0.55); }
html[data-legacy='1'][data-theme='dark'] .phone {
  --sc-envelope: #384969;
  --sc-env-ink: rgba(244, 228, 193, 0.72);
  --sc-env-mute: rgba(244, 228, 193, 0.48);
  --sc-transit-track: rgba(244, 228, 193, 0.12);
}
@media (max-width: 880px) {
  html[data-legacy='1'] .nav-side > * + * { margin-left: 8px; }
}
@media (max-width: 400px) {
  html[data-legacy='1'] .nav-side > * + * { margin-left: 6px; }
}

/* Android 10 / 小米浏览器：点击后的焦点环是方形黄框，且不跟圆角。 */
html {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
a, button, input, textarea, select, label, summary,
.hc-photo, .hc-postcard, .hc-letter {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
a:focus, button:focus, input:focus, textarea:focus, select:focus, summary:focus,
.hc-photo:focus, .hc-postcard:focus, .hc-letter:focus {
  outline: none;
}
.theme-toggle:focus,
.lang-toggle:focus,
.nav-toggle:focus {
  outline: none;
  background-color: #efe7d2;
  color: #15140f;
}
.nav-login:focus {
  outline: none;
}
.theme-toggle:focus-visible,
.lang-toggle:focus-visible,
.nav-toggle:focus-visible,
.nav-login:focus-visible,
a:focus-visible,
button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--coral);
}
html[data-theme='dark'] .theme-toggle:focus,
html[data-theme='dark'] .lang-toggle:focus,
html[data-theme='dark'] .nav-toggle:focus {
  background-color: #1A1F2C;
  color: #F4E4C1;
}

/* Android 10：底栏没有磨砂，纸色按钮贴在纸色底上，边框又只有 16% 黑，两个下载钮会发虚。 */
html[data-blend='off'] .cta .cta-actions {
  background: #efe7d2;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-blend='off'] .cta .cta-actions .store-btn {
  background: #15140f;
  border-color: #15140f;
  color: #efe7d2;
}
html[data-blend='off'] .cta .cta-actions .store-btn .store-kicker,
html[data-blend='off'] .cta .cta-actions .store-btn .store-label {
  color: #efe7d2;
}
html[data-blend='off'] .cta .cta-actions .store-btn .store-icon svg {
  fill: #efe7d2;
}
html[data-theme='dark'][data-blend='off'] .cta .cta-actions {
  background: #1A1F2C;
}
html[data-theme='dark'][data-blend='off'] .cta .cta-actions .store-btn {
  background: #F4E4C1;
  border-color: #F4E4C1;
  color: #1A1F2C;
}
html[data-theme='dark'][data-blend='off'] .cta .cta-actions .store-btn .store-kicker,
html[data-theme='dark'][data-blend='off'] .cta .cta-actions .store-btn .store-label {
  color: #1A1F2C;
}
html[data-theme='dark'][data-blend='off'] .cta .cta-actions .store-btn .store-icon svg {
  fill: #1A1F2C;
}