/* 首页首屏：Bento 与客户端装置共用一套固定的视觉比例。 */
.hero{min-height:calc(100svh - var(--nav-h) - 72px);display:grid;align-content:center;padding-top:36px;padding-bottom:40px}
.hero-grid{display:grid;grid-template-columns:46fr 54fr;gap:48px;align-items:center}
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;position:relative;z-index:2}
.cell{border-radius:var(--r-md);border:1px solid var(--hairline);transition:transform 250ms ease,box-shadow 250ms ease,border-color 250ms ease}
.cell:hover{transform:translateY(-3px);border-color:var(--hairline-strong);box-shadow:var(--panel-shadow)}
.cell-main{grid-column:1/-1;position:relative;padding:34px 36px 30px;background:linear-gradient(165deg,var(--bg-panel) 0%,var(--bg-panel) 55%,var(--bg) 100%);color:var(--text)}
.cell-main::before,.cell-main::after{content:"";position:absolute;background:var(--muted-a35);color:var(--text)}
.cell-main::before{width:11px;height:1px;right:18px;top:29px}
.cell-main::after{width:1px;height:11px;right:23px;top:24px}
.badge{display:inline-flex;align-items:center;gap:10px;max-width:100%;padding:5px 13px 5px 11px;font-size:13px;color:var(--text-muted);border:1px solid var(--hairline);border-radius:var(--r-pill);background:var(--bg);overflow-wrap:anywhere}
.badge-dot{position:relative;width:8px;height:8px;flex-shrink:0;border-radius:var(--r-circle);background:var(--accent);color:var(--ink);box-shadow:0 0 0 4px var(--accent-a18)}
.hero h1{margin:22px 0 0;font-size:clamp(28px,3.4vw,48px);font-weight:400;line-height:1.2;letter-spacing:-.005em;color:var(--text)}
.h1-line{display:block}
.h1-grad{background:linear-gradient(92deg,var(--violet) 0%,var(--pink) 52%,var(--ice) 100%);-webkit-background-clip:text;background-clip:text;color:var(--clear)}
.lead{margin:24px 0 0;max-width:31em;font-size:15.5px;line-height:1.8;color:var(--text-muted)}
.lead strong{color:var(--text);font-weight:500}
.chips{list-style:none;margin:20px 0 0;padding:0;display:flex;gap:8px;flex-wrap:wrap}
.chips li,.chip,.tag{display:inline-flex;align-items:center;justify-content:center;max-width:100%;padding:3px 12px;font-size:12.5px;color:var(--text-muted);background:var(--clear);border:1px solid var(--border);border-radius:var(--r-pill);overflow-wrap:anywhere;white-space:normal}
.chips li{margin:0}
.cell-fact{grid-column:span 2;padding:15px 18px 16px;background:var(--bg-panel-2);color:var(--text)}
.cell-fact.tier-3{background:var(--bg);color:var(--text)}
.fact-k{display:block;font-size:12px;letter-spacing:.08em;color:var(--text-muted)}
.fact-v{display:block;margin-top:5px;font-size:15px;color:var(--text)}
.fact-v.mono{font-size:15px;letter-spacing:-.01em}
.fact-s{display:block;margin-top:2px;font-size:12px;color:var(--text-muted)}
.cell-plat{grid-column:1/-1;padding:13px 18px;background:var(--bg-panel-2);color:var(--text);display:flex;justify-content:space-between;align-items:center;gap:8px}
.plat{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;color:var(--text-muted)}
.plat-ico{width:30px;height:30px;flex-shrink:0;display:grid;place-items:center;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--bg);color:var(--text)}
.plat-ico svg{width:15px;height:15px;display:block}
.plat:hover{color:var(--accent)}
.plat:hover .plat-ico{border-color:var(--accent-a55);color:var(--accent)}
.stage{position:relative;height:640px;width:100%;pointer-events:none}
.stage-back{position:absolute;inset:-40px -90px -50px -30px;overflow:hidden;pointer-events:none}
.dotgrid{position:absolute;inset:0;background-image:radial-gradient(circle,var(--accent-a30) 0 1px,var(--clear) 1.5px);background-size:18px 18px;mask-image:radial-gradient(ellipse 65% 60% at 72% 30%,var(--mask-solid) 15%,var(--clear) 72%)}
.pixels{position:absolute;top:10px;right:70px;display:grid;grid-template-columns:repeat(7,40px);grid-auto-rows:40px}
.px-1{background:var(--accent-a55);color:var(--text)}
.px-2{background:var(--accent-a30);color:var(--text)}
.px-3{background:var(--accent-a10);color:var(--text)}
.px-4{background:var(--bg-panel-2);color:var(--text)}
.halftone{position:absolute;width:1000px;height:230px;left:calc(50% - 500px);top:calc(50% - 115px);transform:translate(36px,44px) rotate(32deg);clip-path:polygon(0 42%,100% 0,100% 100%,0 58%);background-image:radial-gradient(circle,var(--pink) 0 1.7px,var(--clear) 2.2px);background-size:8px 8px;mask-image:linear-gradient(to left,var(--mask-solid) 0%,var(--mask-solid) 20%,var(--mask-half) 46%,var(--mask-faint) 70%,var(--clear) 88%)}
.halftone::after{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,var(--pink) 0 3px,var(--clear) 3.5px);background-size:8px 8px;background-position:4px 4px;mask-image:linear-gradient(to left,var(--mask-solid) 0%,var(--mask-dense) 14%,var(--clear) 34%)}
.pink-glow{position:absolute;right:-80px;bottom:-60px;width:460px;height:460px;border-radius:var(--r-circle);background:radial-gradient(circle,var(--pink-a35) 0%,var(--violet-a14) 42%,var(--clear) 68%);color:var(--text)}
.phone{position:absolute;left:50%;top:50%;width:300px;height:600px;margin:-300px 0 0 -150px;transform:translate(-14px,0) rotate(-4deg);padding:10px;border-radius:var(--r-phone);background:linear-gradient(160deg,var(--phone-a) 0%,var(--phone-b) 70%);color:var(--text);border:1px solid var(--accent);box-shadow:0 0 0 1px var(--accent-a18),0 0 34px var(--accent-a30),-30px 34px 70px -34px var(--violet-a35),0 46px 90px -28px var(--shadow-deep);z-index:2}
.phone::before,.phone::after{content:"";position:absolute;width:3px;border-radius:var(--r-line);background:var(--phone-a);color:var(--text)}
.phone::before{right:-4px;top:132px;height:58px}
.phone::after{left:-4px;top:110px;height:36px}
.screen{position:relative;height:100%;border-radius:var(--r-screen);background:var(--paper);color:var(--ink);overflow:hidden;display:flex;flex-direction:column;padding:0 16px 10px}
.status{position:relative;height:38px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:4px 8px 0;color:var(--ink)}
.notch{position:absolute;left:50%;top:8px;width:92px;height:24px;margin-left:-46px;border-radius:var(--r-band);background:var(--phone-b);color:var(--text)}
.bars{display:flex;align-items:flex-end;gap:2px;height:11px}
.bars i{display:block;width:3px;border-radius:var(--r-line);background:var(--ink);color:var(--paper)}
.bars i:nth-child(1){height:4px}
.bars i:nth-child(2){height:6px}
.bars i:nth-child(3){height:8px}
.bars i:nth-child(4){height:11px}
.status-r{display:flex;align-items:center;gap:6px}
.status-r svg{display:block}
.status-r .wifi{width:14px;height:11px}
.status-r .batt{width:22px;height:11px}
.ink-stroke{fill:none;stroke:var(--ink);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.ink-fill{fill:var(--ink)}
.appbar{display:flex;align-items:center;justify-content:space-between;padding:10px 4px 12px}
.app-title{font-family:var(--font-display);font-size:22px;font-weight:500;letter-spacing:.01em}
.app-menu{width:18px;height:18px;display:block}
.sec-label{display:block;margin:8px 4px 7px;font-size:11px;letter-spacing:.1em;color:var(--ink-muted)}
.seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:3px;border-radius:var(--r-md);background:var(--seg-bg);color:var(--ink)}
.seg span{text-align:center;padding:6px 0;font-size:13px;color:var(--ink-muted);border-radius:var(--r-sm)}
.seg .on{background:var(--card);color:var(--ink);font-weight:600;box-shadow:0 1px 3px var(--shadow-soft)}
.seg-hint{display:block;margin:7px 4px 0;font-size:11px;line-height:1.5;color:var(--ink-muted)}
.group{background:var(--card);color:var(--ink);border:1px solid var(--ink-line);border-radius:var(--r-md)}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 12px}
.row+.row{border-top:1px solid var(--ink-line)}
.row-t{display:block;font-size:14px;line-height:1.35;color:var(--ink)}
.row-s{display:block;font-size:11px;line-height:1.4;color:var(--ink-muted);margin-top:2px}
.row-s.mono{font-size:11px}
.chev{font-size:16px;color:var(--ink-muted)}
.tg{position:relative;flex-shrink:0;width:38px;height:22px;border-radius:var(--r-pill);background:var(--toggle-off);color:var(--ink)}
.tg::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:var(--r-circle);background:var(--card);color:var(--ink);box-shadow:0 1px 2px var(--shadow-soft)}
.tg.on{background:var(--accent);color:var(--ink)}
.tg.on::after{left:18px}
.update{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:8px;height:42px;border-radius:var(--r-md);background:var(--ink);color:var(--paper);font-size:14px;font-weight:500}
.update svg{width:14px;height:14px;display:block}
.paper-stroke{fill:none;stroke:var(--paper);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.home-ind{width:96px;height:4px;border-radius:var(--r-line);background:var(--ink);color:var(--paper);margin:12px auto 0;flex-shrink:0}
.fcard{position:absolute;z-index:3;background:var(--card);color:var(--ink);border-radius:var(--r-md);border:1px solid;padding:13px 15px 14px}
.fcard-head{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;margin-bottom:10px}
.fcard-head .dot{width:7px;height:7px;border-radius:var(--r-line);flex-shrink:0}
.fc-teal{left:24px;top:78px;width:224px;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-a18),-14px 18px 40px -10px var(--accent-a55),0 26px 50px -18px var(--shadow-deep)}
.fc-teal .dot{background:var(--accent);color:var(--ink)}
.fc-pink{right:0;top:252px;width:288px;border-color:var(--pink);box-shadow:0 0 0 4px var(--pink-a14),16px 18px 44px -10px var(--pink-a60),0 26px 50px -18px var(--shadow-deep)}
.fc-pink .dot{background:var(--pink);color:var(--ink)}
.fc-violet{right:36px;top:444px;width:236px;border-color:var(--violet);box-shadow:0 0 0 4px var(--violet-a14),14px 20px 44px -10px var(--violet-a35),0 26px 50px -18px var(--shadow-deep)}
.fc-violet .dot{background:var(--violet);color:var(--ink)}
.fc-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px}
.fc-row+.fc-row{margin-top:10px;padding-top:10px;border-top:1px solid var(--ink-line)}
.pill-sel{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;font-size:12px;border:1px solid var(--ink-line);border-radius:var(--r-sm);color:var(--ink);background:var(--paper)}
.pill-sel em{font-style:normal;font-size:9px;color:var(--ink-muted)}
.fc-btn{margin-top:12px;display:flex;align-items:center;justify-content:center;height:32px;border-radius:var(--r-sm);background:var(--accent);color:var(--ink);font-size:12.5px;font-weight:600}
.code{margin:0;padding:0;border:0;border-radius:var(--r-sm);background:var(--card);font-family:var(--font-mono);font-size:12px;line-height:1.85;color:var(--ink);white-space:pre}
.code .k{color:var(--band-a)}
.code .p{color:var(--ink)}
.code .c{color:var(--ink-muted)}
.fc-file{margin-left:auto;font-family:var(--font-mono);font-size:11px;font-weight:400;color:var(--ink-muted)}
.capsule{position:absolute;z-index:3;left:330px;top:598px;width:236px;height:34px;border:1px solid var(--muted-a35);border-radius:var(--r-pill);display:flex;align-items:center;justify-content:flex-end;padding-right:16px}
.capsule svg{width:56px;height:10px;display:block}
.muted-stroke{fill:none;stroke:var(--text-muted);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.tick{position:absolute;width:13px;height:13px;z-index:1}
.tick::before,.tick::after{content:"";position:absolute;background:var(--text-muted);color:var(--ink)}
.tick::before{left:0;right:0;top:6px;height:1px}
.tick::after{top:0;bottom:0;left:6px;width:1px}
.t1{left:150px;top:22px}
.t2{left:-6px;top:348px}
.t3{right:10px;top:600px}
.peek{position:relative;background:var(--bg-panel);color:var(--text);border-top:1px solid var(--hairline);padding-top:40px;padding-bottom:176px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:13px;letter-spacing:.22em;color:var(--text)}
.eyebrow::before{content:"";width:8px;height:8px;flex-shrink:0;border-radius:var(--r-line);background:var(--pink);color:var(--ink)}
.peek h2{margin:16px 0 0;font-size:30px;line-height:1.3}
.peek p{margin:14px 0 0;max-width:40em;color:var(--text-muted);font-size:15.5px;line-height:1.8}

/* Tabs：普通横排与资料浏览器竖排使用同一交互契约。 */
.tabs{min-width:0}
[role="tablist"]{display:flex;align-items:center;gap:8px;max-width:100%;overflow-x:auto;padding:4px;scrollbar-width:thin}
[role="tab"]{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;flex-shrink:0;padding:10px 20px;background:var(--bg-panel);color:var(--text);border:1px solid var(--border);border-radius:var(--r-sm);font-weight:400}
[role="tab"]:hover{border-color:var(--accent)}
[role="tab"][aria-selected="true"]{background:var(--accent);color:var(--ink);border-color:var(--accent)}
[role="tabpanel"]{min-width:0;margin-top:24px}
.feature-band{margin-top:-80px;border-radius:var(--r-band);background:linear-gradient(120deg,var(--band-a),var(--band-b));color:var(--text);padding:56px;isolation:isolate}
.feature-heading{text-align:center;margin-bottom:40px}
.feature-heading .eyebrow::before{display:none}
.feature-heading h2{margin:16px 0 0}
.feature-browser{display:grid;grid-template-columns:minmax(200px,.7fr) minmax(0,1.5fr);gap:40px}
.feature-browser [role="tablist"]{flex-direction:column;align-items:stretch;overflow:visible;padding:0;gap:8px}
.feature-browser [role="tab"]{--tab-tone:var(--accent);justify-content:flex-start;white-space:normal;min-width:0;background:var(--clear);color:var(--text);border:0;border-radius:var(--r-sm);padding:18px 20px}
.feature-browser [role="tab"]:nth-child(3n+2){--tab-tone:var(--pink)}
.feature-browser [role="tab"]:nth-child(3n){--tab-tone:var(--violet)}
.feature-browser [role="tab"]::before{content:"";width:7px;height:7px;flex-shrink:0;border-radius:var(--r-circle);background:var(--tab-tone);color:var(--ink)}
.feature-browser [role="tab"][aria-selected="true"]{background:var(--white-a90);color:var(--ink);box-shadow:inset 2px 0 0 var(--tab-tone)}
.tab-progress{position:absolute;left:20px;right:20px;bottom:6px;height:2px;background:var(--ink-line);color:var(--ink);border-radius:var(--r-line);overflow:hidden}
.tab-progress::after{content:"";display:block;height:100%;background:var(--tab-tone);color:var(--ink);transform:scaleX(0);transform-origin:left}
.tabs.is-playing [aria-selected="true"] .tab-progress::after{animation:tab-countdown var(--tab-duration,8000ms) linear forwards}
@keyframes tab-countdown{to{transform:scaleX(1)}}
.feature-detail{--detail-glow:var(--accent-a30);margin:0!important;padding:30px;background:var(--paper);color:var(--ink);border:1px solid var(--ink-line);border-radius:var(--r-md);box-shadow:0 0 36px var(--detail-glow),0 24px 40px -20px var(--shadow-deep)}
.feature-detail[data-tone="pink"]{--detail-glow:var(--pink-a35)}
.feature-detail[data-tone="violet"]{--detail-glow:var(--violet-a35)}
.feature-detail h3{margin:0 0 14px}
.feature-detail pre{background:var(--card);color:var(--ink);border-color:var(--ink-line)}
.feature-detail ul{font-family:var(--font-mono)}
.toc,.toc-tabs{display:flex;gap:12px;flex-wrap:wrap;max-width:100%;padding:16px;background:var(--bg-panel);color:var(--text);border:1px solid var(--border);border-radius:var(--r-md)}
.toc a,.toc-tabs a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 14px;color:var(--text)}
.toc a:hover,.toc-tabs a:hover{color:var(--accent)}
.toc-sticky{position:sticky;top:16px;z-index:5}
.faq-item{border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg-panel);color:var(--text);margin-bottom:12px}
.faq-item summary{position:relative;padding:20px 52px 20px 22px;cursor:pointer;list-style:none;font-size:17px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:22px;top:18px;color:var(--accent);font-size:22px}
.faq-item[open] summary::after{content:"−"}
.faq-answer{padding:0 22px 22px;color:var(--text-muted)}
.faq-answer p:last-child{margin-bottom:0}
.term-card{border-top:2px solid var(--hairline-strong)}
.term-card dt{font-size:21px;margin-bottom:6px}
.term-card dd{margin:0;color:var(--text-muted)}
.term-en{display:block;font-family:var(--font-mono);font-size:13px;color:var(--text-muted);margin-bottom:16px}
.client-card{position:relative;display:flex;flex-direction:column;gap:20px}
.client-card.is-preferred{border-color:var(--accent);box-shadow:0 0 26px var(--accent-a10),var(--panel-shadow)}
.client-card-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.client-card-head h3{margin:0}
.client-icon{width:56px;height:56px;flex-shrink:0}
.client-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:auto}
.client-meta{font-size:14px;color:var(--text-muted)}
[data-version]:empty{display:none}
.status-badge{display:inline-flex;align-items:center;justify-content:center;gap:6px;max-width:100%;padding:3px 10px;font-size:12px;border-radius:var(--r-pill);border:1px solid var(--border);background:var(--bg);color:var(--text-muted);white-space:normal;overflow-wrap:anywhere}
.status-badge.preferred,.status-badge.recommended{border-color:var(--accent-a55);background:var(--accent-a10);color:var(--accent)}
.status-badge.archived{border-color:var(--warn);background:var(--bg);color:var(--warn)}
.status-badge.success{color:var(--success)}
.status-badge.error{color:var(--error)}
.post-card{display:flex;flex-direction:column}
.post-card .post-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;color:var(--text-muted);font-size:13px;margin-bottom:20px}
.post-card h3{font-size:23px;line-height:1.5;margin-bottom:14px}
.post-card h3 a{color:var(--text)}
.post-card h3 a:hover{color:var(--accent)}
.post-card p{color:var(--text-muted)}
.post-card .post-link{margin-top:auto;padding-top:16px}
.callout{margin:24px 0;padding:22px 24px;border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:var(--r-sm);background:var(--bg-panel-2);color:var(--text)}
.callout p:last-child{margin-bottom:0}
.callout-warning{border-left-color:var(--warn)}
.callout-error{border-left-color:var(--error)}
.table-wrap{max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;border:1px solid var(--border);border-radius:var(--r-md)}
.data-table{width:100%;border-collapse:collapse;text-align:left;background:var(--bg-panel);color:var(--text)}
.data-table th,.data-table td,.prose table th,.prose table td,.article-body table th,.article-body table td{min-width:7em;padding:14px 18px;vertical-align:top;border-bottom:1px solid var(--border);overflow-wrap:normal;word-break:normal}
.data-table th{font-weight:500;background:var(--bg-panel-2);color:var(--text)}
.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-inline:contain}
.prose table code,.article-body table code{overflow-wrap:anywhere}
.article-body{min-width:0}
.article-download{margin-top:48px;padding:28px;border:1px solid var(--hairline-strong);border-radius:var(--r-md);background:var(--bg-panel-2);color:var(--text);display:flex;justify-content:space-between;align-items:center;gap:24px}
.article-download h2{font-size:24px;margin:0 0 8px}
.article-download p{color:var(--text-muted);margin:0}
.article-download .btn-primary{flex-shrink:0}
.dl-fab{position:fixed;right:24px;bottom:24px;z-index:20;display:inline-flex;align-items:center;justify-content:center;gap:12px;max-width:calc(100% - 40px);min-height:56px;padding:12px 20px;border:1px solid var(--accent);border-radius:var(--r-md);background:var(--bg-panel);color:var(--text);box-shadow:0 0 24px var(--accent-a18),0 12px 28px var(--shadow-deep)}
.dl-fab:hover{background:var(--bg-panel-2);color:var(--accent)}
.dl-fab svg{width:22px;height:22px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.dl-fab small{display:block;font-size:12px;color:var(--text-muted)}
.preview-section h2{margin-top:0}
.preview-stack{display:grid;gap:24px}
.preview-colors{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.swatch{min-width:0;border:1px solid var(--border);border-radius:var(--r-sm);overflow:hidden;background:var(--bg-panel);color:var(--text)}
.swatch i{display:block;height:64px;background:var(--swatch);color:var(--text)}
.swatch code{display:block;padding:10px;font-size:12px}
.sw-bg{--swatch:var(--bg)}.sw-panel{--swatch:var(--bg-panel)}.sw-panel2{--swatch:var(--bg-panel-2)}.sw-border{--swatch:var(--border)}
.sw-accent{--swatch:var(--accent)}.sw-accent-dark{--swatch:var(--accent-dark)}.sw-accent-hover{--swatch:var(--accent-hover)}.sw-text{--swatch:var(--text)}.sw-muted{--swatch:var(--text-muted)}
.sw-success{--swatch:var(--success)}.sw-warn{--swatch:var(--warn)}.sw-error{--swatch:var(--error)}.sw-nav{--swatch:var(--nav-surface)}.sw-nav-ink{--swatch:var(--nav-ink)}.sw-nav-muted{--swatch:var(--nav-muted)}.sw-nav-line{--swatch:var(--nav-line)}
.sw-pink{--swatch:var(--pink)}.sw-violet{--swatch:var(--violet)}.sw-band-a{--swatch:var(--band-a)}.sw-band-b{--swatch:var(--band-b)}
.sw-ice{--swatch:var(--ice)}.sw-paper{--swatch:var(--paper)}.sw-card{--swatch:var(--card)}.sw-ink{--swatch:var(--ink)}.sw-ink-muted{--swatch:var(--ink-muted)}.sw-ink-line{--swatch:var(--ink-line)}
.sw-seg{--swatch:var(--seg-bg)}.sw-off{--swatch:var(--toggle-off)}.sw-phone-a{--swatch:var(--phone-a)}.sw-phone-b{--swatch:var(--phone-b)}
.sw-a10{--swatch:var(--accent-a10)}.sw-a18{--swatch:var(--accent-a18)}.sw-a30{--swatch:var(--accent-a30)}.sw-a55{--swatch:var(--accent-a55)}.sw-a75{--swatch:var(--accent-a75)}
.sw-p14{--swatch:var(--pink-a14)}.sw-p35{--swatch:var(--pink-a35)}.sw-p60{--swatch:var(--pink-a60)}.sw-v14{--swatch:var(--violet-a14)}.sw-v35{--swatch:var(--violet-a35)}
.sw-m35{--swatch:var(--muted-a35)}.sw-hair{--swatch:var(--hairline)}.sw-hair-strong{--swatch:var(--hairline-strong)}.sw-shadow{--swatch:var(--shadow-deep)}.sw-shadow-soft{--swatch:var(--shadow-soft)}.sw-white{--swatch:var(--white-a90)}
.sw-clear{--swatch:var(--clear)}.sw-mask{--swatch:var(--mask-solid)}.sw-half{--swatch:var(--mask-half)}.sw-faint{--swatch:var(--mask-faint)}.sw-dense{--swatch:var(--mask-dense)}
.preview-fab{position:static;margin-top:24px}
@media(max-width:1080px){.hero-grid{grid-template-columns:minmax(0,1fr);gap:56px}.stage{max-width:665px;margin-inline:auto}}
@media(max-width:800px){.feature-band{padding:32px 24px}.feature-browser{grid-template-columns:minmax(0,1fr);gap:24px}.feature-browser [role="tablist"]{flex-direction:row;overflow-x:auto;align-items:center}.feature-browser [role="tab"]{flex-shrink:0;white-space:nowrap}.feature-detail{padding:24px}.preview-colors{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:720px){
  .cell-main{padding:26px 22px 24px}
  .hero h1{font-size:28px}
  .cell-fact{grid-column:span 3}
  .cell-fact.fact-wide{grid-column:1/-1}
  .cell-plat{flex-wrap:wrap;justify-content:flex-start;gap:12px 18px}
  .stage-wrap{height:370px;position:relative}
  .stage{position:absolute;left:50%;top:0;width:665px;margin-left:-332px;transform:scale(.55);transform-origin:top center}
  .peek h2{font-size:22px}
  .article-download{align-items:flex-start;flex-direction:column}
}
@media(max-width:640px){
  .feature-band{padding:32px 20px}
  .feature-detail{padding:20px}
  .preview-colors{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dl-fab{right:20px;bottom:16px;min-height:52px;padding:10px 16px}
  .cell:hover{transform:none}
  .chips{justify-content:center}
  .phone{transform:translate(-14px,0)}
  .halftone{transform:translate(36px,44px)}
}
@media(prefers-reduced-motion:reduce){.cell:hover{transform:none}.tab-progress::after{animation:none!important}}