/* 静态规则画布：尺寸与叠放沿用已确认的首屏构图。 */
.stage { position:relative; align-self:stretch; overflow:hidden; font-size:clamp(12px,1.1vw,16px); }
.plate { position:absolute; border-radius:var(--r-xl); }
.plate--violet {
  left:3%; width:30%; top:8.5em; bottom:-3em;
  background-color:var(--c-violet); color:var(--c-on-color);
  background-image:linear-gradient(var(--c-grid-line) 1px,var(--c-clear) 1px),linear-gradient(90deg,var(--c-grid-line) 1px,var(--c-clear) 1px);
  background-size:1.75em 1.75em;
}
.dotgrid { position:absolute; left:1.75em; top:3.5em; display:grid; grid-template-columns:repeat(2,1.75em); grid-auto-rows:1.75em; }
.dotgrid i { position:relative; display:block; }
.dotgrid i.on::before { content:""; position:absolute; inset:.14em; border-radius:var(--r-round); background:var(--c-lime); color:var(--c-ink); }
.plate--tomato { left:20%; right:9%; top:5.5em; bottom:-5em; background:var(--c-accent); color:var(--c-ink); border:1px solid var(--c-hair); }
.panel { margin:2.5em 2.5em 0; padding:0 1.25em .35em; background:var(--c-veil); color:var(--c-ink); border:1px solid var(--c-hair); border-radius:var(--r-panel); }
.panel__bar { display:flex; align-items:center; gap:.75em; height:3.25em; border-bottom:1px solid var(--c-hair); }
.win-dots { display:inline-flex; gap:.375em; flex-shrink:0; }
.win-dots i { width:.625em; height:.625em; border-radius:var(--r-round); background:var(--c-win-dot); color:var(--c-ink); }
.panel__path { font-size:.8125em; color:var(--c-muted); }
.mode-pill { margin-left:auto; display:inline-flex; align-items:center; gap:.45em; padding:.28em .8em; border:1px solid var(--c-border); border-radius:var(--r-pill); background:var(--c-bg); color:var(--c-ink); font-size:.8125em; white-space:nowrap; }
.mode-pill i { width:.5em; height:.5em; flex-shrink:0; border-radius:var(--r-round); background:var(--c-accent); color:var(--c-ink); }
.rows { list-style:none; margin:0; padding:0; }
.rows li { position:relative; display:flex; align-items:center; justify-content:space-between; gap:1em; min-height:3.5em; border-bottom:1px solid var(--c-hair); }
.rows li:last-child { border-bottom:0; }
.rows__name { font-size:.9375em; color:var(--c-ink); }
.tg { position:relative; flex-shrink:0; width:2.5em; height:1.5em; border-radius:var(--r-pill); background:var(--c-toggle-off); color:var(--c-ink); }
.tg::after { content:""; position:absolute; top:.1875em; left:.1875em; width:1.125em; height:1.125em; border-radius:var(--r-round); background:var(--c-bg); color:var(--c-ink); }
.tg.is-on { background:var(--c-accent); color:var(--c-ink); }
.tg.is-on::after { transform:translateX(1em); }
.field { display:inline-flex; align-items:center; gap:.6em; font-size:.8125em; color:var(--c-muted); }
.field code { font-family:var(--f-mono); color:var(--c-ink); background:var(--c-bg); border:1px solid var(--c-border); border-radius:var(--r-field); padding:.2em .7em; }
.cursor { position:absolute; z-index:3; display:flex; align-items:flex-start; pointer-events:none; }
.cursor svg { width:1.375em; height:1.375em; flex-shrink:0; }
.cursor svg path { stroke:var(--c-on-color); stroke-width:1.5; stroke-linejoin:round; }
.cursor__tag { margin:1.05em 0 0 -.2em; padding:.22em .6em; border-radius:var(--r-cursor); font-family:var(--f-mono); font-size:.75em; letter-spacing:.02em; white-space:nowrap; }
.cursor--tomato svg { fill:var(--c-accent); }
.cursor--tomato .cursor__tag { background:var(--c-accent-dark); color:var(--c-on-color); }
.cursor--cobalt svg { fill:var(--c-cobalt); }
.cursor--cobalt .cursor__tag { background:var(--c-cobalt); color:var(--c-on-color); }
.cursor--tun { left:1.5em; top:1.05em; }
.card-yaml { position:absolute; right:0; bottom:-2.5em; width:52%; z-index:2; padding-bottom:3.5em; background:var(--c-mint); color:var(--c-ink); border:1px solid var(--c-hair); border-radius:var(--r-xl); }
.card-yaml__bar { display:flex; align-items:center; gap:.55em; height:3.1em; padding:0 1.4em; border-bottom:1px solid var(--c-hair); }
.card-yaml__bar i { width:.5em; height:.5em; flex-shrink:0; border-radius:var(--r-round); background:var(--c-ink); color:var(--c-bg); }
.card-yaml__name { font-family:var(--f-mono); font-size:.8125em; }
.card-yaml__type { margin-left:auto; font-size:.75em; color:var(--c-ink); }
.code { padding:1em 1.4em 0; font-family:var(--f-mono); font-size:.8125em; line-height:1.9; color:var(--c-ink); }
.ln { display:block; white-space:pre; }
.ln__no { display:inline-block; width:1.8em; color:var(--c-ink); opacity:.65; }
.ln__t { position:relative; }
.code .cursor { font-size:1.2308em; left:calc(100% + .35em); top:.5em; }
.card-rules { position:absolute; left:0; bottom:16%; width:13em; z-index:2; padding:1.1em 1.1em 1.25em; background:var(--c-cobalt); color:var(--c-on-color); border:1px solid var(--c-hair); border-radius:var(--r-lg); }
.card-rules__head { display:flex; align-items:center; gap:.5em; margin-bottom:.85em; font-size:.8125em; }
.card-rules__head i { width:.55em; height:.55em; flex-shrink:0; border-radius:var(--r-round); background:var(--c-lime); color:var(--c-ink); }
.card-rules__head span+span { margin-left:auto; font-family:var(--f-mono); }
.rule-pills { list-style:none; margin:0; padding:0; }
.rule-pills li { display:block; width:max-content; padding:.4em .95em; border:1px solid var(--c-on-color-line); border-radius:var(--r-pill); font-family:var(--f-mono); font-size:.75em; letter-spacing:.02em; }
.rule-pills li+li { margin-top:.55em; }
.rule-pills li.is-hit { background:var(--c-lime); border-color:var(--c-lime); color:var(--c-ink); }
.sticker { position:absolute; top:.75em; right:.5%; z-index:2; width:6.25em; height:6.25em; display:grid; place-items:center; background:var(--c-lime); color:var(--c-ink); border:1px solid var(--c-hair); border-radius:var(--r-sticker); transform:rotate(8deg); }
.sticker img { width:4em; height:4em; }
.dl { padding-top:20px; padding-bottom:120px; }
.dl__head { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.dl__title { margin:0; font-size:15px; font-weight:var(--weight-normal); color:var(--c-muted); }
.dl__title::before { content:""; display:inline-block; width:8px; height:8px; margin-right:10px; border-radius:var(--r-round); background:var(--c-accent); color:var(--c-ink); }
.dl__more { font-size:15px; }
.dl__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:24px; }
.dl__cell { display:flex; flex-direction:column; gap:10px; min-height:220px; padding:28px; border:1px solid var(--c-border); border-radius:var(--r-xl); background:var(--c-bg); color:var(--c-ink); }
.dl__cell svg { width:28px; height:28px; }
.dl__name { margin:14px 0 0; font-size:20px; font-weight:var(--weight-normal); }
.dl__desc { margin:0; font-size:14px; color:var(--c-muted); line-height:1.65; }
.dl__link { margin-top:auto; font-size:14px; width:fit-content; }
.tabs { min-width:0; }
.tab-list,[role="tablist"] { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 28px; padding:0; }
[role="tab"] {
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:10px 18px;
  border:1px solid var(--c-border); border-radius:var(--r-pill);
  background:var(--c-bg); color:var(--c-muted); text-align:left;
}
[role="tab"]:hover { border-color:var(--c-border-strong); color:var(--c-ink); }
[role="tab"][aria-selected="true"] { border-color:var(--c-ink); background:var(--c-ink); color:var(--c-on-color); }
[role="tabpanel"] { min-width:0; }
.feature-browser { display:grid; grid-template-columns:minmax(180px,.7fr) minmax(0,2fr); gap:48px; padding:56px; overflow:hidden; }
.feature-browser [role="tablist"] { flex-direction:column; align-items:stretch; gap:8px; }
.feature-browser [role="tab"] { justify-content:flex-start; gap:12px; border:0; border-radius:var(--r-sm); background:var(--c-clear); color:var(--c-muted); }
.feature-browser [role="tab"]::before { content:""; width:7px; height:7px; flex-shrink:0; border-radius:var(--r-round); background:var(--c-border-strong); color:var(--c-ink); }
.feature-browser [role="tab"][aria-selected="true"] { background:var(--c-clear); color:var(--c-ink); }
.feature-browser [role="tab"][aria-selected="true"]::before { background:var(--c-accent); color:var(--c-ink); }
.feature-display { background:var(--c-bg); color:var(--c-ink); border-radius:var(--r-lg); padding:32px; margin-bottom:-88px; padding-bottom:72px; }
.feature-path { margin-bottom:24px; font-size:13px; color:var(--c-muted); }
.setting-sample { border:1px solid var(--c-border); border-radius:var(--r-md); padding:0 24px; margin-bottom:32px; }
.setting-sample .rows li { min-height:64px; }
.feature-display h3 { margin-top:0; }
.toc { position:sticky; top:20px; align-self:start; padding:18px; border:1px solid var(--c-border); border-radius:var(--r-md); background:var(--c-bg); color:var(--c-ink); }
.toc ul { margin:0; padding:0; list-style:none; }
.toc a { display:flex; align-items:center; min-height:44px; padding:8px 10px; font-size:14px; }
.toc a:hover { color:var(--c-accent-dark); }
.toc-tabs { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:36px; }
.toc-tabs a { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:8px 16px; border:1px solid var(--c-border); border-radius:var(--r-pill); background:var(--c-bg); color:var(--c-ink); }
.document-layout { display:grid; grid-template-columns:230px minmax(0,1fr); align-items:start; gap:56px; }
.faq-item { border-bottom:1px solid var(--c-border); }
.faq-item summary { cursor:pointer; padding:22px 36px 22px 0; position:relative; list-style:none; font-size:18px; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:"+"; position:absolute; right:4px; top:22px; color:var(--c-accent-dark); }
.faq-item[open] summary::after { content:"−"; }
.faq-answer { max-width:65em; padding-bottom:24px; color:var(--c-muted); }
.faq-answer p:last-child { margin-bottom:0; }
.term-card { padding:28px; border:1px solid var(--c-border); border-radius:var(--r-xl); background:var(--c-bg); color:var(--c-ink); }
.term-card h3 { margin:12px 0 16px; }
.term-card__en { font-family:var(--f-mono); font-size:13px; color:var(--c-muted); }
.term-card p { margin-bottom:16px; }
.client-card { padding:32px; border:1px solid var(--c-border); border-radius:var(--r-xl); background:var(--c-bg); color:var(--c-ink); }
.client-card--first { border-color:var(--c-accent); }
.client-card__head { display:flex; align-items:center; flex-wrap:wrap; gap:16px; margin-bottom:24px; }
.client-icon { width:56px; height:56px; flex-shrink:0; }
.client-card__title { flex:1; min-width:140px; }
.client-card__title h3 { margin:0 0 6px; }
.client-card__meta { font-size:14px; color:var(--c-muted); }
.client-card__actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
[data-ver]:empty { display:none; }
.badge--first { background:var(--c-accent-dark); color:var(--c-on-color); }
.badge--recommended { background:var(--c-ink); color:var(--c-on-color); }
.badge--archived { background:var(--c-panel); color:var(--c-muted); border:1px solid var(--c-border); }
.post-card { display:flex; flex-direction:column; padding:28px; border:1px solid var(--c-border); border-radius:var(--r-xl); background:var(--c-bg); color:var(--c-ink); }
.post-card__meta { display:flex; align-items:center; flex-wrap:wrap; gap:12px; font-size:13px; color:var(--c-muted); }
.post-card h3 { margin:24px 0 16px; }
.post-card h3 a:hover { text-decoration:underline; text-decoration-color:var(--c-accent); text-underline-offset:5px; }
.post-card p { color:var(--c-muted); }
.post-card>.text-link { margin-top:auto; width:fit-content; }
.callout { margin:28px 0; padding:24px 28px; border:1px solid var(--c-border); border-left:3px solid var(--c-accent); border-radius:var(--r-md); background:var(--c-panel); color:var(--c-ink); }
.callout p:last-child { margin-bottom:0; }
.callout__title { display:block; margin-bottom:10px; font-weight:var(--weight-medium); }
.table-scroll { overflow-x:auto; max-width:100%; min-width:0; overscroll-behavior-inline:contain; }
.data-table { width:100%; border-collapse:collapse; font-size:14px; text-align:left; background:var(--c-bg); color:var(--c-ink); }
.data-table th,.data-table td,.prose table th,.prose table td {
  min-width:7em; padding:16px 20px;
  border-bottom:1px solid var(--c-border);
  overflow-wrap:normal; word-break:normal;
  vertical-align:top;
}
.data-table th,.prose table th { font-weight:var(--weight-medium); background:var(--c-panel); color:var(--c-ink); }
.prose table {
  display:block; overflow-x:auto; -webkit-overflow-scrolling:touch;
  width:100%; max-width:100%; min-width:0;
  border-collapse:collapse; overscroll-behavior-inline:contain;
}
.quick-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; list-style:none; margin:40px 0; padding:0; }
.quick-steps__number { display:block; font-family:var(--f-display); font-size:72px; line-height:1.1; font-weight:var(--weight-normal); margin-bottom:24px; }
.trust-grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; padding:56px; align-items:center; }
.command-box { padding:24px; border:1px solid var(--c-border); border-radius:var(--r-md); background:var(--c-bg); color:var(--c-ink); }
.command-box pre { padding:0; margin:0 0 20px; border:0; border-radius:var(--r-xs); background:var(--c-bg); color:var(--c-ink); }
.article-download { margin-top:56px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:24px; padding:32px; border:1px solid var(--c-border); border-radius:var(--r-xl); background:var(--c-panel); color:var(--c-ink); }
.article-download h2 { font-size:24px; margin:0 0 12px; }
.article-download p { margin:0; max-width:38em; color:var(--c-muted); }
.dl-fab {
  position:fixed; right:24px; bottom:24px; z-index:var(--z-fab);
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  min-height:60px; max-width:calc(100% - 32px); padding:14px 22px;
  border:1px solid var(--c-ink); border-radius:var(--r-md);
  background:var(--c-ink); color:var(--c-on-color);
  font-size:14px; line-height:1.4;
}
.dl-fab svg { width:22px; height:22px; flex-shrink:0; }
.dl-fab:hover { background:var(--c-ink-2); color:var(--c-on-color); }
.has-dl-fab { padding-bottom:100px; }
.preview-stack { display:grid; gap:28px; }
.swatch-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.swatch { border:1px solid var(--c-border); border-radius:var(--r-md); overflow:hidden; background:var(--c-bg); color:var(--c-ink); }
.swatch__paint { height:80px; border-bottom:1px solid var(--c-border); }
.swatch code { display:block; padding:12px; font-size:12px; }
.paint-bg { background:var(--c-bg); color:var(--c-ink); }
.paint-panel { background:var(--c-panel); color:var(--c-ink); }
.paint-green { background:var(--c-block-green); color:var(--c-ink); }
.paint-lavender { background:var(--c-block-violet); color:var(--c-ink); }
.paint-border { background:var(--c-border); color:var(--c-ink); }
.paint-strong { background:var(--c-border-strong); color:var(--c-ink); }
.paint-slash { background:var(--c-slash); color:var(--c-ink); }
.paint-accent { background:var(--c-accent); color:var(--c-ink); }
.paint-accent-dark { background:var(--c-accent-dark); color:var(--c-on-color); }
.paint-ink { background:var(--c-ink); color:var(--c-on-color); }
.paint-ink-2 { background:var(--c-ink-2); color:var(--c-on-color); }
.paint-muted { background:var(--c-muted); color:var(--c-on-color); }
.paint-success { background:var(--c-success); color:var(--c-ink); }
.paint-warn { background:var(--c-warn); color:var(--c-ink); }
.paint-error { background:var(--c-error); color:var(--c-on-color); }
.paint-violet { background:var(--c-violet); color:var(--c-on-color); }
.paint-cobalt { background:var(--c-cobalt); color:var(--c-on-color); }
.paint-lime { background:var(--c-lime); color:var(--c-ink); }
.paint-mint { background:var(--c-mint); color:var(--c-ink); }
.paint-white { background:var(--c-on-color); color:var(--c-ink); }
.paint-soft { background:var(--c-on-color-soft); color:var(--c-ink); }
.paint-line { background:var(--c-on-color-line); color:var(--c-ink); }
.paint-veil { background:var(--c-veil); color:var(--c-ink); }
.paint-hair { background:var(--c-hair); color:var(--c-ink); }
.paint-ink-soft { background:var(--c-ink-soft); color:var(--c-ink); }
.paint-grid { background:var(--c-grid-line); color:var(--c-ink); }
.paint-toggle { background:var(--c-toggle-off); color:var(--c-ink); }
.paint-dot { background:var(--c-win-dot); color:var(--c-ink); }
.paint-clear { background:var(--c-clear); color:var(--c-ink); }
.paint-overlay { background:var(--c-overlay); color:var(--c-ink); }
@media (max-width:1100px) {
  .dl__grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .feature-browser { gap:28px; padding:36px; }
  .document-layout { grid-template-columns:190px minmax(0,1fr); gap:32px; }
}
@media (max-width:900px) {
  .stage { height:66vw; font-size:2.05vw; border-radius:var(--r-lg); }
  .stage .card-yaml { display:none; }
  .dl__grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .feature-browser { grid-template-columns:minmax(0,1fr); }
  .feature-browser [role="tablist"] { flex-direction:row; }
  .trust-grid { grid-template-columns:minmax(0,1fr); gap:32px; padding:32px; }
  .document-layout { grid-template-columns:minmax(0,1fr); }
  .toc { position:static; }
  .swatch-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:640px) {
  .dl { padding-bottom:64px; }
  .dl__head { flex-wrap:wrap; gap:16px; }
  .dl__grid { grid-template-columns:minmax(0,1fr); }
  .dl__cell { padding:22px; }
  .dl__name { font-size:18px; }
  .feature-browser { padding:24px 20px; }
  .feature-display { padding:24px; padding-bottom:64px; }
  .quick-steps { grid-template-columns:minmax(0,1fr); gap:28px; }
  .quick-steps__number { font-size:56px; margin-bottom:12px; }
  .trust-grid { padding:24px; }
  .client-card { padding:24px; }
  .client-card__head { gap:12px; }
  .swatch-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .dl-fab { right:16px; bottom:16px; min-height:52px; padding:12px 16px; }
}
@media (max-width:360px) {
  .dl__grid { grid-template-columns:minmax(0,1fr); }
}