/* 首屏：左侧客户端窗口，右侧配置手册。 */
.hero { position:relative; height:calc(100vh - var(--nav-h) - var(--peek)); min-height:720px; max-height:880px; overflow:hidden; overflow-x:clip }
.hero::after { content:""; position:absolute; left:0; right:0; bottom:0; height:64px; z-index:4; pointer-events:none; background:linear-gradient(to bottom,var(--c-bg-0),var(--c-bg)) }
.hero-grid { height:100%; display:grid; grid-template-columns:minmax(0,1fr) 480px; column-gap:60px; align-items:center }
.hero-copy { grid-column:2; grid-row:1; position:relative; z-index:5; padding-bottom:28px }
.badge { display:inline-flex; align-items:center; gap:10px; min-height:32px; padding:5px 15px 5px 12px; border:1px solid var(--c-border); border-radius:var(--r-pill); background:var(--c-panel); color:var(--c-text-2); font-size:13px; font-weight:500; box-shadow:var(--shadow-chip); max-width:100%; overflow:hidden; overflow-wrap:anywhere }
.badge-dot { width:8px; height:8px; border-radius:var(--r-circle); background:var(--grad-accent); box-shadow:0 0 0 4px var(--c-accent-halo); flex-shrink:0 }
.hero-title { margin:22px 0 0; font-family:var(--f-display); font-weight:900; font-size:clamp(30px,3.1vw,46px); line-height:1.15; letter-spacing:-.02em; color:var(--c-text) }
.hero-title .line { display:block; white-space:nowrap }
.kw { position:relative; display:inline-block }
.kw-arc { position:absolute; left:-3%; bottom:-.2em; width:106%; height:.34em; overflow:visible; pointer-events:none; color:var(--c-accent) }
.arc-a { stop-color:var(--c-accent-from) }
.arc-b { stop-color:var(--c-accent-dark) }
.hero-cta { display:flex; flex-wrap:wrap; gap:12px; margin-top:32px }
.hero-lead { margin:26px 0 0; max-width:29em; font-size:16.5px; line-height:1.78; color:var(--c-muted) }
.hero-lead strong { color:var(--c-text); font-weight:600 }
.hero-lead code { font-family:var(--f-mono); font-size:.9em; color:var(--c-text-2) }
.chips { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:20px 0 0; padding:0; list-style:none }
.chips-label { font-size:12.5px; font-weight:500; color:var(--c-muted); margin-right:4px }
.chip { display:inline-flex; align-items:center; min-height:28px; padding:4px 12px; max-width:100%; overflow:hidden; overflow-wrap:anywhere; border-radius:var(--r-pill); border:1px solid var(--c-border); background:var(--c-panel); color:var(--c-text-2); font-family:var(--f-mono); font-size:12px; font-weight:500 }
.platforms { margin-top:34px; padding-top:20px; border-top:1px solid var(--c-border); max-width:440px }
.pf-list { display:flex; flex-wrap:wrap; gap:4px; margin:0 0 0 -12px; padding:0; list-style:none }
.pf { display:inline-flex; align-items:center; gap:8px; min-height:34px; padding:7px 12px; border-radius:var(--r-pill); font-size:13.5px; font-weight:500; color:var(--c-muted); transition:background-color var(--ease),color var(--ease) }
.pf svg { width:16px; height:16px; flex-shrink:0 }
.pf:hover { background:var(--c-panel-2); color:var(--c-text) }
.hero-stage { grid-column:1; grid-row:1; align-self:start; position:relative; height:100%; padding-top:44px; min-width:0 }
.hero-stage::before { content:""; position:absolute; left:-10%; right:-10%; top:0; height:86%; z-index:0; pointer-events:none; background:radial-gradient(closest-side,var(--c-panel),var(--c-panel-0)) }
.win { position:relative; z-index:1; width:100%; height:820px; display:grid; grid-template-columns:180px minmax(0,1fr) 284px; grid-template-rows:48px minmax(0,1fr); background:var(--c-panel); color:var(--c-text); border:1px solid var(--c-border); border-radius:var(--r-window); overflow:hidden; box-shadow:var(--shadow-edge),var(--shadow-near),var(--shadow-far); transform:perspective(2400px) rotateX(1deg) rotateY(2deg); transform-origin:50% 0 }
.win > * { min-width:0 }
.bar-side { grid-column:1; grid-row:1; display:flex; align-items:center; gap:8px; padding:0 18px; background:var(--c-panel-2); color:var(--c-text); border-right:1px solid var(--c-border) }
.bar-side i { width:12px; height:12px; border-radius:var(--r-circle); background:var(--c-dot); flex-shrink:0 }
.bar-main { grid-column:2 / 4; grid-row:1; display:flex; align-items:center; justify-content:space-between; padding:0 14px 0 26px; border-bottom:1px solid var(--c-border) }
.bar-title { font-size:14px; font-weight:700; letter-spacing:-.01em; color:var(--c-text) }
.bar-title span { font-weight:500; color:var(--c-muted); margin-left:6px }
.bar-tools { display:flex; gap:6px }
.bar-tool { position:relative; width:30px; height:30px; border-radius:var(--r-sm); display:grid; place-items:center; color:var(--c-muted); background:var(--c-panel-2) }
.bar-tool svg { width:16px; height:16px }
.bar-tool .live { position:absolute; top:5px; right:5px; width:6px; height:6px; border-radius:var(--r-circle); background:var(--c-success); box-shadow:0 0 0 2px var(--c-panel-2),0 0 0 4px var(--c-success-halo) }
.side { grid-column:1; grid-row:2; display:flex; flex-direction:column; padding:4px 10px 18px; background:var(--c-panel-2); color:var(--c-text); border-right:1px solid var(--c-border) }
.side-label { padding:14px 10px 6px; font-size:11px; font-weight:600; letter-spacing:.02em; color:var(--c-muted) }
.side-item { display:flex; align-items:center; gap:9px; min-height:31px; padding:5px 10px; border-radius:var(--r-sm); font-size:13px; color:var(--c-text-2) }
.side-item svg { width:15px; height:15px; flex-shrink:0; color:var(--c-muted) }
.side-item.is-current { background:var(--c-panel-3); color:var(--c-text); font-weight:600 }
.side-val { margin-left:auto; padding:1px 8px; border:1px solid var(--c-border); border-radius:var(--r-pill); background:var(--c-panel); font-family:var(--f-mono); font-size:11px; font-weight:600; color:var(--c-text) }
.outline { grid-column:2; grid-row:2; padding:14px 30px 0 26px; overflow:hidden }
.ol-crumb { display:flex; justify-content:space-between; align-items:center; padding-bottom:12px; border-bottom:1px solid var(--c-border-soft); font-family:var(--f-mono); font-size:11.5px; color:var(--c-muted) }
.ol-sec { padding-top:16px; padding-bottom:12px; border-bottom:1px solid var(--c-border-soft) }
.ol-sec:last-child { border-bottom:0 }
.ol-key { display:flex; align-items:baseline; flex-wrap:wrap; gap:10px; margin-bottom:6px; font-family:var(--f-mono); font-size:17px; font-weight:800; letter-spacing:-.02em; color:var(--c-text) }
.ol-key small,.ol-head small { font-family:var(--f-body); font-size:11.5px; font-weight:500; letter-spacing:0; color:var(--c-muted) }
.ol-head { display:flex; align-items:baseline; flex-wrap:wrap; gap:10px; margin-bottom:6px; font-size:15px; font-weight:800; letter-spacing:-.01em; color:var(--c-text) }
.ol-row { display:flex; align-items:center; flex-wrap:wrap; gap:12px; min-height:30px; font-family:var(--f-mono); font-size:12.5px; color:var(--c-text) }
.ol-tag { min-width:54px; padding:2px 8px; border-radius:var(--r-xs); background:var(--c-panel-2); font-size:11.5px; color:var(--c-muted); text-align:center }
.ol-port { color:var(--c-accent-ink); font-weight:700 }
.ol-name { min-width:72px; font-weight:700 }
.ol-dim { color:var(--c-muted) }
.opt { display:flex; align-items:center; gap:10px; min-height:30px; font-size:13px; color:var(--c-text-2) }
.radio { width:16px; height:16px; flex-shrink:0; border-radius:var(--r-circle); border:1.5px solid var(--c-border-strong); display:grid; place-items:center; background:var(--c-panel); color:var(--c-text) }
.opt.is-on { color:var(--c-text); font-weight:600 }
.opt.is-on .radio { border-color:transparent; background:var(--grad-accent); color:var(--c-ink) }
.tg { position:relative; flex-shrink:0; margin-left:auto; width:30px; height:18px; border-radius:var(--r-pill); background:var(--c-border); color:var(--c-text) }
.tg::after { content:""; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:var(--r-circle); background:var(--c-panel); box-shadow:var(--shadow-knob) }
.tg.is-on { background:var(--c-ink); color:var(--c-on-dark) }
.tg.is-on::after { transform:translateX(12px) }
.rules { grid-column:3; grid-row:2; display:flex; flex-direction:column; padding-top:14px; border-left:1px solid var(--c-border); overflow:hidden }
.rules-head { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:0 16px }
.rules-title { font-size:14px; font-weight:800; letter-spacing:-.01em }
.mode { padding:3px 11px; border:1px solid var(--c-accent-line); border-radius:var(--r-pill); background:var(--c-accent-tint); font-size:11.5px; font-weight:700; color:var(--c-accent-ink) }
.rules-meta { display:flex; justify-content:space-between; margin:12px 16px 0; padding-bottom:12px; border-bottom:1px solid var(--c-border-soft); font-family:var(--f-mono); font-size:11px; color:var(--c-muted) }
.rules-meta b { font-weight:600; color:var(--c-text-2) }
.lane { position:relative; flex:1; padding:4px 16px 0 0; background-image:repeating-linear-gradient(to bottom,var(--c-panel) 0 33px,var(--c-border-soft) 33px 34px) }
.lane-row { display:grid; grid-template-columns:52px minmax(0,1fr); align-items:start }
.lane-k { padding:12px 0 0 16px; font-family:var(--f-mono); font-size:10.5px; color:var(--c-muted) }
.rule { position:relative; margin:6px 0; padding:9px 12px 10px 15px; min-height:60px; border-radius:var(--r-block); background:var(--c-accent-tint); color:var(--c-accent-ink); overflow:hidden }
.rule::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--grad-accent); z-index:2 }
.rule::after { content:""; position:absolute; inset:0; background:var(--c-accent-tint-2); opacity:0; z-index:0; animation:rule-match 8s ease-in-out infinite }
.rule > span { position:relative; z-index:1; display:block }
.rule-d { font-size:11px; font-weight:500; color:var(--c-accent-ink); line-height:1.5 }
.rule-v { margin-top:3px; font-family:var(--f-mono); font-size:12.5px; font-weight:700; color:var(--c-accent-ink); white-space:nowrap }
.rule-v em { font-style:normal; font-weight:500; margin:0 4px }
.rule.is-final { min-height:104px }
.rule.m2::after { animation-delay:2s }
.rule.m3::after { animation-delay:4s }
.rule.m4::after { animation-delay:6s }
.lane-add { margin:14px 0 0 52px; display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--c-muted) }
@keyframes rule-match { 0%,28%,100% { opacity:0 } 6%,20% { opacity:1 } }
.peek { position:relative; z-index:5; border-top:1px solid var(--c-border); background:var(--c-bg); color:var(--c-text); padding-top:8px; padding-bottom:96px }
.peek h2 { margin:28px 0 0; font-size:30px }
.peek p { margin:12px 0 0; max-width:36em; color:var(--c-muted) }

/* 配置分段阅读器与平台 tab 共用 ARIA 结构。 */
.tabs { min-width:0 }
.tab-list,[role="tablist"] { display:flex; align-items:center; gap:8px; max-width:100%; overflow-x:auto; overscroll-behavior-inline:contain; padding:4px; scrollbar-width:thin }
.tab,[role="tab"] { flex-shrink:0; min-height:44px; padding:10px 20px; border:1px solid var(--c-border); border-radius:var(--r-pill); background:var(--c-panel); color:var(--c-muted); font-weight:550; text-align:left }
.tab[aria-selected="true"],[role="tab"][aria-selected="true"] { background:var(--c-panel-2); color:var(--c-text); border-color:var(--c-border-strong); font-weight:750 }
.tab-panel { min-width:0; margin-top:24px }
.config-reader { display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:40px; align-items:start }
.config-reader .tab-list { display:flex; flex-direction:column; align-items:stretch; overflow:visible; padding:0; gap:4px }
.config-reader .tab { position:relative; width:100%; padding:16px 24px; border:0; border-radius:var(--r-sm); background:var(--c-bg-0); color:var(--c-muted) }
.config-reader .tab b { display:block; font-family:var(--f-mono); font-size:17px }
.config-reader .tab span { display:block; margin-top:4px; font-size:13px; font-weight:400 }
.config-reader .tab[aria-selected="true"] { background:var(--c-panel-2); color:var(--c-text) }
.config-reader .tab[aria-selected="true"]::before { content:""; position:absolute; inset:14px auto 14px 0; width:3px; border-radius:var(--r-pill); background:var(--grad-accent) }
.config-reader .tab-panel { margin:0; padding:36px; border:1px solid var(--c-border); border-radius:var(--r-panel); background:var(--c-panel); color:var(--c-text); box-shadow:var(--shadow-near),var(--shadow-far) }
.config-reader pre { margin-bottom:0; background:var(--c-panel-2); color:var(--c-text) }
.json-key { color:var(--c-text) }
.json-value,.json-port { color:var(--c-accent-ink) }
.toc { position:sticky; top:12px; z-index:10; display:flex; flex-wrap:wrap; align-items:center; gap:8px; max-width:100%; padding:12px; overflow-x:visible; overscroll-behavior-inline:contain; border:1px solid var(--c-border); border-radius:var(--r-card); background:var(--c-panel); color:var(--c-text); box-shadow:var(--shadow-chip); scrollbar-width:thin }
.toc a { flex-shrink:0; min-height:44px; padding:10px 16px; border-radius:var(--r-pill); color:var(--c-muted); white-space:nowrap }
.toc a:hover,.toc a[aria-current="location"] { background:var(--c-panel-2); color:var(--c-text) }
.faq-item { border-bottom:1px solid var(--c-border); background:var(--c-panel); color:var(--c-text) }
.faq-item:first-child { border-top:1px solid var(--c-border) }
.faq-item summary { position:relative; padding:22px 44px 22px 24px; font-weight:650; cursor:pointer; list-style:none }
.faq-item summary::-webkit-details-marker { display:none }
.faq-item summary::after { content:"+"; position:absolute; top:22px; right:24px; color:var(--c-muted) }
.faq-item[open] summary::after { content:"−" }
.faq-answer { padding:0 24px 22px; color:var(--c-muted) }
.faq-answer > :last-child { margin-bottom:0 }
.term-card { padding:28px; border-radius:var(--r-card); border:1px solid var(--c-border); background:var(--c-panel); color:var(--c-text); box-shadow:var(--shadow-chip) }
.term-card dt { font-family:var(--f-mono); font-size:20px; font-weight:750 }
.term-card dd { margin:12px 0 0; color:var(--c-muted); line-height:1.85 }
.client-card { padding:32px; border:1px solid var(--c-border); border-radius:var(--r-panel); background:var(--c-panel); color:var(--c-text); box-shadow:var(--shadow-near) }
.client-card.is-primary { border-color:var(--c-accent-line) }
.client-card p { color:var(--c-muted) }
.client-card .btn-row { margin-top:24px }
.client-meta { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:20px; color:var(--c-muted); font-family:var(--f-mono); font-size:13px }
.status-badge { display:inline-flex; align-items:center; gap:6px; min-height:26px; max-width:100%; overflow:hidden; overflow-wrap:anywhere; padding:4px 10px; border:1px solid var(--c-border); border-radius:var(--r-pill); font-size:12px; font-weight:650; background:var(--c-panel-2); color:var(--c-text-2) }
.status-badge.is-first { background:var(--c-accent-tint); color:var(--c-accent-ink); border-color:var(--c-accent-line) }
.status-badge.is-recommended { background:var(--c-panel-2); color:var(--c-success-ink) }
.status-badge.is-retired { background:var(--c-panel-2); color:var(--c-error-ink) }
.article-card { display:flex; flex-direction:column; align-items:flex-start; height:100%; padding:30px; border:1px solid var(--c-border); border-radius:var(--r-card); background:var(--c-panel); color:var(--c-text); box-shadow:var(--shadow-chip); transition:box-shadow var(--ease),transform var(--ease) }
.article-card:hover { box-shadow:var(--shadow-near); transform:translateY(-3px) }
.article-card h3 { margin-top:18px; font-size:21px; line-height:1.5 }
.article-card h3 a:hover { text-decoration:underline; text-underline-offset:4px }
.article-card p { color:var(--c-muted); font-size:14px; line-height:1.85 }
.article-card .text-link { margin-top:auto; font-size:14px }
.article-meta { display:flex; flex-wrap:wrap; align-items:center; gap:12px; max-width:100%; color:var(--c-muted); font-size:12px }
.callout { margin:28px 0; padding:24px 28px; border:1px solid var(--c-accent-line); border-left:3px solid var(--c-accent); border-radius:var(--r-block); background:var(--c-accent-tint); color:var(--c-text-2); line-height:1.85 }
.callout strong { color:var(--c-text) }
.callout > :last-child { margin-bottom:0 }
.table-scroll { max-width:100%; min-width:0; overflow-x:auto; overscroll-behavior-inline:contain; -webkit-overflow-scrolling:touch; border:1px solid var(--c-border); border-radius:var(--r-block) }
.data-table { width:100%; border-collapse:collapse; background:var(--c-panel); color:var(--c-text); text-align:left; font-size:14px }
.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); vertical-align:top; overflow-wrap:normal; word-break:normal }
.data-table th,.prose table th { background:var(--c-panel-2); color:var(--c-text); font-weight:650 }
.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; background:var(--c-panel); color:var(--c-text); overscroll-behavior-inline:contain }
.prose table code,.data-table code { overflow-wrap:anywhere }
.download-guide { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:24px; margin-top:48px; padding:28px; border:1px solid var(--c-border); border-radius:var(--r-card); background:var(--c-panel-2); color:var(--c-text) }
.download-guide h2,.download-guide h3 { margin-bottom:8px; font-size:22px }
.download-guide p { margin:0; color:var(--c-muted) }
.dl-fab { position:fixed; right:24px; bottom:24px; z-index:40; display:inline-flex; align-items:center; gap:9px; min-height:46px; padding:10px 18px 10px 12px; border-radius:var(--r-pill); background:var(--c-ink); color:var(--c-on-dark); font-size:14px; font-weight:600; letter-spacing:-.005em; box-shadow:var(--shadow-fab); transition:transform var(--ease) }
.dl-fab:hover { transform:translateY(-2px) }
.dl-fab-ico { width:24px; height:24px; flex-shrink:0; border-radius:var(--r-circle); background:var(--grad-accent); display:grid; place-items:center; color:var(--c-ink) }
.dl-fab-ico svg { width:13px; height:13px }
html.nav-open .dl-fab { visibility:hidden }

/* 预览页色板：色值只由 base.css 的令牌提供。 */
.swatch-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(175px,1fr)); gap:16px }
.swatch { min-width:0; padding:12px; border:1px solid var(--c-border); border-radius:var(--r-block); background:var(--c-panel); color:var(--c-text); font-family:var(--f-mono); font-size:11px; overflow-wrap:anywhere }
.swatch::before { content:""; display:block; height:56px; margin-bottom:10px; border:1px solid var(--c-border); border-radius:var(--r-xs); background:var(--swatch-color); color:var(--c-text) }
.sw-bg { --swatch-color:var(--c-bg) }
.sw-bg-0 { --swatch-color:var(--c-bg-0) }
.sw-panel { --swatch-color:var(--c-panel) }
.sw-panel-0 { --swatch-color:var(--c-panel-0) }
.sw-panel-2 { --swatch-color:var(--c-panel-2) }
.sw-panel-3 { --swatch-color:var(--c-panel-3) }
.sw-border { --swatch-color:var(--c-border) }
.sw-border-soft { --swatch-color:var(--c-border-soft) }
.sw-border-strong { --swatch-color:var(--c-border-strong) }
.sw-dot { --swatch-color:var(--c-dot) }
.sw-accent { --swatch-color:var(--c-accent) }
.sw-accent-from { --swatch-color:var(--c-accent-from) }
.sw-accent-dark { --swatch-color:var(--c-accent-dark) }
.sw-accent-tint { --swatch-color:var(--c-accent-tint) }
.sw-accent-tint-2 { --swatch-color:var(--c-accent-tint-2) }
.sw-accent-line { --swatch-color:var(--c-accent-line) }
.sw-accent-ink { --swatch-color:var(--c-accent-ink) }
.sw-accent-ink-soft { --swatch-color:var(--c-accent-ink-soft) }
.sw-accent-halo { --swatch-color:var(--c-accent-halo) }
.sw-text { --swatch-color:var(--c-text) }
.sw-text-2 { --swatch-color:var(--c-text-2) }
.sw-muted { --swatch-color:var(--c-muted) }
.sw-faint { --swatch-color:var(--c-faint) }
.sw-ink { --swatch-color:var(--c-ink) }
.sw-on-accent { --swatch-color:var(--c-on-accent) }
.sw-on-dark { --swatch-color:var(--c-on-dark) }
.sw-success { --swatch-color:var(--c-success) }
.sw-success-halo { --swatch-color:var(--c-success-halo) }
.sw-warn { --swatch-color:var(--c-warn) }
.sw-error { --swatch-color:var(--c-error) }
.sw-veil { --swatch-color:var(--c-veil) }
.sw-success-ink { --swatch-color:var(--c-success-ink) }
.sw-error-ink { --swatch-color:var(--c-error-ink) }
@media (max-width:1200px) {
  .hero-grid { grid-template-columns:minmax(0,1fr) 440px; column-gap:44px }
  .win { grid-template-columns:164px minmax(0,1fr) 250px }
  .hero-title .line { white-space:normal }
}
@media (max-width:1000px) {
  .hero { height:auto; min-height:0; max-height:none; overflow:visible; overflow-x:clip }
  .hero::after { display:none }
  .hero-grid { grid-template-columns:minmax(0,1fr); row-gap:8px }
  .hero-copy { grid-column:1; grid-row:1; padding-top:40px; padding-bottom:24px }
  .hero-stage { grid-column:1; grid-row:2; height:560px; overflow:hidden; padding-top:12px }
  .win { height:640px; transform:none }
}
@media (max-width:768px) {
  .hero-title { font-size:30px }
  .config-reader { grid-template-columns:minmax(0,1fr); gap:20px }
  .config-reader .tab-list { flex-direction:row; overflow-x:auto; align-items:center; padding:4px }
  .config-reader .tab { width:auto; padding:12px 18px; border-radius:var(--r-pill); border:1px solid var(--c-border) }
  .config-reader .tab span { display:none }
  .config-reader .tab[aria-selected="true"]::before { display:none }
}
@media (max-width:680px) {
  .hero-lead { font-size:15.5px }
  .hero-stage { height:auto }
  .win { height:auto; grid-template-columns:minmax(0,1fr); grid-template-rows:48px auto; transform:none }
  .win .outline { padding-bottom:20px }
  .bar-side,.side,.rules { display:none }
  .bar-main { grid-column:1 }
  .outline { grid-column:1; padding:12px 20px 0 }
}
@media (max-width:640px) {
  .hero-title { font-size:clamp(24px,6vw,30px) }
  .hero-title .line { white-space:normal }
  .hero-cta { margin-top:28px }
  .platforms { margin-top:24px }
  .pf-list { column-gap:0 }
  .pf { font-size:12px; gap:6px; padding-inline:10px }
  .config-reader .tab-panel,.client-card,.article-card { padding:24px }
  .dl-fab { right:16px; bottom:max(16px,env(safe-area-inset-bottom)) }
  .table-scroll { border-radius:var(--r-sm) }
  .callout { padding:20px }
  .swatch-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .toc { top:8px }
}
@media (prefers-reduced-motion:reduce) {
  .rule::after { animation:none }
}