:root {
  color-scheme: light dark;
  --bg:#fff; --surface:#fff; --ink:#1d1d1f; --muted:#626266;
  --line:#d2d2d7; --accent:#0066cc; --demo:#f5f5f7; --selected:#e8f2ff;
  --header:#161617; --header-ink:#f5f5f7; --header-muted:#b5b5bc;
}
@media (prefers-color-scheme:dark) {
  :root { --bg:#000; --surface:#1d1d1f; --ink:#f5f5f7; --muted:#b5b5bc; --line:#424245; --accent:#2997ff; --demo:#161617; --selected:#10263c; }
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:88px; }
body { margin:0; background:var(--bg); color:var(--ink); font:17px/1.6 -apple-system,BlinkMacSystemFont,"Helvetica Neue","PingFang SC",sans-serif; -webkit-font-smoothing:antialiased; }
html[lang="zh-Hans"] [lang="en"],html[lang="en"] [lang="zh-Hans"] { display:none !important; }
a { color:inherit; text-decoration:none; }
button { font:inherit; cursor:pointer; }
a,button,summary { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
.shell { width:min(1024px,calc(100% - 96px)); margin-inline:auto; }
.skip-link { position:fixed; z-index:10; top:8px; left:8px; padding:12px; background:var(--ink); color:var(--bg); transform:translateY(-150%); }
.skip-link:focus { transform:none; }
.site-header { position:sticky; top:0; z-index:5; background:var(--header); color:var(--header-ink); }
@supports (backdrop-filter:blur(20px)) {
  .site-header { background:rgb(22 22 23 / 94%); backdrop-filter:saturate(180%) blur(20px); }
}
.header-inner { min-height:64px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand { display:flex; gap:12px; align-items:center; min-height:44px; font-weight:600; font-size:15px; line-height:1.3; }
.brand img { flex:none; border-radius:8px; }
.language-switch { display:flex; flex:none; gap:2px; }
.language-switch button { min-width:44px; min-height:44px; padding:8px 12px; border:0; border-radius:8px; color:var(--header-muted); background:transparent; font-size:13px; transition:color 160ms ease-out,background 160ms ease-out; }
.language-switch button[aria-pressed="true"] { background:#333336; color:#fff; font-weight:600; }
.language-switch button:hover { color:#fff; }
.language-switch button:active { transform:scale(.95); }
.site-header :focus-visible { outline-color:#2997ff; }
.introduction { padding:32px 0 28px; border-bottom:1px solid var(--line); margin-bottom:32px; }
h1 { font-size:2rem; line-height:1.2; letter-spacing:-.025em; font-weight:600; margin:0; text-wrap:balance; }
.history-layout { display:grid; grid-template-columns:120px minmax(0,1fr); gap:40px; align-items:start; }
.version-nav { position:sticky; top:88px; display:flex; flex-direction:column; align-items:stretch; gap:4px; padding-bottom:24px; }
.version-nav p { color:var(--muted); font-size:12px; margin:0 0 14px; }
.version-nav a { display:flex; align-items:center; min-height:44px; padding:8px 14px; border-radius:8px; font-size:15px; font-variant-numeric:tabular-nums; color:var(--muted); transition:color 160ms ease-out,background 160ms ease-out; }
.version-nav a[aria-current="true"] { color:var(--accent); background:var(--selected); font-weight:600; }
.version-nav a:hover { color:var(--accent); background:var(--demo); }
.timeline { margin:0; padding:0; list-style:none; min-width:0; }
.release { display:grid; grid-template-columns:96px minmax(0,1fr); gap:24px; padding:32px 0; border-bottom:1px solid var(--line); scroll-margin-top:8px; }
.release:first-child { padding-top:0; }
.release:last-child { border-bottom:0; margin-bottom:16px; }
.release:not(:first-child) { content-visibility:auto; contain-intrinsic-size:auto 260px; }
.release-meta { display:flex; flex-direction:column; align-items:flex-start; gap:4px; font-variant-numeric:tabular-nums; font-weight:600; font-size:14px; }
.release-meta a { color:var(--accent); display:inline-flex; align-items:center; min-height:44px; margin-top:-8px; }
.release-meta a:hover { text-decoration:underline; text-underline-offset:4px; }
.latest { color:var(--muted); background:var(--demo); padding:4px 8px; border-radius:6px; font-size:12px; font-weight:400; line-height:1.5; }
article { min-width:0; }
h2 { font-size:26px; font-weight:600; line-height:1.3; letter-spacing:-.02em; margin:0 0 16px; text-wrap:balance; }
.features { margin:0; padding-left:18px; display:grid; gap:8px; color:var(--ink); }
.features li { padding-left:4px; }
.features li::marker { color:var(--muted); font-size:.65em; }
.release-visual { display:flex; flex-wrap:wrap; align-items:flex-start; gap:4px 24px; min-width:0; margin-top:12px; }
.release-visual:empty { display:none; }
.release-visual details { min-width:0; }
.release-visual details[open] { flex-basis:100%; }
.release-visual summary { display:flex; align-items:center; gap:10px; list-style:none; cursor:pointer; min-height:44px; color:var(--accent); padding:10px 0; font-size:14px; }
.release-visual summary::-webkit-details-marker { display:none; }
.release-visual summary::before { content:""; width:6px; height:6px; flex:none; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(-45deg); }
.release-visual details[open]>summary::before { transform:rotate(45deg); }
.release-visual summary:hover { text-decoration:underline; text-underline-offset:4px; }
.illustration-preview .demo { width:100%; max-width:380px; margin:8px 0 12px; }
.demo { padding:28px; background:var(--demo); border-radius:18px; font-size:14px; line-height:1.47; }
.demo svg { display:block; width:22px; height:22px; flex:none; }
.address { display:flex; align-items:center; gap:8px; padding:12px; background:var(--surface); border-radius:8px; }
.address span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.address svg { width:14px; height:14px; color:var(--muted); }
.address b { margin-left:auto; }
.reading-lines { display:grid; gap:12px; padding:28px 0; }
.reading-lines i { display:block; height:4px; background:var(--line); border-radius:4px; }
.reading-lines i:nth-child(2) { width:80%; }.reading-lines i:nth-child(3) { width:55%; }
.toolbar { display:flex; justify-content:space-between; gap:12px; color:var(--ink); }
.toolbar>div { display:flex; gap:16px; padding:12px 0; }
.type-demo { display:flex; align-items:center; gap:24px; min-height:176px; }
.type-demo>strong { font-size:56px; font-weight:600; letter-spacing:-.03em; line-height:1; }
.type-demo>div { flex:1; min-width:0; }.type-demo h3 { font-size:18px; font-weight:600; margin:0; }
.return-demo { display:flex; align-items:center; gap:24px; min-height:176px; }
.return-arrow { color:var(--ink); }.return-arrow svg { width:32px; height:32px; }
.video-window { flex:1; display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center; padding:28px 12px; border-radius:8px; background:var(--surface); }
.video-window svg { width:30px; height:30px; }
.link-demo,.favorite-demo { padding:20px; border-radius:8px; background:var(--surface); }
.link-heading,.saved-page { display:flex; align-items:center; gap:12px; }
.link-heading svg,.saved-page svg { width:28px; height:28px; }
.demo small { display:block; margin-top:4px; color:var(--muted); font-size:12px; }
.demo-actions { display:flex; gap:12px; margin-top:24px; }
.demo-actions>span { flex:1; text-align:center; padding:9px 8px; background:var(--demo); border-radius:999px; }
.demo-actions>span:nth-child(n+3) { background:var(--accent); color:#fff; }
.favorite-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:28px; }
.app-capture { margin:0; }
.app-capture figure { margin:12px 0 0; }.capture-slot { max-width:260px; margin-inline:0; background:var(--demo); border-radius:18px; overflow:hidden; aspect-ratio:1206/2622; }
.capture-slot img { display:block; width:100%; height:auto; }.app-capture figcaption { max-width:260px; font-size:12px; color:var(--muted); margin-top:12px; text-align:center; }.capture-error { font-size:14px; }
.site-footer { background:var(--demo); }
.footer-inner { display:flex; justify-content:space-between; gap:24px; padding-block:32px; font-size:12px; color:var(--muted); }
.footer-inner a { display:inline-flex; align-items:center; min-height:44px; color:var(--accent); }
.footer-inner a:hover { text-decoration:underline; }
@media(max-width:900px) {
  .shell { width:calc(100% - 64px); }.history-layout { grid-template-columns:104px minmax(0,1fr); gap:24px; }
  .release { grid-template-columns:1fr; gap:8px; }.release-meta { flex-direction:row; align-items:center; gap:12px; }.release-meta a { margin-top:0; }
}
@media(max-width:600px) {
  .shell { width:calc(100% - 40px); }.header-inner { min-height:60px; }.brand { font-size:13px; gap:8px; }.brand img { width:28px; height:28px; }
  .language-switch button { padding-inline:10px; }.introduction { padding:24px 0; margin-bottom:20px; }h1 { font-size:28px; }
  .history-layout { display:block; }.version-nav { position:static; flex-direction:row; flex-wrap:wrap; gap:4px; padding:0; margin-bottom:20px; }
  .version-nav p { width:100%; margin:0 0 4px; }.version-nav a { padding:8px 10px; font-size:13px; }
  h2 { font-size:23px; margin-bottom:12px; }.release { padding:24px 0; }.release-meta { gap:12px; }.features { gap:8px; }
  .demo { padding:24px; }.type-demo { min-height:152px; }html { scroll-padding-top:80px; }.footer-inner { padding-block:20px; flex-wrap:wrap; gap:8px 24px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }*,*::before,*::after { transition:none !important; }.language-switch button:active { transform:none; } }
@media(prefers-reduced-transparency:reduce) { .site-header { background:var(--header); backdrop-filter:none; } }
@media(prefers-contrast:more) { :root { --muted:var(--ink); --line:var(--ink); }.site-header { background:var(--header); backdrop-filter:none; }.version-nav a[aria-current="true"] { outline:1px solid var(--accent); outline-offset:-1px; } }
@media(forced-colors:active) { .language-switch button[aria-pressed="true"],.version-nav a[aria-current="true"] { outline:1px solid Highlight; }.reading-lines i { background:CanvasText; } }