/* 首屏保留确认稿的三栏尺度；规则窗口承担终端语法展示。 */
.hero {
  position:relative;
  min-height:calc(100vh - var(--nav-h));
  min-height:calc(100svh - var(--nav-h));
  display:grid;
  align-content:center;
  padding-top:16px;
  padding-bottom:calc(var(--bar-h) + 36px);
  overflow:clip;
}
.hero-grid { display:grid; grid-template-columns:380px minmax(0,1fr) 300px; column-gap:12px; align-items:center; }
.lede { position:relative; z-index:2; }
.lede h1 { margin:0; font-weight:400; font-size:var(--h1-size); line-height:1.14; letter-spacing:var(--track-display); }
.h1-brand { display:flex; align-items:center; gap:10px; margin-bottom:22px; font:12px/1 var(--font-mono); letter-spacing:.02em; color:var(--text-muted); }
.h1-brand::before { content:""; width:6px; height:6px; flex-shrink:0; border-radius:var(--r-xs); background:var(--accent); color:var(--bg-panel); }
.h1-line { display:block; white-space:nowrap; }
.lede-desc { margin:28px 0 0; max-width:352px; font-size:var(--body-size); line-height:1.75; color:var(--text-muted); }
.lede-desc strong { color:var(--text); font-weight:500; }
.plats { margin-top:34px; padding-top:18px; max-width:360px; border-top:1px solid var(--border); }
.plats-cap { margin:0 0 12px; font:var(--micro-size)/1.6 var(--font-mono); letter-spacing:.04em; color:var(--text-muted); }
.plats ul { display:flex; flex-wrap:wrap; gap:10px 18px; margin:0; padding:0; list-style:none; }
.plats li { margin:0; }
.plats a { display:inline-flex; align-items:center; gap:7px; font-size:var(--small-size); color:var(--text-muted); text-decoration:none; }
.plats a:hover { color:var(--text); }
.plats svg { width:15px; height:15px; display:block; flex:none; }
.stage { display:grid; place-items:center; position:relative; z-index:1; }
.core { position:relative; width:calc(640px * var(--s)); height:calc(500px * var(--s)); }
.core-halo { position:absolute; left:50%; top:50%; width:calc(640px * var(--s)); height:calc(640px * var(--s)); transform:translate(-50%,-53%); border-radius:var(--r-circle); background:radial-gradient(closest-side,var(--bg-panel) 0%,rgb(var(--paper-rgb) / .72) 42%,rgb(var(--paper-rgb) / 0) 100%); color:var(--text); }
.core-halo::after { content:""; position:absolute; inset:18%; border-radius:var(--r-circle); background:radial-gradient(closest-side,rgb(var(--paper-rgb) / .9) 30%,rgb(var(--paper-rgb) / 0) 100%); color:var(--text); }
.core-tracks { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.track { fill:none; stroke:var(--orbit); stroke-width:1; vector-effect:non-scaling-stroke; }
.core-shadow { position:absolute; left:50%; top:calc(50% + 192px * var(--s)); transform:translate(-50%,-50%); border-radius:var(--r-circle); color:var(--text); }
.core-shadow--wide { width:calc(470px * var(--s)); height:calc(100px * var(--s)); background:radial-gradient(closest-side,rgb(var(--ink-rgb) / .09) 0%,rgb(var(--ink-rgb) / .035) 55%,rgb(var(--ink-rgb) / 0) 100%); }
.core-shadow--mid { width:calc(320px * var(--s)); height:calc(58px * var(--s)); background:radial-gradient(closest-side,rgb(var(--ink-rgb) / .14) 0%,rgb(var(--ink-rgb) / .05) 60%,rgb(var(--ink-rgb) / 0) 100%); }
.core-shadow--near { width:calc(210px * var(--s)); height:calc(26px * var(--s)); background:radial-gradient(closest-side,rgb(var(--ink-rgb) / .2) 0%,rgb(var(--ink-rgb) / 0) 100%); }
.core-block { position:absolute; width:calc(280px * var(--s)); left:calc(50% - 140px * var(--s)); top:calc(50% - 140px * var(--s)); filter:drop-shadow(0 calc(22px * var(--s)) calc(34px * var(--s)) rgb(var(--ink-rgb) / .13)); }
.core-block svg { display:block; width:100%; height:auto; }
.slab-side { fill:var(--accent-dark); }
.stop-face-top { stop-color:var(--face-top); }
.stop-face-base { stop-color:var(--accent); }
.stop-rim { stop-color:var(--bg-panel); }
.core-label { position:absolute; inset:0 0 auto; height:calc(280px * var(--s)); display:flex; flex-direction:column; align-items:center; justify-content:center; font-family:var(--font-mono); line-height:1; }
.core-name { font-size:calc(22px * var(--s)); letter-spacing:.02em; color:var(--bg-panel); }
.core-sub { margin-top:calc(9px * var(--s)); font-size:calc(11px * var(--s)); letter-spacing:.18em; color:var(--core-sub); }
.ring { position:absolute; width:calc(var(--r) * 2); height:calc(var(--r) * 2); left:calc(50% - var(--r)); top:calc(50% - var(--r)); transform:rotate(var(--tilt)) scaleY(var(--k)); }
.ring--a { --r:calc(224px * var(--s)); --tilt:-15deg; --k:.73; --inv:1.3699; }
.ring--b { --r:calc(290px * var(--s)); --tilt:10deg; --k:.68; --inv:1.4706; }
.ring-spin { position:absolute; inset:0; }
.orb { position:absolute; left:50%; top:50%; width:0; height:0; transform:rotate(var(--a)) translateX(var(--r)); }
.orb-tag { position:absolute; left:0; top:0; transform-origin:0 0; transform:rotate(calc(-1 * var(--a))) scaleY(var(--inv)) rotate(calc(-1 * var(--tilt))) translate(-50%,-50%); white-space:nowrap; padding:3px 8px; border-radius:var(--r-pill); background:rgb(var(--bg-rgb) / .94); color:var(--text-muted); font:calc(11px * var(--s))/1.3 var(--font-mono); letter-spacing:.01em; }
.orb-tag--dot { width:6px; height:6px; padding:0; background:var(--orbit-node); color:var(--text); }
.orb--a1 { --a:200deg; }
.orb--a2 { --a:318deg; }
.orb--a3 { --a:78deg; }
.orb--a4 { --a:140deg; }
.orb--b1 { --a:22deg; }
.orb--b2 { --a:142deg; }
.orb--b3 { --a:258deg; }
.orb--b4 { --a:82deg; }
.orb--b5 { --a:320deg; }
.ring--a .ring-spin { animation:spin-cw 120s linear infinite; }
.ring--a .orb-tag { animation:tag-cw 120s linear infinite; }
.ring--b .ring-spin { animation:spin-ccw 120s linear infinite; }
.ring--b .orb-tag { animation:tag-ccw 120s linear infinite; }
@keyframes spin-cw { to { transform:rotate(360deg); } }
@keyframes spin-ccw { to { transform:rotate(-360deg); } }
@keyframes tag-cw {
  from { transform:rotate(calc(-1 * var(--a))) scaleY(var(--inv)) rotate(calc(-1 * var(--tilt))) translate(-50%,-50%); }
  to { transform:rotate(calc(-1 * var(--a) - 360deg)) scaleY(var(--inv)) rotate(calc(-1 * var(--tilt))) translate(-50%,-50%); }
}
@keyframes tag-ccw {
  from { transform:rotate(calc(-1 * var(--a))) scaleY(var(--inv)) rotate(calc(-1 * var(--tilt))) translate(-50%,-50%); }
  to { transform:rotate(calc(-1 * var(--a) + 360deg)) scaleY(var(--inv)) rotate(calc(-1 * var(--tilt))) translate(-50%,-50%); }
}
.side { position:relative; z-index:2; isolation:isolate; justify-self:end; width:300px; }
.side-cap { margin:0 0 16px; font:var(--micro-size)/1.6 var(--font-mono); letter-spacing:.04em; color:var(--text-muted); }
.rule-card { position:relative; margin:0; background:var(--bg-panel); color:var(--text); border:1px solid var(--border); border-radius:var(--r-card); box-shadow:var(--shadow-card); }
.rule-card::before { content:""; position:absolute; inset:0; z-index:-1; transform:translate(-12px,12px); border-radius:var(--r-card); background:var(--bg-panel-2); color:var(--text); border:1px solid var(--border); }
.rule-bar { display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--border); }
.rule-dots { display:flex; gap:6px; flex-shrink:0; }
.rule-dots i { width:8px; height:8px; flex-shrink:0; border-radius:var(--r-circle); border:1px solid var(--border-strong); background:var(--bg-panel-2); color:var(--text); }
.rule-title { font:11.5px/1.6 var(--font-mono); color:var(--text-muted); }
.rule-list { counter-reset:rule; padding:12px 16px 14px; margin:0; list-style:none; }
.rule-list li { counter-increment:rule; display:grid; grid-template-columns:16px minmax(0,1fr) auto; align-items:baseline; column-gap:8px; margin:0; font:12px/2.2 var(--font-mono); color:var(--text-muted); white-space:nowrap; }
.rule-list li::before { content:counter(rule); color:var(--text-muted); font-size:var(--micro-size); }
.rule-list code { font:inherit; }
.rule-arrow { color:var(--text-muted); margin-right:6px; }
.rule-policy { color:var(--text); font-weight:500; }
.facts { display:flex; flex-wrap:wrap; gap:8px; margin:30px 0 0; padding:0; list-style:none; }
.facts li { margin:0; padding:5px 12px; border:1px solid var(--border); border-radius:var(--r-pill); background:var(--bg-panel); color:var(--text-muted); font-size:12px; line-height:1.4; }
.statusbar { position:absolute; inset:auto 0 0; height:var(--bar-h); border-top:1px solid var(--border); }
.statusbar .shell { height:100%; display:flex; align-items:center; gap:28px; font:11.5px/1.6 var(--font-mono); color:var(--text-muted); white-space:nowrap; }
.sb-item { display:inline-flex; align-items:center; gap:8px; flex-shrink:0; }
.sb-key,.sb-end { color:var(--text-muted); }
.sb-mark { width:5px; height:5px; flex-shrink:0; border-radius:var(--r-xs); background:var(--accent); color:var(--bg-panel); }
.sb-end { margin-left:auto; }

/* 资料浏览器与通用标签页 */
.tabs { min-width:0; }
[role="tablist"] { display:flex; flex-wrap:wrap; gap:8px; }
[role="tab"] { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:10px 18px; border:1px solid var(--border); border-radius:var(--r-pill); background:var(--bg-panel); color:var(--text-muted); font-size:var(--small-size); position:relative; }
[role="tab"]:hover { border-color:var(--border-strong); color:var(--text); }
[role="tab"][aria-selected="true"] { background:var(--accent); color:var(--bg-panel); border-color:var(--accent); }
[role="tabpanel"] { min-width:0; margin-top:24px; }
.browser { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(220px,.7fr); align-items:center; gap:80px; }
.browser-window { position:relative; isolation:isolate; min-width:0; background:var(--bg-panel); color:var(--text); border:1px solid var(--border); border-radius:var(--r-window); box-shadow:var(--shadow-window); }
.browser-window::before { content:""; position:absolute; inset:24px 28px -22px -24px; z-index:-1; border:1px solid var(--border); border-radius:var(--r-window); background:var(--bg-panel-2); color:var(--text); }
.window-chrome { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 24px; color:var(--text-muted); font:var(--small-size)/1.5 var(--font-mono); border-bottom:1px solid var(--border); }
.window-tools { display:inline-flex; align-items:center; flex-shrink:0; gap:16px; }
.window-tools svg { width:16px; height:16px; }
.browser-window [role="tabpanel"] { margin:0; padding:28px; }
.browser-window pre { padding:0; background:var(--bg-panel); color:var(--text); border-radius:var(--r-xs); }
.browser-window p { color:var(--text-muted); line-height:1.85; margin-bottom:0; }
.browser-index .eyebrow { margin-bottom:20px; }
.browser-index [role="tablist"] { display:flex; flex-direction:column; align-items:stretch; gap:6px; }
.browser-index [role="tab"] { display:flex; justify-content:flex-start; padding:12px 0 12px 20px; background:var(--bg); color:var(--text-muted); border:0; border-radius:var(--r-xs); font-size:18px; text-align:left; }
.browser-index [role="tab"][aria-selected="true"] { background:var(--bg); color:var(--accent); }
.browser-index [role="tab"][aria-selected="true"]::before { content:""; position:absolute; left:0; top:16px; bottom:16px; width:2px; background:var(--accent); color:var(--bg-panel); }
.browser-index [role="tab"][aria-selected="true"]::after { content:""; position:absolute; bottom:0; left:20px; right:0; height:1px; background:var(--accent); color:var(--bg-panel); transform-origin:left; }
.tabs.is-cycling .browser-index [role="tab"][aria-selected="true"]::after { animation:tab-progress var(--cycle-duration) linear forwards; }
@keyframes tab-progress { from { transform:scaleX(0); } to { transform:scaleX(1); } }
.toc { position:sticky; top:16px; z-index:4; display:flex; flex-wrap:wrap; gap:8px 20px; margin-bottom:40px; padding:16px 20px; border:1px solid var(--border); border-radius:var(--r-card); background:var(--bg); color:var(--text); }
.toc a { display:inline-flex; align-items:center; min-height:32px; color:var(--text-muted); text-decoration:none; font-size:var(--small-size); }
.toc a:hover { color:var(--text); }
.faq-item { padding:0 24px; border:1px solid var(--border); border-radius:var(--r-card); background:var(--bg-panel); color:var(--text); }
.faq-item + .faq-item { margin-top:12px; }
.faq-item summary { position:relative; padding:22px 30px 22px 0; cursor:pointer; list-style:none; font-weight:500; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:"+"; position:absolute; right:0; top:20px; font:22px/1.4 var(--font-mono); color:var(--text-muted); }
.faq-item[open] summary::after { content:"−"; }
.faq-answer { padding-bottom:24px; color:var(--text-muted); line-height:1.85; }
.faq-answer p:last-child { margin-bottom:0; }
.term-card { border-radius:var(--r-card); }
.term-card dt { font-size:var(--h3-size); font-weight:400; line-height:1.4; }
.term-card dd { margin:16px 0 0; color:var(--text-muted); }
.term-card .term-en { display:block; margin-top:8px; font:var(--small-size)/1.5 var(--font-mono); color:var(--text-muted); }
.card-head { display:flex; align-items:flex-start; gap:16px; margin-bottom:20px; }
.client-icon { width:56px; height:56px; flex-shrink:0; }
.client-card h3 { margin-bottom:10px; }
.client-meta { display:flex; flex-wrap:wrap; gap:8px 16px; color:var(--text-muted); font-size:var(--small-size); }
.client-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.client-card--primary { border-color:var(--border-strong); box-shadow:var(--shadow-card); }
[data-version]:empty { display:none; }
.badge,.tag { display:inline-flex; align-items:center; justify-content:center; min-height:26px; max-width:100%; padding:4px 10px; border:1px solid var(--border); border-radius:var(--r-pill); background:var(--bg-panel-2); color:var(--text-muted); font-size:12px; line-height:1.5; white-space:normal; overflow-wrap:anywhere; vertical-align:middle; text-decoration:none; }
.badge--primary { background:var(--accent); color:var(--bg-panel); border-color:var(--accent); }
.badge--recommended { background:var(--bg-panel); color:var(--accent); border-color:var(--border-strong); }
.badge--archived { background:var(--bg-panel-2); color:var(--text-muted); }
.badge-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.post-card { display:flex; flex-direction:column; }
.post-card .post-meta { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:24px; color:var(--text-muted); font-size:12px; }
.post-card h3 a { text-decoration:none; }
.post-card h3 a:hover { text-decoration:underline; }
.post-card p { color:var(--text-muted); }
.post-card .post-link { margin-top:auto; padding-top:16px; font-size:var(--small-size); }
.callout { margin:28px 0; padding:22px 24px; border:1px solid var(--border); border-left:2px solid var(--accent); border-radius:var(--r-sm); background:var(--bg-panel-2); color:var(--text); line-height:1.85; }
.callout p:last-child { margin-bottom:0; }
.table-scroll { width:100%; min-width:0; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--border); border-radius:var(--r-card); }
.data-table { width:100%; border-collapse:collapse; background:var(--bg-panel); color:var(--text); font-size:var(--small-size); }
.data-table th,.data-table td,.prose table th,.prose table td { min-width:7em; padding:16px 20px; text-align:left; vertical-align:top; border-bottom:1px solid var(--border); overflow-wrap:normal; word-break:normal; }
.data-table th { background:var(--bg-panel-2); color:var(--text); font-weight:500; }
.data-table tr:last-child td { border-bottom:0; }
.prose table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; min-width:0; border-collapse:collapse; margin-block:28px; background:var(--bg-panel); color:var(--text); }
.prose table code { overflow-wrap:anywhere; word-break:normal; }
.article-download { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:48px; padding:28px; border:1px solid var(--border); border-radius:var(--r-card); background:var(--bg-panel); color:var(--text); box-shadow:var(--shadow-card); }
.article-download > div { min-width:0; }
.article-download h2,.article-download h3 { margin:0 0 8px; font-size:var(--h3-size); }
.article-download p { margin:0; color:var(--text-muted); font-size:var(--small-size); }
.dl-fab { position:fixed; right:32px; bottom:68px; z-index:20; display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:40px; padding:8px 16px 8px 14px; border-radius:var(--r-pill); background:var(--accent); color:var(--bg-panel); font-size:var(--small-size); font-weight:500; line-height:1.6; text-decoration:none; box-shadow:var(--shadow-fab); transition:transform var(--motion-fast) ease; }
.dl-fab:hover { transform:translateY(-2px); }
.dl-fab svg { width:14px; height:14px; display:block; }
html.nav-open .dl-fab { visibility:hidden; }

/* 预览页色板，不依赖内联样式。 */
.swatches { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:16px; }
.swatch { margin:0; min-width:0; }
.swatch-sample { display:block; height:70px; border:1px solid var(--border); border-radius:var(--r-sm); color:var(--text); }
.swatch figcaption { margin-top:10px; font:var(--micro-size)/1.6 var(--font-mono); overflow-wrap:anywhere; }
.swatch--bg { background:var(--bg); }
.swatch--panel { background:var(--bg-panel); }
.swatch--panel2 { background:var(--bg-panel-2); }
.swatch--border { background:var(--border); }
.swatch--border-strong { background:var(--border-strong); }
.swatch--accent { background:var(--accent); color:var(--bg-panel); }
.swatch--dark { background:var(--accent-dark); color:var(--bg-panel); }
.swatch--text { background:var(--text); color:var(--bg-panel); }
.swatch--muted { background:var(--text-muted); color:var(--bg-panel); }
.swatch--faint { background:var(--text-faint); }
.swatch--orbit { background:var(--orbit); }
.swatch--node { background:var(--orbit-node); }
.swatch--face { background:var(--face-top); color:var(--bg-panel); }
.swatch--sub { background:var(--core-sub); }
.swatch--success { background:var(--success); color:var(--bg-panel); }
.swatch--warn { background:var(--warn); color:var(--bg-panel); }
.swatch--error { background:var(--error); color:var(--bg-panel); }
.preview-block + .preview-block { margin-top:64px; }
.preview-type h2 { margin-bottom:20px; }
.preview-note { margin-top:24px; color:var(--text-muted); font-size:var(--small-size); }
@media (max-width:1320px) {
  .hero-grid { grid-template-columns:340px minmax(0,1fr) 270px; }
  .side { width:270px; }
  .rule-list li { font-size:var(--micro-size); }
}
@media (max-width:1080px) {
  .hero { padding-top:32px; }
  .hero-grid { grid-template-columns:minmax(0,1fr); row-gap:40px; }
  .side { justify-self:start; width:100%; max-width:340px; }
  .statusbar .sb-end { display:none; }
  .browser { grid-template-columns:minmax(0,1fr) 220px; gap:40px; }
}
@media (max-width:760px) {
  .statusbar .shell { gap:18px; overflow:hidden; }
  .statusbar .sb-item--mode { display:none; }
  .dl-fab { right:16px; bottom:60px; }
  .browser { grid-template-columns:minmax(0,1fr); gap:48px; }
  .browser-window::before { inset:18px 18px -16px -10px; }
  .browser-index [role="tablist"] { flex-direction:row; flex-wrap:wrap; gap:8px 20px; }
  .browser-index [role="tab"] { font-size:var(--body-size); }
  .browser-window [role="tabpanel"] { padding:22px; }
  .article-download { flex-direction:column; align-items:flex-start; }
}
@media (max-width:640px) {
  .lede h1 { font-size:var(--h1-size); }
  .rule-list li { font-size:var(--micro-size); }
  .stage { min-width:0; }
  .core { flex-shrink:0; }
  .facts { flex-direction:row; flex-wrap:wrap; }
  .window-chrome { padding:18px 22px; }
}
@media (prefers-reduced-motion:reduce) {
  .ring-spin,.orb-tag { animation:none !important; }
  .tabs.is-cycling .browser-index [role="tab"][aria-selected="true"]::after { animation:none; }
}