:root { --paper:#f2f3ef; --paper-strong:#fbfcf8; --wash:#e5e8e3; --ink:#1d211e; --ink-soft:#343a35; --muted:#687069; --line:#c7ccc6; --line-dark:#899189; --accent:#b64b31; --accent-dark:#8f3927; --forest:#2d3c32; --serif:"Source Han Serif SC","Noto Serif CJK SC","Songti SC",SimSun,serif; --sans:"Source Han Sans SC","Noto Sans CJK SC","PingFang SC","Microsoft YaHei",sans-serif; --max:1240px; --header:72px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scrollbar-gutter:stable; scroll-padding-top:calc(var(--header) + 24px); }
body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); line-height:1.7; -webkit-font-smoothing:antialiased; }
body::before { position:fixed; inset:0; z-index:50; content:""; opacity:.045; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); }
[hidden] { display:none !important; }
a { color:inherit; text-decoration:none; }
button { font:inherit; cursor:pointer; }
button,a { -webkit-tap-highlight-color:transparent; }
button img,a img { flex-shrink:0; }
h1,h2,p { margin-top:0; }
h1,h2 { font-family:var(--serif); font-weight:600; letter-spacing:0; text-wrap:balance; }
:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.skip { position:fixed; top:10px; left:10px; z-index:100; padding:8px 12px; color:var(--paper); background:var(--ink); transform:translateY(-170%); }
.skip:focus { transform:none; }
.site-header { position:fixed; top:0; right:0; left:0; z-index:40; background:rgba(242,243,239,.96); backdrop-filter:blur(16px) saturate(120%); border-bottom:1px solid var(--line); }
.scroll-progress { position:absolute; bottom:-1px; left:0; width:100%; height:2px; background:var(--accent); transform:scaleX(0); transform-origin:left; pointer-events:none; }
.nav { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; width:min(calc(100% - 48px),var(--max)); height:var(--header); margin:auto; gap:20px; }
.brand { display:inline-flex; gap:10px; align-items:center; width:max-content; font-family:var(--serif); font-weight:600; }
.brand-name { display:inline-flex; gap:8px; align-items:center; white-space:nowrap; }
.brand-divider { width:1px; height:1.05em; background:currentColor; opacity:.52; }
.nav-links { display:flex; gap:24px; align-items:center; }
.nav-links a { position:relative; padding:7px 0; color:var(--muted); font-size:13px; white-space:nowrap; }
.nav-links a::after { position:absolute; bottom:1px; left:0; right:0; height:2px; content:""; background:var(--accent); transform:scaleX(0); transition:transform .2s; }
.nav-links a:hover,.nav-links a.is-current { color:var(--ink); }
.nav-links a:hover::after,.nav-links a.is-current::after { transform:scaleX(1); }
.nav-home { justify-self:end; padding:7px 0 3px; border-bottom:1px solid var(--ink); font-size:13px; white-space:nowrap; }
.icon-button { display:inline-grid; place-items:center; flex:none; width:44px; height:44px; padding:0; background:transparent; border:0; border-radius:4px; transition:background .2s; }
.icon-button:hover,.icon-button:active { background:var(--wash); }
.menu-button { display:none; border:1px solid var(--line); }
.container { width:min(calc(100% - 48px),var(--max)); margin-inline:auto; }
.learn-page { padding-top:calc(var(--header) + 46px); }
.edition-switch { display:flex; align-items:center; flex-wrap:wrap; gap:0 24px; border-bottom:1px solid var(--line); margin-bottom:38px; }
.edition-switch a { position:relative; display:flex; align-items:center; min-height:46px; padding:8px 0 12px; color:var(--muted); font-size:15px; white-space:nowrap; }
.edition-switch a:hover,.edition-switch a[aria-current="page"] { color:var(--ink); }
.edition-switch a[aria-current="page"]::after { content:""; position:absolute; bottom:-1px; left:0; right:0; height:2px; background:var(--accent); }
.reading-panel { width:min(100%,930px); margin-inline:auto; }
.kicker { max-width:780px; margin:0 0 15px 104px; color:var(--accent-dark); font-size:13px; font-weight:600; }
.reader { max-width:780px; margin-left:104px; border-top:1px solid var(--ink); }
.reader-meta { display:flex; align-items:center; flex-wrap:wrap; gap:6px 18px; padding-top:17px; color:var(--muted); font-size:13px; }
.reader h1 { margin:14px 0 15px; font-size:34px; line-height:1.4; overflow-wrap:break-word; }
.reader-dek { max-width:700px; margin:0 0 27px; color:var(--muted); font-size:17px; line-height:1.85; }
.article-body { max-width:700px; padding-top:24px; border-top:1px solid var(--line); color:var(--ink-soft); font-size:16px; line-height:1.95; overflow-wrap:break-word; }
.article-body p { margin:0 0 18px; }
.article-body strong { font-weight:600; color:var(--ink); }
.article-body section { margin-top:38px; }
.article-body h2 { margin:0 0 16px; color:var(--ink); font-size:22px; line-height:1.55; text-wrap:pretty; }
.article-image { margin:24px 0 26px; }
.article-image img { display:block; width:100%; height:auto; }
.article-image figcaption { margin-top:8px; color:var(--muted); font-size:12px; line-height:1.7; }
.prompt-example { position:relative; margin:26px 0 34px; border-left:2px solid var(--accent); padding:0 0 0 20px; }
.prompt-head { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; margin-bottom:3px; color:var(--accent-dark); font-size:13px; font-weight:600; }
.prompt-example p { color:var(--ink); margin:0; }
.copy-status { display:block; min-height:22px; margin-top:6px; color:var(--accent-dark); font-size:12px; line-height:1.7; }
.article-quote { margin:27px 0; padding:3px 0 3px 20px; border-left:2px solid var(--accent); color:var(--forest); font-family:var(--serif); font-size:21px; line-height:1.85; }
.api-flow { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; list-style:none; padding:0; margin:27px 0; }
.api-flow li { min-width:0; padding-top:12px; border-top:1px solid var(--line-dark); }
.api-flow span { display:block; color:var(--muted); font-size:12px; }
.api-flow strong { display:block; margin-top:6px; font-size:14px; font-weight:500; }
.term-list { margin:24px 0; }
.term-row { display:grid; grid-template-columns:138px minmax(0,1fr); gap:24px; padding:18px 0; border-bottom:1px solid var(--line); }
.term-row:first-child { border-top:1px solid var(--line); }
.term-row dt { color:var(--ink); font-size:16px; font-weight:600; }
.term-row dt span { display:block; margin-top:3px; color:var(--muted); font-size:13px; font-weight:400; }
.term-row dd { margin:0; font-size:15px; line-height:1.9; }
.connection-steps { padding-left:23px; margin:22px 0 24px; }
.connection-steps li { margin-bottom:16px; padding-left:7px; }
.connection-steps li::marker { color:var(--accent-dark); font-size:14px; }
.product-note { margin:26px 0; padding:18px 0; border-block:1px solid var(--line); font-size:15px; line-height:1.9; }
.product-note > strong { display:block; margin-bottom:7px; color:var(--forest); font-size:14px; }
.product-note p { margin:0; }
.article-ending { padding-top:6px; }
.article-endmark { width:24px; height:2px; margin:32px 0 0; background:var(--accent); }
.learn-footer { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 24px; margin-top:64px; padding:20px 0 max(30px,env(safe-area-inset-bottom)); border-top:1px solid var(--line); color:var(--muted); font-size:12px; }
.learn-footer a { display:inline-flex; min-height:44px; align-items:center; gap:8px; }
.learn-footer p { margin:0; }
.learn-footer > a:first-child { color:var(--ink); font-family:var(--serif); font-size:17px; }
.learn-footer a:hover { color:var(--accent-dark); }
.back-top img { transform:rotate(-90deg); }
@media (max-width:1160px) { .nav { gap:12px; } .nav-links { gap:15px; } }
@media (max-width:1040px) {
  .nav { grid-template-columns:1fr auto; }
  .nav-home { display:none; }
  .menu-button { display:inline-grid; }
  .nav-links { position:absolute; top:var(--header); left:16px; right:16px; display:none; padding:12px 20px; grid-template-columns:1fr 1fr; gap:0 20px; background:var(--paper); border:1px solid var(--line); max-height:calc(100dvh - var(--header) - 16px); overflow:auto; }
  .nav-links.is-open { display:grid; }
  .nav-links a { padding:12px 0; justify-self:start; }
  .reader,.kicker { margin-left:64px; }
}
@media (max-width:820px) {
  :root { --header:64px; }
  .container,.nav { width:calc(100% - 32px); }
  .learn-page { padding-top:calc(var(--header) + 28px); }
  .edition-switch { gap:0 20px; margin-bottom:28px; }
  .reading-panel { max-width:700px; }
  .reader,.kicker { margin-left:0; }
  .reader h1 { font-size:28px; }
  .reader-dek { font-size:16px; }
  .article-body { padding-top:20px; }
  .article-body section { margin-top:32px; }
  .article-body h2 { font-size:21px; }
  .article-quote { padding-left:16px; font-size:20px; }
  .prompt-example { padding-left:16px; }
}
@media (max-width:560px) {
  .brand { gap:8px; font-size:14px; }
  .brand-name { gap:6px; }
  .edition-switch { gap:0 18px; }
  .edition-switch a { font-size:13px; }
  .reader h1 { font-size:26px; line-height:1.5; }
  .reader-meta { gap:5px 12px; font-size:12px; }
  .reader-dek { margin-bottom:24px; }
  .desktop-break { display:none; }
  .article-body { line-height:1.95; }
  .article-body h2 { font-size:20px; }
  .article-image { margin:22px 0; }
  .article-quote { font-size:19px; }
  .api-flow { display:block; }
  .api-flow li { display:grid; grid-template-columns:112px minmax(0,1fr); align-items:baseline; gap:8px; padding:13px 0; border-color:var(--line); }
  .api-flow li:last-child { border-bottom:1px solid var(--line); }
  .api-flow strong { margin:0; }
  .term-row { grid-template-columns:1fr; gap:8px; padding:17px 0; }
  .term-row dt { display:flex; align-items:baseline; gap:10px; }
  .term-row dt span { margin:0; }
  .term-row dd { font-size:16px; }
  .learn-footer { margin-top:40px; }
  .learn-footer p { order:3; width:100%; }
}
@media (max-width:359px) { .edition-switch { gap:0 10px; } .reader h1 { font-size:24px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none !important; } }