.stage { position:relative; isolation:isolate; overflow-x:clip; max-width:100%; background:linear-gradient(180deg,var(--sky) 0%,var(--sky-mid) 34%,var(--bg) 70%) }
.stage::before,.stage::after { content:""; position:absolute; z-index:-1; pointer-events:none; filter:blur(4px) }
.stage::before { left:-7%; top:520px; width:44%; height:460px; background:radial-gradient(ellipse 34% 30% at 36% 58%,var(--w-90) 0%,var(--w-60) 40%,var(--w-0) 72%),radial-gradient(ellipse 26% 24% at 58% 46%,var(--w-90) 0%,var(--w-40) 45%,var(--w-0) 75%),radial-gradient(ellipse 22% 20% at 18% 52%,var(--w-72) 0%,var(--w-0) 72%),radial-gradient(ellipse 52% 44% at 40% 56%,var(--sky-a40) 0%,var(--sky-a0) 78%) }
.stage::after { right:-6%; top:300px; width:38%; height:400px; background:radial-gradient(ellipse 32% 28% at 58% 52%,var(--w-90) 0%,var(--w-60) 42%,var(--w-0) 74%),radial-gradient(ellipse 24% 22% at 34% 44%,var(--w-90) 0%,var(--w-40) 45%,var(--w-0) 75%),radial-gradient(ellipse 20% 18% at 80% 60%,var(--w-72) 0%,var(--w-0) 72%),radial-gradient(ellipse 50% 44% at 56% 52%,var(--sky-a40) 0%,var(--sky-a0) 78%) }
.hero { position:relative; padding:24px 24px 0; text-align:center }
.hero-copy { position:relative; z-index:3; max-width:1120px; margin:0 auto; display:flex; flex-direction:column; align-items:center }
.notice { display:inline-flex; align-items:center; gap:10px; min-height:34px; padding:5px 16px 5px 5px; border-radius:var(--r-pill); background:var(--w-72); box-shadow:var(--hl-edge),0 8px 22px -12px var(--shadow-sky-22); backdrop-filter:blur(10px); color:var(--text); font-size:14px; line-height:1.2; text-decoration:none }
.notice-badge { display:inline-flex; align-items:center; height:24px; padding:0 10px; border-radius:var(--r-pill); background:var(--success); color:var(--panel); font-size:12px; font-weight:700; flex-shrink:0 }
.notice-arrow { color:var(--muted); font-size:16px; flex-shrink:0 }
.hero-title { margin:18px 0 0; font-family:var(--font-display); font-weight:900; font-size:var(--size-h1); line-height:1.1; letter-spacing:-.02em; color:var(--text) }
.t-line { display:block }
.kw { background:linear-gradient(90deg,var(--accent) 0%,var(--accent-2) 100%); background-clip:text; -webkit-background-clip:text; color:transparent; -webkit-text-fill-color:transparent }
.lede { margin:16px 0 0; max-width:780px; font-size:20px; line-height:1.4; color:var(--muted) }
.lede strong { color:var(--text); font-weight:700 }
.facts { margin-top:14px; display:flex; flex-wrap:wrap; justify-content:center; gap:8px }
.fact { display:inline-flex; align-items:center; gap:6px; min-height:30px; padding:6px 13px 6px 10px; border-radius:var(--r-pill); background:var(--w-60); box-shadow:var(--hl-edge),0 6px 16px -10px var(--shadow-sky-22); font-size:13.5px; font-weight:500; line-height:1.2; color:var(--text-2) }
.fact svg { width:15px; height:15px; flex:none; color:var(--muted) }
.marks { margin-top:12px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px 14px; min-height:22px }
.marks-label { font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; color:var(--muted); line-height:1 }
.marks-list { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 16px }
.mark { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:500; line-height:1.2; color:var(--muted) }
.mark svg { width:16px; height:16px; flex:none }
.marks-sep { width:1px; height:16px; background:var(--border); margin:0 6px }
.flag { position:relative; display:inline-flex; flex:none; border-radius:var(--r-flag); overflow:hidden; line-height:0 }
.flag::after { content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px var(--ink-12) }
.flag svg { display:block; width:21px; height:14px }
.flag--tile svg { width:18px; height:12px }
.flag--lg svg { width:24px; height:16px }
.f-w { fill:var(--flag-white) }
.f-jp { fill:var(--flag-jp) }
.f-usr { fill:var(--flag-us-red) }
.f-usb { fill:var(--flag-us-blue) }
.f-hk { fill:var(--flag-hk) }
.f-sg { fill:var(--flag-sg) }
.f-nlr { fill:var(--flag-nl-red) }
.f-nlb { fill:var(--flag-nl-blue) }
.f-ukb { fill:var(--flag-uk-blue) }
.f-uk-ws { fill:none; stroke:var(--flag-white) }
.f-uk-rs { fill:none; stroke:var(--flag-uk-red) }
.device { position:relative; z-index:1; width:784px; max-width:100%; margin:20px auto 150px }
.lid { position:relative; padding:8px; border-radius:var(--r-card); background:linear-gradient(180deg,var(--alu-1) 0%,var(--alu-2) 100%); box-shadow:inset 0 1px 0 var(--w-100),inset 0 -1px 0 var(--alu-3),0 44px 90px -30px var(--shadow-sky-22),0 18px 40px -22px var(--ink-12) }
.bezel { position:relative; padding:10px; border-radius:var(--r-float); background:var(--bezel); box-shadow:inset 0 0 0 1px var(--bezel-edge) }
.screen { position:relative; height:468px; border-radius:var(--r-tile); overflow:hidden; background:linear-gradient(168deg,var(--wall-1) 0%,var(--wall-2) 55%,var(--wall-3) 100%) }
.screen::before { content:""; position:absolute; left:-10%; bottom:-18%; width:60%; height:60%; background:radial-gradient(ellipse 50% 46% at 50% 50%,var(--w-90) 0%,var(--w-0) 70%); pointer-events:none }
.screen::after { content:""; position:absolute; inset:0; background:linear-gradient(118deg,var(--w-0) 0%,var(--w-0) 48%,var(--w-40) 52%,var(--w-0) 64%); opacity:.35; pointer-events:none; z-index:4 }
.notch { position:absolute; top:0; left:50%; width:118px; height:15px; margin-left:-59px; border-radius:0 0 var(--r-small) var(--r-small); background:var(--bezel); z-index:5 }
.menubar { position:relative; z-index:2; height:22px; padding:0 12px; display:flex; align-items:center; justify-content:space-between; background:var(--w-60); backdrop-filter:blur(10px); font-size:11px; line-height:1; color:var(--text-2) }
.menubar-left,.menubar-right { display:flex; align-items:center; gap:14px }
.menubar-left strong { font-weight:700; color:var(--text) }
.menubar svg { width:12px; height:12px }
.mb-bolt { color:var(--accent) }
.win { position:absolute; z-index:3; top:36px; left:50%; width:600px; margin-left:-300px; transform:perspective(1800px) rotateX(3deg) rotateY(-2deg); transform-origin:50% 0 }
.win-clip { border-radius:var(--r-window); overflow:hidden; background:var(--panel); box-shadow:0 34px 64px -20px var(--shadow-sky-22),0 10px 24px -14px var(--shadow-sky-12),inset 0 0 0 1px var(--border) }
.win-bar { height:32px; padding:0 12px; display:grid; grid-template-columns:116px 1fr auto; align-items:center; border-bottom:1px solid var(--panel-2); font-size:11.5px; line-height:1 }
.lights { display:flex; gap:7px }
.lights i { width:10px; height:10px; border-radius:var(--r-circle); display:block }
.l-r { background:var(--tl-red) }
.l-y { background:var(--tl-yellow) }
.l-g { background:var(--tl-green) }
.win-title { display:inline-flex; align-items:center; gap:6px; font-weight:700; color:var(--text) }
.win-title-mark { width:16px; height:16px; border-radius:var(--r-small); overflow:hidden }
.win-title span { color:var(--muted); font-weight:500 }
.win-search { display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 12px 0 9px; border-radius:var(--r-pill); background:var(--panel-2); color:var(--muted); font-size:10.5px }
.win-search svg { width:11px; height:11px }
.win-body { height:268px; display:grid; grid-template-columns:128px 1fr }
.win-side { background:var(--side); padding:10px 8px }
.side-label { margin:0 0 6px 8px; font-size:10px; letter-spacing:.06em; color:var(--muted); line-height:12px; text-align:left }
.side-list { list-style:none; margin:0; padding:0 }
.side-list li { display:flex; align-items:center; gap:8px; height:26px; margin-bottom:2px; padding:0 8px; border-radius:var(--r-small); font-size:11.5px; line-height:1; color:var(--text-2) }
.side-list svg { width:13px; height:13px; flex:none; color:var(--muted) }
.side-list .is-on { background:var(--panel); color:var(--text); font-weight:700; box-shadow:0 4px 10px -6px var(--shadow-sky-22),inset 0 0 0 1px var(--panel-2) }
.win-main { padding:12px 14px }
.cur { height:62px; padding:0 14px 0 12px; display:flex; align-items:center; gap:10px; border-radius:var(--r-tile); background:linear-gradient(120deg,var(--candy-pink) 0%,var(--candy-pink-2) 100%); box-shadow:0 10px 22px -14px var(--shadow-pink-18); text-align:left }
.icon-box { width:38px; height:38px; flex:none; border-radius:var(--r-box); background:var(--panel); display:inline-flex; align-items:center; justify-content:center; box-shadow:0 4px 10px -6px var(--ink-12); overflow:hidden }
.icon-box svg { width:24px; height:24px }
.cur-k { display:block; font-size:10.5px; line-height:14px; color:var(--muted) }
.cur-v { display:block; font-size:13.5px; line-height:18px; font-weight:700; color:var(--text) }
.cur-state { margin-left:auto; display:flex; align-items:center; gap:8px; font-size:11px; font-weight:700; color:var(--success); line-height:1 }
.toggle { position:relative; width:34px; height:20px; border-radius:var(--r-pill); background:var(--success); box-shadow:inset 0 1px 2px var(--ink-12); flex-shrink:0 }
.toggle::after { content:""; position:absolute; top:2px; right:2px; width:16px; height:16px; border-radius:var(--r-circle); background:var(--panel); box-shadow:0 1px 3px var(--ink-40) }
.sec-head { margin:10px 0 8px; display:flex; align-items:center; justify-content:space-between; line-height:16px }
.sec-head b { font-size:12px }
.sec-head span { font-size:10.5px; color:var(--muted) }
.tiles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px }
.tile { height:70px; padding:9px 10px; border-radius:var(--r-tile); display:flex; flex-direction:column; justify-content:space-between; box-shadow:0 8px 16px -12px var(--shadow-sky-22) }
.tile--sky { background:linear-gradient(140deg,var(--candy-sky),var(--candy-sky-2)) }
.tile--mint { background:linear-gradient(140deg,var(--candy-mint),var(--candy-mint-2)) }
.tile--pink { background:linear-gradient(140deg,var(--candy-pink),var(--candy-pink-2)) }
.tile--apricot { background:linear-gradient(140deg,var(--candy-apricot),var(--candy-apricot-2)) }
.tile--lilac { background:linear-gradient(140deg,var(--candy-lilac),var(--candy-lilac-2)) }
.tile--navy { background:linear-gradient(140deg,var(--candy-navy),var(--candy-navy-2)); color:var(--panel) }
.tile-top { display:flex; align-items:center; gap:7px; text-align:left }
.tile-flag { width:24px; height:24px; flex:none; border-radius:var(--r-small); background:var(--panel); display:inline-flex; align-items:center; justify-content:center; box-shadow:0 3px 8px -5px var(--ink-12); overflow:hidden }
.tile-name { display:block; font-size:12px; font-weight:700; line-height:14px }
.tile-en { display:block; font-size:9.5px; line-height:12px; color:var(--muted); white-space:nowrap }
.tile--navy .tile-en { color:var(--w-72) }
.tile-bottom { display:flex; align-items:center; justify-content:space-between }
.tag { display:inline-flex; align-items:center; min-height:24px; padding:3px 9px; border-radius:var(--r-pill); background:var(--w-72); font-size:12px; font-weight:600; line-height:1.2; color:var(--text-2); max-width:100%; overflow-wrap:anywhere }
.tile .tag { min-height:17px; padding:0 7px; font-size:9.5px }
.tile--navy .tag { background:var(--w-14); color:var(--panel) }
.go { display:inline-flex; align-items:center; height:18px; padding:0 9px; border-radius:var(--r-pill); box-shadow:inset 0 0 0 1px var(--text); font-size:10px; font-weight:600; line-height:1; color:var(--text) }
.tile--navy .go { box-shadow:inset 0 0 0 1px var(--panel); color:var(--panel) }
.win-status { height:26px; padding:0 14px; display:flex; align-items:center; justify-content:space-between; background:var(--panel-2); font-size:10.5px; line-height:1; color:var(--text-2); font-variant-numeric:tabular-nums }
.win-status-l { display:inline-flex; align-items:center; gap:6px; font-weight:600 }
.win-status-r { color:var(--muted) }
.win-sticker { position:absolute; top:-14px; right:-28px; display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 13px 0 10px; border-radius:var(--r-pill); background:var(--panel); box-shadow:var(--hl-edge),var(--elev-pink); font-size:12px; font-weight:700; line-height:1; color:var(--text); transform:rotate(5deg) }
.win-sticker svg { width:14px; height:14px; color:var(--accent) }
.deck { position:relative; width:calc(100% + 96px); margin-left:-48px; height:18px; border-radius:var(--r-flag) var(--r-flag) var(--r-card) var(--r-card); background:linear-gradient(180deg,var(--alu-1) 0%,var(--alu-2) 70%,var(--alu-3) 100%); box-shadow:inset 0 1px 0 var(--w-100),0 18px 30px -18px var(--shadow-sky-22) }
.deck::before { content:""; position:absolute; top:0; left:50%; width:128px; height:7px; margin-left:-64px; border-radius:0 0 var(--r-small) var(--r-small); background:linear-gradient(180deg,var(--alu-2),var(--alu-1)) }
.ground { position:absolute; z-index:-1; left:50%; top:calc(100% - 14px); width:120%; height:150px; transform:translateX(-50%); pointer-events:none; background:radial-gradient(ellipse 40% 18% at 50% 16%,var(--shadow-sky-22),var(--sky-a0) 75%),radial-gradient(ellipse 48% 35% at 36% 48%,var(--w-90),var(--w-0) 75%),radial-gradient(ellipse 35% 28% at 67% 44%,var(--w-90),var(--w-0) 76%) }
.float-card { position:absolute; z-index:6; top:156px; width:194px; padding:18px; text-align:left; border-radius:var(--r-float); background:var(--panel); box-shadow:var(--hl-edge),var(--elev-pink) }
.float-card p { font-size:12px; color:var(--muted); margin-top:5px }
.float-card strong { display:block; font-size:14px }
.float-card .icon { color:var(--accent); margin-bottom:8px }
.float-card--left { left:-140px; transform:rotate(-4deg) }
.float-card--right { right:-146px; top:220px; transform:rotate(4deg) }
.tabs { min-width:0 }
.tab-list,[role="tablist"] { display:flex; align-items:center; gap:8px; max-width:100%; overflow-x:auto; padding:6px 2px 12px; scrollbar-width:thin }
.tab-list [role="tab"] { flex-shrink:0; min-height:44px; padding:10px 20px; border-radius:var(--r-pill); background:var(--panel-2); color:var(--text-2); white-space:nowrap; font-size:14px; font-weight:600 }
.tab-list [role="tab"][aria-selected="true"] { background:var(--accent); color:var(--panel) }
.tab-panel { margin-top:20px; min-width:0 }
.feature-toolbar { display:flex; align-items:center; gap:20px; margin-bottom:20px }
.feature-toolbar .tab-list { flex:1; min-width:0 }
.shelf-arrows { display:flex; gap:8px; flex-shrink:0 }
.shelf-arrow { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:var(--r-circle); background:var(--panel-2); font-size:24px }
.feature-shelf { display:flex; gap:24px; overflow-x:auto; max-width:100%; padding:8px 4px 36px; scroll-snap-type:x mandatory; scrollbar-width:thin }
.feature-card { display:flex; flex-direction:column; flex:0 0 360px; min-width:0; padding:32px; border-radius:var(--r-card); box-shadow:var(--elev-sky); scroll-snap-align:start; scroll-margin-inline:4px }
.feature-card.is-current { outline:3px solid var(--accent); outline-offset:-3px }
.feature-top { display:flex; align-items:center; gap:14px; margin-bottom:24px }
.feature-top h3 { font-size:21px }
.feature-top p { color:var(--muted); font-size:13px; margin-top:4px }
.feature-card > p { margin-bottom:24px; line-height:1.8 }
.feature-card .btn { align-self:flex-end; margin-top:auto }
.tile--navy .feature-top p { color:var(--w-72) }
.feature-card.tile--navy .btn { background:transparent; color:var(--panel); box-shadow:inset 0 0 0 1px var(--panel) }
.toc-tabs { position:sticky; top:var(--toc-offset); z-index:20; display:flex; gap:8px; max-width:100%; overflow-x:auto; padding:10px; margin-block:24px 32px; border-radius:var(--r-pill); background:var(--panel); box-shadow:var(--elev-sky); scrollbar-width:thin }
.toc-tabs a { flex-shrink:0; display:inline-flex; align-items:center; min-height:40px; padding:8px 16px; border-radius:var(--r-pill); color:var(--text-2); font-size:14px; text-decoration:none; white-space:nowrap }
.toc-tabs a.is-current { background:var(--accent); color:var(--panel); font-weight:700 }
.toc-tabs.toc-static { position:static }
body:has(.toc-tabs) section[id] { scroll-margin-top:var(--anchor-offset) }
.faq-list { display:grid; gap:12px }
.faq-item { padding:0 24px; border-radius:var(--r-float); background:var(--panel); box-shadow:var(--elev-sky) }
.faq-item summary { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:72px; padding-block:20px; font-weight:650; list-style:none; cursor:pointer }
.faq-item summary::-webkit-details-marker { display:none }
.faq-item summary::after { content:"+"; flex-shrink:0; font:500 24px/1 var(--font-mono); color:var(--accent-dark) }
.faq-item[open] summary::after { content:"−" }
.faq-answer { padding-bottom:24px; color:var(--muted) }
.plan-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; align-items:stretch }
.plan-card { position:relative; display:flex; flex-direction:column; min-width:0; padding:32px; border-radius:var(--r-card); box-shadow:var(--elev-pink) }
.plan-card.is-current { outline:3px solid var(--accent); outline-offset:-3px }
.plan-card h3 { font-size:22px; margin-top:12px }
.plan-period { color:var(--muted); font-size:14px }
.plan-price { font:850 44px/1.15 var(--font-display); letter-spacing:-.02em; margin-block:24px 10px; font-variant-numeric:tabular-nums }
.plan-price small { font:500 14px/1.4 var(--font-body); color:var(--muted); letter-spacing:normal }
.plan-facts { list-style:none; padding:0; margin:16px 0 28px; color:var(--text-2) }
.plan-facts li { margin-top:10px }
.plan-card .btn { margin-top:auto; align-self:flex-end }
.badge { display:inline-flex; align-items:center; width:fit-content; max-width:100%; min-height:26px; padding:5px 11px; background:var(--candy-pink); color:var(--accent-dark); border-radius:var(--r-pill); font-size:12px; font-weight:700; line-height:1.3; overflow-wrap:anywhere }
.badge-best { background:var(--text); color:var(--panel) }
.badge-success { background:var(--candy-mint); color:var(--text) }
.table-scroll { width:100%; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--r-window); background:var(--panel); box-shadow:var(--elev-sky) }
.data-table,.route-table { width:100%; min-width:640px; text-align:left; color:var(--text-2) }
.data-table caption,.route-table caption { text-align:left; padding:20px; font-weight:750; color:var(--text) }
.table-scroll th,.table-scroll td { padding:16px 20px; border-bottom:1px solid var(--border); word-break:keep-all }
.table-scroll th { background:var(--panel-2); color:var(--text); white-space:nowrap; font-size:14px; font-weight:700 }
.table-scroll td:first-child { color:var(--text); font-weight:600 }
.route-group th { background:var(--candy-sky); color:var(--text) }
.prose > .data-table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; min-width:0 }
.prose > .data-table th,.prose > .data-table td { padding:14px; border-bottom:1px solid var(--border); word-break:keep-all }
.prose > .data-table th { white-space:nowrap; color:var(--text) }
.platform-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px }
.platform-card { min-width:0; display:flex; flex-direction:column; align-items:center; gap:16px; padding:28px 16px; border-radius:var(--r-card); background:var(--panel); box-shadow:var(--elev-sky); text-align:center }
.platform-card > svg { width:36px; height:36px; color:var(--text) }
.platform-card h3 { font-size:18px }
.platform-card .btn { font-size:13px; padding-inline:14px }
.article-card { display:flex; flex-direction:column; min-width:0; padding:28px; border-radius:var(--r-card); background:var(--panel); box-shadow:var(--elev-sky) }
.article-meta { display:flex; gap:12px; flex-wrap:wrap; align-items:center; font-size:13px; color:var(--muted); margin-bottom:18px }
.article-card h3 { font-size:22px; margin-bottom:16px }
.article-card h3 a { text-decoration:none }
.article-card > p { color:var(--muted); margin-bottom:24px }
.article-card > a { margin-top:auto; min-height:32px }
.callout { margin:24px 0; padding:24px 28px; border-left:4px solid var(--accent); border-radius:var(--r-window); background:var(--candy-pink-2); box-shadow:var(--elev-pink); color:var(--text-2) }
.promo-block { display:flex; align-items:center; justify-content:space-between; gap:28px; padding:32px; margin-block:40px; border-radius:var(--r-card); background:var(--candy-sky); box-shadow:var(--elev-sky) }
.promo-copy { min-width:0 }
.promo-copy h2 { font-size:26px; margin:0 0 12px }
.promo-copy p { color:var(--text-2) }
.promo-block .btn,.btn-secondary { flex-shrink:0; white-space:nowrap }
.cta-band { background:var(--text); color:var(--panel); border-radius:var(--r-card); padding:48px 32px; text-align:center; box-shadow:var(--elev-pink) }
.cta-band p { color:var(--w-72); margin-top:16px }
.float-cta { position:fixed; z-index:35; right:24px; bottom:calc(20px + env(safe-area-inset-bottom,0px)); display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:48px; padding:12px 22px; max-width:calc(100% - 32px); border-radius:var(--r-pill); background:var(--text); color:var(--panel); box-shadow:0 12px 32px -10px var(--ink-40),var(--elev-pink); text-decoration:none; font-size:14px; font-weight:650 }
.float-cta svg { width:18px; height:18px }
body:has(.float-cta)::after { content:""; display:block; height:calc(88px + env(safe-area-inset-bottom,0px)) }
.ticker { overflow:hidden; max-width:100%; width:100%; padding-block:20px; background:var(--panel-2) }
.ticker-track { display:flex; width:max-content; gap:0 }
.ticker-group { display:flex; align-items:center; gap:32px; padding-inline:16px; flex-shrink:0 }
.ticker-item { display:inline-flex; align-items:center; gap:10px; white-space:nowrap; font-weight:650; color:var(--text-2) }
.token-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px }
.token { min-width:0; border-radius:var(--r-window); background:var(--panel); box-shadow:var(--elev-sky); overflow:hidden }
.token code { display:block; padding:12px; font-size:12px }
.swatch { height:64px; background:var(--bg) }
.sw-panel { background:var(--panel) }
.sw-panel-2 { background:var(--panel-2) }
.sw-side { background:var(--side) }
.sw-border { background:var(--border) }
.sw-accent { background:var(--accent) }
.sw-accent-2 { background:var(--accent-2) }
.sw-accent-dark { background:var(--accent-dark) }
.sw-text { background:var(--text) }
.sw-text-2 { background:var(--text-2) }
.sw-muted { background:var(--muted) }
.sw-muted-2 { background:var(--muted-2) }
.sw-success { background:var(--success) }
.sw-warn { background:var(--warn) }
.sw-error { background:var(--error) }
.sw-sky { background:var(--sky) }
.sw-sky-mid { background:var(--sky-mid) }
.sw-wall { background:linear-gradient(90deg,var(--wall-1),var(--wall-2),var(--wall-3)) }
.sw-alu { background:linear-gradient(90deg,var(--alu-1),var(--alu-2),var(--alu-3)) }
.sw-bezel { background:linear-gradient(90deg,var(--bezel),var(--bezel-edge)) }
.sw-candy-sky { background:linear-gradient(90deg,var(--candy-sky),var(--candy-sky-2)) }
.sw-candy-mint { background:linear-gradient(90deg,var(--candy-mint),var(--candy-mint-2)) }
.sw-candy-pink { background:linear-gradient(90deg,var(--candy-pink),var(--candy-pink-2)) }
.sw-candy-apricot { background:linear-gradient(90deg,var(--candy-apricot),var(--candy-apricot-2)) }
.sw-candy-lilac { background:linear-gradient(90deg,var(--candy-lilac),var(--candy-lilac-2)) }
.sw-candy-navy { background:linear-gradient(90deg,var(--candy-navy),var(--candy-navy-2)) }
.sw-lights { background:linear-gradient(90deg,var(--tl-red) 0% 33%,var(--tl-yellow) 33% 66%,var(--tl-green) 66%) }
.sw-flags { background:linear-gradient(90deg,var(--flag-white),var(--flag-jp),var(--flag-us-red),var(--flag-us-blue),var(--flag-hk),var(--flag-sg),var(--flag-nl-red),var(--flag-nl-blue),var(--flag-uk-blue),var(--flag-uk-red)) }
.sw-white-alpha { background:linear-gradient(90deg,var(--w-100),var(--w-90),var(--w-72),var(--w-60),var(--w-40),var(--w-14),var(--w-0)),var(--sky) }
.sw-sky-alpha { background:linear-gradient(90deg,var(--sky-a40),var(--sky-a0)) }
.sw-shadow-sky { background:linear-gradient(90deg,var(--shadow-sky-10),var(--shadow-sky-12),var(--shadow-sky-22)) }
.sw-shadow-pink { background:linear-gradient(90deg,var(--shadow-pink-8),var(--shadow-pink-18)) }
.sw-ink-alpha { background:linear-gradient(90deg,var(--ink-40),var(--ink-12),var(--ink-06)) }
.sample-stack { display:grid; gap:24px }
.sample-row { display:flex; align-items:center; gap:16px; flex-wrap:wrap }
.sample-display { font:900 64px/1.1 var(--font-display); letter-spacing:-.02em }
.sample-body { font-size:16px; max-width:800px }
.sample-title { font-size:32px; font-weight:800 }
@media (max-width:1100px) {
  .float-card { display:none }
  .platform-grid { grid-template-columns:repeat(3,minmax(0,1fr)) }
}
@media (max-width:768px) {
  .hero { padding:20px var(--gutter) 0 }
  .hero-title { font-size:clamp(28px,6vw,40px) }
  .lede { font-size:18px }
  .notice { font-size:12px; gap:7px }
  .facts { gap:6px }
  .fact { font-size:12px; padding-inline:9px }
  .marks-list { gap:8px 12px }
  .mark { font-size:11px }
  .device { width:100%; margin-top:24px; margin-bottom:88px }
  .lid { padding:5px; border-radius:var(--r-window) }
  .bezel { padding:6px; border-radius:var(--r-tile) }
  .screen { height:auto; border-radius:var(--r-small) }
  .notch { width:16%; margin-left:-8%; height:9px }
  .menubar { height:16px; font-size:7px; padding-inline:6px }
  .menubar-left,.menubar-right { gap:6px }
  .win { position:relative; top:auto; width:84%; left:auto; margin:8% auto 5%; transform:none }
  .win-bar { height:24px; grid-template-columns:24% 1fr auto; padding-inline:8px; font-size:8px }
  .lights { gap:4px }
  .lights i { width:6px; height:6px }
  .win-title { gap:3px }
  .win-title-mark { width:12px; height:12px }
  .win-search { height:16px; font-size:7px; padding-inline:6px }
  .win-body { height:auto; grid-template-columns:24% 1fr }
  .win-side { padding:6px 4px }
  .side-label { font-size:6px; margin-left:3px; margin-bottom:3px }
  .side-list li { height:19px; padding:0 4px; font-size:7px; gap:3px }
  .side-list svg { width:8px; height:8px }
  .win-main { padding:7px }
  .cur { height:42px; padding-inline:6px; gap:5px }
  .cur .icon-box { width:25px; height:25px }
  .cur-k { font-size:6px; line-height:9px }
  .cur-v { font-size:8px; line-height:12px }
  .cur-state { font-size:7px; gap:4px }
  .toggle { width:24px; height:14px }
  .toggle::after { width:10px; height:10px }
  .sec-head { margin:5px 0; line-height:10px }
  .sec-head b { font-size:8px }
  .sec-head span { font-size:6px }
  .tiles { grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px }
  .tile { height:auto; min-height:70px; gap:6px; padding:5px; border-radius:var(--r-small) }
  .tile-bottom { flex-direction:column; align-items:flex-start; gap:3px }
  .tile-top { gap:4px }
  .tile-flag { width:17px; height:17px; border-radius:var(--r-flag) }
  .flag--tile svg { width:13px; height:9px }
  .tile-name { font-size:8px; line-height:10px }
  .tile-en { font-size:6px; line-height:8px }
  .tile .tag { font-size:6px; min-height:12px; padding-inline:4px; overflow-wrap:normal; flex-shrink:0 }
  .go { height:12px; padding-inline:5px; font-size:6px }
  .win-status { height:18px; padding-inline:7px; font-size:7px }
  .win-sticker { right:0; top:-10px; height:22px; padding-inline:8px; font-size:8px }
  .win-sticker svg { width:10px; height:10px }
  .deck { width:calc(100% + 16px); margin-left:-8px; height:11px }
  .deck::before { width:18%; margin-left:-9%; height:4px }
  .ground { width:100%; height:90px }
  .plan-grid { grid-template-columns:minmax(0,1fr) }
  .platform-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .promo-block { flex-direction:column; align-items:flex-start }
  .token-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .feature-card { flex-basis:calc(100% - 8px); padding:24px }
  .feature-toolbar { gap:8px }
  .shelf-arrow { width:36px; height:36px }
  .sample-display { font-size:40px }
}
@media (max-width:640px) {
  .win-sticker,.float-card { transform:none }
  .stage::before,.stage::after { max-width:100% }
  .float-cta { right:16px; padding-inline:18px }
  .cta-band { padding:32px 24px }
}
@media (max-width:380px) {
  .hero-title { font-size:32px }
  .win-side { padding-inline:2px }
  .side-list li { font-size:6px; height:17px }
  .cur-state { gap:2px }
  .cur-state > span:first-child { display:none }
  .win-main { padding:5px }
  .tile { height:auto; padding:4px }
  .tile-en { display:none }
  .win-search { display:none }
}
@media (prefers-reduced-motion:reduce) {
  .ticker-track { width:100%; flex-wrap:wrap; transform:none !important }
  .ticker-group { flex-wrap:wrap; justify-content:center; gap:16px }
  .ticker-group[aria-hidden="true"] { display:none }
  [data-tilt] { transform:none !important }
}