.get-actions,.ctas { display:flex; justify-content:center; flex-wrap:wrap; align-items:center; gap:10px; margin-top:22px }
.get-actions--start { justify-content:flex-start }
.get-actions > * { min-width:0; max-width:100% }
.get-note { margin:10px 0 0; font-size:12.5px; color:var(--muted); letter-spacing:.005em }
.get-note .ver { font-family:var(--font-mono); font-size:12px }
.store-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  min-height:56px; max-width:100%; padding:9px 20px;
  border:1px solid var(--text); border-radius:var(--r-btn);
  background:var(--text); color:var(--on-dark); box-shadow:var(--shadow-near);
}
.store-btn:hover { background:var(--text-hover); color:var(--on-dark) }
.store-btn svg { width:24px; height:28px; flex-shrink:0; fill:currentColor }
.store-btn__copy { display:block; min-width:0; text-align:left; line-height:1.35 }
.store-btn__eyebrow { display:block; font-size:var(--fs-tiny) }
.store-btn__title { display:block; font-size:16px; font-weight:var(--fw-medium) }
.store-btn[aria-disabled="true"] { background:var(--panel-2); color:var(--muted); border-color:var(--line); cursor:not-allowed }
.fact-row,.badge-row { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px; padding:0; list-style:none }
.fact-pill,.badge {
  display:inline-flex; align-items:center; justify-content:center; gap:7px; max-width:100%;
  padding:5px 11px; border:1px solid var(--line); border-radius:var(--r-pill);
  background:var(--panel); color:var(--muted); font-size:12.5px; line-height:1.5;
  overflow-wrap:anywhere;
}
.fact-pill--coral { border-color:var(--coral); color:var(--text) }
.badge--accent { background:var(--accent-wash); color:var(--accent-dark); border-color:var(--accent-ring) }
.status-dot { width:6px; height:6px; border-radius:var(--r-dot); background:var(--accent); box-shadow:0 0 0 3px var(--accent-wash); flex-shrink:0 }
.plat-grid { display:flex; flex-wrap:wrap; gap:20px }
.plat-card {
  position:relative; flex:1 1 290px; min-width:0; max-width:100%; padding:28px 24px;
  border:1px solid var(--line); border-radius:var(--r-card);
  background:var(--panel); color:var(--text); box-shadow:var(--shadow-near);
}
.plat-card h3 { margin:0 0 12px }
.plat-card p { color:var(--muted) }
.plat-card__icon { width:24px; height:24px; margin-bottom:18px }
.plat-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:24px }
.plat-actions .btn { flex:0 1 auto }
.plat-card::before { display:none; position:absolute; top:12px; right:12px; padding:3px 8px; border-radius:var(--r-pill); background:var(--accent-wash); color:var(--accent-dark); font-size:var(--fs-tiny); content:attr(data-mine) }
html[data-visitor-os="ios"] .plat-card[data-plat="ios"] { order:-1 }
html[data-visitor-os="mac"] .plat-card[data-plat="mac"] { order:-1 }
html[data-visitor-os="windows"] .plat-card[data-plat="windows"] { order:-1 }
html[data-visitor-os="android"] .plat-card[data-plat="android"] { order:-1 }
html[data-visitor-os="linux"] .plat-card[data-plat="linux"] { order:-1 }
html[data-visitor-os="ios"] .plat-card[data-plat="ios"]::before,
html[data-visitor-os="mac"] .plat-card[data-plat="mac"]::before,
html[data-visitor-os="windows"] .plat-card[data-plat="windows"]::before,
html[data-visitor-os="android"] .plat-card[data-plat="android"]::before,
html[data-visitor-os="linux"] .plat-card[data-plat="linux"]::before { display:block }
.wx-open-tip {
  position:fixed; z-index:70; inset:auto 16px max(20px,env(safe-area-inset-bottom));
  width:calc(100% - 32px); max-width:520px; margin-inline:auto; padding:18px 22px;
  border:1px solid var(--line); border-radius:var(--r-float); box-shadow:var(--shadow-float);
  background:var(--panel); color:var(--text); font-size:14px;
}
.tabset { min-width:0 }
.feature-tabs,[role="tablist"].pill-tabs { display:flex; flex-wrap:wrap; gap:8px; margin-block:24px }
.feature-tabs [role="tab"],.pill-tabs [role="tab"] {
  min-height:44px; max-width:100%; padding:9px 16px;
  border:1px solid var(--line-strong); border-radius:var(--r-btn);
  background:var(--panel); color:var(--muted); font:inherit; font-size:14px;
}
.feature-tabs [aria-selected="true"],.pill-tabs [aria-selected="true"] { background:var(--text); color:var(--on-dark); border-color:var(--text) }
[role="tabpanel"] { min-width:0; scroll-margin-top:28px }
.feature-scene { position:relative; overflow-x:clip; padding:54px 7%; border-radius:var(--r-float); background:linear-gradient(112deg,var(--sky-mist),var(--sky-sage) 36%,var(--sky-blush) 66%,var(--sky-peach)); color:var(--text) }
.feature-window { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:40px; padding:32px; border:1px solid var(--line); border-radius:var(--r-float); background:var(--panel); color:var(--text); box-shadow:var(--shadow-float) }
.feature-window h3 { margin-top:0 }
.feature-window p { margin-bottom:0; color:var(--muted); line-height:1.85 }
.feature-sample { display:flex; flex-wrap:wrap; align-content:center; gap:8px; min-width:0 }
.feature-sample pre { width:100% }
.toc { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:12px; border:1px solid var(--line); border-radius:var(--r-card); background:var(--bg); color:var(--text); margin-bottom:36px }
.toc a { display:flex; align-items:center; min-height:44px; padding:8px 12px; border-radius:var(--r-sec); font-size:14px; color:var(--muted) }
.toc a:hover,.toc a[aria-current="location"] { background:var(--accent-wash); color:var(--accent-dark) }
.toc--sticky { position:sticky; top:12px; z-index:10 }
.faq { border-top:1px solid var(--line) }
.faq details { border-bottom:1px solid var(--line); padding-block:4px }
.faq summary { position:relative; cursor:pointer; list-style:none; padding:18px 36px 18px 0; font-weight:var(--fw-medium) }
.faq summary::-webkit-details-marker { display:none }
.faq summary::after { content:"+"; position:absolute; right:8px; top:17px; color:var(--accent); font-size:20px; line-height:1.4 }
.faq details[open] summary::after { content:"−" }
.faq__answer { max-width:70ch; padding-bottom:20px; color:var(--muted) }
.faq__answer p:last-child { margin-bottom:0 }
.term-card { padding:24px; border:1px solid var(--line); border-radius:var(--r-card); background:var(--panel); color:var(--text) }
.term-card h3 { margin:0 0 10px; font-size:19px }
.term-card p { color:var(--muted); margin-bottom:0 }
.term-card__category { display:block; margin-bottom:14px; font-size:var(--fs-tiny); color:var(--accent) }
.official-shot { width:100%; max-width:280px; min-width:0; margin:0 auto; flex-shrink:0 }
.official-shot img { display:block; width:100%; height:auto; border-radius:var(--r-shot); }
.official-shot img { outline:1px solid var(--line) }
.official-shot figcaption { padding-top:12px; color:var(--muted); font-size:var(--fs-small); line-height:1.6 }
.shot-row { display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start; gap:32px }
.device-entry { display:flex; align-items:center; gap:20px; min-width:0; padding:24px; border:1px solid var(--line); border-radius:var(--r-card); background:var(--panel); color:var(--text); box-shadow:var(--shadow-near) }
.device-entry:hover { border-color:var(--accent-ring) }
.device-entry svg { width:40px; height:48px; fill:none; stroke:currentColor; stroke-width:1.5; flex-shrink:0 }
.device-entry strong { display:block; font-size:18px }
.device-entry p { margin:4px 0 0; color:var(--muted); font-size:14px }
.article-card { display:flex; flex-direction:column; min-width:0; padding:26px; border:1px solid var(--line); border-radius:var(--r-card); background:var(--panel); color:var(--text); box-shadow:var(--shadow-near) }
.article-card__meta { display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; margin-bottom:18px; color:var(--muted); font-size:var(--fs-small) }
.article-card h3 { margin:0 0 12px; font-size:20px }
.article-card h3 a:hover { color:var(--accent) }
.article-card p { color:var(--muted); font-size:14px; line-height:1.8 }
.article-card__more { margin-top:auto; padding-top:12px; color:var(--accent); font-size:14px }
.callout { margin:24px 0; padding:20px 24px; border:1px solid var(--accent-ring); border-left:3px solid var(--accent); border-radius:var(--r-card); background:var(--accent-wash); color:var(--accent-dark) }
.callout p:last-child { margin-bottom:0 }
.table-scroll { max-width:100%; min-width:0; overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:var(--r-card) }
.data-table { width:100%; border-collapse:collapse; text-align:left; background:var(--panel); color:var(--text); font-size:14px }
.data-table :is(th,td),.prose table :is(th,td),.manual-content table :is(th,td) { min-width:7em; padding:14px 18px; vertical-align:top; overflow-wrap:normal; word-break:normal; border-bottom:1px solid var(--line) }
.data-table th,.prose th,.manual-content th { background:var(--panel-2); color:var(--text); font-weight:var(--fw-medium) }
.data-table tr:last-child td { border-bottom:0 }
.prose table,.manual-content table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; min-width:0; border-collapse:collapse; text-align:left }
#install table code { word-break:normal; overflow-wrap:normal; white-space:pre }
.dl-fab {
  position:fixed; right:24px; bottom:max(24px,env(safe-area-inset-bottom)); z-index:25;
  display:flex; align-items:center; gap:10px; min-height:48px; max-width:calc(100% - 48px);
  padding:12px 18px; border:1px solid var(--line); border-radius:var(--r-btn);
  background:var(--text); color:var(--on-dark); box-shadow:var(--shadow-soft); font-size:14px;
}
.dl-fab svg { width:20px; height:20px; flex-shrink:0 }
.dl-fab:hover { background:var(--text-hover); color:var(--on-dark) }
.article-get-card { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px; padding:28px; margin-top:48px; border:1px solid var(--line); border-radius:var(--r-card); background:var(--panel-2); color:var(--text) }
.article-get-card__copy { min-width:0; flex:1 1 280px }
.article-get-card h2 { font-size:24px; margin:0 0 10px }
.article-get-card p { color:var(--muted); margin-bottom:0 }
.hero { padding-top:30px; overflow-x:clip }
.hero__copy { max-width:880px; margin-inline:auto; padding-inline:20px; text-align:center }
.switch { display:inline-flex; padding:3px; gap:2px; border-radius:var(--r-pill); background:var(--panel-2); color:var(--text); border:1px solid var(--line) }
.switch a { padding:5px 18px; border-radius:var(--r-pill); font-size:13.5px; color:var(--muted); line-height:20px }
.switch a:hover { color:var(--text) }
.switch a[aria-current="true"] { background:var(--panel); color:var(--text); box-shadow:var(--shadow-chip) }
.hero h1 { margin:18px 0 0; font-size:clamp(26px,calc(1.8vw + 20px),46px); font-weight:var(--fw-display); line-height:1.12; letter-spacing:var(--tracking-title) }
.hero h1 .l1,.hero h1 .l2 { display:block }
.hero h1 .l2 { color:var(--muted) }
.lede { max-width:46em; margin:14px auto 0; font-size:16px; line-height:1.68; color:var(--muted) }
.lede strong { color:var(--text); font-weight:var(--fw-strong) }
.platforms { margin:16px auto 0; padding:0; list-style:none; display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:8px 22px }
.platforms li,.platforms a { display:flex; align-items:center; gap:7px; font-size:13.5px; color:var(--muted); line-height:32px }
.platforms a:hover { color:var(--accent) }
.platforms svg { width:16px; height:16px; flex-shrink:0; color:var(--text) }
.ico-line { fill:none; stroke:currentColor; stroke-width:1.6 }
.ico-fill { fill:currentColor; stroke:none }
.platforms .price { margin-left:4px; padding:0 12px; border:1px solid var(--line); border-radius:var(--r-pill); background:var(--panel); color:var(--text); font-size:12.5px; line-height:28px; gap:8px }
.platforms .price i { width:6px; height:6px; border-radius:var(--r-dot); background:var(--accent); box-shadow:0 0 0 3px var(--accent-wash); flex-shrink:0 }
.scene {
  position:relative; width:calc(100% - var(--gutter) * 2); height:380px; margin:28px auto 0;
  border-radius:var(--r-float); overflow:hidden; isolation:isolate; color:var(--text);
  background:radial-gradient(55% 70% at 86% 22%,var(--sky-peach),var(--clear) 70%),radial-gradient(45% 60% at 8% 70%,var(--sky-mist),var(--clear) 72%),linear-gradient(112deg,var(--sky-mist) 0%,var(--sky-sage) 36%,var(--sky-blush) 66%,var(--sky-peach) 100%);
}
.scene::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,var(--haze),var(--haze-none) 45%); z-index:0; pointer-events:none }
.cloud { position:absolute; z-index:0; border-radius:var(--r-dot); background:radial-gradient(closest-side,var(--cloud),var(--cloud-soft)); filter:blur(14px); opacity:.9; pointer-events:none }
.cloud--a { top:-70px; left:6%; width:44%; height:170px }
.cloud--b { top:-50px; right:4%; width:36%; height:150px; opacity:.75 }
.hills { position:absolute; inset:auto 0 0; width:100%; height:210px; z-index:0; display:block }
.hills .far { fill:var(--hill-far) }
.hills .mid { fill:var(--hill-mid) }
.hills .near { fill:var(--hill-near) }
.statusline { position:absolute; inset:auto 0 0; z-index:2; height:30px; padding:0 18px; display:flex; align-items:center; gap:18px; background:var(--glass); color:var(--muted); border-top:1px solid var(--glass-line); backdrop-filter:blur(8px); font-family:var(--font-mono); font-size:var(--fs-tiny); white-space:nowrap; overflow:hidden }
.statusline .dot { width:6px; height:6px; border-radius:var(--r-dot); background:var(--accent); box-shadow:0 0 0 3px var(--accent-wash); flex-shrink:0 }
.statusline b { font-weight:var(--fw-medium); color:var(--text) }
.statusline .push { margin-left:auto }
.confwin { position:absolute; z-index:1; top:30px; left:50%; width:78%; margin:0; transform:translateX(-50%) rotate(-1.5deg); background:var(--panel); color:var(--text); border:1px solid var(--line); border-radius:var(--r-float); box-shadow:var(--shadow-float),var(--shadow-soft) }
.confwin__bar { height:40px; padding:0 16px; display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--line); font-size:13px; color:var(--text) }
.confwin__bar svg { width:15px; height:15px; color:var(--muted); fill:none; stroke:currentColor; stroke-width:1.4 }
.confwin__name { font-family:var(--font-mono); font-size:12.5px }
.tag-demo { margin-left:auto; padding:0 9px; line-height:20px; border-radius:var(--r-pill); border:1px solid var(--line); background:var(--panel-2); color:var(--muted); font-size:var(--fs-tiny) }
.confwin__body { display:grid; grid-template-columns:172px minmax(0,1fr) 300px; min-height:244px }
.sections { margin:0; padding:14px 10px; list-style:none; border-right:1px solid var(--line); background:var(--bg); color:var(--muted); border-bottom-left-radius:var(--r-float) }
.sections .cap { padding:0 10px 8px; font-size:11px; letter-spacing:.04em; color:var(--muted) }
.sections li.sec { position:relative; padding:0 10px; line-height:32px; border-radius:var(--r-sec); font-family:var(--font-mono); font-size:12.5px; color:var(--muted) }
.sections li.sec[aria-current="true"] { background:var(--accent-wash); color:var(--accent-dark); font-weight:var(--fw-medium) }
.sections li.sec[aria-current="true"]::before { content:""; position:absolute; left:0; top:8px; bottom:8px; width:2px; border-radius:var(--r-line); background:var(--accent) }
.code { min-width:0; overflow-x:auto; margin:0; padding:16px 0; list-style:none; counter-reset:ln; font-family:var(--font-mono); font-size:13px; line-height:28px; color:var(--text) }
.code li { counter-increment:ln; display:flex; padding-right:16px; white-space:nowrap; width:max-content; min-width:100% }
.code li::before { content:counter(ln); flex-shrink:0; width:44px; padding-right:14px; text-align:right; color:var(--muted) }
.code li.hit { background:var(--accent-wash); color:var(--text); box-shadow:inset 2px 0 0 var(--accent) }
.code .sec-h,.code .k { font-weight:var(--fw-medium); color:var(--text) }
.code .cm,.code .p,.code .v { color:var(--muted) }
.code .px { color:var(--coral); font-weight:var(--fw-medium) }
.code .dr { color:var(--accent); font-weight:var(--fw-medium) }
.routing-slot { position:relative; padding:18px 0 18px 4px }
.routing { position:relative; margin-right:-24px; padding:14px 14px 12px; border-radius:var(--r-float); background:var(--panel-2); color:var(--text); border:1px solid var(--line); box-shadow:var(--shadow-float) }
.routing__h { padding:0 6px 8px; font-size:12px; font-weight:var(--fw-medium); color:var(--muted); letter-spacing:.01em }
.group { margin:0; padding:0; list-style:none; background:var(--panel); color:var(--text); border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden }
.group li { position:relative; display:flex; align-items:center; gap:8px; height:38px; padding:0 12px 0 14px; font-size:13.5px; color:var(--text) }
.group li + li::before { content:""; position:absolute; top:0; left:14px; right:0; height:1px; background:var(--line) }
.group .tick { margin-left:auto; width:15px; height:15px; color:var(--accent) }
.group .chev { width:12px; height:12px; color:var(--muted) }
.group .spacer { margin-left:auto }
.routing__foot { margin:8px 6px 0; font-size:var(--fs-tiny); line-height:1.5; color:var(--muted) }
.routing__foot code { font-family:var(--font-mono); font-size:11px; color:var(--accent-dark) }
.preview-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); gap:20px }
.preview-grid > * { min-width:0 }
.preview-label { font-family:var(--font-mono); font-size:var(--fs-small); color:var(--muted) }
.swatch { border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; background:var(--panel); color:var(--text) }
.swatch__paint { height:64px; border-bottom:1px solid var(--line) }
.swatch code { display:block; padding:12px; color:var(--text) }
.swatch--bg .swatch__paint { background:var(--bg) }
.swatch--panel .swatch__paint { background:var(--panel) }
.swatch--panel-2 .swatch__paint { background:var(--panel-2) }
.swatch--line .swatch__paint { background:var(--line) }
.swatch--line-strong .swatch__paint { background:var(--line-strong) }
.swatch--accent .swatch__paint { background:var(--accent) }
.swatch--accent-dark .swatch__paint { background:var(--accent-dark) }
.swatch--accent-wash .swatch__paint { background:var(--accent-wash) }
.swatch--accent-ring .swatch__paint { background:var(--accent-ring) }
.swatch--coral .swatch__paint { background:var(--coral) }
.swatch--text .swatch__paint { background:var(--text) }
.swatch--text-hover .swatch__paint { background:var(--text-hover) }
.swatch--muted .swatch__paint { background:var(--muted) }
.swatch--faint .swatch__paint { background:var(--faint) }
.swatch--on-dark .swatch__paint { background:var(--on-dark) }
.swatch--success .swatch__paint { background:var(--success) }
.swatch--warn .swatch__paint { background:var(--warn) }
.swatch--error .swatch__paint { background:var(--error) }
.swatch--mist .swatch__paint { background:var(--sky-mist) }
.swatch--sage .swatch__paint { background:var(--sky-sage) }
.swatch--blush .swatch__paint { background:var(--sky-blush) }
.swatch--peach .swatch__paint { background:var(--sky-peach) }
.swatch--cloud .swatch__paint { background:var(--cloud) }
.swatch--cloud-soft .swatch__paint { background:var(--cloud-soft) }
.swatch--haze .swatch__paint { background:var(--haze) }
.swatch--haze-none .swatch__paint { background:var(--haze-none) }
.swatch--near .swatch__paint { background:var(--hill-near) }
.swatch--mid .swatch__paint { background:var(--hill-mid) }
.swatch--far .swatch__paint { background:var(--hill-far) }
.swatch--glass .swatch__paint { background:var(--glass) }
.swatch--glass-line .swatch__paint { background:var(--glass-line) }
.swatch--veil .swatch__paint { background:var(--veil) }
.swatch--clear .swatch__paint { background:var(--clear) }
.shot-placeholder { display:grid; align-content:center; justify-items:center; gap:16px; aspect-ratio:750/1334; border:1px solid var(--line); border-radius:var(--r-shot); background:var(--panel-2); color:var(--muted); padding:24px; text-align:center }
.preview-type h1 { margin-block:0 18px }
.preview-type h2 { margin-block:24px 12px }
.preview-type h3 { margin-block:24px 12px }
.preview-icon { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round }
@media (max-width:1180px) {
  .confwin { width:86% }
  .confwin__body { grid-template-columns:150px minmax(0,1fr) 260px }
}
@media (max-width:900px) {
  .confwin__body { grid-template-columns:minmax(0,1fr) 240px }
  .sections { display:none }
}
@media (max-width:768px) {
  .hero h1 { font-size:clamp(24px,6.4vw,30px) }
  .feature-window { grid-template-columns:minmax(0,1fr); gap:20px }
}
@media (max-width:640px) {
  .hero { padding-top:22px }
  .hero__copy { padding-inline:var(--gutter) }
  .lede { font-size:15px }
  .platforms { gap:4px 14px }
  .platforms li,.platforms a { font-size:12.5px }
  .platforms .price { margin-left:0 }
  .scene { height:330px; margin-top:24px }
  .confwin { width:92%; top:22px; left:4%; transform:none }
  .confwin__body { grid-template-columns:minmax(0,1fr) }
  .routing-slot { display:none }
  .code { font-size:11.5px }
  .code li::before { width:30px; padding-right:10px }
  .statusline .push { display:none }
  .feature-scene { padding:24px 16px }
  .feature-window { padding:20px }
  .plat-card { flex-basis:100%; padding:28px 20px }
  .official-shot { margin-inline:auto }
  .shot-row { flex-direction:column; align-items:center }
  .fact-row,.badge-row { flex-direction:row; flex-wrap:wrap; gap:6px }
  .fact-pill { font-size:11.5px; padding:4px 8px }
  .dl-fab { width:52px; height:52px; min-height:52px; padding:0; justify-content:center; right:16px; bottom:max(16px,env(safe-area-inset-bottom)); border-radius:var(--r-dot) }
  .dl-fab__label { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap }
  #install table,#install tbody,#install tr,#install td { display:block; width:100%; min-width:0 }
  #install thead { display:none }
  #install tr { padding:14px 16px; border-bottom:1px solid var(--line) }
  #install td { padding:6px 0; border:0 }
  #install td::before { content:attr(data-label); display:block; font-weight:var(--fw-medium); color:var(--muted); margin-bottom:4px }
  #install td:has(code) { overflow-x:auto }
  #install table code { word-break:normal; overflow-wrap:normal; white-space:pre }
}