/* Typeferry site styles. Design pass with unslop (github.com/heydamir/unslop, CC BY 4.0, by Damir Sokolovsky @heydamir).
   Light palette on :root; dark palette under prefers-color-scheme (unless data-theme="light") and under data-theme="dark". */
:root{
  /* graphite ramp, light */
  --bg:#fafafa; --card:#ffffff; --raised:#f4f4f5; --stage:#f0f0f2;
  --ink:#171717; --ink-2:#525252; --mute:#737373;
  --line:rgba(23,23,23,.08); --line-2:rgba(23,23,23,.14);
  --accent:#0a6cff; --accent-text:#0a5bd6;
  --btn:#171717; --btn-ink:#ffffff; --btn-2:#ffffff;
  --key-top:#ffffff; --key-bot:#f3f3f4; --key-edge:rgba(23,23,23,.2); --key-ink:#2a2a2e;
  --shadow-float:0 8px 24px rgba(0,0,0,.06);
  /* the real app, light appearance */
  --win:#ffffff; --win-bar:#f5f5f6; --bubble-me:#0a6cff; --bubble-me-ink:#fff; --bubble-them:#ededf0; --field:#f3f3f5; --faint:#8b8b91;
  --bar:#ffffff; --bar-ink:#272727; --bar-mute:#808080; --bar-shadow:0 12px 32px -10px rgba(0,0,0,.25),0 0 0 .5px rgba(0,0,0,.14); --live:#28c840;
  --bar-ph:rgba(0,0,0,.28); --bar-warn:#9a6700; /* 打字框占位字（系统占位字那档灰）；回译和原文对不上时整行的颜色（产品 BackLine：浅色琥珀 #b87800、深色黄；网页浅色压深到 #9a6700，白底 4.9:1 过 AA，审查 11-06 第二轮 2） */
  --win-shadow:0 20px 48px -24px rgba(0,0,0,.3),0 0 0 .5px rgba(0,0,0,.12);
  --sel:rgba(10,108,255,.18);
  /* 草稿标记（琥珀色虚线框），上线前随草稿一起删 */
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue","Segoe UI",Roboto,Arial,"PingFang SC","Hiragino Sans GB",sans-serif;
  --display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue","Segoe UI",Roboto,Arial,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#141415; --card:#19191b; --raised:#19191b; --stage:#0f0f10;
    --ink:#ededed; --ink-2:#a1a1a6; --mute:#85858b;
    --line:rgba(237,237,237,.08); --line-2:rgba(237,237,237,.14);
    --accent:#3b8cff; --accent-text:#5c9dff;
    --btn:#ededed; --btn-ink:#141415; --btn-2:#232325;
    --key-top:#2c2c2f; --key-bot:#232325; --key-edge:rgba(0,0,0,.7); --key-ink:#e6e6ea;
    --shadow-float:0 0 0 .5px rgba(237,237,237,.08);
    --win:#1e1e1e; --win-bar:#262628; --bubble-them:#2e2e31; --field:#2a2a2d; --faint:#85858c;
    --bar:#1e1e1e; --bar-ink:#dddddd; --bar-mute:#9a9a9a; --bar-shadow:0 18px 44px -12px rgba(0,0,0,.7),0 0 0 .5px rgba(255,255,255,.12); --live:#30d158; --bar-ph:rgba(255,255,255,.28); --bar-warn:#ffd60a;
    --win-shadow:0 0 0 .5px rgba(255,255,255,.1);
    --sel:rgba(59,140,255,.32);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#141415; --card:#19191b; --raised:#19191b; --stage:#0f0f10;
  --ink:#ededed; --ink-2:#a1a1a6; --mute:#85858b;
  --line:rgba(237,237,237,.08); --line-2:rgba(237,237,237,.14);
  --accent:#3b8cff; --accent-text:#5c9dff;
  --btn:#ededed; --btn-ink:#141415; --btn-2:#232325;
  --key-top:#2c2c2f; --key-bot:#232325; --key-edge:rgba(0,0,0,.7); --key-ink:#e6e6ea;
  --shadow-float:0 0 0 .5px rgba(237,237,237,.08);
  --win:#1e1e1e; --win-bar:#262628; --bubble-them:#2e2e31; --field:#2a2a2d; --faint:#85858c;
  --bar:#1e1e1e; --bar-ink:#dddddd; --bar-mute:#9a9a9a; --bar-shadow:0 18px 44px -12px rgba(0,0,0,.7),0 0 0 .5px rgba(255,255,255,.12); --live:#30d158; --bar-ph:rgba(255,255,255,.28); --bar-warn:#ffd60a;
  --win-shadow:0 0 0 .5px rgba(255,255,255,.1);
  --sel:rgba(59,140,255,.32);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.5 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
::selection{background:var(--sel)}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:6px}
img{max-width:100%;display:block}
.wrap{width:100%;max-width:1232px;margin:0 auto;padding-inline:32px}
.skip{position:absolute;inset-inline-start:-999px;top:8px}
.skip:focus{inset-inline-start:12px;z-index:50;background:var(--bg);padding:8px 12px}

/* nav: logo, links, appearance, one button */
.nav{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:32px;height:64px}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;font:500 17px/1 var(--display)}
.brand img{width:28px;height:28px;border-radius:8px}
.links{display:flex;gap:24px;margin-inline-start:auto;font-size:14px}
.links a{text-decoration:none;color:var(--ink-2);transition:color .16s var(--ease)}
.links a:hover{color:var(--ink)}
.seg{display:inline-flex;gap:2px;padding:2px;border-radius:8px;background:var(--raised);box-shadow:inset 0 0 0 1px var(--line)}
.seg button{all:unset;cursor:pointer;width:28px;height:24px;display:grid;place-items:center;border-radius:6px;color:var(--mute);transition:color .16s var(--ease),background-color .16s var(--ease)}
.seg button svg{width:16px;height:16px}
.seg button[aria-pressed="true"]{background:var(--card);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08),inset 0 0 0 1px var(--line)}
.seg button:hover{color:var(--ink)}
.seg button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.nav-dl{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 16px;border-radius:8px;background:var(--btn);color:var(--btn-ink);font-size:13px;font-weight:500;text-decoration:none;white-space:nowrap;transition:opacity .16s var(--ease)}
.nav-dl:hover{opacity:.86}
.nav-dl small{font-size:13px;font-weight:400;opacity:.6}

/* keycaps: the signature's companion, only where a shortcut is named */
.key{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:6px;font:500 13px/1 var(--sans);color:var(--key-ink);background:linear-gradient(var(--key-top),var(--key-bot));box-shadow:0 1px 0 var(--key-edge),0 1px 3px rgba(0,0,0,.08);transition:transform .14s var(--ease),box-shadow .14s var(--ease)}
.key svg{width:14px;height:14px}
.keys{display:inline-flex;gap:4px}
/* a key going down: it sinks onto its edge (Three moves, on hover and as it scrolls in) */
.key.down,.move .keys:active .key{transform:translateY(1.5px);box-shadow:0 0 0 var(--key-edge),0 0 1px rgba(0,0,0,.12)}
@media (hover:hover){.move .keys:hover .key{transform:translateY(1.5px);box-shadow:0 0 0 var(--key-edge),0 0 1px rgba(0,0,0,.12)}}

/* hero: text on calm space, the product view below it, running past the fold */
.hero{padding-top:64px} /* 11-06 官网③从 88 收到 64：Safari 在 1440×900 的笔记本上第一屏露出整条输入条 */
.hero-row{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:64px;align-items:start;margin-top:32px}
h1{margin:0;font:500 clamp(2.5rem,1.25rem + 3.5vw,4.5rem)/1.04 var(--display);letter-spacing:-.03em;text-wrap:balance}
h1 .l1,h1 .l2{display:block}
h1 .l2{color:var(--mute)}
.sc{visibility:hidden}.sc.on{visibility:visible}
.blink{display:inline-block;width:.06em;height:.8em;margin-inline-start:.06em;background:var(--accent);vertical-align:-.04em;border-radius:1px;animation:blink 1.06s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.lede{margin:0;font-size:18px;line-height:28px;color:var(--ink-2);max-width:36rem}
.fills{margin:12px 0 0;font-size:18px;line-height:28px;font-weight:500;color:var(--ink)}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
.btn{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 16px;border-radius:10px;font:500 14px/1 var(--sans);text-decoration:none;cursor:default;white-space:nowrap}
.btn svg{width:16px;height:16px;flex:none}
.btn small{font-size:13px;font-weight:400;opacity:.6;margin-inline-start:4px}
.btn-1{background:var(--btn);color:var(--btn-ink)}
.btn-2{background:var(--btn-2);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)}
.fine{margin:16px 0 0;font-size:13px;line-height:20px;color:var(--mute)}

/* the product view on the home page: the frame and backdrop of the first-screen film (its scenes are in hero.css, .hx-*) */
.stage{position:relative;margin-left:0;margin-right:0;margin-top:48px;height:440px;border-radius:20px;overflow:hidden;background:var(--stage);box-shadow:inset 0 0 0 1px var(--line);font-size:15px}
.win-bar{display:flex;align-items:center;height:40px;padding:0 16px;background:var(--win-bar);box-shadow:0 1px 0 var(--line);font-size:13px;color:var(--mute);position:relative}
.dots{display:flex;gap:8px}.dots i{width:12px;height:12px;border-radius:50%;background:#ff5f57}.dots i:nth-child(2){background:#febc2e}.dots i:nth-child(3){background:#28c840}
.win-bar span{position:absolute;left:0;right:0;text-align:center;pointer-events:none}
.msg{max-width:64%;padding:8px 12px;border-radius:16px;line-height:1.36}
.msg small{display:block;font-size:11px;opacity:.82;margin-top:2px}
.me{align-self:flex-end;background:var(--bubble-me);color:var(--bubble-me-ink)}
.them{align-self:flex-start;background:var(--bubble-them)}
/* Typeferry 的输入条，照产品现在的样子（mac InputBar.swift 的 BarLook 和两层 twoLayer；离屏图 样品/界面离屏图-1106/）：
   不透明底、跟系统深浅色（浅色白、深色 #1e1e1e），带窗口阴影；圆角 6、左右 8、上下 5、行距 3，
   字号 打字和译文 13、箭头 12、Means 11（标签中粗）。这里按主行 = 1.3em 折成 em，.bar 的字号只管整体大小。 */
.bar{font-size:15px;display:inline-block;min-width:19em;max-width:100%;padding:.5em .8em;border-radius:.6em;background:var(--bar);box-shadow:var(--bar-shadow);color:var(--bar-ink)}
.bar-in,.bar-tr{margin:0;font-size:1.3em;line-height:1.25;min-height:1.25em;white-space:nowrap}
.bar-in .ph{color:var(--bar-ph)}
.bar-in .c{display:inline-block;width:2px;height:1.08em;background:var(--accent);vertical-align:-.16em;margin:0 1px;border-radius:1px;animation:blink 1.06s steps(1) infinite}
.bar-tr{margin-top:.23em;display:flex;align-items:baseline;gap:.31em}
.bar-tr .arw{font-size:.923em;color:var(--bar-mute)}
.bar-bt{margin:.3em 0 0;font-size:1.1em;line-height:1.25;color:var(--bar-mute);white-space:nowrap;transition:opacity .4s var(--ease)}
.bar-bt b{font-weight:500}
.bar-bt.warn{color:var(--bar-warn)}
/* an animated bar ([data-bar], home page): the translation and Means rows come in once it has them */
.bar[data-bar] [data-tr]{opacity:0;transform:translateY(3px);transition:opacity .45s var(--ease),transform .5s var(--ease)}
.bar[data-bar].has-tr [data-tr]{opacity:1;transform:none}
.bt-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.bt-wrap > div{min-height:0;overflow:hidden}
.bt-wrap .bar-bt{opacity:0;transition:opacity .45s var(--ease) .1s}
.bar.has-bt .bt-wrap{grid-template-rows:1fr}
.bar.has-bt .bt-wrap .bar-bt{opacity:1}

/* 第一屏下方一排短卖点（11-06 晚文案改版）：标题 + 一句，桌面三列、窄屏一列 */
.perks{list-style:none;margin:64px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:32px;border-top:1px solid var(--line)}
.perks li{padding-top:24px}
.perks .p{max-width:36ch}

/* sections */
.sec{padding-block:128px}
h2{margin:0;font:500 clamp(2rem,1.2rem + 2.2vw,3rem)/1.08 var(--display);letter-spacing:-.025em;text-wrap:balance}
h2 .m{color:var(--mute)}
h3{margin:0;font:500 18px/24px var(--display)}
.p{color:var(--ink-2);max-width:40ch;margin:8px 0 0;text-wrap:pretty}
.ruled{box-shadow:inset 0 1px 0 var(--line)}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}
.sec-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:16px 32px}
.sec-head .tl{font-size:15px}
.more{margin:24px 0 0;font-size:15px}
/* 文字链接：只加下划线，不上色 */
.tl{white-space:nowrap;color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--line-2);text-underline-offset:4px;transition:text-decoration-color .16s var(--ease)}
.tl:hover{text-decoration-color:currentColor}

/* 草稿标记：琥珀色虚线框，上线前和草稿内容一起删 */
/* check the meaning: a bar whose Means line gives a wrong number away. The faint mark on 14 and 4 is ours, not the app's. */
.catch{margin:0}
.catch-scene{border-radius:16px;background:var(--raised);padding:24px;display:flex;flex-direction:column;gap:12px;align-items:flex-start;box-shadow:inset 0 0 0 1px var(--line)}
.catch .bar{font-size:15px}
.catch .bt-wrap{grid-template-rows:1fr} /* the Means row keeps its room, so nothing below moves when it fades in */
.catch mark{background:none;color:inherit;border-radius:2px;box-shadow:inset 0 -.4em 0 transparent;transition:box-shadow .6s var(--ease)}
.catch.hl-on mark{box-shadow:inset 0 -.4em 0 var(--sel)}
.catch figcaption{margin-top:16px;font-size:15px;line-height:24px;color:var(--ink-2);max-width:52ch;text-wrap:pretty}

/* three moves, kept asymmetric */
.moves{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:32px;row-gap:64px;margin-top:64px}
.move{display:flex;flex-direction:column;gap:24px;min-width:0}
.move .cap{display:flex;gap:16px;align-items:flex-start}
.move .cap .keys{flex:none;margin-top:0}
.move .scene{border-radius:16px;background:var(--raised);padding:24px;display:flex;flex-direction:column;gap:12px;align-items:flex-start;box-shadow:inset 0 0 0 1px var(--line)}
.move .bar{position:static;font-size:13px}
.chatbox{width:100%;max-width:400px;font-size:14px;height:36px;border-radius:18px;background:var(--win);box-shadow:inset 0 0 0 1px var(--line-2);display:flex;align-items:center;padding:0 16px;color:var(--faint)}
.chatbox.filled{color:var(--ink)}
.chatbox .caret-sm{display:inline-block;width:1.5px;height:16px;background:var(--accent);margin:0 1px}
.m1{grid-column:1 / span 5;grid-row:1}
.m2{grid-column:7 / span 6;grid-row:1 / span 2;align-self:center}
.m2 .bar{font-size:15px}
.m3{grid-column:2 / span 5;grid-row:2}

/* frame it */
.frame{background:var(--raised);box-shadow:inset 0 1px 0 var(--line),inset 0 -1px 0 var(--line)}
.frame-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:center}
.peekbtn{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:12px;margin-top:32px;font-size:14px;color:var(--ink-2);-webkit-user-select:none;user-select:none}
.peekbtn .key{min-width:32px;height:32px;font-size:15px;transition:transform .12s var(--ease),box-shadow .12s var(--ease)}
.peekbtn[aria-pressed="true"] .key{transform:translateY(1px) scale(.98);box-shadow:0 0 0 var(--key-edge),0 1px 2px rgba(0,0,0,.12)}
.peekbtn:focus-visible{outline:2px solid var(--accent);outline-offset:8px;border-radius:8px}
.note{margin:24px 0 0;font-size:13px;line-height:20px;color:var(--mute)}

/* 按住说话 */
.voice{display:flex;gap:16px;align-items:flex-start}
.voice .key{flex:none;min-width:32px;height:32px}
.voice .key svg{width:16px;height:16px}
.voice .p{margin-top:4px}
.voice .note{margin-top:16px}

/* 隐私：两种模式 */
.modes{display:grid}
.mode{padding-top:24px;box-shadow:inset 0 1px 0 var(--line)}
.mode + .mode{margin-top:40px}
.mode > p{margin:8px 0 0;color:var(--ink-2);max-width:60ch;text-wrap:pretty}
.wire{margin-top:24px;padding:16px;border-radius:10px;background:var(--win);box-shadow:inset 0 0 0 1px var(--line);display:grid;gap:8px;font-size:14px;line-height:20px}
.wire p{margin:0;display:grid;grid-template-columns:9rem minmax(0,1fr);gap:16px;overflow-wrap:anywhere}
.wire .k{color:var(--mute)}
.wire mark{background:var(--line-2);color:var(--ink);border-radius:4px;padding:0 4px}
.mode > .wire-cap{margin-top:8px;font-size:13px;line-height:20px;color:var(--mute)}

/* 在哪些软件里用：纯文字，不放公司图标 */
.apps{list-style:none;margin:64px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:32px;border-top:1px solid var(--line)}
.apps li{padding:24px 0;box-shadow:inset 0 -1px 0 var(--line);font:500 24px/32px var(--display);letter-spacing:-.01em}
.apps .etc{color:var(--mute)}

/* pricing */
.price-grid{display:grid;grid-template-columns:1fr 1fr;margin-top:64px;border-top:1px solid var(--line)}
.plan{padding:40px 0 0;padding-inline-end:48px}
.plan + .plan{padding-inline-start:48px;box-shadow:inset 1px 0 0 var(--line)}
[dir="rtl"] .plan + .plan{box-shadow:inset -1px 0 0 var(--line)}
.plan h3{font-size:15px;font-weight:500;color:var(--ink-2)}
.amount{margin:16px 0 0;font:500 56px/1 var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.amount small{font:400 16px/1 var(--sans);letter-spacing:0;color:var(--mute);margin-inline-start:8px}
.alt{margin:12px 0 0;font-size:15px;color:var(--ink-2)}
.alt b{font-weight:500;font-variant-numeric:tabular-nums}
.plan ul{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:12px}
.plan li{display:flex;gap:12px;align-items:flex-start;color:var(--ink-2)}
.plan li svg{flex:none;width:16px;height:16px;margin-top:4px;color:var(--mute)}
.refund{margin:64px 0 0;max-width:60ch;text-wrap:pretty;font-size:13px;line-height:20px;color:var(--mute)}

/* faq */
.faq-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:64px}
.faq{box-shadow:inset 0 1px 0 var(--line)}
details{box-shadow:inset 0 -1px 0 var(--line);padding:24px 0}
details:first-child{padding-top:0}
summary{cursor:pointer;list-style:none;font:500 18px/24px var(--display);display:flex;justify-content:space-between;gap:24px}
summary::-webkit-details-marker{display:none}
summary svg{flex:none;width:16px;height:16px;margin-top:4px;color:var(--mute);transition:transform .2s var(--ease)}
details[open] summary svg{transform:rotate(180deg)}
details p{margin:12px 0 0;color:var(--ink-2);max-width:62ch;text-wrap:pretty}

footer{box-shadow:inset 0 1px 0 var(--line);padding-block:32px 48px;font-size:13px;color:var(--mute)}
footer .wrap{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center}
footer nav{display:flex;flex-wrap:wrap;gap:8px 24px;margin-inline-start:auto}
footer a{text-decoration:none;transition:color .16s var(--ease)}
footer a:hover{color:var(--ink)}

@media (max-width:900px){
  .hero .wrap{display:flex;flex-direction:column}
  .hero h1{order:1}
  .hero .stage{order:2;margin-top:32px}
  .hero .hero-row{order:4;margin-top:32px}
  .hero .perks{order:5;grid-template-columns:minmax(0,1fr);row-gap:24px;margin-top:48px}
  .wrap{padding-inline:24px}
  /* 导航折成两行：上面 Logo、主题、下载钮，下面四个链接；手机上不吸顶，省屏幕 */
  .nav{position:static}
  .nav .wrap{flex-wrap:wrap;height:auto;column-gap:16px;row-gap:0}
  .brand{order:1;height:56px}
  .lang{order:2;margin-inline-start:auto}
  .seg{order:2}
  .nav-dl{order:3}
  .links{order:4;width:100%;margin-inline-start:0;gap:20px;height:44px;align-items:center;box-shadow:inset 0 1px 0 var(--line)}
  .hero{padding-top:48px}
  .hero-row,.frame-grid,.faq-grid,.split{grid-template-columns:minmax(0,1fr);gap:32px}
  .apps{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;margin-top:48px}
  .apps li{padding:16px 0;font-size:20px;line-height:28px}
  .stage{height:400px;margin-top:48px;font-size:13px}
  .moves{grid-template-columns:minmax(0,1fr);row-gap:48px}
  .m1,.m2,.m3{grid-column:1;grid-row:auto}
  .sec{padding-block:80px}
  .price-grid{grid-template-columns:minmax(0,1fr)}
  .plan{padding-inline-end:0}
  .plan + .plan,[dir="rtl"] .plan + .plan{padding-inline-start:0;box-shadow:inset 0 1px 0 var(--line);margin-top:40px}
}
@media (max-width:480px){
  .wrap{padding-inline:16px}
  .nav .wrap{column-gap:12px}
  .nav-dl small{display:none}
  .wire p{grid-template-columns:minmax(0,1fr);gap:0}
  .brand span{display:none}
  .lang summary span{display:none}
  .ctas{flex-direction:column}
  .btn{justify-content:center}
  .stage{height:400px;font-size:12px}
  .msg{max-width:80%}
  .catch-scene{padding:16px}
  .catch .bar{font-size:12px}
}
/* Motion (assets/motion.js). Blocks rise into view once. html.rv is only set when the script runs and motion is allowed,
   so without it everything simply shows. Keep these selectors in step with BLOCKS and GROUPS in motion.js. */
html.rv :is(.hero .wrap,main > .wrap,.sec > .wrap) > :not(.moves,.price-grid,.editions,.steps,.perks,.rv-in),
html.rv :is(.moves,.price-grid,.editions,.steps,.perks) > :not(.rv-in){opacity:0;transform:translateY(16px)}
html.rv .rv-in{transition:opacity .7s var(--ease) var(--rv-d,0ms),transform .8s var(--ease) var(--rv-d,0ms)}
@media print{html.rv *{opacity:1!important;transform:none!important}}

/* "Coming soon" download buttons: plainly not clickable yet; pressing one shows a note under it (motion.js). */
button.btn,button.nav-dl{border:0;margin:0;-webkit-appearance:none;appearance:none;font-family:var(--sans);line-height:1}
[data-soon]{cursor:not-allowed;transition:opacity .2s var(--ease)}
@media (hover:hover){[data-soon]:hover{opacity:.7}}
[data-soon]:active{opacity:.6}
.soon-tip{position:absolute;z-index:30;padding:6px 10px;border-radius:8px;font:400 13px/18px var(--sans);white-space:nowrap;color:var(--ink);background:var(--card);box-shadow:0 0 0 1px var(--line-2),var(--shadow-float);pointer-events:none;
  opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .3s var(--ease),transform .4s var(--ease),visibility 0s linear .4s}
.soon-tip.on{opacity:1;visibility:visible;transform:none;transition:opacity .3s var(--ease),transform .4s var(--ease),visibility 0s}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

@media (prefers-reduced-motion:reduce){
  .blink,.bar-in .c{animation:none}
  html{scroll-behavior:auto}
  .key,.bt-wrap,.bt-wrap .bar-bt,.bar[data-bar] [data-tr],.catch mark,[data-soon],.soon-tip,.soon-tip.on,summary svg{transition:none}
}

/* ---------- Languages (官网/多语言/i18n.py writes /<lang>/ pages; these rules only act on those pages and the switcher) ---------- */
/* switcher: a <details> in the header, so it works without JS; assets/lang.js closes it on Esc or a click outside */
.lang{position:relative;padding:0;box-shadow:none;margin-inline-end:-16px}
.lang summary{display:inline-flex;align-items:center;justify-content:flex-start;gap:6px;height:28px;margin:0;padding:0 8px;border-radius:8px;font:400 13px/1 var(--sans);color:var(--ink-2);background:var(--raised);box-shadow:inset 0 0 0 1px var(--line);white-space:nowrap;transition:color .16s var(--ease)}
.lang summary:hover,.lang[open] summary{color:var(--ink)}
.lang summary svg,.lang[open] summary svg{width:16px;height:16px;margin:0;color:inherit;transform:none;transition:none}
.lang-list{position:absolute;z-index:40;top:calc(100% + 8px);inset-inline-end:0;margin:0;padding:6px;list-style:none;display:grid;grid-template-columns:repeat(2,max-content);gap:2px;max-width:calc(100vw - 32px);border-radius:12px;background:var(--card);box-shadow:0 0 0 1px var(--line-2),var(--shadow-float)}
.lang-list a{display:block;padding:6px 10px;border-radius:6px;font:400 14px/20px var(--sans);color:var(--ink-2);text-decoration:none;white-space:nowrap}
.lang-list a:hover{background:var(--raised);color:var(--ink)}
.lang-list a[aria-current]{background:var(--raised);color:var(--ink);font-weight:500}
/* phones and tablets: the menu opens as a panel under the header row, so it never runs off either edge (also in RTL) */
@media (max-width:900px){.nav .wrap{position:relative}.lang{position:static;margin-inline-end:-4px}.lang-list{top:52px;inset-inline:12px;grid-template-columns:repeat(2,minmax(0,1fr))}}
/* legal pages in other languages: "the English version prevails" under the title */
.i18n-note{margin:16px 0 0;max-width:40rem;font-size:14px;line-height:22px;color:var(--mute)}
.i18n-note a{color:var(--accent-text);text-underline-offset:3px}
/* system fonts by language; no web fonts. Han characters need the right font per language (Japanese and
   Traditional Chinese would otherwise draw with the Simplified Chinese font in --sans). */
:lang(zh-Hans){--sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Noto Sans CJK SC",sans-serif;--display:var(--sans)}
:lang(zh-Hant){--sans:-apple-system,BlinkMacSystemFont,"PingFang TC","Microsoft JhengHei","Noto Sans TC","Noto Sans CJK TC",sans-serif;--display:var(--sans)}
:lang(ja){--sans:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic",Meiryo,"Noto Sans JP","Noto Sans CJK JP",sans-serif;--display:var(--sans)}
:lang(ko){--sans:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR","Noto Sans CJK KR",sans-serif;--display:var(--sans)}
:lang(th){--sans:-apple-system,BlinkMacSystemFont,Thonburi,"Leelawadee UI","Noto Sans Thai",Tahoma,sans-serif;--display:var(--sans)}
:lang(hi){--sans:-apple-system,BlinkMacSystemFont,"Kohinoor Devanagari","Devanagari Sangam MN","Nirmala UI","Noto Sans Devanagari",sans-serif;--display:var(--sans)}
:lang(ar){--sans:-apple-system,BlinkMacSystemFont,"SF Arabic","Geeza Pro","Segoe UI","Noto Sans Arabic",Tahoma,sans-serif;--display:var(--sans)}
html:is(:lang(zh),:lang(ja),:lang(ko),:lang(th),:lang(hi)) :is(h1,h2,h3,summary,.brand,.amount,.apps li){letter-spacing:0}
html:lang(ar) *{letter-spacing:0!important} /* Arabic letters stop joining when spaced */
html:is(:lang(zh),:lang(ja),:lang(ko)) :is(h1,h2){line-height:1.2}
html:is(:lang(th),:lang(hi),:lang(ar)) :is(h1,h2){line-height:1.34}
html:is(:lang(de),:lang(nl),:lang(ru),:lang(uk),:lang(pl),:lang(tr),:lang(fr),:lang(it),:lang(es),:lang(pt),:lang(id),:lang(vi)) :is(h1,h2,h3,summary){-webkit-hyphens:auto;hyphens:auto}
html:not(:lang(en)) body{overflow-wrap:break-word}
/* the demo bars stay left-to-right (mock-ups); a right-to-left sentence inside one (Arabic page) runs right to left */
:is(.scene,.catch-scene,.hx-bar) p:has(> [dir="rtl"]){direction:rtl}
/* first screen in other languages: keep the whole input bar inside a 1440×785 Safari viewport (longer ledes, taller scripts) */
@media (min-width:901px){html:not(:lang(en)) .hero{padding-top:40px}}
html:is(:lang(zh),:lang(ja),:lang(ko)) .hero h1{font-size:clamp(2.25rem,1.1rem + 3.1vw,4rem);line-height:1.12}
html:is(:lang(th),:lang(hi),:lang(ar)) .hero h1{line-height:1.24}
html:lang(ja) :is(h1,h2,h3,summary){word-break:auto-phrase}   /* Japanese headings break between phrases (Chrome); others ignore it */
html:lang(ko) body{word-break:keep-all}                        /* Korean breaks between words, not inside them */
html:lang(zh) .hero h1 :is(.l1,.l2){word-break:keep-all}    /* 中文主标题只在逗号、问号和空格处断行（老爷 11-10 定的标题，手机上一句断成两行） */
@media (max-width:480px){html:not(:lang(en)) .nav .wrap{column-gap:8px}html:not(:lang(en)) .nav-dl{padding:0 12px}}
.bar-bt{overflow:hidden;text-overflow:ellipsis}   /* 有的语言 App 的回译标签很长（乌克兰语"Значення перекладу:"），窄屏放不下就省略号收尾，别撑宽页面（11-09 官网③） */
@media (min-width:901px){html:not(:lang(en)) .hero-row{margin-top:24px}}   /* longer ledes (German: one more line) */
@media (min-width:901px){html:lang(pl) .hero-row{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}   /* 波兰语导语补"i innych"后多折一行、把输入条挤出 1440×785 第一屏（11-10）：导语栏放宽到 36rem 上限，导语 4 行、加粗句 1 行 */
html .perks h2,html .plan h2{font:500 18px/24px var(--display);letter-spacing:normal;text-wrap:wrap}   /* 11-11 SEO：首页卖点、价格页价格卡的小标题从 h3 改成 h2（标题不跳级），样子照旧 h3；要压过上面按语言改 h2 行高那两条，所以加 html、放最后 */
html .plan h2{font-size:15px;color:var(--ink-2)}