.tab-component { min-width: 0; }
.tab-list,[role="tablist"] { display: flex; align-items: center; gap: 6px; max-width: 100%; padding: 6px; overflow-x: auto; border-radius: var(--r-md); background: var(--bg-panel-2); scrollbar-width: thin; }
.tab-button,[role="tab"] { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-height: 44px; padding: 10px 20px; border: 0; border-radius: var(--r-sm); font-size: var(--text-small); font-weight: var(--weight-medium); color: var(--text-muted); background: none; white-space: nowrap; }
[role="tab"][aria-selected="true"] { background: var(--bg-panel); color: var(--text); box-shadow: var(--shadow-chip); }
.tab-panel { padding-top: var(--space-3); min-width: 0; }
.toc-tabs { position: sticky; top: var(--toc-offset); z-index: 20; display: flex; gap: 8px; align-items: center; max-width: 100%; padding: 8px; margin-block: var(--space-3) var(--space-5); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-panel); box-shadow: var(--shadow-chip); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
.toc-tabs a { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-height: 40px; padding: 8px 16px; border-radius: var(--r-sm); color: var(--text-muted); font-size: var(--text-small); text-decoration: none; white-space: nowrap; }
.toc-tabs a:hover { color: var(--text); background: var(--bg-panel-2); }
.toc-tabs a.is-current { color: var(--accent-dark); background: rgb(var(--accent-rgb) / .12); font-weight: var(--weight-medium); }
.toc-tabs.toc-static { position: static; }
body:has(.toc-tabs) section[id] { scroll-margin-top: var(--section-offset); }
.faq-list { display: grid; gap: 12px; min-width: 0; }
.faq-item { background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--r-lg); min-width: 0; box-shadow: inset 0 1px 0 rgb(var(--white-rgb) / .9); }
.faq-item summary { position: relative; list-style: none; min-height: 64px; padding: 20px 56px 20px 24px; font-weight: var(--weight-medium); overflow-wrap: anywhere; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 24px; top: 18px; color: var(--text-muted); font-family: var(--font-mono); font-size: 22px; line-height: 28px; }
.faq-item[open] summary::after { content: "−"; color: var(--accent-dark); }
.faq-answer { padding: 0 24px 20px; color: var(--text-muted); line-height: 1.85; }
.faq-answer p:last-child { margin-bottom: 0; }
.plan-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-3); }
.plan-grid > * { min-width: 0; }
.price-card { position: relative; display: flex; flex-direction: column; padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--bg-panel); box-shadow: var(--shadow-panel); min-width: 0; }
.price-card.is-current { border-color: var(--accent); background: linear-gradient(180deg,rgb(var(--accent-rgb) / .055),var(--bg-panel) 55%); box-shadow: inset 0 1px 0 rgb(var(--white-rgb) / .95),0 22px 52px -24px rgb(var(--accent-rgb) / .22); }
.price-card h3 { margin: var(--space-2) 0; font-size: 24px; }
.price-card p { color: var(--text-muted); }
.price-value { font-family: var(--font-display); font-size: 40px; font-weight: var(--weight-display); letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; }
.price-unit { font-family: var(--font-body); font-size: var(--text-small); font-weight: var(--weight-body); color: var(--text-muted); letter-spacing: normal; }
.plan-benefits { display: grid; gap: 12px; margin: var(--space-3) 0 var(--space-4); padding: 0; list-style: none; }
.plan-benefits li { display: flex; align-items: baseline; gap: 10px; font-size: var(--text-small); }
.plan-benefits li::before { content: "✓"; flex-shrink: 0; color: var(--accent-dark); font-weight: var(--weight-bold); }
.price-card .btn { width: 100%; margin-top: auto; }
.value-badge { align-self: flex-start; background: var(--text); color: var(--bg-panel); }
.price-note { margin-top: var(--space-3); font-size: var(--text-small); color: var(--text-muted); }
.table-scroll { width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-panel); }
.data-table,.route-table { width: 100%; min-width: 640px; font-size: var(--text-small); }
.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; color: var(--text); }
.data-table th,.route-table th { background: var(--bg-panel-2); font-weight: var(--weight-medium); white-space: nowrap; }
.data-table td:first-child,.route-table td:first-child { font-weight: var(--weight-medium); color: var(--text); }
.data-table tr:last-child td,.route-table tr:last-child td { border-bottom: 0; }
.route-table .region-row th { background: rgb(var(--accent-rgb) / .07); color: var(--accent-dark); padding-block: 10px; }
.table-scroll th { color: var(--text); word-break: keep-all; }
.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: var(--space-2); }
.platform-grid > * { min-width: 0; }
.platform-card { display: flex; align-items: flex-start; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border-radius: var(--r-lg); background: var(--bg-panel); box-shadow: var(--shadow-panel); min-width: 0; }
.platform-icon { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: var(--r-circle); background: var(--bg-panel-2); }
.platform-icon svg { display: block; width: 24px; height: 24px; }
.platform-card h3 { margin: 0; font-size: 18px; }
.platform-card p { font-size: 13px; color: var(--text-muted); margin: 0; }
.platform-card .btn { margin-top: auto; padding-inline: 12px; font-size: 13px; max-width: 100%; }
.article-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border-radius: var(--r-xl); background: var(--bg-panel-2); min-width: 0; }
.article-card h3 { font-size: 23px; margin: 0; }
.article-card h3 a { text-decoration: none; }
.article-card h3 a:hover { color: var(--accent-dark); }
.article-card p { color: var(--text-muted); margin: 0; font-size: var(--text-small); line-height: 1.8; }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; color: var(--text-muted); font-size: 13px; }
.article-link { display: inline-flex; align-items: center; min-height: 32px; margin-top: auto; font-size: var(--text-small); font-weight: var(--weight-medium); color: var(--accent-dark); }
.callout { margin: var(--space-3) 0; padding: 20px 24px; border-left: 3px solid var(--accent); border-radius: 0 var(--r-md) var(--r-md) 0; background: rgb(var(--accent-rgb) / .07); color: var(--text); line-height: 1.85; }
.callout p:last-child { margin: 0; }
.promo-block { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-6); padding: var(--space-5); border-radius: var(--r-xl); background: var(--bg-panel-2); box-shadow: var(--shadow-panel); }
.promo-copy { flex: 1 1 280px; min-width: 0; }
.promo-brand { display: block; font-size: 22px; font-weight: var(--weight-display); margin-bottom: var(--space-1); }
.promo-copy p { color: var(--text-muted); margin: 0; }
.promo-block .btn { flex-shrink: 0; white-space: nowrap; }
.feature-grid { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: var(--space-3); }
.feature-card { position: relative; grid-column: span 6; padding: var(--space-4); border-radius: var(--r-xl); background: var(--bg-panel-2); min-width: 0; transition: transform var(--duration) var(--ease); }
.feature-card:nth-child(1),.feature-card:nth-child(4) { grid-column: span 7; }
.feature-card:nth-child(2),.feature-card:nth-child(3) { grid-column: span 5; }
.feature-card:hover { transform: translateY(-4px); }
.feature-kicker { display: block; padding-right: 48px; font-size: 13px; color: var(--text-muted); margin-bottom: 12px; }
.feature-card h3 { font-size: var(--card-heading-size); padding-right: 40px; margin-bottom: var(--space-3); }
.feature-arrow { position: absolute; right: 24px; top: 24px; display: inline-flex; justify-content: center; align-items: center; width: 40px; height: 40px; border-radius: var(--r-circle); background: var(--text); color: var(--bg-panel); font-size: 24px; text-decoration: none; transition: background var(--duration) var(--ease); }
.feature-card:hover .feature-arrow { background: var(--accent); }
.feature-window { padding: var(--space-3); background: var(--bg-panel); border-radius: var(--r-lg); box-shadow: var(--shadow-panel); min-width: 0; margin-bottom: var(--space-3); }
.feature-card > p { font-size: var(--text-small); color: var(--text-muted); line-height: 1.9; margin-bottom: 0; }
.setting-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-block: 12px; border-bottom: 1px solid var(--border); font-size: var(--text-small); }
.setting-row:last-child { border-bottom: 0; }
.hero { position: relative; overflow-x: clip; max-width: 100%; padding-bottom: 34px; }
.hero-stage { position: relative; max-width: 1280px; margin: 0 auto; padding-top: 20px; }
.hero-copy { position: relative; z-index: 2; text-align: center; padding: 0 24px; }
.crest { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; list-style: none; margin: 0; padding: 0; }
.crest li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 80px; margin-left: 0; flex-shrink: 0; }
.crest li:first-child { margin-left: 0; }
.crest-disc { width: 56px; height: 56px; border-radius: var(--r-circle); border: 3px solid var(--bg-panel); overflow: hidden; display: grid; place-items: center; background: var(--bg-panel); box-shadow: 0 0 0 1.5px var(--ring),0 10px 18px -12px rgb(var(--ink-rgb) / .5); }
.crest-disc svg { display: block; width: 50px; height: 50px; }
.ring-blue { --ring: var(--c-blue); }
.ring-red { --ring: var(--c-red); }
.ring-ink { --ring: var(--text); }
.ring-accent { --ring: var(--accent-dark); }
.crest-disc--fact { background: var(--accent); color: var(--bg-panel); font-weight: var(--weight-display); font-size: 15px; letter-spacing: -.02em; }
.crest-disc--ink { background: var(--text); color: var(--bg-panel); font-weight: var(--weight-display); font-size: 15px; letter-spacing: -.02em; }
.crest-label { max-width: 100%; font-size: 12px; line-height: 14px; color: var(--text-muted); white-space: normal; overflow-wrap: anywhere; }
.hero-title { margin: 18px auto 0; max-width: 900px; font-family: var(--font-display); font-weight: var(--weight-display); font-size: 64px; line-height: 1.08; letter-spacing: var(--tracking-display); color: var(--text); }
.hero-title .ln { display: block; }
.kw { display: inline-flex; align-items: center; gap: .16em; margin: 0 .08em; padding: .02em .3em .04em .24em; border-radius: var(--r-pill); background: rgb(var(--accent-rgb) / .18); line-height: 1.08; }
.kw::before { content: ""; flex-shrink: 0; width: .24em; height: .24em; border-radius: var(--r-circle); background: var(--accent); }
.cta-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.hero-desc { margin: 18px auto 0; max-width: 780px; font-size: 19px; line-height: 1.55; color: var(--text-muted); }
.hero-desc strong { color: var(--text); font-weight: var(--weight-medium); }
.trust { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 0; margin: 12px 0 0; padding: 0; list-style: none; font-size: 14px; line-height: 22px; color: var(--text-muted); }
.trust li { display: flex; align-items: center; }
.trust li + li::before { content: ""; width: 3px; height: 3px; border-radius: var(--r-circle); background: var(--text-faint); margin: 0 12px; flex-shrink: 0; }
.platforms { display: inline-flex; align-items: center; gap: 18px; margin: 12px 0 0; padding: 0 18px 0 5px; min-height: 34px; list-style: none; border-radius: var(--r-pill); background: var(--bg-panel); box-shadow: 0 0 0 1px var(--border),0 8px 18px -12px rgb(var(--accent-rgb) / .4); max-width: 100%; }
.pf-label { display: flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--r-pill); background: var(--bg-panel-2); font-size: 12px; font-weight: var(--weight-medium); color: var(--text-muted); white-space: nowrap; }
.pf { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--text); white-space: nowrap; }
.pf svg { display: block; width: 16px; height: 16px; flex-shrink: 0; }
.float-group { position: absolute; z-index: 1; pointer-events: none; }
.fdisc { position: absolute; display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--r-circle); border: 3px solid var(--bg-panel); box-shadow: var(--shadow-disc); }
.fdisc svg { display: block; width: 28px; height: 28px; }
.fdisc--green { background: var(--c-green); }
.fdisc--purple { background: var(--c-purple); }
.fdisc--blue { background: var(--c-blue); }
.fdisc--amber { background: var(--amber); }
.fdisc--note { width: 46px; height: 46px; background: var(--bg-panel-2); color: var(--text-muted); font-size: 10.5px; font-weight: var(--weight-bold); line-height: 1.15; text-align: center; }
.fchip { position: absolute; display: inline-flex; align-items: center; height: 26px; padding: 0 11px; white-space: nowrap; border-radius: var(--r-pill); background: var(--bg-panel); color: var(--text); font-size: 12px; font-weight: var(--weight-medium); box-shadow: var(--shadow-chip); }
.fchip--tag { border-radius: var(--r-sm); }
.spark { position: absolute; display: block; }
.spark svg { display: block; width: 16px; height: 16px; }
.scribble { position: absolute; z-index: 1; pointer-events: none; overflow: visible; }
.scribble path { fill: none; stroke: var(--text); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.scribble--flip { transform: scaleX(-1); }
.fg-tl { left: 40px; top: 266px; width: 96px; height: 80px; }
.fg-tl .fdisc--green { left: 0; top: 0; }
.fg-tl .fdisc--note { left: 42px; top: 30px; }
.sc-tl { left: 140px; top: 252px; }
.fg-tr { right: 40px; top: 246px; width: 132px; height: 96px; }
.fg-tr .fdisc--purple { left: 36px; top: 0; }
.fg-tr .spark-a { left: 96px; top: -6px; }
.fg-tr .spark-b { left: 112px; top: 14px; }
.fg-tr .fchip { left: 10px; top: 60px; }
.sc-tr { right: 142px; top: 238px; }
.fg-bl { left: 30px; top: 590px; width: 124px; height: 140px; }
.fg-bl .fdisc--blue { left: 0; top: 0; }
.fg-bl .c1 { left: 30px; top: 52px; }
.fg-bl .c2 { left: 50px; top: 82px; }
.fg-bl .c3 { left: 22px; top: 112px; }
.sc-bl { left: 78px; top: 520px; }
.fg-br { right: 34px; top: 612px; width: 120px; height: 96px; }
.fg-br .fdisc--amber { right: 20px; top: 0; }
.fg-br .fchip { right: 0; top: 58px; }
.sc-br { right: 80px; top: 540px; }
.device { position: relative; z-index: 1; width: min(920px,calc(100% - 48px)); margin: 26px auto 0; }
.device-glow { position: absolute; z-index: -1; inset: 16% -12% -26% 34%; pointer-events: none; background: radial-gradient(closest-side,rgb(var(--amber-rgb) / .34) 0%,rgb(var(--accent-rgb) / .1) 58%,rgb(var(--accent-rgb) / 0) 100%); filter: blur(22px); }
.device-glow--soft { inset: 30% 40% -10% -8%; background: radial-gradient(closest-side,rgb(var(--accent-rgb) / .09),rgb(var(--accent-rgb) / 0)); }
.win { position: relative; border-radius: var(--r-xl); overflow: hidden; text-align: left; background: var(--bg-panel); box-shadow: 0 0 0 1px rgb(var(--ink-rgb) / .07),0 1px 2px rgb(var(--ink-rgb) / .05),0 10px 22px -12px rgb(var(--ink-rgb) / .16),0 44px 96px -28px rgb(var(--accent-rgb) / .2); }
.win::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 1px 0 rgb(var(--white-rgb) / .9),inset 0 0 0 1px rgb(var(--white-rgb) / .5); }
.win-bar { position: relative; display: flex; align-items: center; gap: 16px; height: 44px; padding: 0 14px 0 18px; background: linear-gradient(180deg,rgb(var(--accent-rgb) / .075) 0%,rgb(var(--accent-rgb) / .018) 100%); border-bottom: 1px solid var(--border); }
.win-bar::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg,rgb(var(--accent-rgb) / 0),rgb(var(--accent-rgb) / .38),rgb(var(--accent-rgb) / 0)); }
.lights { display: flex; gap: 8px; flex-shrink: 0; }
.lights span { width: 12px; height: 12px; border-radius: var(--r-circle); box-shadow: inset 0 0 0 .5px rgb(var(--ink-rgb) / .12); }
.lights .l-r { background: var(--c-red); }
.lights .l-y { background: var(--amber); }
.lights .l-g { background: var(--c-green); }
.win-tab { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 14px 0 5px; border-radius: var(--r-sm); background: var(--bg-panel); font-size: 13px; font-weight: var(--weight-medium); white-space: nowrap; box-shadow: 0 0 0 1px rgb(var(--ink-rgb) / .06),0 1px 2px rgb(var(--ink-rgb) / .07); }
.mini-mark { width: 20px; height: 20px; border-radius: var(--r-xs); display: block; flex-shrink: 0; }
.win-plus { color: var(--text-faint); font-size: 16px; line-height: 1; }
.win-search { margin-left: auto; display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 6px 0 10px; border-radius: var(--r-sm); background: rgb(var(--ink-rgb) / .04); color: var(--text-muted); font-size: 12.5px; white-space: nowrap; }
.win-search svg { display: block; width: 14px; height: 14px; }
.kbd { font-family: var(--font-mono); font-size: 11px; padding: 1px 6px; border-radius: var(--r-xs); background: var(--bg-panel); box-shadow: 0 0 0 1px var(--border); }
.win-body { display: grid; grid-template-columns: 212px minmax(0,1fr); height: 298px; }
.side { display: flex; flex-direction: column; padding: 14px 12px; background: var(--bg-panel-2); border-right: 1px solid var(--border); min-width: 0; }
.side-label { padding: 0 10px 6px; font-size: 11.5px; line-height: 14px; font-weight: var(--weight-medium); letter-spacing: .04em; color: var(--text-faint); }
.side-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.side-item { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 10px; border-radius: var(--r-sm); font-size: 13.5px; color: var(--text); white-space: nowrap; }
.side-item.is-on { background: var(--bg-panel); font-weight: var(--weight-medium); box-shadow: 0 0 0 1px rgb(var(--ink-rgb) / .05),0 2px 6px -2px rgb(var(--ink-rgb) / .12); }
.side-item.is-on::after { content: ""; margin-left: auto; width: 6px; height: 6px; border-radius: var(--r-circle); background: var(--accent); flex-shrink: 0; }
.side-item--more { color: var(--text-muted); }
.flag-sq { width: 18px; height: 18px; border-radius: var(--r-xs); overflow: hidden; flex-shrink: 0; box-shadow: 0 0 0 1px rgb(var(--ink-rgb) / .1); }
.flag-sq svg { display: block; width: 100%; height: 100%; }
.flag-sq--sm { width: 16px; height: 16px; }
.more-ico { width: 18px; height: 18px; border-radius: var(--r-xs); display: grid; place-items: center; flex-shrink: 0; background: var(--bg-panel); color: var(--text-muted); font-size: 11px; line-height: 1; letter-spacing: .04em; box-shadow: 0 0 0 1px var(--border); }
.side-foot { margin-top: auto; display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 10px; border-radius: var(--r-md); background: var(--bg-panel); font-size: 12.5px; white-space: nowrap; box-shadow: 0 0 0 1px rgb(var(--ink-rgb) / .05),0 4px 10px -6px rgb(var(--ink-rgb) / .18); }
.side-foot b { font-weight: var(--weight-medium); }
.toggle { position: relative; margin-left: auto; width: 30px; height: 18px; border-radius: var(--r-pill); background: var(--success); flex-shrink: 0; }
.toggle::after { content: ""; position: absolute; right: 2px; top: 2px; width: 14px; height: 14px; border-radius: var(--r-circle); background: var(--bg-panel); box-shadow: 0 1px 2px rgb(var(--ink-rgb) / .25); }
.main { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 16px 20px 26px; }
.main-top { display: flex; align-items: center; gap: 14px; height: 40px; }
.main-title { font-size: 17px; font-weight: var(--weight-bold); letter-spacing: -.01em; white-space: nowrap; }
.filters { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.filters li { display: flex; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--r-pill); background: rgb(var(--ink-rgb) / .045); font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.filters li.is-on { background: var(--text); color: var(--bg-panel); }
.plan { margin-left: auto; display: flex; align-items: center; gap: 10px; padding: 5px 14px 5px 5px; border-radius: var(--r-md); background: linear-gradient(135deg,rgb(var(--accent-rgb) / .1),rgb(var(--amber-rgb) / .12)); box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / .18); }
.plan-ico { width: 30px; height: 30px; border-radius: var(--r-sm); display: grid; place-items: center; flex-shrink: 0; background: linear-gradient(140deg,var(--accent),var(--amber)); box-shadow: inset 0 1px 0 rgb(var(--white-rgb) / .35); }
.plan-ico svg { display: block; width: 18px; height: 18px; }
.plan-txt { display: flex; flex-direction: column; line-height: 1.25; white-space: nowrap; }
.plan-k { font-size: 11px; color: var(--text-muted); margin-right: 4px; }
.plan-txt strong { font-size: 13px; font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.plan-txt small { font-size: 11px; color: var(--text-muted); }
.board { flex: 1; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; min-width: 0; }
.lane { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: var(--r-md); min-width: 0; }
.lane--iepl { background: rgb(var(--accent-rgb) / .06); }
.lane--relay { background: rgb(var(--blue-rgb) / .055); }
.lane--direct { background: rgb(var(--green-rgb) / .055); }
.lane-head { display: flex; align-items: center; justify-content: space-between; height: 26px; padding: 0 2px; }
.status { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px 0 7px; border-radius: var(--r-pill); font-size: 12px; font-weight: var(--weight-medium); white-space: nowrap; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: var(--r-circle); background: var(--dot); flex-shrink: 0; }
.status--iepl { --dot: var(--accent); background: rgb(var(--accent-rgb) / .14); }
.status--relay { --dot: var(--c-blue); background: rgb(var(--blue-rgb) / .13); }
.status--direct { --dot: var(--c-green); background: rgb(var(--green-rgb) / .13); }
.lane-plus { color: var(--text-faint); font-size: 15px; line-height: 1; }
.ticket { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 10px; border-radius: var(--r-sm); background: var(--bg-panel); box-shadow: 0 0 0 1px rgb(var(--ink-rgb) / .05),0 1px 2px rgb(var(--ink-rgb) / .06); min-width: 0; }
.ticket.is-pick { box-shadow: 0 0 0 1.5px rgb(var(--accent-rgb) / .32),0 10px 20px -12px rgb(var(--accent-rgb) / .45); }
.ticket-city { font-size: 13px; font-weight: var(--weight-medium); white-space: nowrap; }
.ticket-tag { margin-left: auto; display: flex; align-items: center; height: 20px; padding: 0 7px; border-radius: var(--r-xs); background: var(--bg-panel-2); font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.device-fade { position: absolute; z-index: 2; left: -40px; right: -40px; bottom: -34px; height: 64px; pointer-events: none; background: linear-gradient(180deg,rgb(var(--bg-rgb) / 0) 0%,rgb(var(--bg-rgb) / .86) 62%,var(--bg) 100%); }
.marks { padding: 36px 24px 72px; text-align: center; }
.marks-cap { margin: 0 0 20px; font-size: 14px; color: var(--text-muted); }
.marks-row { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 14px 0; margin: 0; padding: 0; list-style: none; }
.mark { display: flex; align-items: center; gap: 8px; font-size: 19px; font-weight: var(--weight-bold); letter-spacing: -.01em; color: rgb(var(--ink-rgb) / .74); }
.mark svg { display: block; width: 20px; height: 20px; flex-shrink: 0; }
.mark + .mark::before { content: ""; width: 4px; height: 4px; border-radius: var(--r-circle); background: rgb(var(--ink-rgb) / .3); margin: 0 22px; flex-shrink: 0; }
.mark--mono { font-family: var(--font-mono); font-size: 17px; letter-spacing: .02em; }
.preview-section { border-top: 1px solid var(--border); padding-top: var(--space-8); padding-bottom: var(--space-8); }
.swatch-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--space-2); }
.swatch { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; background: var(--bg-panel); min-width: 0; }
.swatch-color { height: 64px; border-bottom: 1px solid var(--border); }
.swatch code { display: block; padding: 12px; background: var(--bg-panel); font-size: 12px; }
.sw-bg { background: var(--bg); }
.sw-panel { background: var(--bg-panel); }
.sw-panel-2 { background: var(--bg-panel-2); }
.sw-border { background: var(--border); }
.sw-accent { background: var(--accent); }
.sw-accent-dark { background: var(--accent-dark); }
.sw-amber { background: var(--amber); }
.sw-text { background: var(--text); }
.sw-muted { background: var(--text-muted); }
.sw-faint { background: var(--text-faint); }
.sw-success { background: var(--success); }
.sw-warn { background: var(--warn); }
.sw-error { background: var(--error); }
.sw-blue { background: var(--c-blue); }
.sw-purple { background: var(--c-purple); }
.type-display { font-family: var(--font-display); font-size: 64px; font-weight: var(--weight-display); line-height: 1.1; letter-spacing: var(--tracking-cjk); }
.type-h2 { font-size: var(--heading-size); font-weight: var(--weight-display); line-height: 1.25; }
.type-h3 { font-size: var(--card-heading-size); font-weight: var(--weight-bold); }
.preview-stack { display: grid; gap: var(--space-3); }
.preview-stack > * { min-width: 0; }
.preview-stack > p { margin: 0; }
.preview-label { font-size: 13px; color: var(--text-muted); margin-bottom: var(--space-1); }
.preview-note { margin-top: var(--space-3); color: var(--text-muted); font-size: var(--text-small); }
@media (max-width:1279px) { .float-group,.scribble { display: none; } }
@media (max-width:1000px) {
  .platform-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .ticket { padding-inline: 7px; gap: 5px; }
  .ticket-tag { padding-inline: 5px; }
}
@media (max-width:900px) {
  .win-search { display: none; }
  .filters li:nth-child(n+3) { display: none; }
}
@media (max-width:768px) {
  .hero-title { font-size: 40px; line-height: 1.12; }
  .crest { gap: 12px 8px; }
  .crest li { width: 72px; margin-left: 0; }
  .crest-disc { width: 44px; height: 44px; font-size: 12px; }
  .crest-disc svg { width: 38px; height: 38px; }
  .hero-copy { padding-inline: var(--gutter); }
  .hero-desc { font-size: 17px; }
  .platforms { flex-wrap: wrap; justify-content: center; gap: 10px 16px; padding: 8px 12px; border-radius: var(--r-md); }
  .pf-label { display: none; }
  .device { width: calc(100% - 40px); }
  .win-body { grid-template-columns: 150px minmax(0,1fr); height: auto; min-height: 298px; }
  .side { padding-inline: 8px; }
  .side-item { padding-inline: 6px; font-size: 12px; gap: 6px; }
  .side-foot { gap: 5px; padding-inline: 6px; font-size: 10px; }
  .main { padding: 12px; }
  .main-top { height: auto; flex-wrap: wrap; gap: 8px; }
  .plan { margin-left: 0; }
  .filters { display: none; }
  .board { grid-template-columns: minmax(0,1fr); gap: 8px; }
  .lane { padding: 6px; }
  .lane:not(:first-child) { display: none; }
  .ticket { height: 44px; }
  .plan-grid { grid-template-columns: minmax(0,1fr); }
  .feature-card,.feature-card:nth-child(n) { grid-column: span 6; }
  .type-display { font-size: 40px; }
  .swatch-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width:640px) {
  .platform-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .feature-grid { grid-template-columns: minmax(0,1fr); }
  .feature-card,.feature-card:nth-child(n) { grid-column: auto; padding: var(--space-3); }
  .feature-card h3 { font-size: 26px; }
  .feature-arrow { top: 20px; right: 20px; }
  .swatch-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .promo-block { padding: var(--space-3); gap: var(--space-3); }
  .hero-title { font-size: clamp(32px,9vw,40px); }
  .hero-desc { font-size: 16px; }
  .trust { font-size: 12px; }
  .trust li + li::before { margin-inline: 8px; }
  .pf { font-size: 12px; gap: 4px; }
  .platforms { gap: 8px 12px; }
  .device { width: calc(100% - 32px); }
  .win-body { grid-template-columns: 118px minmax(0,1fr); }
  .side-item { font-size: 11px; gap: 5px; padding-inline: 4px; }
  .side-label { padding-inline: 4px; }
  .side-foot { height: auto; padding: 8px 6px; white-space: normal; flex-wrap: wrap; font-size: 10px; }
  .side-foot .toggle { width: 24px; height: 16px; }
  .side-foot .toggle::after { width: 12px; height: 12px; }
  .main { padding: 10px 8px 20px; gap: 10px; }
  .main-title { font-size: 14px; }
  .plan { padding: 5px 7px; gap: 5px; }
  .plan-ico { display: none; }
  .plan-txt strong { font-size: 11px; }
  .plan-txt small { font-size: 9px; }
  .ticket { padding-inline: 6px; flex-wrap: wrap; height: auto; min-height: 44px; gap: 3px 5px; }
  .ticket-city { font-size: 11px; }
  .ticket-tag { font-size: 9px; height: 18px; padding-inline: 4px; }
  .win-bar { padding-inline: 12px; gap: 12px; }
  .lights { gap: 5px; }
  .lights span { width: 9px; height: 9px; }
  .win-tab { font-size: 12px; padding-right: 8px; }
  .device-glow { inset: 20% 0 -15% 20%; max-width: 100%; }
  .device-glow--soft { inset: 30% 30% -10% 0; }
  .marks { padding: 28px 16px 48px; }
  .mark { font-size: 14px; }
  .mark + .mark::before { margin-inline: 12px; }
  .mark--mono { font-size: 13px; }
  .price-card { padding: var(--space-3); }
}