.hero { position:relative; background:linear-gradient(180deg,var(--paper-top) 0%,var(--paper-bottom) 100%); overflow-x:clip; max-width:100%; }
.frame { position:relative; width:min(var(--frame-w),calc(100% - 48px)); margin:0 auto; border-left:1px solid var(--border); border-right:1px solid var(--border); padding:38px 0 40px; }
.frame::before { content:""; position:absolute; left:0; right:0; top:16px; height:1px; background:var(--border); }
.corner,.rail-corner { position:absolute; width:13px; height:13px; border-radius:var(--r-corner); background:var(--bg-panel); border:1px solid var(--border); z-index:1; }
.corner { top:10px; }
.corner-tl { left:-7px; }
.corner-tr { right:-7px; }
.copy { position:relative; z-index:3; display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 24px; }
.hero-title { margin:14px 0 0; font-family:var(--font-display); font-weight:var(--weight-display); font-size:var(--display-size); line-height:var(--display-leading); letter-spacing:var(--display-tracking); color:var(--text); }
.hl { position:relative; z-index:0; display:inline-block; line-height:1; padding:0 .05em; }
.hl::after { content:""; position:absolute; left:0; right:0; bottom:-.04em; height:.3em; border-radius:var(--r-highlight); background:linear-gradient(90deg,var(--accent),var(--accent-dark)); z-index:-1; }
.lede { margin:16px 0 0; max-width:880px; font-size:18px; line-height:1.56; color:var(--text-muted); }
.lede strong { color:var(--text); font-weight:var(--weight-semibold); }
.trust { list-style:none; margin:12px 0 0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:6px 20px; font-size:14px; color:var(--text); }
.trust li { display:inline-flex; align-items:center; gap:6px; }
.trust svg { width:15px; height:15px; color:var(--text-muted); display:block; flex:none; }
.platforms { margin-top:12px; display:flex; align-items:center; justify-content:center; gap:16px; font-size:13.5px; color:var(--text-muted); }
.platforms-label { font-size:12.5px; color:var(--text-faint); padding-right:16px; border-right:1px solid var(--border); line-height:16px; }
.platform-list { list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:18px; }
.platform-list li { display:inline-flex; align-items:center; gap:6px; }
.platform-list svg { width:16px; height:16px; display:block; color:var(--text); flex:none; }
.stage { position:relative; z-index:1; margin-top:40px; }
.rail { position:absolute; left:0; right:0; top:0; height:1px; background:var(--border); }
.rail-corner { top:-6px; }
.rail-corner-l { left:-7px; }
.rail-corner-r { right:-7px; }
.device { position:relative; width:min(1040px,calc(100% - 120px)); margin:0 auto; }
.mod-tags { position:absolute; top:0; left:50%; transform:translate(-50%,-50%); z-index:5; list-style:none; margin:0; padding:0; display:flex; gap:8px; }
.mod-tag { display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 15px 0 6px; border-radius:var(--r-pill); background:var(--pure); border:1px solid var(--border); font-size:14px; font-weight:var(--weight-medium); color:var(--text-muted); white-space:nowrap; box-shadow:0 10px 20px -12px var(--shade-ink); }
.mod-tag .ic { width:26px; height:26px; border-radius:var(--r-icon); display:grid; place-items:center; background:var(--bg-panel-2); color:var(--text); }
.mod-tag .ic svg { width:14px; height:14px; display:block; }
.mod-tag.is-current { color:var(--text); font-weight:var(--weight-semibold); box-shadow:0 0 0 4px var(--glass),0 12px 24px -12px var(--shade-ink); }
.mod-tag.is-current .ic { background:var(--text); color:var(--on-ink); }
.shell { position:relative; padding:10px; border-radius:var(--r-shell); background:var(--glass); border:1px solid var(--border); box-shadow:var(--shadow-window); transform:perspective(2200px) rotateX(2.5deg); transform-origin:50% 0; }
.window { position:relative; height:430px; border:2px solid var(--text); border-radius:var(--r-window); background:var(--bg-panel); overflow:hidden; display:flex; flex-direction:column; margin:0; }
.win-glow { position:absolute; inset:-8%; pointer-events:none; filter:blur(26px); background:radial-gradient(30% 50% at 22% 52%,var(--glow-blue) 0%,var(--clear) 72%),radial-gradient(30% 46% at 42% 40%,var(--glow-peach) 0%,var(--clear) 72%),radial-gradient(32% 48% at 62% 60%,var(--glow-rose) 0%,var(--clear) 72%),radial-gradient(28% 44% at 80% 44%,var(--glow-butter) 0%,var(--clear) 72%),radial-gradient(22% 30% at 52% 54%,var(--glow-blue) 0%,var(--clear) 70%); }
.win-bar { position:relative; flex:none; height:44px; display:flex; align-items:center; gap:16px; padding:0 20px; }
.dots { display:flex; gap:7px; }
.dots i { width:11px; height:11px; border-radius:var(--r-round); background:var(--border); box-shadow:inset 0 0 0 1px var(--shade-card); }
.win-title { display:inline-flex; align-items:center; gap:8px; font-size:12px; color:var(--text-muted); }
.win-title b { font-family:var(--font-mono); font-weight:var(--weight-semibold); color:var(--text); letter-spacing:.02em; }
.win-title svg { width:12px; height:12px; display:block; }
.win-body { position:relative; flex:1; min-height:0; margin:0 18px 18px; padding:14px; border-radius:var(--r-lg); background:var(--glass-thin); border:1px solid var(--glass-edge); box-shadow:inset 0 1px 0 var(--glass-edge),0 14px 30px -22px var(--shade-warm); -webkit-backdrop-filter:blur(10px) saturate(1.08); backdrop-filter:blur(10px) saturate(1.08); display:grid; grid-template-columns:216px minmax(0,1fr) 228px; grid-template-rows:minmax(0,1fr) auto; gap:12px 16px; }
.win-body > * { min-width:0; }
.pane-groups { grid-column:1; grid-row:1; padding:12px; display:flex; flex-direction:column; min-height:0; }
.pane-head { display:flex; align-items:baseline; justify-content:space-between; padding:2px 6px 10px; margin-bottom:6px; border-bottom:1px solid var(--border-soft); }
.pane-head h3 { margin:0; font-size:13px; font-weight:var(--weight-bold); }
.pane-head span { font-size:11px; color:var(--text-faint); }
.groups { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:3px; }
.group { display:flex; align-items:center; gap:8px; height:40px; padding:0 8px 0 10px; border-radius:var(--r-sm); font-size:13px; }
.group.is-active { background:var(--bg-panel-2); box-shadow:inset 3px 0 0 var(--text); }
.group .city { flex:1; font-weight:var(--weight-semibold); white-space:nowrap; }
.ltype { font-family:var(--font-mono); font-size:10.5px; line-height:1; padding:4px 7px; border-radius:var(--r-pill); border:1px solid var(--border); color:var(--text-muted); white-space:nowrap; }
.ltype-iepl { border-color:var(--text); color:var(--text); }
.ltype-relay { background:var(--bg-panel-2); border-color:var(--bg-panel-2); }
.groups-note { margin:auto 0 0; padding:8px 6px 0; font-size:11px; color:var(--text-faint); }
.flag { width:20px; height:14px; display:block; flex:none; clip-path:inset(0 round 3px); }
.f-red { fill:var(--flag-red); }
.f-navy { fill:var(--flag-navy); }
.f-white { fill:var(--flag-white); }
.f-black { fill:var(--flag-black); }
.f-gold { fill:var(--flag-gold); }
.f-edge { fill:var(--clear); stroke:var(--flag-edge); stroke-width:.6; }
.pane-main { grid-column:2; grid-row:1; min-width:0; display:flex; flex-direction:column; justify-content:space-between; }
.conn-card { position:relative; display:flex; align-items:center; gap:16px; padding:18px; background:var(--pure); }
.lock-badge { flex:none; width:52px; height:52px; border-radius:var(--r-round); display:grid; place-items:center; color:var(--on-ink); background:linear-gradient(150deg,var(--ink-soft),var(--text)); box-shadow:0 0 0 5px var(--bg-panel-2),inset 0 1px 0 var(--hi-line),0 10px 20px -8px var(--shade-ink); }
.lock-badge svg { width:22px; height:22px; display:block; }
.conn-text { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.conn-eyebrow { font-size:11.5px; color:var(--text-muted); }
.conn-line { font-family:var(--font-display); font-weight:var(--weight-display); font-size:21px; line-height:1.2; letter-spacing:-.02em; white-space:nowrap; }
.conn-meta { font-size:12px; color:var(--text-muted); }
.switch-wrap { flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.switch-state { font-size:12px; font-weight:var(--weight-semibold); }
.switch { position:relative; width:46px; height:26px; border-radius:var(--r-pill); background:var(--text); box-shadow:inset 0 1px 3px var(--shade-ink); }
.switch i { position:absolute; top:3px; right:3px; width:20px; height:20px; border-radius:var(--r-round); background:var(--pure); box-shadow:0 2px 5px var(--shade-ink); }
.bubble { position:absolute; top:calc(100% + 12px); right:4px; z-index:4; display:inline-flex; align-items:center; gap:8px; padding:8px 14px 8px 11px; border-radius:var(--r-bubble); background:var(--text); color:var(--on-ink); font-size:12.5px; font-weight:var(--weight-medium); white-space:nowrap; box-shadow:0 16px 28px -12px var(--shade-ink),0 0 0 3px var(--glass); }
.bubble::before { content:""; position:absolute; top:-5px; right:32px; width:10px; height:10px; background:var(--text); border-radius:var(--r-corner); transform:rotate(45deg); }
.bubble-dot { width:7px; height:7px; flex:none; border-radius:var(--r-round); background:var(--on-ink); box-shadow:0 0 0 3px var(--hi-line); }
.mode-row { display:flex; align-items:center; gap:10px; }
.row-label { font-size:12px; color:var(--text-muted); white-space:nowrap; }
.seg { display:inline-flex; padding:3px; border-radius:var(--r-pill); background:var(--bg-panel-2); border:1px solid var(--border); }
.seg span { padding:6px 14px; border-radius:var(--r-pill); font-size:12.5px; color:var(--text-muted); white-space:nowrap; }
.seg .is-on { background:var(--pure); color:var(--text); font-weight:var(--weight-semibold); box-shadow:0 2px 6px -2px var(--shade-ink); }
.hot-row { display:flex; align-items:center; gap:6px; min-width:0; flex-wrap:wrap; }
.hot-row .row-label { margin-right:4px; }
.chip { display:inline-flex; align-items:center; gap:6px; min-height:28px; padding:3px 10px 3px 6px; border-radius:var(--r-pill); background:var(--card-face); border:1px solid var(--border-soft); font-size:12px; font-weight:var(--weight-medium); box-shadow:0 6px 12px -10px var(--shade-ink); max-width:100%; overflow-wrap:anywhere; }
.import-row { display:flex; align-items:center; gap:12px; }
.btn-import { display:inline-flex; align-items:center; justify-content:center; gap:7px; height:38px; padding:0 18px 0 14px; border-radius:var(--r-pill); background:var(--text); color:var(--on-ink); font-size:13px; font-weight:var(--weight-semibold); white-space:nowrap; text-decoration:none; box-shadow:inset 0 1px 0 var(--hi-line),0 10px 20px -10px var(--shade-ink); }
.btn-import svg { width:14px; height:14px; display:block; }
.import-note { font-size:12px; color:var(--text-muted); }
.pane-plan { grid-column:3; grid-row:1; display:flex; flex-direction:column; gap:12px; min-height:0; }
.plan-card { flex:1; padding:14px 16px; display:flex; flex-direction:column; }
.plan-head { display:flex; align-items:center; justify-content:space-between; font-size:12px; color:var(--text-muted); }
.mini-tag { font-size:10.5px; padding:3px 8px; border-radius:var(--r-pill); background:var(--bg-panel-2); color:var(--text); font-weight:var(--weight-semibold); }
.plan-price { margin:8px 0 6px; font-family:var(--font-display); font-weight:var(--weight-display); font-size:34px; line-height:1; letter-spacing:-.03em; }
.plan-price .cur { font-size:18px; vertical-align:top; margin-right:1px; }
.plan-price .per { font-size:14px; font-weight:var(--weight-semibold); color:var(--text-muted); letter-spacing:0; margin-left:2px; }
.plan-facts { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px; font-size:12px; color:var(--text); }
.plan-facts li { display:flex; align-items:center; gap:7px; }
.plan-facts li::before { content:""; width:5px; height:5px; border-radius:var(--r-round); background:var(--text-muted); flex:none; }
.plan-foot { margin-top:auto; padding-top:10px; border-top:1px dashed var(--border); font-size:11px; color:var(--text-faint); }
.pack-card { padding:12px 16px; display:flex; flex-direction:column; gap:4px; }
.pack-card strong { font-size:13.5px; font-weight:var(--weight-bold); }
.pack-card span { color:var(--text-muted); }
.win-status { grid-column:1 / -1; grid-row:2; display:flex; align-items:center; gap:8px; }
.stat-chip { display:inline-flex; align-items:center; gap:7px; height:30px; padding:0 13px; border-radius:var(--r-pill); background:var(--card-face); border:1px solid var(--border-soft); font-size:12px; white-space:nowrap; box-shadow:0 6px 12px -10px var(--shade-ink); }
.stat-chip span { color:var(--text-muted); }
.stat-chip b { font-weight:var(--weight-semibold); }
.status-tail { margin-left:auto; font-size:11.5px; color:var(--text-muted); white-space:nowrap; }
.tray { position:absolute; left:-16px; top:118px; z-index:5; list-style:none; margin:0; padding:5px; display:flex; flex-direction:column; gap:5px; border-radius:var(--r-tray); background:var(--pure); border:1px solid var(--border); box-shadow:0 18px 32px -16px var(--shade-ink),0 10px 24px -12px var(--shade-blue); }
.app { width:44px; height:44px; border-radius:var(--r-sm); display:grid; place-items:center; border:1px solid var(--border-soft); background:var(--pure); color:var(--text); }
.app svg { width:24px; height:24px; display:block; }
.refund-sticker { position:absolute; right:-18px; top:36px; z-index:5; padding:9px 15px; border-radius:var(--r-pill); background:var(--pure); border:1px solid var(--border); font-size:12px; font-weight:var(--weight-semibold); transform:rotate(5deg); box-shadow:0 12px 24px -12px var(--shade-ink); }
.tabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
[role="tablist"] button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:10px 20px; border:1px solid var(--border); border-radius:var(--r-pill); background:var(--pure); color:var(--text); font-weight:var(--weight-medium); }
[role="tablist"] button svg { width:18px; height:18px; flex:none; }
[role="tablist"] button[aria-selected="true"] { background:var(--text); border-color:var(--text); color:var(--on-ink); box-shadow:inset 0 1px 0 var(--hi-line),0 10px 20px -16px var(--shade-ink); }
[role="tabpanel"] { min-width:0; }
.feature-browser { position:relative; display:grid; grid-template-columns:300px minmax(0,1fr); gap:48px; border:1px solid var(--border); padding:36px; overflow-x:clip; }
.feature-browser::before,.feature-browser::after { content:""; position:absolute; width:13px; height:13px; border:1px solid var(--border); border-radius:var(--r-corner); background:var(--bg-panel); top:-1px; }
.feature-browser::before { left:-1px; }
.feature-browser::after { right:-1px; }
.feature-browser > * { min-width:0; }
.feature-tabs { display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.feature-tabs button { width:auto; max-width:100%; text-align:left; }
.feature-window { position:relative; overflow:hidden; padding:24px; min-height:250px; border:2px solid var(--text); border-radius:var(--r-window); background:var(--bg-panel); box-shadow:var(--shadow-window); }
.feature-window .win-glow { opacity:.45; }
.feature-window > :not(.win-glow) { position:relative; }
.feature-window .bubble { position:relative; top:auto; right:auto; margin:24px 0 12px; max-width:100%; white-space:normal; }
.feature-detail { margin-top:24px; color:var(--text-muted); line-height:1.85; }
.directory-wall { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); margin-top:48px; }
.directory-wall span { text-align:center; padding:28px 8px; color:var(--text-muted); font-size:17px; font-weight:var(--weight-semibold); border-right:1px solid var(--border); border-bottom:1px solid var(--border); }
.directory-wall span:nth-child(6n) { border-right:0; }
.directory-wall span:nth-child(n+7) { border-bottom:0; }
.toc-tabs { position:sticky; top:var(--toc-offset); z-index:20; display:flex; gap:8px; align-items:center; overflow-x:auto; max-width:100%; padding:10px; margin-block:24px; border:1px solid var(--border); border-radius:var(--r-pill); background:var(--bg-panel); box-shadow:0 10px 24px -20px var(--shade-ink); -webkit-overflow-scrolling:touch; }
.toc-tabs a { display:inline-flex; flex:none; align-items:center; min-height:40px; padding:8px 16px; border-radius:var(--r-pill); color:var(--text-muted); white-space:nowrap; text-decoration:none; }
.toc-tabs a.is-reading { color:var(--on-ink); background:var(--text); }
.toc-tabs.toc-static { position:static; }
body:has(.toc-tabs) section[id],body:has(.toc-tabs) h2[id],body:has(.toc-tabs) h3[id] { scroll-margin-top:var(--toc-landing); }
.faq-item { background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:inset 0 1px 0 var(--glass-edge); margin-bottom:12px; }
.faq-item summary { position:relative; padding:20px 54px 20px 22px; cursor:pointer; font-weight:var(--weight-semibold); list-style:none; min-height:56px; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:"+"; position:absolute; right:22px; top:20px; font-size:20px; line-height:24px; }
.faq-item[open] summary::after { content:"−"; }
.faq-answer { padding:0 22px 20px; color:var(--text-muted); line-height:1.8; }
.faq-answer p:last-child { margin-bottom:0; }
.pricing-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.pricing-grid > * { min-width:0; }
.cycle-card { position:relative; padding:28px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--bg-panel); box-shadow:var(--shadow-panel); display:flex; flex-direction:column; gap:16px; }
.cycle-card h3 { margin:0; }
.cycle-card.is-current { border:2px solid var(--text); padding:27px; box-shadow:inset 0 1px 0 var(--glass-edge),0 20px 40px -26px var(--shade-blue),0 14px 28px -22px var(--shade-warm); }
.value-badge { align-self:flex-start; padding:5px 12px; border-radius:var(--r-pill); background:var(--text); color:var(--on-ink); font-size:12px; font-weight:var(--weight-semibold); }
.cycle-price { font:var(--weight-display) 40px/1.1 var(--font-display); letter-spacing:-.02em; margin:0; font-variant-numeric:tabular-nums; }
.cycle-price small { font-size:15px; color:var(--text-muted); font-weight:var(--weight-medium); }
.cycle-facts { list-style:none; margin:0; padding:0; line-height:1.9; color:var(--text-muted); }
.cycle-card .btn { margin-top:auto; align-self:flex-start; }
.table-scroll { overflow-x:auto; max-width:100%; width:100%; border:1px solid var(--border); border-radius:var(--r-md); background:var(--bg-panel); -webkit-overflow-scrolling:touch; }
.data-table,.route-table { width:100%; min-width:640px; border-collapse:collapse; text-align:left; font-size:14px; }
.data-table caption,.route-table caption { text-align:left; padding:16px 20px; font-weight:var(--weight-semibold); color:var(--text); }
.data-table th,.route-table th { background:var(--bg-panel-2); color:var(--text); font-weight:var(--weight-semibold); white-space:nowrap; }
.data-table th,.data-table td,.route-table th,.route-table td { padding:16px 20px; border-bottom:1px solid var(--border); word-break:keep-all; }
.data-table td:first-child,.route-table td:first-child { color:var(--text); font-weight:var(--weight-semibold); }
.data-table tr:last-child td,.route-table tr:last-child td { border-bottom:0; }
.route-table .region-row th { background:var(--bg-panel); color:var(--text); padding-block:12px; }
.prose > .data-table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; min-width:0; }
.platform-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px; }
.platform-card { display:flex; flex-direction:column; align-items:flex-start; gap:16px; padding:24px 20px; min-width:0; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--pure); box-shadow:var(--shadow-panel); }
.platform-card > svg { width:32px; height:32px; color:var(--text); }
.platform-card h3 { font-size:18px; margin:0; }
.platform-card .btn { padding-inline:14px; font-size:13px; min-height:40px; max-width:100%; }
.article-card { display:flex; flex-direction:column; min-width:0; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--bg-panel); padding:24px; box-shadow:var(--shadow-panel); }
.article-card h3 { margin-block:16px 12px; font-size:23px; }
.article-card h3 a { text-decoration:none; }
.article-card p { color:var(--text-muted); }
.article-meta { display:flex; flex-wrap:wrap; align-items:center; gap:12px; color:var(--text-muted); font-size:13px; }
.article-card .article-meta { margin-top:auto; }
.article-chrome { position:relative; background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--r-window); padding:68px 32px 32px; overflow-x:clip; }
.article-chrome::before { content:""; position:absolute; top:22px; left:24px; width:42px; height:10px; border-radius:var(--r-pill); background:radial-gradient(circle at 5px 5px,var(--border) 0 4px,var(--clear) 5px),radial-gradient(circle at 21px 5px,var(--border) 0 4px,var(--clear) 5px),radial-gradient(circle at 37px 5px,var(--border) 0 4px,var(--clear) 5px); }
.article-chrome::after { content:"article.md"; position:absolute; right:24px; top:19px; font:12px var(--font-mono); color:var(--text-muted); }
.tag { display:inline-block; padding:4px 10px; border:1px solid var(--border); border-radius:var(--r-pill); color:var(--text-muted); background:var(--bg-panel); font-size:12px; max-width:100%; overflow-wrap:anywhere; }
.callout { margin:24px 0; padding:20px 24px; border-left:3px solid var(--accent); border-radius:var(--r-md); background:var(--bg-panel-2); color:var(--text); box-shadow:inset 0 1px 0 var(--glass-edge); }
.callout p:last-child { margin-bottom:0; }
.promo-block { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:32px; background:var(--text); color:var(--on-ink); border-radius:var(--r-lg); box-shadow:0 24px 40px -26px var(--shade-warm); }
.promo-copy { min-width:0; }
.promo-brand { font:var(--weight-display) 22px var(--font-display); margin:0 0 10px; }
.promo-block p:last-child { margin-bottom:0; }
.promo-block .btn { background:var(--bg-panel); color:var(--text); flex-shrink:0; white-space:nowrap; }
.float-cta { position:fixed; z-index:45; right:max(20px,env(safe-area-inset-right,0px)); bottom:calc(20px + env(safe-area-inset-bottom,0px)); display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:12px 20px; border:1px solid var(--ink-soft); border-radius:var(--r-pill); background:var(--text); color:var(--on-ink); font-size:14px; font-weight:var(--weight-semibold); text-decoration:none; box-shadow:inset 0 1px 0 var(--hi-line),0 14px 32px -12px var(--shade-ink); }
.float-cta svg { width:18px; height:18px; display:block; }
body:has(.float-cta)::after { content:""; display:block; height:calc(88px + env(safe-area-inset-bottom,0px)); }
.palette-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.swatch { min-width:0; padding:12px; background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--r-md); font:12px/1.5 var(--font-mono); overflow-wrap:anywhere; }
.swatch::before { content:""; display:block; height:48px; margin-bottom:12px; border:1px solid var(--border); border-radius:var(--r-sm); background:var(--swatch,var(--bg)); }
.swatch[data-token="bg"] { --swatch:var(--bg); }
.swatch[data-token="bg-panel"] { --swatch:var(--bg-panel); }
.swatch[data-token="bg-panel-2"] { --swatch:var(--bg-panel-2); }
.swatch[data-token="border"] { --swatch:var(--border); }
.swatch[data-token="border-soft"] { --swatch:var(--border-soft); }
.swatch[data-token="accent"] { --swatch:var(--accent); }
.swatch[data-token="accent-dark"] { --swatch:var(--accent-dark); }
.swatch[data-token="text"] { --swatch:var(--text); }
.swatch[data-token="text-muted"] { --swatch:var(--text-muted); }
.swatch[data-token="text-faint"] { --swatch:var(--text-faint); }
.swatch[data-token="success"] { --swatch:var(--success); }
.swatch[data-token="warn"] { --swatch:var(--warn); }
.swatch[data-token="error"] { --swatch:var(--error); }
.swatch[data-token="paper-top"] { --swatch:var(--paper-top); }
.swatch[data-token="paper-bottom"] { --swatch:var(--paper-bottom); }
.swatch[data-token="ink-soft"] { --swatch:var(--ink-soft); }
.swatch[data-token="on-ink"] { --swatch:var(--on-ink); }
.swatch[data-token="pure"] { --swatch:var(--pure); }
.swatch[data-token="clear"] { --swatch:var(--clear); }
.swatch[data-token="glow-blue"] { --swatch:var(--glow-blue); }
.swatch[data-token="glow-peach"] { --swatch:var(--glow-peach); }
.swatch[data-token="glow-rose"] { --swatch:var(--glow-rose); }
.swatch[data-token="glow-butter"] { --swatch:var(--glow-butter); }
.swatch[data-token="glass"] { --swatch:var(--glass); }
.swatch[data-token="glass-thin"] { --swatch:var(--glass-thin); }
.swatch[data-token="glass-edge"] { --swatch:var(--glass-edge); }
.swatch[data-token="card-face"] { --swatch:var(--card-face); }
.swatch[data-token="hi-line"] { --swatch:var(--hi-line); }
.swatch[data-token="shade-blue"] { --swatch:var(--shade-blue); }
.swatch[data-token="shade-warm"] { --swatch:var(--shade-warm); }
.swatch[data-token="shade-card"] { --swatch:var(--shade-card); }
.swatch[data-token="shade-ink"] { --swatch:var(--shade-ink); }
.swatch[data-token="flag-red"] { --swatch:var(--flag-red); }
.swatch[data-token="flag-navy"] { --swatch:var(--flag-navy); }
.swatch[data-token="flag-white"] { --swatch:var(--flag-white); }
.swatch[data-token="flag-black"] { --swatch:var(--flag-black); }
.swatch[data-token="flag-gold"] { --swatch:var(--flag-gold); }
.swatch[data-token="flag-edge"] { --swatch:var(--flag-edge); }
.type-sample { border-bottom:1px solid var(--border); padding-block:20px; }
.type-sample p { margin-bottom:0; }
.button-samples { display:flex; flex-wrap:wrap; gap:16px; align-items:center; }
.button-samples .sample-hover { background:var(--ink-soft); }
.button-samples .sample-active { transform:translateY(1px); }
.button-samples .sample-focus { outline:2px solid var(--text); outline-offset:3px; }
.help-section { display:grid; grid-template-columns:minmax(0,1fr); gap:24px; }
@media (max-width:1100px) {
  .win-body { grid-template-columns:180px minmax(0,1fr) 190px; gap:12px; }
  .conn-card { gap:12px; padding:14px; }
  .conn-line { font-size:18px; }
  .lock-badge { width:42px; height:42px; }
  .hot-row { gap:4px; }
  .chip { font-size:11px; padding-inline:6px; }
  .platform-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:768px) {
  .hero-title { font-size:clamp(28px,7vw,40px); line-height:1.12; letter-spacing:-.02em; }
  .frame { padding-top:32px; }
  .platforms { flex-direction:column; gap:10px; }
  .platforms-label { border:0; padding:0; }
  .platform-list { flex-wrap:wrap; justify-content:center; gap:10px 16px; }
  .device { width:calc(100% - 32px); padding-top:14px; }
  .mod-tags { position:static; transform:none; flex-wrap:wrap; justify-content:center; gap:5px; margin-bottom:12px; }
  .mod-tag { font-size:12px; height:32px; padding-right:10px; gap:5px; }
  .mod-tag .ic { width:22px; height:22px; }
  .window { height:auto; min-height:430px; }
  .win-body { grid-template-columns:minmax(0,1fr); grid-template-rows:auto; gap:16px; margin:0 12px 12px; padding:12px; }
  .pane-groups,.pane-main,.pane-plan,.win-status { grid-column:auto; grid-row:auto; }
  .pane-groups { padding:10px; }
  .groups { flex-direction:column; max-width:100%; padding-bottom:6px; }
  .group { flex:none; flex-wrap:wrap; width:100%; height:auto; min-height:40px; padding-block:8px; }
  .group .city { min-width:0; white-space:normal; }
  .group .ltype { max-width:100%; white-space:normal; line-height:1.4; }
  .groups-note { margin-top:6px; }
  .pane-main { gap:18px; }
  .pane-main .mode-row { margin-top:42px; }
  .pane-plan { flex-direction:row; }
  .pane-plan > * { flex:1; min-width:0; }
  .win-status { flex-wrap:wrap; }
  .status-tail { margin-left:0; white-space:normal; }
  .tray { position:relative; top:auto; left:auto; flex-direction:row; width:max-content; margin:16px auto 0; }
  .refund-sticker { position:relative; top:auto; right:auto; transform:none; display:block; width:max-content; max-width:100%; margin:12px auto 0; }
  .feature-browser { grid-template-columns:1fr; gap:24px; padding:24px; }
  .feature-tabs { flex-direction:row; flex-wrap:wrap; gap:8px; }
  .pricing-grid { grid-template-columns:1fr; }
  .directory-wall { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .directory-wall span { font-size:14px; padding-block:20px; }
  .directory-wall span:nth-child(6n) { border-right:1px solid var(--border); }
  .directory-wall span:nth-child(3n) { border-right:0; }
  .directory-wall span:nth-child(n+7) { border-bottom:1px solid var(--border); }
  .directory-wall span:nth-child(n+10) { border-bottom:0; }
  .promo-block { flex-direction:column; align-items:flex-start; }
  .palette-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:640px) {
  .frame { width:calc(100% - 32px); }
  .copy { padding-inline:16px; }
  .lede { font-size:17px; }
  .trust { gap:8px 14px; font-size:12px; }
  .platform-list { font-size:12px; gap:10px; }
  .shell { transform:none; padding:6px; }
  .stage { margin-top:36px; max-width:100%; }
  .device { width:calc(100% - 16px); max-width:100%; }
  .mod-tag { gap:4px; padding-inline:6px; font-size:11px; }
  .mod-tag .ic { width:20px; height:20px; }
  .win-bar { padding-inline:14px; }
  .win-body { margin-inline:8px; padding:8px; }
  .conn-card { padding:12px; gap:10px; flex-wrap:wrap; }
  .conn-line { white-space:normal; font-size:18px; }
  .switch-wrap { margin-left:auto; }
  .bubble { max-width:100%; white-space:normal; font-size:12px; }
  .pane-plan { flex-direction:column; }
  .stat-chip { height:auto; min-height:30px; white-space:normal; padding:6px 10px; }
  .mode-row,.import-row { flex-wrap:wrap; }
  .feature-browser { padding:20px 16px; }
  .feature-window { padding:20px 16px; }
  .platform-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .platform-card { padding:20px 14px; }
  .platform-card .btn { padding-inline:10px; font-size:12px; }
  .palette-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .promo-block { padding:24px; }
  .article-chrome { padding:64px 20px 24px; }
  .float-cta { right:16px; padding-inline:16px; }
  .refund-sticker { transform:none; }
}