.hero { padding-top: 44px; }
.lead { display: grid; grid-template-columns: minmax(0,1fr) 352px; gap: 56px; align-items: end; }
.pulse-tag {
  display: inline-flex; align-items: center; gap: 9px; max-width: 100%;
  padding: 4px 13px 4px 11px; border: 1px solid var(--hairline);
  border-radius: var(--r-pill); background: var(--tray); color: var(--ink-soft);
  font-size: 12.5px; line-height: 18px;
}
.pulse-dot { width: 7px; height: 7px; border-radius: var(--r-round); background: var(--ok); color: var(--ink); }
.hero h1 { margin: 18px 0 26px; }
.hero h1 > span { display: block; }
.hero .h1-sub { color: var(--ink-soft); }
.cta-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.os-row { display: flex; align-items: center; gap: 18px; margin-top: 22px; min-height: 20px; }
.os-lead { display: inline-flex; align-items: center; gap: 18px; font-size: 12.5px; color: var(--ink-soft); }
.os-lead::after { content: ""; width: 1px; height: 12px; background: var(--hairline); color: var(--ink); }
.os-list { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; }
.os-list a { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--ink-soft); text-decoration: none; }
.os-list a:hover { color: var(--amber-deep); }
.os-list svg { width: 15px; height: 15px; }
.lead-aside { padding-bottom: 2px; }
.lead-copy { margin: 0; font-size: var(--text-base); line-height: 1.75; color: var(--ink-soft); }
.lead-copy strong { color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chips a, .chip {
  display: inline-flex; align-items: center; max-width: 100%; min-height: 28px;
  padding: 3px 11px; border: 1px solid var(--hairline); border-radius: var(--r-pill);
  font-size: 12.5px; color: var(--ink-soft); background: var(--ground); text-decoration: none;
  overflow-wrap: anywhere;
}
.chips a:hover { color: var(--amber-deep); border-color: var(--ctl-line); }
.stage { position: relative; margin: 28px 0 0; height: 476px; isolation: isolate; }
.paint {
  position: absolute; inset: 0; overflow: hidden; border-radius: var(--r-stage);
  border: 1px solid var(--paint-edge); color: var(--ink);
  background:
    radial-gradient(38% 26% at 74% 20%, var(--paint-dusk-a), var(--clear) 72%),
    radial-gradient(46% 30% at 18% 10%, var(--paint-lime-a), var(--clear) 70%),
    radial-gradient(34% 22% at 90% 46%, var(--paint-slate-a), var(--clear) 70%),
    radial-gradient(40% 24% at 10% 54%, var(--paint-sage-a), var(--clear) 72%),
    radial-gradient(70% 14% at 52% 50%, var(--paint-ridge-a), var(--clear) 75%),
    radial-gradient(80% 42% at 40% 102%, var(--paint-water-a), var(--clear) 72%),
    linear-gradient(180deg, var(--paint-sky) 0%, var(--paint-haze) 42%, var(--paint-shore) 54%, var(--paint-water) 100%);
}
.paint::before {
  content: ""; position: absolute; inset: -10%; transform: rotate(-3deg); filter: blur(1.5px);
  background:
    radial-gradient(28% 3% at 30% 66%, var(--paint-glint-a), var(--clear) 70%),
    radial-gradient(22% 2.4% at 66% 72%, var(--paint-glint-a), var(--clear) 70%),
    radial-gradient(36% 2.8% at 46% 80%, var(--paint-glint-b), var(--clear) 70%),
    radial-gradient(18% 2% at 82% 84%, var(--paint-glint-a), var(--clear) 70%),
    radial-gradient(30% 3.2% at 22% 90%, var(--paint-shade-a), var(--clear) 70%),
    radial-gradient(24% 2.6% at 76% 92%, var(--paint-shade-a), var(--clear) 70%),
    radial-gradient(26% 6% at 62% 34%, var(--paint-cloud-a), var(--clear) 70%),
    radial-gradient(34% 5% at 24% 26%, var(--paint-cloud-a), var(--clear) 70%),
    radial-gradient(20% 4% at 88% 30%, var(--paint-cloud-a), var(--clear) 70%);
}
.paint::after {
  content: ""; position: absolute; inset: 0; filter: blur(4px);
  background:
    radial-gradient(18% 16% at 66% 53%, var(--paint-mount-a), var(--clear) 70%),
    radial-gradient(14% 13% at 80% 50%, var(--paint-mount-b), var(--clear) 70%),
    radial-gradient(22% 19% at 93% 55%, var(--paint-mount-a), var(--clear) 70%),
    radial-gradient(16% 15% at 6% 50%, var(--paint-mount-b), var(--clear) 70%),
    radial-gradient(12% 10% at 18% 48%, var(--paint-mount-a), var(--clear) 70%),
    linear-gradient(180deg, var(--paint-light-a), var(--clear) 30%);
}
.v2n {
  position: absolute; top: 34px; left: 4.8%; width: 75%; height: 372px;
  display: grid; grid-template-rows: 34px 1fr; overflow: hidden;
  background: var(--paper); color: var(--ink); border: 1px solid var(--hairline);
  border-radius: var(--r-window); box-shadow: var(--lift-window); font-size: 13px; line-height: 1.3;
}
.win-bar { position: relative; display: flex; align-items: center; min-height: 34px; padding: 0 13px; background: var(--tray); color: var(--ink-soft); border-bottom: 1px solid var(--hairline); }
.win-dots { display: flex; gap: 7px; }
.win-dots i { width: 10px; height: 10px; flex-shrink: 0; border-radius: var(--r-round); background: var(--chrome-dot); color: var(--ink); box-shadow: inset 0 0 0 .5px var(--chrome-dot-edge); }
.win-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 12.5px; color: var(--ink-soft); }
.win-body { display: grid; grid-template-columns: 184px minmax(0,1.25fr) minmax(0,1fr); min-height: 0; }
.win-side { display: flex; flex-direction: column; padding: 14px 10px 12px; background: var(--tray); color: var(--ink); border-right: 1px solid var(--hairline); }
.side-cap { padding: 0 9px 8px; font-size: 11px; letter-spacing: .06em; color: var(--ink-soft); }
.side-list, .side-foot { list-style: none; padding: 0; margin: 0; }
.side-list li, .side-foot li { display: flex; align-items: center; gap: 9px; min-height: 32px; padding: 0 9px; border-radius: var(--r-row); color: var(--ink-soft); }
.side-list li + li { margin-top: 2px; }
.side-list .is-on { background: var(--tray-2); color: var(--ink); }
.side-ico { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.side-foot { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--hairline); }
.side-foot li { min-height: 28px; font-size: 12.5px; }
.win-main { padding: 16px 20px; min-width: 0; }
.crumb { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; font-size: 12px; color: var(--ink-soft); }
.crumb b { color: var(--ink); font-weight: var(--weight-normal); }
.crumb .chev { width: 9px; height: 9px; transform: rotate(-90deg); }
.radio-card { background: var(--paper-hi); color: var(--ink); border: 1px solid var(--hairline); border-radius: var(--r-card); overflow: hidden; }
.rd-row { display: grid; grid-template-columns: 14px minmax(0,1fr); gap: 11px; padding: 9px 12px; }
.rd-row + .rd-row { border-top: 1px solid var(--hairline); }
.rd { position: relative; width: 14px; height: 14px; margin-top: 2px; border-radius: var(--r-round); border: 1.5px solid var(--ctl-line); background: var(--paper-hi); color: var(--ink); }
.rd.is-on { border-color: var(--amber); }
.rd.is-on::after { content: ""; position: absolute; inset: 2px; border-radius: var(--r-round); background: var(--amber); color: var(--ink); }
.rd-text, .set-text { display: flex; flex-direction: column; gap: 3px; }
.rd-name { font-size: 13px; line-height: 17px; }
.rd-note { font-size: 11.5px; line-height: 15px; color: var(--ink-soft); }
.select-box { display: flex; align-items: center; gap: 4px; min-height: 34px; margin-top: 12px; padding: 6px 12px; background: var(--paper-hi); color: var(--ink); border: 1px solid var(--hairline); border-radius: var(--r-ctl); }
.sel-key { color: var(--ink-soft); }
.select-box .chev { margin-left: auto; color: var(--ink-soft); }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 10px; padding: 10px 12px; background: var(--paper-hi); color: var(--ink); border: 1px solid var(--hairline); border-radius: var(--r-card); }
.tg { position: relative; flex-shrink: 0; width: 30px; height: 17px; border-radius: var(--r-pill); background: var(--switch-off); color: var(--ink); }
.tg::after { content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: var(--r-round); background: var(--paper-hi); color: var(--ink); box-shadow: var(--lift-knob); }
.tg.is-on { background: var(--amber); color: var(--ink); }
.tg.is-on::after { transform: translateX(13px); }
.win-aux { display: flex; flex-direction: column; min-width: 0; border-left: 1px solid var(--hairline); background: var(--paper); color: var(--ink); }
.window-tabs { display: flex; min-height: 36px; padding: 0 6px; border-bottom: 1px solid var(--hairline); }
.window-tab { position: relative; display: flex; align-items: center; padding: 0 12px; font-size: 12.5px; color: var(--ink-soft); }
.window-tab.is-on { color: var(--ink); }
.window-tab.is-on::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; border-radius: var(--r-ctl); background: var(--amber); color: var(--ink); }
.aux-body { padding: 16px 18px; }
.field-name { margin-bottom: 6px; font-size: 12px; color: var(--ink-soft); }
.num-box { display: flex; align-items: center; justify-content: space-between; width: 132px; min-height: 32px; padding: 0 6px 0 11px; background: var(--paper-hi); color: var(--ink); border: 1px solid var(--hairline); border-radius: var(--r-ctl); font-family: var(--font-mono); font-size: 13px; }
.stepper { display: flex; flex-direction: column; gap: 1px; color: var(--ink-soft); }
.stepper .chev { width: 8px; height: 8px; }
.stepper .chev:first-child { transform: rotate(180deg); }
.tg-row { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; }
.tg-row .tg { margin-top: 1px; }
.aux-note { margin-top: 18px; padding: 10px 12px; border-radius: var(--r-card); background: var(--tray); color: var(--ink-soft); font-size: 11.5px; line-height: 1.55; }
.ng { position: absolute; top: 96px; left: calc(79.8% - 104px); width: 216px; height: 348px; padding: 7px; border-radius: var(--r-phone); background: linear-gradient(160deg,var(--bezel-hi),var(--bezel-lo)); color: var(--ink); box-shadow: var(--lift-phone),var(--bezel-inset); transform: rotate(2deg); font-size: 12.5px; line-height: 1.3; }
.ng-screen { display: flex; flex-direction: column; height: 100%; overflow: hidden; background: var(--paper); color: var(--ink); border-radius: var(--r-screen); border: 1px solid var(--hairline); }
.ng-status { position: relative; display: flex; align-items: center; justify-content: flex-end; height: 22px; padding: 0 14px; color: var(--ink-soft); }
.ng-cam { position: absolute; left: 50%; top: 7px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: var(--r-round); background: var(--ink); color: var(--ink-on-dark); }
.ng-sys { display: flex; align-items: center; gap: 4px; }
.ng-sys svg { height: 8px; width: auto; }
.ng-appbar { display: grid; grid-template-columns: 18px 1fr 14px; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; border-bottom: 1px solid var(--hairline); }
.ng-appbar svg { width: 15px; height: 15px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; }
.ng-appbar .ng-more { width: 14px; fill: var(--ink-soft); stroke: none; }
.ng-title { font-size: 14px; font-weight: var(--weight-medium); }
.ng-list { padding: 0 12px; }
.ng-cap { padding: 9px 0 3px; font-size: 10.5px; letter-spacing: .06em; color: var(--ink-soft); }
.ng-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; }
.ng-row + .ng-row { border-top: 1px solid var(--hairline); }
.ng-text { display: flex; flex-direction: column; gap: 2px; }
.ng-sub { font-size: 10.5px; line-height: 13px; color: var(--ink-soft); }
.ng .tg { width: 28px; height: 16px; }
.ng .tg::after { width: 12px; height: 12px; }
.ng .tg.is-on::after { transform: translateX(12px); }
.seg { display: inline-flex; padding: 2px; border-radius: var(--r-row); background: var(--tray-2); color: var(--ink); }
.seg-opt { padding: 3px 9px; border-radius: var(--r-ctl); font-size: 11.5px; color: var(--ink-soft); }
.seg-opt.is-on { background: var(--paper-hi); color: var(--amber-deep); box-shadow: var(--lift-seg); }
.ng-btn { display: flex; align-items: center; justify-content: center; min-height: 30px; margin-top: 6px; border: 1px solid var(--ctl-line); border-radius: var(--r-row); font-size: 12px; background: var(--paper-hi); color: var(--ink); }
.ng-dock { display: flex; align-items: center; justify-content: space-between; margin-top: auto; min-height: 60px; padding: 0 12px 0 14px; background: var(--tray); color: var(--ink); border-top: 1px solid var(--hairline); }
.ng-state { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-soft); }
.ng-state i { width: 6px; height: 6px; border-radius: var(--r-round); background: var(--ink-faint); color: var(--ink); }
.ng-fab { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: var(--r-round); background: var(--ink); color: var(--ink-on-dark); box-shadow: var(--lift-fab); }
.ng-fab svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }

.tab-strip, [role="tablist"].tab-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
[role="tab"] {
  position: relative; min-height: 44px; padding: 10px 18px;
  border: 1px solid var(--hairline); border-radius: var(--r-ctl);
  background: var(--tray); color: var(--ink-soft); text-align: left; font: inherit;
}
[role="tab"]:hover { background: var(--tray-2); color: var(--ink); }
[role="tab"][aria-selected="true"] { background: var(--paper); color: var(--ink); border-color: var(--ctl-line); }
.tab-strip [role="tab"][aria-selected="true"]::after { content: ""; position: absolute; bottom: -1px; left: 14px; right: 14px; height: 2px; background: var(--amber); color: var(--ink); }
[role="tabpanel"] { min-width: 0; }
.feature-tabs { display: grid; grid-template-columns: minmax(0,.38fr) minmax(0,.62fr); gap: 32px; padding: 36px; background: var(--tray); color: var(--ink); border-radius: var(--r-stage); }
.feature-tabs [role="tablist"] { display: flex; flex-direction: column; align-self: start; gap: 10px; }
.feature-tabs [role="tab"] { border: 0; border-left: 2px solid var(--clear); border-radius: 0; padding: 13px 20px; background: var(--clear); color: var(--ink-soft); }
.feature-tabs [role="tab"][aria-selected="true"] { border-left-color: var(--amber); background: var(--clear); color: var(--ink); }
.feature-frame { padding: 28px; border-radius: var(--r-card); background: var(--tray-2); color: var(--ink); }
.mini-window { border: 1px solid var(--hairline); border-radius: var(--r-card); background: var(--paper); color: var(--ink); box-shadow: var(--lift-window); overflow: hidden; }
.mini-content { padding: 20px; }
.feature-detail { margin: 24px 0 0; color: var(--ink-soft); line-height: 1.85; }
.toc { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px; margin-bottom: 32px; background: var(--tray); color: var(--ink); border: 1px solid var(--hairline); border-radius: var(--r-card); }
.toc a { display: inline-flex; align-items: center; min-height: 40px; padding: 7px 12px; color: var(--ink-soft); text-decoration: none; border-radius: var(--r-ctl); }
.toc a:hover, .toc a[aria-current] { background: var(--tray-2); color: var(--ink); }
.faq-item { border-bottom: 1px solid var(--hairline); }
.faq-item summary { position: relative; min-height: 60px; padding: 18px 36px 18px 0; list-style: none; cursor: pointer; font-weight: var(--weight-medium); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 8px; top: 18px; color: var(--ink-soft); }
.faq-item[open] summary::after { content: "−"; }
.faq-answer { padding-bottom: 22px; max-width: 760px; color: var(--ink-soft); }
.faq-answer p:last-child { margin-bottom: 0; }
.term-card { padding: 26px; border: 1px solid var(--hairline); border-radius: var(--r-card); background: var(--tray); color: var(--ink); }
.term-card h3 { font-family: var(--font-mono); font-size: var(--text-lg); margin-bottom: 12px; }
.term-card p { color: var(--ink-soft); }
.term-category, .article-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; font-size: var(--text-xs); color: var(--ink-soft); }
.download-card { padding: 28px; border: 1px solid var(--hairline); border-radius: var(--r-card); background: var(--paper); color: var(--ink); box-shadow: var(--lift-pop); }
.download-card.is-primary { border-color: var(--ctl-line); }
.download-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.download-head h3 { margin-bottom: 4px; }
.download-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.download-version { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-soft); }
.badge { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 9px; border: 1px solid var(--hairline); border-radius: var(--r-ctl); background: var(--tray); color: var(--ink-soft); font-size: var(--text-xs); line-height: 1.5; overflow-wrap: anywhere; }
.badge::before { content: ""; flex-shrink: 0; width: 5px; height: 5px; border-radius: var(--r-round); background: var(--ink-faint); color: var(--ink); }
.badge-primary { background: var(--tray); color: var(--amber-deep); }
.badge-primary::before { background: var(--amber); color: var(--ink); }
.badge-recommended::before { background: var(--ok); color: var(--ink); }
.badge-retired::before { background: var(--warn); color: var(--ink); }
.article-card { display: flex; flex-direction: column; align-items: flex-start; padding: 28px; border: 1px solid var(--hairline); border-radius: var(--r-card); background: var(--tray); color: var(--ink); }
.article-card h3 { font-size: var(--text-h3); line-height: 1.45; }
.article-card h3 a { color: var(--ink); text-decoration: none; }
.article-card h3 a:hover { color: var(--amber-deep); }
.article-card p { color: var(--ink-soft); }
.article-card > .text-link { margin-top: auto; padding-top: 16px; }
.callout { margin: 24px 0; padding: 20px 24px; border: 1px solid var(--hairline); border-left: 2px solid var(--amber); border-radius: var(--r-ctl); background: var(--tray); color: var(--ink); }
.callout p:last-child { margin-bottom: 0; }
.callout-warning { border-left-color: var(--warn); }
.callout-error { border-left-color: var(--err); }
.table-scroll { max-width: 100%; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; border: 1px solid var(--hairline); border-radius: var(--r-card); }
.data-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); background: var(--paper); color: var(--ink); }
.data-table th, .data-table td, .prose th, .prose td, .article-body th, .article-body td { min-width: 7em; padding: 14px 18px; border-bottom: 1px solid var(--hairline); text-align: left; vertical-align: top; overflow-wrap: normal; word-break: normal; }
.data-table th, .prose th, .article-body th { background: var(--tray-2); color: var(--ink); font-weight: var(--weight-medium); }
.data-table tr:last-child td { border-bottom: 0; }
.prose table, .article-body table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; min-width: 0; border-collapse: collapse; overscroll-behavior-x: contain; background: var(--paper); color: var(--ink); }
.article-download { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding: 28px; margin-top: 48px; border: 1px solid var(--hairline); border-radius: var(--r-card); background: var(--tray); color: var(--ink); }
.article-download-copy { flex: 1 1 240px; min-width: 0; }
.article-download h2 { font-size: var(--text-h3); margin-bottom: 8px; }
.article-download p { margin: 0; color: var(--ink-soft); }
.dl-fab { position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: 15; display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; max-width: calc(100% - 32px); padding: 12px 20px; background: var(--ink); color: var(--ink-on-dark); border: 1px solid var(--ink); border-radius: var(--r-pill); box-shadow: var(--lift-fab); font-size: var(--text-sm); text-decoration: none; }
.dl-fab:hover { background: var(--ink-hover); color: var(--ink-on-dark); }
.preview-section { padding-top: 80px; padding-bottom: 24px; }
.preview-section > h2 { margin-bottom: 28px; }
.token-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.swatch { padding: 10px; min-width: 0; border: 1px solid var(--hairline); border-radius: var(--r-card); background: var(--paper); color: var(--ink); font-family: var(--font-mono); font-size: var(--text-xs); overflow-wrap: anywhere; }
.swatch::before { content: ""; display: block; height: 44px; margin-bottom: 10px; border: 1px solid var(--hairline); border-radius: var(--r-ctl); background: var(--sample); color: var(--ink); }
.sw-ground { --sample: var(--ground); }
.sw-tray { --sample: var(--tray); }
.sw-tray2 { --sample: var(--tray-2); }
.sw-line { --sample: var(--hairline); }
.sw-paper { --sample: var(--paper); }
.sw-white { --sample: var(--paper-hi); }
.sw-ink { --sample: var(--ink); }
.sw-hover { --sample: var(--ink-hover); }
.sw-soft { --sample: var(--ink-soft); }
.sw-faint { --sample: var(--ink-faint); }
.sw-on { --sample: var(--ink-on-dark); }
.sw-amber { --sample: var(--amber); }
.sw-deep { --sample: var(--amber-deep); }
.sw-ok { --sample: var(--ok); }
.sw-halo { --sample: var(--ok-halo); }
.sw-warn { --sample: var(--warn); }
.sw-error { --sample: var(--err); }
.sw-ctl { --sample: var(--ctl-line); }
.sw-off { --sample: var(--switch-off); }
.sw-dot { --sample: var(--chrome-dot); }
.sw-dotedge { --sample: var(--chrome-dot-edge); }
.sw-bezelhi { --sample: var(--bezel-hi); }
.sw-bezello { --sample: var(--bezel-lo); }
.sw-sky { --sample: var(--paint-sky); }
.sw-haze { --sample: var(--paint-haze); }
.sw-shore { --sample: var(--paint-shore); }
.sw-water { --sample: var(--paint-water); }
.sw-edge { --sample: var(--paint-edge); }
.sw-dusk { --sample: var(--paint-dusk-a); }
.sw-lime { --sample: var(--paint-lime-a); }
.sw-sage { --sample: var(--paint-sage-a); }
.sw-slate { --sample: var(--paint-slate-a); }
.sw-ridge { --sample: var(--paint-ridge-a); }
.sw-watera { --sample: var(--paint-water-a); }
.sw-glinta { --sample: var(--paint-glint-a); }
.sw-glintb { --sample: var(--paint-glint-b); }
.sw-shade { --sample: var(--paint-shade-a); }
.sw-cloud { --sample: var(--paint-cloud-a); }
.sw-mounta { --sample: var(--paint-mount-a); }
.sw-mountb { --sample: var(--paint-mount-b); }
.sw-light { --sample: var(--paint-light-a); }
.sw-clear { --sample: var(--clear); }
.type-sample { font-size: var(--text-h1); font-family: var(--font-display); line-height: var(--leading-title); }
.preview-buttons { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
@media (max-width: 1099px) {
  .lead { grid-template-columns: 1fr; gap: 24px; }
  .stage { height: 460px; }
  .v2n { left: 3%; width: 86%; }
  .win-body { grid-template-columns: 150px minmax(0,1fr) minmax(0,.9fr); }
  .ng { left: auto; right: 3%; top: 110px; }
}
@media (max-width: 760px) {
  .hero { padding-top: 28px; }
  .os-row { flex-wrap: wrap; gap: 10px; }
  .os-lead::after { display: none; }
  .os-list { gap: 14px; }
  .stage { display: grid; gap: 24px; height: auto; padding: 20px; }
  .v2n { position: relative; top: auto; left: auto; width: 100%; height: auto; min-height: 330px; }
  .win-body { grid-template-columns: minmax(0,1fr); }
  .win-side, .win-aux { display: none; }
  .ng { position: relative; top: auto; bottom: auto; right: auto; justify-self: end; transform: none; }
  .feature-tabs { grid-template-columns: 1fr; padding: 20px; gap: 24px; }
  .feature-tabs [role="tablist"] { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .feature-tabs [role="tab"] { padding: 10px 12px; }
  .feature-frame { padding: 18px; }
  .token-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .paint::before { transform: none; }
  .preview-buttons { grid-template-columns: 1fr; }
  .download-head { flex-wrap: wrap; }
  .download-card, .term-card, .article-card { padding: 20px; }
  .dl-fab { right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); }
}