/* fonts:start — self-hosted webfonts, generated by tools/build-fonts.py; re-run after Chinese copy changes */
@font-face{font-family:'Geist';font-style:normal;font-weight:300 700;font-display:swap;src:url(/fonts/geist-cyrillic-ext.e05ad86b.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{font-family:'Geist';font-style:normal;font-weight:300 700;font-display:swap;src:url(/fonts/geist-cyrillic.c71bf42e.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Geist';font-style:normal;font-weight:300 700;font-display:swap;src:url(/fonts/geist-vietnamese.8ce1f5e0.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:'Geist';font-style:normal;font-weight:300 700;font-display:swap;src:url(/fonts/geist-latin-ext.66a33f6a.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Geist';font-style:normal;font-weight:300 700;font-display:swap;src:url(/fonts/geist-latin.9d846db8.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url(/fonts/geist-mono-cyrillic-ext.c0334d7b.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url(/fonts/geist-mono-cyrillic.9c202db3.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url(/fonts/geist-mono-symbols2.a3330d8a.woff2) format('woff2');unicode-range:U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url(/fonts/geist-mono-vietnamese.0d4404da.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url(/fonts/geist-mono-latin-ext.fd41f561.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url(/fonts/geist-mono-latin.ef6dca3a.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:300 400;font-display:swap;src:url(/fonts/newsreader-i-vietnamese.f3456008.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:300 400;font-display:swap;src:url(/fonts/newsreader-i-latin-ext.3184335d.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:300 400;font-display:swap;src:url(/fonts/newsreader-i-latin.0e959a34.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:300 600;font-display:swap;src:url(/fonts/newsreader-vietnamese.b232cde5.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:300 600;font-display:swap;src:url(/fonts/newsreader-latin-ext.5ca53eda.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:300 600;font-display:swap;src:url(/fonts/newsreader-latin.662a6e2a.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Noto Serif SC';font-style:normal;font-weight:300;font-display:swap;src:url(/fonts/noto-serif-sc-300-subset.e55595a3.woff2) format('woff2');unicode-range:U+b7, U+2013-2014, U+2018-2019, U+201c-201d, U+2026, U+3001-3002, U+4e0a, U+4e0d, U+4e2d, U+4e3d, U+4e60, U+4e86, U+4eec, U+4f8b, U+4fdd, U+516c, U+522b, U+52c9, U+52d5, U+53bb, U+53cb, U+53e3, U+5403, U+542c, U+5468, U+548c, U+559c, U+56ed, U+56fd, U+5728, U+591a, U+5929-592a, U+597d, U+5b57-5b58, U+5b66, U+5ba2, U+5c71, U+5e26, U+5e38, U+5f37, U+6211, U+623b, U+6563, U+6587, U+65e5, U+665a, U+666f, U+66f8, U+670b, U+672b-672c, U+6b22, U+6b65, U+6c14, U+722c, U+7684, U+76ee, U+79c1, U+7cbe, U+7f8e, U+81ea, U+8a5e, U+8a9e, U+8b80, U+8bed, U+8bfb, U+8f9e, U+8fd8, U+95b1, U+9605, U+96f6, U+975e, U+9876, U+98ce, U+98df, U+9928, U+ff0c;}
@font-face{font-family:'Noto Serif SC';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/noto-serif-sc-400-subset.c4cca32f.woff2) format('woff2');unicode-range:U+b7, U+2013-2014, U+2018-2019, U+201c-201d, U+2026, U+3001-3002, U+4e0a, U+4e0d, U+4e2d, U+4e3d, U+4e60, U+4e86, U+4eec, U+4f8b, U+4fdd, U+516c, U+522b, U+52c9, U+52d5, U+53bb, U+53cb, U+53e3, U+5403, U+542c, U+5468, U+548c, U+559c, U+56ed, U+56fd, U+5728, U+591a, U+5929-592a, U+597d, U+5b57-5b58, U+5b66, U+5ba2, U+5c71, U+5e26, U+5e38, U+5f37, U+6211, U+623b, U+6563, U+6587, U+65e5, U+665a, U+666f, U+66f8, U+670b, U+672b-672c, U+6b22, U+6b65, U+6c14, U+722c, U+7684, U+76ee, U+79c1, U+7cbe, U+7f8e, U+81ea, U+8a5e, U+8a9e, U+8b80, U+8bed, U+8bfb, U+8f9e, U+8fd8, U+95b1, U+9605, U+96f6, U+975e, U+9876, U+98ce, U+98df, U+9928, U+ff0c;}
@font-face{font-family:'Noto Serif SC';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/noto-serif-sc-500-subset.6031034d.woff2) format('woff2');unicode-range:U+b7, U+2013-2014, U+2018-2019, U+201c-201d, U+2026, U+3001-3002, U+4e0a, U+4e0d, U+4e2d, U+4e3d, U+4e60, U+4e86, U+4eec, U+4f8b, U+4fdd, U+516c, U+522b, U+52c9, U+52d5, U+53bb, U+53cb, U+53e3, U+5403, U+542c, U+5468, U+548c, U+559c, U+56ed, U+56fd, U+5728, U+591a, U+5929-592a, U+597d, U+5b57-5b58, U+5b66, U+5ba2, U+5c71, U+5e26, U+5e38, U+5f37, U+6211, U+623b, U+6563, U+6587, U+65e5, U+665a, U+666f, U+66f8, U+670b, U+672b-672c, U+6b22, U+6b65, U+6c14, U+722c, U+7684, U+76ee, U+79c1, U+7cbe, U+7f8e, U+81ea, U+8a5e, U+8a9e, U+8b80, U+8bed, U+8bfb, U+8f9e, U+8fd8, U+95b1, U+9605, U+96f6, U+975e, U+9876, U+98ce, U+98df, U+9928, U+ff0c;}
@font-face{font-family:'Noto Serif SC';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/noto-serif-sc-600-subset.9c440e0a.woff2) format('woff2');unicode-range:U+b7, U+2013-2014, U+2018-2019, U+201c-201d, U+2026, U+3001-3002, U+4e0a, U+4e0d, U+4e2d, U+4e3d, U+4e60, U+4e86, U+4eec, U+4f8b, U+4fdd, U+516c, U+522b, U+52c9, U+52d5, U+53bb, U+53cb, U+53e3, U+5403, U+542c, U+5468, U+548c, U+559c, U+56ed, U+56fd, U+5728, U+591a, U+5929-592a, U+597d, U+5b57-5b58, U+5b66, U+5ba2, U+5c71, U+5e26, U+5e38, U+5f37, U+6211, U+623b, U+6563, U+6587, U+65e5, U+665a, U+666f, U+66f8, U+670b, U+672b-672c, U+6b22, U+6b65, U+6c14, U+722c, U+7684, U+76ee, U+79c1, U+7cbe, U+7f8e, U+81ea, U+8a5e, U+8a9e, U+8b80, U+8bed, U+8bfb, U+8f9e, U+8fd8, U+95b1, U+9605, U+96f6, U+975e, U+9876, U+98ce, U+98df, U+9928, U+ff0c;}
@font-face{font-family:'Noto Serif SC';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/noto-serif-sc-700-subset.5c8aa922.woff2) format('woff2');unicode-range:U+b7, U+2013-2014, U+2018-2019, U+201c-201d, U+2026, U+3001-3002, U+4e0a, U+4e0d, U+4e2d, U+4e3d, U+4e60, U+4e86, U+4eec, U+4f8b, U+4fdd, U+516c, U+522b, U+52c9, U+52d5, U+53bb, U+53cb, U+53e3, U+5403, U+542c, U+5468, U+548c, U+559c, U+56ed, U+56fd, U+5728, U+591a, U+5929-592a, U+597d, U+5b57-5b58, U+5b66, U+5ba2, U+5c71, U+5e26, U+5e38, U+5f37, U+6211, U+623b, U+6563, U+6587, U+65e5, U+665a, U+666f, U+66f8, U+670b, U+672b-672c, U+6b22, U+6b65, U+6c14, U+722c, U+7684, U+76ee, U+79c1, U+7cbe, U+7f8e, U+81ea, U+8a5e, U+8a9e, U+8b80, U+8bed, U+8bfb, U+8f9e, U+8fd8, U+95b1, U+9605, U+96f6, U+975e, U+9876, U+98ce, U+98df, U+9928, U+ff0c;}
@font-face{font-family:'Noto Sans SC';font-style:normal;font-weight:300;font-display:swap;src:url(/fonts/noto-sans-sc-300-subset.8a7cb57e.woff2) format('woff2');unicode-range:U+b7, U+2013-2014, U+2018-2019, U+201c-201d, U+2026, U+3001-3002, U+4e0a, U+4e0d, U+4e2d, U+4e3d, U+4e60, U+4e86, U+4eec, U+4f8b, U+4fdd, U+516c, U+522b, U+52c9, U+52d5, U+53bb, U+53cb, U+53e3, U+5403, U+542c, U+5468, U+548c, U+559c, U+56ed, U+56fd, U+5728, U+591a, U+5929-592a, U+597d, U+5b57-5b58, U+5b66, U+5ba2, U+5c71, U+5e26, U+5e38, U+5f37, U+6211, U+623b, U+6563, U+6587, U+65e5, U+665a, U+666f, U+66f8, U+670b, U+672b-672c, U+6b22, U+6b65, U+6c14, U+722c, U+7684, U+76ee, U+79c1, U+7cbe, U+7f8e, U+81ea, U+8a5e, U+8a9e, U+8b80, U+8bed, U+8bfb, U+8f9e, U+8fd8, U+95b1, U+9605, U+96f6, U+975e, U+9876, U+98ce, U+98df, U+9928, U+ff0c;}
@font-face{font-family:'Noto Sans SC';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/noto-sans-sc-400-subset.75a65282.woff2) format('woff2');unicode-range:U+b7, U+2013-2014, U+2018-2019, U+201c-201d, U+2026, U+3001-3002, U+4e0a, U+4e0d, U+4e2d, U+4e3d, U+4e60, U+4e86, U+4eec, U+4f8b, U+4fdd, U+516c, U+522b, U+52c9, U+52d5, U+53bb, U+53cb, U+53e3, U+5403, U+542c, U+5468, U+548c, U+559c, U+56ed, U+56fd, U+5728, U+591a, U+5929-592a, U+597d, U+5b57-5b58, U+5b66, U+5ba2, U+5c71, U+5e26, U+5e38, U+5f37, U+6211, U+623b, U+6563, U+6587, U+65e5, U+665a, U+666f, U+66f8, U+670b, U+672b-672c, U+6b22, U+6b65, U+6c14, U+722c, U+7684, U+76ee, U+79c1, U+7cbe, U+7f8e, U+81ea, U+8a5e, U+8a9e, U+8b80, U+8bed, U+8bfb, U+8f9e, U+8fd8, U+95b1, U+9605, U+96f6, U+975e, U+9876, U+98ce, U+98df, U+9928, U+ff0c;}
@font-face{font-family:'Noto Sans SC';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/noto-sans-sc-500-subset.7babbf4f.woff2) format('woff2');unicode-range:U+b7, U+2013-2014, U+2018-2019, U+201c-201d, U+2026, U+3001-3002, U+4e0a, U+4e0d, U+4e2d, U+4e3d, U+4e60, U+4e86, U+4eec, U+4f8b, U+4fdd, U+516c, U+522b, U+52c9, U+52d5, U+53bb, U+53cb, U+53e3, U+5403, U+542c, U+5468, U+548c, U+559c, U+56ed, U+56fd, U+5728, U+591a, U+5929-592a, U+597d, U+5b57-5b58, U+5b66, U+5ba2, U+5c71, U+5e26, U+5e38, U+5f37, U+6211, U+623b, U+6563, U+6587, U+65e5, U+665a, U+666f, U+66f8, U+670b, U+672b-672c, U+6b22, U+6b65, U+6c14, U+722c, U+7684, U+76ee, U+79c1, U+7cbe, U+7f8e, U+81ea, U+8a5e, U+8a9e, U+8b80, U+8bed, U+8bfb, U+8f9e, U+8fd8, U+95b1, U+9605, U+96f6, U+975e, U+9876, U+98ce, U+98df, U+9928, U+ff0c;}
@font-face{font-family:'Noto Sans SC';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/noto-sans-sc-600-subset.c310608d.woff2) format('woff2');unicode-range:U+b7, U+2013-2014, U+2018-2019, U+201c-201d, U+2026, U+3001-3002, U+4e0a, U+4e0d, U+4e2d, U+4e3d, U+4e60, U+4e86, U+4eec, U+4f8b, U+4fdd, U+516c, U+522b, U+52c9, U+52d5, U+53bb, U+53cb, U+53e3, U+5403, U+542c, U+5468, U+548c, U+559c, U+56ed, U+56fd, U+5728, U+591a, U+5929-592a, U+597d, U+5b57-5b58, U+5b66, U+5ba2, U+5c71, U+5e26, U+5e38, U+5f37, U+6211, U+623b, U+6563, U+6587, U+65e5, U+665a, U+666f, U+66f8, U+670b, U+672b-672c, U+6b22, U+6b65, U+6c14, U+722c, U+7684, U+76ee, U+79c1, U+7cbe, U+7f8e, U+81ea, U+8a5e, U+8a9e, U+8b80, U+8bed, U+8bfb, U+8f9e, U+8fd8, U+95b1, U+9605, U+96f6, U+975e, U+9876, U+98ce, U+98df, U+9928, U+ff0c;}
/* fonts:end */

/* ─────────────────────────────────────────────────────────────
   ZIMU — site styles
   Palette is theme-driven (see page.js). Defaults: Matcha.
   ───────────────────────────────────────────────────────────── */

:root {
  /* Matcha — default (light) */
  --bg:           #F1ECDD;       /* warm cream, slightly more saturated */
  --surface:      #FFFFFF;
  --surface-alt:  #E9E2CB;
  --ink:          #14180E;       /* deep green-black */
  --ink-soft:     rgba(20, 24, 14, 0.66);
  --ink-faint:    rgba(20, 24, 14, 0.42);
  --ink-ghost:    rgba(20, 24, 14, 0.18);
  --hair:         rgba(20, 24, 14, 0.10);
  --hair-strong:  rgba(20, 24, 14, 0.22);
  --accent:       #5A8A6B;       /* matcha green */
  --accent-soft:  #B5C9B1;       /* the icon's pale mint */
  --accent-deep:  #2F4A37;
  --on-accent:    #F4F7EE;

  /* Tone colors — the app's light-mode set. Dark themes rotate the hues (see
     the dark-theme tone override below): a different tone→hue map keeps pinyin
     legible on a dark background. */
  --tone1: #D1545C;              /* tone 1 — coral-red */
  --tone2: #C2871F;              /* tone 2 — amber */
  --tone3: #2E8F80;              /* tone 3 — teal */
  --tone4: #5270B8;              /* tone 4 — slate-blue */
  --tone5: rgba(20,24,14,0.45);  /* tone 5 / neutral — warm gray */

  --shadow-card: 0 1px 0 rgba(20,24,14,.04), 0 12px 32px -16px rgba(20,24,14,.22);
  --shadow-phone: 0 2px 0 rgba(255,255,255,.4) inset, 0 30px 80px -28px rgba(20,24,14,.45), 0 8px 24px -12px rgba(20,24,14,.20);

  --serif: 'Newsreader', 'Iowan Old Style', 'Source Serif Pro', Georgia, serif;
  --sans:  'Geist', 'Söhne', ui-sans-serif, sans-serif;
  --mono:  'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --cn:    'Noto Serif SC', 'Source Han Serif SC', serif;
  --cn-sans: 'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', sans-serif;

  --maxw: 1200px;
}

/* ── Theme variants (data-theme on <html>) ────────────────── */

html[data-theme="ink"] {
  --bg: #F5F2E8; --surface:#FCFAF2; --surface-alt:#EBE6D6;
  --ink:#15140E; --ink-soft:rgba(21,20,14,.66); --ink-faint:rgba(21,20,14,.42);
  --ink-ghost:rgba(21,20,14,.16); --hair:rgba(21,20,14,.09); --hair-strong:rgba(21,20,14,.22);
  --accent:#13130F; --accent-soft:#C9C3AE; --accent-deep:#000; --on-accent:#FAF7EC;
}
html[data-theme="bagel"] {
  --bg:#F0EBDE; --surface:#FFFFFF; --surface-alt:#E8DCC0;
  --ink:#1F1A14; --ink-soft:rgba(31,26,20,.66); --ink-faint:rgba(31,26,20,.42);
  --ink-ghost:rgba(31,26,20,.18); --hair:rgba(31,26,20,.12); --hair-strong:rgba(31,26,20,.22);
  --accent:#C8881E; --accent-soft:#F1D896; --accent-deep:#5C3D08; --on-accent:#FFF9EC;
}
html[data-theme="sakura"] {
  --bg:#F4EAEE; --surface:#FFFFFF; --surface-alt:#EAD7DD;
  --ink:#221518; --ink-soft:rgba(34,21,24,.66); --ink-faint:rgba(34,21,24,.42);
  --ink-ghost:rgba(34,21,24,.16); --hair:rgba(34,21,24,.10); --hair-strong:rgba(34,21,24,.22);
  --accent:#CC6280; --accent-soft:#F0C5D3; --accent-deep:#5A1F32; --on-accent:#FFF1F4;
}
html[data-theme="mist"] {
  --bg:#E8EDF0; --surface:#FFFFFF; --surface-alt:#D8E1E8;
  --ink:#15191B; --ink-soft:rgba(21,25,27,.66); --ink-faint:rgba(21,25,27,.42);
  --ink-ghost:rgba(21,25,27,.16); --hair:rgba(21,25,27,.10); --hair-strong:rgba(21,25,27,.22);
  --accent:#4A6FA5; --accent-soft:#BACBE2; --accent-deep:#1F345B; --on-accent:#F1F5FB;
}

/* dark themes flip more */
html[data-theme="moon"] {
  --bg:#0F0F11; --surface:#161618; --surface-alt:#1D1D21;
  --ink:#E5E9EF; --ink-soft:rgba(229,233,239,.66); --ink-faint:rgba(229,233,239,.40);
  --ink-ghost:rgba(229,233,239,.16); --hair:rgba(229,233,239,.10); --hair-strong:rgba(229,233,239,.22);
  --accent:#8C99B8; --accent-soft:rgba(140,153,184,.18); --accent-deep:#E5E9EF; --on-accent:#0F0F11;
  --shadow-card: 0 1px 0 rgba(255,255,255,.04), 0 12px 32px -16px rgba(0,0,0,.6);
}
html[data-theme="space"] {
  --bg:#070414; --surface:#120A28; --surface-alt:#1A0F36;
  --ink:#EFEAFF; --ink-soft:rgba(239,234,255,.70); --ink-faint:rgba(239,234,255,.42);
  --ink-ghost:rgba(239,234,255,.18); --hair:rgba(239,234,255,.12); --hair-strong:rgba(239,234,255,.24);
  --accent:#9E72FF; --accent-soft:rgba(158,114,255,.22); --accent-deep:#EFEAFF; --on-accent:#070414;
  --shadow-card: 0 1px 0 rgba(255,255,255,.06), 0 12px 32px -16px rgba(0,0,0,.7);
}
html[data-theme="ktv"] {
  --bg:#10031A; --surface:#1B0628; --surface-alt:#290C3C;
  --ink:#F8EAF7; --ink-soft:rgba(248,234,247,.70); --ink-faint:rgba(248,234,247,.42);
  --ink-ghost:rgba(248,234,247,.20); --hair:rgba(248,234,247,.14); --hair-strong:rgba(248,234,247,.28);
  --accent:#FF338C; --accent-soft:rgba(255,51,140,.20); --accent-deep:#F8EAF7; --on-accent:#10031A;
}
html[data-theme="sunset"] {
  --bg:#150B0A; --surface:#21100E; --surface-alt:#2D1714;
  --ink:#FAE8C7; --ink-soft:rgba(250,232,199,.70); --ink-faint:rgba(250,232,199,.42);
  --ink-ghost:rgba(250,232,199,.18); --hair:rgba(250,232,199,.12); --hair-strong:rgba(250,232,199,.24);
  --accent:#F58042; --accent-soft:rgba(245,128,66,.20); --accent-deep:#FAE8C7; --on-accent:#150B0A;
}
html[data-theme="dusk"] {
  --bg:#150F19; --surface:#1F1726; --surface-alt:#2A1F35;
  --ink:#F0E5DE; --ink-soft:rgba(240,229,222,.70); --ink-faint:rgba(240,229,222,.42);
  --ink-ghost:rgba(240,229,222,.18); --hair:rgba(240,229,222,.12); --hair-strong:rgba(240,229,222,.24);
  --accent:#D89A7B; --accent-soft:rgba(216,154,123,.22); --accent-deep:#F0E5DE; --on-accent:#150F19;
}

/* Dark-theme tone palette — dark mode rotates the tone→hue map so pinyin stays
   legible on a dark background. Scoped to the recoloring Themes phone
   (.theme-app) only: the other feature phones are fixed light-mode screens and
   must keep the light tone set. */
html[data-theme="moon"]   .theme-app, html[data-theme="space"]  .theme-app,
html[data-theme="ktv"]    .theme-app, html[data-theme="sunset"] .theme-app,
html[data-theme="dusk"]   .theme-app {
  --tone1: #6BCC7D;              /* tone 1 — green */
  --tone2: #F7B345;              /* tone 2 — orange */
  --tone3: #F26359;              /* tone 3 — red */
  --tone4: #EDD157;              /* tone 4 — yellow */
  --tone5: #9EB8EB;              /* tone 5 / neutral — blue-gray */
}

/* Global tone helper classes — pinyin syllables carry .t1–.t5 and pick up the
   theme-resolved tone color. Component rules may still scope these; same value. */
.t1 { color: var(--tone1); }
.t2 { color: var(--tone2); }
.t3 { color: var(--tone3); }
.t4 { color: var(--tone4); }
.t5 { color: var(--tone5); }

/* ── Base ─────────────────────────────────────────────────── */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Keep anchor jumps from hiding section headings behind the sticky nav, and
   ease the scroll. Set on both elements since body's overflow-x can make it the
   scroller; the reduced-motion block neutralizes the smooth part. */
html, body {
  scroll-padding-top: 76px;
  scroll-behavior: smooth;
}
html { background: var(--bg); }
body {
  font-family: var(--sans);
  font-weight: 400;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
:lang(zh) { font-family: var(--cn); }

a { color: inherit; text-decoration: none; }
button { font: inherit; }
img { display: block; max-width: 100%; }
strong { font-weight: 600; }

/* Keyboard focus ring — shows for keyboard/AT users, stays clean on mouse click.
   The waitlist input keeps its own box-shadow ring via a more specific :focus. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 32px;
}

/* ── Buttons ──────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 14.5px;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  transition: transform .18s ease, background .18s, color .18s, border-color .18s;
  cursor: pointer;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--ink);
  color: var(--bg);
}
.btn-primary:hover { background: var(--accent-deep); }
.btn-ghost {
  border-color: var(--hair-strong);
  color: var(--ink);
}
.btn-ghost:hover { border-color: var(--ink); }
.btn-pill { padding: 9px 14px; font-size: 13.5px; }
.btn-lg   { padding: 16px 22px; font-size: 15.5px; }

.play-dot { font-size: 12px; opacity: .8; }
.muted { color: var(--ink-faint); font-weight: 400; }

/* ── Nav ──────────────────────────────────────────────────── */

.nav {
  position: sticky; top: 0; z-index: 50;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 14px 32px;
  background: color-mix(in oklab, var(--bg) 86%, transparent);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--hair);
}
.wordmark {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--ink);
}
.wordmark .mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  border-radius: 8px;
}
html[data-theme="moon"] .wordmark .mark,
html[data-theme="space"] .wordmark .mark,
html[data-theme="ktv"] .wordmark .mark,
html[data-theme="sunset"] .wordmark .mark,
html[data-theme="dusk"] .wordmark .mark { color: var(--ink); background: var(--accent-soft); }

/* Brand mark renders the app icon as a rounded badge */
.wordmark .mark img,
.foot-brand .mark img,
.cmp3-mark img,
.nf-mark img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}
.foot-brand .mark {
  display: inline-flex;
  width: 32px; height: 32px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

.wordmark-text {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.01em;
}
.nav-links {
  display: flex; gap: 28px;
  justify-self: center;
}
.nav-links a {
  font-size: 13.5px;
  color: var(--ink-soft);
  letter-spacing: -0.003em;
}
.nav-links a:hover { color: var(--ink); }
.nav-cta { background: var(--ink); color: var(--bg); }
.nav-cta:hover { background: var(--accent-deep); }

/* Mobile menu toggle — hidden until the links collapse (≤880px). */
.nav-burger {
  display: none;
  align-items: center; justify-content: center;
  width: 40px; height: 40px;
  padding: 0; margin: 0;
  background: none; border: 0; border-radius: 10px;
  color: var(--ink); cursor: pointer;
}
.nav-burger:hover { background: var(--surface-alt); }
.nav-burger svg { display: block; }
.nav-burger line {
  stroke: currentColor; stroke-width: 2; stroke-linecap: round;
  transform-box: fill-box; transform-origin: center;
  transition: transform .25s cubic-bezier(.2,.7,.2,1), opacity .2s;
}
.nav.is-open .nav-burger .nb-top { transform: translateY(5px) rotate(45deg); }
.nav.is-open .nav-burger .nb-mid { opacity: 0; }
.nav.is-open .nav-burger .nb-bot { transform: translateY(-5px) rotate(-45deg); }

/* Whole bar settles into place on load — wordmark leads, a gentle
   left → right cascade across the links, CTA lands last. */
.wordmark,
.nav-links a,
.nav-cta {
  animation: navItemIn .5s cubic-bezier(.2,.7,.2,1) backwards;
}
.wordmark               { animation-delay: 0s;   }
.nav-links a:nth-child(1) { animation-delay: .08s; }
.nav-links a:nth-child(2) { animation-delay: .14s; }
.nav-links a:nth-child(3) { animation-delay: .20s; }
.nav-links a:nth-child(4) { animation-delay: .26s; }
.nav-links a:nth-child(5) { animation-delay: .32s; }
.nav-links a:nth-child(6) { animation-delay: .38s; }
.nav-cta                { animation-delay: .44s; }
@keyframes navItemIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 880px) {
  /* wordmark | Get notified | burger — links move into a dropdown panel.
     Flex (not grid) here so the right cluster keeps its natural width. */
  .nav { display: flex; align-items: center; gap: 12px; }
  .wordmark { margin-right: auto; }
  .nav-cta { flex: none; }
  .nav-burger { display: inline-flex; flex: none; }

  .nav-links {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: absolute;
    top: 100%; left: 0; width: 100%;
    padding: 6px 20px 14px;
    background: var(--bg);
    border-bottom: 1px solid var(--hair);
    box-shadow: var(--shadow-card);
    /* closed state */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity .2s ease, transform .22s cubic-bezier(.2,.7,.2,1), visibility .2s;
  }
  .nav.is-open .nav-links {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .nav-links a {
    padding: 13px 6px;
    font-size: 15px;
    color: var(--ink);
    border-bottom: 1px solid var(--hair);
  }
  .nav-links a:last-child { border-bottom: none; }
}

/* ── Eyebrow / Kicker ─────────────────────────────────────── */

.eyebrow, .kicker {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: inline-flex; align-items: center; gap: 8px;
}
.eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 22%, transparent);
}

/* ── Section heads ────────────────────────────────────────── */

.section-head { max-width: 760px; margin-bottom: 56px; }
.section-head-wide { max-width: 880px; }
.section-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 4.6vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.018em;
  margin: 14px 0 0;
  color: var(--ink);
  text-wrap: balance;
}
.section-title em {
  font-style: italic;
  font-weight: 300;
  color: var(--accent);
}
.section-sub {
  margin-top: 18px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 60ch;
  text-wrap: pretty;
}

/* ─────────────────────────────────────────────────────────────
   HERO
   ───────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  padding: 64px 0 96px;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute; inset: -20% -10% auto auto;
  width: 60vw; height: 60vw; max-width: 760px; max-height: 760px;
  background: radial-gradient(closest-side, var(--accent-soft), transparent 70%);
  opacity: .55;
  filter: blur(20px);
  pointer-events: none;
  z-index: 0;
}
html[data-theme="moon"] .hero::before,
html[data-theme="space"] .hero::before,
html[data-theme="ktv"] .hero::before,
html[data-theme="sunset"] .hero::before,
html[data-theme="dusk"] .hero::before { opacity: .4; }

.hero-inner {
  position: relative; z-index: 1;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 72px;
  align-items: center;
  min-height: 70vh;
}

.hero-copy { max-width: 620px; }
.display {
  font-family: var(--serif);
  font-weight: 380;            /* variable-axis sweet spot */
  font-size: clamp(48px, 7.2vw, 104px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  margin: 18px 0 24px;
  color: var(--ink);
  text-wrap: balance;
}
.display em {
  font-style: italic;
  font-weight: 320;
  color: var(--accent);
}
.lede {
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 50ch;
  margin: 0 0 32px;
  text-wrap: pretty;
}

.cta-row {
  display: flex; gap: 12px; flex-wrap: wrap;
  align-items: center;
}
.cta-row-center { justify-content: center; }

/* ── Waitlist form ────────────────────────────────────────── */

.waitlist {
  max-width: 30rem;
  margin: 24px 0 0;
}
/* centered for the final CTA; the hero keeps the default left alignment */
.waitlist--center { margin-inline: auto; text-align: center; }
.waitlist--center .waitlist-row { justify-content: center; }
.waitlist-label {
  display: block;
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0 0 12px;
}
.waitlist-row {
  display: flex; gap: 8px;
  align-items: center;
  justify-content: flex-start;
}
.waitlist-input {
  flex: 1 1 auto; min-width: 0;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid var(--hair-strong);
  background: var(--surface);
  color: var(--ink);
  font: inherit; font-size: 14.5px;
  transition: border-color .18s, box-shadow .18s;
}
.waitlist-input::placeholder { color: var(--ink-faint); }
.waitlist-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.waitlist-row .btn { flex: 0 0 auto; }
/* off-screen honeypot */
.waitlist-hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  opacity: 0;
}
.waitlist-fine {
  font-size: 12.5px;
  color: var(--ink-faint);
  margin: 12px 0 0;
}
.waitlist-fine a { color: var(--ink-soft); text-decoration: underline; }

/* Inline confirmation that replaces the form after a successful signup. */
.waitlist-success {
  max-width: 30rem;
  margin: 24px 0 0;
  display: flex; gap: 11px; align-items: flex-start;
  padding: 14px 18px;
  border: 1px solid var(--hair-strong);
  border-radius: 16px;
  background: var(--surface);
  color: var(--ink);
  font-size: 14.5px; line-height: 1.5;
  text-align: left;
  animation: waitlistIn .4s cubic-bezier(.2,.7,.2,1);
}
.waitlist-success--center { margin-inline: auto; }
.waitlist-success:focus { outline: none; }
.waitlist-success svg { flex: 0 0 auto; margin-top: 1px; color: var(--accent); }
.waitlist-success-text { margin: 0; }
.waitlist-success-text strong { font-weight: 600; }
@keyframes waitlistIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Inline error shown under the field when a signup can't go through.
   Bare --tone1 is only ~3.6:1 on the page background; darken it toward the
   theme ink (lighter on dark themes) + bump weight so it clears AA contrast. */
.waitlist-error {
  margin: 10px 0 0;
  font-size: 13.5px;
  font-weight: 500;
  color: color-mix(in srgb, var(--tone1) 68%, var(--ink));
}

/* "coming soon" store note — text, not a button */
.cta-soon {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--ink-faint);
  margin: 18px 0 0;
}
.cta-soon svg { opacity: .6; }

@media (max-width: 480px) {
  .waitlist-row { flex-direction: column; align-items: stretch; }
  .waitlist-row .btn { justify-content: center; }
}

.hero-meta {
  list-style: none; padding: 0; margin: 56px 0 0;
  display: flex; gap: 0;
  border-top: 1px solid var(--hair);
  padding-top: 24px;
}
.hero-meta li {
  flex: 1;
  font-size: 13px;
  color: var(--ink-soft);
  border-right: 1px solid var(--hair);
  padding-right: 16px;
}
.hero-meta li:last-child { border-right: 0; }
.hero-meta strong {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 26px;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}

/* ── Hero stage / phones ──────────────────────────────────── */

.hero-stage {
  position: relative;
  height: 640px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.phone-hero {
  transform: rotate(-3deg);
  position: relative; z-index: 2;
}
.float-card {
  position: absolute;
  right: -8px;
  bottom: 30px;
  width: 260px;
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: 18px;
  padding: 18px 18px 14px;
  box-shadow: var(--shadow-card);
  z-index: 3;
  transform: rotate(4deg);
}
.fc-top {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 6px;
}
.fc-top .hanzi {
  font-family: var(--cn);
  font-weight: 500;
  font-size: 40px;
  line-height: 1;
  color: var(--ink);
}
.hsk-pill {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-deep);
}
html[data-theme="moon"] .hsk-pill,
html[data-theme="space"] .hsk-pill,
html[data-theme="ktv"] .hsk-pill,
html[data-theme="sunset"] .hsk-pill,
html[data-theme="dusk"] .hsk-pill { color: var(--ink); }

.pinyin { font-family: var(--serif); font-style: italic; font-size: 16px; margin: 4px 0 8px; }
.pinyin .t1 { color: var(--tone1); }
.pinyin .t2 { color: var(--tone2); }
.pinyin .t3 { color: var(--tone3); }
.pinyin .t4 { color: var(--tone4); }
.def { font-size: 14px; color: var(--ink-soft); margin-bottom: 12px; }
.fc-bar {
  display: flex; gap: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--hair);
  font-size: 12px;
}
.bar-cell { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); }
.bar-cell.muted { color: var(--ink-faint); }

/* ── Phone base ───────────────────────────────────────────── */

.phone {
  position: relative;
  width: 300px;
  height: 600px;
  background: #0A0A0B;
  border-radius: 42px;
  padding: 6px;
  box-shadow: var(--shadow-phone);
}
.phone-notch {
  position: absolute;
  top: 14px; left: 50%; transform: translateX(-50%);
  width: 90px; height: 24px;
  background: #000;
  border-radius: 14px;
  z-index: 3;
}
.phone-screen {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 36px;
  overflow: hidden;
  background: #0E0E0F;
  color: #fff;
}

.status-bar {
  position: absolute; top: 0; left: 0; right: 0;
  height: 44px;
  padding: 18px 28px 0;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; font-weight: 600;
  color: #fff;
  z-index: 4;
}
.status-bar.light { color: var(--ink); }
.status-right { display: inline-flex; align-items: center; gap: 6px; }

/* ── Camera screen ────────────────────────────────────────── */

.scr-camera {
  background: linear-gradient(180deg, #1F2218 0%, #2C2A1F 38%, #1A1C14 100%);
  display: flex; flex-direction: column;
}
.camera-view {
  position: relative; flex: 1;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
/* simulated paper of a page being scanned, subtle */
.camera-view::before {
  content: "";
  position: absolute; inset: 18%;
  background: linear-gradient(160deg, rgba(255,250,235,.06), rgba(255,250,235,.02));
  border-radius: 4px;
}

.scanned-text {
  position: relative; z-index: 1;
  font-family: var(--cn-sans);
  color: #FAF5E5;
  font-size: 22px;
  letter-spacing: 0.04em;
  line-height: 1.8;
  text-align: left;
  padding: 0 28px;
}
.scanned-text .line { white-space: nowrap; }
.scanned-text .word {
  display: inline-block;
  padding: 1px 3px;
  border-radius: 3px;
  position: relative;
}
.scanned-text .word.detected {
  background: rgba(90, 138, 107, 0.32);
  outline: 1px solid rgba(181, 201, 177, 0.5);
}
.scanned-text .word.boxed {
  outline: 1.5px solid #B5C9B1;
  background: rgba(90, 138, 107, 0.45);
  box-shadow: 0 0 0 3px rgba(181, 201, 177, 0.18);
}
.scanned-text .punct { color: rgba(250, 245, 229, 0.45); }

.scan-bracket {
  position: absolute; inset: 12% 8%;
  pointer-events: none;
  z-index: 2;
}
.scan-bracket .brk {
  position: absolute; width: 22px; height: 22px;
  border: 2px solid var(--accent-soft);
}
.scan-bracket .tl { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.scan-bracket .tr { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.scan-bracket .bl { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.scan-bracket .br { bottom: 0; right: 0; border-left: 0; border-top: 0; }

.chip-detect {
  position: absolute;
  top: 70px; left: 50%; transform: translateX(-50%);
  z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  padding: 6px 12px;
  background: rgba(255,255,255,.08);
  color: #FAF5E5;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  backdrop-filter: blur(8px);
}
.chip-pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent-soft);
  box-shadow: 0 0 0 4px rgba(181, 201, 177, 0.25);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(.7); opacity: .6; }
}

.camera-bar {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 32px 26px;
  color: rgba(255,255,255,.9);
}
.cam-icon { opacity: .85; }
.shutter {
  width: 58px; height: 58px;
  border: 2px solid rgba(255,255,255,.95);
  border-radius: 50%;
  padding: 4px;
  display: flex; align-items: center; justify-content: center;
}
.shutter-inner {
  width: 100%; height: 100%;
  border-radius: 50%;
  background: #fff;
}

/* ─────────────────────────────────────────────────────────────
   STRIP / Marquee
   ───────────────────────────────────────────────────────────── */

.strip {
  background: var(--ink);
  color: var(--bg);
  padding: 22px 0;
  overflow: hidden;
}
.strip-track {
  display: flex;
  gap: 28px;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  animation: marquee 38s linear infinite;
}
.strip-track .bullet { opacity: .4; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.scroll-hint {
  position: absolute; left: 32px; bottom: 24px;
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-faint);
}
.scroll-hint .line-thin {
  width: 60px; height: 1px;
  background: var(--ink-faint);
  position: relative; overflow: hidden;
}
.scroll-hint .line-thin::after {
  content: ""; position: absolute; inset: 0;
  background: var(--ink);
  transform: translateX(-100%);
  animation: scrollline 2.6s ease-in-out infinite;
}
@keyframes scrollline {
  0%   { transform: translateX(-100%); }
  60%  { transform: translateX(0); }
  100% { transform: translateX(100%); }
}

/* ─────────────────────────────────────────────────────────────
   FILM
   ───────────────────────────────────────────────────────────── */

.film { padding: 120px 0; }
.video-frame {
  position: relative;
  aspect-ratio: 16/9;
  background: var(--ink);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--shadow-card);
}
.video-still {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 70% 30%, color-mix(in oklab, var(--accent) 35%, transparent), transparent 60%),
    linear-gradient(135deg, #0F1208 0%, #1A1F12 60%, #232818 100%);
  color: #F5F0DD;
}
.still-grid {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  padding: 56px 64px;
  gap: 48px;
}
.cn-vert {
  writing-mode: vertical-rl;
  font-family: var(--cn);
  font-size: clamp(40px, 6.5vw, 90px);
  font-weight: 300;
  letter-spacing: 0.15em;
  color: rgba(245, 240, 221, 0.92);
  line-height: 1.15;
}
.still-headline {
  align-self: end;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(28px, 3.8vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #F5F0DD;
  text-wrap: balance;
}
.play-btn {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 22px 14px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(12px);
  color: #F5F0DD;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s;
}
.play-btn:hover { background: rgba(255,255,255,.16); }
.video-cap {
  position: absolute; left: 24px; right: 24px; bottom: 18px;
  display: flex; gap: 16px; align-items: center;
  font-family: var(--mono); font-size: 11px;
  color: rgba(245, 240, 221, 0.7);
}
.cap-spacer { flex: 1; height: 1px; background: rgba(245,240,221,.18); }

.film-caption {
  margin-top: 16px;
  font-size: 13px;
  color: var(--ink-faint);
  font-style: italic;
  font-family: var(--serif);
  max-width: 60ch;
}

/* ─────────────────────────────────────────────────────────────
   HOW IT WORKS
   ───────────────────────────────────────────────────────────── */

.how { padding: 120px 0; border-top: 1px solid var(--hair); }
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.step {
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: 20px;
  padding: 28px 28px 32px;
  display: flex; flex-direction: column; align-items: flex-start;
  min-height: 480px;
  position: relative;
}
.step-num {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--accent);
}
.step-mini {
  margin: 18px 0 24px;
  align-self: center;
}
.step h3 {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}
.step p {
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0;
  max-width: 36ch;
}

/* Mini phone */
.phone-mini {
  width: 180px;
  height: 320px;
  border-radius: 28px;
  padding: 4px;
}
.phone-mini .phone-notch { width: 60px; height: 16px; top: 8px; }
.phone-mini .phone-screen { border-radius: 24px; }

.scr-mini-cam {
  background: linear-gradient(180deg, #1F2218, #2C2A1F);
  display: flex; align-items: center; justify-content: center;
  padding: 32px 18px;
}
.mini-cam-text {
  font-family: var(--cn-sans);
  font-size: 17px;
  line-height: 2;
  color: #F4F0DD;
  text-align: center;
}
.mini-cam-text .mw { display: inline-block; margin: 0 2px; }
.mini-cam-text .mw.boxed {
  outline: 1.5px solid #B5C9B1;
  background: rgba(90,138,107,.4);
  padding: 1px 4px;
  border-radius: 3px;
}
.mini-bracket {
  position: absolute; inset: 30% 18%;
  border: 1.5px solid var(--accent-soft);
  pointer-events: none;
}
.mini-bracket::before, .mini-bracket::after {
  content: "";
  position: absolute;
  background: var(--accent-soft);
}

.scr-mini-tap {
  background: #F8F5EB;
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  padding: 24px 16px;
}
.mini-card {
  background: #fff;
  border-radius: 14px;
  padding: 18px;
  width: 100%;
  border: 1px solid rgba(20,24,14,.08);
  box-shadow: 0 4px 14px -8px rgba(20,24,14,.2);
}
.mc-hanzi { font-family: var(--cn); font-size: 32px; font-weight: 500; line-height: 1; color: #14180E; }
.mc-pinyin { font-family: var(--serif); font-style: italic; font-size: 14px; margin: 8px 0 6px; }
.mc-pinyin .t3 { color: #4E8A5E; }
.mc-def { font-size: 12px; color: rgba(20,24,14,.62); }

.scr-mini-save {
  background: #F8F5EB;
  color: var(--ink);
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
  padding: 28px 18px;
}
.mini-row {
  display: flex; align-items: baseline; gap: 12px;
  padding: 10px 12px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid rgba(20,24,14,.06);
}
.mini-row .mr-h { font-family: var(--cn); font-size: 18px; color: #14180E; font-weight: 500; }
.mini-row .mr-p { font-family: var(--serif); font-style: italic; font-size: 12px; color: rgba(20,24,14,.55); flex: 1; }
.mini-row .mr-tick { color: #5A8A6B; font-weight: 600; font-size: 13px; }
.mini-row-active {
  background: #E7EFE2;
  border-color: rgba(90,138,107,.4);
  animation: tickIn .8s ease-out;
}
@keyframes tickIn {
  from { transform: scale(.97); }
  to   { transform: scale(1); }
}

/* ─────────────────────────────────────────────────────────────
   FEATURES
   ───────────────────────────────────────────────────────────── */

.features { padding: 120px 0; border-top: 1px solid var(--hair); }
.feat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(220px, auto);
  gap: 20px;
}
.feat {
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: 18px;
  padding: 28px;
  display: flex; flex-direction: column;
  position: relative;
  transition: transform .25s ease, border-color .25s;
}
.feat:hover {
  border-color: var(--hair-strong);
}
.feat-tall {
  grid-row: span 2;
  background: var(--ink);
  color: var(--bg);
  border-color: transparent;
}
.feat-tall .feat-glyph { color: var(--accent-soft); }

.feat-glyph {
  font-family: var(--cn);
  font-size: 56px;
  line-height: 1;
  color: var(--accent);
  margin-bottom: auto;
  align-self: flex-start;
  font-weight: 300;
}
.feat h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.01em;
  margin: 24px 0 8px;
}
.feat p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}
.feat em { font-style: italic; }
.feat.feat-tall h3 { color: var(--bg); }
.feat.feat-tall p  { color: color-mix(in oklab, var(--bg) 72%, transparent); }

/* ─────────────────────────────────────────────────────────────
   NOTEBOOK
   ───────────────────────────────────────────────────────────── */

.notebook {
  padding: 120px 0;
  border-top: 1px solid var(--hair);
  background: linear-gradient(180deg, var(--bg) 0%, color-mix(in oklab, var(--bg) 92%, var(--accent-soft)) 100%);
}
.nb-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.nb-copy .section-title { margin-top: 14px; }
.nb-bullets {
  list-style: none; padding: 0; margin: 28px 0 0;
  display: flex; flex-direction: column; gap: 10px;
}
.nb-bullets li {
  font-size: 15px;
  color: var(--ink-soft);
  padding-left: 0;
}
.nb-bullets .b-mark { color: var(--accent); margin-right: 8px; font-weight: 700; }

.nb-stage {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  gap: 18px;
}
.phone-notebook { transform: rotate(2deg); }
.scr-notebook {
  background: #F8F5EB;
  color: var(--ink);
  padding: 56px 0 0;
}
.nb-header { padding: 8px 20px 12px; }
.nb-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 26px;
  letter-spacing: -0.01em;
  line-height: 1;
  color: #14180E;
}
.nb-sub {
  font-size: 11px;
  color: rgba(20,24,14,.55);
  margin-top: 4px;
  font-family: var(--mono);
}
.nb-tabs {
  display: flex; gap: 6px;
  padding: 0 20px 12px;
  border-bottom: 1px solid rgba(20,24,14,.08);
}
.nb-tab {
  font-size: 11.5px;
  padding: 5px 10px;
  border-radius: 999px;
  color: rgba(20,24,14,.55);
}
.nb-tab-on { background: #14180E; color: #F1ECDD; }

.nb-list {
  padding: 8px 12px 12px;
  display: flex; flex-direction: column; gap: 2px;
}
.nb-item {
  display: grid;
  grid-template-columns: 50px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 8px;
  border-radius: 8px;
}
.nb-item:hover { background: rgba(20,24,14,.03); }
.nb-hanzi {
  font-family: var(--cn);
  font-weight: 500;
  font-size: 22px;
  color: #14180E;
}
.nb-hanzi-sm {
  font-family: var(--cn);
  font-weight: 500;
  font-size: 14px;
  color: #14180E;
}
.nb-py {
  font-family: var(--serif);
  font-style: italic;
  font-size: 12px;
}
.nb-py .t1 { color: var(--tone1); }
.nb-py .t2 { color: var(--tone2); }
.nb-py .t3 { color: var(--tone3); }
.nb-py .t4 { color: var(--tone4); }
.nb-def { font-size: 11.5px; color: rgba(20,24,14,.62); margin-top: 1px; }
.nb-def-sm { font-size: 10.5px; color: rgba(20,24,14,.55); }
.nb-tag {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  padding: 3px 7px;
  border-radius: 4px;
  background: rgba(90,138,107,.15);
  color: #2F4A37;
}
.nb-tag-alt { background: rgba(200,72,64,.12); color: #8A2E29; }

.nb-item-note { padding: 8px; }
.nb-item-note > .nb-meta { grid-column: 1 / span 2; padding-left: 4px; }

.phone-tabbar {
  position: absolute; bottom: 0; left: 0; right: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 8px 0 22px;
  border-top: 1px solid rgba(20,24,14,.08);
  background: rgba(248,245,235,.92);
  backdrop-filter: blur(12px);
}
.tb-item {
  text-align: center;
  font-size: 9px;
  color: rgba(20,24,14,.45);
  display: flex; flex-direction: column; gap: 2px;
}
.tb-glyph { font-size: 16px; line-height: 1; }
.tb-item-on { color: #14180E; }

.nb-shelf {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 16px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: var(--surface);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}
.shelf-tag::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 8px;
  vertical-align: middle;
  animation: pulse 2.4s ease-in-out infinite;
}
.shelf-icons { display: inline-flex; gap: 6px; }
.shelf-dot { color: var(--ink-ghost); }

/* ─────────────────────────────────────────────────────────────
   THEMES
   ───────────────────────────────────────────────────────────── */

.themes { padding: 120px 0; border-top: 1px solid var(--hair); }
.theme-rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 14px;
  margin-top: 32px;
}
.theme-card {
  display: flex; flex-direction: column; gap: 12px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  transition: transform .2s, border-color .2s;
}
.theme-card:hover { transform: translateY(-2px); }
.theme-card.is-active { border-color: var(--ink); }
.tc-swatch {
  aspect-ratio: 1;
  border-radius: 8px;
  background:
    linear-gradient(135deg, var(--a) 0%, var(--a) 36%, var(--b) 36%, var(--b) 100%);
  position: relative;
  border: 1px solid var(--hair);
  overflow: hidden;
}
.tc-swatch::after {
  content: "文";
  position: absolute;
  right: 12%; bottom: 8%;
  font-family: var(--cn);
  font-size: 28px;
  font-weight: 500;
  color: var(--c);
}
.tc-name {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 400;
}

.theme-quote {
  margin-top: 64px;
  padding: 32px 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  max-width: 720px;
  border-top: 1px solid var(--hair);
  position: relative;
}
.theme-quote .tq-mark {
  position: absolute;
  left: -16px; top: 18px;
  font-size: 64px;
  font-weight: 300;
  color: var(--accent);
  line-height: 1;
}
.theme-quote .tq-attr {
  display: block;
  margin-top: 14px;
  font-family: var(--mono);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ─────────────────────────────────────────────────────────────
   PRIVACY
   ───────────────────────────────────────────────────────────── */

.privacy { padding: 120px 0; border-top: 1px solid var(--hair); }
.privacy-grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 64px;
  align-items: start;
}
.priv-mark { color: var(--accent); }
.priv-points {
  list-style: none; padding: 0; margin: 32px 0 0;
  display: grid; gap: 16px;
  font-size: 15px;
  color: var(--ink-soft);
}
.priv-points li strong { color: var(--ink); font-weight: 500; }
.priv-points li {
  padding-left: 18px;
  position: relative;
}
.priv-points li::before {
  content: "";
  position: absolute; left: 0; top: 10px;
  width: 8px; height: 1px;
  background: var(--accent);
}

/* ─────────────────────────────────────────────────────────────
   FAQ
   ───────────────────────────────────────────────────────────── */

.faq { padding: 120px 0; border-top: 1px solid var(--hair); }
.faq-list {
  border-top: 1px solid var(--hair);
  margin-top: 24px;
}
.faq-list details {
  border-bottom: 1px solid var(--hair);
  padding: 24px 0;
}
.faq-list summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--serif);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-mark {
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 300;
  color: var(--accent);
  transition: transform .2s;
}
.faq-list details[open] .faq-mark { transform: rotate(45deg); }
.faq-list details p {
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 70ch;
}

/* ─────────────────────────────────────────────────────────────
   CTA + FOOTER
   ───────────────────────────────────────────────────────────── */

.cta {
  padding: 140px 0 120px;
  border-top: 1px solid var(--hair);
  text-align: center;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, color-mix(in oklab, var(--accent) 22%, transparent), transparent 70%),
    var(--bg);
}
.cta-inner { position: relative; z-index: 1; }
.cta-mark {
  font-family: var(--cn);
  font-size: clamp(120px, 18vw, 220px);
  line-height: 1;
  font-weight: 300;
  color: var(--accent);
  opacity: .26;
  margin: 0 0 -40px;
  letter-spacing: 0;
}
.cta-title {
  font-family: var(--serif);
  font-weight: 380;
  font-size: clamp(48px, 7vw, 96px);
  line-height: 1;
  letter-spacing: -0.025em;
  margin: 0 0 18px;
}
.cta-sub {
  font-size: 18px;
  color: var(--ink-soft);
  max-width: 50ch;
  margin: 0 auto 36px;
  text-wrap: pretty;
}

.footer {
  border-top: 1px solid var(--hair);
  padding: 64px 0 36px;
  background: var(--bg);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 2fr;
  gap: 56px;
  align-items: start;
}
.foot-brand { display: flex; gap: 14px; align-items: center; }
.foot-name { font-family: var(--serif); font-weight: 500; font-size: 18px; }
.foot-sub  { font-size: 13px; color: var(--ink-faint); margin-top: 2px; }

.foot-cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.foot-col {
  display: flex; flex-direction: column; gap: 10px;
}
.foot-h {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 6px;
}
.foot-col a {
  font-size: 14px;
  color: var(--ink-soft);
}
.foot-col a:hover { color: var(--ink); }

.foot-fine {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--hair);
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}

/* ─────────────────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────────────────── */

@media (max-width: 980px) {
  .hero-inner { grid-template-columns: 1fr; gap: 48px; min-height: auto; }
  .hero-stage { height: 540px; }
  .steps, .feat-grid { grid-template-columns: 1fr 1fr; }
  .feat-tall { grid-row: span 1; }
  .nb-grid, .privacy-grid { grid-template-columns: 1fr; gap: 40px; }
  .priv-mark svg { width: 80px; height: 80px; }
  .footer-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .container { padding: 0 20px; }
  /* tighten the bar so wordmark + Get notified + burger fit small phones */
  .nav { padding: 12px 16px; gap: 10px; }
  .nav-cta { padding: 8px 11px; font-size: 12.5px; }
  .wordmark-text { font-size: 20px; }
  .steps, .feat-grid, .foot-cols { grid-template-columns: 1fr; }
  .hero { padding: 32px 0 64px; }
  .hero-meta { flex-wrap: wrap; gap: 16px; }
  .hero-meta li { flex: 0 0 calc(50% - 8px); border-right: 0; }
  .film, .how, .features, .notebook, .themes, .privacy, .faq, .cta { padding: 72px 0; }
  .float-card { right: -20px; bottom: -20px; transform: rotate(4deg) scale(.85); }
  .still-grid { grid-template-columns: 1fr; padding: 32px; }
  .cn-vert { writing-mode: horizontal-tb; }
  .foot-fine { flex-direction: column; gap: 8px; }
}