.hero { position: relative; padding-top: 16px; overflow: hidden; max-width: 100%; }
.hero-copy { position: relative; z-index: 3; width: min(var(--wrap),calc(100% - 48px)); margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; }
.kicker { display: inline-flex; align-items: center; gap: 8px; height: 24px; margin: 0; padding: 0 12px 0 3px; border: 1px solid var(--line); border-radius: var(--pill); background: var(--panel); font-family: var(--font-mono-cjk); font-size: 11px; letter-spacing: .04em; color: var(--muted); box-shadow: inset 0 1px 0 var(--hilite),0 6px 16px -10px var(--glow-strong); }
.kicker-ico { display: grid; place-items: center; width: 18px; height: 18px; flex: none; border-radius: var(--pill); background: var(--ink); color: var(--on-ink); }
.kicker-ico svg { width: 11px; height: 11px; stroke-width: 2.6; }
.kicker-k { color: var(--ink); font-weight: var(--weight-strong); letter-spacing: .12em; }
.kicker-sep { color: var(--line-strong); }
.display { margin: 10px 0 12px; font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--display-size); line-height: 1.04; letter-spacing: -.03em; color: var(--ink); }
mark.kw { background: var(--kw); color: inherit; padding: 0 .06em; margin: 0 .02em; border-radius: var(--r); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.lede { margin: 0 0 14px; font-size: 20px; line-height: 1.45; color: var(--muted); }
.lede strong { color: var(--ink); font-weight: var(--weight-strong); }
.claim { display: flex; align-items: center; gap: 10px; width: 560px; max-width: 100%; height: 52px; margin: 0; padding: 4px 4px 4px 18px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--pill); box-shadow: inset 0 1px 0 var(--hilite),0 2px 4px var(--soft),0 20px 40px -18px var(--glow-strong); }
.claim:focus-within { border-color: var(--ink); box-shadow: inset 0 1px 0 var(--hilite),0 0 0 4px var(--focus),0 20px 40px -18px var(--glow-strong); }
.claim-ico { width: 18px; height: 18px; flex: none; color: var(--muted); }
.claim input { flex: 1; min-width: 0; height: 100%; border: 0; background: var(--clear); font-family: var(--font-body); font-size: 16px; color: var(--ink); }
.claim input:focus-visible { outline-offset: -2px; border-radius: var(--r-xs); }
.claim input::placeholder { color: var(--muted); }
.claim-note { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 30px; margin-top: 8px; }
.note { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 13.5px; color: var(--muted); }
.note strong { color: var(--ink); font-weight: var(--weight-strong); }
.note svg { width: 15px; height: 15px; color: var(--ink); }
.facts { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; margin: 10px 0 12px; padding: 0; list-style: none; font-size: 14px; line-height: 20px; color: var(--ink); }
.facts li { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.facts li + li { margin-left: 16px; padding-left: 16px; border-left: 1px solid var(--line); }
.facts svg { width: 16px; height: 16px; color: var(--muted); flex: none; }
.wall { display: grid; grid-template-columns: 60px auto 60px; column-gap: 10px; row-gap: 6px; justify-content: center; align-items: center; max-width: 100%; }
.wall-k { font-family: var(--font-mono-cjk); font-size: 11px; letter-spacing: .06em; color: var(--muted); text-align: right; white-space: nowrap; }
.wall-row { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; min-width: 0; }
.plate { display: inline-flex; align-items: center; gap: 8px; flex: none; height: 32px; padding: 0 13px 0 10px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap; box-shadow: inset 0 1px 0 var(--hilite),0 8px 16px -12px var(--glow-strong); }
.plate > svg { width: 18px; height: 18px; flex: none; }
.flag { display: inline-flex; flex: none; border-radius: var(--r-xs); overflow: hidden; box-shadow: 0 0 0 1px var(--line); }
.flag svg { display: block; width: 24px; height: 16px; }
.flag.xs { border-radius: var(--r-xs); }
.flag.xs svg { width: 18px; height: 12px; }
.fr { fill: var(--flag-red); }
.fw { fill: var(--flag-white); }
.fn { fill: var(--flag-navy); }
.fb { fill: var(--flag-blue); }
.ff { fill: var(--flag-red-fr); }
.fk { fill: var(--flag-black); }
.fg { fill: var(--flag-gold); }
.rig { position: relative; z-index: 2; width: min(var(--wrap),calc(100% - 48px)); height: 366px; margin: 26px auto 0; }
.rig-cards { position: relative; z-index: 2; height: 100%; margin: 0 -48px; padding: 0 48px; display: grid; grid-template-columns: minmax(0,1.38fr) minmax(0,1fr) minmax(0,1.1fr) minmax(0,1fr) minmax(0,1.38fr); gap: 12px; align-items: start; -webkit-mask-image: linear-gradient(to bottom,var(--mask-on) 62%,var(--clear) 100%); mask-image: linear-gradient(to bottom,var(--mask-on) 62%,var(--clear) 100%); }
.col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.c1 { margin-top: 34px; }
.c2 { margin-top: 16px; }
.c3 { margin-top: 40px; }
.c4 { margin-top: 20px; }
.c5 { margin-top: 30px; }
.tail { min-height: 420px; }
.slot { position: relative; }
.vcard { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; font-family: var(--font-mono-cjk); color: var(--ink); box-shadow: var(--lift); }
.vhead { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px 0 12px; border-bottom: 1px solid var(--line); background: linear-gradient(to bottom,var(--panel),var(--panel-3)); box-shadow: inset 0 1px 0 var(--hilite); }
.dots { display: inline-flex; gap: 4px; flex: none; }
.dots i { width: 7px; height: 7px; border-radius: var(--circle); background: var(--line-strong); }
.vtitle { margin: 0; font-size: 11.5px; font-weight: var(--weight-strong); color: var(--ink); white-space: nowrap; }
.vmeta { margin-left: auto; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em; color: var(--muted); }
.vec { width: 14px; height: 10px; flex: none; fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.routes { list-style: none; margin: 0; padding: 10px 12px 12px; display: grid; gap: 6px; }
.route { display: flex; align-items: center; gap: 6px; min-height: 32px; padding: 5px 6px 5px 9px; border-radius: var(--r-sm); background: var(--panel-3); border: 1px solid var(--panel-2); font-size: 11.5px; white-space: nowrap; }
.route b { font-weight: var(--weight-strong); }
.dst { color: var(--ink); }
.lt { margin-left: auto; display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border: 1px solid var(--line); border-radius: var(--r-xs); background: var(--panel); font-style: normal; font-size: 10.5px; color: var(--ink); white-space: nowrap; }
.lt.solid { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.packs { padding: 12px 14px; }
.pack { display: flex; align-items: baseline; gap: 6px; margin: 0; font-size: 13px; color: var(--muted); }
.pack b { font-family: var(--font-mono); font-size: 22px; font-weight: var(--weight-strong); letter-spacing: -.02em; color: var(--ink); }
.pack-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tag-ink, .tag-soft { display: inline-flex; align-items: center; min-height: 20px; padding: 2px 8px; border-radius: var(--r-xs); font-size: 10.5px; }
.tag-ink { background: var(--ink); color: var(--on-ink); }
.tag-soft { border: 1px solid var(--line); background: var(--panel-3); color: var(--muted); }
.pack-more { list-style: none; margin: 12px 0 0; padding: 10px 0 0; border-top: 1px solid var(--line); display: grid; gap: 6px; font-size: 11.5px; color: var(--muted); }
.quota { list-style: none; margin: 0; padding: 12px 14px 0; display: grid; gap: 12px; }
.q-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; font-size: 11.5px; }
.q-row b { font-weight: var(--weight-strong); }
.q-row span { color: var(--muted); }
.q-track { height: 8px; border-radius: var(--pill); background: var(--panel-2); overflow: hidden; box-shadow: inset 0 1px 1px var(--soft); }
.q-fill { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--fill-a),var(--ink)); }
.w12 { width: 12%; }
.w50 { width: 50%; }
.w100 { width: 100%; }
.vfoot { margin: 14px 14px 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: 10.5px; color: var(--muted); }
.badge-refund { position: absolute; top: -12px; right: -10px; z-index: 3; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px 0 8px; border: 1px solid var(--line); border-radius: var(--pill); background: var(--panel); font-family: var(--font-mono-cjk); font-size: 10.5px; font-weight: var(--weight-strong); color: var(--ink); white-space: nowrap; box-shadow: inset 0 1px 0 var(--hilite),0 2px 4px var(--soft),0 12px 22px -10px var(--glow-strong); }
.badge-refund svg { width: 12px; height: 12px; stroke-width: 2.4; }
.vcard.ink { background: linear-gradient(165deg,var(--ink-2) 0%,var(--ink) 58%); border-color: var(--ink); color: var(--on-ink); box-shadow: inset 0 1px 0 var(--ink-hi),0 36px 64px -26px var(--ink-drop),0 16px 32px -18px var(--glow-strong); }
.vcard.ink::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 60% at 100% 0%,var(--ink-gloss),var(--clear) 62%); pointer-events: none; }
.vcard.ink .vhead { background: var(--clear); border-bottom-color: var(--ink-line); box-shadow: none; }
.vcard.ink .dots i { background: var(--ink-line); }
.vcard.ink .vtitle { color: var(--on-ink); }
.vcard.ink .vmeta { color: var(--on-ink-muted); }
.cover { position: relative; z-index: 1; padding: 14px; }
.big { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.big-n { font-family: var(--font-mono); font-size: 58px; font-weight: var(--weight-strong); line-height: 1; letter-spacing: -.05em; }
.big-u { font-size: 13px; color: var(--on-ink-muted); }
.lines { margin: 12px 0; padding-top: 10px; border-top: 1px solid var(--ink-line); font-size: 12.5px; color: var(--on-ink-muted); }
.lines b { font-family: var(--font-mono); font-size: 17px; font-weight: var(--weight-strong); color: var(--on-ink); margin-right: 4px; }
.ink-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ink-chips li { display: inline-flex; align-items: center; min-height: 22px; padding: 2px 8px; border: 1px solid var(--ink-line); border-radius: var(--r-xs); background: var(--ink-chip); font-size: 10.5px; }
.mini-flags { display: flex; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; }
.mini-flags .flag { box-shadow: 0 0 0 1px var(--ink-line); }
.fields { display: grid; gap: 8px; padding: 10px 12px 12px; }
.field { display: flex; align-items: center; gap: 7px; min-height: 36px; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: linear-gradient(to bottom,var(--panel),var(--panel-3)); box-shadow: inset 0 1px 0 var(--hilite),0 1px 2px var(--soft); font-size: 11.5px; white-space: nowrap; }
.dia { width: 7px; height: 7px; flex: none; border-radius: var(--r-xs); background: var(--ink); transform: rotate(45deg); }
.f-k { color: var(--muted); }
.f-v { color: var(--ink); font-weight: var(--weight-strong); }
.field .chev { margin-left: auto; width: 13px; height: 13px; color: var(--muted); }
.dev { padding: 10px 12px 12px; }
.dev-k { margin: 0 0 10px; font-size: 12px; color: var(--muted); }
.dev-k b { color: var(--ink); font-weight: var(--weight-strong); }
.os-row { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.os-row li { display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--r-sm); background: var(--panel-3); border: 1px solid var(--panel-2); color: var(--ink); }
.os-row svg { width: 16px; height: 16px; }
.rule-frame { position: relative; padding: 28px 0 0 24px; border: 1px solid var(--peach-line); border-radius: var(--r-md); background-color: var(--peach-soft); background-image: linear-gradient(var(--grid-line-warm) 1px,var(--clear) 1px),linear-gradient(90deg,var(--grid-line-warm) 1px,var(--clear) 1px),linear-gradient(140deg,var(--peach-soft),var(--rose-soft)); background-size: 44px 44px,44px 44px,auto; overflow: hidden; box-shadow: inset 0 1px 0 var(--hilite),0 30px 60px -24px var(--glow); }
.rule-card { min-height: 392px; border-right: 0; border-bottom: 0; border-radius: var(--r) 0 0 0; }
.rules { list-style: none; margin: 0; padding: 8px 12px 0; }
.rule { display: flex; align-items: center; gap: 6px; min-height: 38px; border-bottom: 1px solid var(--panel-2); font-size: 11.5px; white-space: nowrap; }
.r-src { font-weight: var(--weight-strong); }
.sw-wrap { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.sw-k { font-size: 10.5px; font-weight: var(--weight-strong); color: var(--ink); }
.sw { position: relative; display: inline-block; width: 28px; height: 16px; flex: none; border-radius: var(--pill); background: var(--ink); box-shadow: inset 0 1px 2px var(--ink-drop); }
.sw i { position: absolute; top: 2px; right: 2px; width: 12px; height: 12px; border-radius: var(--circle); background: var(--panel); box-shadow: 0 1px 2px var(--ink-drop); }
.rule-add { display: flex; align-items: center; gap: 6px; min-height: 32px; margin: 12px 12px 0; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel-3); font-size: 11px; color: var(--muted); }
.rule-add svg { width: 12px; height: 12px; }
.rule-add .chev { margin-left: auto; }
.float-q { position: absolute; top: 2px; left: 50%; z-index: 4; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 13px 0 11px; border: 1px solid var(--line); border-radius: var(--pill); background: var(--panel); font-family: var(--font-mono-cjk); font-size: 12px; font-weight: var(--weight-strong); color: var(--ink); white-space: nowrap; box-shadow: var(--lift); }
.status-dot { width: 6px; height: 6px; flex: none; border-radius: var(--circle); background: var(--ok); box-shadow: 0 0 0 3px var(--ok-ring); }
.app-tile { position: absolute; left: 22%; top: 218px; width: 56px; height: 56px; padding: 10px; z-index: 4; border-radius: var(--r-md); border: 1px solid var(--peach-line); background: linear-gradient(140deg,var(--peach-soft),var(--rose-soft)); box-shadow: var(--lift); transform: rotate(-9deg); }
.app-tile img { width: 36px; height: 36px; }
.rig-orb { position: absolute; bottom: -16px; width: 26%; aspect-ratio: 1; max-width: 100%; z-index: 1; background: linear-gradient(140deg,var(--peach-soft),var(--rose-soft)); border-radius: var(--circle); }
.rig-orb.left { left: -8%; }
.rig-orb.right { right: -8%; }
.scribble { position: absolute; right: 10px; top: -24px; z-index: 5; font-family: var(--font-hand); font-size: 17px; color: var(--ink); }
.scribble svg { display: block; width: 78px; height: 54px; margin-left: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.feature-board { display: grid; grid-template-columns: .85fr 1.15fr; gap: var(--space-6); padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); box-shadow: var(--lift); }
.feature-board > * { min-width: 0; }
.feature-heading { font-size: 48px; line-height: 1.13; }
.step-tabs, .cycle-tabs { display: flex; align-items: center; gap: 8px; max-width: 100%; overflow-x: auto; padding: 4px; }
.step-tabs [role="tab"] { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; flex: none; padding: 0; border: 1px solid var(--line-strong); border-radius: var(--circle); background: var(--panel); color: var(--ink); font-family: var(--font-mono); font-size: 16px; }
.step-tabs [role="tab"][aria-selected="true"] { border-color: var(--accent); border-radius: var(--r-xs); background: var(--accent); color: var(--on-ink); }
.cycle-tabs [role="tab"] { min-height: 44px; padding: 8px 20px; border: 1px solid var(--line); border-radius: var(--pill); background: var(--panel); color: var(--ink); white-space: nowrap; }
.cycle-tabs [role="tab"][aria-selected="true"] { border-color: var(--ink); background: var(--ink); color: var(--on-ink); }
[role="tabpanel"] { min-width: 0; }
.feature-bar { display: flex; align-items: center; gap: 12px; padding-block: 16px; margin-bottom: 24px; border-block: 1px solid var(--line-strong); }
.feature-bar h3 { margin: 0; }
.icon-badge { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; background: var(--accent); color: var(--on-ink); border-radius: var(--r-xs); }
.icon-badge svg { width: 22px; height: 22px; }
.feature-detail p { color: var(--muted); }
.feature-detail .vcard { margin-block: 24px; }
.toc-tabs { position: sticky; top: 12px; z-index: 12; display: flex; align-items: center; gap: 8px; max-width: 100%; overflow-x: auto; padding: 8px; margin-block: 24px; border: 1px solid var(--line); border-radius: var(--pill); background: var(--panel); box-shadow: var(--lift); scrollbar-width: thin; }
.toc-tabs a { display: inline-flex; align-items: center; justify-content: center; flex: none; min-height: 36px; padding: 6px 16px; border-radius: var(--pill); color: var(--ink); white-space: nowrap; text-decoration: none; font-size: 14px; }
.toc-tabs a.is-current { background: var(--ink); color: var(--on-ink); }
.toc-tabs.is-static { position: static; }
body:has(.toc-tabs) section[id] { scroll-margin-top: var(--toc-offset); }
.faq { display: grid; gap: 8px; }
.faq details { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); box-shadow: inset 0 1px 0 var(--hilite),0 12px 24px -24px var(--glow); }
.faq summary { position: relative; padding: 18px 48px 18px 20px; min-height: 56px; cursor: pointer; font-weight: var(--weight-strong); list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 20px; top: 16px; color: var(--ink); font-family: var(--font-mono); font-size: 22px; }
.faq details[open] summary::after { content: "−"; }
.faq details > :not(summary) { margin: 0; padding: 0 20px 20px; color: var(--muted); }
.plan-card { position: relative; display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 24px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); box-shadow: var(--lift); }
.plan-card.is-current { border: 2px solid var(--ink); padding: 23px; }
.plan-card h3 { margin: 0; }
.plan-price { margin: 0; font-family: var(--font-mono); font-size: 40px; font-weight: var(--weight-strong); line-height: 1.2; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.plan-price small { font-family: var(--font-body); font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.plan-capacity { margin: 0; font-family: var(--font-mono-cjk); font-size: 20px; }
.plan-list { margin: 0; padding-left: 20px; color: var(--muted); font-size: 15px; }
.plan-list li + li { margin-top: 8px; }
.plan-card .btn-secondary { margin-top: auto; }
.plan-ribbon { align-self: flex-start; padding: 4px 10px; border: 1px solid var(--ink); border-radius: var(--pill); background: var(--panel-2); font-size: 12px; font-weight: var(--weight-strong); }
.badge, .chip, .tag { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 3px 10px; max-width: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: var(--pill); background: var(--panel); color: var(--ink); font-family: var(--font-mono-cjk); font-size: 12px; overflow-wrap: anywhere; }
.chip { border-radius: var(--r-xs); background: var(--panel-3); }
.tag { color: var(--muted); }
.table-scroll { max-width: 100%; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); box-shadow: var(--lift); }
.data-table, .line-table { width: 100%; min-width: 680px; font-size: 15px; }
.data-table caption, .line-table caption { padding: 16px; text-align: left; color: var(--ink); font-family: var(--font-mono-cjk); font-weight: var(--weight-strong); }
.table-scroll th, .data-table th, .line-table th { color: var(--ink); font-weight: var(--weight-strong); background: var(--panel-2); white-space: nowrap; word-break: keep-all; }
.table-scroll th, .table-scroll td, .data-table th, .data-table td, .line-table th, .line-table td { padding: 14px 18px; border-bottom: 1px solid var(--line); text-align: left; word-break: keep-all; }
.table-scroll td:first-child { color: var(--ink); font-weight: 600; }
.table-scroll tr:last-child td { border-bottom: 0; }
.line-group th { background: var(--panel-3); color: var(--ink); font-family: var(--font-mono-cjk); }
.prose > .data-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; min-width: 0; }
.platform-card { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 24px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); box-shadow: var(--lift); text-align: center; }
.platform-card > svg { width: 32px; height: 32px; color: var(--ink); }
.platform-card h3 { font-size: 18px; margin: 0; }
.platform-card .btn-secondary { font-size: 13px; padding-inline: 12px; max-width: 100%; }
.article-card { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 24px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); box-shadow: var(--lift); }
.article-card h3 { font-size: 23px; }
.article-card h3 a { color: var(--ink); text-decoration: none; }
.article-card h3 a:hover { color: var(--accent-dark); }
.article-card p { color: var(--muted); font-size: 15px; }
.article-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-family: var(--font-mono-cjk); font-size: 12px; color: var(--muted); }
.article-card > a { margin-top: auto; min-height: 24px; }
.callout { margin: 24px 0; padding: 20px 24px; border: 1px solid var(--line); border-left: 4px solid var(--ink); border-radius: var(--r); background: var(--panel); box-shadow: var(--lift); }
.callout p:last-child { margin: 0; }
.promo-block { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 32px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); box-shadow: var(--lift); }
.promo-block > div { min-width: 0; }
.promo-block h2 { font-size: 28px; }
.promo-block p { margin: 0; color: var(--muted); }
.promo-block .btn, .promo-block .btn-primary, .promo-block .btn-secondary { flex-shrink: 0; white-space: nowrap; }
.help-section { display: grid; grid-template-columns: minmax(0,.65fr) minmax(0,1.35fr); gap: 32px; }
.help-section > * { min-width: 0; }
.swatch-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.swatch { display: flex; align-items: center; gap: 12px; padding: 12px; min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); }
.swatch code { font-size: 12px; }
.swatch-sample { width: 40px; height: 40px; flex: none; border: 1px solid var(--line); border-radius: var(--r-xs); }
.sw-bg { background: var(--bg); }
.sw-panel { background: var(--panel); }
.sw-panel-2 { background: var(--panel-2); }
.sw-panel-3 { background: var(--panel-3); }
.sw-line { background: var(--line); }
.sw-line-strong { background: var(--line-strong); }
.sw-accent { background: var(--accent); }
.sw-accent-dark { background: var(--accent-dark); }
.sw-peach { background: var(--peach); }
.sw-peach-soft { background: var(--peach-soft); }
.sw-rose-soft { background: var(--rose-soft); }
.sw-ink { background: var(--ink); }
.sw-ink-2 { background: var(--ink-2); }
.sw-muted { background: var(--muted); }
.sw-ok { background: var(--ok); }
.sw-warn { background: var(--warn); }
.sw-err { background: var(--err); }
.sw-kw { background: var(--kw); }
.sw-wash { background: var(--wash); }
.sw-glow { background: var(--glow); }
.sw-grid { background: var(--grid-line); }
.sw-on-ink { background: var(--on-ink); }
.sw-flag-red { background: var(--flag-red); }
.sw-flag-white { background: var(--flag-white); }
.sw-flag-navy { background: var(--flag-navy); }
.sw-flag-blue { background: var(--flag-blue); }
.sw-flag-red-fr { background: var(--flag-red-fr); }
.sw-flag-black { background: var(--flag-black); }
.sw-flag-gold { background: var(--flag-gold); }
.token-effects { display: grid; gap: 12px; margin-top: 24px; }
.token-effects code { display: block; }
.type-specimen { font-family: var(--font-display); font-weight: var(--weight-display); font-size: 48px; line-height: 1.2; letter-spacing: -.02em; }
.sample-focus { outline: 2px solid var(--accent-dark); outline-offset: 3px; }
.sample-hover { background: var(--panel-2); }
.motion-line-mask { display: block; overflow: clip; }
.motion-line { display: block; }
@media (max-width: 1100px) and (min-width: 769px) {
  .route, .rule { font-size: 10px; gap: 3px; }
  .routes, .rules { padding-inline: 8px; }
  .lt { padding-inline: 4px; font-size: 9px; }
  .rule-frame { padding-left: 12px; }
  .sw-k { display: none; }
  .big-n { font-size: 46px; }
}
@media (max-width: 768px) {
  .display { font-size: clamp(28px,6vw,40px); line-height: 1.12; letter-spacing: -.02em; }
  .lede { font-size: 18px; }
  .hero-copy { width: calc(100% - 32px); }
  .claim-note { flex-wrap: wrap; height: auto; gap: 8px; }
  .facts { gap: 8px 14px; font-size: 12px; }
  .facts li + li { margin-left: 0; padding-left: 0; border-left: 0; }
  .wall { display: block; width: 100%; }
  .wall-k { display: none; }
  .wall-row { overflow-x: auto; padding: 4px 1px; margin-top: 4px; }
  .rig { width: calc(100% - 32px); height: auto; margin-top: 20px; }
  .rig-cards { height: auto; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 0; padding: 0; -webkit-mask-image: none; mask-image: none; }
  .c1 { margin-top: 32px; }
  .c3 { margin-top: 16px; }
  .c5 { grid-column: 1 / -1; margin-top: 0; }
  .c2, .c4, .c1 .packs-card, .app-tile, .scribble, .rig-orb { display: none; }
  .tail { min-height: 0; }
  .routes { padding: 8px; }
  .route { flex-wrap: wrap; white-space: normal; font-size: 10px; height: auto; min-height: 38px; padding: 6px; gap: 4px; }
  .route .lt { margin-left: 0; }
  .vmeta { display: none; }
  .vhead { padding-inline: 8px; gap: 5px; }
  .vtitle { font-size: 10px; }
  .big-n { font-size: 40px; }
  .cover { padding: 12px; }
  .big { gap: 4px; flex-wrap: wrap; }
  .big-u { font-size: 11px; }
  .float-q { top: -8px; font-size: 10px; height: 24px; }
  .rule-frame { padding: 12px 0 0 12px; }
  .rule-card { min-height: 220px; }
  .rules { padding-inline: 10px; }
  .rule { font-size: 10.5px; }
  .feature-board { grid-template-columns: 1fr; padding: 24px; gap: 24px; }
  .feature-heading { font-size: 32px; }
  .swatch-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .help-section { grid-template-columns: 1fr; gap: 16px; }
  .promo-block { flex-direction: column; align-items: flex-start; padding: 24px; }
  .type-specimen { font-size: 32px; }
}
@media (max-width: 640px) {
  .claim { gap: 6px; padding-left: 12px; }
  .claim input { font-size: 14px; }
  .claim .btn-hot.lg { padding-inline: 14px; font-size: 15px; }
  .claim-ico { width: 16px; height: 16px; }
  .note { font-size: 12px; }
  .note svg { display: none; }
  .rig .app-tile { transform: none; }
  .rig-orb { max-width: 100%; }
  .feature-board { padding: 20px 16px; }
  .step-tabs [role="tab"] { width: 44px; height: 44px; }
  .plan-card { padding: 20px; }
  .plan-card.is-current { padding: 19px; }
  .swatch { padding: 8px; gap: 8px; }
  .swatch-sample { width: 28px; height: 28px; }
  .swatch code { font-size: 10px; }
}