/* xanai · 云海 Cloud Sea design system (v14). One file for every page and the app. Dark only.
   The pages sit over a live landscape (assets/js/scene.js): quartz sandstone pillars in a sea of clouds. Colours after the genius
   palette (ink, violet cards, pink, lilac, mint for live). Faces: DM Serif Display for titles, Inter for text, JetBrains Mono for labels,
   Ma Shan Zheng for the brush characters (decoration only, aria-hidden), Noto Serif CJK cut per language for CJK titles.
   Sections: fonts, tokens, base, stage, header, buttons, cut, status bar, page head, sections, components, pages, footer, dialogs,
   voice, the app, languages, responsive. Breakpoints: 1280, 1100, 900, 640, 400. */

/* ---------- fonts (SIL OFL; fontsource files, data only) ---------- */
@font-face{font-family:'DM Serif Display';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/dm-serif-display-latin-400-normal.woff2) 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:'DM Serif Display';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/dm-serif-display-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'DM Serif Display';font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/dm-serif-display-latin-400-italic.woff2) 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:'DM Serif Display';font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/dm-serif-display-latin-ext-400-italic.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/inter-latin-wght-normal.woff2) 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:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/inter-latin-ext-wght-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/inter-vietnamese-wght-normal.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;src:url(/assets/fonts/jetbrains-mono-latin-wght-normal.woff2) 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:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;src:url(/assets/fonts/jetbrains-mono-latin-ext-wght-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;src:url(/assets/fonts/jetbrains-mono-vietnamese-wght-normal.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 900;font-display:swap;src:url(/assets/fonts/playfair-display-latin-normal.woff2) 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:'Playfair Display';font-style:normal;font-weight:400 900;font-display:swap;src:url(/assets/fonts/playfair-display-vi-normal.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:400 900;font-display:swap;src:url(/assets/fonts/playfair-display-latin-italic.woff2) 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:'Playfair Display';font-style:italic;font-weight:400 900;font-display:swap;src:url(/assets/fonts/playfair-display-vi-italic.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'xanai Brush';font-style:normal;font-weight:400;font-display:block;src:url(/assets/fonts/ma-shan-zheng-brush.woff2) format('woff2')}
@font-face{font-family:'xanai Serif SC';font-style:normal;font-weight:400 900;font-display:swap;src:url(/assets/fonts/cjk/serif-zh-hans.woff2) format('woff2');size-adjust:88%}
@font-face{font-family:'xanai Serif TC';font-style:normal;font-weight:400 900;font-display:swap;src:url(/assets/fonts/cjk/serif-zh-hant.woff2) format('woff2');size-adjust:88%}
@font-face{font-family:'xanai Serif HK';font-style:normal;font-weight:400 900;font-display:swap;src:url(/assets/fonts/cjk/serif-yue.woff2) format('woff2');size-adjust:88%}
@font-face{font-family:'xanai Serif JP';font-style:normal;font-weight:400 900;font-display:swap;src:url(/assets/fonts/cjk/serif-ja.woff2) format('woff2');size-adjust:88%}
@font-face{font-family:'xanai Serif KR';font-style:normal;font-weight:400 900;font-display:swap;src:url(/assets/fonts/cjk/serif-ko.woff2) format('woff2');size-adjust:88%}

/* ---------- tokens ---------- */
:root{
  color-scheme:dark;
  --ink:#060112; --night:#0c071c; --deep:#120a24;
  --tx:#f4eefa; --tx2:rgba(244,238,250,.86); --mu:#ada3c4; --mu2:#857c9e;
  --line:rgba(236,226,255,.09); --line2:rgba(236,226,255,.17); --line3:rgba(236,226,255,.26);
  --pink:#f07aa5; --pinkhi:#ff9cc2; --pinkd:#b8406c; --onpink:#2b0718; --rose:#ef8db3;
  --lilac:#b49cff; --lilacd:#7d5fd0; --blue:#7aa6f6; --mint:#75fa94; --amber:#ffc59e; --red:#ff7a8a;
  --glass:rgba(17,10,34,.62); --glass2:rgba(20,13,38,.76); --solid:rgba(14,9,28,.92); --card:#140d27; --card2:#1b1331;
  --pop:#150d28; --hover:rgba(255,255,255,.065); --toast:#1c1331; --statusbg:rgba(6,1,18,.86); --live:#75fa94; --focus:#ffb3d0;
  --tprivate:#ff97bf; --tanon:#bfa9ff;
  --glyph:linear-gradient(180deg,#fff0f6 0%,#ff9cc6 30%,#f2639f 62%,#a35ce6 100%); --glyphglow:rgba(214,70,140,.55);
  --emg:linear-gradient(180deg,#ffffff 8%,#ffd6e6 46%,#ff9fc6 100%);
  --fd:'DM Serif Display','Iowan Old Style',Georgia,serif;
  --fb:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --fm:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --fz:'xanai Serif SC','Noto Serif SC','Songti SC','STSong',serif;
  --fbrush:'xanai Brush','Ma Shan Zheng','STKaiti','KaiTi',serif;
  --max:1280px; --gut:32px; --hh:76px; --sb:36px; --r:16px; --r2:22px;
  --blur:saturate(1.35) blur(18px);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--ink);-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--hh) + 16px)}
body{margin:0;min-height:100svh;background:var(--ink);color:var(--tx);font:400 16px/1.6 var(--fb);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg,canvas,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:8px}
h1,h2,h3,h4,p,dl,dd,ol,ul,figure,blockquote{margin:0}
ol,ul{padding:0;list-style:none}
table{border-collapse:collapse;width:100%}
code,pre,kbd{font-family:var(--fm)}
::selection{background:rgba(240,122,165,.42);color:#fff}
[hidden]{display:none!important}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;left:12px;top:-60px;z-index:300;padding:10px 14px;border-radius:10px;background:var(--pink);color:var(--onpink);font:600 13px/1 var(--fb)}
.skip:focus{top:calc(10px + env(safe-area-inset-top,0px));clip:auto;clip-path:none;width:auto;height:auto}
.num{font-variant-numeric:tabular-nums}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding-left:max(var(--gut),env(safe-area-inset-left,0px));padding-right:max(var(--gut),env(safe-area-inset-right,0px))}
main{position:relative;z-index:2;display:block}

/* type */
.d1{font:400 clamp(64px,9.2vw,140px)/.95 var(--fd);letter-spacing:-.012em;color:#fff6fb;text-wrap:balance;text-shadow:0 4px 40px rgba(20,5,40,.38)}
.d2{font:400 clamp(46px,5.6vw,88px)/1 var(--fd);letter-spacing:-.01em;color:#fff6fb;text-wrap:balance;text-shadow:0 4px 34px rgba(20,5,40,.4)}
.h2{font:400 clamp(34px,3.7vw,56px)/1.04 var(--fd);letter-spacing:-.006em;color:#fff6fb;text-wrap:balance}
.h3{font:400 clamp(24px,2.1vw,32px)/1.12 var(--fd);color:#fff6fb;text-wrap:balance}
.d1 em,.d2 em,.h2 em,.h3 em{font-style:italic;background:var(--emg);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.pl{font-family:var(--fd);font-style:normal;color:inherit}
.lead{max-width:62ch;font:400 clamp(16px,1.2vw,19px)/1.62 var(--fb);color:var(--tx2);text-wrap:pretty}
.mono{font:500 12px/1.5 var(--fm);letter-spacing:.04em;color:var(--mu)}
.mu{color:var(--mu)}
.note{font:400 13px/1.55 var(--fb);color:var(--mu)}
.lk2{color:var(--pinkhi);box-shadow:inset 0 -1px 0 rgba(255,156,194,.42);transition:color .2s,box-shadow .2s}
.lk2:hover{color:#fff;box-shadow:inset 0 -1px 0 #fff}
/* the eyebrow: a brush character in a small seal (data-g), then the label in tracked mono */
.sl{display:inline-flex;align-items:center;gap:12px;font:600 11.5px/1.3 var(--fm);letter-spacing:.3em;text-transform:uppercase;color:var(--pinkhi)}
.sl[data-g]::before{content:attr(data-g);display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:8px;background:linear-gradient(180deg,#ff94bb,#e0578c);color:#fff;font:400 21px/1 var(--fbrush);letter-spacing:0;text-transform:none;box-shadow:0 8px 22px rgba(224,87,140,.32),inset 0 1px 0 rgba(255,255,255,.35)}

/* ---------- the stage: the landscape behind every page (scene.js), its still when WebGL is not there, and a veil that deepens on scroll ---------- */
.stage{position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--ink);overflow:hidden}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.1s ease}
.scene-on .stage canvas{opacity:1}
.stage .still{position:absolute;inset:0;background:var(--ink) center/cover no-repeat;opacity:0;transition:opacity .8s}
.no-gl .stage .still,.scene-wait .stage .still{opacity:1}
.stage::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,1,18,.0) 0%,rgba(6,1,18,.5) 46%,rgba(6,1,18,.92) 100%);opacity:calc(var(--v0,.1) + var(--sc,0) * var(--v1,.85));pointer-events:none}
.stage::before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(120% 80% at 50% 0%,transparent 55%,rgba(6,1,18,.45) 100%);pointer-events:none}
.pg .stage{--v0:.2}
.pg.read .stage{--v0:.35;--v1:.6}

/* ---------- header ---------- */
.hd{position:fixed;inset:0 0 auto;z-index:80;padding-top:env(safe-area-inset-top,0px);transition:background .3s,box-shadow .3s,-webkit-backdrop-filter .3s,backdrop-filter .3s}
.hd.solid,.menu-on .hd{background:rgba(9,4,20,.74);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:0 1px 0 var(--line)}
.hd>.wrap{height:var(--hh);display:flex;align-items:center;gap:26px;max-width:1440px}
.lk{display:inline-flex;align-items:center;gap:10px;line-height:0;flex:none}
.lk svg{flex:none}
.lk .wm-bar{display:block;width:1px;height:19px;margin:0 3px;background:rgba(240,122,165,.55)}
.hd nav{display:flex;gap:2px;margin:0 auto;min-width:0}
.hd nav a{position:relative;padding:10px 12px;font:500 14.5px/1 var(--fb);color:var(--mu);white-space:nowrap;transition:color .2s}
.hd nav a:hover{color:var(--tx)}
.hd nav a[aria-current="page"]{color:var(--tx)}
.hd nav a[aria-current="page"]::after{content:"";position:absolute;left:12px;right:12px;bottom:1px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--pinkhi),var(--lilac))}
.tr{display:flex;align-items:center;gap:14px;flex:none}
.lang{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 12px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line2);font:600 12px/1 var(--fm);letter-spacing:.1em;color:var(--tx);transition:background .2s}
.lang:hover,.lang[aria-expanded="true"]{background:var(--hover)}
.lang .i-chev{opacity:.7}
.li{font:500 14.5px/1 var(--fb);color:var(--mu);white-space:nowrap;transition:color .2s} .li:hover{color:var(--tx)}
.mb{display:none;width:44px;height:44px;border-radius:12px;place-items:center;box-shadow:inset 0 0 0 1px var(--line2);color:var(--tx)}
.mb i,.mb i::before,.mb i::after{display:block;width:18px;height:1.6px;border-radius:2px;background:currentColor}
.mb i{position:relative;background:transparent} .mb i::before,.mb i::after{content:"";position:absolute;left:0} .mb i::before{top:-4px} .mb i::after{top:4px}
/* the phone menu: a full sheet over the landscape */
.menu{position:fixed;inset:0;z-index:120;display:flex;flex-direction:column;gap:8px;padding:env(safe-area-inset-top,0px) 0 calc(18px + env(safe-area-inset-bottom,0px));background:rgba(8,3,18,.94);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);overflow:auto;animation:menu-in .32s cubic-bezier(.2,.7,.2,1)}
@keyframes menu-in{from{opacity:0;transform:translateY(-8px)}}
.menu .top{height:var(--hh);display:flex;align-items:center;justify-content:space-between}
.menu .x{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--line2);font:300 28px/1 var(--fb);color:var(--tx)}
.menu nav{display:grid}
.menu nav a{display:flex;align-items:baseline;gap:14px;padding:13px 0;font:400 32px/1.1 var(--fd);color:var(--tx);border-bottom:1px solid var(--line)}
.menu nav a[aria-current="page"]{color:var(--pinkhi)}
.menu nav a::after{content:attr(data-g);margin-left:auto;font:400 22px/1 var(--fbrush);color:rgba(255,156,194,.55)}
.menu .bt{display:grid;gap:10px;margin-top:auto;padding-top:18px}
.menu .duo{display:grid;gap:10px}

/* ---------- buttons, tags, chips, inputs ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:44px;padding:0 20px;border-radius:12px;font:700 12.5px/1 var(--fm);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;transition:transform .15s,box-shadow .2s,background .2s,color .2s}
.btn.sm{height:38px;padding:0 15px;border-radius:10px;font-size:11.5px}
.btn.lg{height:52px;padding:0 26px;border-radius:14px;font-size:13px}
.btn.full{width:100%}
.btn.pri{background:linear-gradient(180deg,var(--pinkhi),var(--pink) 60%);color:var(--onpink);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -3px 0 rgba(120,20,60,.35),0 8px 24px rgba(240,122,165,.28)}
.btn.pri:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -3px 0 rgba(120,20,60,.35),0 12px 30px rgba(240,122,165,.38)}
.btn.pri:active{transform:translateY(1px)}
.btn.out{color:var(--tx);box-shadow:inset 0 0 0 1px var(--line2);background:rgba(255,255,255,.025)}
.btn.out:hover{background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px var(--line3)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
.chips{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.chip{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line2);background:rgba(255,255,255,.03);font:600 12px/1 var(--fm);letter-spacing:.06em;color:var(--tx);white-space:nowrap;transition:background .2s,box-shadow .2s}
a.chip:hover,button.chip:hover{background:var(--hover)}
.chip.tk{color:var(--pinkhi)}
button.chip[aria-checked="true"],.chip.on{background:rgba(240,122,165,.16);box-shadow:inset 0 0 0 1px rgba(255,156,194,.6);color:#fff}
.tg{display:inline-flex;align-items:center;gap:7px;height:24px;padding:0 10px;border-radius:7px;font:600 10.5px/1 var(--fm);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;color:var(--lilac);background:rgba(180,156,255,.12);box-shadow:inset 0 0 0 1px rgba(180,156,255,.3)}
.tg.private,.tg.anon{gap:6px}
.tg.private::before,.tg.anon::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.tg.private{color:var(--tprivate);background:rgba(255,151,191,.12);box-shadow:inset 0 0 0 1px rgba(255,151,191,.32)}
.tg.anon{color:var(--tanon);background:rgba(191,169,255,.12);box-shadow:inset 0 0 0 1px rgba(191,169,255,.32)}
.tg.ok{color:var(--mint);background:rgba(117,250,148,.1);box-shadow:inset 0 0 0 1px rgba(117,250,148,.3)}
.tg.soon{color:var(--amber);background:rgba(255,197,158,.1);box-shadow:inset 0 0 0 1px rgba(255,197,158,.3)}
.tgs{display:flex;flex-wrap:wrap;gap:8px}
.tn{font-weight:600}.tn.private{color:var(--tprivate)}.tn.anon{color:var(--tanon)}
.badge{display:inline-flex;align-items:center;gap:8px;height:26px;padding:0 11px;border-radius:999px;font:600 11px/1 var(--fm);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.badge.ok{color:var(--mint);background:rgba(117,250,148,.1);box-shadow:inset 0 0 0 1px rgba(117,250,148,.32)}
.badge.wait{color:var(--amber);background:rgba(255,197,158,.1);box-shadow:inset 0 0 0 1px rgba(255,197,158,.32)}
.badge.no{color:var(--red);background:rgba(255,122,138,.1);box-shadow:inset 0 0 0 1px rgba(255,122,138,.32)}
.lb{display:grid;gap:8px;font:600 11px/1.3 var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--mu)}
.lb small{font:500 11px/1 var(--fb);letter-spacing:0;text-transform:none;color:var(--mu2)}
.in{width:100%;height:46px;padding:0 14px;border:0;border-radius:12px;background:rgba(6,1,18,.55);box-shadow:inset 0 0 0 1px var(--line2);font:400 15px/1.4 var(--fb);letter-spacing:0;text-transform:none;color:var(--tx);outline:0;transition:box-shadow .2s,background .2s}
.in:hover{box-shadow:inset 0 0 0 1px var(--line3)}
.in:focus{box-shadow:inset 0 0 0 1px rgba(255,156,194,.75),0 0 0 4px rgba(240,122,165,.14);background:rgba(6,1,18,.7)}
.in::placeholder{color:rgba(222,206,240,.42)}
.in[aria-invalid="true"]{box-shadow:inset 0 0 0 1px rgba(255,122,138,.8)}
textarea.in{height:auto;min-height:110px;padding:12px 14px;resize:vertical}
select.in{appearance:none;-webkit-appearance:none;padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5l3-3' fill='none' stroke='%23d6cdea' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
select.in option,select.in optgroup{background:#150d28;color:var(--tx)}
input[type=number].in{-moz-appearance:textfield} input[type=number].in::-webkit-inner-spin-button{opacity:.5}
kbd{display:inline-grid;place-items:center;min-width:24px;height:22px;padding:0 6px;border-radius:6px;box-shadow:inset 0 0 0 1px var(--line2);font:600 11px/1 var(--fm);color:var(--mu)}

/* ---------- the cut between pages: letterbox bars, the page's brush character, its stem and name (site.js) ---------- */
.cut{position:fixed;inset:0;z-index:200;pointer-events:none;display:grid;place-items:center;visibility:hidden}
.cut.in,.cut.out,.cut.hold{visibility:visible}
.cut::before,.cut::after{content:"";position:absolute;left:0;right:0;height:50%;background:#000;transition:transform .62s cubic-bezier(.7,0,.25,1)}
.cut::before{top:0;transform:translateY(-100%)} .cut::after{bottom:0;transform:translateY(100%)}
.cut.in::before,.cut.hold::before{transform:translateY(-76%)} .cut.in::after,.cut.hold::after{transform:translateY(76%)}
.cut.out::before{transform:translateY(-100%)} .cut.out::after{transform:translateY(100%)}
.cut .dim{position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 50%,rgba(6,1,16,.55),rgba(6,1,16,.9));opacity:0;transition:opacity .55s ease}
.cut.in .dim,.cut.hold .dim{opacity:1}
.cut.lift .dim{opacity:.42;transition-duration:1.2s}
.cut.out .dim{opacity:0;transition-duration:.8s}
.cut-c{position:relative;z-index:2;display:grid;justify-items:center;gap:clamp(14px,2.4vh,26px);opacity:0;transform:scale(.9);transition:opacity .5s ease .12s,transform 1.4s cubic-bezier(.2,.7,.2,1) .06s}
.cut.in .cut-c,.cut.hold .cut-c{opacity:1;transform:scale(1)}
.cut.hold .cut-c{transition:none}
.cut.out .cut-c{opacity:0;transform:scale(1.06);transition:opacity .45s ease,transform .8s ease}
.cut-g{font:400 clamp(170px,40vh,430px)/1 var(--fbrush);background:var(--glyph);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 10px 40px var(--glyphglow));padding:0 .06em}
.cut-l{display:flex;align-items:center;gap:16px;font:500 15px/1 var(--fm);letter-spacing:.46em;text-transform:uppercase;color:#fff;opacity:.92;text-shadow:0 2px 16px rgba(0,0,0,.5);white-space:nowrap}
.cut-l span:first-child{font:400 20px/1 var(--fbrush);letter-spacing:0}
.cut-l i{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.6}
main,.ft{transition:opacity .45s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.cutting main,.cutting .ft{opacity:0}
.arriving main,.arriving .ft{opacity:0;transform:translateY(14px)}

/* ---------- toasts ---------- */
.toast{position:fixed;left:50%;bottom:calc(var(--sb) + 24px + env(safe-area-inset-bottom,0px));z-index:220;transform:translate(-50%,12px);max-width:min(560px,calc(100% - 32px));padding:12px 16px;border-radius:12px;background:var(--toast);color:var(--tx);font:500 14px/1.4 var(--fb);box-shadow:0 18px 50px rgba(0,0,0,.45),inset 0 0 0 1px var(--line2);opacity:0;transition:opacity .25s,transform .25s;text-align:center;pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- the live bar at the foot of the screen: the BNB root clock (site.js) ---------- */
.status{position:fixed;left:0;right:0;bottom:0;z-index:70;height:calc(var(--sb) + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);background:var(--statusbg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--line);font:500 11px/1 var(--fm);letter-spacing:.16em;text-transform:uppercase;color:var(--mu)}
.status .wrap{height:var(--sb);max-width:none;display:flex;align-items:center;gap:22px}
.status .lv{display:flex;align-items:center;gap:9px;color:var(--tx);white-space:nowrap}
.status .lv::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--live);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(117,250,148,.6)}70%{box-shadow:0 0 0 7px rgba(117,250,148,0)}100%{box-shadow:0 0 0 0 rgba(117,250,148,0)}}
.status .root{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.status .root b{font-weight:500;color:var(--tx)}
.status nav{margin-left:auto;display:flex;gap:20px;white-space:nowrap}
.status nav a,.status nav button{font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;transition:color .2s}
.status nav a:hover,.status nav button:hover{color:var(--tx)}
body{padding-bottom:calc(var(--sb) + env(safe-area-inset-bottom,0px))}

/* ---------- inscriptions: four characters in two vertical lines with the 仙 seal, right of the copy (decoration, aria-hidden) ---------- */
.insc{position:absolute;right:max(24px,calc((100vw - 1440px) / 2 + 40px));top:50%;transform:translateY(-56%);display:flex;flex-direction:row-reverse;gap:16px;align-items:flex-start;pointer-events:none;z-index:1}
.insc span{writing-mode:vertical-rl;font:400 25px/1 var(--fbrush);letter-spacing:.3em;color:rgba(255,236,245,.86);text-shadow:0 2px 16px rgba(30,6,40,.65)}
.insc span+span{margin-top:46px}
.insc i{align-self:flex-end;display:grid;place-items:center;width:30px;height:30px;margin-top:8px;border-radius:5px;background:linear-gradient(180deg,#ff8fb4,#e0578c);color:#fff;font:400 22px/1 var(--fbrush);font-style:normal;box-shadow:0 6px 16px rgba(224,87,140,.35)}

/* ---------- page head (inner pages): the title and its facts on the left, a live card on the right, the landscape around them ---------- */
.ph{position:relative;display:grid;align-items:center;min-height:clamp(620px,86svh,900px);padding:calc(var(--hh) + 52px) 0 72px}
.ph::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,1,18,.62) 0%,rgba(6,1,18,.28) 46%,rgba(6,1,18,0) 70%);pointer-events:none}
.ph>.wrap{position:relative;z-index:2}
.ph-g{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(36px,5vw,72px);align-items:center}
.ph-t{display:grid;gap:22px;justify-items:start}
.ph-t .d2{max-width:14ch}
.ph-g.one{grid-template-columns:minmax(0,.6fr)}
.d2.long{font-size:clamp(42px,5vw,78px);max-width:16ch}
.ph-a{position:relative;min-width:0}
.ph .row{display:grid;gap:22px;max-width:860px}
.ph.ph-s{min-height:clamp(560px,74svh,780px);align-items:end}
.ph.ph-c{min-height:clamp(400px,54svh,600px);align-items:end;padding-bottom:40px}   /* a tool or a text page: the head is short, the work starts in the first screen */
.ph-c+.sec{padding-top:12px}
html:is(:lang(zh),:lang(ja),:lang(ko),:lang(yue)) .ph-t .d2{max-width:9.5em}
.ph-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:end}
.ph-row .ph-t:last-child{gap:20px;padding-bottom:10px}
.ph-row .d2{max-width:none} .ph-row .d2 em{display:block}
.facts{display:grid;gap:10px;width:100%;max-width:620px;margin-top:4px}
.facts li{display:grid;grid-template-columns:132px minmax(0,1fr);gap:18px;padding:15px 18px;border-radius:14px;background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:inset 0 0 0 1px var(--line)}
.facts b{font:600 11px/1.5 var(--fm);letter-spacing:.16em;text-transform:uppercase;color:var(--pinkhi)}
.facts span{font:400 15px/1.55 var(--fb);color:var(--tx2)}
.kpis{display:flex;flex-wrap:wrap;gap:10px}
.kpis .tg{height:30px;padding:0 12px;font-size:11px}
/* a card that holds a live picture (the estimator, the chat, the code) */
.live{position:relative;padding:24px;border-radius:var(--r2);background:var(--glass2);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:inset 0 0 0 1px var(--line2),inset 0 1px 0 rgba(255,255,255,.07),0 40px 90px rgba(6,1,18,.5)}
.live-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.live-h .sl{letter-spacing:.22em}

/* ---------- sections ---------- */
.sec{position:relative;padding-block:clamp(76px,10vh,128px)}
.sec+.sec{padding-top:clamp(20px,4vh,48px)}
.sh{display:grid;gap:16px;max-width:780px;margin-bottom:clamp(32px,4.5vh,52px)}
.sh .lead{font-size:17px}
.two{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(36px,5vw,80px);align-items:start}
.two>.sh{position:sticky;top:calc(var(--hh) + 32px);margin-bottom:0}
.band{position:relative;display:flex;align-items:center;justify-content:space-between;gap:28px;padding:clamp(30px,4vw,48px);border-radius:26px;overflow:hidden;
  background:radial-gradient(70% 140% at 100% 0%,rgba(240,122,165,.24),transparent 60%),radial-gradient(60% 120% at 0% 100%,rgba(180,156,255,.18),transparent 60%),var(--glass2);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:inset 0 0 0 1px var(--line2),0 40px 90px rgba(6,1,18,.45)}
.band>div:first-child{display:grid;gap:10px;max-width:560px}
.band p{color:var(--tx2)}
.band::after{content:attr(data-g);position:absolute;right:-.06em;bottom:-.24em;font:400 220px/1 var(--fbrush);color:rgba(255,156,194,.07);pointer-events:none}
.band .chips{position:relative;z-index:1}

/* ---------- cards, key-value lists, tables, code ---------- */
.card{position:relative;padding:26px;border-radius:20px;background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:inset 0 0 0 1px var(--line2),inset 0 1px 0 rgba(255,255,255,.05)}
.card.flat{background:var(--glass2)}
.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 22px;align-items:baseline}
.kv dt{font:600 11px/1.5 var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--mu)}
.kv dd{font:500 14px/1.5 var(--fm);color:var(--tx);overflow-wrap:anywhere}
.tw{position:relative;border-radius:20px;background:var(--glass2);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:inset 0 0 0 1px var(--line2);overflow-x:auto;overscroll-behavior-x:contain}
.tbl{min-width:100%}
.tbl th{padding:16px 18px 12px;text-align:left;font:600 10.5px/1.3 var(--fm);letter-spacing:.16em;text-transform:uppercase;color:var(--mu);white-space:nowrap;border-bottom:1px solid var(--line)}
.tbl td{padding:15px 18px;border-bottom:1px solid var(--line);font:400 15px/1.45 var(--fb);color:var(--tx);vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr{transition:background .15s}
.tbl tbody tr:hover{background:rgba(255,255,255,.035)}
.tbl .r{text-align:right}.tbl .m{font:500 13.5px/1.4 var(--fm);color:var(--tx2)}
.code{border-radius:20px;background:rgba(7,3,16,.9);box-shadow:inset 0 0 0 1px var(--line2),0 40px 90px rgba(6,1,18,.5);overflow:hidden;min-width:0}
.code .hd2{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px 10px 14px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.02)}
.code .tabs{display:flex;gap:4px}
.code .tabs button{height:30px;padding:0 12px;border-radius:8px;font:600 11.5px/1 var(--fm);letter-spacing:.06em;color:var(--mu);transition:background .2s,color .2s}
.code .tabs button:hover{color:var(--tx)}
.code .tabs button[aria-selected="true"]{background:rgba(240,122,165,.16);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,156,194,.4)}
.code pre{margin:0;padding:18px 20px 20px;overflow:auto;font:400 13px/1.7 var(--fm);color:#e6dcf6;tab-size:2;white-space:pre}
.code .rk{color:var(--pinkhi)}.code .rv{color:var(--mint)}
.code .caret{display:inline-block;width:7px;height:15px;margin-left:2px;vertical-align:-2px;background:var(--pinkhi);animation:blink 1.1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
code{font:500 .92em/1 var(--fm);padding:2px 6px;border-radius:6px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--line);color:var(--tx)}
pre code{padding:0;background:none;box-shadow:none}

/* the questions */
.faq{display:grid;gap:10px}
.faq details{border-radius:16px;background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:inset 0 0 0 1px var(--line);transition:background .2s,box-shadow .2s}
.faq details[open]{background:var(--glass2);box-shadow:inset 0 0 0 1px var(--line2)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:19px 22px;font:500 17px/1.4 var(--fb);color:var(--tx);cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line2);background:linear-gradient(var(--pinkhi),var(--pinkhi)) center/9px 1.5px no-repeat,linear-gradient(var(--pinkhi),var(--pinkhi)) center/1.5px 9px no-repeat;transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 22px 20px;max-width:68ch;color:var(--tx2)}
.help{display:flex;align-items:center;gap:16px;margin-top:8px;padding:18px 20px;border-radius:16px;background:rgba(240,122,165,.07);box-shadow:inset 0 0 0 1px rgba(255,156,194,.22)}
.help-i{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:rgba(240,122,165,.16);color:var(--pinkhi)}
.help>div{display:grid;gap:3px;flex:1;min-width:0}
.help b{font:600 15px/1.35 var(--fb)} .help span{font-size:14px;color:var(--mu)}
.help .btn{flex:none}
.more{margin-top:22px;text-align:center}
.empty{display:grid;justify-items:center;gap:12px;padding:56px 20px;text-align:center}

/* ---------- home ---------- */
.hero{position:relative;min-height:max(720px,min(100svh,1040px));display:grid;align-items:center;padding:calc(var(--hh) + 36px) 0 calc(var(--sb) + 64px)}
.hero::before{content:"";position:absolute;inset:6% 8% 0;background:radial-gradient(50% 48% at 50% 50%,rgba(14,4,30,.44),transparent 74%);pointer-events:none}
.hero-in{position:relative;z-index:2;display:grid;justify-items:center;text-align:center;gap:24px;max-width:1000px}
.hero .lead{max-width:60ch;font-size:clamp(16px,1.25vw,19px);color:rgba(246,238,252,.9);text-shadow:0 1px 18px rgba(20,5,40,.55)}
.ask{position:relative;width:min(780px,100%);margin-top:10px;padding:18px 18px 14px 22px;border-radius:22px;background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:inset 0 0 0 1px var(--line2),inset 0 1px 0 rgba(255,255,255,.08),0 30px 80px rgba(10,2,24,.45);text-align:left;transition:box-shadow .2s}
.ask:focus-within{box-shadow:inset 0 0 0 1px rgba(240,122,165,.55),inset 0 1px 0 rgba(255,255,255,.08),0 30px 80px rgba(10,2,24,.45)}
.ask textarea{display:block;width:100%;min-height:32px;max-height:160px;resize:none;border:0;outline:0;background:none;padding:4px 0 14px;font:400 18px/1.45 var(--fb);color:var(--tx)}
.ask textarea::placeholder{color:rgba(236,226,255,.52)}
.ask-row{display:flex;align-items:center;gap:10px}
.ask-meta{display:flex;align-items:center;gap:10px;min-width:0;flex:1;font:500 12.5px/1 var(--fm);color:var(--mu)}
.pick-w{position:relative;min-width:0}
.pick{display:inline-flex;align-items:center;gap:8px;max-width:100%;height:32px;padding:0 10px;border-radius:9px;box-shadow:inset 0 0 0 1px var(--line);font:500 12.5px/1 var(--fm);letter-spacing:.02em;color:var(--tx);white-space:nowrap;transition:background .2s}
.pick span{overflow:hidden;text-overflow:ellipsis}
.pick:hover,.pick[aria-expanded="true"]{background:var(--hover)}
.cost{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mic,.send{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;transition:background .2s,transform .15s}
.mic{box-shadow:inset 0 0 0 1px var(--line2);color:var(--tx)} .mic:hover{background:var(--hover)}
.send{background:linear-gradient(180deg,var(--pinkhi),var(--pink) 65%);color:var(--onpink);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -3px 0 rgba(120,20,60,.35),0 8px 22px rgba(240,122,165,.3)}
.send:hover{transform:translateY(-1px)}
.pick-pop{position:absolute;left:0;bottom:calc(100% + 10px);z-index:30;width:min(430px,calc(100vw - 32px));max-height:min(460px,62vh);overflow:auto;padding:8px;border-radius:16px;background:var(--pop);box-shadow:0 30px 80px rgba(0,0,0,.6),inset 0 0 0 1px var(--line2);text-align:left;overscroll-behavior:contain}
.pick-pop.down{bottom:auto;top:calc(100% + 10px)}
.pick-pop .grp{display:flex;justify-content:space-between;gap:12px;padding:12px 10px 6px;font:600 10.5px/1.3 var(--fm);letter-spacing:.16em;text-transform:uppercase;color:var(--tx)}
.pick-pop .grp span{color:var(--mu);letter-spacing:.06em;text-transform:none;font-weight:500}
.pick-pop button{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n p" "s p";gap:2px 12px;width:100%;padding:10px;border-radius:10px;text-align:left}
.pick-pop button:hover,.pick-pop button:focus-visible,.pick-pop button[aria-selected="true"]{background:var(--hover)}
.pick-pop button[aria-selected="true"] b{color:var(--pinkhi)}
.pick-pop button b{grid-area:n;font:500 14px/1.25 var(--fb);color:var(--tx)}
.pick-pop button span{grid-area:s;font-size:12px;color:var(--mu)}
.pick-pop button em{grid-area:p;align-self:center;font:500 12px/1 var(--fm);font-style:normal;color:var(--mu);white-space:nowrap}
.pick-pop .all{display:block;margin:6px 4px 4px;padding:11px 10px;border-radius:10px;font:600 12px/1 var(--fm);letter-spacing:.1em;text-transform:uppercase;color:var(--pinkhi);box-shadow:inset 0 0 0 1px var(--line)}
.pick-pop .all:hover{background:var(--hover)}
.ex{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:min(780px,100%)}
.ex button{display:flex;align-items:center;gap:14px;width:100%;min-height:56px;padding:12px 18px;border-radius:14px;background:var(--glass2);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px var(--line);font:400 15px/1.35 var(--fb);color:var(--tx);text-align:left;transition:background .2s,box-shadow .2s,transform .2s}
.ex button:hover{background:rgba(32,20,58,.84);box-shadow:inset 0 0 0 1px var(--line2);transform:translateY(-1px)}
.ex button::before{content:attr(data-g);display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:8px;background:rgba(240,122,165,.12);box-shadow:inset 0 0 0 1px rgba(255,156,194,.3);font:400 18px/1 var(--fbrush);color:var(--pinkhi)}
.hint{font:400 13px/1.4 var(--fb);color:rgba(236,226,255,.64)}
.scroll-cue{position:absolute;left:50%;bottom:calc(var(--sb) + 18px);z-index:2;transform:translateX(-50%);display:grid;justify-items:center;gap:8px;font:600 10px/1 var(--fm);letter-spacing:.3em;text-transform:uppercase;color:rgba(236,226,255,.55)}
.scroll-cue::after{content:"";width:1px;height:34px;background:linear-gradient(180deg,rgba(255,156,194,.8),transparent);animation:cue 2.4s ease-in-out infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
/* the tiers as a numbered list, one row each */
.rows{display:grid;border-top:1px solid var(--line2)}
.rows li{position:relative;display:grid;grid-template-columns:62px 54px minmax(170px,.34fr) minmax(0,1fr) auto;gap:22px;align-items:start;padding:30px 0;border-bottom:1px solid var(--line2)}
.rows .no{font:500 13px/2.4 var(--fm);letter-spacing:.14em;color:var(--mu2)}
.rows .zh{display:grid;place-items:center;width:44px;height:44px;border-radius:11px;background:rgba(240,122,165,.1);box-shadow:inset 0 0 0 1px rgba(255,156,194,.3);font:400 26px/1 var(--fbrush);color:var(--pinkhi)}
.rows .nm{font:400 clamp(30px,2.6vw,40px)/1.05 var(--fd);color:#fff6fb}
.rows .tx{display:grid;gap:10px;max-width:62ch}
.rows .tx p{color:var(--tx2)}
.rows .tx .mono{color:var(--mu)}
.rows .go{align-self:center}
.rows li:hover .zh{background:rgba(240,122,165,.2)}
/* three colour cards */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.cards a{position:relative;display:grid;align-content:start;gap:14px;min-height:340px;padding:28px;border-radius:24px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line2);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.cards a:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px var(--line3),0 30px 70px rgba(6,1,18,.5)}
.cards .c-pink{background:linear-gradient(160deg,rgba(240,122,165,.3),rgba(60,16,50,.6) 60%,rgba(17,10,34,.7))}
.cards .c-lilac{background:linear-gradient(160deg,rgba(180,156,255,.28),rgba(36,22,70,.62) 60%,rgba(17,10,34,.7))}
.cards .c-blue{background:linear-gradient(160deg,rgba(122,166,246,.26),rgba(20,26,70,.6) 60%,rgba(17,10,34,.7))}
.cards .bdg{display:inline-flex;align-items:center;gap:10px;justify-self:start;height:30px;padding:0 12px 0 5px;border-radius:999px;background:rgba(6,1,18,.4);box-shadow:inset 0 0 0 1px var(--line2);font:600 11px/1 var(--fm);letter-spacing:.14em;text-transform:uppercase}
.cards .bdg i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.12);font:400 14px/1 var(--fbrush);font-style:normal}
.cards h3{max-width:15ch}
.cards p{max-width:34ch;color:var(--tx2);font-size:15px}
.cards .go{display:inline-flex;align-items:center;gap:12px;margin-top:auto;font:600 12px/1 var(--fm);letter-spacing:.14em;text-transform:uppercase;color:#fff}
.cards .big{position:absolute;right:-.04em;bottom:-.18em;font:400 230px/1 var(--fbrush);color:rgba(255,255,255,.07);pointer-events:none;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.cards a:hover .big{transform:translateY(-8px) rotate(-2deg)}
.home .faq-g{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:start}

/* ---------- models ---------- */
.ctrl{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:16px}
.seg{display:inline-flex;gap:2px;padding:4px;border-radius:14px;background:rgba(6,1,18,.55);box-shadow:inset 0 0 0 1px var(--line2)}
.seg button{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border-radius:10px;font:500 14px/1 var(--fb);color:var(--mu);white-space:nowrap;transition:background .2s,color .2s,box-shadow .2s}
.seg button:hover{color:var(--tx)}
.seg button[aria-pressed="true"]{background:rgba(255,255,255,.09);color:var(--tx);box-shadow:inset 0 0 0 1px var(--line2)}
.seg button[data-tier="private"][aria-pressed="true"]{color:var(--tprivate);background:rgba(255,151,191,.12);box-shadow:inset 0 0 0 1px rgba(255,151,191,.4)}
.seg button[data-tier="anon"][aria-pressed="true"]{color:var(--tanon);background:rgba(191,169,255,.12);box-shadow:inset 0 0 0 1px rgba(191,169,255,.4)}
.srch{position:relative;display:flex;gap:14px;align-items:center;flex:1;justify-content:flex-end;min-width:0}
.srch .in{max-width:400px;padding-left:42px;padding-right:46px;font-family:var(--fm);font-size:13.5px}
.srch::before{content:"";position:absolute;right:calc(min(400px,100%) - 30px);width:16px;height:16px;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='4.8' fill='none' stroke='%23ada3c4' stroke-width='1.4'/%3E%3Cpath d='m10.6 10.6 3 3' stroke='%23ada3c4' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E")}
.srch .kb{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none}
.srch .mono{white-space:nowrap;color:var(--mu)}
.tbl.models td:first-child{min-width:220px}
.tbl .nm{display:grid;gap:2px} .tbl .nm b{font:500 15.5px/1.3 var(--fb);color:var(--tx)} .tbl .nm span{font-size:13px;color:var(--mu)}
.mcards{display:none}
.note{margin-top:14px}
#tiers .note,#list .note{max-width:72ch}
/* the two tiers side by side: two column cards with a row of facts each, two cards on phones */
.cmpt{width:calc(100% + 28px);margin:0 -14px;border-collapse:separate;border-spacing:14px 0;table-layout:fixed}
.cmpt thead th:first-child{width:22%}
.cmpt th.cl{vertical-align:bottom;padding:0 8px 24px 0;text-align:left;font-weight:400}
.cmpt th.cl .sl{display:flex;margin-bottom:12px}
.cmpt th.cl .mu{display:block;font-size:14px;line-height:1.55}
.cmpt th,.cmpt td{text-align:left;vertical-align:top;padding:16px 24px;font-size:15px;line-height:1.5;color:var(--tx)}
.cmpt tbody th{padding:19px 0 16px;font:600 11px/1.5 var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--mu);border-top:1px solid var(--line)}
.cmpt td{background:var(--glass2);border-top:1px solid var(--line);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.cmpt thead th.private,.cmpt thead th.anon{padding:26px 24px 22px;border-radius:20px 20px 0 0;background:linear-gradient(180deg,rgba(255,151,191,.16),var(--glass2));box-shadow:inset 0 2px 0 var(--tprivate)}
.cmpt thead th.anon{background:linear-gradient(180deg,rgba(191,169,255,.16),var(--glass2));box-shadow:inset 0 2px 0 var(--tanon)}
.cmpt tbody tr:last-child td{border-radius:0 0 20px 20px;padding-bottom:26px}
.ch{display:grid;gap:8px}
.ch .nm b{font:400 34px/1 var(--fd);color:#fff6fb}
.ch .k{font:600 11px/1.3 var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--mu)}
.ch .fee{display:flex;align-items:baseline;gap:10px;font:400 44px/1 var(--fd);color:var(--tprivate)}
.anon .ch .fee,.cmpc-i.anon .fee{color:var(--tanon)}
.ch .fee small{font:500 12px/1.3 var(--fm);letter-spacing:.04em;color:var(--mu)}
.cmpc{display:none}
.cmpc-i{display:grid;gap:4px;padding:24px 20px 18px;border-radius:20px;background:var(--glass2);box-shadow:inset 0 2px 0 var(--tprivate),inset 0 0 0 1px var(--line)}
.cmpc-i.anon{box-shadow:inset 0 2px 0 var(--tanon),inset 0 0 0 1px var(--line)}
.cmpc-i dl{margin-top:14px} .cmpc-i dt{padding-top:12px;border-top:1px solid var(--line);font:600 10.5px/1.4 var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--mu)}
.cmpc-i dd{padding:5px 0 12px;font-size:15px;line-height:1.5}

/* ---------- pricing ---------- */
.est2{display:grid;gap:16px}
.est2 .two-f{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.est2 .res{display:grid;gap:8px;padding-top:18px;border-top:1px solid var(--line)}
.big{font:400 clamp(44px,4.6vw,64px)/1 var(--fd);color:#fff6fb;letter-spacing:-.01em}
.big small{font:500 13px/1 var(--fm);letter-spacing:.06em;color:var(--mu);margin-left:8px}
.est2 .bar{display:flex;height:6px;border-radius:99px;overflow:hidden;background:rgba(255,255,255,.07)}
.est2 .bar i{display:block;height:100%;transition:width .5s cubic-bezier(.2,.7,.2,1)}
.est2 .bar .bi{background:linear-gradient(90deg,var(--pinkhi),var(--pink))} .est2 .bar .bo{background:linear-gradient(90deg,var(--lilac),var(--lilacd))}
.est2 .lg{display:flex;justify-content:space-between;font:500 11.5px/1 var(--fm);letter-spacing:.06em;color:var(--mu)}
.est2 #erate{font-size:13.5px;line-height:1.55}
.pk3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pk3 article{position:relative;display:grid;gap:12px;padding:26px;border-radius:22px;background:var(--glass2);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:inset 0 0 0 1px var(--line2);overflow:hidden;transition:transform .3s,box-shadow .3s}
.pk3 article:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px rgba(255,156,194,.45),0 26px 60px rgba(6,1,18,.45)}
.pk3 article:nth-child(2){background:linear-gradient(160deg,rgba(240,122,165,.22),var(--glass2) 60%)}
.pk3 .pk{font:400 clamp(52px,4.6vw,72px)/1 var(--fd);color:#fff6fb}
.pk3 .pk small{font:500 13px/1 var(--fm);letter-spacing:.06em;color:var(--mu);margin-left:8px}
.pk3 p{font-size:15px;color:var(--tx2)} .pk3 p b{color:#fff;font-weight:600}
.payrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:22px;padding:16px 18px;border-radius:18px;background:var(--glass);box-shadow:inset 0 0 0 1px var(--line)}
.payrow .sl{margin-right:8px} .payrow .btn{margin-left:auto}
.ring{display:grid;grid-template-columns:auto minmax(0,1fr);gap:32px;align-items:center;padding:28px;border-radius:24px;background:var(--glass2);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:inset 0 0 0 1px var(--line2)}
.ring svg{width:160px;height:160px;overflow:visible}
.ring .tr{fill:none;stroke:rgba(255,255,255,.08);stroke-width:10}
.ring .fl{fill:none;stroke:url(#rg);stroke:var(--pink);stroke-width:10;stroke-linecap:round;stroke-dasharray:377;stroke-dashoffset:377;animation:fill 2.4s cubic-bezier(.2,.7,.2,1) .3s forwards}
.ring .sh{fill:none;stroke:#ffe0ec;stroke-width:10;stroke-linecap:round;stroke-dasharray:18 359;opacity:.55;animation:spin 6s linear infinite;transform-origin:75px 75px}
.ring text{font:400 30px var(--fd);fill:#fff6fb;text-anchor:middle;dominant-baseline:central}
@keyframes fill{to{stroke-dashoffset:0}} @keyframes spin{to{transform:rotate(360deg)}}
.ring .rk{display:grid;gap:12px;min-width:0}

/* ---------- token: the emblem, the flywheel, the two reserves ---------- */
.flyw{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(28px,4vw,64px);align-items:center}
.fly{position:relative;width:min(520px,100%);aspect-ratio:1;margin:0 auto}
.fly-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.fly .fr{fill:none;stroke:rgba(236,226,255,.2);stroke-width:1;vector-effect:non-scaling-stroke}
.fly .fa{fill:none;stroke:var(--pinkhi);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;opacity:.8}
.fly .ft{fill:none;stroke:var(--pinkhi);stroke-width:2.4;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:0;transition:opacity .4s}
.fly .fb{fill:#ffe0ec;filter:drop-shadow(0 0 4px rgba(255,156,194,.95))}
.fly-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:8px;text-align:center;width:44%}
.fc-coin{display:block;width:30%;aspect-ratio:1;border-radius:50%;background:radial-gradient(60% 60% at 35% 30%,rgba(255,200,222,.6),transparent 60%),#3a1748;box-shadow:inset 0 0 0 1.5px rgba(255,214,230,.6),0 10px 30px rgba(214,70,140,.4)}
.fly-core b{font:400 clamp(24px,2.4vw,34px)/1 var(--fd);color:#fff6fb}
.fly-core .mono{font-size:11.5px;line-height:1.4}
.fly-n{position:absolute;inset:0}
.fly-n li{position:absolute;width:15%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;transform:translate(-50%,-50%);background:var(--glass2);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:inset 0 0 0 1px var(--line2);transition:box-shadow .5s,background .5s}
.fly-n li b{font:400 clamp(18px,2vw,26px)/1 var(--fd);color:var(--pinkhi)}
.fly-n li span{position:absolute;white-space:nowrap;font:600 11px/1 var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--mu);transition:color .4s}
.fly-n .n1{left:50%;top:13.5%} .fly-n .n1 span{bottom:calc(100% + 10px)}
.fly-n .n2{left:86.5%;top:50%} .fly-n .n2 span{left:calc(100% + 12px)}
.fly-n .n3{left:50%;top:86.5%} .fly-n .n3 span{top:calc(100% + 10px)}
.fly-n .n4{left:13.5%;top:50%} .fly-n .n4 span{right:calc(100% + 12px)}
.fly-n li.on{background:rgba(240,122,165,.2);box-shadow:inset 0 0 0 1.5px var(--pinkhi),0 0 36px rgba(240,122,165,.3)} .fly-n li.on span{color:#fff}
.fly-s{display:grid;gap:10px}
.fly-s li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:4px 14px;padding:16px 18px;border-radius:16px;background:var(--glass);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .5s,background .5s}
.fly-s .n{grid-row:1/3;font:400 17px/1.5 var(--fd);color:var(--pinkhi);letter-spacing:.12em}
.fly-s .h3{font-size:clamp(20px,1.7vw,24px)} .fly-s p{font-size:15px;line-height:1.55;color:var(--tx2)}
.fly-s li.on{background:var(--glass2);box-shadow:inset 0 0 0 1px rgba(255,156,194,.45)}
.rsv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.rsv li{display:grid;gap:12px;align-content:start;padding:26px;border-radius:22px;background:var(--glass2);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:inset 0 0 0 1px var(--line2)}
.rsv li>b{font:400 clamp(36px,3.4vw,50px)/1.05 var(--fd);color:#fff6fb}
.rsv li>b small{font:500 12px/1 var(--fm);letter-spacing:.06em;color:var(--mu);margin-left:8px}
.rsv li>b.txt{font-size:clamp(24px,2vw,30px)}
.rsv p{font-size:15px;color:var(--tx2)}

/* ---------- affiliate: the discount ladder (20 cells, one a friend, 0.25% each) and the steps ---------- */
.ladder{display:grid;gap:14px}
.ladder .big{display:flex;align-items:baseline}
.cells{display:grid;grid-template-columns:repeat(20,minmax(0,1fr));gap:4px}
.cells i{display:block;height:26px;border-radius:5px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--line)}
.cells i.on{background:linear-gradient(180deg,var(--pinkhi),var(--pink));box-shadow:0 0 14px rgba(240,122,165,.35)}
.ladder.sm .cells i{height:16px;border-radius:4px}
.marks{display:flex;justify-content:space-between;gap:10px;font:500 11px/1.3 var(--fm);letter-spacing:.06em;color:var(--mu)}
.marks span:nth-child(2){text-align:center}
.ladder .kv{margin-top:6px;padding-top:16px;border-top:1px solid var(--line)}
.stp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.stp li{position:relative;display:grid;gap:12px;align-content:start;padding:28px 26px;border-radius:22px;background:var(--glass2);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:inset 0 0 0 1px var(--line2);overflow:hidden}
.stp .n{font:400 18px/1 var(--fd);color:var(--pinkhi);letter-spacing:.2em}
.stp p{font-size:15px;color:var(--tx2)}
.stp dl{display:grid;gap:8px;margin-top:6px;padding-top:12px;border-top:1px solid var(--line)} .stp dl div{display:flex;justify-content:space-between;gap:12px}
.stp dt{font:600 11px/1.4 var(--fm);letter-spacing:.12em;text-transform:uppercase;color:var(--mu)} .stp dd{font-size:14px;text-align:right}
.tbl.aff td:first-child{font:500 15px var(--fb)}

/* ---------- agents ---------- */
.apps{display:flex;flex-wrap:wrap;gap:8px}
.apps li{display:flex;align-items:center;gap:10px;padding:6px 16px 6px 6px;border-radius:999px;background:var(--glass);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .3s,background .3s}
.apps li.on{background:rgba(240,122,165,.14);box-shadow:inset 0 0 0 1px rgba(255,156,194,.55)}
.apps b{font:500 15px/1 var(--fb);white-space:nowrap} .apps .ap{width:28px;height:28px;flex:none;border-radius:8px}
.chatm .who{display:flex;align-items:center;gap:10px;min-width:0} .chatm .who img{width:32px;height:32px;flex:none;border-radius:9px}
.chatm .who div{display:grid;gap:2px;min-width:0} .chatm .who b{font-weight:600} .chatm .who .mono{font-size:11.5px;line-height:1.35}
.chatm .msgs{display:grid;gap:12px;min-height:250px;align-content:end;padding:6px 0 2px}
.bub{max-width:88%;padding:12px 15px;border-radius:18px;font-size:15px;line-height:1.5}
.bub.me{justify-self:end;background:linear-gradient(180deg,rgba(240,122,165,.32),rgba(240,122,165,.2));border-bottom-right-radius:5px}
.bub.ag{justify-self:start;background:rgba(255,255,255,.055);border-bottom-left-radius:5px;box-shadow:inset 0 0 0 1px var(--line)}
.bub.ag .nm{display:block;margin-bottom:5px;font:600 11px/1.3 var(--fm);letter-spacing:.12em;text-transform:uppercase;color:var(--pinkhi)}
.bub.ag .rc{display:block;margin-top:8px;font:500 11.5px/1.4 var(--fm);color:var(--mu)}
.bub.old{opacity:.55} .bub .day{display:block;margin-bottom:4px;font:500 11px var(--fm);color:var(--mu)}
.typing{justify-self:start;display:inline-flex;gap:5px;padding:14px 16px;border-radius:18px;border-bottom-left-radius:5px;background:rgba(255,255,255,.055);box-shadow:inset 0 0 0 1px var(--line)}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--pinkhi);opacity:.3;animation:ty 1.2s infinite} .typing i:nth-child(2){animation-delay:.15s} .typing i:nth-child(3){animation-delay:.3s}
@keyframes ty{30%{opacity:1;transform:translateY(-2px)}}
.pop-in{animation:popin .45s cubic-bezier(.2,.7,.2,1) both}
@keyframes popin{from{opacity:0;transform:translateY(8px) scale(.98)}}
.ag2{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ag2 .card{display:grid;gap:14px;align-content:start}
.ag2 .top{display:flex;justify-content:space-between;align-items:start;gap:12px;min-height:66px}
.ag2 .top b{font:400 26px/1.1 var(--fd);color:#fff6fb}
.ag2 .meta{display:flex;align-items:center;gap:8px;margin-top:6px} .ag2 .meta img{width:20px;height:20px;border-radius:6px}
.agent .post{padding:15px 17px;border-radius:16px 16px 16px 4px;background:rgba(255,255,255,.055);font-size:15.5px;line-height:1.5}
.agent dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding-top:14px;border-top:1px solid var(--line)}
.agent dl div:last-child{grid-column:1/-1}
.agent dt{font:600 10.5px/1.4 var(--fm);letter-spacing:.12em;text-transform:uppercase;color:var(--mu)} .agent dd{font-weight:600}
.card.soon{background:transparent;box-shadow:inset 0 0 0 1px var(--line2);outline:1px dashed rgba(255,156,194,.35);outline-offset:-8px}
.card.soon .top b{color:var(--mu)}
.post.ghost{display:grid;gap:9px;padding:18px} .post.ghost i{display:block;height:9px;border-radius:9px;background:linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,156,194,.2),rgba(255,255,255,.06));background-size:200% 100%;animation:shim 2.4s linear infinite}
.post.ghost i:nth-child(2){width:86%} .post.ghost i:nth-child(3){width:62%}
@keyframes shim{to{background-position:-200% 0}}

/* ---------- api ---------- */
.flds{display:grid;margin-top:8px}
.flds div{display:grid;grid-template-columns:128px minmax(0,1fr);gap:16px;padding:13px 0;border-top:1px solid var(--line)}
.flds dt{font:500 13px/1.5 var(--fm);color:var(--pinkhi)} .flds dd{font-size:15px;line-height:1.55;color:var(--tx2)}
.ref{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,4vw,56px)}
.ref>div{display:grid;gap:14px;align-content:start}
.ref .tbl td{padding:14px 16px} .ref .tbl .meth{width:64px;color:var(--pinkhi);font-weight:700} .ref .tbl .code3{width:60px;color:var(--pinkhi);font-weight:700}
.ref .tbl .s{color:var(--tx2);font-size:14.5px}
.ph-a .code{transform:perspective(1400px) rotateY(-4deg) rotateX(2deg);transform-origin:left center}

/* ---------- docs ---------- */
.qs.live{position:relative;display:grid;padding:14px 26px;counter-reset:q}
.qs::before{content:"";position:absolute;left:46px;top:42px;bottom:42px;width:1px;background:var(--line2)}
.qs::after{content:"";position:absolute;left:43px;top:42px;width:7px;height:7px;border-radius:50%;background:var(--pinkhi);box-shadow:0 0 12px var(--pinkhi);animation:run 6s cubic-bezier(.6,0,.4,1) infinite}
@keyframes run{0%{transform:translateY(0)}50%{transform:translateY(calc(var(--qh,300px) - 84px))}100%{transform:translateY(0)}}
.qs li{counter-increment:q;position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);gap:4px 16px;padding:14px 0}
.qs li::before{content:counter(q);grid-row:1/3;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font:400 18px var(--fd);color:var(--pinkhi);background:var(--night);box-shadow:inset 0 0 0 1px rgba(255,156,194,.4);position:relative;z-index:1}
.qs b{font-weight:600;font-size:16px;padding-top:2px} .qs span{font-size:14.5px;color:var(--tx2)}
.docs{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start;padding-top:clamp(40px,6vh,72px);padding-bottom:clamp(80px,10vh,120px)}
.toc{position:sticky;top:calc(var(--hh) + 24px);display:grid;gap:2px;padding:12px;border-radius:18px;background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:inset 0 0 0 1px var(--line)}
.toc a{padding:8px 12px;border-radius:10px;font-size:14px;color:var(--mu);transition:background .2s,color .2s}
.toc a:hover{color:var(--tx)}
.toc a[aria-current="true"]{color:#fff;background:linear-gradient(90deg,rgba(240,122,165,.2),rgba(240,122,165,.04));box-shadow:inset 2px 0 0 var(--pinkhi)}
.prose{display:grid;gap:18px;max-width:760px;padding:clamp(26px,3.4vw,48px);border-radius:26px;background:var(--solid);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:inset 0 0 0 1px var(--line2)}
.prose h2{font:400 clamp(30px,2.8vw,42px)/1.08 var(--fd);color:#fff6fb;padding-top:30px;scroll-margin-top:calc(var(--hh) + 24px)}
.prose h2:first-child{padding-top:0}
.prose h3{font:600 17px var(--fb);margin-top:6px}
.prose p,.prose li{font-size:16px;line-height:1.7;color:var(--tx2)}
.prose ol{list-style:decimal;padding-left:22px;display:grid;gap:8px} .prose ul{list-style:disc;padding-left:22px;display:grid;gap:8px}
.prose a{color:var(--pinkhi);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose .faq{margin-top:4px}

/* ---------- verify a receipt ---------- */
.vf{display:flex;gap:10px;max-width:680px;padding:10px;border-radius:18px;background:var(--glass2);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:inset 0 0 0 1px var(--line2)}
.vf .in{font-family:var(--fm);font-size:14px;background:rgba(6,1,18,.5)}
#vres{margin-top:24px}
.vgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:stretch}
.vgrid .card{display:grid;gap:18px;align-content:start}
.vgrid .ctrl{margin:0}
.path{display:grid}
.path li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 0;border-top:1px solid var(--line);font:500 13px/1.4 var(--fm);overflow-wrap:anywhere}
.path li i{width:10px;height:10px;border-radius:3px;background:var(--lilac);justify-self:center}
.path li.leaf i{border-radius:50%;background:var(--mint);box-shadow:0 0 10px rgba(117,250,148,.6)}
.path li.root i{width:14px;height:14px;background:var(--pinkhi);box-shadow:0 0 14px rgba(255,156,194,.7)}
.path li span:last-child{color:var(--mu);font-size:11px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.vgrid .cr,.card .cr{font-size:15px;line-height:1.6}

/* ---------- sign in ---------- */
.auth{position:relative;min-height:100svh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.auth .art{position:relative;display:grid;align-content:end;padding:calc(var(--hh) + 40px) var(--gut) calc(var(--sb) + 64px) max(var(--gut),calc((100vw - 1280px) / 2 + var(--gut)))}
.auth .art img{display:none}
.auth .art .d2{max-width:9ch;font-size:clamp(56px,7vw,112px)}
html:is(:lang(zh),:lang(ja),:lang(ko),:lang(yue)) .auth .art .d2{max-width:8.5em;font-size:clamp(44px,5.4vw,86px)}
.auth .side{display:grid;align-content:center;justify-items:center;padding:calc(var(--hh) + 32px) var(--gut) calc(var(--sb) + 40px)}
.auth .box{width:min(420px,100%);display:grid;gap:16px;padding:32px;border-radius:26px;background:var(--glass2);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:inset 0 0 0 1px var(--line2),0 40px 100px rgba(6,1,18,.55)}
.auth .box .h2{font-size:clamp(40px,3.4vw,52px)}

/* ---------- legal, 404, states ---------- */
.ph.row-h{min-height:clamp(440px,58svh,620px)}
.legal-p .docs{grid-template-columns:minmax(0,1fr)}
.legal-p .prose{max-width:820px}
.tnote{max-width:62ch;padding:12px 14px;border-radius:12px;background:rgba(180,156,255,.08);box-shadow:inset 0 0 0 1px rgba(180,156,255,.25)}
.nf{min-height:100svh;display:grid;place-items:center;text-align:center;padding:calc(var(--hh) + 40px) var(--gut) calc(var(--sb) + 60px)}
.in-nf{display:grid;justify-items:center;gap:20px}
.in-nf img{display:none}
.in-nf .big-g{font:400 clamp(150px,26vh,280px)/1 var(--fbrush);background:var(--glyph);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 10px 40px var(--glyphglow))}
.in-nf .chips{justify-content:center}
.sgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.sgrid>*{min-width:0}
.sgrid a{display:grid;gap:6px;padding:18px;border-radius:16px;background:var(--glass2);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .2s,transform .2s}
.sgrid a:hover{box-shadow:inset 0 0 0 1px rgba(255,156,194,.5);transform:translateY(-1px)}
.sgrid b{font-weight:600} .sgrid span{font-size:13.5px;color:var(--mu)} .sgrid code{font-size:12px;color:var(--pinkhi);overflow-wrap:anywhere;justify-self:start}

/* ---------- footer ---------- */
.ft{position:relative;z-index:2;padding:72px 0 44px;background:linear-gradient(180deg,rgba(6,1,18,0),rgba(6,1,18,.86) 26%,rgba(6,1,18,.96));border-top:1px solid var(--line)}
.ft .cols{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:40px}
.ft .about{display:grid;gap:16px;align-content:start;max-width:380px}
.ft .about p{font-size:14.5px;color:var(--mu)}
.ft .about .btn{justify-self:start}
.ft h4{margin-bottom:14px;font:600 11px/1.3 var(--fm);letter-spacing:.2em;text-transform:uppercase;color:var(--pinkhi)}
.ft ul{display:grid;gap:10px} .ft ul a{font-size:14.5px;color:var(--tx2);transition:color .2s} .ft ul a:hover{color:#fff}
.ft .legal{display:flex;justify-content:space-between;gap:24px;margin-top:48px;padding-top:22px;border-top:1px solid var(--line);font-size:13px;color:var(--mu2)}
.ft .legal p{max-width:70ch}
.ft .legal span{white-space:nowrap}

/* ---------- dialogs: the support ticket, Add funds, Invite, New agent ---------- */
.ov{position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:20px;background:rgba(4,1,12,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:fade .2s ease}
@keyframes fade{from{opacity:0}}
.dlg{position:relative;width:min(520px,100%);max-height:calc(100svh - 40px);overflow:auto;display:grid;gap:16px;padding:28px;border-radius:24px;background:#130b25;box-shadow:inset 0 0 0 1px var(--line2),0 50px 120px rgba(0,0,0,.6);outline:0;animation:popin .3s cubic-bezier(.2,.7,.2,1)}
.dlg.wide{width:min(760px,100%)}
.dh{display:flex;align-items:center;justify-content:space-between;gap:14px}
.x{flex:none;width:38px;height:38px;display:grid;place-items:center;border-radius:11px;box-shadow:inset 0 0 0 1px var(--line2);font:300 24px/1 var(--fb);color:var(--tx);transition:background .2s}
.x:hover{background:var(--hover)}
.sup-f{display:grid;gap:14px}
.sup-err:empty{display:none} .sup-err{color:var(--red);margin:0}
.sup-ok{display:grid;gap:14px;justify-items:start}
/* the language list: a panel under the pill, a sheet on phones */
.lang-pop{position:fixed;inset:0;z-index:160}
.lp-in{position:absolute;width:300px;padding:10px;border-radius:18px;background:var(--pop);box-shadow:inset 0 0 0 1px var(--line2),0 30px 80px rgba(0,0,0,.6);animation:popin .22s ease}
.lp-h{display:flex;align-items:center;justify-content:space-between;padding:6px 6px 10px 10px}
.lp-l{display:grid;gap:2px}
.lp-l a{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:12px;padding:9px 10px;border-radius:11px;transition:background .15s}
.lp-l a:hover,.lp-l a:focus-visible{background:var(--hover)}
.lp-l a[aria-current="true"]{background:rgba(240,122,165,.12)}
.lp-l .lb{display:grid;place-items:center;width:38px;height:30px;border-radius:8px;box-shadow:inset 0 0 0 1px var(--line2);font:600 12px/1 var(--fm);letter-spacing:.04em;text-transform:none;color:var(--tx)}
.lp-l a[aria-current="true"] .lb{background:linear-gradient(180deg,var(--pinkhi),var(--pink));color:var(--onpink);box-shadow:none}
.lp-l .lw{display:grid;gap:2px;min-width:0} .lp-l .ln{font:500 15px/1.2 var(--fb)} .lp-l .lt{font-size:12px;color:var(--mu)}
.lp-l .i-check{color:var(--pinkhi)}
.lang-pop.sheet{background:rgba(4,1,12,.55)}
.lang-pop.sheet .lp-in{left:0;right:0;bottom:0;width:auto;border-radius:24px 24px 0 0;padding:12px 12px calc(16px + env(safe-area-inset-bottom,0px))}

/* ---------- voice: the mic turns the field into a live strip (site.js, app.js) ---------- */
.vrec{display:flex;align-items:center;gap:12px;min-width:0;height:50px;animation:popin .35s cubic-bezier(.2,.7,.2,1)}
.vx,.vok{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:11px;box-shadow:inset 0 0 0 1px var(--line2);color:var(--tx)}
.vok{background:linear-gradient(180deg,var(--pinkhi),var(--pink));color:var(--onpink);box-shadow:none}
.vdot{position:relative;display:block;width:8px;height:8px;flex:none;border-radius:50%;background:var(--pinkhi);animation:vping 1.6s cubic-bezier(.2,.7,.2,1) infinite}
@keyframes vping{0%{box-shadow:0 0 0 0 rgba(255,156,194,.7)}80%{box-shadow:0 0 0 10px rgba(255,156,194,0)}}
.vl{font:600 11px/1 var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--pinkhi);white-space:nowrap}
.vw{flex:1;min-width:0;width:0;height:30px;display:flex;align-items:center;justify-content:flex-end;gap:3px;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 24%);mask:linear-gradient(90deg,transparent,#000 24%)}
.vw i{display:block;flex:none;width:3px;height:3px;border-radius:2px;background:linear-gradient(180deg,#ffd0e2,var(--pink));transition:height .1s linear}
.vt{font:500 12px/1 var(--fm);color:var(--mu)}
.ask.rec textarea,.ask.rec .ask-row{display:none}
.ask.rec .vrec{height:76px}

/* ---------- the app (xanai.app) in the developer's layout: the header with its tabs, the chats beside the thread, the other views as
   pages; the landscape stands still behind it (a picture, no WebGL). On tablets and phones the tabs move to a bar at the foot ---------- */
.pgapp{--ah:62px;--tb:0px;height:100vh;height:100dvh;overflow:hidden;padding-bottom:0;background:var(--ink)}
.pgapp::before{content:none}
/* the backdrop: the view's still of the landscape, crossfading when the tab changes (app.js, backdrop) */
.abg{position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--ink);overflow:hidden}
.abg i{position:absolute;inset:-3%;background:center 42%/cover no-repeat;opacity:0;transform:scale(1.05);filter:saturate(1.06) blur(1.5px);transition:opacity 1.2s ease,transform 9s cubic-bezier(.2,.7,.2,1)}
.abg i.on{opacity:.66;transform:scale(1)}
@media (prefers-reduced-motion:reduce){ .abg i{transition:opacity .4s;transform:none!important} }
.pgapp::after{content:"";position:fixed;inset:0;z-index:0;background:linear-gradient(180deg,rgba(6,1,18,.55),rgba(6,1,18,.86) 60%,rgba(6,1,18,.94));pointer-events:none}
.pgapp>*{position:relative;z-index:1}
.atop{position:relative;z-index:60;height:var(--ah);box-shadow:0 1px 0 var(--line)}
/* the glass sits on a layer of its own: a backdrop-filter on .atop itself would make it the box of the fixed tab bar on phones */
.atop::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(9,4,20,.74);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);pointer-events:none}
.atop-in{height:100%;display:flex;align-items:center;gap:18px;padding:0 16px 0 20px}
.atop .lk{flex:none;gap:9px} .atop .lk>svg:first-child{width:24px;height:24px} .atop .lk .wm-bar{height:15px;margin:0 1px}
.atabs{display:flex;align-items:center;gap:2px;min-width:0}
.atabs a{position:relative;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 13px;border-radius:11px;font:500 14px/1 var(--fb);color:var(--mu);white-space:nowrap;transition:color .2s,background .2s,box-shadow .2s}
.atabs a:hover{color:var(--tx);background:var(--hover)}
.atabs a[aria-current="page"]{color:#fff;background:rgba(240,122,165,.14);box-shadow:inset 0 0 0 1px rgba(255,156,194,.4)}
.atabs .ti{flex:none;color:var(--mu2);transition:color .2s} .atabs a:hover .ti{color:var(--tx)} .atabs a[aria-current="page"] .ti{color:var(--pinkhi)}
.atabs .soon{font:600 9.5px/1 var(--fm);letter-spacing:.12em;text-transform:uppercase;color:var(--amber);padding:4px 6px 3px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(255,197,158,.4)}
.atools{display:flex;align-items:center;gap:8px;flex:none;margin-left:auto}
.atools .sbx{display:flex;gap:8px}
.atools .lang-s{height:36px}
.net{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 12px;border-radius:999px;font:600 11px/1 var(--fm);letter-spacing:.12em;color:var(--tx);box-shadow:inset 0 0 0 1px var(--line);white-space:nowrap}
.net i{display:block;width:6px;height:6px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 3px rgba(117,250,148,.18)}
.bal{display:inline-flex;align-items:center;gap:9px;height:36px;padding:0 5px 0 14px;border-radius:999px;font:600 13px/1 var(--fm);color:#fff;background:rgba(240,122,165,.1);box-shadow:inset 0 0 0 1px rgba(255,156,194,.4);transition:box-shadow .2s,background .2s}
.bal:hover{background:rgba(240,122,165,.18)}
.bal i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:linear-gradient(180deg,var(--pinkhi),var(--pink));color:var(--onpink)}
.acct{position:relative}
.acct-b{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 11px 0 5px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line2);transition:box-shadow .2s,background .2s}
.acct-b .ad{font-size:12px;color:var(--tx)}
.acct-b:hover,.acct-b[aria-expanded="true"]{background:var(--hover)}
.acct-b .cv{flex:none;color:var(--mu);transition:transform .2s} .acct-b[aria-expanded="true"] .cv{transform:rotate(180deg)}
.av{display:block;flex:none;width:26px;height:26px;border-radius:50%;background:conic-gradient(from 210deg,#ff9cc2,#7d5fd0,#7aa6f6,#75fa94,#ffc59e,#ff9cc2);box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.acct-m{position:absolute;right:0;top:calc(100% + 12px);z-index:70;width:300px;display:grid;gap:2px;padding:8px;border-radius:18px;background:var(--pop);box-shadow:inset 0 0 0 1px var(--line2),0 30px 70px rgba(0,0,0,.55);animation:popin .2s cubic-bezier(.2,.7,.2,1)}
.am-h{display:flex;align-items:center;gap:12px;padding:10px 10px 12px} .am-h .av{width:38px;height:38px} .am-h>div{display:grid;gap:5px;min-width:0}
.am-a{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.am-b{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 2px 6px;padding:13px 12px;border-radius:12px;background:rgba(255,255,255,.05);font-size:13.5px;color:var(--mu)} .am-b b{font:400 24px/1 var(--fd);color:#fff}
.acct-m [role=menuitem]{display:flex;align-items:center;gap:11px;width:100%;height:42px;padding:0 12px;border-radius:11px;font-size:14px;text-align:left}
.acct-m [role=menuitem] svg{flex:none;color:var(--mu)}
.acct-m [role=menuitem]:hover,.acct-m [role=menuitem]:focus-visible{background:var(--hover);outline:0}
.acct-m .dz{color:var(--red)} .acct-m .dz svg{color:currentColor}
.app{display:grid;grid-template-columns:280px minmax(0,1fr);height:calc(100vh - var(--ah) - var(--tb));height:calc(100dvh - var(--ah) - var(--tb))}
.side-nav{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto;gap:16px;padding:18px 16px;min-height:0;background:rgba(9,4,20,.6);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:1px 0 0 var(--line)}
.side-nav .lists{overflow:auto;display:grid;grid-template-columns:minmax(0,1fr);gap:22px;align-content:start;min-height:0}
.side-nav h4{padding:0 10px 6px;font:600 11px/1.3 var(--fm);letter-spacing:.16em;text-transform:uppercase;color:var(--mu2)}
.side-nav li a,.side-nav li button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:10px;font-size:14px;color:var(--tx2);text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-nav li a:hover,.side-nav li button:hover{background:var(--hover);color:#fff} .side-nav li .on{background:rgba(240,122,165,.12);color:#fff}
.side-nav li .tg{margin-left:auto;font-size:10px;height:20px;padding:0 7px} .side-nav li .t{min-width:0;overflow:hidden;text-overflow:ellipsis}
.hs{position:relative} .hs svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--mu);pointer-events:none}
.hs .in{height:40px;padding:0 14px 0 38px;border-radius:12px;font-size:14px}
.hnone{padding:4px 10px;font-size:13.5px}
.cc{display:grid;gap:8px;padding:16px;border-radius:16px;background:linear-gradient(160deg,rgba(240,122,165,.2),rgba(20,13,38,.8));box-shadow:inset 0 0 0 1px rgba(255,156,194,.3)}
.cc b{font:400 30px/1 var(--fd);color:#fff} .cc b small{font:500 12px var(--fm);color:var(--mu);margin-left:6px}
.cc .row{display:flex;gap:8px} .cc .row .btn{flex:1;padding:0 10px}
.main{display:grid;grid-template-rows:auto minmax(0,1fr) auto;min-height:0;min-width:0}
.topbar{display:flex;align-items:center;gap:10px;min-width:0;padding:12px 22px;box-shadow:0 1px 0 var(--line)}
.topbar .sp{flex:1}
.topbar .rate{white-space:nowrap}
.mp{position:relative;min-width:0;display:flex}
.mpick{display:inline-flex;align-items:center;gap:10px;min-width:0;height:40px;padding:0 14px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line2);font-weight:600;font-size:14px;white-space:nowrap;transition:background .2s}
.mpick span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.mpick::after{content:"";flex:none;width:6px;height:6px;border-right:1.5px solid var(--mu);border-bottom:1.5px solid var(--mu);transform:translateY(-2px) rotate(45deg)}
.mpick:hover,.mpick[aria-expanded="true"]{background:var(--hover)}
.tn-b{display:inline-flex;align-items:center;flex:none;height:28px;padding:0 11px;border-radius:999px;font:600 10.5px/1 var(--fm);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;color:var(--mu);box-shadow:inset 0 0 0 1px currentColor}
.tn-b.private{color:var(--tprivate);background:rgba(255,151,191,.1)} .tn-b.anon{color:var(--tanon);background:rgba(191,169,255,.1)} .tn-b .k{white-space:pre}
.mpop{position:absolute;left:0;top:calc(100% + 10px);z-index:50;width:min(460px,calc(100vw - 32px));max-height:min(580px,calc(100dvh - var(--ah) - 96px));display:grid;grid-template-rows:auto minmax(0,1fr) auto;border-radius:18px;background:var(--pop);box-shadow:inset 0 0 0 1px var(--line2),0 30px 70px rgba(0,0,0,.6);overflow:hidden;animation:popin .2s cubic-bezier(.2,.7,.2,1)}
.mpop:focus{outline:0}
.mq{position:relative;padding:10px;border-bottom:1px solid var(--line)}
.mq svg{position:absolute;left:24px;top:50%;transform:translateY(-50%);color:var(--mu);pointer-events:none}
.mq .in{height:44px;padding:0 54px 0 38px;font-size:14.5px}
.mq kbd{position:absolute;right:22px;top:50%;transform:translateY(-50%)}
.opts{display:grid;gap:2px}
.mpop .opts{grid-template-columns:minmax(0,1fr);overflow:auto;padding:4px 6px 6px;gap:0;overscroll-behavior:contain;align-content:start}
.ogh{position:sticky;top:-4px;z-index:1;display:flex;align-items:baseline;gap:10px;padding:12px 12px 7px;background:var(--pop);font:600 10.5px/1.2 var(--fm);letter-spacing:.12em;text-transform:uppercase;color:var(--mu2)}
.op{display:grid;grid-template-columns:minmax(0,1fr) auto 16px;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;cursor:pointer;scroll-margin:40px 0 8px}
.op .on{display:grid;gap:3px;min-width:0} .op b{font-weight:600;font-size:14.5px} .op .on .mono{font-size:11.5px;line-height:1.3}
.op .pr,.ogh .io{display:grid;grid-template-columns:repeat(2,58px);gap:8px;justify-items:end;white-space:nowrap} .op .pr{font:500 12px var(--fm);color:var(--tx2)}
.ogh .kd{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ogh .io{margin-right:28px;font-size:10px}
.op.act,.op:hover{background:var(--hover)}
.op .ck{color:var(--pinkhi);visibility:hidden} .op[aria-selected="true"] .ck{visibility:visible}
.mpop .none{padding:22px 14px;color:var(--mu);font-size:14px}
.mpop .note{margin:0;padding:10px 16px 12px;border-top:1px solid var(--line);font-size:11.5px;line-height:1.5}
.thread{overflow:auto;padding:32px 22px 24px;min-height:0}
.thread .in-th{max-width:780px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);gap:26px}
.msg{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.msg.u{justify-items:end} .msg.u p{max-width:56ch;padding:13px 17px;border-radius:18px 18px 4px 18px;background:linear-gradient(180deg,rgba(240,122,165,.3),rgba(240,122,165,.18));font-size:15.5px}
.msg.a .who{display:flex;align-items:center;gap:10px;font-weight:600;font-size:14px} .msg.a .who .mono{font-size:12px}
.msg.a p{max-width:66ch;font-size:15.5px;line-height:1.7;color:var(--tx2)}
.rcl{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;width:max-content;max-width:100%;padding:10px 14px;border-radius:12px;background:rgba(6,1,18,.6);box-shadow:inset 0 0 0 1px var(--line2);font:500 12px var(--fm);color:var(--mu)}
.rcl b{color:#fff;font-weight:500} .rcl a{color:var(--pinkhi);text-decoration:underline;text-underline-offset:3px}
.alert{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:14px;background:rgba(255,122,138,.08);box-shadow:inset 0 0 0 1px rgba(255,122,138,.35);font-size:14.5px}
.alert.info{background:rgba(180,156,255,.08);box-shadow:inset 0 0 0 1px rgba(180,156,255,.3)}
.welcome{display:grid;justify-items:center;text-align:center;gap:16px;padding:8vh 0 0}
.welcome img{width:96px;height:auto}
.welcome .h2{font-size:clamp(38px,4vw,56px)}
.welcome .g{font:400 84px/1 var(--fbrush);background:var(--glyph);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 8px 28px var(--glyphglow))}
.sugg{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:min(640px,100%);margin-top:10px}
.sugg button{padding:14px 16px;border-radius:14px;background:var(--glass2);box-shadow:inset 0 0 0 1px var(--line);font-size:14px;text-align:left;transition:background .2s,box-shadow .2s} .sugg button:hover{box-shadow:inset 0 0 0 1px var(--line3);background:rgba(32,20,58,.84)}
.composer{padding:0 22px calc(18px + env(safe-area-inset-bottom,0px))}
.composer .alert{max-width:780px;margin:0 auto 10px}
.composer .box{max-width:780px;margin:0 auto;display:grid;gap:10px;padding:12px 12px 10px 18px;border-radius:22px;background:var(--glass2);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:inset 0 0 0 1px var(--line2),0 20px 50px rgba(0,0,0,.4);transition:box-shadow .2s}
.composer .box:focus-within{box-shadow:inset 0 0 0 1px rgba(240,122,165,.55),0 20px 50px rgba(0,0,0,.4)}
.composer textarea{width:100%;min-height:26px;max-height:180px;resize:none;background:none;border:0;outline:0;padding:6px 0;font-size:15.5px;line-height:1.5}
.composer textarea::placeholder{color:rgba(236,226,255,.5)}
.composer .bar{display:flex;align-items:center;gap:10px} .composer .bar .sp{flex:1}
.composer .vo{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line2)} .composer .vo:hover{background:var(--hover)}
.composer .send{width:40px;height:40px;border-radius:12px;font-size:18px}
.composer .send:disabled{opacity:.4;cursor:not-allowed}
.composer .note{text-align:center;margin-top:10px}
.box.rec{align-content:center} .box.rec .vrec{height:64px;margin:0 -2px 0 -8px;gap:14px} .box.rec .vw{height:48px} .box.rec .vok{width:44px;height:44px}
.box.rec textarea,.box.rec .bar{display:none}
.mtop{display:none}
.scrim{position:fixed;inset:0;z-index:84;background:rgba(4,1,12,.6)}
/* the views other than the chat */
.apg{height:calc(100vh - var(--ah) - var(--tb));height:calc(100dvh - var(--ah) - var(--tb));overflow:auto;overscroll-behavior:contain}
.apg-in{max-width:1120px;margin:0 auto;padding:44px 32px 72px;display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-content:start}
.apg-h{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:20px 32px}
.apg-h>div:first-child{display:grid;gap:12px;max-width:640px} .apg-h .mu{text-wrap:pretty}
.apg-h .h2{font-size:clamp(40px,3.8vw,58px)}
.apg-h .acts{display:flex;flex-wrap:wrap;gap:10px}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:-14px} .sec-h.flush{margin:0} .sec-h .mono{font-size:12px}
.wg{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:16px} .wg .wi{grid-column:1/-1}
.wb{display:grid;gap:10px;padding:28px;background:linear-gradient(160deg,rgba(240,122,165,.2),var(--glass) 55%)} .wb .big{font-size:clamp(54px,5vw,78px)}
.wpay{display:grid;gap:10px;margin-top:14px;padding-top:18px;border-top:1px solid var(--line)}
.wx{display:grid;gap:14px;padding:26px} .wx>p:not(.sl){font-size:15px;line-height:1.55;color:var(--tx2)}
.wi{display:grid;gap:14px} .wi .top{display:flex;justify-content:space-between;align-items:center;gap:12px} .wi .acts{display:flex;align-items:center;gap:16px}
.tbl td.pos{color:var(--mint)}
.tbl .lk2{white-space:nowrap}
.tbl.act td,.tbl.keys td,.tbl.calls td{padding-top:13px;padding-bottom:13px}
.tbl .m{white-space:nowrap} .tbl.keys .km,.tbl.calls .sub{display:none}
.kq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:24px 32px;align-items:start;padding-top:28px;border-top:1px solid var(--line)}
.kq>div:first-child{display:grid;gap:12px;justify-items:start}
.kq .code pre{font-size:12.5px}
.ust{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.st{display:grid;gap:9px;align-content:start;padding:18px 20px 20px;border-radius:18px;background:var(--glass2);box-shadow:inset 0 0 0 1px var(--line2)}
.st b{font:400 34px/1 var(--fd);color:#fff} .st b small{font:500 11px var(--fm);color:var(--mu);margin-left:6px}
.st .mono{font-size:12px;line-height:1.45}
.uch{display:grid;gap:16px;padding:22px 24px 16px;margin:0}
.uch figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:12px} .uch figcaption b{font-weight:600;font-size:15px} .uch figcaption .mono{font-size:12px}
.chart{position:relative;height:240px}
.chart svg{display:block;width:100%;height:100%;overflow:visible}
.chart .gl{stroke:var(--line);stroke-width:1;shape-rendering:crispEdges}
.chart .ax{font:500 11px var(--fm);fill:var(--mu)} .chart .ax.now{fill:#fff}
.chart .bar{fill:#9a5a8e;transition:opacity .15s} .chart .bar.now{fill:var(--pink)} .chart .bar.dim{opacity:.45}
.chart .vl{font:600 11.5px var(--fm);fill:#fff}
.chart .hit{fill:transparent;outline:0}
.ctip{position:absolute;z-index:2;pointer-events:none;transform:translate(-50%,calc(-100% - 12px));padding:9px 12px;border-radius:10px;background:var(--pop);box-shadow:inset 0 0 0 1px var(--line2),0 12px 30px rgba(0,0,0,.4);font:500 12px/1.55 var(--fm);color:var(--mu);white-space:nowrap}
.ctip b{color:#fff;font-weight:600}
.rg{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:16px}
.rg .card{display:grid;gap:20px;padding:24px;align-content:start}
.rbars{display:grid;gap:20px}
.rbars li{display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:16px}
.rbars b{font:600 12.5px/1 var(--fm);letter-spacing:.06em}
.rbars .tr{display:block;height:10px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden}
.rbars .tr i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--pink),var(--lilac))}
.rbars .v{font:500 13px/1 var(--fm);text-align:right;white-space:nowrap} .rbars .v span{display:inline-block;min-width:46px;margin-left:10px;color:var(--mu)}
.agv-g{display:grid;grid-template-columns:300px minmax(0,1fr);gap:16px;align-items:start}
.agl{display:grid;gap:8px}
.agl button{display:grid;grid-template-columns:36px minmax(0,1fr) auto;grid-template-areas:"i n s" "i g g";align-items:start;gap:4px 12px;width:100%;padding:14px;border-radius:16px;text-align:left;background:var(--glass2);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .2s,background .2s}
.agl button:hover{box-shadow:inset 0 0 0 1px var(--line2)}
.agl button[aria-pressed="true"]{background:rgba(240,122,165,.12);box-shadow:inset 0 0 0 1.5px rgba(255,156,194,.5)}
.agl img,.agd-h img,.feed .fh img{object-fit:contain;border-radius:8px}
.agl img{grid-area:i;align-self:center} .agl .ai{display:contents} .agl b{grid-area:n;min-width:0;font-weight:600;font-size:15px;line-height:1.3;overflow-wrap:anywhere} .agl .mono{grid-area:g;min-width:0;font-size:11.5px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .agl .tg{grid-area:s}
.agd{display:grid;gap:22px;padding:26px;grid-template-columns:minmax(0,1fr)}
.agd-h{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:14px} .agd-h>div{display:grid;gap:5px;min-width:0} .agd-h .mono{font-size:12px;line-height:1.4}
.mtr{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mt{display:grid;gap:10px;padding:16px 18px 18px;border-radius:14px;background:rgba(255,255,255,.045)}
.mt .top{display:flex;justify-content:space-between;align-items:baseline;gap:10px} .mt .top>span:last-child{font:500 12px var(--fm);color:var(--mu);text-align:right}
.mt>b{font:400 28px/1 var(--fd);color:#fff}
.mt .tr{display:block;height:6px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden} .mt .tr i{display:block;height:100%;min-width:6px;border-radius:999px;background:linear-gradient(90deg,var(--pinkhi),var(--pink))}
.agd .acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px} .agd .acts .mono{margin-left:4px;font-size:12px}
.feed{display:grid;gap:10px}
.feed li{display:grid;gap:10px;padding:16px 16px 14px;border-radius:16px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--line)}
.feed .fh{display:flex;align-items:center;gap:9px;min-width:0} .feed .fh b{font-weight:600;font-size:14px} .feed .fh .mono{font-size:11.5px}
.feed p{font-size:15px;line-height:1.6;color:var(--tx2)}
.packs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.packs button{display:grid;gap:4px;padding:16px;border-radius:16px;box-shadow:inset 0 0 0 1px var(--line2);text-align:left;transition:box-shadow .2s,background .2s}
.packs button[aria-pressed="true"]{box-shadow:inset 0 0 0 1.5px var(--pinkhi);background:rgba(240,122,165,.1)}
.packs b{font:400 32px/1 var(--fd)} .packs b small{font:500 11px var(--fm);color:var(--mu);margin-left:4px} .packs span{font:500 11.5px var(--fm);color:var(--mu)}
.tudisc{padding:10px 12px;border-radius:12px;background:rgba(117,250,148,.08);box-shadow:inset 0 0 0 1px rgba(117,250,148,.28);font-size:13.5px;color:var(--tx2)}
.tudisc:empty{display:none}
.ivl{display:flex;gap:10px} .ivl .in{font-size:13px}
.nas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.nas li{display:flex;align-items:center;gap:9px;min-width:0;padding-top:12px;border-top:2px solid var(--line);font-size:13.5px;color:var(--mu);transition:color .2s,border-color .2s}
.nas li span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nas b{display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;font:600 11px/1 var(--fm);box-shadow:inset 0 0 0 1px var(--line2)}
.nas li[aria-current="step"]{border-top-color:var(--pinkhi);color:#fff} .nas li[aria-current="step"] b{background:var(--pinkhi);color:var(--onpink);box-shadow:none}
.nas li.done{border-top-color:rgba(255,156,194,.45);color:var(--tx2)} .nas li.done b{color:var(--pinkhi);box-shadow:inset 0 0 0 1px rgba(255,156,194,.45)}
.nst{display:grid;gap:14px}
.nap{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.nap button,.nam button{border-radius:14px;box-shadow:inset 0 0 0 1px var(--line2);transition:box-shadow .2s,background .2s}
.nap button:hover,.nam button:hover{box-shadow:inset 0 0 0 1px var(--line3)}
.nap button[aria-checked="true"],.nam button[aria-checked="true"]{box-shadow:inset 0 0 0 1.5px var(--pinkhi);background:rgba(240,122,165,.08)}
.nap button{display:grid;gap:6px;align-content:start;padding:14px 16px;text-align:left}
.nap .nt{display:flex;justify-content:space-between;align-items:center;gap:10px} .nap b{font-weight:600;font-size:15px} .nap .nd{font-size:13.5px;line-height:1.45;color:var(--mu)}
.nap .tg{height:20px;padding:0 8px;font-size:9.5px}
.nam{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.nam button{display:grid;justify-items:center;gap:8px;padding:16px 6px 14px;text-align:center;min-width:0}
.nam img{width:30px;height:30px;object-fit:contain;border-radius:8px} .nam b{font:500 13.5px/1.1 var(--fb);max-width:100%;overflow:hidden;text-overflow:ellipsis} .nam .tg{height:20px;padding:0 8px;font-size:9.5px}
.nalink{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 12px;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.045)}
.nalim{display:grid;grid-template-columns:1fr 1fr;gap:16px} .nalim>div{display:grid;gap:10px}
.chips [role=radio]{cursor:pointer}
.chips [role=radio][aria-checked="true"]{color:#fff;background:rgba(240,122,165,.16);box-shadow:inset 0 0 0 1.5px var(--pinkhi)}
.chips [role=radio]:disabled{opacity:.55;cursor:not-allowed}
.naf{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding-top:16px;border-top:1px solid var(--line)} .naf .sp{flex:1} .naf .mono{font-size:12px}
#nasum dd .tn{font-family:var(--fm)}
@media (max-width:1320px){ .net{display:none} }
@media (max-width:1220px){ .acct-b .ad{display:none} .acct-b{padding:0 9px 0 5px} .atools .lang-s .lc{display:none} .atools .lang-s{width:36px;padding:0;justify-content:center} }
@media (max-width:1100px) and (min-width:901px){ .atabs a{padding:0 10px;gap:7px} .atop .lk .wm-bar,.atop .lk>svg:last-child{display:none} .atop-in{gap:12px} }
@media (max-width:1010px) and (min-width:901px){ .atabs .ti{display:none} }

/* ---------- the app on tablets and phones: the tabs at the foot of the screen ---------- */
@media (max-width:900px){
  .pgapp{--ah:58px;--tb:calc(64px + env(safe-area-inset-bottom,0px))}
  body.pgapp.typing{--tb:0px} body.pgapp.typing .atabs{display:none}
  .atop-in{gap:10px;padding:0 max(12px,env(safe-area-inset-right,0px)) 0 max(14px,env(safe-area-inset-left,0px))}
  .atabs{position:fixed;left:0;right:0;bottom:0;z-index:80;height:var(--tb);display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;padding:6px max(6px,env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) max(6px,env(safe-area-inset-left,0px));background:rgba(9,4,20,.94);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border-top:1px solid var(--line)}
  .atabs a{flex-direction:column;justify-content:center;gap:5px;height:52px;padding:0 2px;border-radius:12px;font-size:11px;min-width:0}
  .atabs a span{max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .atabs a:hover{background:none}
  .atabs a[aria-current="page"]{background:none;box-shadow:none}
  .atabs a[aria-current="page"]::before{content:"";position:absolute;top:-6px;left:28%;right:28%;height:2px;border-radius:0 0 2px 2px;background:var(--pinkhi)}
  .atabs .soon{position:absolute;top:5px;left:calc(50% + 7px);width:6px;height:6px;padding:0;font-size:0;border-radius:50%;background:var(--amber);box-shadow:none}
  .atabs .ti{width:20px;height:20px}
  .app{grid-template-columns:minmax(0,1fr)}
  .side-nav{position:fixed;inset:0 auto 0 0;z-index:85;width:min(320px,86vw);background:rgba(10,5,22,.97);transform:translateX(-100%);transition:transform .3s,box-shadow .3s}
  .app.drawer .side-nav{transform:none;box-shadow:20px 0 60px rgba(0,0,0,.5)}
  .mtop{display:grid}
  .apg-in{padding:28px 18px 44px;gap:24px}
  .wg,.rg,.agv-g,.kq{grid-template-columns:minmax(0,1fr)}
  .ust{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .mpop{max-height:min(560px,calc(100dvh - var(--ah) - var(--tb) - 80px))}
  .thread{padding:24px 16px 18px} .composer{padding:0 12px 12px} .topbar{padding:10px 12px}
}
@media (max-width:640px){
  .atools{gap:6px} .atools .sbx{gap:6px}
  .bal{padding:0 4px 0 11px;gap:7px;font-size:12px} .bal i{width:24px;height:24px}
  .topbar .rate{display:none} .tn-b .k{display:none}
  .mpop{position:fixed;z-index:90;left:8px;right:8px;top:auto;bottom:calc(8px + env(safe-area-inset-bottom,0px));width:auto;max-height:min(72dvh,600px);box-shadow:inset 0 0 0 1px var(--line2),0 0 0 100vmax rgba(4,1,12,.6);animation:none}
  .mq kbd{display:none} .mq .in{padding-right:14px;font-size:16px}
  .apg-h{gap:16px} .apg-h .acts{width:100%} .apg-h .acts .btn{flex:1}
  .wb,.wx{padding:22px}
  .ust{gap:10px} .st{padding:14px 15px 16px} .st b{font-size:24px} .st b small{display:block;margin:5px 0 0;font-size:10px}
  .uch{padding:18px 14px 12px} .chart{height:220px}
  .rbars li{grid-template-columns:44px minmax(0,1fr);gap:8px 12px} .rbars .v{grid-column:2;text-align:left}
  .tbl.act th,.tbl.act td,.tbl.keys th,.tbl.keys td,.tbl.calls th,.tbl.calls td{font-size:13.5px} .tbl .m{font-size:12.5px}
  .tbl.act thead,.tbl.keys thead,.tbl.calls thead{display:none}
  .tbl.act tr,.tbl.keys tr,.tbl.calls tr{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:5px 14px;padding:13px 16px;border-top:1px solid var(--line)}
  .tbl.act tbody tr:first-child,.tbl.keys tbody tr:first-child,.tbl.calls tbody tr:first-child{border-top:0}
  .tbl.act td,.tbl.keys td,.tbl.calls td{display:block;padding:0;border:0} .tbl.act td.hide-s,.tbl.keys td.hide-s,.tbl.calls td.hide-s{display:none}
  .tbl.act td:nth-child(1){grid-area:2/1;font:500 12px/1.4 var(--fm);color:var(--mu)} .tbl.act td:nth-child(2){grid-area:1/1;font-size:14.5px}
  .tbl.act td:nth-child(3){grid-area:1/2} .tbl.act td:nth-child(4){grid-area:2/2;font-size:12px;color:var(--mu)} .tbl.act td[data-l]::before{content:attr(data-l) ' '}
  .tbl.keys td:nth-child(1){grid-area:1/1} .tbl.keys td:nth-child(2){grid-area:2/1} .tbl.keys td:nth-child(7){grid-area:1/2/3/3;align-self:center}
  .tbl.keys td:nth-child(4),.tbl.keys td:nth-child(5),.tbl.keys td:nth-child(6){display:none} .tbl.keys .km{display:block;grid-area:3/1/4/3;font:500 12px/1.5 var(--fm);color:var(--mu)}
  .tbl.keys .btn.sm{height:32px;padding:0 12px}
  .tbl.calls td.tm{display:none} .tbl.calls td:nth-child(2){grid-area:1/1} .tbl.calls .sub{display:block;margin-top:3px;font-size:11.5px}
  .tbl.calls td:nth-child(5){grid-area:1/2} .tbl.calls td:nth-child(6){grid-area:2/1/3/3;justify-self:start} .tbl.calls td:nth-child(6) .lk2{font-size:12px}
  .agd{padding:20px 18px} .agd-h{grid-template-columns:40px minmax(0,1fr)} .agd-h>.tg{grid-column:2;justify-self:start}
  .mtr{grid-template-columns:minmax(0,1fr)}
  .nap,.nalim{grid-template-columns:minmax(0,1fr)} .nap button{padding:12px 14px}
  .nam{gap:6px} .nam button{padding:12px 2px 10px} .nam b{font-size:11.5px} .nam .tg{font-size:8.5px;padding:0 5px;letter-spacing:.06em}
  .nas{display:flex;gap:6px} .nas li{flex:0 0 34px} .nas li[aria-current]{flex:1 1 auto} .nas li:not([aria-current]) span{display:none}
  .naf .mono{order:3;width:100%}
  .sugg{grid-template-columns:minmax(0,1fr)} .sugg button:nth-child(4){display:none}
  .welcome{padding:3vh 0 0;gap:12px} .welcome .g{font-size:64px}
  .packs b{font-size:26px} .packs{gap:8px} .packs button{padding:13px 12px}
  .ivl{flex-direction:column}
}
@media (max-width:480px){ .atools .bal{display:none} }
@media (max-width:374px){ .atop .lk .wm-bar,.atop .lk>svg:last-child{display:none} }

/* ---------- languages: Chinese, Cantonese, Japanese, Korean, Vietnamese (pages made by scripts/i18n.py) ---------- */
html:lang(zh-Hans){--fz:'xanai Serif SC','Noto Serif SC','Songti SC',serif;--fd:'DM Serif Display','xanai Serif SC','Noto Serif SC','Songti SC',serif;--fb:'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif}
html:lang(zh-Hant){--fz:'xanai Serif TC','Noto Serif TC','Songti TC',serif;--fd:'DM Serif Display','xanai Serif TC','Noto Serif TC','Songti TC',serif;--fb:'Inter','PingFang TC','Microsoft JhengHei','Noto Sans TC',sans-serif}
html:lang(yue){--fz:'xanai Serif HK','Noto Serif HK','Songti TC',serif;--fd:'DM Serif Display','xanai Serif HK','Noto Serif HK','Songti TC',serif;--fb:'Inter','PingFang HK','Microsoft JhengHei','Noto Sans HK',sans-serif}
html:lang(ja){--fz:'xanai Serif JP','Noto Serif JP','Hiragino Mincho ProN',serif;--fd:'DM Serif Display','xanai Serif JP','Noto Serif JP','Hiragino Mincho ProN','Yu Mincho',serif;--fb:'Inter','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic','Meiryo','Noto Sans JP',sans-serif}
html:lang(ko){--fz:'xanai Serif KR','Noto Serif KR',serif;--fd:'DM Serif Display','xanai Serif KR','Noto Serif KR','AppleMyungjo',serif;--fb:'Inter','Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',sans-serif}
html:lang(vi){--fd:'Playfair Display','Iowan Old Style',Georgia,serif}
html:is(:lang(zh),:lang(ja),:lang(ko),:lang(yue)) :is(.d1,.d2,.h2,.h3,.menu nav a,.rows .nm,.ch .nm b,.big,.pk3 .pk,.prose h2,.ag2 .top b,.fly-core b,.rsv li>b){letter-spacing:0;font-weight:600}
html:is(:lang(zh),:lang(ja),:lang(ko),:lang(yue)) :is(.d1,.d2,.h2,.h3,.rows .nm,.prose h2){line-height:1.16;text-wrap-style:balance}
html:lang(ko) :is(.d1,.d2,.h2,.h3,.rows .nm,.prose h2){word-break:keep-all;overflow-wrap:anywhere}
html:is(:lang(zh),:lang(ja),:lang(yue)){line-break:strict}
main :is(p,li,dd,dt,summary,.note){text-wrap-style:pretty}
html:is(:lang(zh),:lang(ja),:lang(yue)) :is(.d1 em,.d2 em,.h2 em,.h3 em){font-style:normal}
html:lang(ja) :is(.d1,.d2,.h2,.h3,.lead,.ex button,.cards h3,.rows .nm,.band p){word-break:auto-phrase}
.ex button,.cards h3,.rows .nm,.faq summary{text-wrap-style:pretty}
html:lang(ko) :is(.d1,.d2,.h2,.h3,.lead,p){word-break:keep-all}
html:is(:lang(zh),:lang(ja),:lang(ko),:lang(yue)) :is(.lead,.faq p,.prose p,.bub,.band p,.card p,.rows .tx p,.cards p,.facts span){line-height:1.78}
html:is(:lang(zh),:lang(ja),:lang(ko),:lang(yue)) :is(.sl,.tg,label.lb,.kv dt,.tbl th,.stp dt,.facts b,.bub.ag .nm,.btn,.status,.cut-l){letter-spacing:.08em}
html:lang(ko) :is(.mono,.sl,.tg,.badge,.kv dt,.tbl th,.facts b,label.lb,.status,.btn,.cut-l){word-spacing:-.3em}
html:lang(vi) :is(.d1,.d2,.h2,.h3){line-height:1.12}
html:lang(vi) :is(.sl,.tg,label.lb,.kv dt,.tbl th,.stp dt,.facts b,.btn){letter-spacing:.08em}
html:is(:lang(zh),:lang(ja),:lang(ko),:lang(yue)) .d1{font-size:clamp(54px,7.6vw,118px)}
html:is(:lang(zh),:lang(ja),:lang(ko),:lang(yue)) .d2{font-size:clamp(40px,4.8vw,76px)}

/* ---------- responsive ---------- */
@media (max-width:1440px){ .insc{right:24px} }
@media (max-width:1599px){ .pg .ph .insc{display:none} }
@media (max-width:1280px){
  :root{--gut:28px}
  .hd>.wrap{gap:18px}
  .hd nav a{padding:10px 9px;font-size:14px}
  .rows li{grid-template-columns:48px 50px minmax(150px,.32fr) minmax(0,1fr);}
  .rows .go{grid-column:4;justify-self:start}
  .fly-n .n2 span,.fly-n .n4 span{left:50%;right:auto;top:calc(100% + 8px);transform:translateX(-50%)}
}
@media (max-width:1100px){
  .hd .li{display:none}
  .ph-g,.ph-row{grid-template-columns:minmax(0,1fr);gap:40px}
  .ph{min-height:auto;padding-bottom:64px}
  .ph-a{max-width:620px}
  .two{grid-template-columns:minmax(0,1fr);gap:32px}
  .two>.sh{position:static}
  .cards{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .cards a:last-child{grid-column:1/-1;min-height:260px}
  .home .faq-g{grid-template-columns:minmax(0,1fr);gap:32px}
  .stp,.rsv,.ag2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .ft .cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)} .ft .about{grid-column:1/-1}
  .status nav{display:none}
  .insc{display:none}
  .ph-a .code{transform:none}
  .ref{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:1040px){ .hd nav a{padding:10px 7px;font-size:13.5px} .lang .lc{display:none} .lang{width:38px;padding:0;justify-content:center} .lang .i-chev{display:none} }
@media (max-width:900px){
  :root{--hh:64px;--gut:22px}
  .hd nav,.hd .tr>.btn,.hd .tr>.li{display:none}
  .mb{display:grid}
  .hd>.wrap{justify-content:space-between}
  .rows li{grid-template-columns:44px minmax(0,1fr);gap:12px 16px;padding:24px 0}
  .rows .no{display:none}
  .rows .zh{grid-row:1/3}
  .rows .nm,.rows .tx,.rows .go{grid-column:2}
  .cmpt{display:none} .cmpc{display:grid;gap:14px}
  .tbl.models,.tw-models{display:none}
  .mcards{display:grid;gap:10px}
  .mcards article{display:grid;gap:12px;padding:16px;border-radius:16px;background:var(--glass2);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:inset 0 0 0 1px var(--line)}
  .mcards .t{display:flex;justify-content:space-between;gap:10px;align-items:start} .mcards .t b{font-weight:600} .mcards .t div span{display:block;font-size:13px;color:var(--mu)}
  .mcards .p{display:flex;justify-content:space-between;align-items:center;gap:10px;font:500 12.5px var(--fm);color:var(--mu)} .mcards .p b{color:#fff;font-weight:500}
  .ctrl{display:grid;justify-content:stretch} .ctrl .seg{justify-self:start}
  .srch{justify-content:stretch} .srch .in{max-width:none} .srch::before{right:auto;left:14px}
  .flyw{grid-template-columns:minmax(0,1fr)} .fly{width:min(420px,100%)}
  .docs{grid-template-columns:minmax(0,1fr);gap:20px}
  .toc{position:static;display:flex;flex-wrap:wrap;gap:6px;background:none;box-shadow:none;padding:0;-webkit-backdrop-filter:none;backdrop-filter:none}
  .toc a{box-shadow:inset 0 0 0 1px var(--line2);border-radius:999px;padding:7px 12px;background:var(--glass)}
  .toc a[aria-current="true"]{box-shadow:inset 0 0 0 1px rgba(255,156,194,.6)}
  .vgrid{grid-template-columns:minmax(0,1fr)}
  .auth{grid-template-columns:minmax(0,1fr)} .auth .art{min-height:42svh;padding-bottom:24px;padding-left:var(--gut)} .auth .side{padding-top:12px;align-content:start}
  .band{flex-direction:column;align-items:flex-start}
  .menu nav a{font-size:30px}
}
@media (max-width:760px){ .pk3{grid-template-columns:minmax(0,1fr)} .pk3 article{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:6px 18px} .pk3 article .sl{grid-column:1/-1} }
@media (max-width:640px){
  :root{--gut:18px;--sb:32px}
  .status{font-size:10px;letter-spacing:.1em} .status .wrap{gap:12px} .status .root .x{display:none}
  .d1{font-size:clamp(50px,14.4vw,72px)}
  .d2{font-size:clamp(40px,11vw,56px)}
  .h2{font-size:clamp(30px,8.4vw,40px)}
  .hero{align-items:start;min-height:auto;padding:calc(var(--hh) + 28px) 0 calc(var(--sb) + 40px)}
  .hero-in{gap:18px}
  .ask{padding:14px 12px 12px 16px;border-radius:20px}
  .ask textarea{font-size:16px}
  .ask .cost{display:none}
  .ex{grid-template-columns:minmax(0,1fr);gap:8px}
  .ex button{min-height:50px;padding:10px 14px;font-size:14.5px}
  .scroll-cue{display:none}
  .sl{letter-spacing:.24em}
  .sl[data-g]::before{width:30px;height:30px;font-size:19px}
  .ph{padding-top:calc(var(--hh) + 32px)}
  .facts li{grid-template-columns:minmax(0,1fr);gap:4px;padding:13px 15px}
  .live{padding:18px;border-radius:18px}
  .cards{grid-template-columns:minmax(0,1fr)} .cards a{min-height:250px} .cards a:last-child{grid-column:auto}
  .stp,.rsv,.ag2{grid-template-columns:minmax(0,1fr)}
  .ring{grid-template-columns:minmax(0,1fr);justify-items:start;padding:22px} .ring svg{width:128px;height:128px}
  .fly{width:min(330px,100%)} .fly-core{width:48%;gap:5px} .fly-core .mono{display:none} .fly-core b{font-size:22px}
  .fly-n li span{font-size:9.5px;letter-spacing:.1em} .fly-n .n2 span,.fly-n .n4 span{left:50%;right:auto;top:calc(100% + 8px);transform:translateX(-50%)}
  .fly-s li{padding:14px 16px;grid-template-columns:28px minmax(0,1fr)}
  .vf{flex-direction:column} .vf .btn{width:100%}
  .flds div{grid-template-columns:minmax(0,1fr);gap:2px}
  .ref .tbl tr{display:grid;grid-template-columns:60px minmax(0,1fr);border-top:1px solid var(--line)} .ref .tbl tbody tr:first-child{border-top:0} .ref .tbl td{border:0;padding:12px 12px 2px 16px} .ref .tbl td.s{grid-column:2;padding:0 16px 12px 12px;font-size:13.5px}
  .ref .tbl td:last-child:not(.s){padding-bottom:12px}
  .agent dl{grid-template-columns:minmax(0,1fr)}
  .est2 .two-f{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .payrow .btn{margin-left:0;width:100%}
  .help{flex-wrap:wrap} .help .btn{width:100%}
  .ft{padding:56px 0 36px} .ft .cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px} .ft .legal{flex-direction:column;gap:10px}
  .band{padding:26px 22px} .band .chips{width:100%} .band .chips .btn{flex:1}
  .sgrid{grid-template-columns:minmax(0,1fr)}
  .cut-l{gap:10px;font-size:12px;letter-spacing:.3em}
  .prose{padding:22px 18px;border-radius:20px}
  .dlg{padding:22px 18px;border-radius:20px}
  .ov{padding:12px;align-items:end} .ov .dlg{max-height:calc(100svh - 24px)}
  .auth .box{padding:24px 20px}
  .tw{border-radius:16px}
  .cells{gap:3px} .cells i{height:20px}
}
@media (max-width:400px){
  :root{--gut:16px}
  .lk .wm-bar,.hd .lk>svg:last-child{display:none}
  .ask-meta .tg{display:none}
  .seg button{padding:0 11px;font-size:13px}
  .ft .cols{grid-template-columns:minmax(0,1fr)}
  .status .root{display:none}
}
@media (max-height:620px) and (orientation:landscape){ .hero{min-height:auto;padding-top:calc(var(--hh) + 20px)} .scroll-cue{display:none} }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important}
  .status .lv::before,.ring .sh,.qs::after,.typing i,.code .caret,.post.ghost i,.vdot,.scroll-cue::after,.emb .ring2,.emb .txt{animation:none}
  .ring .fl{animation:none;stroke-dashoffset:0}
  .pop-in,.vrec,.dlg,.menu,.lp-in,.acct-m,.mpop{animation:none}
  .cut::before,.cut::after,.cut .dim,.cut-c{transition-duration:.01s!important;transition-delay:0s!important}
  main,.ft{transition:none}
}

/* ---------- arriving through a cut: the next page opens behind the same bars and character (the class is set in the head, before paint) ---------- */
.arrive .cut{visibility:visible}
.arrive .cut::before{transform:translateY(-76%);transition:none} .arrive .cut::after{transform:translateY(76%);transition:none}
.arrive .cut .dim{opacity:1;transition:none} .arrive .cut .cut-c{opacity:1;transform:none;transition:none}
.arrive main,.arrive .ft,.arrive .status{opacity:0}
.status{transition:opacity .45s ease}
@media (min-width:901px){ .hero .d1 br{display:none} }
@media (max-width:900px){ .ph.ph-c{min-height:auto;padding-bottom:28px} }

/* ====================================================================================================================================
   v15: the veil and the scroll, the menu bar, buttons and the sound switch, the ask box, the quote, the four guards, the cards with their
   views, the questions, the closing band, a shade for every page. Later in the file than v14 on purpose: these rules win.
   ==================================================================================================================================== */

/* ---------- a shade for every page, in the order of the menu (the same turn of hue as the landscape behind it) ---------- */
body{--seal:linear-gradient(180deg,#ff94bb,#e0578c);--sealglow:rgba(224,87,140,.32)}
body[data-st="models"]{--glyph:linear-gradient(180deg,#fff0f8 0%,#ff9cd4 30%,#ec5fae 62%,#9a5ce8 100%);--seal:linear-gradient(180deg,#ff94c8,#dd56a0)}
body[data-st="pricing"]{--glyph:linear-gradient(180deg,#fdf0ff 0%,#f39ce0 30%,#d95fc0 62%,#8f5ce8 100%);--seal:linear-gradient(180deg,#f494d8,#c756b4);--sealglow:rgba(199,86,180,.32)}
body[data-st="token"]{--glyph:linear-gradient(180deg,#fff3ec 0%,#ffb0b0 30%,#f0708e 62%,#a2508e 100%);--seal:linear-gradient(180deg,#ffa4a8,#e05a7a);--sealglow:rgba(224,90,122,.32)}
body[data-st="affiliate"]{--glyph:linear-gradient(180deg,#f8f0ff 0%,#dca4f4 30%,#b866e0 62%,#7a5ae8 100%);--seal:linear-gradient(180deg,#dc9cf4,#a85ad8);--sealglow:rgba(168,90,216,.32)}
body[data-st="agents"]{--glyph:linear-gradient(180deg,#f4f0ff 0%,#c8acff 30%,#9a72f0 62%,#6a5ae0 100%);--seal:linear-gradient(180deg,#c4a4ff,#8a62e6);--sealglow:rgba(138,98,230,.34)}
body[data-st="api"]{--glyph:linear-gradient(180deg,#f0f2ff 0%,#b4b4ff 30%,#8478f0 62%,#5a60dc 100%);--seal:linear-gradient(180deg,#b0acff,#7468e6);--sealglow:rgba(116,104,230,.34)}
body[data-st="docs"],body[data-st="valley"]{--glyph:linear-gradient(180deg,#eef4ff 0%,#a8bcff 30%,#7482ea 62%,#4c62d4 100%);--seal:linear-gradient(180deg,#a4b4ff,#6272e0);--sealglow:rgba(98,114,224,.34)}
body[data-st="receipt"]{--glyph:linear-gradient(180deg,#ffffff 0%,#d6ccff 30%,#a08ef0 62%,#6a68d8 100%);--seal:linear-gradient(180deg,#cfc4ff,#8a7ae6);--sealglow:rgba(138,122,230,.34)}
.sl[data-g]::before,.rows .zh{background:var(--seal);box-shadow:0 8px 22px var(--sealglow),inset 0 1px 0 rgba(255,255,255,.35)}

/* ---------- the veil: the picture dims as you scroll (--sc), the copy stays readable from the first screen on ---------- */
.stage::after{background:radial-gradient(120% 80% at 50% 0%,transparent 55%,rgba(6,1,18,.45) 100%),linear-gradient(180deg,rgba(6,1,18,.06) 0%,rgba(6,1,18,.32) 42%,rgba(6,1,18,.82) 100%);opacity:calc(var(--v0,.6) + var(--sc,0) * var(--v1,.4))}
.stage::before{background:rgba(6,1,18,1);opacity:calc(var(--d0,.1) + var(--sc,0) * var(--d1,.5));z-index:1}
.home .stage{--v0:.55;--v1:.45;--d0:.1;--d1:.56}
.pg .stage{--v0:.62;--v1:.38;--d0:.16;--d1:.5}
.pg.read .stage{--v0:.72;--v1:.28;--d0:.28;--d1:.42}
.hero::before{inset:4% 4% 0;background:radial-gradient(52% 50% at 50% 46%,rgba(8,2,22,.62),rgba(8,2,22,.28) 58%,transparent 78%)}
.hero .d1{text-shadow:0 6px 48px rgba(12,2,30,.6)}
.hero .lead{color:#fbf4fc;text-shadow:0 1px 2px rgba(10,2,24,.55),0 2px 22px rgba(10,2,24,.7)}
.hero .hint{color:rgba(236,226,255,.72);text-shadow:0 1px 14px rgba(10,2,24,.7)}

/* ---------- the menu bar: the links in a glass rail, a light pill that follows the pointer and rests on the current page ---------- */
.hd nav{position:relative;gap:0;padding:4px;border-radius:999px;background:rgba(16,9,34,.4);-webkit-backdrop-filter:blur(16px) saturate(1.35);backdrop-filter:blur(16px) saturate(1.35);box-shadow:inset 0 0 0 1px rgba(236,226,255,.12),inset 0 1px 0 rgba(255,255,255,.07),0 12px 34px rgba(6,1,18,.28)}
.hd nav a{z-index:1;padding:9px 15px;border-radius:999px;font:500 14px/1 var(--fb);letter-spacing:.005em;color:rgba(240,232,255,.74);transition:color .25s}
.hd nav a:hover,.hd nav a:focus-visible,.hd nav a[aria-current="page"]{color:#fff}
.hd nav a[aria-current="page"]::after{content:none}
.hd nav a:focus-visible{outline-offset:-2px;border-radius:999px}
.nav-ind{position:absolute;z-index:0;left:0;top:4px;bottom:4px;width:0;border-radius:999px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);opacity:0;pointer-events:none;transition:transform .42s cubic-bezier(.2,.75,.2,1),width .42s cubic-bezier(.2,.75,.2,1),opacity .25s,background .3s,box-shadow .3s}
.nav-ind.cur{background:linear-gradient(180deg,rgba(255,156,194,.3),rgba(180,156,255,.18));box-shadow:inset 0 0 0 1px rgba(255,176,210,.45),inset 0 1px 0 rgba(255,255,255,.18),0 6px 18px rgba(240,122,165,.2)}

/* ---------- buttons: pills; the one primary in pink with a light that runs across it on hover; the rest in glass ---------- */
.btn{position:relative;isolation:isolate;height:44px;padding:0 22px;border-radius:999px;font:700 12px/1 var(--fm);letter-spacing:.16em;transition:transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .25s,background .25s,color .2s}
.btn.sm{height:36px;padding:0 16px;border-radius:999px;font-size:11px;letter-spacing:.14em}
.btn.lg{height:52px;padding:0 28px;border-radius:999px;font-size:12.5px}
.btn.pri{background:linear-gradient(180deg,#ffb4d1 0%,#f685b0 50%,#ea669c 100%);color:#2a0618;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -2px 0 rgba(150,26,76,.26),0 10px 26px rgba(240,96,152,.3),0 2px 6px rgba(240,96,152,.22)}
.btn.pri::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%) 160% 0/250% 100% no-repeat;transition:background-position .9s cubic-bezier(.2,.7,.2,1)}
.btn.pri:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 -2px 0 rgba(150,26,76,.26),0 16px 36px rgba(240,96,152,.42),0 3px 8px rgba(240,96,152,.26)}
.btn.pri:hover::after{background-position:-60% 0}
.btn.pri:active{transform:translateY(1px) scale(.99);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 2px 6px rgba(150,26,76,.3),0 6px 16px rgba(240,96,152,.28)}
.btn.out{color:var(--tx);background:rgba(16,9,34,.42);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px rgba(236,226,255,.18),inset 0 1px 0 rgba(255,255,255,.06)}
.btn.out:hover{background:rgba(255,255,255,.09);box-shadow:inset 0 0 0 1px rgba(255,190,220,.42),inset 0 1px 0 rgba(255,255,255,.1);transform:translateY(-1px)}
.btn.out:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
/* the round buttons in the header: the language, the sound, the menu */
.lang,.snd,.mb{height:40px;border-radius:999px;background:rgba(16,9,34,.4);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px rgba(236,226,255,.15),inset 0 1px 0 rgba(255,255,255,.07);color:var(--tx);transition:background .2s,box-shadow .2s,transform .15s}
.lang:hover,.lang[aria-expanded="true"],.snd:hover,.mb:hover{background:rgba(255,255,255,.09);box-shadow:inset 0 0 0 1px rgba(236,226,255,.28)}
.mb{width:42px;height:42px}
.snd{position:relative;display:inline-grid;place-items:center;width:40px;flex:none}
.snd .eq{position:absolute;inset:0;display:none;align-items:center;justify-content:center;gap:2.6px}
.snd .eq i{width:2.6px;height:14px;border-radius:2px;background:linear-gradient(180deg,#ffd0e2,var(--pinkhi));transform:scaleY(.35);animation:eq 1.05s ease-in-out infinite}
.snd .eq i:nth-child(2){animation-delay:-.45s;height:16px} .snd .eq i:nth-child(3){animation-delay:-.75s} .snd .eq i:nth-child(4){animation-delay:-.2s;height:12px}
@keyframes eq{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
.snd.on .i-snd{display:none} .snd.on .eq{display:flex}
.snd.on{box-shadow:inset 0 0 0 1px rgba(255,156,194,.55),0 0 20px rgba(240,122,165,.24)}
.snd:not(.on) .w1,.snd:not(.on) .w2{display:none}
.hd .tr{gap:12px}

/* ---------- the ask box: deeper glass, a slow ring of light round the edge, the model as a pill, round mic and send ---------- */
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
.ask{width:min(820px,100%);margin-top:14px;padding:20px 18px 14px 24px;border-radius:28px;background:linear-gradient(180deg,rgba(30,17,56,.74),rgba(14,8,30,.8));-webkit-backdrop-filter:blur(24px) saturate(1.4);backdrop-filter:blur(24px) saturate(1.4);box-shadow:inset 0 0 0 1px rgba(236,226,255,.16),inset 0 1px 0 rgba(255,255,255,.1),0 34px 90px rgba(6,1,18,.55)}
.ask::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.2px;background:conic-gradient(from var(--ang),rgba(255,156,194,0) 0deg,rgba(255,170,206,.75) 60deg,rgba(190,160,255,.55) 110deg,rgba(255,156,194,0) 170deg,rgba(255,156,194,0) 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:.5;animation:askring 10s linear infinite;pointer-events:none;transition:opacity .4s}
@keyframes askring{to{--ang:360deg}}
.ask:focus-within{box-shadow:inset 0 0 0 1px rgba(255,156,194,.4),inset 0 1px 0 rgba(255,255,255,.1),0 34px 90px rgba(6,1,18,.55),0 0 0 6px rgba(240,122,165,.08)}
.ask:focus-within::before{opacity:1}
.ask textarea{font:400 19px/1.45 var(--fb);padding:4px 0 16px}
.ask textarea::placeholder{color:rgba(240,232,255,.56)}
.ask-row{gap:10px}
.ask-meta{gap:10px}
.ask .pick{height:34px;padding:0 12px 0 14px;border-radius:999px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(236,226,255,.16);transition:background .2s,box-shadow .2s}
.ask .pick:hover,.ask .pick[aria-expanded="true"]{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,190,220,.4)}
.ask .tg{height:26px;border-radius:999px;padding:0 11px}
.ask .mic,.ask .send{width:44px;height:44px;border-radius:50%}
.ask .mic{background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(236,226,255,.18);color:var(--tx);transition:background .2s,box-shadow .2s}
.ask .mic:hover{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,190,220,.42)}
.ask .send{background:linear-gradient(180deg,#ffb4d1,#ea669c);color:#2a0618;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 10px 24px rgba(240,96,152,.36);transition:transform .2s,box-shadow .2s}
.ask .send:hover{transform:translateY(-1px) scale(1.04);box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 14px 30px rgba(240,96,152,.48)}
.ex button{border-radius:16px;background:rgba(16,9,34,.56);box-shadow:inset 0 0 0 1px rgba(236,226,255,.12);transition:background .25s,box-shadow .25s,transform .25s}
.ex button:hover{background:rgba(32,18,60,.78);box-shadow:inset 0 0 0 1px rgba(255,190,220,.36),0 14px 34px rgba(6,1,18,.4);transform:translateY(-2px)}

/* ---------- the quote: 雁过无痕，风过无声 over still water ---------- */
@font-face{font-family:'xanai Brush TC';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/yuji-syuku-quote.woff2) format('woff2')}
.quote{position:relative;z-index:1;isolation:isolate;min-height:clamp(600px,90svh,940px);display:grid;place-items:center;padding:clamp(90px,13vh,150px) 0 clamp(150px,19vh,210px);overflow:hidden}
.quote::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(62% 56% at 50% 48%,rgba(6,1,18,.58),rgba(6,1,18,.18) 70%,transparent),linear-gradient(180deg,transparent,rgba(6,1,18,.3) 50%,transparent)}
.q-sky{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}
.q-in{display:grid;justify-items:center;text-align:center;gap:22px;max-width:1040px}
.q-seal{display:grid;place-items:center;width:46px;height:46px;border-radius:10px;background:var(--seal);color:#fff;font:400 29px/1 var(--fbrush);box-shadow:0 10px 26px var(--sealglow),inset 0 1px 0 rgba(255,255,255,.35);opacity:0;transform:translateY(10px);transition:opacity .9s ease,transform 1.1s cubic-bezier(.2,.7,.2,1)}
.q-zh{margin:4px 0 2px;font:400 clamp(52px,8.2vw,126px)/1.08 var(--fbrush);letter-spacing:.05em}
.q-zh .hf{display:inline-block;white-space:nowrap}
.q-zh span span{display:inline-block;background:var(--glyph);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 10px 34px rgba(214,70,140,.42));opacity:0;transform:translateY(22px) scale(.92);transition:opacity 1.1s ease calc(var(--i) * .13s + .1s),transform 1.6s cubic-bezier(.16,.8,.2,1) calc(var(--i) * .13s + .1s)}
.q-zh .pn{display:none}   /* the comma is read (aria-label), not drawn: the two lines stand as a couplet */
.q-zh .hf{display:block}
html:is(:lang(zh-Hant),:lang(yue),:lang(ja),:lang(ko),:lang(vi)) .q-zh{font-family:'xanai Brush TC',var(--fbrush)}
.q-en{margin:0;max-width:40ch;font:400 clamp(22px,2.3vw,34px)/1.3 var(--fd);color:#fff6fb;text-wrap:balance}
.q-en em{display:block;font-style:italic;background:var(--emg);-webkit-background-clip:text;background-clip:text;color:transparent}   /* two lines, like the couplet above */
html:is(:lang(zh),:lang(ja),:lang(ko),:lang(yue)) .q-en em{font-style:normal}
.q-by{margin:0;font:500 11.5px/1.6 var(--fm);letter-spacing:.22em;text-transform:uppercase;color:var(--mu)}
.q-note{margin:8px 0 0;max-width:52ch;font:400 15.5px/1.6 var(--fb);color:var(--tx2)}
.q-en,.q-by,.q-note{opacity:0;transform:translateY(12px);transition:opacity 1s ease,transform 1.2s cubic-bezier(.2,.7,.2,1)}
.quote.on .q-seal,.quote.on .q-zh span span,.quote.on .q-en,.quote.on .q-by,.quote.on .q-note{opacity:1;transform:none}
.quote.on .q-en{transition-delay:1.1s} .quote.on .q-by{transition-delay:1.35s} .quote.on .q-note{transition-delay:1.55s}

/* ---------- the four guards: Private, Anonymous, Receipt, Agents, each with a small working picture ---------- */
.pr .sh{max-width:1040px}
.pr .h2{max-width:30ch}
.pr-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:clamp(34px,5vw,58px)}
.pr-c{position:relative;display:grid;grid-template-rows:auto auto auto 1fr auto;gap:14px;padding:16px 16px 22px;border-radius:26px;background:linear-gradient(180deg,rgba(26,15,50,.74),rgba(14,8,30,.7));-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:inset 0 0 0 1px var(--line2),inset 0 1px 0 rgba(255,255,255,.06);transition:box-shadow .35s,transform .35s}
.pr-c:hover{box-shadow:inset 0 0 0 1px rgba(255,190,220,.28),0 30px 70px rgba(6,1,18,.45);transform:translateY(-2px)}
.pr-c>:not(.pr-v){margin-inline:8px}
.pr-v{position:relative;height:156px;border-radius:18px;overflow:hidden;container-type:size;background:radial-gradient(70% 110% at 50% 110%,rgba(240,122,165,.16),transparent 70%),rgba(6,1,18,.5);box-shadow:inset 0 0 0 1px var(--line)}
.pr-c[data-k="anon"] .pr-v{background:radial-gradient(70% 110% at 50% 110%,rgba(180,156,255,.18),transparent 70%),rgba(6,1,18,.5)}
.pr-h{display:flex;align-items:center;gap:14px;margin-top:4px}
.pr-h .zh{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:11px;background:var(--seal);font:400 25px/1 var(--fbrush);color:#fff;box-shadow:0 8px 20px var(--sealglow),inset 0 1px 0 rgba(255,255,255,.35)}
.pr-c[data-k="anon"] .pr-h .zh{background:linear-gradient(180deg,#c4a8ff,#8a62e6);box-shadow:0 8px 20px rgba(138,98,230,.34),inset 0 1px 0 rgba(255,255,255,.35)}
.pr-h .nm{margin:0;font:400 clamp(28px,2.4vw,36px)/1.05 var(--fd);color:#fff6fb}
.pr-h .tg{margin-left:auto}
.pr-c p{margin:0;color:var(--tx2);max-width:62ch}
.pr-c .mono{font-size:12.5px;line-height:1.55;color:var(--mu)}
.pr-c .go{margin-top:6px}
.pr-v .lab{position:absolute;left:14px;bottom:12px;font:600 10.5px/1 var(--fm);letter-spacing:.14em;text-transform:uppercase;color:rgba(240,232,255,.7)}
.pr-v .lab b{color:#fff;font-weight:600}
/* Private: three rings of the enclave, the core, and grains that turn pink as they enter */
.v-enc .rg{position:absolute;left:50%;top:50%;width:92px;height:92px;margin:-46px 0 0 -46px;border-radius:26px;box-shadow:inset 0 0 0 1px rgba(255,156,194,.42);animation:pr-spin 18s linear infinite}
.v-enc .r2{width:128px;height:128px;margin:-64px 0 0 -64px;border-radius:36px;box-shadow:inset 0 0 0 1px rgba(255,156,194,.2);animation-duration:28s;animation-direction:reverse}
.v-enc .r3{width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:17px;box-shadow:inset 0 0 0 1.5px rgba(255,190,216,.75);animation-duration:12s}
.v-enc .core{position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;background:radial-gradient(circle,#fff 0 30%,#ff9cc2 60%,rgba(240,122,165,0) 72%);box-shadow:0 0 34px rgba(255,156,194,.85);animation:pr-beat 2.4s ease-in-out infinite}
.v-enc .pt{position:absolute;left:0;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#b8acd2;animation:pr-in 3.6s cubic-bezier(.45,0,.25,1) infinite}
.v-enc .pt:nth-of-type(5){--y:-22px;animation-delay:-.9s} .v-enc .pt:nth-of-type(6){--y:18px;animation-delay:-1.8s} .v-enc .pt:nth-of-type(7){--y:-6px;animation-delay:-2.7s} .v-enc .pt:nth-of-type(8){--y:30px}
@keyframes pr-spin{to{transform:rotate(360deg)}}
@keyframes pr-beat{0%,100%{transform:scale(.86);opacity:.85}50%{transform:scale(1.12);opacity:1}}
@keyframes pr-in{0%{transform:translate(6cqw,var(--y,0));opacity:0}12%{opacity:1}48%{background:#b8acd2;box-shadow:none}58%{background:#ffb3d0;box-shadow:0 0 12px #ff9cc2}100%{transform:translate(50cqw,0);opacity:0;background:#fff}}
/* Anonymous: a request passes the proxy; the address it carried comes out as xanai's */
.v-px .lane{position:absolute;left:6%;right:6%;top:50%;height:1px;background:linear-gradient(90deg,transparent,rgba(191,169,255,.55),transparent)}
.v-px .gate{position:absolute;left:50%;top:18%;bottom:18%;width:30px;margin-left:-15px;border-radius:10px;background:linear-gradient(180deg,rgba(191,169,255,.08),rgba(191,169,255,.2),rgba(191,169,255,.08));box-shadow:inset 0 0 0 1px rgba(191,169,255,.45),0 0 26px rgba(150,118,255,.35)}
.v-px .gate b{position:absolute;left:50%;top:10%;bottom:10%;width:2px;margin-left:-1px;background:linear-gradient(180deg,transparent,#d6c8ff,transparent);animation:pr-gate 4.4s ease-in-out infinite}
.v-px .pkt{position:absolute;left:0;top:50%;display:grid;height:28px;padding:0 12px;border-radius:999px;background:rgba(20,12,42,.9);box-shadow:inset 0 0 0 1px rgba(191,169,255,.5),0 6px 18px rgba(6,1,18,.5);font:600 11px/28px var(--fm);letter-spacing:.04em;color:#fff;white-space:nowrap;transform:translate(-50%,-50%);animation:pr-pkt 4.4s cubic-bezier(.5,0,.25,1) infinite}
.v-px .pkt span{grid-area:1/1;text-align:center;animation:pr-a 4.4s steps(1) infinite}
.v-px .pkt .b{color:var(--tanon);animation-name:pr-b}
.v-px .end{position:absolute;right:14px;top:50%;transform:translateY(-50%);font:600 10.5px/1 var(--fm);letter-spacing:.14em;text-transform:uppercase;color:rgba(240,232,255,.7);padding:7px 10px;border-radius:8px;box-shadow:inset 0 0 0 1px var(--line2)}
@keyframes pr-pkt{0%{left:18%;opacity:0}10%{opacity:1}80%{left:68%;opacity:1}100%{left:72%;opacity:0}}
@keyframes pr-a{0%{opacity:1}47%{opacity:0}}
@keyframes pr-b{0%{opacity:0}47%{opacity:1}}
@keyframes pr-gate{0%,40%,100%{opacity:.4}47%{opacity:1}}
/* Receipt: calls fold into a root; a light runs up the tree and the root is sealed */
.v-tree svg{position:absolute;inset:10px 12px 26px;width:calc(100% - 24px);height:calc(100% - 36px)}
.v-tree .ln{fill:none;stroke:rgba(255,190,220,.28);stroke-width:1.2}
.v-tree .nd circle{fill:#1a1030;stroke:rgba(255,190,220,.55);stroke-width:1.2}
.v-tree .root{fill:#2a1640;stroke:#ffb3d0;stroke-width:1.6;filter:drop-shadow(0 0 8px rgba(255,156,194,.7))}
.v-tree .run{fill:#fff;filter:drop-shadow(0 0 6px #ff9cc2)}
/* Agents: the morning brief in a group */
.v-chat{display:grid;align-content:center;gap:8px;padding:12px 16px}
.v-chat .grp{display:flex;align-items:center;gap:8px;font:600 10.5px/1 var(--fm);letter-spacing:.1em;text-transform:uppercase;color:rgba(240,232,255,.72)}
.v-chat .grp img{width:20px;height:20px;border-radius:6px}
.v-chat .bb{justify-self:start;max-width:86%;padding:8px 12px;border-radius:14px 14px 14px 4px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px var(--line);font:400 13px/1.35 var(--fb);color:var(--tx);opacity:0;transform:translateY(6px);animation:pr-bb 8s ease infinite}
.v-chat .u{justify-self:end;border-radius:14px 14px 4px 14px;background:rgba(240,122,165,.2);box-shadow:inset 0 0 0 1px rgba(255,156,194,.4);animation-delay:0s}
.v-chat .t{display:flex;gap:4px;padding:10px 12px;animation-name:pr-typ}
.v-chat .t i{width:5px;height:5px;border-radius:50%;background:rgba(240,232,255,.7);animation:pr-dot 1s ease-in-out infinite}
.v-chat .t i:nth-child(2){animation-delay:.15s} .v-chat .t i:nth-child(3){animation-delay:.3s}
.v-chat .a{animation-name:pr-bb2}
@keyframes pr-bb{0%,4%{opacity:0;transform:translateY(6px)}10%,88%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes pr-typ{0%,14%{opacity:0;max-height:0;padding-block:0}18%,34%{opacity:1;max-height:30px;padding-block:10px}38%,100%{opacity:0;max-height:0;padding-block:0}}
@keyframes pr-bb2{0%,36%{opacity:0;transform:translateY(6px)}44%,88%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes pr-dot{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-3px);opacity:1}}
.pr-c:not(.on) .pr-v *{animation-play-state:paused}

/* ---------- the cards: each a window on its page's view ---------- */
.cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.cards a{isolation:isolate;align-content:end;gap:12px;min-height:440px;padding:24px 24px 22px;border-radius:26px;background:#0c0618;box-shadow:inset 0 0 0 1px var(--line2);transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.cards a:hover{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-4px);box-shadow:inset 0 0 0 1px rgba(255,190,220,.38),0 34px 80px rgba(6,1,18,.55)}
.cards .c-pink,.cards .c-lilac,.cards .c-blue,.cards .c-violet{background:#0c0618}
.cards .ci{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:var(--op,50% 50%);transform:scale(1.06);filter:saturate(1.08) brightness(.86);transition:transform 1.8s cubic-bezier(.16,.8,.2,1),filter .6s}
.cards a:hover .ci{transform:scale(1.14);filter:saturate(1.15) brightness(.95)}
.cards .c-pink{--op:52% 50%} .cards .c-lilac{--op:82% 40%} .cards .c-violet{--op:70% 45%} .cards .c-blue{--op:45% 60%}
.cards a::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(8,3,20,.1) 0%,rgba(8,3,20,.28) 34%,rgba(8,3,20,.86) 66%,rgba(8,3,20,.96) 100%)}
.cards a::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(240px 200px at var(--mx,50%) var(--my,30%),rgba(255,170,210,.18),transparent 70%);opacity:0;transition:opacity .4s}
.cards a:hover::after{opacity:1}
.cards .bdg{background:rgba(8,3,20,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.cards h3{max-width:16ch;font-size:clamp(24px,1.9vw,30px)}
.cards p{max-width:34ch;font-size:14.5px;color:rgba(244,238,250,.84)}
.cards .go{margin-top:6px}
.cards .go svg{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.cards a:hover .go svg{transform:translateX(6px)}
.cards .big{right:auto;left:auto;top:10px;right:14px;bottom:auto;font-size:132px;color:rgba(255,255,255,.1);text-shadow:0 10px 30px rgba(6,1,18,.4)}
.cards a:hover .big{transform:translateY(-6px) rotate(-3deg)}

/* ---------- the questions ---------- */
.faq{gap:12px}
.faq details{position:relative;overflow:hidden;border-radius:18px;background:rgba(16,9,34,.56);box-shadow:inset 0 0 0 1px rgba(236,226,255,.11);transition:background .35s,box-shadow .35s}
.faq details::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:2px;border-radius:2px;background:linear-gradient(180deg,var(--pinkhi),var(--lilac));opacity:0;transform:scaleY(.4);transition:opacity .35s,transform .45s cubic-bezier(.2,.7,.2,1)}
.faq details:hover{background:rgba(24,14,46,.66);box-shadow:inset 0 0 0 1px rgba(236,226,255,.18)}
.faq details[open]{background:linear-gradient(180deg,rgba(34,20,62,.82),rgba(18,10,36,.8));box-shadow:inset 0 0 0 1px rgba(255,170,206,.3),0 18px 50px rgba(6,1,18,.38)}
.faq details[open]::before{opacity:1;transform:none}
.faq summary{padding:20px 22px 20px 24px;font:500 17px/1.4 var(--fb);transition:color .25s}
.faq summary::after{width:28px;height:28px;background:linear-gradient(var(--pinkhi),var(--pinkhi)) center/10px 1.6px no-repeat,linear-gradient(var(--pinkhi),var(--pinkhi)) center/1.6px 10px no-repeat;box-shadow:inset 0 0 0 1px rgba(255,170,206,.36);transition:transform .4s cubic-bezier(.2,.7,.2,1),background-color .3s,box-shadow .3s}
.faq details[open] summary::after{transform:rotate(135deg);background-color:rgba(240,122,165,.18);box-shadow:inset 0 0 0 1px rgba(255,170,206,.7)}
.faq details p{padding:0 24px 22px;line-height:1.7}
.faq details.opening p{animation:faq-in .5s cubic-bezier(.2,.7,.2,1) both}
.faq details.closing p{opacity:0;transition:opacity .2s}
@keyframes faq-in{from{opacity:0;transform:translateY(-6px)}}

/* ---------- the closing band ---------- */
.band{background:radial-gradient(80% 140% at 0% 0%,rgba(240,122,165,.22),transparent 60%),radial-gradient(70% 140% at 100% 100%,rgba(150,118,255,.2),transparent 60%),linear-gradient(180deg,rgba(26,15,50,.78),rgba(14,8,30,.8));box-shadow:inset 0 0 0 1px rgba(236,226,255,.14),inset 0 1px 0 rgba(255,255,255,.07),0 30px 80px rgba(6,1,18,.45)}
.band-t{display:flex;align-items:center;gap:24px;max-width:none!important}
.band-t>div{display:grid;gap:10px;max-width:600px}
.band-k{position:relative;flex:none;display:grid;place-items:center;align-content:center;width:92px;height:92px;border-radius:50%;background:radial-gradient(circle at 34% 28%,#fff6fa 0,#ffb6d2 30%,#ec6aa0 70%,#a8487e 100%);color:#2a0618;box-shadow:0 14px 34px rgba(240,96,152,.4),inset 0 -6px 14px rgba(120,20,70,.35),inset 0 4px 10px rgba(255,255,255,.55)}
.band-k::after{content:"";position:absolute;inset:-7px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,170,206,.4);animation:band-ring 3.2s ease-in-out infinite}
.band-k b{font:400 40px/.9 var(--fd)} .band-k small{font:700 8.5px/1 var(--fm);letter-spacing:.2em}
@keyframes band-ring{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.08);opacity:.2}}
.band:not(.on) .band-k::after{animation-play-state:paused}

/* ---------- the app: the backdrop fixed behind everything, the tabs in the same glass rail as the site's menu ---------- */
.pgapp>.abg{position:fixed;z-index:0}
@media (min-width:901px){
  .atabs{position:relative;padding:4px;border-radius:999px;background:rgba(16,9,34,.42);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px rgba(236,226,255,.12),inset 0 1px 0 rgba(255,255,255,.07)}
  .atabs a{height:34px;padding:0 14px;border-radius:999px;color:rgba(240,232,255,.74)}
  .atabs a:hover{background:rgba(255,255,255,.07)}
  .atabs a[aria-current="page"]{background:linear-gradient(180deg,rgba(255,156,194,.3),rgba(180,156,255,.18));box-shadow:inset 0 0 0 1px rgba(255,176,210,.45),inset 0 1px 0 rgba(255,255,255,.18),0 6px 18px rgba(240,122,165,.2)}
}
@media (max-width:1100px) and (min-width:901px){ .atabs a{padding:0 10px} }

/* a long placeholder wraps on a narrow screen instead of being cut; the keyboard hint waits for a keyboard */
@media (max-width:640px){ .ask textarea{min-height:calc(2.9em + 20px)} .composer textarea{min-height:calc(3em + 12px)} }
@media (pointer:coarse){ .composer .hide-s{display:none} }

/* ---------- v15 widths ---------- */
@media (max-width:1280px){ .cards{grid-template-columns:repeat(2,minmax(0,1fr))} .cards a{min-height:400px} .cards a:last-child{grid-column:auto;min-height:400px} }
@media (max-width:1100px){ .hd nav a{padding:9px 11px;font-size:13.5px} }
@media (max-width:1040px){ .hd nav a{padding:9px 8px;font-size:13px} .hd nav{padding:3px} .nav-ind{top:3px;bottom:3px} }
@media (max-width:900px){
  .pr-g{grid-template-columns:minmax(0,1fr)}
  .quote{min-height:auto;padding:100px 0 90px}
  .band-t{align-items:flex-start}
}
@media (max-width:640px){
  .cards{grid-template-columns:minmax(0,1fr)} .cards a,.cards a:last-child{min-height:340px}
  .cards .big{font-size:110px}
  .q-zh{font-size:clamp(46px,15vw,64px);line-height:1.15}
  .q-zh .hf{display:block}
  .q-in{gap:18px}
  .q-en{font-size:22px}
  .q-by{font-size:10.5px;letter-spacing:.16em}
  .pr-c{padding:12px 12px 18px;border-radius:22px}
  .pr-v{height:140px}
  .pr-h .nm{font-size:28px}
  .band-t{flex-direction:column;gap:16px}
  .band-k{width:76px;height:76px} .band-k b{font-size:32px}
  .ask{padding:14px 12px 12px 16px;border-radius:22px}
  .ask textarea{font-size:16.5px}
  .ask .mic,.ask .send{width:42px;height:42px}
  .faq summary{padding:18px 18px 18px 20px;font-size:16px}
  .faq details p{padding:0 20px 20px}
}
@media (prefers-reduced-motion:reduce){
  .ask::before,.snd .eq i,.v-enc *,.v-px *,.v-chat *,.v-tree *,.band-k::after{animation:none!important}
  .q-zh span span,.q-seal,.q-en,.q-by,.q-note{opacity:1!important;transform:none!important;transition:none!important}
  .v-chat .bb{opacity:1;transform:none} .v-chat .t{display:none}
  .v-px .pkt{left:68%} .v-px .pkt .a{opacity:0} .v-px .pkt .b{opacity:1}
  .v-enc .pt{display:none}
  .cards a,.cards .ci,.btn,.pr-c{transition:none}
}
/* v15: the hero's track never grows past the screen (the voice strip's bars once widened it on phones) */
.hero{grid-template-columns:minmax(0,1fr)}
/* v15: narrow phones. The guard cards keep to their column and the tag wraps when the name is long; on phones the voice strip puts its
   label and timer on a line above the wave, so the wave keeps its width */
.pr-c{grid-template-columns:minmax(0,1fr)}
.pr-h{flex-wrap:wrap;row-gap:8px}
@media (max-width:480px){
  .vrec{display:grid;grid-template-columns:auto 8px minmax(0,1fr) auto auto;grid-template-rows:16px 48px;align-content:center;align-items:center}
  .ask.rec .vrec,.box.rec .vrec{column-gap:12px;row-gap:6px;height:76px}
  .box.rec .vrec{margin:0 -2px 0 -6px}
  .vrec .vx{grid-area:2/1} .vrec .vdot{grid-area:1/2} .vrec .vl{grid-area:1/3;justify-self:start} .vrec .vt{grid-area:1/4/2/6;justify-self:end}
  .vrec .vw{grid-area:2/2/3/5;width:auto} .vrec .vok{grid-area:2/5}
}
@media (max-width:374px){
  .pr-h{gap:10px} .pr-h .zh{width:38px;height:38px;font-size:22px}
  html:is(:lang(zh),:lang(ja),:lang(ko),:lang(yue)) .d1{font-size:46px}
}
/* the voice strip sits in the middle of the box, which keeps its height while recording */
.ask.rec{display:grid;align-content:center}
/* phones: the model list opens over the whole ask box, edge to edge with it */
@media (max-width:640px){ .ask .pick-w{position:static} .ask .pick-pop{width:100%} }