/* 首屏：装饰与正文分层，装饰只在此处持续浮移。 */
.stage {
  position: relative;
  min-height: calc(100vh - var(--nav-h) - var(--peek));
  min-height: calc(100svh - var(--nav-h) - var(--peek));
  display: grid;
  align-content: center;
  justify-items: center;
  padding: 56px 24px 64px;
  overflow-x: hidden;
  overflow-x: clip;
}
.stage__tiles { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.slot { position: absolute; animation: drift 14s ease-in-out infinite; animation-delay: var(--delay, 0s); }
.tile {
  position: relative;
  width: var(--s);
  height: var(--s);
  border-radius: max(var(--r-tile), 24%);
  background: linear-gradient(150deg, var(--c1), var(--c2));
  color: var(--text);
  box-shadow: inset 0 1px 0 var(--white-hi), inset 0 0 0 1px var(--white-line), inset 0 -18px 32px -18px var(--ink-08), 0 56px 110px -40px var(--glow);
  transform: rotate(var(--rot));
  -webkit-backdrop-filter: blur(12px) saturate(1.25);
  backdrop-filter: blur(12px) saturate(1.25);
}
.tile::before { content: ""; position: absolute; inset: 16px; border-radius: max(calc(var(--r-tile) - 14px), 20%); border: 1px solid var(--white-line); }
.tile::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 30%;
  top: 7%;
  height: 22%;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--white-line), var(--transparent));
  color: var(--text);
  opacity: .55;
}
.tile__glyph { position: absolute; z-index: 1; width: var(--g, 72px); height: var(--g, 72px); fill: none; stroke: var(--white-glyph); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.slot--sky { top: -110px; left: -130px; --delay: 0s; --amp: -9px; }
.slot--sky .tile { --s: 420px; --rot: -12deg; --c1: var(--sky-a1); --c2: var(--sky-a2); --glow: var(--sky-glow); }
.slot--sky .tile__glyph { right: 86px; bottom: 84px; --g: 76px; }
.slot--coral-top { top: 158px; left: -158px; --delay: -4s; --amp: -7px; }
.slot--coral-top .tile { --s: 312px; --rot: 16deg; --c1: var(--coral-a1); --c2: var(--coral-a2); --glow: var(--coral-glow); }
.slot--coral-low { bottom: -72px; left: 58px; --delay: -9s; --amp: -6px; }
.slot--coral-low .tile { --s: 196px; --rot: 14deg; --c1: var(--coral-a1); --c2: var(--coral-a2); --glow: var(--coral-glow); }
.slot--coral-low .tile__glyph { top: 34px; left: 40px; --g: 60px; }
.slot--lime { top: -120px; right: -112px; --delay: -2s; --amp: -10px; z-index: 2; }
.slot--lime .tile { --s: 420px; --rot: 14deg; --c1: var(--lime-a1); --c2: var(--lime-a2); --glow: var(--lime-glow); }
.slot--lime .tile__glyph { left: 84px; bottom: 86px; --g: 76px; }
.slot--sun { top: 196px; right: -172px; --delay: -7s; --amp: -7px; z-index: 1; }
.slot--sun .tile { --s: 324px; --rot: -10deg; --c1: var(--sun-a1); --c2: var(--sun-a2); --glow: var(--sun-glow); }
.slot--sun .tile__glyph { left: 44px; top: 124px; --g: 66px; }
.slot--tangerine { bottom: -62px; right: 42px; --delay: -11s; --amp: -8px; }
.slot--tangerine .tile { --s: 240px; --rot: 18deg; --c1: var(--tangerine-a1); --c2: var(--tangerine-a2); --glow: var(--tangerine-glow); }
.slot--tangerine .tile__glyph { top: 40px; left: 44px; --g: 64px; }
@keyframes drift { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, var(--amp, -8px), 0); } }
.stage__body { position: relative; z-index: 3; max-width: 760px; width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; }
.tag { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; margin: 0; padding: 6px 16px 6px 12px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--white); color: var(--muted); font-size: 13.5px; font-weight: var(--weight-medium); box-shadow: var(--shadow-sm); }
.tag__dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: var(--r-circle); background: var(--success); color: var(--text); box-shadow: 0 0 0 4px var(--success-ring); }
.mark { display: block; margin: 28px 0 0; font-family: var(--font-display); font-weight: var(--weight-black); }
.mark__word { display: inline-block; font-size: var(--text-h1); line-height: 1.12; letter-spacing: -.02em; color: var(--text); white-space: nowrap; }
.mark__hl { position: relative; isolation: isolate; margin-inline: .1em; padding-inline: .2em; color: var(--white); letter-spacing: 0; }
.mark__hl::before {
  content: "";
  position: absolute;
  inset: .1em 0 -.16em;
  z-index: -1;
  border-radius: var(--r-hl);
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent) 55%, var(--accent-dark) 100%);
  color: var(--white);
  box-shadow: inset 0 1px 0 var(--white-line), 0 14px 28px -12px var(--accent-glow);
  transform: translate(.05em, .04em) rotate(-2deg);
}
.mark__sub { display: block; margin-top: 16px; font-size: clamp(18px, 1.65vw, 24px); font-weight: var(--weight-bold); line-height: 1.3; letter-spacing: -.005em; color: var(--text); }
.k { display: inline-block; animation: rise .62s var(--ease) both; animation-delay: var(--d, 0s); }
.k--1 { --d: 0s; }
.k--2 { --d: .14s; }
.k--3 { --d: .28s; }
.k--4 { --d: .46s; }
@keyframes rise { from { opacity: 0; transform: translateY(.5em); } to { opacity: 1; transform: translateY(0); } }
.cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 36px; }
.lede { max-width: 560px; margin: 24px 0 0; color: var(--muted); font-size: var(--text-lede); line-height: 1.75; }
.lede strong { color: var(--text); font-weight: var(--weight-bold); }
.os-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: 30px; color: var(--text); }
.os-row__link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding-inline: 14px; border-radius: var(--r-pill); color: inherit; font-size: var(--text-sm); font-weight: var(--weight-semibold); transition: background-color var(--transition); }
.os-row__link:hover { background: var(--panel); color: var(--text); text-decoration: none; }
.os-row__link svg { width: 17px; height: 17px; flex-shrink: 0; }
.facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; padding: 0; list-style: none; }
.facts__item { max-width: 100%; padding: 5px 13px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--white); color: var(--muted); font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.5; overflow-wrap: anywhere; }

.lab { position: relative; z-index: 4; padding: 0 24px 96px; }
.lab__panel { max-width: var(--wrap); margin-inline: auto; padding: 52px 56px 56px; border-radius: var(--r-panel); background: var(--panel); color: var(--text); box-shadow: 0 -1px 0 var(--white-hi) inset; }
.lab__eyebrow { margin: 0; color: var(--muted); font-size: 13px; font-weight: var(--weight-bold); letter-spacing: .08em; }
.lab__title { margin: 10px 0 0; font-size: 30px; font-weight: var(--weight-heavy); letter-spacing: -.015em; line-height: 1.25; }
.lab__text { max-width: 620px; margin: 12px 0 0; color: var(--muted); }
.lab__browser { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 32px; margin-top: 32px; }
.tabs__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; padding: 6px; border-radius: var(--r-panel); background: var(--panel); color: var(--text); }
.tabs__tab { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 12px 20px; border-radius: var(--r-pill); background: var(--transparent); color: var(--muted); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.tabs__tab:hover { background: var(--panel-2); color: var(--text); }
.tabs__tab[aria-selected="true"] { background: var(--white); color: var(--accent-dark); box-shadow: var(--shadow-sm); }
.lab__browser > .tabs__list { flex-direction: column; flex-wrap: nowrap; align-self: start; margin: 0; padding: 0; gap: 10px; border-radius: var(--r-md); }
.lab__browser .tabs__tab { width: 100%; justify-content: flex-start; min-height: 52px; }
.tabs__progress { position: absolute; bottom: 0; left: 20px; right: 20px; height: 2px; border-radius: var(--r-pill); background: var(--accent); color: var(--white); transform: scaleX(0); transform-origin: left; }
.is-playing .tabs__tab[aria-selected="true"] .tabs__progress { animation: tab-clock var(--tab-duration) linear both; }
@keyframes tab-clock { to { transform: scaleX(1); } }
.tabs__panel { min-width: 0; }
.lab__detail { position: relative; min-height: 310px; padding: 36px; border-radius: var(--r-card); background: var(--white); color: var(--text); box-shadow: var(--shadow-md); overflow-x: clip; }
.lab__detail h3 { margin: 0 0 14px; }
.lab__detail p { max-width: 620px; }
.lab__config { max-width: 280px; margin: 20px 0 0 auto; padding: 18px 22px; border-radius: var(--r-card); background: linear-gradient(150deg, var(--sky-a1), var(--sky-a2)); color: var(--text); transform: rotate(-4deg); box-shadow: inset 0 1px 0 var(--white-hi), var(--shadow-sm); }
.lab__config code { font-size: var(--text-xs); }
.scenario-band { min-height: 78svh; display: grid; align-content: center; background: var(--band); color: var(--text); padding-top: 96px; padding-bottom: 96px; }
.scenario-band h2 { margin-top: 0; }
.scenario-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.scenario-card { min-height: 280px; padding: 32px 28px; border-radius: var(--r-panel); background: var(--white); color: var(--text); box-shadow: var(--shadow-md); }
.scenario-card h3 { margin-top: 0; }
.scenario-card p { color: var(--muted); }
.scenario-card__pick { display: block; margin-top: 24px; font-weight: var(--weight-bold); }

.toc { position: sticky; top: calc(var(--nav-h) + 12px); z-index: 10; display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--white); color: var(--text); box-shadow: var(--shadow-sm); margin-bottom: 32px; }
.toc a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 16px; border-radius: var(--r-pill); color: var(--text); font-size: var(--text-sm); }
.toc a:hover, .toc a[aria-current] { background: var(--panel); color: var(--text); text-decoration: none; }
.faq { border-bottom: 1px solid var(--border); }
.faq summary { display: block; position: relative; padding: 22px 40px 22px 0; list-style: none; cursor: pointer; font-weight: var(--weight-semibold); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 8px; top: 20px; color: var(--muted); font-size: 22px; }
.faq[open] summary::after { content: "−"; }
.faq__answer { padding-bottom: 22px; color: var(--muted); max-width: 760px; }
.faq__answer p:last-child { margin-bottom: 0; }
.term-card { padding: 28px; border-radius: var(--r-card); background: var(--white); color: var(--text); box-shadow: var(--shadow-sm); border: 1px solid var(--border); }
.term-card h3 { margin: 12px 0; }
.term-card__name { color: var(--muted); font-family: var(--font-mono); font-size: var(--text-xs); }
.client-card { padding: 32px; border: 1px solid var(--border); border-radius: var(--r-panel); background: var(--white); color: var(--text); box-shadow: var(--shadow-md); }
.client-card--primary { border-color: var(--accent); box-shadow: var(--shadow-lg); }
.client-card__head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.client-card__head > div { min-width: 0; }
.client-card__icon { width: 56px; height: 56px; flex-shrink: 0; }
.client-card__head h3 { margin: 0 0 8px; overflow-wrap: anywhere; }
.client-card__meta { display: flex; flex-wrap: wrap; gap: 12px; color: var(--muted); font-size: var(--text-sm); }
.client-card__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
[data-rev]:empty { display: none; }
.badges { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.badge { display: inline-flex; align-items: center; justify-content: center; max-width: 100%; padding: 5px 12px; border-radius: var(--r-pill); background: var(--panel); color: var(--muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); line-height: 1.5; overflow-wrap: anywhere; }
.badge--first { background: var(--accent-soft); color: var(--accent-dark); }
.badge--recommended { background: var(--panel); color: var(--text); box-shadow: 0 0 0 4px var(--success-ring); }
.badge--archived { background: var(--panel-2); color: var(--text); }
.badge--warning { background: var(--panel); color: var(--text); border-left: 3px solid var(--warn); }
.badge--error { background: var(--panel); color: var(--text); border-left: 3px solid var(--error); }
.post-card { display: flex; flex-direction: column; padding: 28px; border-radius: var(--r-card); background: var(--white); color: var(--text); box-shadow: var(--shadow-md); }
.post-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; color: var(--muted); font-size: var(--text-xs); }
.post-card h3 { margin: 20px 0 12px; }
.post-card h3 a { color: var(--text); }
.post-card p { color: var(--muted); }
.post-card__link { align-self: flex-start; margin-top: auto; font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.callout { margin: 24px 0; padding: 22px 24px; border-left: 3px solid var(--border); border-radius: var(--r-sm); background: var(--panel); color: var(--text); }
.callout--warn { border-left-color: var(--warn); }
.callout--error { border-left-color: var(--error); }
.callout--success { border-left-color: var(--success); }
.callout p:last-child { margin-bottom: 0; }
.table-scroll { max-width: 100%; min-width: 0; overflow-x: auto; overscroll-behavior-inline: contain; border: 1px solid var(--border); border-radius: var(--r-md); }
.data-table { width: 100%; border-collapse: collapse; background: var(--white); color: var(--text); text-align: left; font-size: var(--text-sm); }
.data-table :is(th, td), .prose table :is(th, td) { min-width: 7em; padding: 16px 20px; border-bottom: 1px solid var(--border); vertical-align: top; overflow-wrap: normal; word-break: normal; }
.data-table th, .prose table th { background: var(--panel); color: var(--text); font-weight: var(--weight-semibold); }
.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(--white); color: var(--text); }
.prose table code, .data-table code { overflow-wrap: anywhere; word-break: normal; }
.article-download { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; margin-top: 48px; padding: 28px 32px; border-radius: var(--r-card); background: var(--panel); color: var(--text); }
.article-download__text { flex: 1 1 240px; min-width: 0; }
.article-download h2 { margin: 0 0 8px; font-size: var(--text-h3); }
.article-download p { margin: 0; color: var(--muted); }
.dl-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  padding: 0 20px 0 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--nav-glass);
  color: var(--text);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
  backdrop-filter: saturate(1.6) blur(16px);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  box-shadow: var(--shadow-lg);
  transition: transform var(--transition);
}
.dl-fab:hover { transform: translateY(-2px); text-decoration: none; }
.dl-fab__icon { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: var(--r-circle); background: var(--accent); color: var(--white); }
.dl-fab__icon svg { width: 16px; height: 16px; }
html.nav-open .dl-fab { visibility: hidden; }

/* 预览色卡：名称在独立白底标签上，不把浅色令牌用作文字。 */
.palette-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.swatch { margin: 0; padding: 8px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--white); color: var(--text); }
.swatch__paint { display: block; height: 64px; border-radius: var(--r-sm); background: var(--swatch); color: var(--text); border: 1px solid var(--border); }
.swatch figcaption { padding: 10px 4px 4px; font-family: var(--font-mono); font-size: var(--text-xs); overflow-wrap: anywhere; }
.sw-bg { --swatch: var(--bg); }
.sw-panel { --swatch: var(--panel); }
.sw-panel-2 { --swatch: var(--panel-2); }
.sw-border { --swatch: var(--border); }
.sw-accent { --swatch: var(--accent); }
.sw-accent-dark { --swatch: var(--accent-dark); }
.sw-text { --swatch: var(--text); }
.sw-muted { --swatch: var(--muted); }
.sw-success { --swatch: var(--success); }
.sw-warn { --swatch: var(--warn); }
.sw-error { --swatch: var(--error); }
.sw-white { --swatch: var(--white); }
.sw-sky { --swatch: var(--tile-sky); }
.sw-coral { --swatch: var(--tile-coral); }
.sw-lime { --swatch: var(--tile-lime); }
.sw-sun { --swatch: var(--tile-sun); }
.sw-tangerine { --swatch: var(--tile-tangerine); }
.sw-band { --swatch: var(--band); }
.sw-sky-a1 { --swatch: var(--sky-a1); }
.sw-sky-a2 { --swatch: var(--sky-a2); }
.sw-sky-glow { --swatch: var(--sky-glow); }
.sw-coral-a1 { --swatch: var(--coral-a1); }
.sw-coral-a2 { --swatch: var(--coral-a2); }
.sw-coral-glow { --swatch: var(--coral-glow); }
.sw-lime-a1 { --swatch: var(--lime-a1); }
.sw-lime-a2 { --swatch: var(--lime-a2); }
.sw-lime-glow { --swatch: var(--lime-glow); }
.sw-sun-a1 { --swatch: var(--sun-a1); }
.sw-sun-a2 { --swatch: var(--sun-a2); }
.sw-sun-glow { --swatch: var(--sun-glow); }
.sw-tangerine-a1 { --swatch: var(--tangerine-a1); }
.sw-tangerine-a2 { --swatch: var(--tangerine-a2); }
.sw-tangerine-glow { --swatch: var(--tangerine-glow); }
.sw-white-hi { --swatch: var(--white-hi); }
.sw-white-line { --swatch: var(--white-line); }
.sw-white-glyph { --swatch: var(--white-glyph); }
.sw-nav-glass { --swatch: var(--nav-glass); }
.sw-accent-glow { --swatch: var(--accent-glow); }
.sw-accent-soft { --swatch: var(--accent-soft); }
.sw-success-ring { --swatch: var(--success-ring); }
.sw-ink-08 { --swatch: var(--ink-08); }
.sw-ink-05 { --swatch: var(--ink-05); }
.sw-ink-04 { --swatch: var(--ink-04); }
.sw-veil { --swatch: var(--veil); }
.sw-transparent { --swatch: var(--transparent); }

@media (max-width: 1100px) {
  .slot--sky .tile, .slot--lime .tile { --s: 340px; }
  .slot--coral-top .tile, .slot--sun .tile { --s: 260px; }
  .scenario-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .stage { padding: 48px 20px 56px; }
  .mark__word { font-size: 30px; }
  .mark__sub { font-size: 17px; }
  .mark__hl::before { border-radius: var(--r-sm); }
  .slot--sky { top: -150px; left: -190px; }
  .slot--lime { top: -160px; right: -190px; }
  .slot--coral-top, .slot--sun { display: none; }
  .slot--coral-low { left: -60px; bottom: -90px; }
  .slot--tangerine { right: -70px; bottom: -80px; }
  .slot--sky .tile, .slot--lime .tile { --s: 280px; }
  .lab__panel { padding: 36px 24px; border-radius: var(--r-card); }
  .lab__title { font-size: 24px; }
  .lab__browser { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .lab__browser > .tabs__list { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .lab__browser .tabs__tab { width: auto; min-height: 44px; padding-inline: 16px; }
  .lab__detail { padding: 28px; }
  .palette-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .lab { padding-inline: var(--gutter); padding-bottom: 64px; }
  .lab__panel { padding: 32px 20px; }
  .lab__detail { padding: 24px 20px; }
  .lab__config { transform: none; }
  .scenario-band { padding-top: 64px; padding-bottom: 64px; }
  .scenario-grid { grid-template-columns: minmax(0, 1fr); }
  .scenario-card { min-height: 0; padding: 28px 24px; border-radius: var(--r-card); }
  .client-card { padding: 24px; border-radius: var(--r-card); }
  .client-card__head { align-items: flex-start; }
  .client-card__actions .btn { max-width: 100%; height: auto; min-height: 44px; padding-block: 10px; }
  .article-download { padding: 24px; }
  .toc { position: static; padding: 8px; }
  .palette-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dl-fab { right: 16px; bottom: 16px; }
  .os-row { gap: 2px; }
  .os-row__link { padding-inline: 10px; }
  .facts { gap: 6px; }
  .facts__item { padding-inline: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .slot, .k, .tabs__progress { animation: none !important; }
}