/* ilang.ai v3 (2026-10-02): the shared core. Paper, ink and the gold of the mark; system type only, nothing is
   loaded from another host. The same design language as ilang.cn. */
/* ilang.ai v4 (2026-10-30): the shared core, in the home page's world. A precision instrument: a cool grey
   housing by day, graphite by night, black markings, one gold on the needle and the live readings. One grotesk
   with tabular numerals; system type only, nothing is loaded from another host. The variable names of v3 stay so
   the pages' own small styles keep working. */
:root{
  --paper:#e9eaec;--paper-a:rgba(233,234,236,.92);--raise:#dfe1e4;--sunk:#d3d5d9;
  --ink:#121314;--ink-2:#393c40;--ink-3:#5f6368;
  --rule:rgba(18,19,20,.26);--rule-soft:rgba(18,19,20,.12);
  --seal:#9a6f22;--seal-text:#7a5a1c;--seal-wash:rgba(154,111,34,.12);--on-seal:#121314;
  --foot:#121314;--foot-ink:#e8e9eb;--foot-ink-2:#aeb1b6;--foot-rule:rgba(232,233,235,.16);
  --code:#121314;--code-ink:#e8e9eb;--code-dim:#aeb1b6;--code-gold:#e0b96a;--code-rule:rgba(232,233,235,.16);
  --ok:#245632;--ok-wash:rgba(36,86,50,.12);--warn:#7a5a1c;--warn-wash:rgba(154,111,34,.14);--bad:#8f2f24;--bad-wash:rgba(143,47,36,.1);
  --grain:none;
  --f-sans:"Bahnschrift","SF Pro Text",-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
  --f-display:var(--f-sans);
  --f-serif:var(--f-sans);
  --f-num:var(--f-sans);
  --f-mono:ui-monospace,"Cascadia Mono","SF Mono",Menlo,Consolas,"PingFang SC","Microsoft YaHei","Noto Sans SC",monospace;
  --pad:clamp(20px,5vw,72px);
  --nav-h:60px;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.16,1,.3,1);
  /* names the page content already uses in its own inline styles, mapped onto the palette above */
  --accent:var(--seal-text);--accent-2:var(--seal-text);--accent-soft:var(--seal-wash);--muted:var(--ink-3);--muted-2:var(--ink-3);
  --line:var(--rule);--line-2:var(--rule-soft);--bg:var(--paper);--bg-2:var(--sunk);--panel:var(--raise);--card:var(--raise);--border:var(--rule);--fg:var(--ink);
  --code-bg:var(--code);--code-text:var(--code-ink);--code-accent:var(--code-gold);--signal:var(--bad);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="paper"]){
    --paper:#1a1b1d;--paper-a:rgba(26,27,29,.92);--raise:#222326;--sunk:#2b2d31;
    --ink:#ececec;--ink-2:#c6c8cc;--ink-3:#9a9da3;
    --rule:rgba(236,236,236,.26);--rule-soft:rgba(236,236,236,.12);
    --seal:#e0b96a;--seal-text:#e0b96a;--seal-wash:rgba(224,185,106,.14);--on-seal:#121314;
    --foot:#0d0e0f;--code:#0d0e0f;
    --ok:#7fcf8f;--ok-wash:rgba(127,207,143,.14);--warn:#e0b96a;--warn-wash:rgba(224,185,106,.16);--bad:#f09a8a;--bad-wash:rgba(240,154,138,.14);
    color-scheme:dark;
  }
}
:root[data-theme="ink"]{
  --paper:#1a1b1d;--paper-a:rgba(26,27,29,.92);--raise:#222326;--sunk:#2b2d31;
  --ink:#ececec;--ink-2:#c6c8cc;--ink-3:#9a9da3;
  --rule:rgba(236,236,236,.26);--rule-soft:rgba(236,236,236,.12);
  --seal:#e0b96a;--seal-text:#e0b96a;--seal-wash:rgba(224,185,106,.14);--on-seal:#121314;
  --foot:#0d0e0f;--code:#0d0e0f;
  --ok:#7fcf8f;--ok-wash:rgba(127,207,143,.14);--warn:#e0b96a;--warn-wash:rgba(224,185,106,.16);--bad:#f09a8a;--bad-wash:rgba(240,154,138,.14);
  color-scheme:dark;
}
/* Chinese passages on an English page read in the Chinese faces */
:lang(zh){line-break:strict}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 20px)}
body{
  font-family:var(--f-sans);font-size:1.0625rem;line-height:1.65;color:var(--ink);
  background:var(--paper);
  font-variant-numeric:tabular-nums;transition:background .2s,color .2s;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
  overflow-wrap:break-word;overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--seal-text);color:var(--paper)}
:focus-visible{outline:2px solid var(--seal-text);outline-offset:3px;border-radius:2px}
html{caret-color:var(--seal);scrollbar-color:var(--ink-3) var(--sunk)}
.skip{position:absolute;left:var(--pad);top:-60px;z-index:100;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:4px;transition:top .2s}
.skip:focus{top:10px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.nb{white-space:nowrap}
.mono{font-family:var(--f-mono);font-variant-ligatures:none}

/* text link: a hairline at rest, drawn over in full from the left on hover */
.lk{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:var(--rule);transition:color .2s,text-decoration-color .2s}
.lk:hover,a:hover>.lk{color:var(--seal-text);text-decoration-color:currentColor}
.arr{display:inline-block}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:60;height:var(--nav-h);display:flex;align-items:center;gap:18px;padding:0 max(var(--pad),calc(50% - 640px + var(--pad)));
  background:var(--paper);
  border-bottom:1px solid transparent;transition:border-color .3s,background .2s}
.nav.scrolled{border-bottom-color:var(--rule-soft)}
.brand{display:flex;align-items:center;gap:10px;font-weight:650;font-size:1.02rem;letter-spacing:.005em;margin-right:auto;padding-right:16px;white-space:nowrap}
.brand img{width:26px;height:26px;border-radius:4px}
.nav-links{display:flex;align-items:center;gap:clamp(0px,.7vw,12px)}
.nav-links a{position:relative;font-size:.92rem;color:var(--ink-2);padding:12px 9px;transition:color .2s;white-space:nowrap}
.nav-links a::after{content:"";position:absolute;left:9px;right:9px;bottom:3px;height:2px;background:var(--seal);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav-links a:hover,.nav-links a.at{color:var(--ink)}
.nav-links a:hover::after,.nav-links a.at::after{transform:scaleX(1)}
.nav-links .sep{width:1px;height:18px;background:var(--rule-soft);margin:0 8px}
.nav-links .ext{display:none}
.theme{display:inline-grid;grid-template-columns:1fr 1fr;border:1px solid var(--rule);border-radius:999px;padding:2px;position:relative;flex:none}
.theme::after{content:"";position:absolute;top:-10px;right:-10px;bottom:-10px;left:-10px}
.theme span{position:relative;z-index:1;width:28px;height:24px;display:grid;place-items:center}
.theme span::before{content:"";width:9px;height:9px;border-radius:50%;border:1.5px solid var(--ink-3);transition:border-color .3s,background .3s}
.theme .t-ink::before{background:var(--ink-3)}
.theme::before{content:"";position:absolute;top:2px;left:2px;width:28px;height:24px;border-radius:999px;background:var(--ink);transition:transform .45s var(--ease)}
.theme .t-paper::before{border-color:var(--paper)}
:root[data-theme="ink"] .theme::before{transform:translateX(28px)}
:root[data-theme="ink"] .theme .t-paper::before{border-color:var(--ink-3)}
:root[data-theme="ink"] .theme .t-ink::before{border-color:var(--paper);background:var(--paper)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="paper"]) .theme::before{transform:translateX(28px)}
  :root:not([data-theme="paper"]) .theme .t-paper::before{border-color:var(--ink-3)}
  :root:not([data-theme="paper"]) .theme .t-ink::before{border-color:var(--paper);background:var(--paper)}
}
.nav-toggle{display:none;width:44px;height:44px;margin-right:-10px;position:relative;flex:none}
.nav-toggle i{position:absolute;left:12px;right:12px;height:1.5px;background:var(--ink);transition:transform .4s var(--ease),top .4s var(--ease)}
.nav-toggle i:nth-child(1){top:17px}
.nav-toggle i:nth-child(2){top:25px}
.nav-toggle[aria-expanded="true"] i:nth-child(1){top:21px;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] i:nth-child(2){top:21px;transform:rotate(-45deg)}
.progress{display:none}
.no-js .theme,.no-js .nav-toggle,.no-js .progress{display:none}

/* ---------- shared layout pieces ---------- */
main{display:block}
.wrap{padding-left:var(--pad);padding-right:var(--pad);max-width:1280px;margin:0 auto}
.sec-head{display:flex;align-items:center;gap:16px;font-size:.84rem;color:var(--ink-3);margin-bottom:clamp(28px,4.5vw,64px)}
.sec-head b{display:none}
.sec-head i{flex:1;height:1px;background:var(--rule-soft)}

/* ---------- footer ---------- */
footer{background:var(--foot);color:var(--foot-ink-2);padding:clamp(48px,7vw,96px) 0 calc(36px + env(safe-area-inset-bottom));font-size:.92rem;line-height:1.6;position:relative}
.footer-grid{display:grid;grid-template-columns:minmax(0,2.3fr) repeat(5,minmax(0,1fr));gap:clamp(24px,3vw,56px)}
.f-brand{display:flex;align-items:center;gap:10px;color:var(--foot-ink);font-weight:650;font-size:1.02rem}
.f-brand img{width:24px;height:24px;border-radius:4px}
.footer-about{margin-top:16px;max-width:27em;line-height:1.75}
.footer-about a{color:var(--foot-ink);text-decoration:underline;text-underline-offset:3px;transition:color .2s}
.footer-about a:hover{color:var(--code-gold)}
.footer-col-title{display:block;color:var(--foot-ink);font-weight:600;font-size:.84rem;letter-spacing:.02em;margin-bottom:12px}
.footer-grid ul{list-style:none}
.footer-grid li a{display:block;padding:5px 0;transition:color .2s,transform .4s var(--ease)}
.footer-grid li a:hover{color:var(--foot-ink)}
.footer-bottom{margin-top:clamp(40px,6vw,72px);padding-top:24px;border-top:1px solid var(--foot-rule);display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;font-size:.82rem}
.footer-bottom .ids{display:flex;flex-wrap:wrap;gap:6px 18px;font-family:var(--f-mono);font-size:.8rem;opacity:.8;font-variant-ligatures:none}
@media (max-width:1180px){
  .footer-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
  .footer-grid>.f-about{grid-column:1/-1}
}
@media (max-width:760px){
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 20px}
  .footer-grid li a{padding:8px 0}
}

/* ---------- small screens: the menu ---------- */
@media (max-width:1060px){
  .nav-toggle{display:block}
  .nav-links{position:fixed;top:var(--nav-h);left:0;right:0;height:calc(100vh - var(--nav-h));height:calc(100dvh - var(--nav-h));background:var(--paper);
    flex-direction:column;align-items:stretch;gap:0;padding:8px var(--pad) calc(28px + env(safe-area-inset-bottom));overflow-y:auto;
    visibility:hidden;opacity:0;transform:translateY(-10px);transition:opacity .35s var(--ease),transform .45s var(--ease),visibility 0s .45s}
  .nav-links.open{visibility:visible;opacity:1;transform:none;transition:opacity .35s var(--ease),transform .45s var(--ease),visibility 0s}
  .nav-links a{font-weight:600;font-size:1.35rem;color:var(--ink);padding:14px 0;display:flex;align-items:baseline;justify-content:space-between;gap:14px;
    opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .6s var(--ease)}
  .nav-links a::after{display:none}
  .nav-links a.at{color:var(--seal-text)}
  .nav-links.open a{opacity:1;transform:none;transition-delay:calc(.06s + var(--i)*40ms)}
  .nav-links .sep{display:none}
  .no-js .nav-links{display:none}
}
@media (max-width:360px){.brand span{font-size:.96rem}}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;transition-delay:0s!important;animation-delay:0s!important}
}
/* ilang.ai v3: the inner pages. The content markup is the hand-written one, untouched; these rules give it the same
   paper, ink and gold as the home page, and set it on two columns: section titles on the left, the text on the right. */
:root{--cols:minmax(0,3.3fr) minmax(0,8fr);--col-gap:clamp(36px,5vw,96px);--sec-gap:clamp(44px,5.4vw,88px);--sec-pad:clamp(20px,2.2vw,30px)}
.container{max-width:1280px;margin:0 auto;padding:0 var(--pad)}
.container .container{padding:0}
p{text-wrap:pretty}

/* ---------- page head: a ruler with the address under it, then the title ---------- */
.page-hero{padding:clamp(26px,4.2vw,64px) 0 clamp(36px,5.4vw,88px)}
.page-hero>.container,.container>.page-hero,.legal>.container,main.notfound{display:grid;grid-template-columns:minmax(0,1fr)}
/* the address of the page: a short line after the head, never a label above the title */
[data-path]::after{content:attr(data-path);display:block;margin-top:clamp(18px,2.4vw,28px);font-size:.84rem;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.page-hero h1,.legal h1,.notfound h1{font-weight:600;font-size:clamp(2.3rem,4.8vw,4.4rem);line-height:1;letter-spacing:-.024em;text-wrap:balance}
.page-hero .sub{font-size:clamp(1.1rem,1.5vw,1.3rem);line-height:1.5;color:var(--ink-2);max-width:31em;margin-top:clamp(20px,2.6vw,40px)}
.page-hero p:not(.sub){max-width:31em;color:var(--ink-3);margin-top:14px}
.page-hero .tagline{font-size:1.12rem;color:var(--seal-text)}
.page-hero a,.content a,.legal a,.notfound a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--seal);text-decoration-thickness:1px;text-underline-offset:3px;transition:color .2s,text-decoration-color .2s}
.page-hero a:hover,.content a:hover,.legal a:hover,.notfound a:hover{color:var(--seal-text)}
@keyframes rise{from{transform:translate3d(0,18px,0)}}
.anim .page-hero h1,.anim .legal h1,.anim .notfound h1{animation:rise .75s var(--ease) backwards}
.anim .page-hero h1~*,.anim .legal .date,.anim .notfound h1~*{animation:rise .75s var(--ease) .08s backwards}

/* ---------- running text ---------- */
.content{padding:0 0 clamp(64px,8vw,128px)}
.content h2,.legal h2{font-weight:600;font-size:clamp(1.55rem,2.2vw,2rem);line-height:1.14;letter-spacing:-.014em;text-wrap:balance;
  margin:var(--sec-gap) 0 clamp(14px,1.6vw,20px);padding-top:var(--sec-pad);border-top:1px solid var(--rule);scroll-margin-top:calc(var(--nav-h) + 20px)}
.content h2:first-child{margin-top:0}
.content section+section{margin-top:var(--sec-gap)}
.content h3{font-size:1.14rem;font-weight:650;line-height:1.35;letter-spacing:-.004em;text-wrap:balance;margin:clamp(26px,3vw,38px) 0 10px;scroll-margin-top:calc(var(--nav-h) + 20px)}
.content h4{font-size:1rem;font-weight:650;margin:24px 0 8px}
.content p,.legal p{margin:0 0 1em;color:var(--ink-2);max-width:31em;line-height:1.7}
.content strong,.content b,.legal strong{color:var(--ink);font-weight:650}
.content ul,.content ol{margin:0 0 1em 1.25em;color:var(--ink-2);max-width:31em}
.content li{margin:.4em 0;padding-left:.2em}
.content li::marker{color:var(--seal-text)}
.content section,.content [id]{scroll-margin-top:calc(var(--nav-h) + 20px)}
.content code,.page-hero code{font-family:var(--f-mono);font-size:.84em;background:var(--sunk);padding:2px 6px;border-radius:4px;font-variant-ligatures:none;overflow-wrap:anywhere}
.content pre{background:var(--code);color:var(--code-ink);padding:20px 24px;border-radius:12px;border:1px solid var(--rule-soft);overflow-x:auto;font-family:var(--f-mono);font-size:.82rem;line-height:1.65;margin:16px 0 24px;font-variant-ligatures:none;tab-size:2}
.content pre code{background:none;padding:0;color:inherit;font-size:1em;overflow-wrap:normal;border-radius:0}
.content pre[style*="--bg-2"]{color:var(--ink);font-family:var(--f-sans);border-color:var(--rule)}
.content pre[style*="--bg-2"] code{font-family:var(--f-mono)}
.content hr{border:0;border-top:1px solid var(--rule);margin:40px 0}

/* ---------- two columns on wide screens: the section title on the left, kept in view while its section is read ---------- */
@media (min-width:1100px){
  .page-hero>.container,.container>.page-hero,.legal>.container,main.notfound{grid-template-columns:var(--cols);column-gap:var(--col-gap)}
  .page-hero>.container>*,.container>.page-hero>*,.legal>.container>*,main.notfound>*{grid-column:2;min-width:0}
  .page-hero>.container::after,.container>.page-hero::after,.legal>.container::after,main.notfound::after,.page-hero h1,.legal h1{grid-column:1/-1}
  .content>.container:has(>h2),.content>.container>section:has(>h2),.content:has(>h2),.legal>.container{display:grid;grid-template-columns:var(--cols);column-gap:var(--col-gap);align-items:start;position:relative}
  .content>.container:has(>h2)>*,.content>.container>section:has(>h2)>*,.content:has(>h2)>*{grid-column:2;min-width:0}
  /* The title stays under the nav while its section is read. It is opaque, and so is the strip that hangs under it,
     so the next section's title slides over the one before. It spans the rows of its section (more than any has). */
  .content>.container:has(>h2)>h2,.content>.container>section:has(>h2)>h2,.content:has(>h2)>h2,.legal>.container>h2{
    grid-column:1;grid-row:span 99;border-top:0;margin:var(--sec-gap) 0 0;padding:var(--sec-pad) 0 14px;
    position:sticky;top:var(--nav-h);background:var(--paper)}
  .content>.container:has(>h2)>h2::after,.content>.container>section:has(>h2)>h2::after,.content:has(>h2)>h2::after,.legal>.container>h2::after{
    content:"";position:absolute;left:0;right:0;top:100%;height:5em;background:var(--paper);pointer-events:none}
  .content>.container:has(>h2)>h2+*,.content>.container>section:has(>h2)>h2+*,.content:has(>h2)>h2+*,.legal>.container>h2+*{margin-top:calc(var(--sec-gap) + var(--sec-pad))}
  .content>.container:has(>h2)>h2:first-child,.content>.container>section:has(>h2)>h2:first-child,.content:has(>h2)>h2:first-child{margin-top:0}
  .content>.container:has(>h2)>h2:first-child+*,.content>.container>section:has(>h2)>h2:first-child+*,.content:has(>h2)>h2:first-child+*{margin-top:var(--sec-pad)}
  /* the hairline over a section runs the whole width; it is drawn by the first thing in the right column */
  .content>.container:has(>h2)>h2+*::before,.content>.container>section:has(>h2)>h2+*::before,.content:has(>h2)>h2+*::before,.legal>.container>h2+*::before{
    content:"";position:absolute;left:0;right:0;margin-top:calc(-1 * var(--sec-pad));border-top:1px solid var(--rule);pointer-events:none}
  .content>.container:has(>h2)>h2+*::before,.legal>.container>h2+*::before{left:var(--pad);right:var(--pad)}
  .content h2+p,.legal h2+p{padding-top:.36em}
  .content>.container:has(>h2)>h2+p::before,.content>.container>section:has(>h2)>h2+p::before,.content:has(>h2)>h2+p::before,.legal>.container>h2+p::before{margin-top:calc(-1 * var(--sec-pad) - .36em)}
  .content>.container:has(>h2)>h2+pre::before,.content>.container>section:has(>h2)>h2+pre::before,.content:has(>h2)>h2+pre::before{margin-top:calc(-1 * var(--sec-pad) - 21px)}
  .content h2+h3{margin-bottom:10px;padding-top:.5em}
  .content>.container:has(>h2)>h2+h3::before,.content>.container>section:has(>h2)>h2+h3::before,.content:has(>h2)>h2+h3::before{margin-top:calc(-1 * var(--sec-pad) - .5em)}
  /* the three protocols side by side take the whole width; the six cells go two abreast until there is room for three */
  .content>.container:has(>h2)>.compare-grid{grid-column:1/-1}
  .has-rail .progress{display:none}
}
@media (min-width:1100px) and (max-width:1340px){.content .caps{grid-template-columns:repeat(2,1fr)}}

/* ---------- tables ---------- */
.content table{width:100%;border-collapse:collapse;margin:22px 0 28px;font-size:.95rem;line-height:1.5}
@media (min-width:641px){.content table{width:auto;max-width:min(100%,36em)}.content table:has(td:nth-child(3)){max-width:min(100%,44em)}.content .table-wrap>table{width:100%;max-width:none}}
.content th{text-align:left;padding:11px 16px 11px 0;border-bottom:1px solid var(--rule);border-top:1px solid var(--rule);font-weight:600;font-size:.84rem;color:var(--ink-3);vertical-align:bottom}
.content td{padding:13px 16px 13px 0;border-bottom:1px solid var(--rule-soft);vertical-align:top;color:var(--ink-2);max-width:34em}
.content td code{overflow-wrap:normal;white-space:nowrap}
@media (min-width:641px){.content td:first-child{white-space:nowrap}}
.content td:first-child{color:var(--ink);font-weight:500}
.content th:last-child,.content td:last-child{padding-right:0}
.content tr:hover>td{background:var(--seal-wash)}
.content th[scope="row"]{vertical-align:top;border-top:0;border-bottom:1px solid var(--rule-soft);padding:14px 28px 13px 0;white-space:nowrap;width:1%}
.content tr:first-child>th[scope="row"],.content tr:first-child>th[scope="row"]+td{border-top:1px solid var(--rule)}
.content h2+table tr:first-child>th,.content h2+.table-wrap tr:first-child>th,.content h2+table tr:first-child>th[scope="row"]+td,.content h2+.table-wrap tr:first-child>th[scope="row"]+td{border-top:0}
.content h2+table,.content h2+.table-wrap{margin-bottom:28px}
.table-wrap{overflow-x:auto;margin:22px 0 28px}
.table-wrap>table{margin:0}
.check{color:var(--ok)}
.cross{color:var(--bad)}
.partial{color:var(--warn)}

/* ---------- cards (about, ecosystem) ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin:0 0 28px}
.card{background:none;border:0;border-top:1px solid var(--rule);border-radius:0;padding:18px 0 6px;transition:border-color .3s}
.card:hover{border-color:var(--seal)}
.content .card h3{font-weight:600;font-size:1.2rem;margin:0 0 8px}
.card h3 a{text-decoration:none}
.content .card p{font-size:.93rem;line-height:1.6;color:var(--ink-2);margin:0}
.contact-box{background:none;border:0;border-top:1px solid var(--rule);border-radius:0;padding:18px 0 0;margin:0 0 22px;max-width:33em}
.content .contact-box p{margin:6px 0;font-size:.98rem}

/* ---------- questions ---------- */
.faq-list{border-top:1px solid var(--rule);counter-reset:q}
.faq-list{border-top:1px solid var(--rule)}
.faq-item{padding:clamp(20px,2.2vw,30px) 0;counter-increment:q}
.content .faq-item h2{font-weight:600;font-size:clamp(1.16rem,1.6vw,1.42rem);line-height:1.3;letter-spacing:-.008em;margin:0 0 10px;text-wrap:balance}
.content .faq-item p{font-size:1.02rem;line-height:1.7;color:var(--ink-2);max-width:31em;margin:0}
.content h2+.faq-list{border-top:0}
.content h2+.faq-list .faq-item:first-child{padding-top:0}
@media (min-width:1100px){
  .content>.container>.faq-list:first-child .faq-item{display:grid;grid-template-columns:var(--cols);column-gap:var(--col-gap);align-items:start}
  .content>.container>.faq-list:first-child .faq-item h2{margin:0}
  .content>.container>.faq-list:first-child .faq-item p{padding-top:.22em}
}

/* ---------- the dictionary ---------- */
.verb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin:0 0 8px}
.verb-card{background:none;border:0;border-top:1px solid var(--rule);border-radius:0;padding:14px 0 12px;display:flex;flex-direction:column;gap:6px;scroll-margin-top:calc(var(--nav-h) + 20px);transition:border-color .3s}
.verb-card:hover,.verb-card:target{border-color:var(--seal)}
@keyframes mark{from{background:var(--seal-wash);border-color:var(--seal)}}
.anim .verb-card:target,.anim .content h2:target,.anim .content h3:target{animation:mark 1.8s var(--ease)}
.verb-card .verb-name{font-family:var(--f-mono);font-weight:600;font-size:1.02rem;letter-spacing:.02em;color:var(--seal-text);font-variant-ligatures:none}
.verb-card .verb-desc{color:var(--ink-2);font-size:.93rem;line-height:1.45}
.verb-card .verb-example{font-family:var(--f-mono);font-size:.78rem;line-height:1.5;color:var(--ink);background:var(--raise);padding:8px 10px;border-radius:6px;margin-top:auto;overflow-wrap:anywhere;font-variant-ligatures:none}
.tag{display:inline-block;font-size:.78rem;font-weight:500;letter-spacing:.02em;margin:0 0 0 10px;vertical-align:middle;color:var(--ink-3)}
@media (min-width:1100px){.content h2 .tag{display:table;margin:14px 0 0}}

/* ---------- three protocols side by side ---------- */
.compare-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0 0 12px}
.compare-card{background:none;border:0;border-top:1px solid var(--rule);border-radius:0;padding:22px 0 8px;position:relative}
.compare-card.highlight{border-color:var(--seal)}
.content .compare-card h2{font-weight:600;font-size:1.6rem;line-height:1.2;margin:0 0 6px}
.content .compare-card p{font-size:.95rem;line-height:1.55}
.compare-card .badge{position:absolute;top:8px;right:0;color:var(--seal-text);font-size:.78rem;font-weight:500;letter-spacing:.02em}

/* ---------- the specification ---------- */
.steps{margin:0 0 20px 1.35em;color:var(--ink-2)}
.steps li{margin:8px 0}
.code-win{background:var(--code);border-radius:12px;overflow:hidden;margin:20px 0 32px;border:1px solid var(--rule-soft)}
.code-chrome{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 14px 11px 18px;border-bottom:1px solid var(--code-rule)}
.code-chrome .left{display:flex;align-items:center;gap:14px;min-width:0;color:var(--code-dim);font-family:var(--f-mono);font-size:.8rem;font-variant-ligatures:none}
.code-chrome .dots{display:none}
.code-copy{flex-shrink:0;background:transparent;border:1px solid var(--code-rule);color:var(--code-ink);font-size:.82rem;font-weight:500;min-height:36px;padding:6px 12px;border-radius:4px;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.code-copy:hover{background:rgba(233,226,212,.08);border-color:var(--code-dim)}
.code-copy.copied{background:var(--code-gold);border-color:var(--code-gold);color:#17140f}
.content .code-win pre{margin:0;border:0;border-radius:0;background:none;padding:22px 26px;max-height:520px;overflow:auto;font-size:.78rem;line-height:1.7;color:var(--code-ink);white-space:pre}
.content .code-win pre:focus-visible{outline-offset:-3px}
.code-win .sec{color:var(--code-gold);font-weight:500}
.code-win .key{color:#e3a892}
.code-win .str{color:#b9c8a0}
.caps{display:grid;grid-template-columns:repeat(3,1fr);gap:0 clamp(16px,2.4vw,32px);border-top:1px solid var(--rule);margin:0 0 8px}
.cap{padding:18px 0 14px}
.cap-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.cap-num{display:none}
.cap-badge{font-family:var(--f-mono);font-size:.78rem;color:var(--ink-3)}
.content .cap h3{font-weight:600;font-size:1.2rem;letter-spacing:-.008em;margin:0 0 8px}
.content .cap p{font-size:.92rem;color:var(--ink-2);line-height:1.6;margin:0}
.cap p .mono{color:var(--ink);font-size:.9em;background:var(--sunk);padding:1px 6px;border-radius:4px}

/* ---------- buttons inside the tools ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:11px 20px;border-radius:4px;font-size:.92rem;font-weight:600;transition:transform .25s var(--ease),background .2s,border-color .2s,color .2s;cursor:pointer;border:1px solid transparent;font-family:inherit;color:var(--ink)}
.btn-primary{background:var(--ink);color:var(--paper)}
.btn-primary:hover{background:var(--ink-2)}
.btn-secondary{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn-secondary:hover{border-color:var(--ink)}
.btn .mono{font-size:.8rem;opacity:.7}
.btn-sm{padding:8px 14px;font-size:.84rem;border-radius:4px}
.btn:disabled{opacity:.6;cursor:default;transform:none}

/* ---------- the structuring tool (prompt-compression) ---------- */
.try-wrap{background:var(--raise);border:1px solid var(--rule);border-radius:12px;overflow:hidden}
.try-head{padding:13px 20px;border-bottom:1px solid var(--rule-soft);display:flex;align-items:center;justify-content:space-between}
.try-head .label{font-size:.84rem;color:var(--ink-3);font-weight:600}
.try-count,.try-counter{font-family:var(--f-mono);font-size:.8rem;color:var(--ink-3)}
.try-textarea{display:block;width:100%;border:none;padding:22px 24px;font-family:var(--f-sans);font-size:1rem;line-height:1.65;resize:none;outline:none;color:var(--ink);background:transparent}
.try-textarea::placeholder{color:var(--ink-3)}
#v-in::placeholder,.pane textarea::placeholder{color:var(--ink-2)}
.try-actions{padding:13px 20px;border-top:1px solid var(--rule-soft);display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.try-actions-left{display:flex;gap:10px}
.try-counter b{color:var(--ink)}
.try-output{margin-top:16px;background:var(--code);border:1px solid var(--rule-soft);border-radius:12px;padding:20px 24px;display:none}
.try-output.show{display:block}
.try-output .out-label{font-size:.8rem;color:var(--code-dim);font-weight:600;margin-bottom:10px}
.content .try-output pre{margin:0;padding:0;background:none;border:0;border-radius:0;overflow:visible;font-size:.84rem;line-height:1.7;color:var(--code-ink);white-space:pre-wrap;word-break:break-word}
.try-output .out-foot{margin-top:16px;padding-top:14px;border-top:1px solid var(--code-rule);display:flex;justify-content:flex-end;align-items:center;font-family:var(--f-mono);font-size:.8rem;color:var(--code-dim)}
.try-error{margin-top:12px;padding:12px 16px;background:var(--bad-wash);border:1px solid var(--bad);border-radius:4px;font-size:.88rem;color:var(--bad);display:none}
.try-error.show{display:block}
.try-loading{margin-top:12px;color:var(--ink-3);font-family:var(--f-mono);font-size:.78rem;display:none}
.try-loading.show{display:inline-block}
.try-loading::after{content:"";animation:dots 1.4s infinite}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
.try-tip{margin-top:20px;padding:16px 20px;background:var(--raise);border:1px solid var(--rule);border-radius:4px;font-size:.92rem;color:var(--ink-2);line-height:1.6}
.try-tip b{color:var(--ink);font-weight:650}

/* ---------- the playground ---------- */
.versions{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.pill{font-size:.8rem;letter-spacing:.02em;color:var(--ink-3)}
main.container{padding-bottom:clamp(64px,8vw,128px)}
/* a tool page: the head is short and flush left, so the tool itself is on the first screen */
.page-hero:has(+main.container){padding-bottom:clamp(22px,2.8vw,38px)}
.page-hero:has(+main.container) h1{font-size:clamp(2.1rem,4.2vw,3.5rem)}
.page-hero:has(+main.container) .sub{margin-top:clamp(12px,1.4vw,18px);max-width:31em}
@media (min-width:1100px){.page-hero:has(+main.container)>.container>*{grid-column:1/-1}}
.tabs{display:inline-flex;gap:0;border:1px solid var(--rule);border-radius:4px;margin:0 0 22px;max-width:100%;overflow:visible}
.tab{appearance:none;border:0;background:transparent;color:var(--ink-2);font:inherit;font-size:.92rem;font-weight:500;min-height:44px;padding:11px 18px;border-radius:4px;cursor:pointer;white-space:nowrap;transition:background .3s,color .3s}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{background:var(--ink);color:var(--paper)}
.panel[hidden]{display:none}
.lead{color:var(--ink-2);margin-bottom:16px;max-width:31em}
.toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:12px}
.toolbar label{font-size:.9rem;color:var(--ink-2);display:inline-flex;align-items:center;gap:8px;max-width:100%;min-width:0}
.toolbar select{min-width:0;flex:0 1 auto;text-overflow:ellipsis}
select,.pane .btn,.toolbar .btn{font:inherit;font-size:.88rem;color:var(--ink);background:var(--raise);border:1px solid var(--rule);border-radius:4px;min-height:40px;padding:6px 10px;max-width:100%}
input[type="checkbox"]{accent-color:var(--seal)}
.pane .btn{font-weight:650;cursor:pointer}
.pane .btn:hover{border-color:var(--seal)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pane{min-width:0}
.pane-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px;min-height:34px}
.pane-head h2{font-size:.92rem;font-weight:600;color:var(--ink-2)}
.pane-head .hint{font-size:.76rem;color:var(--ink-3)}
.pane textarea,#v-in{width:100%;min-height:220px;resize:vertical;background:var(--raise);color:var(--ink);border:0;border-radius:6px;padding:12px;font-family:var(--f-mono);font-size:.82rem;line-height:1.55;tab-size:2;font-variant-ligatures:none;display:block}
#v-in{min-height:300px;border-color:var(--rule);background:var(--raise)}
.msg{margin-top:8px;font-size:.84rem;border-radius:4px;padding:8px 10px;display:none;overflow-wrap:anywhere}
.msg.show{display:block}
.msg.err{background:var(--bad-wash);color:var(--bad)}
.msg.ok{background:var(--ok-wash);color:var(--ok)}
.counts{width:100%;border-collapse:collapse;margin-top:16px;font-size:.9rem}
.counts th,.counts td{padding:9px 12px;border-bottom:1px solid var(--rule-soft);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.counts th:first-child,.counts td:first-child{text-align:left;padding-left:0}
.counts th:last-child,.counts td:last-child{padding-right:0}
.counts th{font-size:.8rem;color:var(--ink-3);font-weight:600;border-bottom-color:var(--rule)}
.note{font-size:.86rem;color:var(--ink-3);margin-top:12px;max-width:32em}
.note a,.lead a,.privacy a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--seal);text-decoration-thickness:1px;text-underline-offset:3px}
.note a:hover,.lead a:hover{color:var(--seal-text)}
.note code,.lead code{font-family:var(--f-mono);font-size:.88em;color:var(--ink);background:var(--sunk);padding:1px 5px;border-radius:4px;font-variant-ligatures:none}
.summary{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.summary .badge{font-size:.84rem;font-weight:600;border-radius:4px;padding:4px 10px}
.b-err{background:var(--bad-wash);color:var(--bad)}
.b-warn{background:var(--warn-wash);color:var(--warn)}
.b-info{background:var(--rule-soft);color:var(--ink-2)}
.b-ok{background:var(--ok-wash);color:var(--ok)}
.stats{font-size:.84rem;color:var(--ink-3);margin-bottom:8px}
.findings{list-style:none;border-top:1px solid var(--rule)}
.findings li{display:grid;grid-template-columns:72px 64px 64px 1fr;gap:10px;padding:9px 12px;border-bottom:1px solid var(--rule-soft);font-size:.84rem;align-items:baseline}
.findings li:last-child{border-bottom:0}
.findings .f-msg{overflow-wrap:anywhere;color:var(--ink-2)}
.lvl{font-weight:700;font-size:.76rem}
.lvl-ERROR{color:var(--bad)}
.lvl-WARN{color:var(--warn)}
.lvl-INFO{color:var(--ink-3)}
.empty{padding:14px;color:var(--ink-3);font-size:.9rem}
.privacy{margin:36px 0 0;padding:14px 0 0;border-top:1px solid var(--rule);font-size:.9rem;color:var(--ink-2);max-width:32em}
.privacy strong{color:var(--ink)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.tab:focus-visible,button:focus-visible,select:focus-visible,textarea:focus-visible,input:focus-visible{outline:2px solid var(--seal-text);outline-offset:2px}

/* ---------- the short pages: privacy, terms, not found ---------- */
.legal>.container,main.notfound{max-width:1280px;margin:0 auto;padding:clamp(26px,4.2vw,64px) var(--pad) clamp(64px,8vw,128px)}
.legal .date{color:var(--ink-3);font-size:.9rem;margin:clamp(18px,2.4vw,32px) 0 0}
.notfound h1{font-size:clamp(2rem,3.6vw,3.2rem)}
.notfound p{margin:16px 0 0;font-size:1.1rem;color:var(--ink-2)}
.notfound ul{margin:28px 0 0;list-style:none;border-top:1px solid var(--rule);max-width:31em}
.notfound li{padding:13px 0;color:var(--ink-2)}
main.notfound::before{content:"404";font-weight:600;font-size:clamp(3rem,9vw,6rem);line-height:.9;letter-spacing:-.024em;color:var(--ink);order:-1;margin:0 0 .2em -.04em}
@media (min-width:1100px){main.notfound::before{grid-column:1;grid-row:2/span 4;order:0;margin:-.02em 0 0 -.04em}}

/* ---------- the rail on long pages: the same ruler as on the home page ---------- */
.rail{position:fixed;left:max(14px,calc(var(--pad)/2 - 18px),calc(50vw - 640px + var(--pad)/2 - 18px));top:calc(var(--nav-h) + 28px);bottom:28px;width:44px;z-index:40;display:none;pointer-events:none;transition:opacity .4s}
.rail::before{content:"";position:absolute;left:0;top:0;bottom:22px;width:1px;background:var(--rule)}
.rail a{position:absolute;left:14px;transform:translateY(-50%);font-family:var(--f-num);font-size:.78rem;letter-spacing:.04em;color:var(--ink-3);line-height:1;padding:4px;pointer-events:auto;transition:color .3s,opacity .3s;white-space:nowrap;text-decoration:none}
.rail a.cur,.rail a:hover{color:var(--seal-text)}
.rail a.dim{opacity:0}
.rail a.dim:hover{opacity:1}
.rail a:hover{z-index:1;background:var(--paper)}
.rail a::after{content:attr(data-t);position:absolute;left:100%;top:50%;transform:translate(-4px,-50%);margin-left:6px;padding:6px 10px;border-radius:4px;background:var(--ink);color:var(--paper);font-family:var(--f-sans);font-size:.78rem;letter-spacing:0;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s,transform .3s var(--ease)}
.rail a:hover::after{opacity:1;transform:translate(0,-50%)}
.rail u{position:absolute;left:-1px;top:0;width:3px;height:20px;margin-top:-10px;background:var(--seal);will-change:transform;text-decoration:none}
.rail.away{opacity:0}
.rail.away a{pointer-events:none}
.rail output{position:absolute;left:0;bottom:0;font-family:var(--f-num);font-size:.78rem;letter-spacing:.04em;color:var(--seal-text);line-height:1;font-variant-numeric:tabular-nums}
@media (min-width:1180px) and (min-height:560px) and (hover:hover){.js .rail{display:block}}
.anim .rail{animation:fade .6s .7s backwards}
@keyframes fade{from{opacity:0}}

/* ---------- smaller screens ---------- */
@media (max-width:900px){
  .caps{grid-template-columns:repeat(2,1fr)}
  .grid2{grid-template-columns:1fr}
  .compare-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:768px){
  .content table{display:block;max-width:100%;overflow-x:auto}
  .content pre{max-width:100%;overflow-x:auto;padding:16px 16px}
  table.stack{display:block;overflow:visible;border:0;background:none}
  table.stack tbody,table.stack tr,table.stack td,table.stack th{display:block;width:auto}
  table.stack tr.stack-head{display:none}
  table.stack tr{border-top:1px solid var(--rule);margin:0;padding:10px 0}
  table.stack td,table.stack th{border:0;padding:5px 0;background:none;text-align:left}
  table.stack td::before{content:attr(data-label);display:block;font-size:.78rem;font-weight:600;color:var(--ink-3)}
  table.stack td:first-child{font-weight:650}
  table.stack td:first-child::before{display:none}
  .content tr:hover>td{background:none}
}
@media (max-width:640px){
  .content .code-win pre{white-space:pre-wrap;overflow-wrap:anywhere;padding:16px}
  .counts th,.counts td{padding:6px 6px;font-size:.82rem}
  .counts th{white-space:normal;vertical-align:bottom}
  .findings li{grid-template-columns:64px 56px 1fr}
  .findings li .f-code{display:none}
  .tag{margin:6px 0 0;display:table}
}
@media (max-width:560px){
  .caps{grid-template-columns:1fr}
  .verb-grid{grid-template-columns:minmax(0,1fr)}
}
/* ilang.cn v4.0 (2026-11-01): the same design read in Chinese. Han in YaHei or PingFang next to Bahnschrift, never in
   a Song face; headings without negative tracking and with room between lines; phrases kept whole with .nb. */
html:lang(zh) .page-hero h1,html:lang(zh) .legal h1,html:lang(zh) .notfound h1{letter-spacing:0;line-height:1.15}
html:lang(zh) .display{letter-spacing:0;line-height:1.12}
html:lang(zh) .sec-title,html:lang(zh) .close .big{letter-spacing:0;line-height:1.18}
html:lang(zh) .content h2,html:lang(zh) .legal h2{letter-spacing:0;line-height:1.3}
html:lang(zh) .why-lead,html:lang(zh) .rd-v,html:lang(zh) .fv-mode b{letter-spacing:0}
html:lang(zh) .featured h2,html:lang(zh) .post-card h2,html:lang(zh) .sec-label,html:lang(zh) .art-body h2,html:lang(zh) .art-end h2{letter-spacing:0;line-height:1.25}
html:lang(zh) .qa .a,html:lang(zh) .rd-u,html:lang(zh) .why-list li,html:lang(zh) .fv-k{text-wrap:pretty}
html:lang(zh) .qa .a:where(:has(>.nb:last-child)){text-wrap-style:auto}
.nb{white-space:nowrap}
html:lang(zh) .nb{display:inline}
html:lang(zh) main p,html:lang(zh) main li{line-height:1.8}
html:lang(zh) em{font-style:normal}
html:lang(zh) body{overflow-wrap:break-word}
.footer-bottom .footer-genesis{font-family:var(--f-mono);font-size:.8rem;opacity:.8}
.footer-bottom a{color:inherit;text-decoration:underline}
@media (max-width:760px){.footer-bottom{flex-direction:column;align-items:flex-start}}
/* review r1 (2026-11-01). Body text: no one-character last line. Short display blocks: a line breaks only at punctuation
   and at the spaces between Han and Latin, and the lines are balanced (ilang.ai balances these blocks). The ledes under the
   page titles get this from 769px up; on a phone some run to nine lines, where filled lines read better. The longhand
   text-wrap-style is used so that no white-space:nowrap (td.nb on /spec/) is turned back into wrapping. */
html:lang(zh) .content td,html:lang(zh) .content p,html:lang(zh) .content li{text-wrap-style:pretty}
/* review r3: a block whose last phrase the converter keeps whole (span.nb) breaks right before it; pretty would move the
   break one or two characters into the word before */
html:lang(zh) .content td:where(:has(>.nb:last-child)),html:lang(zh) .content p:where(:has(>.nb:last-child)),html:lang(zh) .content li:where(:has(>.nb:last-child)){text-wrap-style:auto}
html:lang(zh) .hero-def,html:lang(zh) .why-lead,html:lang(zh) .def-read,html:lang(zh) .hero-lede,html:lang(zh) .dial-cap,html:lang(zh) .sec-intro,html:lang(zh) .idx .ds,html:lang(zh) .rd-t,html:lang(zh) .models-note,html:lang(zh) .close p,html:lang(zh) .content .steps li,html:lang(zh) .notfound li,html:lang(zh) p.note{word-break:keep-all;overflow-wrap:anywhere;text-wrap-style:balance}
@media (min-width:769px){html:lang(zh) .page-hero .sub{word-break:keep-all;overflow-wrap:anywhere;text-wrap-style:balance}}
html:lang(zh) body:has(#briefText) .content .faq-item p,html:lang(zh) body:has(#briefText) .content .card p{word-break:keep-all;overflow-wrap:anywhere;text-wrap-style:balance}
/* heading-like paragraphs keep heading leading; the 1.8 of body text is for prose */
html:lang(zh) main p.hero-def{line-height:1.35;letter-spacing:0}
html:lang(zh) main p.why-lead,html:lang(zh) main p.fv-say{line-height:1.3}
html:lang(zh) main .why-three>p{line-height:1.6}
html:lang(zh) .page-hero p:not(.sub){line-height:1.7}
/* YaHei has Regular and Bold only: a weight of 500 would draw Han in Regular */
html:lang(zh) .cta-2,html:lang(zh) .skip{font-weight:600}
html:lang(zh) .content td:first-child{font-weight:600}
html:lang(zh) .content table:not([class]) td:first-child{min-width:calc(4em + 18px)}
/* full-width punctuation: YaHei has no halt feature, so the converter marks a leading opening bracket (.qo) and the first of
   two marks in a row (.pq), and the blank half em goes here; space-all keeps engines that trim on their own from trimming twice */
html:lang(zh) .qo{margin-left:-.5em;text-spacing-trim:space-all}
html:lang(zh) .pq{letter-spacing:-.5em;text-spacing-trim:space-all}
/* home: the GitHub note only ilang.cn has reads as an aside, like the copy hint above it */
html:lang(zh) .way .cmds+p{margin:0 0 14px;font-size:.9rem;line-height:1.7;color:var(--ink-3)}
/* tables and links */
@media (max-width:768px){html:lang(zh) .content td code{white-space:normal;overflow-wrap:anywhere}}
html:lang(zh) .content p a[href^="#"]{white-space:nowrap}
html:lang(zh) .content .sb-table th{white-space:nowrap}
html:lang(zh) .content .sb-table td,html:lang(zh) .content .sb-table th{padding-right:12px}
@media (min-width:1200px){html:lang(zh) .content .sb-table td:nth-child(6){white-space:nowrap}}
/* the copy fallback textarea of soul, source-book and demo is appended to body, where the page rule does not reach it */
.soul-copy-fallback,.sb-copy-fallback,.dm-copy-fallback{position:absolute;left:-9999px;top:0;width:1px;height:1px;opacity:0}
/* playground */
html:lang(zh) .toolbar label{white-space:nowrap}
html:lang(zh) .findings li>span:nth-of-type(2){font-family:var(--f-sans);font-variant-numeric:tabular-nums;white-space:nowrap}
/* demo: the reply is the model's own English, kept as recorded */
html:lang(zh) .content .dm-stream:not(:empty)::before{content:"模型原话 · 按原样保留";display:block;margin:0 0 6px;font-family:var(--f-sans);font-size:.75rem;letter-spacing:.02em;color:var(--ink-2)}
/* /seo/ */
html:lang(zh) body:has(#briefText) .content .faq-item h3{margin-top:0}
html:lang(zh) .content a.btn{text-decoration:none;margin:0 10px 10px 0}
html:lang(zh) #briefText{white-space:pre-wrap;overflow-wrap:anywhere}
html:lang(zh) .code-win:has(#briefText) .code-chrome .left{font-family:var(--f-sans)}
html:lang(zh) .code-copy{min-width:5em;text-align:center}
/* review r2 (2026-11-01). Weights: YaHei has Regular and Bold only, so Han in a 600 heading is Bold while Bahnschrift draws
   the Latin beside it SemiBold; at 700 both are Bold. The numeral readouts (.rd-v, .fv-mode b) keep 600 as on ilang.ai, and
   the menu links are 600 only in the phone menu. Labels and buttons at 500 would draw Han in Regular, so they take 600. */
html:lang(zh) :is(.display,.sec-title,.close .big,.hero-def,.why-lead,.why-three>p,.fv-say,.page-hero h1,.notfound h1,.legal h1,.content h2,h3,.idx .nm,.cta,.cta-2,.brand span,.f-brand,.footer-col-title){font-weight:700}
@media (max-width:1060px){html:lang(zh) #navLinks a{font-weight:700}}
html:lang(zh) .code-copy,html:lang(zh) .tab,html:lang(zh) .soul-labels b,html:lang(zh) .sb-labels b,html:lang(zh) .compare-card .badge{font-weight:600}
html:lang(zh) .compare-card .badge{top:2px;line-height:1.3}
html:lang(zh) .pane .btn{min-width:4.7em;text-align:center}
/* blocks that break at punctuation and balance their lines, like the r1 set */
html:lang(zh) body:has(#briefText) .page-hero .sub,html:lang(zh) #fvNote,html:lang(zh) .soul-meta>span,html:lang(zh) .sb-meta>span{word-break:keep-all;overflow-wrap:anywhere;text-wrap-style:balance}
@media (min-width:360px){html:lang(zh) .content li:has(>.qo:first-child){word-break:keep-all;overflow-wrap:anywhere;text-wrap-style:balance}}
@media (max-width:359px){html:lang(zh) .content .steps li{word-break:normal}}
@media (max-width:389px){html:lang(zh) body:has(#briefText) .content .steps li{word-break:normal}}
/* the demo lede is long and made of short clauses: from 769px up it fills its lines, as ilang.ai's does */
@media (min-width:769px){html:lang(zh) body:has(.dm-runs) .page-hero .sub{word-break:normal}}
/* hero labels: a link takes a row of its own, as on ilang.ai, and labels and values share a baseline */
html:lang(zh) .sb-labels>a{flex-basis:100%}
html:lang(zh) .sb-labels,html:lang(zh) .soul-labels{align-items:baseline}
/* tables: a cell marked .nb stays a cell; code in a cell breaks only where code may break, and the first column keeps its
   name whole; a stacked table may let its chain wrap from 769px up; on a phone a short table spans the measure */
html:lang(zh) td.nb,html:lang(zh) th.nb{display:table-cell}
@media (max-width:768px){html:lang(zh) .content table:not(.stack) td code{overflow-wrap:normal}html:lang(zh) .content table:not(.stack) td:first-child code{white-space:nowrap}html:lang(zh) .content table:not([class]) tr:has(>td:last-child>code:only-child)>td:first-child{min-width:calc(6em + 18px)}}
@media (min-width:769px){html:lang(zh) .content table.stack td:last-child:not(:first-child)>code{white-space:normal}}
@media (max-width:640px){html:lang(zh) .content table:not(.stack):not(:has(>thead))>tbody{display:table;width:100%}}
html:lang(zh) .content td:first-child:last-child,html:lang(zh) .content #when-to-use-what+table td:first-child{font-weight:400}
/* a bracket pulled by .qo at the start of an .nb that follows another .nb: the half em comes back on the span before it, so
   it shows when both share a line and falls at the line end when they do not */
html:lang(zh) .nb:has(+.nb>.qo:first-child){margin-right:.5em}
/* home: the f_v5 panel head has a space after the b where ilang.ai has none (the table check wants one between Latin and
   Han); the margin gives the space's width back, so the gap is ilang.ai's 10px */
html:lang(zh) .fv-top .fv-k b{margin-right:calc(10px - .26em)}
/* review r3 (2026-11-01). Blocks that break at punctuation and balance their lines: the /seo/ body paragraphs and the home
   why-list from 360px (below that keep-all strands a lone mark), the f_v5 steps and S line, and the /runtime/ lede, which
   is short at every width like /seo/'s */
@media (min-width:360px){html:lang(zh) body:has(#briefText) .content>p,html:lang(zh) .why-list li{word-break:keep-all;overflow-wrap:anywhere;text-wrap-style:balance}}
html:lang(zh) .fv-steps li,html:lang(zh) .fv-why,html:lang(zh) .page-hero[data-path="ilang.cn / runtime"] .sub{word-break:keep-all;overflow-wrap:anywhere;text-wrap-style:balance}
/* the source-book lede fills its lines from 769px up, as the demo lede does */
@media (min-width:769px){html:lang(zh) .page-hero:has(.sb-labels) .sub{word-break:normal}}
/* /spec/: tables whose first column holds only a symbol or a digit keep that column narrow, as on ilang.ai */
html:lang(zh) :is(#s4-greek-aliases+p+table,#s13-5-survival-boundaries+p+table,#s2-4-dna-model+pre+p+table) tr>:first-child{width:4.5em}
/* code in a column head is not split on a phone from 360px (at 320 the agent-communication results table would scroll); a code
   chip in a lede stays whole where the lede is keep-all */
@media (min-width:360px) and (max-width:768px){html:lang(zh) .content table:not(.stack) th code{white-space:nowrap;overflow-wrap:normal}}
@media (min-width:769px){html:lang(zh) .page-hero .sub code{white-space:nowrap}}
/* essays: on ilang.cn the discussion slot holds one line of text, not the comment frame ilang.ai loads, and its link reads as a link */
html:lang(zh) .discuss-slot{min-height:0}
html:lang(zh) .discuss-slot a{text-decoration:underline;text-decoration-color:var(--seal);text-decoration-thickness:1px;text-underline-offset:3px}
html:lang(zh) .discuss-slot a:hover{color:var(--seal-text)}
/* blog: the featured title sets in two even lines from 900px up */
html:lang(zh) .featured h2{font-size:clamp(1.8rem,3.2vw,2.85rem)}
/* /books/: the two book titles are English and keep ilang.ai's heading weight, tracking and leading */
html:lang(zh) :is(#i-lang-i-language-h,#i-lang-protocol-specification-h){font-weight:600;letter-spacing:-.014em;line-height:1.14}