/* 0msPayment landing (O-24 · design C "aurora dark/light"). Fonts (O-45): Latin and digits Inter, copyright 2020 The Inter Project Authors (/assets/OFL-Inter.txt?v=cc32d997e83f); Thai Sarabun, copyright 2018 The Sarabun Project Authors (/assets/OFL-Sarabun.txt?v=cc32d997e83f); both SIL Open Font License 1.1. Inter has no Thai, so Thai falls through to Sarabun; --mono starts with Sarabun so Thai and the baht sign in code and amounts are Sarabun too (its Thai-only range leaves their Latin and digits monospace); Sarabun is static, each file covers the weights nearest to it. */
@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-latin-wght-normal.woff2?v=cc32d997e83f) format("woff2-variations"),url(/assets/inter-latin-wght-normal.woff2?v=cc32d997e83f) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Sarabun;font-style:normal;font-display:swap;font-weight:100 449;src:url(/assets/sarabun-thai-400-normal.woff2?v=cc32d997e83f) format("woff2");unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:Sarabun;font-style:normal;font-display:swap;font-weight:450 549;src:url(/assets/sarabun-thai-500-normal.woff2?v=cc32d997e83f) format("woff2");unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:Sarabun;font-style:normal;font-display:swap;font-weight:550 679;src:url(/assets/sarabun-thai-600-normal.woff2?v=cc32d997e83f) format("woff2");unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:Sarabun;font-style:normal;font-display:swap;font-weight:680 900;src:url(/assets/sarabun-thai-700-normal.woff2?v=cc32d997e83f) format("woff2");unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@property --angle{syntax:"<angle>";inherits:false;initial-value:0deg}

/* ---------- tokens ---------- */
:root{
--ink:#060A17;--on-ink:#EAF0FF;--on-ink2:#AEB8D6;
--mint:#3EE6B5;--cyan:#4CC9F0;--violet:#8B7BFF;--amber:#F5B544;--rose:#FF7A93;
--bg:#F3F5FA;--surface:#FFFFFF;--surface2:#EAEEF6;--text:#0A1126;--muted:#48526F;--line:rgba(12,20,45,.12);
--mint-t:#067A5D;--violet-t:#5A3FD4;--amber-t:#8A5200;--rose-t:#B4234A;--cyan-t:#0A6C8C;
--hA:rgba(18,186,140,.62);--hB:rgba(12,20,45,.08);--hC:rgba(108,88,240,.55);
--glass:rgba(255,255,255,.72);--focus:#5A3FD4;--nav-bg:rgba(255,255,255,.94);
--shadow:0 1px 2px rgba(10,17,38,.05),0 14px 36px -16px rgba(10,17,38,.22);
--ic-moon:block;--ic-sun:none;
--font:Inter,Sarabun,"Noto Sans Thai","Leelawadee UI",Thonburi,system-ui,sans-serif;
--mono:Sarabun,ui-monospace,"SFMono-Regular","JetBrains Mono",Menlo,Consolas,"Liberation Mono",monospace;
--ease:cubic-bezier(.2,.75,.2,1);--gut:16px;--r:22px;
--fs-h1:clamp(2.35rem,1.5rem + 3.9vw,4.25rem);--fs-h2:clamp(1.75rem,1.3rem + 1.9vw,2.7rem);
--fs-h3:clamp(1.08rem,1rem + .3vw,1.25rem);--fs-lead:clamp(1.04rem,.98rem + .3vw,1.18rem);--fs-sm:.875rem;--fs-xs:.8rem;
color-scheme:light;interpolate-size:allow-keywords}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#070B18;--surface:#0E1529;--surface2:#0B1122;--text:#E7EDFA;--muted:#A3AECB;--line:rgba(255,255,255,.1);--mint-t:#3EE6B5;--violet-t:#B0A2FF;--amber-t:#F5B544;--rose-t:#FF8FA5;--cyan-t:#6FD6F7;--hA:rgba(62,230,181,.55);--hB:rgba(255,255,255,.06);--hC:rgba(139,123,255,.6);--glass:rgba(16,23,44,.66);--focus:#3EE6B5;--nav-bg:rgba(7,11,24,.94);--shadow:0 1px 2px rgba(0,0,0,.4),0 18px 40px -18px rgba(0,0,0,.75);--ic-moon:none;--ic-sun:block;color-scheme:dark}}
:root[data-theme=dark]{--bg:#070B18;--surface:#0E1529;--surface2:#0B1122;--text:#E7EDFA;--muted:#A3AECB;--line:rgba(255,255,255,.1);--mint-t:#3EE6B5;--violet-t:#B0A2FF;--amber-t:#F5B544;--rose-t:#FF8FA5;--cyan-t:#6FD6F7;--hA:rgba(62,230,181,.55);--hB:rgba(255,255,255,.06);--hC:rgba(139,123,255,.6);--glass:rgba(16,23,44,.66);--focus:#3EE6B5;--nav-bg:rgba(7,11,24,.94);--shadow:0 1px 2px rgba(0,0,0,.4),0 18px 40px -18px rgba(0,0,0,.75);--ic-moon:none;--ic-sun:block;color-scheme:dark}
.ink{--text:var(--on-ink);--muted:var(--on-ink2);--line:rgba(255,255,255,.12);--surface:rgba(255,255,255,.045);--surface2:rgba(255,255,255,.08);--mint-t:#3EE6B5;--violet-t:#B7AAFF;--amber-t:#F5B544;--cyan-t:#6FD6F7;--rose-t:#FF8FA5;--hA:rgba(62,230,181,.6);--hB:rgba(255,255,255,.07);--hC:rgba(139,123,255,.65);--focus:#3EE6B5;--nav-bg:rgba(6,10,23,.92);--shadow:0 24px 60px -28px rgba(0,0,0,.8);color:var(--text);color-scheme:dark}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--bg);color:var(--text);font:400 1rem/1.7 var(--font);-webkit-font-smoothing:antialiased;overflow-x:clip;min-width:320px}
h1,h2,h3,p,ul,ol,dl,dd,figure,pre{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
svg{display:block}
.tw{white-space:nowrap}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.i{width:1.25em;height:1.25em;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}
code,pre,.mono{font-family:var(--mono)}
b,strong{font-weight:650}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:8px}
.wrap{width:min(100% - 2*var(--gut),1200px);margin-inline:auto}
@media (min-width:768px){:root{--gut:28px}}
@media (min-width:1280px){:root{--gut:40px}}
.skip{position:fixed;left:12px;top:-60px;z-index:100;padding:10px 16px;border-radius:10px;background:var(--mint);color:#04221A;font-weight:650;text-decoration:none;transition:top .2s}
.skip:focus{top:12px}
.skip:focus-visible{outline-color:#EAF0FF}
html:not(.js) .needs-js{display:none!important}

/* ---------- buttons, chips ---------- */
.btn,.btn-ghost{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:0 1.35em;border-radius:999px;font-weight:650;text-decoration:none;white-space:nowrap;overflow:hidden;isolation:isolate;transition:transform .2s var(--ease),box-shadow .25s,background-color .25s,border-color .25s}
.btn{color:#04221A;background:linear-gradient(135deg,#6BF5CD,#3EE6B5 45%,#4CC9F0);box-shadow:0 10px 28px -10px rgba(62,230,181,.65),inset 0 1px 0 rgba(255,255,255,.55)}
.btn::after,.btn-ghost::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.6) 50%,transparent 70%);translate:-130% 0;transition:translate .7s var(--ease)}
.btn-ghost{color:var(--text);border:1px solid var(--line);background:var(--surface)}
.btn-ghost::after{background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.14) 50%,transparent 70%)}
.btn:hover::after,.btn-ghost:hover::after{translate:130% 0}
.btn:hover{transform:translateY(-1px);box-shadow:0 16px 36px -12px rgba(62,230,181,.75),inset 0 1px 0 rgba(255,255,255,.55)}
.btn-ghost:hover{border-color:color-mix(in oklab,var(--mint) 55%,transparent)}
.btn.sm,.btn-ghost.sm{min-height:40px;padding:0 1em;font-size:.92rem}
.btn .i,.btn-ghost .i{width:1.1em;height:1.1em}
.chip{display:inline-flex;align-items:center;gap:.45em;padding:.38em .85em;border-radius:999px;font-size:var(--fs-sm);line-height:1.4;border:1px solid var(--line);background:var(--surface);color:var(--muted)}
.chip .i{width:1em;height:1em;color:var(--mint-t)}
.eyebrow{display:inline-flex;align-items:center;gap:.55em;font-size:var(--fs-xs);font-weight:650;letter-spacing:.02em;color:var(--mint-t)}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,var(--mint),var(--violet));box-shadow:0 0 10px color-mix(in oklab,var(--mint) 70%,transparent)}
.tag-sample{display:inline-flex;align-items:center;padding:.15em .6em;border-radius:6px;font-size:11.5px;font-weight:600;letter-spacing:.02em;color:#FFD89A;background:rgba(245,181,68,.12);border:1px solid rgba(245,181,68,.35);white-space:nowrap}
.link-cta{display:inline-flex;align-items:center;gap:.4em;font-weight:650;color:var(--violet-t);text-decoration:none;border-bottom:1px solid color-mix(in oklab,var(--violet-t) 40%,transparent);padding-bottom:2px}
.link-cta .i{transition:translate .25s var(--ease)}
.link-cta:hover .i{translate:4px 0}
.nb{display:inline-grid;place-items:center;width:1.4em;height:1.4em;border-radius:50%;font-size:.76em;font-weight:700;line-height:1;background:var(--mint-t);color:var(--surface);vertical-align:.12em;margin-inline:.1em .25em;font-style:normal}
.nb.two{background:var(--violet-t)}
.ink .nb{color:#04221A}.ink .nb.two{color:#140B3A}
.mini-btn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;border-radius:9px;font-size:.78rem;font-weight:600;color:var(--muted);border:1px solid var(--line);background:var(--surface);transition:color .2s,background-color .2s;white-space:nowrap}
.mini-btn:hover{color:var(--text)}
.mini-btn .i{width:14px;height:14px}
.mini-btn .pl{display:none}.mini-btn[data-state=done] .pl,.mini-btn[data-state=idle] .pl{display:block}.mini-btn[data-state=done] .pa,.mini-btn[data-state=idle] .pa{display:none}

/* ---------- nav ---------- */
.nav{position:absolute;inset:0 0 auto;z-index:50;color:var(--text);border-bottom:1px solid transparent;transition:background-color .3s,border-color .3s}
.js .nav{position:fixed}
.nav.scrolled,.nav.open{background:var(--nav-bg);border-color:var(--line);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px)}
.nav:not(.ink).scrolled{box-shadow:0 8px 24px -18px rgba(10,17,38,.35)}
.nav-in{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;height:64px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-size:1.1rem;font-weight:700;letter-spacing:-.01em;color:var(--text)}
.mark{width:28px;height:28px;flex:none}
.links{display:none;justify-self:center;position:relative}
.links ul{display:flex;gap:2px}
.links a{display:block;padding:8px 12px;border-radius:999px;text-decoration:none;font-size:.92rem;color:var(--muted);transition:color .2s,background-color .2s}
.links a:hover{color:var(--text);background:color-mix(in oklab,var(--text) 6%,transparent)}
.links a[aria-current=true]{color:var(--text)}
.spy{position:absolute;left:0;bottom:-3px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--mint-t);box-shadow:0 0 10px var(--mint);opacity:0;transition:transform .45s var(--ease),opacity .3s}
.nav-act{display:flex;align-items:center;gap:6px;justify-self:end}
.icon-btn{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;color:var(--text);border:1px solid var(--line);background:var(--surface);transition:background-color .2s,border-color .2s}
.icon-btn:hover{border-color:color-mix(in oklab,var(--mint) 55%,transparent)}
.icon-btn .moon{display:var(--ic-moon)}.icon-btn .sun{display:var(--ic-sun)}
.lang{display:inline-flex;align-items:center;height:40px;padding:3px;border-radius:12px;border:1px solid var(--line);background:var(--surface);font-size:.8rem;font-weight:650;color:var(--muted);text-decoration:none}
.lang>span{display:grid;place-items:center;min-width:32px;height:32px;border-radius:9px}
.lang .on{background:color-mix(in oklab,var(--mint) 22%,transparent);color:var(--text)}
.lang:hover{border-color:color-mix(in oklab,var(--mint) 55%,transparent)}
.nav .login,.nav .cta-top{display:none}
.burger .x{display:none}.nav.open .burger .x{display:block}.nav.open .burger .m{display:none}
.mnav{border-top:1px solid var(--line);padding:8px 0 20px;max-height:calc(100vh - 64px);max-height:calc(100dvh - 64px);overflow-y:auto;overscroll-behavior:contain}
.mnav a{display:flex;align-items:center;min-height:48px;padding:0 4px;text-decoration:none;color:var(--text);font-weight:500;border-bottom:1px solid var(--line)}
.mnav-cta{display:flex;gap:10px;margin-top:16px}
.mnav .mnav-cta a{border:0;flex:1;justify-content:center;font-weight:650}
.mnav .mnav-cta .btn-ghost{border:1px solid var(--line)}
@media (min-width:640px){.nav .cta-top{display:inline-flex}}
@media (min-width:1080px){.links{display:block}.nav .login{display:inline-flex}.burger{display:none}.mnav{display:none!important}}
@media (max-width:379px){.nav-act{gap:4px}.nav .theme{display:none}}

/* ---------- reveal ---------- */
@media screen and (prefers-reduced-motion:no-preference){
.js-reveal .rv{opacity:0;translate:0 16px;transition:opacity .4s var(--ease) calc(var(--i,0)*60ms),translate .4s var(--ease) calc(var(--i,0)*60ms)}
.js-reveal .rv.in{opacity:1;translate:none}
.hero h1 .l1,.hero h1 .l2{animation:rise .95s var(--ease) both}
.hero h1 .l2{animation-delay:.14s}
.hero .eyebrow,.hero .chip{animation:up .45s var(--ease) both}
.hero .chip:nth-child(1){animation-delay:.3s}.hero .chip:nth-child(2){animation-delay:.34s}.hero .chip:nth-child(3){animation-delay:.38s}.hero .chip:nth-child(4){animation-delay:.42s}
}
@keyframes rise{from{transform:translateY(.42em)}}
@keyframes up{from{opacity:0;transform:translateY(8px)}}
@keyframes spin{to{--angle:360deg}}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;isolation:isolate;background:var(--ink);padding:104px 0 112px}
.aurora{position:absolute;inset:0;z-index:-3;pointer-events:none;overflow:hidden}
.aurora i{position:absolute;border-radius:50%;will-change:transform;animation-iteration-count:3;animation-direction:alternate;animation-timing-function:ease-in-out}
.aurora .b1{width:78vmax;height:78vmax;left:-26vmax;top:-44vmax;background:radial-gradient(closest-side,rgba(62,230,181,.42),rgba(62,230,181,.12) 55%,transparent);animation-name:au1;animation-duration:24s}
.aurora .b2{width:70vmax;height:70vmax;right:-30vmax;top:-26vmax;background:radial-gradient(closest-side,rgba(124,92,255,.5),rgba(124,92,255,.14) 55%,transparent);animation-name:au2;animation-duration:28s}
.aurora .b3{width:56vmax;height:56vmax;left:18%;bottom:-40vmax;background:radial-gradient(closest-side,rgba(76,201,240,.36),transparent);animation-name:au3;animation-duration:20s}
@keyframes au1{to{transform:translate(12vmax,10vmax) scale(1.12)}}
@keyframes au2{to{transform:translate(-10vmax,12vmax) scale(.9) rotate(20deg)}}
@keyframes au3{to{transform:translate(-8vmax,-10vmax) scale(1.15)}}
.hero.off .aurora i,.hero.paused .aurora i,.hero.off .ring,.hero.paused .ring{animation-play-state:paused}
.grid-bg{position:absolute;inset:0;z-index:-2;background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 75% 60% at 50% 35%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 75% 60% at 50% 35%,#000 20%,transparent 75%)}
.hero-in{display:grid;gap:44px;align-items:center}
@media (min-width:1024px){.hero{padding:136px 0 150px}.hero-in{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px}}
.hero h1{font-size:var(--fs-h1);line-height:1.16;font-weight:650;letter-spacing:-.012em;margin:.4em 0 .45em}
.hero h1 .l1,.hero h1 .l2{display:block}
/* O-45: Inter sets wider than the old face; .96 keeps the English h1 breaking where it did at every width (320-1920) */
:lang(en) .hero h1{letter-spacing:-.025em;line-height:1.08;font-size:calc(var(--fs-h1)*.96)}
.grad{background:linear-gradient(100deg,#6BF5CD 0%,#4CC9F0 55%,#B7AAFF 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
/* O-101: a gradient text paints only inside its background area, which for an inline box is the font's content area — the tall
   tail of ใ (and ไ โ ฤ, stacked tone marks above, ญ ฐ ฎ ฏ below) reaches past it and was cut. Vertical padding on an inline box
   widens the painted area without moving the line (inline padding takes no line space); clone keeps it on every line piece. */
.grad{padding-block:.35em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.sub{font-size:var(--fs-lead);color:var(--muted);max-width:34em}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.hero-vis{position:relative}

/* hero diagram */
.console{position:relative;border-radius:24px;padding:12px;background:linear-gradient(180deg,rgba(22,31,62,.74),rgba(9,14,32,.8)) padding-box,conic-gradient(from var(--angle),rgba(62,230,181,.85),rgba(76,201,240,.25),rgba(139,123,255,.85),rgba(76,201,240,.25),rgba(62,230,181,.85)) border-box;border:1px solid transparent;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 50px 100px -40px rgba(0,0,0,.85),0 0 80px -30px rgba(62,230,181,.35)}
.hero-vis{isolation:isolate}
.hero-vis::before{content:"";position:absolute;inset:14px -14px -14px 14px;z-index:-1;border-radius:26px;border:1px solid rgba(139,123,255,.25);background:linear-gradient(135deg,rgba(139,123,255,.08),rgba(62,230,181,.04));transform:rotate(2.5deg)}
@media (max-width:767px){.hero-vis::before{display:none}}
@media (max-width:1023px){.console{-webkit-backdrop-filter:none;backdrop-filter:none}}
@media (hover:hover) and (pointer:fine){.console:hover{animation:spin 6s linear infinite}}
.con-head{display:flex;align-items:center;gap:10px;padding:4px 4px 10px;border-bottom:1px solid rgba(255,255,255,.07)}
.dots{display:inline-flex;gap:6px;flex:none}
.dots i{width:10px;height:10px;border-radius:50%;background:#FF6B6B}.dots i:nth-child(2){background:#F5B544}.dots i:nth-child(3){background:#3EE6B5}
.con-title{font-weight:650;font-size:.85rem;color:var(--on-ink);display:inline-flex;align-items:center;gap:6px;margin-right:auto;min-width:0;overflow:hidden}
.con-title .mark{width:18px;height:18px}
.stage{position:relative;aspect-ratio:480/280;container-type:inline-size;margin-top:10px;border-radius:16px;background:radial-gradient(90% 80% at 50% 40%,rgba(62,230,181,.08),transparent 70%),rgba(4,7,18,.5);border:1px solid rgba(255,255,255,.05);overflow:hidden}
.stage>svg{position:absolute;inset:0;width:100%;height:100%}
.wire{fill:none;stroke-width:2.6;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:0;transition:opacity .4s}
.track{fill:none;stroke:rgba(255,255,255,.13);stroke-width:1.6;stroke-dasharray:3 6}
.ring{fill:none;stroke:#3EE6B5;stroke-width:1.4;opacity:0;transform-box:fill-box;transform-origin:center}
.console.run .ring{animation:pulse 3.2s ease-out 3}.console.run .ring.r2{animation-delay:1.6s}
@keyframes pulse{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(2.1)}}
.core-disc{transition:filter .3s}.core.hit .core-disc{filter:drop-shadow(0 0 10px rgba(62,230,181,.9))}
.coin{transition:opacity .2s}
.node{position:absolute;left:var(--x);top:var(--y);translate:-50% -50%;display:flex;flex-direction:column;align-items:center;gap:.35em;width:21cqi;padding:.7em .4em .6em;border-radius:14px;font-size:clamp(11px,2.7cqi,14px);font-weight:600;line-height:1.2;text-align:center;color:var(--on-ink);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);transition:box-shadow .35s,border-color .35s,opacity .35s}
.node .av{display:grid;place-items:center;width:2.5em;height:2.5em;border-radius:50%;background:rgba(62,230,181,.14);color:#6BF5CD}
.node.wd .av{background:rgba(139,123,255,.18);color:#C3B8FF}
.node .av .i{width:1.35em;height:1.35em}
.node.qr{flex-direction:row;width:auto;gap:.5em;padding:.5em .7em;color:var(--on-ink2)}
.node.qr .i{width:1.4em;height:1.4em;color:#9FE8FF}
.node.hit{border-color:rgba(62,230,181,.7);box-shadow:0 0 0 4px rgba(62,230,181,.12),0 0 30px -4px rgba(62,230,181,.6)}
.node.wd.hit{border-color:rgba(139,123,255,.8);box-shadow:0 0 0 4px rgba(139,123,255,.14),0 0 30px -4px rgba(139,123,255,.6)}
.node.qr.hit{border-color:rgba(76,201,240,.8);box-shadow:0 0 0 4px rgba(76,201,240,.14),0 0 30px -4px rgba(76,201,240,.6)}
.node.dim{opacity:.45}
.n-dep{--x:14%;--y:39%}.n-wd{--x:86%;--y:39%}.n-qr{--x:50%;--y:86%}
.pop{position:absolute;left:var(--x);top:var(--y);translate:-50% -50%;display:inline-flex;align-items:center;gap:.35em;white-space:nowrap;padding:.38em .75em;border-radius:999px;font-size:clamp(11px,2.55cqi,13px);font-weight:650;line-height:1.2;color:#A6F7DE;background:rgba(10,40,34,.88);border:1px solid rgba(62,230,181,.5);box-shadow:0 8px 24px -8px rgba(62,230,181,.5);transition:scale .4s cubic-bezier(.3,1.6,.5,1),opacity .25s}
.pop .i{width:1.1em;height:1.1em;stroke-width:2.4}
.pop.blue{color:#BDEBFF;background:rgba(9,32,48,.9);border-color:rgba(76,201,240,.55);box-shadow:0 8px 24px -8px rgba(76,201,240,.5)}
.pop.vio{color:#D6CFFF;background:rgba(26,20,58,.9);border-color:rgba(139,123,255,.55);box-shadow:0 8px 24px -8px rgba(139,123,255,.5)}
.pop.off{opacity:0;scale:.6}
.p-match{--x:78%;--y:11%}.p-notify{--x:78%;--y:66%}.p-nomatch{--x:22%;--y:86%}

/* ---------- sheet (dark → light) ---------- */
.sheet{position:relative;z-index:1;margin-top:-44px;background:var(--bg);border-radius:32px 32px 0 0}
.sheet::before{content:"";position:absolute;left:12%;right:12%;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--mint),var(--violet),transparent);opacity:.9}
.sec{position:relative;padding:clamp(64px,7.5vw,104px) 0}
.sec-alt{background:linear-gradient(180deg,transparent,var(--surface2) 90px,var(--surface2) calc(100% - 90px),transparent)}
.sec-head{max-width:760px;margin-bottom:clamp(32px,4vw,52px)}
.sec-head.center{margin-inline:auto;text-align:center}
.sec h2,.island h2,.contact h2{font-size:var(--fs-h2);line-height:1.25;font-weight:650;letter-spacing:-.01em;text-wrap:balance;margin-top:.35em}
:lang(en) .sec h2,:lang(en) .island h2,:lang(en) .contact h2{letter-spacing:-.02em;line-height:1.15}
.lead{margin-top:14px;font-size:var(--fs-lead);color:var(--muted)}
h3{font-size:var(--fs-h3);line-height:1.35;font-weight:650}
p{text-wrap:pretty}

/* ---------- bento cards with gradient hairline ---------- */
.card{position:relative;padding:24px;border-radius:var(--r);background:linear-gradient(var(--surface),var(--surface)) padding-box,conic-gradient(from var(--angle),var(--hA),var(--hB) 22%,var(--hB) 28%,var(--hC) 50%,var(--hB) 72%,var(--hB) 78%,var(--hA)) border-box;border:1px solid transparent;box-shadow:var(--shadow);transition:box-shadow .35s,transform .3s var(--ease)}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(380px circle at var(--mx,50%) var(--my,0%),color-mix(in oklab,var(--mint) 16%,transparent),transparent 60%);opacity:0;transition:opacity .35s}
.card:nth-child(2n){--angle:120deg}.card:nth-child(3n){--angle:240deg}
@media (hover:hover) and (pointer:fine){.card:hover{animation:spin 5s linear infinite;box-shadow:var(--shadow),0 22px 50px -24px color-mix(in oklab,var(--mint) 60%,transparent)}.card:hover::after{opacity:1}}
.ico{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;margin-bottom:18px;color:var(--mint-t);background:linear-gradient(135deg,color-mix(in oklab,var(--mint) 20%,transparent),color-mix(in oklab,var(--violet) 16%,transparent));border:1px solid color-mix(in oklab,var(--mint) 25%,transparent)}
.ico svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.card h3{margin-bottom:6px}
.card p{color:var(--muted)}
.bento{display:grid;gap:16px}
.bento>.card{display:grid;gap:20px;align-content:space-between}
.deco{display:flex;justify-content:center;align-items:center}
@media (min-width:640px){.bento{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){.bento{grid-template-columns:repeat(12,1fr);gap:20px}.bento>.w7{grid-column:span 7}.bento>.w5{grid-column:span 5}}
@media (min-width:1280px){.bento>.card{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:20px}}
/* pillar micro animations (once) */
@media screen and (prefers-reduced-motion:no-preference){
.play .sw1{animation:sw1 .8s var(--ease) 2}.play .sw2{animation:sw2 .8s var(--ease) 2}
.js-anim [data-play]:not(.play) .brn{stroke-dashoffset:1}
.play .scr{animation:blink 1.2s ease 2}
.js-anim [data-play]:not(.play) .cd{opacity:0}
.play .cd{animation:type .2s steps(1) both}.play .cd2{animation-delay:.25s}.play .cd3{animation-delay:.5s}
}
.brn{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset .9s var(--ease) .2s}
.scr{fill:currentColor;opacity:.12;stroke:none}
@keyframes sw1{50%{transform:translateX(3px)}}@keyframes sw2{50%{transform:translateX(-3px)}}
@keyframes blink{30%{opacity:.45}60%{opacity:.08}}
@keyframes type{from{opacity:0}to{opacity:1}}
/* mini P2P */
.mini{position:relative;width:250px;height:96px}
.mini .pp{position:absolute;top:50%;translate:0 -50%;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:.78rem;font-weight:600;color:var(--muted)}
.mini .pp .av{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:color-mix(in oklab,var(--mint) 16%,transparent);color:var(--mint-t)}
.mini .pp.rt .av{background:color-mix(in oklab,var(--violet) 16%,transparent);color:var(--violet-t)}
.mini .pp.lf{left:0}.mini .pp.rt{right:0}
.mini>svg{position:absolute;inset:0;width:100%;height:100%}
.mini .path{fill:none;stroke:var(--line);stroke-width:2;stroke-dasharray:4 5}
.mini .cn{position:absolute;left:0;top:0;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#FFF6D6,#F5C451 55%,#C98A12);box-shadow:0 0 14px rgba(245,196,81,.7);offset-path:path("M48 40 C 94 -6, 156 -6, 202 40");offset-rotate:0deg;offset-distance:100%;opacity:0}
.play .mini .cn{animation:coin 1.5s var(--ease) 3 both}
@keyframes coin{0%{offset-distance:0%;opacity:0}12%{opacity:1}88%{opacity:1}100%{offset-distance:100%;opacity:0}}
.mini .ok{position:absolute;left:50%;bottom:0;translate:-50% 0;display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:999px;font-size:.76rem;font-weight:650;color:var(--mint-t);background:color-mix(in oklab,var(--mint) 14%,transparent);white-space:nowrap}
.mini .ok .i{width:14px;height:14px;stroke-width:2.4}
/* mini fallback + mini back office */
.mini-svg{width:220px;height:auto;overflow:visible}
.mini-svg .ui{fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.mini-svg .tile-n{fill:var(--surface2);stroke:var(--line)}
.mini-svg .tile-ok{fill:color-mix(in oklab,var(--mint) 16%,var(--surface));stroke:color-mix(in oklab,var(--mint-t) 60%,transparent)}
.mini-svg .ghost{fill:none;stroke:var(--muted);stroke-width:1.4;stroke-dasharray:3 4;opacity:.7}
.mini-svg .dashl{fill:none;stroke:var(--muted);stroke-width:1.6;stroke-dasharray:3 5;opacity:.55}
.mini-svg .go{fill:none;stroke:var(--mint-t);stroke-width:2.4;stroke-linecap:round}
.mini-svg .xb{fill:var(--rose-t)}.mini-svg .xm{stroke:var(--surface);stroke-width:1.8;stroke-linecap:round}
.mini-svg .okb{fill:var(--mint-t)}.mini-svg .okm{fill:none;stroke:var(--surface);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mini-svg .c-mint{color:var(--mint-t)}.mini-svg .c-mut{color:var(--muted)}.mini-svg .c-cy{color:var(--cyan-t)}
.mini-svg .win{fill:var(--surface);stroke:var(--line)}
.mini-svg .side{fill:var(--surface2)}
.mini-svg .bar{fill:var(--line)}.mini-svg .bar.on{fill:var(--mint-t)}
.mini-svg .kpi{fill:none;stroke:var(--line)}
.mini-svg .u1{fill:var(--mint)}.mini-svg .u2{fill:var(--violet)}.mini-svg .u3{fill:var(--cyan)}
.mini-svg .area{fill:color-mix(in oklab,var(--mint) 22%,transparent)}
.mini-svg .l1{fill:none;stroke:var(--mint-t);stroke-width:1.8}.mini-svg .l2{fill:none;stroke:var(--violet-t);stroke-width:1.6}
.mini-svg .dt{fill:var(--muted);opacity:.5}
/* mini callback */
.cb-wrap{display:flex;flex-direction:column;align-items:center}
.mini-cb{display:flex;align-items:center;justify-content:center;gap:10px}
.mini-cb .box{display:grid;place-items:center;width:64px;height:64px;border-radius:16px;background:var(--surface2);border:1px solid var(--line);color:var(--text)}
.mini-cb .box .i{width:28px;height:28px}
.mini-cb .box.z{background:linear-gradient(135deg,color-mix(in oklab,var(--mint) 22%,transparent),color-mix(in oklab,var(--violet) 18%,transparent))}
.mini-cb .box .mark{width:30px;height:30px}
.mini-cb svg.ar{width:84px;height:48px;overflow:visible}
.mini-cb .ar path{fill:none;stroke-width:2;stroke-linecap:round}
.mini-cb .ar .a1{stroke:var(--violet-t)}.mini-cb .ar .a2{stroke:var(--mint-t)}
.sw-mini{display:inline-flex;margin-top:14px;padding:3px;border-radius:999px;background:var(--surface2);border:1px solid var(--line);font-size:.76rem;font-weight:650;color:var(--muted)}
.sw-mini>span{padding:3px 12px;border-radius:999px}
.sw-mini .on{background:var(--surface);color:var(--violet-t);box-shadow:var(--shadow)}

/* tooltip */
.tip{font-weight:650;color:var(--violet-t);border-bottom:1.5px dotted currentColor;cursor:help;line-height:1.3}
.tt{position:fixed;z-index:90;left:0;top:0;max-width:min(300px,calc(100vw - 24px));padding:10px 13px;border-radius:12px;font-size:.86rem;line-height:1.55;color:#E9EEFB;background:#0B1124;border:1px solid rgba(139,123,255,.4);box-shadow:0 20px 40px -16px rgba(0,0,0,.6);opacity:0;translate:0 4px;transition:opacity .18s,translate .18s;pointer-events:none}
.tt.show{opacity:1;translate:0 0;pointer-events:auto}

/* ---------- flow ---------- */
.seg{position:relative;display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:4px;border-radius:999px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.seg [role=tab]{position:relative;z-index:1;min-height:44px;padding:0 24px;border-radius:999px;font-weight:650;color:var(--muted);text-align:center;transition:color .25s}
.seg [role=tab][aria-selected=true]{color:var(--text)}
.seg .ind{position:absolute;left:0;top:4px;bottom:4px;border-radius:999px;background:linear-gradient(135deg,color-mix(in oklab,var(--mint) 18%,var(--surface)),color-mix(in oklab,var(--cyan) 12%,var(--surface)));border:1px solid color-mix(in oklab,var(--mint) 40%,transparent);transition:transform .45s var(--ease),width .45s var(--ease)}
.seg .ind::after{content:"";position:absolute;left:22%;right:22%;bottom:-1px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--mint),var(--cyan))}
.tabs-center{display:flex;justify-content:center}
.flow{position:relative;margin-top:44px}
.steps{position:relative;display:grid;gap:30px}
.track-l{position:absolute;left:27px;top:28px;bottom:28px;width:2px;background:repeating-linear-gradient(180deg,var(--line) 0 5px,transparent 5px 10px)}
.track-l i{position:absolute;inset:0;background:linear-gradient(180deg,var(--mint),var(--cyan),var(--violet));transform-origin:0 0;transition:transform 1.3s var(--ease)}
.step{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);gap:18px;align-items:start;align-content:start}
.flip{position:relative;width:56px;height:56px;perspective:600px}
.faces{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .7s var(--ease)}
.face{position:absolute;inset:0;display:grid;place-items:center;border-radius:50%;-webkit-backface-visibility:hidden;backface-visibility:hidden;background:var(--surface);color:var(--mint-t);border:1px solid color-mix(in oklab,var(--mint) 60%,transparent);box-shadow:0 0 0 5px color-mix(in oklab,var(--mint) 12%,transparent),var(--shadow);transition:box-shadow .5s,border-color .5s}
.face .i{width:24px;height:24px}
.face.b{transform:rotateY(180deg);color:var(--violet-t);border-color:color-mix(in oklab,var(--violet) 55%,transparent);box-shadow:0 0 0 5px color-mix(in oklab,var(--violet) 12%,transparent),var(--shadow)}
.flow[data-mode=wd] .faces{transform:rotateY(180deg)}
.step .num{position:absolute;right:-5px;top:-5px;z-index:2;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;font-size:.74rem;font-weight:700;color:#04221A;background:linear-gradient(135deg,#6BF5CD,#4CC9F0)}
.txt{display:grid}
.v h3{margin-bottom:4px}.v p{color:var(--muted)}
.js .v{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
.js .flow[data-mode=dep] .v.d,.js .flow[data-mode=wd] .v.w{opacity:1;visibility:visible;transition:opacity .4s .12s,visibility 0s}
html:not(.js) .v.w{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}
.branch{display:inline-flex;align-items:center;gap:8px;margin-top:10px;font-size:.82rem;font-weight:600;color:var(--cyan-t);transition:opacity .5s 1.1s,translate .5s 1.1s}
.branch svg{width:30px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-dasharray:3 3;overflow:visible}
.branch>span{padding:3px 10px;border-radius:999px;border:1px dashed color-mix(in oklab,var(--cyan-t) 55%,transparent);background:color-mix(in oklab,var(--cyan) 9%,transparent)}
@media (min-width:900px){
.steps{grid-template-columns:repeat(3,1fr);gap:36px}
.track-l{left:calc(100%/6);right:calc(100%/6);top:27px;bottom:auto;width:auto;height:2px;background:repeating-linear-gradient(90deg,var(--line) 0 5px,transparent 5px 10px)}
.track-l i{background:linear-gradient(90deg,var(--mint),var(--cyan),var(--violet))}
.step{grid-template-columns:1fr;justify-items:center;text-align:center;gap:20px}
.branch{justify-content:center}
}
@media screen and (prefers-reduced-motion:no-preference){
.js-anim .flow:not(.play) .track-l i{transform:scale(1,0)}
.js-anim .flow:not(.play) .face{border-color:var(--line);box-shadow:var(--shadow)}
.js-anim .flow:not(.play) .branch{opacity:0;translate:-6px 0}
}
@media (min-width:900px) and (prefers-reduced-motion:no-preference){.js-anim .flow:not(.play) .track-l i{transform:scale(0,1)}}
.flow.play .step:nth-child(2) .face{transition-delay:.52s}.flow.play .step:nth-child(3) .face{transition-delay:.94s}

/* ---------- matching ---------- */
.versus{position:relative;isolation:isolate;display:grid;grid-template-columns:1fr;gap:12px;max-width:1000px;margin-inline:auto}
.versus::before{content:"";position:absolute;inset:-40px -10px;z-index:-1;background:radial-gradient(40% 60% at 20% 40%,color-mix(in oklab,var(--mint) 22%,transparent),transparent 70%),radial-gradient(40% 60% at 80% 60%,color-mix(in oklab,var(--violet) 22%,transparent),transparent 70%);filter:blur(10px)}
@media (min-width:360px){.versus{grid-template-columns:1fr 1fr}}
@media (min-width:768px){.versus{gap:24px}}
.pool{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:10px;padding:10px 10px 16px;border-radius:24px;background:linear-gradient(var(--glass),var(--glass)) padding-box,conic-gradient(from var(--angle),var(--hA),var(--hB) 25%,var(--hC) 50%,var(--hB) 75%,var(--hA)) border-box;border:1px solid transparent;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:var(--shadow);transition:box-shadow .4s}
.pool.b{--angle:180deg}
@media (min-width:768px){.pool{padding:14px 14px 24px;row-gap:14px}}
.pool>*:not(.pool-dia){padding-inline:6px}
@media (min-width:768px){.pool>*:not(.pool-dia){padding-inline:12px}}
.pool.hot{box-shadow:var(--shadow),0 0 0 1px color-mix(in oklab,var(--mint) 60%,transparent),0 24px 60px -24px color-mix(in oklab,var(--mint) 70%,transparent)}
.pool.b.hot{box-shadow:var(--shadow),0 0 0 1px color-mix(in oklab,var(--violet) 60%,transparent),0 24px 60px -24px color-mix(in oklab,var(--violet) 70%,transparent)}
.pool-dia{position:relative;display:block;width:100%;aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:radial-gradient(120% 90% at 30% 0%,#17214A,#070B18 70%);border:1px solid rgba(255,255,255,.06)}
.js .pool-dia{cursor:pointer}
.pool-dia svg{width:100%;height:100%}
.pool-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pool h3{font-size:clamp(1.05rem,.95rem + .6vw,1.4rem)}
.rp{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;color:var(--muted);background:var(--surface);border:1px solid var(--line);transition:transform .4s var(--ease),color .2s}
.rp:hover{transform:rotate(-90deg);color:var(--text)}
.rp .i{width:15px;height:15px}
.pool .ln{color:var(--muted);font-size:clamp(.86rem,.8rem + .2vw,1rem)}
.pool .fit{font-size:clamp(.82rem,.78rem + .15vw,.92rem);color:var(--text);padding-top:10px;border-top:1px dashed var(--line);align-self:start}
.pool .fit b{color:color-mix(in oklab,var(--mint-t) 78%,var(--text))}.pool.b .fit b{color:color-mix(in oklab,var(--violet-t) 82%,var(--text))}
.poolring{fill:rgba(62,230,181,.05);stroke:url(#g-pool);stroke-width:1.6}
.site rect{fill:rgba(255,255,255,.04);stroke:rgba(255,255,255,.3);stroke-width:1.2}
.site path{stroke:rgba(255,255,255,.2);stroke-width:1}
.site circle{fill:rgba(255,255,255,.35)}
.site.you rect{stroke:#3EE6B5;fill:rgba(62,230,181,.09)}
.site.other{opacity:.72}
.pd{transition:filter .3s}.pd.dep{fill:#3EE6B5}.pd.wd{fill:#8B7BFF}
.pd.hit{filter:drop-shadow(0 0 5px #fff)}
.pdi{fill:none;stroke:#061a14;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.arc{fill:none;stroke:#E9EEFB;stroke-width:1.6;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:0}
.dash{fill:none;stroke:#9AA6C8;stroke-width:1.3;stroke-dasharray:3 4;transition:opacity .4s}
.nbd{transition:opacity .3s,transform .4s cubic-bezier(.3,1.6,.5,1);transform-box:fill-box;transform-origin:center}
.nbd circle{fill:#3EE6B5}.nbd text{fill:#04221A;font:700 10px/1 var(--font);text-anchor:middle}
.nbd.two circle{fill:#B3A6FF}.nbd.two text{fill:#140B3A}
.nbd.off{opacity:0;transform:scale(.4)}
.mcoin{fill:#F5C451;filter:drop-shadow(0 0 4px rgba(245,196,81,.9));transition:opacity .2s}
.under{display:grid;gap:14px;justify-items:center;text-align:center;max-width:820px;margin:28px auto 0}
.both{display:inline-flex;align-items:center;gap:10px;font-weight:600}
.both .i{color:var(--cyan-t)}
.strip{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;padding:12px 18px;border-radius:14px;background:linear-gradient(90deg,transparent,color-mix(in oklab,var(--mint) 10%,transparent),color-mix(in oklab,var(--violet) 10%,transparent),transparent);border-block:1px solid var(--line);font-weight:600;color:var(--text)}
.strip .i{color:var(--violet-t)}
.def{font-size:var(--fs-sm);color:var(--muted)}
.chips-row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}

/* ---------- channels ---------- */
.methods{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (min-width:1024px){.methods{grid-template-columns:repeat(4,1fr);gap:20px}}
.methods .card{padding:18px}
@media (min-width:768px){.methods .card{padding:24px}}
.methods .ico{margin-bottom:14px}
.methods p{font-size:var(--fs-sm)}
.net{display:inline-block;padding:1px 8px;margin:0 4px 4px 0;border-radius:6px;font:600 .74rem/1.6 var(--mono);color:var(--violet-t);background:color-mix(in oklab,var(--violet) 12%,transparent);border:1px solid color-mix(in oklab,var(--violet) 25%,transparent)}
.route-row{display:grid;gap:16px;margin-top:16px}
@media (min-width:1024px){.route-row{grid-template-columns:2fr 1fr;gap:20px}}
.route{display:grid;gap:22px}
.route p{color:var(--muted)}
.note{margin-top:8px;font-size:var(--fs-xs);color:var(--muted)}
.chain{display:flex;flex-direction:column;align-items:flex-start}
@media (min-width:480px){.chain{flex-direction:row;align-items:center;justify-content:center}}
@media (max-width:479px){.chain{align-items:center}.chain .beam{margin-left:0}}
.cc{position:relative;display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:14px;font-size:.86rem;font-weight:650;white-space:nowrap;background:var(--surface2);border:1px solid var(--line);transition:border-color .4s,box-shadow .4s}
.cc .i{width:18px;height:18px;color:var(--muted)}
.cc.qr{border-color:color-mix(in oklab,var(--mint) 60%,transparent);box-shadow:0 0 0 4px color-mix(in oklab,var(--mint) 12%,transparent);transition-delay:1.1s}
.cc.qr .i{color:var(--mint-t)}
.cc .tagx{position:absolute;right:-8px;top:-12px;padding:1px 8px;border-radius:999px;font-size:.7rem;font-weight:700;font-style:normal;color:var(--amber-t);background:var(--surface);border:1px solid color-mix(in oklab,var(--amber-t) 45%,transparent);transition:opacity .3s .2s,scale .4s cubic-bezier(.3,1.6,.5,1) .2s}
.cc .okb{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--mint-t);color:var(--surface);transition:opacity .3s 1.1s,scale .4s cubic-bezier(.3,1.6,.5,1) 1.1s}
.cc .okb .i{width:13px;height:13px;color:var(--surface);stroke-width:2.8}
.beam{position:relative;width:2px;height:22px;margin-left:24px;background:var(--line);overflow:hidden}
.beam i{position:absolute;inset:0;background:linear-gradient(180deg,var(--amber),var(--mint));transform-origin:0 0;transition:transform .55s var(--ease) .55s}
.beam.b2 i{background:var(--line)}
@media (min-width:480px){.beam{width:34px;height:2px;margin:0 6px}.beam i{background:linear-gradient(90deg,var(--amber),var(--mint))}}
@media screen and (prefers-reduced-motion:no-preference){
.js-anim [data-play]:not(.play) .tagx,.js-anim [data-play]:not(.play) .okb{opacity:0;scale:.5}
.js-anim [data-play]:not(.play) .beam i{transform:scale(1,0)}
.js-anim [data-play]:not(.play) .cc.qr{border-color:var(--line);box-shadow:none}
}
@media (min-width:480px) and (prefers-reduced-motion:no-preference){.js-anim [data-play]:not(.play) .beam i{transform:scale(0,1)}}
.payout h3,.route h3{display:flex;align-items:center;gap:10px}
.payout h3 .i,.route h3 .i{color:var(--mint-t)}
.payout{display:flex;flex-direction:column}
.payout p{color:var(--muted);margin-top:6px}
.po-vis{width:100%;max-width:260px;height:auto;margin:auto auto 0;padding-top:18px;overflow:visible}
.po-vis .l1{fill:none;stroke:var(--muted);stroke-width:2;stroke-dasharray:4 5;opacity:.6}
.po-vis .l2{fill:none;stroke:var(--mint-t);stroke-width:2.4;stroke-linecap:round}
.po-vis .x{fill:color-mix(in oklab,var(--rose) 18%,var(--surface));stroke:var(--rose-t);stroke-width:1.5}
.po-vis .xm{stroke:var(--rose-t);stroke-width:2;stroke-linecap:round}
.po-vis .ok{fill:var(--mint-t)}.po-vis .okm{fill:none;stroke:var(--surface);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.po-vis .s{fill:var(--violet-t)}
.hosted{display:grid;gap:36px;align-items:center;margin-top:56px}
@media (min-width:900px){.hosted{grid-template-columns:auto minmax(0,1fr);gap:64px;padding-inline:4%}}
.phone{position:relative;justify-self:center;width:250px;padding:10px;border-radius:40px;background:linear-gradient(160deg,#1B2446,#070B18);box-shadow:0 40px 80px -30px rgba(6,10,23,.6),inset 0 0 0 1px rgba(255,255,255,.1)}
.phone::before{content:"";position:absolute;inset:-40px max(-40px,calc(125px - 50vw));z-index:-1;border-radius:50%;background:radial-gradient(closest-side,color-mix(in oklab,var(--mint) 30%,transparent),transparent)}
.ph{position:relative;display:grid;gap:10px;padding:34px 16px 18px;border-radius:31px;background:#0B1124;color:#E9EEFB;font-size:12px;overflow:hidden}
.ph::before{content:"";position:absolute;left:50%;top:9px;width:70px;height:18px;margin-left:-35px;border-radius:99px;background:#000}
.ph-top{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:12px}
.ph-top .brand{font-size:12px;gap:6px;color:#EAF0FF}.ph-top .mark{width:18px;height:18px}
.ph-lang{padding:2px 8px;border-radius:99px;border:1px solid rgba(255,255,255,.2);font-size:10.5px;font-weight:650;color:#AEB8D6}
.ph-amt{text-align:center;padding:4px 0}
.ph-amt b{display:block;font-size:26px;font-weight:650;letter-spacing:.02em}
.ph-seg{display:grid;grid-template-columns:1fr 1fr;padding:3px;border-radius:10px;background:rgba(255,255,255,.06);text-align:center;font-weight:650;font-size:11px}
.ph-seg>span{padding:5px;border-radius:8px;color:#AEB8D6}.ph-seg .on{background:#3EE6B5;color:#04221A}
.ph-qr{justify-self:center;width:128px;height:128px;padding:8px;border-radius:12px;background:#fff}
.ph-qr svg{width:100%;height:100%}
.ph-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.ph-row .mono{letter-spacing:.06em;color:#AEB8D6;font-size:11px}
.ph-copy{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:7px;background:rgba(62,230,181,.14);color:#9FF6DB;font-weight:650;font-size:10.5px}
.ph-copy .i{width:12px;height:12px}
.ph-timer{display:inline-flex;align-items:center;justify-content:center;gap:6px;color:#FFD89A;font:600 12px var(--mono)}
.ph-timer .i{width:14px;height:14px}
.ph-slip{display:flex;align-items:center;justify-content:center;gap:6px;min-height:36px;border-radius:10px;background:linear-gradient(135deg,#6BF5CD,#4CC9F0);color:#04221A;font-weight:700}
.ph-slip .i{width:15px;height:15px}
.ph .tag-sample{justify-self:center}
.hosted h3{font-size:clamp(1.25rem,1.1rem + .6vw,1.6rem)}
.bl{display:grid;gap:12px;margin-top:18px}
.bl li{display:flex;gap:12px;align-items:flex-start}
.bl .i{margin-top:.2em;width:22px;height:22px;padding:3px;border-radius:7px;color:var(--mint-t);background:color-mix(in oklab,var(--mint) 14%,transparent);stroke-width:2.2}
.own{display:flex;align-items:flex-start;gap:14px;margin-top:40px;padding:18px 20px;border-radius:18px;border:1px dashed var(--line);color:var(--muted)}
.own .i{flex:none;width:28px;height:28px;color:var(--violet-t)}
.own b{color:var(--text)}

/* ---------- reserve ---------- */
.rsv{display:grid;gap:24px;padding:18px}
@media (min-width:900px){.rsv{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:center;padding:28px 32px;gap:40px}}
.rsv-vis{position:relative}
.rtag{display:inline-flex;align-items:center;gap:6px;margin-bottom:6px;padding:3px 10px;border-radius:999px;font-size:var(--fs-xs);font-weight:650;color:var(--violet-t);background:color-mix(in oklab,var(--violet) 12%,transparent);border:1px solid color-mix(in oklab,var(--violet) 25%,transparent)}
.rtag .i{width:14px;height:14px}
.rsv-vis>svg{width:100%;height:auto;overflow:visible}
.rs-site rect{fill:var(--surface2);stroke:var(--line)}
.rs-lbl{fill:var(--text);font:650 13px var(--font)}
.rs-sm{fill:var(--muted);font:600 11.5px var(--font);text-anchor:middle}
.rs-track{fill:var(--surface2);stroke:var(--line)}
.rbar{transform-box:fill-box;transform-origin:50% 100%;transition:transform 1s var(--ease)}
.rbar.a{fill:url(#g-barA);transform:scaleY(.7)}.rbar.b{fill:url(#g-barB);transform:scaleY(.55)}
.rsv[data-s="0"] .rbar.a,.rsv[data-s="1"] .rbar.a{transform:scaleY(.45)}
.rsv[data-s="0"] .rbar.b,.rsv[data-s="1"] .rbar.b{transform:scaleY(.8)}
.old{stroke:var(--muted);stroke-width:1.4;stroke-dasharray:3 3;transition:opacity .4s .6s}
.rsv[data-s="0"] .old,.rsv[data-s="1"] .old{opacity:0}
.r-arc{fill:none;stroke:url(#g-arc);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:0}
.r-arr{fill:none;stroke:var(--violet-t);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:0;transition:stroke-dashoffset 1s var(--ease)}
.rsv[data-s="0"] .r-arr,.rsv[data-s="1"] .r-arr{stroke-dashoffset:1}
.rsv[data-s="0"] .r-arc{stroke-dashoffset:1}
.rb{transition:opacity .3s,transform .45s cubic-bezier(.3,1.6,.5,1);transform-box:fill-box;transform-origin:center}
.rb circle{fill:var(--mint-t)}.rb text{fill:var(--surface);font:700 11px/1 var(--font);text-anchor:middle}
.rb.v2 circle{fill:var(--violet-t)}
.rsv[data-s="0"] .rb.v1,.rsv[data-s="0"] .rb.v2,.rsv[data-s="1"] .rb.v2{opacity:0;transform:scale(.4)}
.rbadge{position:absolute;left:50%;top:78%;translate:-50% -50%;width:max-content;max-width:calc(100% - 8px);display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 8px;border-radius:999px;white-space:nowrap;font-weight:700;font-size:clamp(.8rem,.7rem + .4vw,.95rem);color:var(--text);background:var(--surface);border:1px solid color-mix(in oklab,var(--mint) 55%,transparent);box-shadow:0 12px 30px -10px color-mix(in oklab,var(--mint) 60%,transparent);transition:opacity .3s,scale .45s cubic-bezier(.3,1.6,.5,1)}
.rbadge .nb{margin:0;width:1.6em;height:1.6em}
.rsv:not([data-s="3"]) .rbadge{opacity:0;scale:.6}
.rside{display:grid;gap:14px}
.rsteps{display:grid;gap:10px}
.rsteps li{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:14px;border:1px solid transparent;transition:background-color .35s,border-color .35s}
.rsteps .nb{flex:none;margin-top:.2em}
.rsv[data-s="1"] [data-k="1"],.rsv[data-s="2"] [data-k="2"]{background:color-mix(in oklab,var(--mint) 9%,transparent);border-color:color-mix(in oklab,var(--mint) 30%,transparent)}
.xnote{font-size:var(--fs-sm);color:var(--muted);padding:12px 14px;border-left:3px solid var(--violet-t);background:color-mix(in oklab,var(--violet) 6%,transparent);border-radius:0 12px 12px 0}
.rsv .mini-btn{justify-self:start;color:var(--text);background:var(--surface2)}
.rcards{display:grid;gap:14px;margin-top:16px}
@media (min-width:768px){.rcards{grid-template-columns:repeat(3,1fr);gap:20px}}
.rcards .card{display:flex;gap:14px;align-items:flex-start;padding:20px}
.rcards .ico{margin:0;flex:none;width:44px;height:44px}
.rcards .ico .i{width:22px;height:22px}
.rcards p{font-size:var(--fs-sm)}
.rlead{max-width:640px}

/* ---------- back office ---------- */
.bo-par{will-change:transform}
.bo{border-radius:20px;overflow:hidden;background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(135deg,var(--hA),var(--hB) 40%,var(--hC)) border-box;border:1px solid transparent;box-shadow:0 40px 90px -40px rgba(10,17,38,.45),var(--shadow)}
.bo-bar{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--surface2);border-bottom:1px solid var(--line)}
.bo-url{display:inline-flex;align-items:center;gap:6px;flex:1;min-width:0;max-width:260px;padding:4px 12px;border-radius:8px;font-size:.76rem;font-weight:600;color:var(--muted);background:var(--surface);border:1px solid var(--line)}
.bo-url .i{width:13px;height:13px}
.bo .tag-sample{margin-left:auto;color:var(--amber-t);background:color-mix(in oklab,var(--amber) 14%,transparent);border-color:color-mix(in oklab,var(--amber-t) 35%,transparent)}
.bo-body{display:grid}
@media (min-width:768px){.bo-body{grid-template-columns:190px minmax(0,1fr)}}
.bo-side{display:none;padding:14px 10px;border-right:1px solid var(--line);background:color-mix(in oklab,var(--surface2) 50%,var(--surface))}
@media (min-width:768px){.bo-side{display:block}}
.bo-side li{display:flex;align-items:center;gap:10px;padding:8px 10px;margin-bottom:2px;border-radius:10px;font-size:.84rem;color:var(--muted);transition:background-color .3s,color .3s}
.bo-side li .i{width:17px;height:17px}
.bo-side li.on{color:var(--text);font-weight:650;background:color-mix(in oklab,var(--mint) 14%,transparent);box-shadow:inset 3px 0 0 var(--mint-t)}
.bo-logo{display:flex;align-items:center;gap:8px;padding:2px 10px 14px;font-weight:700;font-size:.9rem}
.bo-logo .mark{width:22px;height:22px}
.bo-main{padding:14px;min-width:0}
@media (min-width:768px){.bo-main{padding:18px 22px 22px}}
.bo-top{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.bo-sw{display:inline-flex;padding:3px;border-radius:999px;background:var(--surface2);border:1px solid var(--line);font-size:.74rem;font-weight:650;color:var(--muted);margin-right:auto}
.bo-sw>span{padding:3px 11px;border-radius:999px}.bo-sw .on{background:var(--mint-t);color:var(--surface)}
.bo-pill,.bo-ic{display:grid;place-items:center;height:30px;min-width:30px;padding:0 8px;border-radius:9px;border:1px solid var(--line);font-size:.72rem;font-weight:650;color:var(--muted)}
.bo-ic .i{width:15px;height:15px}
.bo-ic.bell{position:relative}.bo-ic.bell::after{content:"";position:absolute;right:6px;top:6px;width:6px;height:6px;border-radius:50%;background:var(--rose)}
.bo-pages{display:grid}
.bo-pg{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s}
.bo-pg.on{opacity:1;visibility:visible;transition:opacity .45s,visibility 0s}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media (min-width:768px){.kpis{gap:12px}}
.kpi{padding:10px;border-radius:12px;border:1px solid var(--line);background:var(--surface);min-width:0}
@media (min-width:768px){.kpi{padding:14px}}
.kpi>span{display:block;font-size:.74rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi b{display:block;margin-top:2px;font-size:clamp(.82rem,.7rem + .6vw,1.2rem);letter-spacing:.03em;white-space:nowrap}
.kpi i{display:block;height:3px;margin-top:8px;border-radius:3px;background:linear-gradient(90deg,var(--mint),transparent)}
.kpi:nth-child(2) i{background:linear-gradient(90deg,var(--violet),transparent)}.kpi:nth-child(3) i{background:linear-gradient(90deg,var(--cyan),transparent)}
.chart{margin-top:12px;padding:12px 12px 6px;border-radius:12px;border:1px solid var(--line)}
.chart-h{display:flex;justify-content:flex-end}
.seg-mini{display:inline-flex;padding:2px;border-radius:8px;background:var(--surface2);font-size:.7rem;font-weight:650;color:var(--muted)}
.seg-mini>span{padding:2px 9px;border-radius:6px}.seg-mini .on{background:var(--surface);color:var(--text);box-shadow:var(--shadow)}
.chart svg{width:100%;height:96px}
.ar1{fill:url(#g-ch1)}.ar2{fill:url(#g-ch2)}.ln1{fill:none;stroke:var(--mint-t);stroke-width:2}.ln2{fill:none;stroke:var(--violet-t);stroke-width:2}
.rows{margin-top:12px;display:grid;gap:6px}
.row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;border:1px solid var(--line);font-size:.8rem}
@media (min-width:768px){.row{grid-template-columns:70px minmax(0,1fr) 90px 110px}}
.row .ref{display:none;font-family:var(--mono);color:var(--muted)}
@media (min-width:768px){.row .ref{display:block}}
.row .who{font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .amt{font-family:var(--mono);color:var(--muted);letter-spacing:.04em;text-align:right}
.row .st{justify-self:end}
.st{display:inline-flex;align-items:center;gap:.4em;padding:.15em .6em;border-radius:999px;font-size:.74rem;font-weight:650;white-space:nowrap}
.st::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.st.ok{color:color-mix(in oklab,var(--mint-t) 85%,var(--text));background:color-mix(in oklab,var(--mint-t) 12%,transparent)}
.st.chk{color:var(--cyan-t);background:color-mix(in oklab,var(--cyan-t) 12%,transparent)}
.st.wait{color:var(--amber-t);background:color-mix(in oklab,var(--amber-t) 12%,transparent)}
.st.short{color:var(--rose-t);background:color-mix(in oklab,var(--rose-t) 11%,transparent)}
.prog{height:6px;border-radius:6px;background:var(--surface2);overflow:hidden}
.prog i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--mint),var(--cyan))}
.prog .p100{width:100%}.prog .p80{width:80%}.prog .p62{width:62%}.prog .p38{width:38%}
.rows.w .row{grid-template-columns:minmax(0,1fr) auto}
@media (min-width:768px){.rows.w .row{grid-template-columns:70px minmax(0,1fr) 110px}}
.rs-big{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:16px;border-radius:14px;border:1px solid var(--line);background:linear-gradient(135deg,color-mix(in oklab,var(--mint) 10%,var(--surface)),color-mix(in oklab,var(--violet) 8%,var(--surface)))}
.rs-big>div>span{display:block;font-size:.76rem;color:var(--muted)}
.rs-big b{font-size:1.6rem;letter-spacing:.03em}
.rs-big .acts{display:flex;gap:8px;margin-left:auto}
.fake-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:9px;font-size:.8rem;font-weight:650;border:1px solid var(--line);background:var(--surface)}
.fake-btn.p{background:var(--mint-t);color:var(--surface);border-color:transparent}
.fake-btn .i{width:14px;height:14px}
.hist .row{grid-template-columns:auto minmax(0,1fr) auto}
.hist .sg{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:color-mix(in oklab,var(--mint) 14%,transparent);color:var(--mint-t)}
.hist .sg.m{background:color-mix(in oklab,var(--violet) 14%,transparent);color:var(--violet-t)}
.hist .sg .i{width:14px;height:14px}
.rp-h{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:10px}
.lock{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:.76rem;font-weight:650;color:var(--mint-t);background:color-mix(in oklab,var(--mint) 12%,transparent);border:1px solid color-mix(in oklab,var(--mint) 30%,transparent)}
.lock .i{width:14px;height:14px}
.rp-h .fx{margin-left:auto;display:flex;gap:6px}
.ledger .row{grid-template-columns:minmax(0,1fr) auto}
.ledger .row:last-child{font-weight:700;border-color:color-mix(in oklab,var(--mint) 40%,transparent)}
@media (max-width:767px){.bo-pg .chart,.bo-pg .rows .row:nth-child(n+4){display:none}.bo-pg:not(.on){display:none}}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:40px}
@media (min-width:1024px){.tiles{grid-template-columns:repeat(4,1fr);gap:14px}}
.tile{display:flex;flex-direction:column;gap:8px;width:100%;height:100%;padding:14px;border-radius:16px;background:var(--surface);border:1px solid var(--line);transition:border-color .3s,box-shadow .3s,transform .3s var(--ease)}
@media (min-width:768px){.tile{padding:18px}}
.tile .t-ico{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;color:var(--mint-t);background:color-mix(in oklab,var(--mint) 12%,transparent)}
.tile .t-ico .i{width:19px;height:19px}
.tile b{font-size:.98rem}
.tile .d{font-size:.84rem;line-height:1.55;color:var(--muted)}
.tile[aria-pressed=true]{border-color:color-mix(in oklab,var(--mint) 60%,transparent);box-shadow:0 0 0 3px color-mix(in oklab,var(--mint) 14%,transparent),var(--shadow)}
.tile[role=button]{cursor:pointer}
@media (hover:hover) and (pointer:fine){.tile[role=button]:hover{transform:translateY(-2px)}}
.bo-cta{margin-top:28px;text-align:center}

/* ---------- API island ---------- */
.island-wrap{padding:clamp(24px,4vw,48px) 0}
.island{position:relative;isolation:isolate;overflow:hidden;overflow:clip;padding:clamp(64px,8vw,104px) 0;background:var(--ink)}
@media (min-width:1080px){.island{width:min(100% - 48px,1320px);margin-inline:auto;border-radius:36px}}
.island::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(50% 60% at 0% 0%,rgba(124,92,255,.32),transparent 70%),radial-gradient(40% 60% at 100% 100%,rgba(62,230,181,.22),transparent 70%)}
.island::after{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 70%);mask-image:linear-gradient(180deg,#000,transparent 70%)}
.api-grid{display:grid;gap:40px}
@media (min-width:1024px){.api-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:56px;align-items:start}.api-grid>:last-child{position:sticky;top:96px}}
.checks{display:grid;gap:10px;margin-top:26px}
.checks li{display:flex;gap:12px;align-items:flex-start;color:var(--text)}
.checks .i{flex:none;margin-top:.22em;width:22px;height:22px;padding:4px;border-radius:50%;color:#04221A;background:linear-gradient(135deg,#6BF5CD,#4CC9F0);stroke-width:3}
.checks code,.xline code{padding:1px 6px;border-radius:6px;font-size:.88em;color:#C9BFFF;background:rgba(139,123,255,.16)}
.xline{display:flex;gap:10px;align-items:flex-start;margin-top:14px;color:var(--muted)}
.xline .i{flex:none;margin-top:.2em;color:#B7AAFF}
.code{position:relative;border-radius:20px;background:linear-gradient(#070B17,#070B17) padding-box,linear-gradient(135deg,#8B7BFF,rgba(76,201,240,.4) 50%,#3EE6B5) border-box;border:1px solid transparent;box-shadow:0 40px 80px -40px rgba(0,0,0,.9),0 0 60px -30px rgba(139,123,255,.6);overflow:hidden}
.code-head{display:flex;align-items:center;gap:12px;padding:10px 12px 0 14px;border-bottom:1px solid rgba(255,255,255,.08)}
.ctabs{position:relative;display:flex;gap:2px;min-width:0;overflow-x:auto;scrollbar-width:none}
.ctabs::-webkit-scrollbar{display:none}
.ctabs [role=tab]{padding:8px 10px 12px;font-size:.82rem;font-weight:600;color:#9AA6C8;white-space:nowrap;transition:color .2s}
.ctabs [role=tab][aria-selected=true]{color:#fff}
.ctabs [role=tab]:focus-visible{outline-offset:-3px}
.ctabs .ind{position:absolute;left:0;bottom:0;height:2px;border-radius:2px;background:linear-gradient(90deg,#8B7BFF,#3EE6B5);transition:transform .45s var(--ease),width .45s var(--ease)}
.copy{margin-left:auto;flex:none;margin-bottom:8px;color:var(--on-ink2);border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.05)}
.copy:hover{color:#fff}
.copy .ok{display:none;color:#3EE6B5}.copy.done .ok{display:block}.copy.done .cp{display:none}
.code pre{padding:16px 16px 18px 0;overflow-x:auto;font-size:.8rem;line-height:1.8;color:#D5DDF5;white-space:normal;counter-reset:ln}
.js .code pre:not(.on){display:none}
html:not(.js) .code pre+pre{border-top:1px solid rgba(255,255,255,.08)}
.code pre.on{animation:fadein .35s ease}
@keyframes fadein{from{opacity:0}}
.code .l{display:block;position:relative;min-height:1.8em;padding-left:3.4em;white-space:pre;counter-increment:ln}
.code .l::before{content:counter(ln);position:absolute;left:0;width:2.4em;text-align:right;color:#7C88B2;user-select:none}
.code .k{color:#C4B8FF}.code .s{color:#86F2D0}.code .n{color:#FFCB80}.code .m{color:#6FD6F7;font-weight:700}.code .p{color:#8A96BA}
.fld{font:inherit;color:#C4B8FF;border-bottom:1px dotted #C4B8FF;cursor:help}
.code.pre-type pre.first .l{transition:clip-path .22s steps(12,end)}
.code.pre-type pre.first .l:not(.typed){clip-path:inset(0 100% 0 0)}
.cap{margin-top:12px;font-size:var(--fs-xs);color:var(--muted)}
.cap code{font-size:.95em;color:#C9BFFF}
.fields{display:grid;gap:8px;margin-top:16px}
.fields div{padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08)}
.fields dt code{font-size:.82rem;color:#C4B8FF}
.fields dd{font-size:var(--fs-sm);color:var(--muted)}
@media (min-width:1024px){.fields{display:none}}

/* ---------- security ---------- */
.band{display:grid;gap:24px;align-items:center}
@media (min-width:768px){.band{grid-template-columns:auto minmax(0,1fr);gap:40px;padding:32px 40px}}
.shield{position:relative;width:150px;height:150px;justify-self:center}
.shield svg{width:100%;height:100%;overflow:visible}
.srg{fill:none;stroke-linecap:round;transform-box:fill-box;transform-origin:center}
.srg.a{stroke:var(--mint-t);stroke-width:1.6;stroke-dasharray:40 18}
.srg.b{stroke:var(--violet-t);stroke-width:1.4;stroke-dasharray:22 12}
.srg.c{stroke:var(--cyan-t);stroke-width:1.2;stroke-dasharray:6 8;opacity:.8}
@media screen and (prefers-reduced-motion:no-preference){.play .srg.a{animation:rot 4.6s cubic-bezier(.3,.6,.2,1) 1}.play .srg.b{animation:rotr 4.6s cubic-bezier(.3,.6,.2,1) 1}.play .srg.c{animation:rot 4.6s cubic-bezier(.3,.6,.2,1) 1}}
@keyframes rot{to{transform:rotate(360deg)}}@keyframes rotr{to{transform:rotate(-360deg)}}
.shield .core-s{fill:color-mix(in oklab,var(--mint) 14%,var(--surface));stroke:var(--mint-t);stroke-width:2}
.shield .ck{fill:none;stroke:var(--mint-t);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ticks{display:grid;gap:10px 28px;margin-top:12px}
@media (min-width:1024px){.ticks{grid-template-columns:1fr 1fr}}
.ticks li{display:flex;gap:10px;align-items:flex-start;color:var(--muted)}
.ticks .i{flex:none;margin-top:.25em;width:18px;height:18px;color:var(--mint-t);stroke-width:2.4}
.sgrid{display:grid;gap:14px;margin-top:16px}
@media (min-width:640px){.sgrid{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){.sgrid{grid-template-columns:repeat(4,1fr);gap:20px}}
.sgrid p{font-size:var(--fs-sm)}
.draw use{stroke-dasharray:1 1;stroke-dashoffset:0;transition:stroke-dashoffset 1.1s var(--ease) .2s}
.otp{display:flex;gap:5px;margin-top:14px}
.otp i{position:relative;display:grid;place-items:center;width:26px;height:32px;border-radius:8px;border:1px solid var(--line);background:var(--surface2)}
.otp i::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--text);transition:opacity .2s,scale .3s}
.otp i:nth-child(2)::after{transition-delay:.16s}.otp i:nth-child(3)::after{transition-delay:.32s}.otp i:nth-child(4)::after{transition-delay:.48s}.otp i:nth-child(5)::after{transition-delay:.64s}.otp i:nth-child(6)::after{transition-delay:.8s}
.otp .okc{display:grid;place-items:center;width:32px;height:32px;margin-left:4px;border-radius:50%;background:var(--mint-t);color:var(--surface);transition:opacity .3s 1.4s,scale .4s cubic-bezier(.3,1.6,.5,1) 1.4s}
.otp .okc .i{width:16px;height:16px;stroke-width:3}
.sd{display:flex;gap:6px;margin-top:14px}
.sd span{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;border:1px solid var(--line);background:var(--surface2);color:var(--muted)}
.sd .ok{border:0;border-radius:50%;margin-left:4px;background:var(--mint-t);color:var(--surface)}
.sd .i{width:16px;height:16px}
.sd .ok .i{stroke-width:2.4}
@media screen and (prefers-reduced-motion:no-preference){
.js-anim [data-play]:not(.play) .draw use{stroke-dashoffset:1}
.js-anim [data-play]:not(.play) .otp i::after,.js-anim [data-play]:not(.play) .otp .okc{opacity:0;scale:.3}
}

/* ---------- onboarding ---------- */
.tl-wrap{position:relative;max-width:1040px;margin-inline:auto}
.tl{position:relative;display:grid;gap:26px}
.bar-t{position:absolute;left:23px;top:24px;bottom:24px;width:2px;background:var(--line);border-radius:2px}
.bar-t i{position:absolute;inset:0;border-radius:2px;background:linear-gradient(180deg,var(--mint),var(--cyan),var(--violet));transform-origin:0 0;transition:transform 1.4s var(--ease)}
.tl li{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);gap:16px;align-content:start}
.tl .dot{position:relative;z-index:1;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;font-weight:700;color:#04221A;background:linear-gradient(135deg,#6BF5CD,#4CC9F0);box-shadow:0 0 0 6px var(--bg),0 10px 24px -8px color-mix(in oklab,var(--mint) 70%,transparent)}
.tl h3{margin:8px 0 4px}.tl p{color:var(--muted)}
@media (min-width:900px){.tl{grid-template-columns:repeat(3,1fr);gap:36px}.bar-t{left:calc(100%/6);right:calc(100%/6);top:23px;bottom:auto;width:auto;height:2px}.bar-t i{background:linear-gradient(90deg,var(--mint),var(--cyan),var(--violet))}.tl li{grid-template-columns:1fr;justify-items:center;text-align:center}}
@media screen and (prefers-reduced-motion:no-preference){
.js-anim .tl-wrap:not(.play) .bar-t i{transform:scale(1,0)}
.play .dot{animation:pop .5s cubic-bezier(.3,1.6,.5,1) both .1s}
.play li:nth-child(2) .dot{animation-delay:.55s}.play li:nth-child(3) .dot{animation-delay:1s}
.js-anim .ob:not(.play) .btn::after{translate:-130% 0}
.ob.play .btn::after{transition-delay:1.6s;translate:130% 0}
}
@media (min-width:900px) and (prefers-reduced-motion:no-preference){.js-anim .tl-wrap:not(.play) .bar-t i{transform:scale(0,1)}}
@keyframes pop{50%{transform:scale(1.18)}}
.ob .center{text-align:center;margin-top:36px}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:12px;margin-inline:auto}
.faq{max-width:820px}
@media (min-width:900px){.faq{gap:14px}}
.qa{border-radius:18px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);transition:border-color .3s}
.qa[open]{border-color:color-mix(in oklab,var(--mint) 45%,transparent)}
.qa summary{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:60px;padding:14px 18px;font-weight:650;font-size:1.02rem;line-height:1.4;cursor:pointer;list-style:none;border-radius:18px}
.qa summary::-webkit-details-marker{display:none}
.pm{position:relative;flex:none;width:28px;height:28px;border-radius:50%;background:var(--surface2);transition:transform .35s var(--ease),background-color .3s}
.pm::before,.pm::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:2px;margin:-1px 0 0 -5.5px;border-radius:2px;background:var(--text)}
.pm::after{transform:rotate(90deg)}
.qa[open] .pm{transform:rotate(45deg);background:color-mix(in oklab,var(--mint) 18%,transparent)}
.qa::details-content{block-size:0;overflow:hidden;transition:block-size .38s var(--ease),content-visibility .38s allow-discrete}
.qa[open]::details-content{block-size:auto}
.qa .ans{padding:0 18px 18px;color:var(--muted)}

/* ---------- contact ---------- */
.contact{padding:clamp(56px,8vw,112px) 0 clamp(72px,9vw,120px)}
.cbox{position:relative;isolation:isolate;overflow:hidden;padding:clamp(36px,6vw,72px) clamp(18px,5vw,64px);border-radius:32px;text-align:center;background:linear-gradient(var(--ink),var(--ink)) padding-box,conic-gradient(from var(--angle),#3EE6B5,rgba(76,201,240,.3),#8B7BFF,rgba(76,201,240,.3),#3EE6B5) border-box;border:1.5px solid transparent;box-shadow:0 40px 90px -40px rgba(6,10,23,.6)}
@media screen and (prefers-reduced-motion:no-preference){.cbox.play{animation:spin 4.8s cubic-bezier(.45,.05,.2,1) 1}}
.cbox::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(45% 70% at 15% 0%,rgba(62,230,181,.3),transparent 70%),radial-gradient(45% 70% at 85% 100%,rgba(124,92,255,.34),transparent 70%)}
.cbox .lead{max-width:560px;margin-inline:auto}
.chans{display:grid;gap:14px;max-width:720px;margin:36px auto 0}
@media (min-width:640px){.chans{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}}
.chan{display:grid;justify-items:center;align-content:start;gap:8px;padding:26px 20px;border-radius:22px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.chan .ci{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;color:#04221A;background:linear-gradient(135deg,#6BF5CD,#3EE6B5)}
.chan.telegram .ci{background:linear-gradient(135deg,#8FD9FF,#4CC9F0)}
.chan .ci .i{width:26px;height:26px;stroke-width:2}
.cid{font-family:var(--font);font-weight:500;letter-spacing:.01em;font-size:.95rem;color:var(--muted);overflow-wrap:anywhere}
.chan .btn{margin-top:8px;width:100%;max-width:280px;white-space:normal;text-align:center;line-height:1.3;padding-block:.6em}
.chan.telegram .btn{background:linear-gradient(135deg,#9FE0FF,#4CC9F0 60%,#8B7BFF);box-shadow:0 10px 28px -10px rgba(76,201,240,.6)}

/* ---------- footer, fab ---------- */
.foot{background:var(--ink);padding:56px 0 calc(40px + env(safe-area-inset-bottom))}
.foot-in{display:grid;gap:32px}
@media (min-width:900px){.foot-in{grid-template-columns:1.2fr 2fr 1fr;align-items:start}}
.foot p{margin-top:10px;color:var(--muted);font-size:var(--fs-sm)}
.foot ul{display:flex;flex-wrap:wrap;gap:6px 18px}
.foot ul a{text-decoration:none;color:var(--muted);font-size:var(--fs-sm)}
.foot ul a:hover{color:var(--text)}
.foot .fr{display:grid;gap:12px;justify-items:start}
@media (min-width:900px){.foot .fr{justify-items:end}}
.login-f{color:var(--mint-t);font-weight:650;font-size:var(--fs-sm);text-decoration:none}
.login-f:hover{text-decoration:underline}
.copy-r{margin-top:36px;padding-top:20px;border-top:1px solid var(--line);font-size:var(--fs-xs);color:var(--muted)}
.fab{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:40;box-shadow:0 14px 34px -10px rgba(6,10,23,.55),0 10px 28px -10px rgba(62,230,181,.65);opacity:0;translate:0 14px;pointer-events:none;visibility:hidden;transition:opacity .3s,translate .35s var(--ease),visibility 0s .35s}
.fab.show{opacity:1;translate:0 0;pointer-events:auto;visibility:visible;transition:opacity .3s,translate .35s var(--ease),visibility 0s}
.nav.open~.fab{opacity:0;visibility:hidden;pointer-events:none}
@media (min-width:768px){.fab{display:none}}

/* ---------- O114AA ข้อ 292: more of what the system does, more motion ---------- */
/* scroll progress under the bar */
.sprog{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;overflow:hidden}
.sprog i{display:block;height:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--mint),var(--cyan),var(--violet));box-shadow:0 0 12px color-mix(in oklab,var(--mint) 70%,transparent)}
html:not(.js) .sprog{display:none}
.hero{padding-bottom:88px}
@media (min-width:1024px){.hero{padding-bottom:112px}}
/* hero: a living field behind the copy (landing.js · stopped off screen, paused, hidden or with reduced motion) */
.hero{--fx:120,240,210}
.fx{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}
.hero.off .fl,.hero.paused .fl,.hero.off .rib-in,.hero.paused .rib-in{animation-play-state:paused}
.floaters{position:absolute;inset:0;z-index:2;pointer-events:none}
.fl{position:absolute;display:inline-flex;align-items:center;gap:7px;padding:7px 13px 7px 9px;border-radius:999px;font-size:.8rem;font-weight:650;line-height:1.2;white-space:nowrap;color:var(--text);background:rgba(13,20,44,.9);border:1px solid rgba(255,255,255,.14);box-shadow:0 16px 36px -14px rgba(0,0,0,.7);animation:bob 5.5s ease-in-out infinite alternate}
.fl .i{width:18px;height:18px;padding:2px;border-radius:50%;color:#04221A;background:linear-gradient(135deg,#6BF5CD,#4CC9F0)}
.fl.f1{left:-10px;top:-18px}.fl.f2{right:6%;bottom:-18px;animation-delay:-2s}.fl.f3{right:-12px;top:30%;animation-delay:-3.6s}
.fl.f1 .i{background:radial-gradient(circle at 35% 35%,#B8F5DF,#26A17B 60%,#147A5B);color:#FFFFFF}
.fl.f3 .i{background:linear-gradient(135deg,#B7AAFF,#8B7BFF);color:#140B3A}
@keyframes bob{to{transform:translateY(-9px)}}
@media (max-width:767px){.fl.f3{display:none}.fl.f1{left:4px}}
@media (max-width:479px){.fl{font-size:.74rem}.fl.f2{right:4px}}
/* hero: what the system holds, counted up once */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:clamp(48px,6vw,72px);border-radius:24px;overflow:hidden;background:var(--line);border:1px solid var(--line)}
@media (min-width:900px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{display:grid;align-content:start;gap:4px;padding:clamp(16px,2.4vw,26px);background:color-mix(in oklab,var(--ink) 72%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.stat .cnt{margin-block:-.3em;font:650 clamp(2.3rem,1.7rem + 2.4vw,3.5rem)/1 Inter,var(--font);letter-spacing:-.03em;font-variant-numeric:tabular-nums;justify-self:start}
.stat>span{font-size:var(--fs-sm);line-height:1.5;color:var(--muted)}
/* hero: a ribbon of the system's parts, drifting (paused on hover, still with reduced motion) */
.ribbon{margin-top:28px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.rib-in{display:flex;width:max-content;animation:marq 70s linear infinite}
.ribbon:hover .rib-in{animation-play-state:paused}
.rib-g{display:flex;gap:10px;padding-right:10px}
.rib-i{display:inline-flex;align-items:center;gap:8px;padding:8px 15px 8px 11px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--muted);font-size:.86rem;font-weight:500;white-space:nowrap}
.rib-i .i{width:17px;height:17px;color:var(--mint-t)}
@keyframes marq{to{transform:translateX(-50%)}}
/* channels: the route the money takes (landing.js plays the three open channels once, then the one picked) */
.router{margin-bottom:20px;padding:clamp(18px,3vw,34px);overflow:hidden}
.router::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(60% 90% at 50% 50%,color-mix(in oklab,var(--mint) 9%,transparent),transparent 70%)}
.rt{position:relative;display:flex;flex-direction:column;align-items:center}
.rt-n{position:relative;display:inline-flex;align-items:center;gap:10px;padding:7px 16px 7px 7px;border-radius:999px;border:1px solid var(--line);background:var(--surface2);font-weight:650;font-size:.92rem;line-height:1.2;white-space:nowrap;transition:border-color .35s,box-shadow .35s}
.rt-n .av{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;color:var(--mint-t);background:color-mix(in oklab,var(--mint) 16%,transparent)}
.rt-n .av .i{width:18px;height:18px}
.rt-n.hit,.rt-ch.hit{border-color:color-mix(in oklab,var(--mint) 75%,transparent);box-shadow:0 0 0 4px color-mix(in oklab,var(--mint) 14%,transparent),0 0 28px -6px color-mix(in oklab,var(--mint) 70%,transparent)}
.rt-done .av{color:var(--surface);background:var(--mint-t)}
.rt-done .av .i{stroke-width:2.6}
.rt-pop{position:absolute;left:50%;top:calc(100% + 8px);translate:-50% 0;display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;font-size:.74rem;font-weight:650;color:var(--violet-t);background:color-mix(in oklab,var(--violet) 14%,var(--surface));border:1px solid color-mix(in oklab,var(--violet) 40%,transparent);transition:opacity .25s,scale .4s cubic-bezier(.3,1.6,.5,1)}
.rt-pop .i{width:13px;height:13px}
.rt-pop.off{opacity:0;scale:.6}
.rt-pipe{position:relative;flex:none;width:2px;height:28px;background:var(--line)}
.rt-pipe .dot{position:absolute;left:50%;top:calc(var(--t,0)*100%);display:grid;place-items:center;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;color:#5A3A00;background:radial-gradient(circle at 35% 35%,#FFF6D6,#F5C451 55%,#C98A12);box-shadow:0 0 14px rgba(245,196,81,.85);opacity:0}
.rt-pipe .dot svg{width:12px;height:12px}
/* the coin carries the currency of the route: baht, or USDT (landing.js sets .usdt on the USDT lane) */
.router .cu,.router.usdt .cb{display:none}.router.usdt .cu{display:block}
.router.usdt .rt-pipe .dot{color:#FFFFFF;background:radial-gradient(circle at 35% 35%,#B8F5DF,#26A17B 60%,#147A5B);box-shadow:0 0 14px rgba(38,161,123,.85)}
.rt-core{position:relative;display:grid;justify-items:center;gap:6px;padding:4px 10px}
.rt-disc{position:relative;z-index:1;display:grid;place-items:center;width:66px;height:66px;border-radius:50%;background:var(--surface);border:1.5px solid color-mix(in oklab,var(--mint) 65%,transparent);box-shadow:0 0 0 7px color-mix(in oklab,var(--mint) 9%,transparent),0 0 44px -6px color-mix(in oklab,var(--mint) 65%,transparent)}
.rt-disc .mark{width:34px;height:34px}
.rt-cl{font-size:.78rem;font-weight:700;color:var(--muted)}
.rt-ring{position:absolute;left:50%;top:37px;width:66px;height:66px;margin:-33px 0 0 -33px;border-radius:50%;border:1.5px solid var(--mint);opacity:0}
.rt-core.hit .rt-ring{animation:pulse 1.5s ease-out}.rt-core.hit .rt-ring.r2{animation-delay:.35s}
.rt-chs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:440px}
.rt-ch{position:relative;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 14px;border-radius:14px;border:1px solid var(--line);background:var(--surface);font-weight:650;font-size:.88rem;line-height:1.15;white-space:nowrap;transition:border-color .35s,box-shadow .35s,opacity .35s}
.rt-ch .i{width:18px;height:18px;color:var(--muted)}
.rt-ch.soon{border-style:dashed;color:var(--muted)}
.rt-ch em,.soon-dot{font-style:normal}
.rt-ch em{padding:1px 7px;border-radius:999px;font-size:.72rem;font-weight:700;color:var(--amber-t);border:1px solid color-mix(in oklab,var(--amber-t) 45%,transparent)}
.rt-ch.on{border-color:color-mix(in oklab,var(--mint) 70%,transparent);box-shadow:0 0 0 4px color-mix(in oklab,var(--mint) 12%,transparent)}
.rt-ch.on .i{color:var(--mint-t)}
.rt-ch.soon.on{border-color:color-mix(in oklab,var(--amber) 75%,transparent);box-shadow:0 0 0 4px color-mix(in oklab,var(--amber) 13%,transparent)}
.rt-ch.soon.on .i{color:var(--amber-t)}
.rt-fan{display:none;flex:none;width:72px;height:268px;overflow:visible}
.rt-fan path{fill:none;stroke:var(--line);stroke-width:1.6;stroke-dasharray:3 5;transition:stroke .35s,opacity .35s}
.rt-fan path.on{stroke:var(--mint-t);stroke-width:2.4;stroke-dasharray:none}
.rt-fan path.on.soon{stroke:var(--amber-t);stroke-dasharray:5 5}
.rt-pk{opacity:0;color:#5A3A00;filter:drop-shadow(0 0 6px rgba(245,196,81,.9))}
.rt-pk circle{fill:url(#g-coin)}
.router.usdt .rt-pk{color:#FFFFFF;filter:drop-shadow(0 0 6px rgba(38,161,123,.9))}
.router.usdt .rt-pk circle{fill:#26A17B}
.rt-cap{display:none}
@media (max-width:959px){.rt-chs{margin:12px 0}.rt-chs .rt-ch{height:40px;padding:0 12px}.rt-done{margin-bottom:30px}}
@media (min-width:960px){
.rt{flex-direction:row;justify-content:space-between;padding:6px 0 30px}
.rt-pipe{flex:1 1 0;min-width:18px;width:auto;height:2px}
.rt-pipe .dot{left:calc(var(--t,0)*100%);top:50%}
.rt-n{flex-direction:column;gap:8px;padding:14px 16px 12px;border-radius:18px}
.rt-chs{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:12px;max-width:none}
.rt-fan{display:block}
.rt-cap{position:absolute;left:50%;bottom:10px;translate:-50% 0;display:block;font-size:.74rem;font-weight:600;color:var(--muted);white-space:nowrap}
}
/* channels: pick one, read what it does */
.chx{display:grid;gap:16px}
@media (min-width:960px){.chx{grid-template-columns:minmax(0,290px) minmax(0,1fr);gap:20px;align-items:start}}
.ch-tabs{display:flex;flex-wrap:wrap;gap:8px}
@media (min-width:960px){.ch-tabs{flex-direction:column;flex-wrap:nowrap}}
.ch-tabs [role=tab]{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 16px;border-radius:14px;border:1px solid var(--line);background:var(--surface);font-weight:650;color:var(--muted);transition:color .2s,border-color .25s,box-shadow .25s,background-color .25s}
.ch-tabs [role=tab] .i{width:20px;height:20px}
.ch-tabs [role=tab]:hover{color:var(--text);border-color:color-mix(in oklab,var(--mint) 45%,transparent)}
.ch-tabs [role=tab][aria-selected=true]{color:var(--text);border-color:color-mix(in oklab,var(--mint) 70%,transparent);background:linear-gradient(135deg,color-mix(in oklab,var(--mint) 14%,var(--surface)),color-mix(in oklab,var(--violet) 10%,var(--surface)));box-shadow:0 12px 30px -18px color-mix(in oklab,var(--mint) 80%,transparent)}
.ch-tabs [role=tab][aria-selected=true] .i{color:var(--mint-t)}
.soon-dot{width:8px;height:8px;margin-left:auto;border-radius:50%;background:var(--amber);box-shadow:0 0 8px color-mix(in oklab,var(--amber) 70%,transparent)}
.chps{display:grid;gap:16px}
.js .chps .chp:not(.on){display:none}
.chp{padding:clamp(20px,3vw,32px)}
.chp-h{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.chp-h h3{margin:0;font-size:clamp(1.2rem,1.05rem + .6vw,1.5rem)}
.chp-ico{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;color:var(--mint-t);background:linear-gradient(135deg,color-mix(in oklab,var(--mint) 20%,transparent),color-mix(in oklab,var(--violet) 16%,transparent));border:1px solid color-mix(in oklab,var(--mint) 25%,transparent)}
.chp-ico .i{width:24px;height:24px}
.chp .chp-lead{margin-top:14px;font-size:var(--fs-lead);color:var(--text)}
.chp-lead .net{margin-top:6px}
.chp .bl{margin-top:18px}
.chp .bl .badge{margin-left:4px;vertical-align:.1em}
.js .chp.on{animation:chIn .45s var(--ease)}
@keyframes chIn{from{opacity:0;transform:translateY(8px)}}
.badge{display:inline-flex;align-items:center;padding:2px 10px;border-radius:999px;font-size:.74rem;font-weight:700;font-style:normal;line-height:1.5;white-space:nowrap}
.badge.live{color:var(--mint-t);background:color-mix(in oklab,var(--mint) 13%,transparent);border:1px solid color-mix(in oklab,var(--mint) 40%,transparent)}
.badge.soon{color:var(--amber-t);background:color-mix(in oklab,var(--amber) 13%,transparent);border:1px solid color-mix(in oklab,var(--amber) 45%,transparent)}
/* channels side by side */
.mx-wrap{margin-top:20px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);overflow:hidden}
.mx{width:100%;border-collapse:collapse;font-size:.92rem;line-height:1.35}
.mx caption{padding:16px 18px 8px;text-align:left;font-weight:650;font-size:var(--fs-sm);color:var(--muted)}
.mx th,.mx td{padding:12px 10px;text-align:center;border-top:1px solid var(--line)}
.mx thead th{padding-block:8px;font-size:var(--fs-xs);font-weight:650;color:var(--muted)}
.mx tbody th,.mx thead th:first-child{text-align:left;font-weight:650;padding-left:18px}
.mx td .i{width:20px;height:20px;margin:auto}
.mx .i.y{color:var(--mint-t);stroke-width:2.4}.mx .i.n{color:var(--muted)}
.mx tr.dim th{color:var(--muted)}
.mx tbody tr{transition:background-color .2s}
.mx tbody tr:hover{background:color-mix(in oklab,var(--mint) 6%,transparent)}
@media (max-width:560px){.mx{font-size:.8rem}.mx th,.mx td{padding:10px 3px}.mx tbody th,.mx thead th:first-child{padding-left:12px}.mx caption{padding-inline:12px}.mx .badge{padding:1px 6px;font-size:.66rem}.mx td .i{width:17px;height:17px}}
/* platform: every part, filtered by what the team does */
.pf-bar{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 auto 28px}
.pf-bar button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 7px 0 16px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-weight:650;font-size:.92rem;color:var(--muted);transition:color .2s,background-color .25s,border-color .25s,box-shadow .25s}
.pf-bar button:hover{color:var(--text);border-color:color-mix(in oklab,var(--mint) 50%,transparent)}
.pf-bar b{display:grid;place-items:center;min-width:30px;height:30px;padding:0 7px;border-radius:999px;font-size:.78rem;background:var(--surface2);color:var(--muted)}
.pf-bar [aria-pressed=true]{color:#04221A;border-color:transparent;background:linear-gradient(135deg,#6BF5CD,#3EE6B5 45%,#4CC9F0);box-shadow:0 10px 26px -12px rgba(62,230,181,.75)}
.pf-bar [aria-pressed=true] b{background:rgba(4,34,26,.14);color:#04221A}
.pf{display:grid;gap:12px}
@media (min-width:640px){.pf{grid-template-columns:1fr 1fr;gap:16px}}
@media (min-width:1080px){.pf{grid-template-columns:repeat(4,1fr);gap:18px}}
.pfc{display:grid;grid-template-columns:44px minmax(0,1fr);gap:2px 14px;align-content:start;padding:20px}
.pfc .ico{grid-row:span 2;width:44px;height:44px;margin:0;border-radius:13px}
.pfc .ico .i{width:22px;height:22px}
.pfc h3{margin:0 0 4px;font-size:1.04rem}
.pfc p{font-size:var(--fs-sm)}
@media (min-width:640px){.pfc{display:block;padding:22px}.pfc .ico{margin-bottom:16px}}
.pfc[data-g=money] .ico{color:var(--violet-t);background:linear-gradient(135deg,color-mix(in oklab,var(--violet) 22%,transparent),color-mix(in oklab,var(--cyan) 12%,transparent));border-color:color-mix(in oklab,var(--violet) 30%,transparent)}
.pfc[data-g=team] .ico{color:var(--cyan-t);background:linear-gradient(135deg,color-mix(in oklab,var(--cyan) 20%,transparent),color-mix(in oklab,var(--mint) 12%,transparent));border-color:color-mix(in oklab,var(--cyan) 30%,transparent)}
.pfc.fi{animation:fi .45s var(--ease) both}
@keyframes fi{from{opacity:0;transform:translateY(12px) scale(.97)}}
.pfc:nth-child(2).fi{animation-delay:50ms}.pfc:nth-child(3).fi{animation-delay:100ms}.pfc:nth-child(4).fi{animation-delay:150ms}
/* ---------- O114AA ข้อ 293: pools linked · resellers pass it on (made-up names and figures) · limits down the tree · billing ready ---------- */
.link-box{display:grid;gap:20px;align-items:center;margin-top:28px}
@media (min-width:960px){.link-box{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px}}
.link-vis{padding:14px 12px}
.link-vis svg{width:100%;height:auto;overflow:visible}
.lk-grp{fill:color-mix(in oklab,var(--violet) 7%,transparent);stroke:color-mix(in oklab,var(--violet) 45%,transparent);stroke-dasharray:6 5}
.lk-gt{font-size:13px;font-weight:700;fill:var(--violet-t)}
.lk-p rect{fill:var(--surface2);stroke:color-mix(in oklab,var(--mint) 60%,transparent);stroke-width:1.5}
.lk-p.o rect{stroke:color-mix(in oklab,var(--violet) 60%,transparent)}.lk-p.c rect{stroke:var(--line)}
.lk-p text{font-size:17px;font-weight:650;fill:var(--text);text-anchor:middle}
.lk-l{fill:none;stroke:var(--mint-t);stroke-width:2.4;stroke-dasharray:1;transition:stroke-dashoffset 1s var(--ease)}
.lk-l.l2{stroke:var(--violet-t)}
.lk-no{stroke:var(--muted);stroke-width:1.6;stroke-dasharray:4 5;opacity:.7}
.lk-x{fill:var(--surface);stroke:var(--rose-t);stroke-width:1.5}.lk-xm{stroke:var(--rose-t);stroke-width:2;stroke-linecap:round}
.lk-s{font-size:13px;font-weight:600;fill:var(--muted)}
.lk-c{fill:#F5C451;opacity:0;filter:drop-shadow(0 0 5px rgba(245,196,81,.9))}
@media screen and (prefers-reduced-motion:no-preference){.js-anim .link-vis:not(.play) .lk-l{stroke-dashoffset:1}}
.link-t{font-size:clamp(1.15rem,1rem + .5vw,1.4rem);margin-bottom:14px}
.tier-grid{display:grid;gap:16px}
@media (min-width:960px){.tier-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:20px;align-items:start}}
.tree{display:flex;flex-direction:column;align-items:center;gap:0;padding:clamp(18px,3vw,30px) clamp(12px,3vw,30px)}
.tag-ex{align-self:flex-start;margin-bottom:14px}
.tr-row{position:relative;display:flex;justify-content:center;width:100%;padding-top:22px}
.tr-row:nth-of-type(1){padding-top:0}
.tr-row::before{content:"";position:absolute;left:50%;top:0;height:22px;width:2px;margin-left:-1px;background:var(--line)}
.tr-row:nth-of-type(1)::before{display:none}
.tr-row.two{justify-content:space-around;gap:10px}
.tr-row.two::before{display:none}
.tr-row.two .tn{flex:1 1 0;max-width:230px}
.tr-row.two .tn::before{content:"";position:absolute;left:50%;top:-22px;height:22px;width:2px;margin-left:-1px;background:var(--line)}
.tr-fork{position:relative;width:52%;height:22px;border:2px solid var(--line);border-bottom:0;border-radius:14px 14px 0 0;margin-top:22px}
.tr-fork::before{content:"";position:absolute;left:50%;top:-24px;height:22px;width:2px;margin-left:-1px;background:var(--line)}
.tr-fork+.tr-row.two{padding-top:0}.tr-fork+.tr-row.two .tn::before{display:none}
.tn{position:relative;display:grid;justify-items:center;gap:6px;min-width:0;padding:12px 10px;border-radius:16px;background:var(--surface2);border:1.5px solid var(--line);text-align:center;transition:opacity .4s,translate .5s var(--ease),border-color .4s}
.tn-n{display:inline-flex;align-items:center;gap:7px;font-weight:700;line-height:1.25}
.tn-n .mark{width:22px;height:22px}
.tn.z{border-color:color-mix(in oklab,var(--cyan) 55%,transparent)}.tn.a{border-color:color-mix(in oklab,var(--mint) 60%,transparent)}
.tn.b,.tn.c{border-color:color-mix(in oklab,var(--violet) 55%,transparent)}.tn.s{border-color:color-mix(in oklab,var(--amber) 50%,transparent)}
.tn-s{font-size:var(--fs-xs);color:var(--muted)}
.rate{padding:5px 11px;border-radius:11px;font:650 1.05rem/1 Inter,var(--font);font-variant-numeric:tabular-nums;white-space:nowrap;background:var(--surface);border:1px solid var(--line)}
.cut{display:inline-flex;padding:2px 10px;border-radius:999px;font-size:.78rem;font-weight:650;line-height:1.5;white-space:nowrap;transition:opacity .35s,scale .45s cubic-bezier(.3,1.6,.5,1)}
.cut.ca{color:var(--mint-t);background:color-mix(in oklab,var(--mint) 14%,transparent);border:1px solid color-mix(in oklab,var(--mint) 45%,transparent)}
.cut.cb,.cut.cc{color:var(--violet-t);background:color-mix(in oklab,var(--violet) 14%,transparent);border:1px solid color-mix(in oklab,var(--violet) 45%,transparent)}
@media (max-width:420px){.rate{font-size:.95rem;padding:4px 8px}.cut{font-size:.72rem;padding:2px 7px}.tn{padding:10px 6px}.tr-row.two{gap:8px}}
.tier-more{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:var(--fs-sm);font-weight:600;color:var(--muted)}
.tier-more .i{width:18px;height:18px;padding:2px;border-radius:50%;border:1.5px dashed var(--line)}
@media screen and (prefers-reduced-motion:no-preference){
.js-anim .tree:not(.play) .tn{opacity:.3;translate:0 6px}
.js-anim .tree:not(.play) .cut{opacity:0;scale:.6}
.tree.play .tr-row:nth-last-of-type(1) .tn{transition-delay:.05s}.tree.play .tr-row:nth-last-of-type(2) .tn{transition-delay:.5s}
.tree.play .tr-row:nth-of-type(2) .tn{transition-delay:.95s}.tree.play .tr-row:nth-of-type(1) .tn{transition-delay:1.35s}
.tree.play .cut.cb,.tree.play .cut.cc{transition-delay:.35s}.tree.play .cut.ca{transition-delay:.8s}
}
/* the calculator: the same made-up rates on an amount the reader picks */
.calc{display:flex;flex-direction:column;gap:14px;padding:clamp(20px,3vw,30px)}
.calc-h{font-weight:650;font-size:1.05rem}
.calc-h b{font:700 1.5rem/1 Inter,var(--font);font-variant-numeric:tabular-nums;color:var(--mint-t)}
.calc-range{width:100%;height:28px;margin:0;accent-color:#3EE6B5;cursor:pointer}
.calc-t{width:100%;border-collapse:collapse}
.calc-t th,.calc-t td{padding:10px 6px;border-top:1px solid var(--line);text-align:right;font-variant-numeric:tabular-nums}
.calc-t thead th{border-top:0;padding-top:0;font-size:var(--fs-xs);font-weight:650;color:var(--muted)}
.calc-t tbody th{text-align:left;font-weight:500;color:var(--muted)}
.calc-t td{font:650 1.05rem/1.2 Inter,var(--font);color:var(--text)}
.calc-t tbody th::before{content:"";display:inline-block;width:10px;height:10px;margin-right:9px;border-radius:3px;vertical-align:.05em;background:var(--line)}
.calc-t .cf th{color:var(--text);font-weight:650}.calc-t .cf th::before{background:var(--amber)}
.calc-t .c0 th::before{background:#4CC9F0}.calc-t .c1 th::before{background:#3EE6B5}.calc-t .c2 th::before{background:#8B7BFF}
.calc-t td.bump,.calc-sum b.bump{animation:bump .35s var(--ease)}
@keyframes bump{40%{transform:translateY(-3px);color:var(--mint-t)}}
.calc-sum{margin-top:4px;padding:12px 14px;border-radius:14px;font-weight:600;background:color-mix(in oklab,var(--mint) 10%,transparent);border:1px solid color-mix(in oklab,var(--mint) 35%,transparent)}
.calc-sum b{display:inline-block;font:700 1.2rem/1 Inter,var(--font);color:var(--mint-t)}
/* negative limits down the tree · the pool owner's back office */
.lim-grid{display:grid;gap:16px;margin-top:20px}
@media (min-width:960px){.lim-grid{grid-template-columns:1fr 1fr;gap:20px}}
.lim,.portal{padding:clamp(20px,3vw,30px)}
.lim h3,.portal h3{display:flex;align-items:center;gap:10px}
.lim h3 .i,.portal h3 .i{color:var(--mint-t)}
.lim-l{margin-top:6px;color:var(--muted)}
.lim-bar{display:flex;gap:3px;height:16px;margin-top:18px;border-radius:999px;overflow:hidden}
.lim-bar i{display:block;height:100%;transform-origin:0 50%;transition:transform .7s var(--ease)}
.lim-bar .l1,.lim-k .l1::before{background:#3EE6B5}.lim-bar .l2,.lim-k .l2::before{background:#8B7BFF}.lim-bar .l3,.lim-k .l3::before{background:#4CC9F0}
.lim-bar .l4,.lim-k .l4::before{background:repeating-linear-gradient(135deg,var(--line) 0 4px,transparent 4px 8px);border:1px solid var(--line)}
.lim-bar .l1{width:40%}.lim-bar .l2{width:30%}.lim-bar .l3{width:20%}.lim-bar .l4{width:10%}
.lim-bar .l2{transition-delay:.15s}.lim-bar .l3{transition-delay:.3s}.lim-bar .l4{transition-delay:.45s}
@media screen and (prefers-reduced-motion:no-preference){.js-anim .lim:not(.play) .lim-bar i{transform:scaleX(0)}}
.lim-k{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;font-size:var(--fs-xs);color:var(--muted)}
.lim-k li{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.lim-k li::before{content:"";width:10px;height:10px;border-radius:3px}
.lim .bl,.portal .bl{margin-top:16px;gap:10px}
.lim .bl li,.portal .bl li{font-size:var(--fs-sm)}
.bills-n{margin-top:16px}
/* what a reseller does */
.g-rules{display:grid;gap:12px;margin-top:20px}
@media (min-width:640px){.g-rules{grid-template-columns:1fr 1fr;gap:14px}}
@media (min-width:1080px){.g-rules{grid-template-columns:repeat(3,1fr);gap:16px}}
.g-rules li{display:flex;gap:14px;align-items:flex-start;padding:18px 20px;border-radius:18px;background:var(--surface);border:1px solid var(--line)}
.g-rules li>.i{flex:none;width:36px;height:36px;padding:7px;border-radius:11px;color:var(--mint-t);background:color-mix(in oklab,var(--mint) 13%,transparent)}
.g-rules h3{font-size:1.02rem;margin-bottom:4px}
.g-rules p{font-size:var(--fs-sm);color:var(--muted)}
/* billing, step by step */
.bills{margin-top:clamp(40px,5vw,64px)}
.bills-h{margin-bottom:22px}
.bills-t{display:flex;align-items:center;gap:10px;font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem)}
.bills-t .i{width:30px;height:30px;color:var(--violet-t)}
.bills-h p{margin-top:6px;color:var(--muted)}
.bill-steps{position:relative;display:grid;gap:18px}
.bill-steps::before{content:"";position:absolute;left:21px;top:22px;bottom:22px;width:2px;background:var(--line)}
.bill-steps::after{content:"";position:absolute;left:21px;top:22px;bottom:22px;width:2px;background:linear-gradient(180deg,var(--mint),var(--cyan),var(--violet));transform-origin:0 0;transition:transform 1.6s var(--ease) .2s}
.bill-steps li{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);gap:2px 14px}
.bill-steps b{grid-column:2;align-self:center;font-weight:650}
.bill-steps li>span:last-child{grid-column:2;font-size:var(--fs-sm);color:var(--muted)}
.bs-dot{grid-row:span 2;position:relative;z-index:1;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--mint-t);background:var(--surface);border:1.5px solid color-mix(in oklab,var(--mint) 55%,transparent);box-shadow:0 0 0 5px var(--bg)}
.bs-dot .i{width:20px;height:20px}
.bs-dot.ok{color:var(--surface);background:var(--mint-t);border-color:transparent}
.bs-dot.ok .i{stroke-width:2.6}
@media (min-width:960px){
.bill-steps{grid-template-columns:repeat(5,1fr);gap:20px}
.bill-steps::before,.bill-steps::after{left:22px;right:calc(20% - 2px);top:21px;bottom:auto;width:auto;height:2px}
.bill-steps::after{background:linear-gradient(90deg,var(--mint),var(--cyan),var(--violet))}
.bill-steps li{grid-template-columns:1fr;gap:6px;align-content:start}
.bill-steps b{align-self:start}
.bill-steps b,.bill-steps li>span:last-child{grid-column:1}
.bs-dot{grid-row:auto;margin-bottom:8px}
}
@media screen and (prefers-reduced-motion:no-preference){
.js-anim .bill-steps:not(.play)::after{transform:scale(1,0)}
}
@media (min-width:960px) and (prefers-reduced-motion:no-preference){.js-anim .bill-steps:not(.play)::after{transform:scale(0,1)}}
/* ---------- O-100 light theme: every section follows the theme ---------- */
/* The dark islands (.ink: hero, API, contact box, footer, nav over the hero) turn light when the light theme is in force — chosen
   with the toggle (data-theme=light) or, with no choice, following a device that is not dark. The dark theme is unchanged. The code
   panel of the API section stays a dark editor in both themes (its colours are its own). */
:root[data-theme=light] .ink{--text:#0A1126;--muted:#48526F;--line:rgba(12,20,45,.12);--surface:#FFFFFF;--surface2:#EAEEF6;--mint-t:#067A5D;--violet-t:#5A3FD4;--amber-t:#8A5200;--cyan-t:#0A6C8C;--rose-t:#B4234A;--hA:rgba(18,186,140,.62);--hB:rgba(12,20,45,.08);--hC:rgba(108,88,240,.55);--focus:#5A3FD4;--nav-bg:rgba(255,255,255,.94);--shadow:0 1px 2px rgba(10,17,38,.05),0 14px 36px -16px rgba(10,17,38,.22);color-scheme:light}
:root[data-theme=light] .ink .nb,:root[data-theme=light] .ink .nb.two{color:#FFFFFF}
:root[data-theme=light] .hero{background:linear-gradient(180deg,#E9F6F2 0%,#EEEEFC 60%,#F3F5FA 100%)}
:root[data-theme=light] .aurora i{opacity:.42}
:root[data-theme=light] .hero{--fx:18,150,115}
:root[data-theme=light] .fl{background:rgba(255,255,255,.94);border-color:rgba(12,20,45,.1);box-shadow:0 16px 36px -18px rgba(10,17,38,.4)}
:root[data-theme=light] .stat{background:rgba(255,255,255,.72)}
:root[data-theme=light] .grid-bg{background-image:linear-gradient(rgba(12,20,45,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(12,20,45,.05) 1px,transparent 1px)}
:root[data-theme=light] .grad{background:linear-gradient(100deg,#0E9F78 0%,#0A7FA6 55%,#5A3FD4 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
:root[data-theme=light] .console{background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(247,249,253,.96)) padding-box,conic-gradient(from var(--angle),rgba(18,186,140,.75),rgba(76,201,240,.3),rgba(108,88,240,.7),rgba(76,201,240,.3),rgba(18,186,140,.75)) border-box;box-shadow:0 40px 80px -40px rgba(10,17,38,.35),0 0 60px -30px rgba(18,186,140,.3)}
:root[data-theme=light] .hero-vis::before{border-color:rgba(108,88,240,.22);background:linear-gradient(135deg,rgba(108,88,240,.07),rgba(18,186,140,.05))}
:root[data-theme=light] .con-head{border-bottom-color:rgba(12,20,45,.08)}
:root[data-theme=light] .con-title{color:#0A1126}
:root[data-theme=light] .stage{background:radial-gradient(90% 80% at 50% 40%,rgba(18,186,140,.1),transparent 70%),#F4F7FC;border-color:rgba(12,20,45,.08)}
:root[data-theme=light] .track{stroke:rgba(12,20,45,.2)}
:root[data-theme=light] #h-p1,:root[data-theme=light] #h-p2{stroke:#12B488}
:root[data-theme=light] #h-p3{stroke:#6C58F0}
:root[data-theme=light] .ring{stroke:#12B488}
:root[data-theme=light] .core-disc{fill:#FFFFFF}
:root[data-theme=light] .node{color:#0A1126;background:#FFFFFF;border-color:rgba(12,20,45,.12);box-shadow:0 8px 20px -12px rgba(10,17,38,.3)}
:root[data-theme=light] .node .av{color:#067A5D;background:rgba(18,186,140,.14)}
:root[data-theme=light] .node.wd .av{color:#5A3FD4;background:rgba(108,88,240,.14)}
:root[data-theme=light] .node.qr{color:#48526F}
:root[data-theme=light] .node.qr .i{color:#0A6C8C}
:root[data-theme=light] .pop{color:#056C52;background:#E3F7F0;border-color:rgba(18,186,140,.5);box-shadow:0 8px 20px -10px rgba(18,186,140,.45)}
:root[data-theme=light] .pop.blue{color:#0A6C8C;background:#E6F4FA;border-color:rgba(10,108,140,.35);box-shadow:0 8px 20px -10px rgba(10,108,140,.35)}
:root[data-theme=light] .pop.vio{color:#4B32BE;background:#F0EDFF;border-color:rgba(108,88,240,.4);box-shadow:0 8px 20px -10px rgba(108,88,240,.4)}
:root[data-theme=light] .tag-sample{color:#7A4A00;background:#FFF4DE;border-color:#F2CF8E}
:root[data-theme=light] .island{background:linear-gradient(180deg,#EFEDFD 0%,#EAF6F2 100%)}
:root[data-theme=light] .island::before{opacity:.35}
:root[data-theme=light] .island::after{background-image:linear-gradient(rgba(12,20,45,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(12,20,45,.05) 1px,transparent 1px)}
:root[data-theme=light] .checks code,:root[data-theme=light] .xline code{color:#4B32BE;background:rgba(108,88,240,.12)}
:root[data-theme=light] .xline .i{color:#5A3FD4}
:root[data-theme=light] .cap code,:root[data-theme=light] .fields dt code{color:#4B32BE}
:root[data-theme=light] .fields div{background:#FFFFFF;border-color:rgba(12,20,45,.1)}
:root[data-theme=light] .code{box-shadow:0 30px 60px -30px rgba(10,17,38,.45),0 0 50px -30px rgba(108,88,240,.45)}
:root[data-theme=light] .cbox{background:linear-gradient(#FFFFFF,#FFFFFF) padding-box,conic-gradient(from var(--angle),#3EE6B5,rgba(76,201,240,.3),#8B7BFF,rgba(76,201,240,.3),#3EE6B5) border-box;box-shadow:0 40px 90px -45px rgba(10,17,38,.35)}
:root[data-theme=light] .cbox::before{opacity:.35}
:root[data-theme=light] .chan{background:#F7F9FC;border-color:rgba(12,20,45,.1);box-shadow:0 10px 30px -22px rgba(10,17,38,.35)}
:root[data-theme=light] .cempty{background:#F3F5FA;border-color:rgba(12,20,45,.2)}
:root[data-theme=light] .foot{background:#E8ECF4;border-top:1px solid rgba(12,20,45,.08)}
:root[data-theme=light] .cpage{background:var(--bg)}
@media not all and (prefers-color-scheme:dark){
:root:not([data-theme=dark]) .ink{--text:#0A1126;--muted:#48526F;--line:rgba(12,20,45,.12);--surface:#FFFFFF;--surface2:#EAEEF6;--mint-t:#067A5D;--violet-t:#5A3FD4;--amber-t:#8A5200;--cyan-t:#0A6C8C;--rose-t:#B4234A;--hA:rgba(18,186,140,.62);--hB:rgba(12,20,45,.08);--hC:rgba(108,88,240,.55);--focus:#5A3FD4;--nav-bg:rgba(255,255,255,.94);--shadow:0 1px 2px rgba(10,17,38,.05),0 14px 36px -16px rgba(10,17,38,.22);color-scheme:light}
:root:not([data-theme=dark]) .ink .nb,:root:not([data-theme=dark]) .ink .nb.two{color:#FFFFFF}
:root:not([data-theme=dark]) .hero{background:linear-gradient(180deg,#E9F6F2 0%,#EEEEFC 60%,#F3F5FA 100%)}
:root:not([data-theme=dark]) .aurora i{opacity:.42}
:root:not([data-theme=dark]) .hero{--fx:18,150,115}
:root:not([data-theme=dark]) .fl{background:rgba(255,255,255,.94);border-color:rgba(12,20,45,.1);box-shadow:0 16px 36px -18px rgba(10,17,38,.4)}
:root:not([data-theme=dark]) .stat{background:rgba(255,255,255,.72)}
:root:not([data-theme=dark]) .grid-bg{background-image:linear-gradient(rgba(12,20,45,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(12,20,45,.05) 1px,transparent 1px)}
:root:not([data-theme=dark]) .grad{background:linear-gradient(100deg,#0E9F78 0%,#0A7FA6 55%,#5A3FD4 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
:root:not([data-theme=dark]) .console{background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(247,249,253,.96)) padding-box,conic-gradient(from var(--angle),rgba(18,186,140,.75),rgba(76,201,240,.3),rgba(108,88,240,.7),rgba(76,201,240,.3),rgba(18,186,140,.75)) border-box;box-shadow:0 40px 80px -40px rgba(10,17,38,.35),0 0 60px -30px rgba(18,186,140,.3)}
:root:not([data-theme=dark]) .hero-vis::before{border-color:rgba(108,88,240,.22);background:linear-gradient(135deg,rgba(108,88,240,.07),rgba(18,186,140,.05))}
:root:not([data-theme=dark]) .con-head{border-bottom-color:rgba(12,20,45,.08)}
:root:not([data-theme=dark]) .con-title{color:#0A1126}
:root:not([data-theme=dark]) .stage{background:radial-gradient(90% 80% at 50% 40%,rgba(18,186,140,.1),transparent 70%),#F4F7FC;border-color:rgba(12,20,45,.08)}
:root:not([data-theme=dark]) .track{stroke:rgba(12,20,45,.2)}
:root:not([data-theme=dark]) #h-p1,:root:not([data-theme=dark]) #h-p2{stroke:#12B488}
:root:not([data-theme=dark]) #h-p3{stroke:#6C58F0}
:root:not([data-theme=dark]) .ring{stroke:#12B488}
:root:not([data-theme=dark]) .core-disc{fill:#FFFFFF}
:root:not([data-theme=dark]) .node{color:#0A1126;background:#FFFFFF;border-color:rgba(12,20,45,.12);box-shadow:0 8px 20px -12px rgba(10,17,38,.3)}
:root:not([data-theme=dark]) .node .av{color:#067A5D;background:rgba(18,186,140,.14)}
:root:not([data-theme=dark]) .node.wd .av{color:#5A3FD4;background:rgba(108,88,240,.14)}
:root:not([data-theme=dark]) .node.qr{color:#48526F}
:root:not([data-theme=dark]) .node.qr .i{color:#0A6C8C}
:root:not([data-theme=dark]) .pop{color:#056C52;background:#E3F7F0;border-color:rgba(18,186,140,.5);box-shadow:0 8px 20px -10px rgba(18,186,140,.45)}
:root:not([data-theme=dark]) .pop.blue{color:#0A6C8C;background:#E6F4FA;border-color:rgba(10,108,140,.35);box-shadow:0 8px 20px -10px rgba(10,108,140,.35)}
:root:not([data-theme=dark]) .pop.vio{color:#4B32BE;background:#F0EDFF;border-color:rgba(108,88,240,.4);box-shadow:0 8px 20px -10px rgba(108,88,240,.4)}
:root:not([data-theme=dark]) .tag-sample{color:#7A4A00;background:#FFF4DE;border-color:#F2CF8E}
:root:not([data-theme=dark]) .island{background:linear-gradient(180deg,#EFEDFD 0%,#EAF6F2 100%)}
:root:not([data-theme=dark]) .island::before{opacity:.35}
:root:not([data-theme=dark]) .island::after{background-image:linear-gradient(rgba(12,20,45,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(12,20,45,.05) 1px,transparent 1px)}
:root:not([data-theme=dark]) .checks code,:root:not([data-theme=dark]) .xline code{color:#4B32BE;background:rgba(108,88,240,.12)}
:root:not([data-theme=dark]) .xline .i{color:#5A3FD4}
:root:not([data-theme=dark]) .cap code,:root:not([data-theme=dark]) .fields dt code{color:#4B32BE}
:root:not([data-theme=dark]) .fields div{background:#FFFFFF;border-color:rgba(12,20,45,.1)}
:root:not([data-theme=dark]) .code{box-shadow:0 30px 60px -30px rgba(10,17,38,.45),0 0 50px -30px rgba(108,88,240,.45)}
:root:not([data-theme=dark]) .cbox{background:linear-gradient(#FFFFFF,#FFFFFF) padding-box,conic-gradient(from var(--angle),#3EE6B5,rgba(76,201,240,.3),#8B7BFF,rgba(76,201,240,.3),#3EE6B5) border-box;box-shadow:0 40px 90px -45px rgba(10,17,38,.35)}
:root:not([data-theme=dark]) .cbox::before{opacity:.35}
:root:not([data-theme=dark]) .chan{background:#F7F9FC;border-color:rgba(12,20,45,.1);box-shadow:0 10px 30px -22px rgba(10,17,38,.35)}
:root:not([data-theme=dark]) .cempty{background:#F3F5FA;border-color:rgba(12,20,45,.2)}
:root:not([data-theme=dark]) .foot{background:#E8ECF4;border-top:1px solid rgba(12,20,45,.08)}
:root:not([data-theme=dark]) .cpage{background:var(--bg)}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition-duration:1ms!important;transition-delay:0s!important}html{scroll-behavior:auto}.rp,#rreplay,#hpause{display:none!important}}
@media print{.nav,.fab,.aurora,.grid-bg,.mini-btn,.copy,.rp{display:none!important}.rv{opacity:1!important;translate:none!important}.hero,.island,.cbox,.foot{-webkit-print-color-adjust:exact;print-color-adjust:exact}.qa::details-content{block-size:auto;content-visibility:visible}.js .code pre{display:block!important}}
.hero-in>*,.api-grid>*,.hosted>*,.route>*,.rsv>*,.route-row>*,.band>*,.foot-in>*,.bento>*{min-width:0}
@media (max-width:440px){.con-title .ct,.console .dots{display:none}}
@media (max-width:480px){.code-head .dots{display:none}.code-head{position:relative;padding-left:6px;gap:6px}.ctabs [role=tab]{padding-inline:7px;white-space:normal;line-height:1.3;text-align:center}.code-head .copy{position:absolute;z-index:1;right:8px;top:calc(100% + 8px);margin:0;background:#111831}}
@media (max-width:767px){.code pre{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}}
/* O-98 contact page (/contact · /en/contact): the contact box of the landing page on its own, below the fixed bar */
.cpage{min-height:100vh;display:flex;flex-direction:column;background:var(--ink)}
.cpage main{flex:1}
.cpage-main{padding-top:clamp(104px,12vw,148px)}
.cpage-main h1{font-size:var(--fs-h2);line-height:1.3;font-weight:650;margin:.35em 0 0;text-wrap:balance}
:lang(en) .cpage-main h1{letter-spacing:-.02em;line-height:1.15}
.cpage-main .chan h2{font-size:var(--fs-h3);line-height:1.4;font-weight:650}
.cempty{margin:32px auto 0;max-width:420px;padding:18px 20px;border-radius:18px;background:rgba(255,255,255,.05);border:1px dashed rgba(255,255,255,.22);color:var(--muted);line-height:1.6}
.cback{margin-top:32px}