.tabs { min-width:0 }
.tab-list,[role="tablist"] { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:24px; min-width:0 }
.tab-list [role="tab"],[role="tablist"]>[role="tab"] {
  min-height:44px; padding:10px 18px;
  font-size:var(--text-nav); font-weight:var(--weight-semibold);
  border:1px solid var(--line); border-radius:var(--r-ctl);
  background:var(--bg); color:var(--muted);
}
[role="tab"][aria-selected="true"] { background:var(--accent-wash); color:var(--accent-dark); border-color:var(--accent) }
[role="tabpanel"] { min-width:0 }
.feature-tabs { display:grid; grid-template-columns:280px minmax(0,1fr); gap:40px; align-items:start }
.feature-tabs [role="tablist"] { flex-direction:column; flex-wrap:nowrap; gap:4px }
.feature-tabs [role="tab"] { position:relative; width:100%; text-align:left; border-color:var(--clear); border-left:3px solid var(--clear); border-radius:0 var(--r-ctl) var(--r-ctl) 0 }
.feature-tabs [role="tab"][aria-selected="true"] { border-left-color:var(--accent); background:var(--bg); color:var(--ink); box-shadow:var(--shadow-xs) }
.feature-detail { display:grid; grid-template-columns:minmax(0,1fr) minmax(240px,1fr); gap:28px; align-items:center }
.mini-window { position:relative; background:var(--bg); color:var(--ink); border:1px solid var(--line); border-radius:var(--r-card); box-shadow:var(--shadow-float); min-width:0 }
.mini-window__body { padding:20px }
.mini-window__fields { display:grid; gap:12px }
.mini-window__field { display:grid; grid-template-columns:110px minmax(0,1fr); gap:12px; align-items:center; font-size:var(--text-sm) }
.mini-window__empty { min-height:28px; border:1px solid var(--line); border-radius:var(--r-field); background:var(--bg); color:var(--muted) }
.mini-tip { position:relative; margin:20px 12px -12px; padding:12px 16px; background:var(--ink); color:var(--on-ink); border-radius:var(--r-card); box-shadow:var(--shadow-float); font-size:var(--text-sm) }
.toc { position:sticky; top:calc(var(--header-height) + 12px); z-index:20; display:flex; flex-wrap:wrap; gap:6px; padding:10px; margin-bottom:32px; border:1px solid var(--line); border-radius:var(--r-card); background:var(--bg); color:var(--ink); box-shadow:var(--shadow-card) }
.toc a { display:block; padding:8px 12px; border-radius:var(--r-ctl); font-size:var(--text-nav); color:var(--muted) }
.toc a:hover,.toc a[aria-current] { background:var(--panel); color:var(--accent-dark) }
.faq { border:1px solid var(--line); border-radius:var(--r-card); background:var(--bg); color:var(--ink); box-shadow:var(--shadow-xs) }
.faq+.faq { margin-top:12px }
.faq summary { position:relative; padding:18px 48px 18px 20px; cursor:pointer; list-style:none; font-weight:var(--weight-semibold) }
.faq summary::-webkit-details-marker { display:none }
.faq summary::after { content:"+"; position:absolute; right:20px; top:16px; font-size:var(--text-lg); color:var(--accent-dark) }
.faq[open] summary::after { content:"−" }
.faq__answer { padding:0 20px 20px; color:var(--muted) }
.faq__answer p:last-child { margin-bottom:0 }
.term-card { border-top:3px solid var(--accent) }
.term-card dt { font-family:var(--font-mono); font-size:var(--text-h3); font-weight:var(--weight-bold); color:var(--ink) }
.term-card dd { margin:12px 0 0; color:var(--muted) }
.term-card__category { font-size:var(--text-xs); font-weight:var(--weight-semibold); color:var(--accent-dark) }
.client-card { display:flex; flex-direction:column; gap:20px }
.client-card__head { display:flex; align-items:center; gap:16px; min-width:0 }
.client-card__head>div { min-width:0 }
.client-card__logo { width:56px; height:56px; flex-shrink:0 }
.client-card__title { margin:0; font-size:var(--text-h3) }
.client-card__meta { font-size:var(--text-sm); color:var(--muted); margin:4px 0 0 }
.client-card__actions { display:flex; flex-wrap:wrap; gap:10px }
.client-card__note { margin:0; font-size:var(--text-nav); color:var(--muted) }
.badges,.chips { display:flex; flex-wrap:wrap; align-items:center; gap:6px }
.badge,.tag {
  display:inline-flex; align-items:center; gap:6px; max-width:100%; min-width:0;
  padding:3px 9px; border:1px solid var(--line); border-radius:var(--r-ctl);
  background:var(--panel); color:var(--muted);
  font-size:var(--text-xs); font-weight:var(--weight-semibold);
  overflow-wrap:anywhere;
}
.badge::before { content:""; width:5px; height:5px; flex-shrink:0; border-radius:var(--r-dot); background:var(--dot); color:var(--ink) }
.badge--first,.badge--recommended { background:var(--accent-wash); color:var(--accent-dark); border-color:var(--accent-ring) }
.badge--first::before,.badge--recommended::before { background:var(--accent); color:var(--on-accent) }
.badge--retired { background:var(--panel); color:var(--muted) }
.badge--retired::before { background:var(--warn); color:var(--ink) }
.status-dot { display:inline-block; width:6px; height:6px; border-radius:var(--r-dot); background:var(--success); color:var(--ink) }
.article-card { display:flex; flex-direction:column; gap:16px }
.article-card__meta { display:flex; align-items:center; flex-wrap:wrap; gap:10px; color:var(--muted); font-size:var(--text-xs) }
.article-card h3 { margin:0; font-size:var(--text-lg) }
.article-card p { margin:0; color:var(--muted); font-size:var(--text-nav) }
.article-card__link { align-self:flex-start; margin-top:auto; font-size:var(--text-nav); font-weight:var(--weight-semibold); color:var(--accent-dark) }
.article-card a:hover { text-decoration:underline; text-underline-offset:4px }
.callout { margin:24px 0; padding:20px 24px; border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:var(--r-ctl); background:var(--panel); color:var(--ink) }
.callout p:last-child { margin-bottom:0 }
.callout--warn { border-left-color:var(--warn) }
.callout--error { border-left-color:var(--error) }
.callout--success { border-left-color:var(--success) }
.table-scroll { overflow-x:auto; max-width:100%; min-width:0; border:1px solid var(--line); border-radius:var(--r-card); -webkit-overflow-scrolling:touch }
.data-table { width:100%; border-collapse:collapse; font-size:var(--text-nav); background:var(--bg); color:var(--ink) }
.data-table th,.data-table td,.prose table th,.prose table td { min-width:7em; padding:14px 16px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); overflow-wrap:normal; word-break:normal }
.data-table th,.prose table th { background:var(--panel); color:var(--ink); 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(--bg); color:var(--ink) }
.prose table code,.data-table code { overflow-wrap:anywhere; word-break:normal }
.article-download { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:40px; padding:24px; background:var(--panel); color:var(--ink); border:1px solid var(--line); border-radius:var(--r-card); box-shadow:var(--shadow-card) }
.article-download>div { min-width:0 }
.article-download h2 { margin:0 0 8px; font-size:var(--text-h3) }
.article-download p { margin:0; color:var(--muted) }
.article-download .btn { flex-shrink:0 }
.dl-fab {
  position:fixed; right:24px; bottom:24px; z-index:35;
  display:inline-flex; align-items:center; gap:9px;
  min-height:42px; max-width:calc(100% - 32px); padding:8px 16px 8px 12px;
  background:var(--bg); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--r-pill); box-shadow:var(--shadow-float);
  font-size:13.5px; font-weight:var(--weight-semibold);
  transition:transform var(--motion-fast) ease;
}
.dl-fab__ico { width:24px; height:24px; flex-shrink:0; border-radius:var(--r-dot); display:flex; align-items:center; justify-content:center; background:var(--accent); color:var(--on-accent) }
.dl-fab svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round }
.dl-fab:hover { transform:translateY(-2px) }

/* 首屏：保留确认稿的格子比例、画框与双层演示壳。 */
.hero::before { content:""; position:absolute; inset:0; z-index:0; background-image:radial-gradient(var(--line) 1px,var(--clear) 1.3px); background-size:14px 14px }
.stage { position:relative; z-index:1; width:calc(100% - 80px); max-width:1360px; margin-inline:auto; padding-top:32px; background:var(--bg); color:var(--ink); border-left:1px solid var(--line); border-right:1px solid var(--line) }
.stage__topline { position:absolute; top:16px; left:-40px; right:-40px; height:1px; background:var(--line); color:var(--ink) }
.pin { position:absolute; width:14px; height:14px; border:1px solid var(--line); border-radius:var(--r-field); background:var(--bg); color:var(--ink); box-shadow:var(--shadow-xs) }
.pin--tl { top:9px; left:-8px }
.pin--tr { top:9px; right:-8px }
.bento { margin:0 24px; height:316px; display:grid; grid-template-columns:250px minmax(0,1fr) 250px; grid-template-rows:1fr 1fr; gap:12px }
.cell { position:relative; border:1px solid var(--line); border-radius:var(--r-card); padding:16px 18px; display:flex; flex-direction:column; min-width:0; transition:transform .22s ease }
.cell:hover { transform:translateY(-2px) }
.cell--t1 { background:var(--bg); color:var(--ink); box-shadow:var(--shadow-card) }
.cell--t2 { background:var(--panel); color:var(--ink) }
.cell--t3 { background:var(--panel-2); color:var(--ink) }
.cell--lead { grid-column:2; grid-row:1 / 3; align-items:center; justify-content:center; text-align:center; padding:22px 32px }
.cell--k { grid-column:1; grid-row:1 }
.cell--lic { grid-column:1; grid-row:2 }
.cell--sub { grid-column:3; grid-row:1 }
.cell--tun { grid-column:3; grid-row:2 }
.cell__label { display:flex; align-items:center; gap:7px; font-size:var(--text-xs); font-weight:var(--weight-semibold); letter-spacing:.02em; color:var(--muted) }
.cell__label svg { width:15px; height:15px; fill:none; stroke:var(--accent); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round }
.cell__title { margin:9px 0 0; font-family:var(--font-display); font-size:var(--text-body); font-weight:var(--weight-bold); letter-spacing:-.01em; line-height:1.4; color:var(--ink) }
.cell__text { margin:7px 0 0; font-size:var(--text-sm); line-height:1.6; color:var(--muted) }
.cell__more { margin-top:auto; display:inline-flex; align-items:center; gap:5px; font-size:var(--text-sm); font-weight:var(--weight-semibold); color:var(--accent-dark) }
.cell__more svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
.cell__more:hover { color:var(--accent) }
.chips { margin-top:12px }
.chip { display:inline-flex; align-items:center; gap:6px; min-height:24px; max-width:100%; padding:2px 9px; font-family:var(--font-mono); font-size:11.5px; font-weight:var(--weight-medium); color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:var(--r-ctl); overflow-wrap:anywhere }
.chip::before { content:""; width:5px; height:5px; flex-shrink:0; border-radius:var(--r-dot); background:var(--accent); color:var(--on-accent) }
.license { margin:10px 0 0; font-family:var(--font-mono); font-size:var(--text-h3); font-weight:var(--weight-bold); letter-spacing:-.02em; line-height:1.2; color:var(--ink) }
.tunrow { margin-top:10px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px; background:var(--bg); color:var(--ink); border:1px solid var(--line); border-radius:var(--r-ctl); font-size:13.5px; font-weight:var(--weight-semibold) }
.switch { position:relative; flex:none; width:32px; height:18px; border-radius:var(--r-pill); background:var(--accent); color:var(--on-accent) }
.switch::after { content:""; position:absolute; top:2px; right:2px; width:14px; height:14px; border-radius:var(--r-dot); background:var(--bg); color:var(--ink); box-shadow:var(--shadow-xs) }
.h1 { margin:0; font-family:var(--font-display); color:var(--ink) }
.h1__line { display:block }
.h1 .kw { font-style:normal; color:var(--accent) }
.lead-desc { margin:12px auto 0; max-width:640px; font-size:var(--text-body); line-height:1.6; color:var(--muted) }
.lead-desc strong { color:var(--ink); font-weight:var(--weight-semibold) }
.platforms { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:18px; margin:16px 0 0; padding:0; list-style:none }
.platforms li { margin:0 }
.platforms__label { font-size:var(--text-xs); font-weight:var(--weight-medium); color:var(--muted); letter-spacing:.02em }
.plat { display:inline-flex; align-items:center; gap:6px; font-size:var(--text-sm); font-weight:var(--weight-medium); color:var(--muted) }
.plat svg { width:14px; height:14px; color:var(--ink) }
.plat:hover,.plat:hover svg { color:var(--accent-dark) }
.fold { position:relative; height:46px; margin-top:10px }
.fold__svg { position:absolute; top:0; width:520px; height:32px; overflow:visible }
.fold__svg--l { left:0 }
.fold__svg--r { right:0 }
.fold__svg path { fill:none; stroke:var(--line); stroke-width:1 }
.pin--ml { top:-7px; left:-8px }
.pin--mr { top:-7px; right:-8px }
.seg { position:absolute; left:50%; top:14px; transform:translateX(-50%); display:flex; gap:6px; padding:3px; background:var(--bg); color:var(--ink); border:1px solid var(--line); border-radius:var(--r-segment) }
.seg__item { display:inline-flex; align-items:center; gap:8px; height:26px; padding:0 12px 0 6px; border-radius:var(--r-segment-item); font-size:var(--text-sm); font-weight:var(--weight-medium); color:var(--muted); background:var(--panel) }
.seg__ico { width:16px; height:16px; flex-shrink:0; border-radius:var(--r-ctl); border:1px solid var(--line); background:var(--bg); color:var(--ink) }
.seg__item--on { background:var(--bg); color:var(--ink); font-weight:var(--weight-semibold); box-shadow:0 0 0 1px var(--line),var(--shadow-xs) }
.seg__item--on .seg__ico { border-color:var(--accent-dark); background:linear-gradient(140deg,var(--accent),var(--accent-dark)); color:var(--on-accent) }
.showcase { position:relative; margin:16px 130px 0 }
.shell { height:520px; padding:9px; background:var(--bg); color:var(--ink); border:1px solid var(--line); border-radius:var(--r-shell); box-shadow:var(--shadow-shell) }
.canvas {
  position:relative; height:100%; overflow:hidden; border:1px solid var(--line); border-radius:var(--r-card);
  background:radial-gradient(34% 56% at 9% 84%,var(--blob-peach) 0%,var(--clear) 72%),radial-gradient(32% 62% at 93% 46%,var(--blob-pink) 0%,var(--clear) 72%),radial-gradient(40% 42% at 24% -4%,var(--blob-ice) 0%,var(--clear) 74%),radial-gradient(26% 40% at 70% 96%,var(--blob-pink) 0%,var(--clear) 70%),var(--canvas);
  color:var(--ink);
}
.canvas__tag { position:absolute; top:12px; right:16px; font-family:var(--font-mono); font-size:11px; color:var(--muted); display:flex; align-items:center; gap:7px }
.canvas__tag::before { content:""; width:6px; height:6px; flex-shrink:0; border-radius:var(--r-dot); background:var(--success); color:var(--ink) }
.paper { position:absolute; left:146px; top:22px; width:640px; transform:perspective(1800px) rotateX(2deg) rotateY(3deg); transform-origin:50% 40% }
.paper::before,.paper::after { content:""; position:absolute; inset:0; border:1px solid var(--line); border-radius:var(--r-card); background:var(--bg); color:var(--ink) }
.paper::before { transform:translate(6px,7px); opacity:.92; box-shadow:var(--shadow-sheet) }
.paper::after { transform:translate(12px,14px); opacity:.7; box-shadow:var(--shadow-sheet) }
.v2n { position:relative; z-index:1; background:var(--bg); color:var(--ink); border:1px solid var(--line); border-radius:var(--r-card); box-shadow:var(--shadow-paper); overflow:hidden }
.v2n__bar { height:28px; padding:0 12px; display:flex; align-items:center; gap:12px; background:var(--panel); color:var(--ink); border-bottom:1px solid var(--line) }
.dots { display:flex; gap:6px }
.dots i { width:9px; height:9px; flex-shrink:0; border-radius:var(--r-dot); background:var(--dot); color:var(--ink) }
.v2n__title { font-size:var(--text-xs); font-weight:var(--weight-semibold); color:var(--muted) }
.v2n__menu { height:28px; padding:0 6px; display:flex; align-items:stretch; gap:2px; border-bottom:1px solid var(--line); font-size:var(--text-xs); color:var(--muted) }
.v2n__menu span { display:flex; align-items:center; padding:0 10px; position:relative }
.v2n__menu .is-on { color:var(--ink); font-weight:var(--weight-semibold) }
.v2n__menu .is-on::after { content:""; position:absolute; left:10px; right:10px; bottom:-1px; height:2px; border-radius:var(--r-field); background:var(--accent); color:var(--on-accent) }
.dlg__head { height:34px; padding:0 16px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line) }
.dlg__title { font-size:13.5px; font-weight:var(--weight-bold); color:var(--ink); letter-spacing:-.005em }
.dlg__head svg { width:14px; height:14px; fill:none; stroke:var(--muted); stroke-width:2; stroke-linecap:round }
.dlg__body { padding:14px 16px; display:grid; grid-template-columns:1fr 1fr; gap:0 14px }
.dlg__col { display:grid; grid-auto-rows:26px; row-gap:7px; min-width:0 }
.dlg__col+.dlg__col { padding-left:14px; border-left:1px solid var(--line-faint) }
.fld { display:grid; grid-template-columns:78px minmax(0,1fr); align-items:center; gap:8px; min-width:0 }
.fld__k { font-family:var(--font-body); font-size:var(--text-xs); font-weight:var(--weight-medium); color:var(--muted); white-space:nowrap }
.fld__v { min-height:26px; min-width:0; display:flex; align-items:center; justify-content:space-between; gap:6px; padding:3px 8px; font-family:var(--font-mono); font-size:11.5px; color:var(--muted); background:var(--bg); border:1px solid var(--line); border-radius:var(--r-field); overflow-wrap:anywhere; line-height:1.4 }
.fld__v--sel { color:var(--ink); background:var(--panel) }
.fld__v--sel::after { content:"⌄"; flex-shrink:0; color:var(--muted) }
.fld__v--focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-ring); background:var(--bg); color:var(--muted) }
.dlg__foot { height:44px; padding:0 16px; display:flex; align-items:center; justify-content:flex-end; gap:8px; background:var(--panel); color:var(--ink); border-top:1px solid var(--line) }
.mbtn { height:26px; padding:0 18px; display:inline-flex; align-items:center; border-radius:var(--r-field); font-size:12.5px; font-weight:var(--weight-semibold) }
.mbtn--ok { background:var(--accent); color:var(--on-accent); box-shadow:var(--shadow-xs) }
.mbtn--no { background:var(--bg); color:var(--ink); border:1px solid var(--line) }
.cursor { position:absolute; left:734px; top:139px; z-index:3; width:24px; height:24px }
.cursor path { fill:var(--ink); stroke:var(--bg); stroke-width:1.5; stroke-linejoin:round }
.tip { position:absolute; left:756px; top:166px; z-index:3; width:264px; padding:10px 14px; background:var(--ink); color:var(--on-ink); border-radius:var(--r-card); font-size:var(--text-sm); line-height:1.55; font-weight:var(--weight-medium); box-shadow:var(--shadow-float) }
.tip::before { content:""; position:absolute; left:14px; top:-5px; width:10px; height:10px; border-radius:var(--r-field); background:var(--ink); color:var(--on-ink); transform:rotate(45deg) }
.tip code { font-family:var(--font-mono); font-size:var(--text-xs); color:var(--on-ink); background:var(--clear); padding:0 }
.clients { position:absolute; left:-82px; top:118px; z-index:2; display:flex; flex-direction:column; gap:8px; padding:7px; background:var(--bg); color:var(--ink); border:1px solid var(--line); border-radius:var(--r-segment); box-shadow:var(--shadow-float) }
.client { display:flex; flex-direction:column; align-items:center; gap:4px }
.client__sq { width:42px; height:42px; display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:var(--text-xs); font-weight:var(--weight-bold); letter-spacing:-.02em; color:var(--muted); background:var(--panel); border:1px solid var(--line); border-radius:var(--r-client) }
.client__name { font-family:var(--font-mono); font-size:9.5px; color:var(--muted); line-height:1 }
.client--on .client__sq { color:var(--accent-dark); background:var(--bg); border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-ring) }
.client--on .client__name { color:var(--ink) }

/* 无脚本预览页的色板与静态导航。 */
.swatches { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px }
.swatch { min-width:0; border:1px solid var(--line); border-radius:var(--r-ctl); overflow:hidden; background:var(--bg); color:var(--ink) }
.swatch__paint { height:60px }
.swatch code { display:block; padding:10px; font-size:var(--text-xs) }
.paint-bg { background:var(--bg); color:var(--ink) }
.paint-panel { background:var(--panel); color:var(--ink) }
.paint-panel2 { background:var(--panel-2); color:var(--ink) }
.paint-line { background:var(--line); color:var(--ink) }
.paint-faint { background:var(--line-faint); color:var(--ink) }
.paint-accent { background:var(--accent); color:var(--on-accent) }
.paint-accent-dark { background:var(--accent-dark); color:var(--on-accent) }
.paint-ring { background:var(--accent-ring); color:var(--ink) }
.paint-wash { background:var(--accent-wash); color:var(--ink) }
.paint-ink { background:var(--ink); color:var(--on-ink) }
.paint-muted { background:var(--muted); color:var(--on-ink) }
.paint-subtle { background:var(--subtle); color:var(--ink) }
.paint-placeholder { background:var(--placeholder); color:var(--ink) }
.paint-dot { background:var(--dot); color:var(--ink) }
.paint-success { background:var(--success); color:var(--ink) }
.paint-warn { background:var(--warn); color:var(--ink) }
.paint-error { background:var(--error); color:var(--on-ink) }
.paint-on-ink { background:var(--on-ink); color:var(--ink) }
.paint-on-soft { background:linear-gradient(var(--on-ink-soft),var(--on-ink-soft)),var(--ink); color:var(--ink) }
.paint-on-accent { background:var(--on-accent); color:var(--ink) }
.paint-canvas { background:var(--canvas); color:var(--ink) }
.paint-clear { background:linear-gradient(var(--clear),var(--clear)),var(--panel); color:var(--ink) }
.paint-veil { background:var(--veil); color:var(--ink) }
.paint-peach { background:var(--blob-peach); color:var(--ink) }
.paint-pink { background:var(--blob-pink); color:var(--ink) }
.paint-ice { background:var(--blob-ice); color:var(--ink) }
.type-demo { margin-bottom:20px }
.type-demo--display { font-family:var(--font-display); font-size:var(--text-h1); font-weight:var(--weight-display); line-height:1.15 }
.type-demo--mono { font-family:var(--font-mono); font-size:var(--text-nav) }
@media (max-width:1280px) {
  .bento { grid-template-columns:220px minmax(0,1fr) 220px }
  .showcase { margin:16px 96px 0 }
  .paper { left:56px }
  .cursor { left:644px }
  .tip { left:666px }
}
@media (max-width:1100px) {
  .preview-header { height:auto }
  .preview-header .topbar__inner { flex-wrap:wrap; padding-block:10px; gap:8px 16px }
  .preview-header .mainnav { display:block; order:3; width:100%; margin:0 }
  .preview-header .mainnav ul { flex-wrap:wrap }
  .preview-header .mainnav a { min-height:44px }
}
@media (max-width:1080px) {
  .bento { height:auto; grid-template-columns:1fr 1fr; grid-template-rows:auto }
  .cell--lead { grid-column:1 / 3; grid-row:1; padding:32px 24px }
  .cell--k { grid-column:1; grid-row:2 }
  .cell--lic { grid-column:2; grid-row:2 }
  .cell--sub { grid-column:1; grid-row:3 }
  .cell--tun { grid-column:2; grid-row:3 }
  .cell__more { margin-top:12px }
  .fold { height:auto; margin-top:20px }
  .fold__svg,.pin--ml,.pin--mr { display:none }
  .seg { position:relative; left:auto; top:auto; transform:none; width:max-content; max-width:100%; margin-inline:auto }
  .showcase { margin:20px 24px 0 }
  .clients { display:none }
  .shell { height:auto }
  .canvas { padding:28px 20px 32px }
  .paper { position:relative; left:auto; top:auto; width:auto; max-width:640px; margin-inline:auto; transform:none }
  .cursor { display:none }
  .tip { position:relative; left:auto; top:auto; width:auto; max-width:640px; margin:24px auto 0 }
  .tip::before { display:none }
  .feature-detail { grid-template-columns:minmax(0,1fr) }
}
@media (max-width:760px) {
  .stage { width:calc(100% - 24px) }
  .stage__topline { left:-12px; right:-12px }
  .bento { margin:0 12px; grid-template-columns:minmax(0,1fr) }
  .cell--lead,.cell--k,.cell--lic,.cell--sub,.cell--tun { grid-column:1; grid-row:auto }
  .h1 { font-size:28px }
  .cta { flex-direction:column; align-items:stretch; width:100% }
  .platforms { gap:10px 16px }
  .platforms__label { width:100%; text-align:center }
  .showcase { margin:20px 12px 0 }
  .dlg__body { grid-template-columns:minmax(0,1fr); row-gap:7px }
  .dlg__col+.dlg__col { padding-left:0; border-left:0 }
  .feature-tabs { grid-template-columns:minmax(0,1fr); gap:20px }
  .feature-tabs [role="tablist"] { flex-direction:row; flex-wrap:wrap }
  .feature-tabs [role="tab"] { width:auto }
  .article-download { flex-direction:column; align-items:flex-start }
  .swatches { grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width:640px) {
  .canvas { padding-inline:10px }
  .dlg__body { padding-inline:10px }
  .paper { transform:none }
  .dlg__col { grid-auto-rows:minmax(26px,auto) }
  .v2n__menu { height:auto; flex-wrap:wrap; padding-block:4px }
  .v2n__menu span { min-height:24px; padding-inline:6px }
  .seg { gap:4px }
  .seg__item { gap:5px; padding-right:8px; font-size:var(--text-xs) }
  .dl-fab { right:12px; bottom:12px }
  .toc { position:static }
  .mini-window__field { grid-template-columns:minmax(0,1fr) }
}
@media (prefers-reduced-motion:reduce) {
  .cell:hover,.dl-fab:hover { transform:none }
}