/* =============== Token Router · the public site ===============
   One set of tokens with the admin (web/index.html). One header over four pages (首页 · 实时价格 · 接入方式 · 控制台);
   signing in is a dialog over the page; the console is the account under a profile band and its tabs. */
:root{
  --bg:#131418;--bg2:#17181d;--surface:#1b1c21;--surface2:#212228;--sunk:rgba(255,255,255,.025);--hover:rgba(255,255,255,.04);--press:rgba(255,255,255,.065);
  --line:#26282f;--line2:#30323a;--line3:#3f424b;
  --text:#e3e4e8;--text2:#a2a5ae;--text3:#6d717b;
  --accent:#7176ec;--accent-soft:rgba(113,118,236,.15);--accent-text:#a4a8ff;--on-accent:#fff;
  --ok:#3cbd84;--warn:#dfa043;--bad:#e5636a;
  --pop:0 18px 50px -18px rgba(0,0,0,.65),0 0 0 1px #30323a;
  --lift:0 1px 2px rgba(0,0,0,.2),0 8px 24px -12px rgba(0,0,0,.5);
  --skel:rgba(255,255,255,.05);--skel2:rgba(255,255,255,.09);
  --r:12px;--w:1200px;
  --tk-in:#7176ec;--tk-cache:#2fb7c7;--tk-out:#dfa043;
  --c1:#7f84f0;--c2:#2fb7c7;--c3:#e0a24a;--c4:#d9719a;--c5:#5fb98a;--c6:#5b5e69;
  --cr-fill:rgba(113,118,236,.13);--cr-edge1:rgba(178,182,255,.8);--cr-edge2:rgba(113,118,236,.2);--cr-t1:#e6e7ff;--cr-t2:#a2a6ff;--cr-halo:rgba(113,118,236,.5);--cr-sheen:rgba(255,255,255,.17);
    color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#fafafa;--bg2:#f4f4f6;--surface:#ffffff;--surface2:#f7f7f8;--sunk:rgba(16,16,24,.025);--hover:rgba(16,16,24,.04);--press:rgba(16,16,24,.065);
  --line:#ebebef;--line2:#dfdfe5;--line3:#c9c9d1;
  --text:#18181b;--text2:#5f5f6b;--text3:#9a9aa6;
  --accent:#5b5fd9;--accent-soft:rgba(91,95,217,.08);--accent-text:#4549c4;--on-accent:#fff;
  --ok:#139c63;--warn:#c4840a;--bad:#df454b;
  --pop:0 16px 48px -16px rgba(16,16,24,.2),0 0 0 1px rgba(16,16,24,.08);
  --lift:0 1px 2px rgba(16,16,24,.04),0 8px 24px -12px rgba(16,16,24,.14);
  --skel:rgba(16,16,24,.045);--skel2:rgba(16,16,24,.08);
  --tk-in:#5b5fd9;--tk-cache:#0f98a8;--tk-out:#c4840a;
  --c1:#5b5fd9;--c2:#0f98a8;--c3:#c98a24;--c4:#c8507d;--c5:#2f9a66;--c6:#c4c5cf;
  --cr-fill:rgba(91,95,217,.06);--cr-edge1:rgba(91,95,217,.62);--cr-edge2:rgba(91,95,217,.13);--cr-t1:#6e72f2;--cr-t2:#3c40b8;--cr-halo:rgba(91,95,217,.3);--cr-sheen:rgba(91,95,217,.13);
    color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font:400 13.5px/1.55 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.noscroll{overflow:hidden}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}button:disabled{cursor:default}
svg{display:block}
h1,h2,h3,h4{text-wrap:balance}
::selection{background:color-mix(in srgb,var(--accent) 30%,transparent)}
*{scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.num{font-variant-numeric:tabular-nums}
.mono{font-family:"SF Mono","JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;font-size:12px;letter-spacing:0}
.faint{color:var(--text3)}.muted{color:var(--text2)}
.ic{width:16px;height:16px;flex:none}
.grow{flex:1}
:focus-visible{outline:2px solid color-mix(in srgb,var(--accent) 70%,transparent);outline-offset:2px;border-radius:6px}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes popin{from{transform:translateY(4px);opacity:0}}
@keyframes rise{from{transform:translateY(8px) scale(.985);opacity:0}}
@keyframes fade{from{opacity:0}}
@keyframes ping{0%{transform:scale(1);opacity:.55}80%,100%{transform:scale(2.7);opacity:0}}
@keyframes shake{20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}
@keyframes shimmer{to{background-position:-200% 0}}

/* ---- the mark, the makers' icons, the avatar ---- */
.lmk{display:inline-grid;width:var(--lmk);height:var(--lmk);flex:none}
.lmk img{grid-area:1/1;width:100%;height:100%;user-select:none}
.lmk-l,:root[data-theme="light"] .lmk-d{display:none}:root[data-theme="light"] .lmk-l{display:block}
.aim{width:18px;height:18px;border-radius:5px;flex:none;background:var(--surface2) center/70% no-repeat;box-shadow:inset 0 0 0 1px var(--line);display:inline-grid;place-items:center;font-style:normal;font-size:10px;font-weight:650;color:var(--text2)}
.aim.lg{width:28px;height:28px;border-radius:8px}
.aim.unk{position:relative}
.aim.unk:after{content:"";position:absolute;left:50%;top:50%;width:8px;height:1.5px;margin:-.75px 0 0 -4px;border-radius:1px;background:var(--text3)}
.rq-dd .aim.unk:after,.rq-o .aim.unk:after{width:6px;margin-left:-3px}
.unk-m{color:var(--text3)}
:root[data-theme="light"] .aim{background-color:#fff}
.aim.nz{color:var(--text2)}.aim.nz .ic{width:66%;height:66%}
.ava{display:inline-grid;place-items:center;border-radius:50%;overflow:hidden;flex:none}
.ava svg{width:100%;height:100%}
.letter{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:600;color:var(--accent-text);background:var(--accent-soft);text-transform:uppercase;flex:none}

/* ---- controls ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 13px;border-radius:9px;border:1px solid var(--line2);background:var(--surface);font-size:13px;font-weight:500;white-space:nowrap;transition:background .15s,border-color .15s,color .15s,filter .15s;user-select:none}
.btn:hover{background:var(--surface2);border-color:var(--line3)}
.btn:disabled{opacity:.5}
.btn.pri{background:var(--accent);border-color:transparent;color:var(--on-accent)}.btn.pri:hover{filter:brightness(1.08);background:var(--accent)}
.btn.ghost{background:none;border-color:transparent;color:var(--text2)}.btn.ghost:hover{background:var(--hover);color:var(--text)}
.btn.sm{height:28px;padding:0 10px;font-size:12.5px;border-radius:8px;gap:5px}
.btn.lg{height:42px;padding:0 20px;font-size:14.5px;border-radius:10px;gap:8px}
.btn.wide{width:100%}
.btn.armed{border-color:var(--bad);color:var(--bad);background:color-mix(in srgb,var(--bad) 8%,transparent)}
.iconbtn{width:32px;height:32px;display:grid;place-items:center;border-radius:8px;border:0;background:none;color:var(--text2);transition:background .15s,color .15s;flex:none}
.iconbtn:hover{background:var(--hover);color:var(--text)}
.iconbtn.sm{width:28px;height:28px;border-radius:7px}
.link{border:0;background:none;padding:0;color:var(--accent-text);font-size:inherit;font-weight:500;display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.link:hover{text-decoration:underline;text-underline-offset:3px}
.spin{width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite;flex:none}
.inp{width:100%;height:34px;padding:0 11px;border-radius:9px;border:1px solid var(--line2);background:var(--bg2);outline:0;transition:border-color .15s,box-shadow .15s;font-size:13px}
.inp:hover{border-color:var(--line3)}
.inp:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.inp[readonly]{color:var(--text2)}
select.inp{appearance:none;-webkit-appearance:none;padding-right:28px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d717b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;background-size:14px}
.field{margin-bottom:14px}
.field label{display:flex;align-items:baseline;gap:8px;font-size:12.5px;font-weight:550;color:var(--text2);margin-bottom:6px}
.field label small{font-weight:400;color:var(--text3);font-size:11.5px}
.ftext{min-height:18px;font-size:12.5px;color:var(--bad);margin:-4px 0 10px}
.inrow{display:flex;gap:8px}
.seg{display:inline-flex;padding:2px;border-radius:9px;background:var(--sunk);border:1px solid var(--line);gap:2px;flex:none}
.seg button{border:0;background:none;height:26px;padding:0 11px;border-radius:7px;font-size:12.5px;font-weight:500;color:var(--text3);transition:background .15s,color .15s;white-space:nowrap}
.seg button:hover{color:var(--text)}
.seg button.on{background:var(--press);color:var(--text)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:999px;border:1px solid var(--line);background:none;color:var(--text2);font-size:12.5px;font-weight:500;transition:border-color .15s,background .15s,color .15s}
.chip:hover{border-color:var(--line3);color:var(--text)}
.chip.on{border-color:color-mix(in srgb,var(--accent) 45%,transparent);background:var(--accent-soft);color:var(--text)}
.chip .aim{width:16px;height:16px;border-radius:4px}
.chip em{font-style:normal;color:var(--text3);font-size:11.5px;font-variant-numeric:tabular-nums}
.search{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 11px;border-radius:9px;border:1px solid var(--line2);background:var(--bg2);color:var(--text3);min-width:240px;transition:border-color .15s,box-shadow .15s}
.search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.search input{border:0;outline:0;background:none;width:100%;height:100%;font-size:13px;color:var(--text)}
.search input::placeholder{color:var(--text3)}
.tag{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 7px;border-radius:6px;font-size:11.5px;font-weight:550;border:1px solid var(--line2);color:var(--text2);white-space:nowrap;font-variant-numeric:tabular-nums}
.tag i{width:6px;height:6px;border-radius:50%;background:currentColor}
.tag .ic{width:12px;height:12px}
.tag.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 30%,transparent);background:color-mix(in srgb,var(--ok) 8%,transparent)}
.tag.warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 30%,transparent);background:color-mix(in srgb,var(--warn) 8%,transparent)}
.tag.bad{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 30%,transparent);background:color-mix(in srgb,var(--bad) 8%,transparent)}
.tag.pri{color:var(--accent-text);border-color:color-mix(in srgb,var(--accent) 32%,transparent);background:var(--accent-soft)}
.ph-r .tag{height:30px;padding:0 11px;border-radius:9px;font-size:12.5px;gap:7px}
.off{display:inline-flex;align-items:center;height:20px;padding:0 6px;border-radius:5px;font-size:11.5px;font-weight:650;color:var(--accent-text);background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);white-space:nowrap;font-variant-numeric:tabular-nums;flex:none}
.st{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;white-space:nowrap;color:var(--text2)}
.st i{width:7px;height:7px;border-radius:50%;background:var(--text3)}
.st.ok i{background:var(--ok)}.st.failed i{background:var(--bad)}.st.rejected i{background:var(--warn)}
.eff{display:inline-flex;align-items:center;height:17px;padding:0 5px;border-radius:5px;font-size:10.5px;font-weight:600;background:var(--sunk);border:1px solid var(--line2);color:var(--text2);vertical-align:1px}
.eff.high,.eff.xhigh,.eff.max{color:var(--accent-text);border-color:color-mix(in srgb,var(--accent) 30%,transparent);background:var(--accent-soft)}
.kd-s{display:inline-flex;align-items:center;height:18px;padding:0 6px;border-radius:5px;font-size:12px;font-weight:550;color:var(--accent-text);background:var(--accent-soft);vertical-align:1px;white-space:nowrap}
.b-srch{display:block;margin-top:6px;font-size:12px;color:var(--text3)}
/* placeholders while the figures come */
.sk{display:inline-block;max-width:100%;border-radius:6px;background:linear-gradient(90deg,var(--skel) 0%,var(--skel2) 50%,var(--skel) 100%);background-size:200% 100%;animation:shimmer 1.5s linear infinite;vertical-align:middle}
.rows-sk>div{display:flex;align-items:center;gap:22px;padding:14px 18px;border-bottom:1px solid var(--line)}.rows-sk>div:last-child{border-bottom:0}
.chart-sk{display:flex;align-items:flex-end;padding:8px 0 22px 34px}
.chart-sk i{flex:1;margin:0 calc(19% / 30);max-width:22px;border-radius:3.5px 3.5px 0 0;background:var(--skel);animation:fade 1.2s ease infinite alternate}
/* ---- waiting on the network: the mark and three hopping stars ----
   The service's mark moving in its own way (/s/brand/loader.svg: Zastra's petals pop out in turn round the star,
   Doodod's star runs along the iris ring's track) and floating a little; under it three four-point stars in the marks'
   purple-to-blue hop in turn, squashing as they leave and land and turning a quarter on the way, each shadow small
   while its star is up; a light passes over the line under them. The mark goes round once in two hops. CSS (and the
   mark's own SVG) only, so it plays before the scripts arrive (the first load's #boot in index.html) and stays smooth
   while they run. It shows after 0.3 s, so a quick answer never flashes it; still when motion is reduced. */
.ld{display:flex;flex-direction:column;align-items:center;animation:ld-in .5s cubic-bezier(.2,.7,.2,1) .3s both}
@keyframes ld-in{from{opacity:0;transform:translateY(6px) scale(.96)}}
.ld-mk{display:grid;animation:ld-float 2.3s ease-in-out infinite alternate}
.ld-mk .lmk{--lmk:52px;display:grid}
.ld-mk .lmk img{width:136%;height:136%;margin:-18%} /* the moving mark's canvas has 18% room on every side (tools: loader marks) */
@keyframes ld-float{from{transform:translateY(2px)}to{transform:translateY(-3px)}}
.ld-row{display:flex;gap:16px;height:36px;margin-top:18px;align-items:flex-end}
.ld-s{position:relative;width:16px;height:36px}
.ld-s b{position:absolute;left:0;bottom:4px;width:16px;height:16px;filter:drop-shadow(0 0 5px color-mix(in srgb,var(--c) 70%,transparent));animation:ld-hop 1.15s cubic-bezier(.35,0,.4,1) infinite;animation-delay:var(--k)}
.ld-s b::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 45% 40%,#fff 0 14%,var(--c) 52%);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
/* on a light page the white core and glow wash out: deeper stars, a tighter shadow */
:root[data-theme="light"] .ld-s b{filter:drop-shadow(0 1px 3px color-mix(in srgb,var(--c) 45%,transparent))}
:root[data-theme="light"] .ld-s b::before{background:radial-gradient(circle at 45% 40%,color-mix(in srgb,var(--c) 35%,#fff) 0 10%,var(--c) 46%,color-mix(in srgb,var(--c) 80%,#000))}
.ld-s i{position:absolute;left:2px;bottom:0;width:12px;height:3px;border-radius:50%;background:color-mix(in srgb,var(--c) 45%,transparent);animation:ld-shade 1.15s cubic-bezier(.35,0,.4,1) infinite;animation-delay:var(--k)}
/* scale before rotate (rightmost first): the squash stays up and down whichever way the star has turned */
@keyframes ld-hop{0%{transform:translateY(0) scale(1) rotate(0)}
  12%{transform:translateY(1px) scale(1.18,.8) rotate(0)}
  32%{transform:translateY(-14px) scale(.9,1.12) rotate(35deg)}
  46%{transform:translateY(-17px) scale(1) rotate(65deg)}
  64%{transform:translateY(0) scale(1.2,.78) rotate(90deg)}
  76%{transform:translateY(-2px) scale(.96,1.05) rotate(90deg)}
  86%,100%{transform:translateY(0) scale(1) rotate(90deg)}}
@keyframes ld-shade{0%,86%,100%{transform:scale(1);opacity:.9}12%{transform:scale(1.15);opacity:1}46%{transform:scale(.45);opacity:.3}64%{transform:scale(1.2);opacity:1}}
.ld-t{margin:12px 0 0;font-size:12.5px;letter-spacing:.06em;color:var(--text3);background:linear-gradient(100deg,var(--text3) 40%,var(--text) 50%,var(--text3) 60%) 0 0/300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:ld-sh 2.4s linear infinite}
@keyframes ld-sh{from{background-position:100% 0}to{background-position:-50% 0}}
/* the first load: over everything until the page is drawn (boot in app.js), then away; before the scripts set the
   theme, the system's */
.boot{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding-bottom:6vh;background:var(--bg)}
.boot.out{animation:ld-away .32s ease forwards;pointer-events:none}
.boot.out .ld{animation:ld-gone .32s cubic-bezier(.4,0,.6,1) forwards}
@keyframes ld-away{to{opacity:0}}
@keyframes ld-gone{to{opacity:0;transform:scale(.94) translateY(-4px)}}
@media (prefers-color-scheme:light){
  :root:not([data-theme]) .boot{--bg:#fafafa;--text:#18181b;--text3:#9a9aa6}
  :root:not([data-theme]) .boot .lmk-l{display:block}:root:not([data-theme]) .boot .lmk-d{display:none}
  :root:not([data-theme]) .boot .ld-s b{filter:drop-shadow(0 1px 3px color-mix(in srgb,var(--c) 45%,transparent))}
  :root:not([data-theme]) .boot .ld-s b::before{background:radial-gradient(circle at 45% 40%,color-mix(in srgb,var(--c) 35%,#fff) 0 10%,var(--c) 46%,color-mix(in srgb,var(--c) 80%,#000))}
}
/* in a page: in the middle of what is still to come */
.ld-pg{display:grid;place-items:center;min-height:min(56vh,460px);padding:24px 0}

/* ---- toasts, tooltip, dialogs ---- */
.toasts{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;z-index:100;pointer-events:none;align-items:center}
.toast{display:flex;align-items:center;gap:9px;padding:9px 14px 9px 11px;border-radius:11px;background:var(--surface2);color:var(--text);font-size:13px;box-shadow:var(--pop);animation:popin .2s ease;max-width:min(560px,92vw)}
.toast .d{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:var(--ok);color:#fff;flex:none}.toast .d .ic{width:11px;height:11px}
.toast.err .d{background:var(--bad)}
.tt{position:fixed;z-index:90;pointer-events:none;min-width:170px;padding:9px 11px;border-radius:10px;background:var(--surface2);box-shadow:var(--pop);font-size:12px}
.tt .h{display:flex;justify-content:space-between;gap:16px;font-weight:600;margin-bottom:4px}
.tt .r{display:flex;justify-content:space-between;gap:16px;color:var(--text2);line-height:1.75}.tt .r b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.tt .r i{display:inline-block;width:7px;height:7px;border-radius:2px;margin-right:6px}
.tt .r s{color:var(--text3);font-weight:400;margin-right:2px}
.tt .tt-n{display:inline-flex;align-items:center;gap:7px}.tt .tt-n .aim{width:16px;height:16px;border-radius:4px}
.tt .h .zk{height:18px;padding:0 5px;font-size:10.5px}
.tt:has(.pt-tc){min-width:0}.pt-tc .r{gap:20px}
.tt .f{margin-top:6px;padding-top:6px;border-top:1px solid var(--line);font-size:11.5px;color:var(--text3)}
.modal-bg{position:fixed;inset:0;z-index:85;background:rgba(6,6,10,.55);display:grid;place-items:center;padding:20px;animation:fade .15s ease;overflow-y:auto}
:root[data-theme="light"] .modal-bg{background:rgba(24,24,32,.32)}
.modal{width:min(440px,100%);background:var(--surface);border-radius:16px;box-shadow:var(--pop);overflow:hidden;animation:rise .2s cubic-bezier(.2,.8,.3,1)}
.modal.wide{width:min(520px,100%)}
.modal-h{display:flex;align-items:center;gap:10px;padding:16px 14px 0 20px}.modal-h h3{margin:0;font-size:15px;font-weight:600;flex:1}
.modal-b{padding:12px 20px 20px;font-size:13px;color:var(--text2);line-height:1.75}
.modal-b p{margin:0}
.modal .tbl th:first-child,.modal .tbl td:first-child{padding-left:0}.modal .tbl th:last-child,.modal .tbl td:last-child{padding-right:0}
.contact-box{display:flex;align-items:center;gap:10px;margin:12px 0;padding:12px 14px;border-radius:10px;background:var(--sunk);border:1px solid var(--line);color:var(--text)}
.contact-box b{flex:1;font-weight:600;word-break:break-all}
/* 充值 (app.js payModal): the client's 钱包卡 (trclient components/topup.tsx and its styles, class for class). A purple
   card in the dark theme and a white one in the light (the user, 10-31: 「深色模式用紫色、浅色模式用白色的」), the
   amounts, the QR code on its white tile with the mark in its middle, and gold on success (「钱包卡加动效不错，最好再在
   成功时加一些金黄色」). A solid dialog; figures in tabular digits so nothing moves while they change; one transform on
   the card at all times, so its leaning never flickers. Every movement is off under reduced motion. */
.modal.pay-m{--gold1:#fff4c8;--gold2:#ffd76a;--gold3:#f3b63c;--gold4:#d8921b;--gold-ink:#5c3a00;--pw-ok:#c98610;width:min(420px,100%);
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 92%,#fff) 0,var(--surface) 120px);box-shadow:0 0 0 1px rgba(255,255,255,.07),0 2px 4px rgba(0,0,0,.25),0 24px 60px -16px rgba(0,0,0,.7)}
:root[data-theme="light"] .modal.pay-m{--pw-ok:#b8790a;background:#fff;box-shadow:0 0 0 1px rgba(16,16,28,.08),0 1px 2px rgba(16,16,28,.05),0 12px 28px -10px rgba(16,16,28,.16),0 36px 80px -28px rgba(16,16,28,.22)}
.pay-m .modal-b{padding:8px 20px}
.pwl .cu{font-size:.6em;font-weight:inherit;margin-right:.08em;vertical-align:.38em;opacity:.7}
.pw-grow{transition:height .38s cubic-bezier(.2,.8,.2,1);overflow:hidden;margin:-10px -12px 0;padding:0 12px}
.pw-grow>div{padding:10px 0 14px}
.pw-step{animation:pwIn .3s cubic-bezier(.16,1,.3,1) both}
@keyframes pwIn{from{opacity:0;transform:translateY(8px)}}
.pw-step.again,.pw-step.again .pw-qr,.pw-step.again .pw-ctr,.pw-step.again .pw-cr{animation:none}
.pw-wait{display:flex;align-items:center;justify-content:center;gap:8px;height:150px;color:var(--text3);font-size:12.5px}

/* the card */
.pw-wrap{position:relative;margin-bottom:16px;perspective:700px}
.pw-card{--rx:0deg;--ry:0deg;--mx:72%;--my:0%;position:relative;z-index:1;overflow:hidden;height:138px;border-radius:18px;color:#fff;isolation:isolate;
  transform:rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;backface-visibility:hidden;
  transition:height .5s cubic-bezier(.2,.8,.2,1),transform .55s cubic-bezier(.2,.8,.2,1),box-shadow .5s ease;
  background:radial-gradient(120% 150% at 100% 0%,rgba(255,255,255,.28),transparent 50%),radial-gradient(90% 120% at 0% 100%,rgba(28,22,120,.32),transparent 60%),linear-gradient(135deg,#9599f8 0%,#7176ec 45%,#5559d8 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 0 0 1px rgba(255,255,255,.12),0 14px 30px -16px rgba(70,74,200,.9)}
:root[data-theme="light"] .pw-card{color:#1d1c30;
  background:radial-gradient(110% 140% at 100% 0%,rgba(113,118,236,.18),transparent 55%),radial-gradient(80% 120% at 0% 100%,rgba(113,118,236,.08),transparent 60%),linear-gradient(135deg,#fff 0%,#f7f6ff 55%,#eeedff 100%);
  box-shadow:inset 0 0 0 1px rgba(113,118,236,.2),0 1px 2px rgba(16,16,28,.06),0 16px 32px -16px rgba(70,74,200,.42)}
:root[data-theme="light"] .pw-card::before{background:radial-gradient(circle,rgba(113,118,236,.22) 1px,transparent 1.3px) 0 0/12px 12px}
:root[data-theme="light"] .pw-card::after{border-color:rgba(113,118,236,.18);box-shadow:0 0 0 26px rgba(113,118,236,.04),0 0 0 27px rgba(113,118,236,.12)}
:root[data-theme="light"] .pw-hi{background:radial-gradient(circle at var(--mx) var(--my),rgba(113,118,236,.12),transparent 46%)}
:root[data-theme="light"] .pw-mk{width:auto;height:auto;background:none;box-shadow:none}:root[data-theme="light"] .pw-mk img{width:20px;height:20px}
:root[data-theme="light"] .pw-bal small,:root[data-theme="light"] .pw-strip>span{color:#6f6e8a}
:root[data-theme="light"] .pw-strip>span b{color:#1d1c30}
:root[data-theme="light"] .pw-tag,:root[data-theme="light"] .pw-after{color:#4b4fcc;background:rgba(113,118,236,.1);box-shadow:inset 0 0 0 1px rgba(113,118,236,.2)}
.pw-card.lean{transition:height .5s cubic-bezier(.2,.8,.2,1),transform .12s linear,box-shadow .5s ease}
.pw-card::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle,rgba(255,255,255,.16) 1px,transparent 1.3px) 0 0/12px 12px;
  -webkit-mask-image:radial-gradient(70% 90% at 100% 30%,#000,transparent 70%);mask-image:radial-gradient(70% 90% at 100% 30%,#000,transparent 70%)}
.pw-card::after{content:"";position:absolute;z-index:-1;right:-40px;top:-62px;width:220px;height:220px;border-radius:50%;border:1px solid rgba(255,255,255,.22);box-shadow:0 0 0 26px rgba(255,255,255,.04),0 0 0 27px rgba(255,255,255,.12)}
.pw-hi{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .4s ease;background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.26),transparent 46%)}
.pw-card.lean .pw-hi{opacity:1}
.pw-top,.pw-bal,.pw-after,.pw-strip{position:absolute;z-index:1;transition:opacity .3s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
.pw-top{left:18px;right:16px;top:15px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.pw-br{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:650;letter-spacing:.01em;white-space:nowrap}
.pw-mk{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:#fff;box-shadow:0 1px 2px rgba(20,18,80,.28),0 0 0 1px rgba(255,255,255,.6)}.pw-mk img{width:17px;height:17px}
.pw-tag{white-space:nowrap;font-size:11px;line-height:1.6;padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.pw-bal{left:18px;bottom:14px}
.pw-bal small{display:block;font-size:12px;line-height:1.5;color:rgba(255,255,255,.78)}
.pw-bal b{display:block;font-size:32px;font-weight:720;letter-spacing:-.03em;line-height:1.15}
.pw-after{right:16px;bottom:16px;font-size:12px;line-height:1.5;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);white-space:nowrap}
.pw-after b{display:inline-block;font-weight:650;animation:pwTick .32s cubic-bezier(.2,.8,.2,1)}
.pw-after.nil b{opacity:.7}
@keyframes pwTick{from{opacity:0;transform:translateY(5px)}}
.pw-strip{left:18px;right:18px;top:50%;display:flex;align-items:center;justify-content:space-between;opacity:0;transform:translateY(calc(-50% + 10px));pointer-events:none}
.pw-strip>span{font-size:13px;color:rgba(255,255,255,.86)}.pw-strip>span b{color:#fff;font-weight:650}
.pw-strip>b{font-size:26px;font-weight:720;letter-spacing:-.03em;line-height:1.2}
.pw-card.s-qr{height:66px}
.pw-card.s-qr .pw-top{opacity:0;transform:translateY(-10px)}
.pw-card.s-qr .pw-bal{opacity:0;transform:translateY(12px)}
.pw-card.s-qr .pw-after,.pw-card.s-done .pw-after{opacity:0;transform:scale(.9)}
.pw-card.s-qr .pw-strip{opacity:1;transform:translateY(-50%);transition-delay:.12s}

/* success: a sweep of gold, a ring of gold round the card, the gold +$ chip, gold sparks */
.pw-sweep{position:absolute;z-index:2;top:-20%;bottom:-20%;left:0;width:52%;pointer-events:none;
  background:linear-gradient(100deg,transparent 0,rgba(255,196,64,0) 14%,rgba(255,196,64,.34) 38%,rgba(255,226,140,.62) 49%,rgba(255,244,205,.7) 52%,rgba(255,206,92,.38) 62%,rgba(255,190,60,0) 84%,transparent);
  transform:translateX(-120%) skewX(-16deg);animation:pwSweep 1.25s cubic-bezier(.45,.05,.3,1) .5s forwards}
@keyframes pwSweep{to{transform:translateX(260%) skewX(-16deg)}}
.pw-plus{position:absolute;z-index:3;right:16px;bottom:16px;font-size:13px;font-weight:700;line-height:1.5;letter-spacing:-.005em;padding:4px 11px;border-radius:999px;color:var(--gold-ink);
  background:linear-gradient(180deg,var(--gold1),var(--gold2) 45%,var(--gold3));box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -1px 0 rgba(160,96,0,.25),0 0 0 1px rgba(150,95,0,.18),0 6px 16px -6px rgba(214,140,20,.75);
  animation:pwPop .62s cubic-bezier(.3,1.5,.5,1) .45s both}
@keyframes pwPop{from{opacity:0;transform:scale(.4) translateY(6px)}}
.pw-ring{position:absolute;z-index:0;inset:0;border-radius:18px;pointer-events:none;opacity:0;animation:pwRing 1.6s ease .45s}
@keyframes pwRing{0%{opacity:0;box-shadow:0 0 0 0 rgba(255,214,107,0)}25%{opacity:1;box-shadow:0 0 0 3px rgba(255,214,107,.75),0 0 28px 6px rgba(255,196,70,.45)}100%{opacity:0;box-shadow:0 0 0 10px rgba(255,214,107,0),0 0 40px 12px rgba(255,196,70,0)}}
.pw-burst{position:absolute;z-index:4;right:52px;bottom:28px;width:0;height:0;pointer-events:none}
.pw-burst i{position:absolute;left:0;top:0;opacity:0;animation:pwFly 1.15s cubic-bezier(.15,.75,.35,1) calc(.5s + var(--t)) forwards}
.pw-burst .pw-sk{width:12px;height:12px;margin:-6px 0 0 -6px;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
.pw-burst .pw-gn{width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%}
.pw-burst .pw-c0{background:linear-gradient(135deg,var(--gold1),var(--gold2))}.pw-burst .pw-c1{background:linear-gradient(135deg,var(--gold2),var(--gold3))}.pw-burst .pw-c2{background:linear-gradient(135deg,#fff,var(--gold2))}
@keyframes pwFly{0%{opacity:0;transform:translate(0,0) scale(.2) rotate(0)}14%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) scale(var(--s)) rotate(var(--r))}}

/* the amounts (up to 6: four in a row, five or six in rows of three) */
.pw-g{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:8px}
.pw-o{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:72px;border-radius:14px;border:1px solid var(--line2);background:rgba(255,255,255,.025);color:var(--text);
  transition:border-color .16s linear,background-color .16s linear,box-shadow .16s linear,transform .16s ease}
:root[data-theme="light"] .pw-o{background:#fbfbfd}
.pw-o:hover{border-color:var(--line3)}
.pw-o:active{transform:scale(.98)}
.pw-o b{font-size:21px;font-weight:680;letter-spacing:-.02em;line-height:1.2;transition:color .16s linear}
.pw-o small{font-size:11.5px;line-height:1.4;color:var(--text3)}
.pw-o.on,:root[data-theme="light"] .pw-o.on{border-color:var(--accent);background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 12%,transparent),color-mix(in srgb,var(--accent) 5%,transparent));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 13%,transparent),0 8px 18px -12px color-mix(in srgb,var(--accent) 80%,transparent)}
.pw-o.on b{color:var(--accent-text)}
/* the tick stands 6px out of the corner, edged in the dialog's ground; the box round the steps leaves it room */
.pw-ck{position:absolute;top:-6px;right:-6px;width:16px;height:16px;border-radius:50%;background:var(--accent);display:none;place-items:center;box-shadow:0 0 0 2px var(--surface);animation:pwPop .4s cubic-bezier(.3,1.6,.5,1)}
.pw-o.on .pw-ck{display:grid}
:root[data-theme="light"] .pw-ck{box-shadow:0 0 0 2px #fff}
.pw-ck svg{width:11px;height:11px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.pw-c{display:flex;align-items:center;gap:12px;height:46px;margin-top:8px;padding:0 4px 0 14px;border-radius:12px;border:1px solid var(--line2);background:rgba(255,255,255,.025);cursor:text;transition:border-color .16s linear,box-shadow .16s linear}
:root[data-theme="light"] .pw-c{background:#fbfbfd}
.pw-c:hover{border-color:var(--line3)}
.pw-c:focus-within,.pw-c.on{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 13%,transparent)}
.pw-c.bad,.pw-c.bad:focus-within{border-color:var(--bad);box-shadow:0 0 0 3px color-mix(in srgb,var(--bad) 12%,transparent)}
.pw-c>span:first-child{flex:none;font-size:13px;color:var(--text2)}
.pw-in{flex:1;display:flex;align-items:center;min-width:0}
.pw-in em{font-style:normal;font-size:15px;color:var(--text3)}
.pw-in input{flex:1;width:100%;min-width:0;height:40px;padding:0 10px 0 3px;border:0;outline:0;background:none;font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--text)}
.pw-in input::placeholder{font-weight:400;color:var(--text3)}
.pw-due{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:16px 2px 0}
.pw-due small{display:block;font-size:12px;line-height:1.5;color:var(--text3)}
.pw-due b{display:block;min-height:35px;font-size:30px;font-weight:720;letter-spacing:-.03em;line-height:1.15;color:var(--text)}
.pw-due b.nil{color:var(--text3);font-weight:500}
.pw-due>span{text-align:right;font-size:11.5px;line-height:1.6;color:var(--text3)}.pw-due>span.bad{color:var(--bad);font-size:12px}
.btn.pri.pw-go,.btn.pri.pw-go:hover{position:relative;width:100%;height:44px;margin-top:14px;gap:8px;font-size:14px;font-weight:600;border-radius:12px;border-color:transparent;color:#fff;
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 90%,#fff),var(--accent));box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 0 1px color-mix(in srgb,var(--accent) 80%,#000),0 1px 2px rgba(0,0,0,.25)}
:root[data-theme="light"] .btn.pri.pw-go,:root[data-theme="light"] .btn.pri.pw-go:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 0 1px color-mix(in srgb,var(--accent) 88%,#000),0 1px 2px rgba(16,16,28,.12),0 6px 14px -8px color-mix(in srgb,var(--accent) 70%,transparent)}
.pw-go .num{font-weight:650}
.modal-b .pw-err{display:flex;align-items:flex-start;gap:8px;margin-top:12px;padding:10px 12px;border-radius:10px;font-size:12.5px;line-height:1.6;color:var(--bad);background:color-mix(in srgb,var(--bad) 8%,transparent);border:1px solid color-mix(in srgb,var(--bad) 24%,transparent)}
.pw-err .ic{margin-top:3px}
.modal-b .pw-back{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:12px;font-size:12.5px;color:var(--text3)}.pw-back .link{margin-left:2px}

/* the QR code: a white tile (dark modules on white in either theme, or phones will not read it), the mark in its middle,
   four corners of a frame drawn in around it (cr-*: the site has a global .br) */
.pw-qw{position:relative;width:216px;margin:20px auto 0}
.pw-qw::before{content:"";position:absolute;inset:-34px;border-radius:50%;z-index:0;background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 20%,transparent),transparent)}
.pw-qr{position:relative;z-index:1;padding:8px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px rgba(16,16,28,.06),0 1px 2px rgba(16,16,28,.06),0 14px 30px -14px rgba(16,16,28,.35);
  transition:opacity .25s linear,filter .25s linear;animation:pwQr .5s cubic-bezier(.16,1,.3,1) both}
@keyframes pwQr{from{transform:scale(.95)}}
.pw-qr svg,.pw-qr img{display:block;width:100%;height:auto;aspect-ratio:1;border-radius:9px}
.pw-ctr{position:absolute;left:50%;top:50%;width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:11px;background:#fff;display:grid;place-items:center;box-shadow:0 0 0 1px rgba(16,16,28,.08);animation:pwPop .45s cubic-bezier(.3,1.5,.5,1) .35s both}
.pw-qr .pw-ctr img{width:30px;height:30px;border-radius:0}
.pw-gen{display:flex;align-items:center;justify-content:center;gap:8px;aspect-ratio:1;font-size:12.5px;color:#6d717b}
.pw-qw .pw-cr{position:absolute;z-index:2;width:20px;height:20px;border:2.5px solid var(--accent);border-radius:3px;animation:pwCr .55s cubic-bezier(.16,1,.3,1) .2s both}
.pw-cr.cr-tl{left:-9px;top:-9px;border-right:0;border-bottom:0;border-top-left-radius:9px;--cx:-8px;--cy:-8px}
.pw-cr.cr-tr{right:-9px;top:-9px;border-left:0;border-bottom:0;border-top-right-radius:9px;--cx:8px;--cy:-8px}
.pw-cr.cr-bl{left:-9px;bottom:-9px;border-right:0;border-top:0;border-bottom-left-radius:9px;--cx:-8px;--cy:8px}
.pw-cr.cr-br{right:-9px;bottom:-9px;border-left:0;border-top:0;border-bottom-right-radius:9px;--cx:8px;--cy:8px}
@keyframes pwCr{from{opacity:0;transform:translate(var(--cx),var(--cy))}}
.pw-qw.gone .pw-qr{opacity:.1;filter:blur(1px)}.pw-qw.gone .pw-cr{border-color:var(--line3)}
.pw-x{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;animation:fade .2s ease}
.pw-x b{font-size:14px;font-weight:600;color:var(--text)}
.pw-tm{display:flex;align-items:center;gap:10px;width:216px;margin:22px auto 0;font-size:12px;color:var(--text3)}
.pw-tm .num{min-width:36px;text-align:right;transition:color .2s linear}
.pw-bar{flex:1;height:4px;border-radius:2px;background:var(--line2);overflow:hidden}
.pw-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 70%,#fff),var(--accent));transform-origin:left;transform:scaleX(var(--f));animation:pwBar var(--d) linear forwards}
@keyframes pwBar{to{transform:scaleX(0)}}
.pw-tm.low .pw-bar i{background:var(--warn)}.pw-tm.low .num{color:var(--warn)}
.pw-tm.gone .pw-bar i{animation:none;transform:scaleX(0)}
.modal-b .pw-how{margin-top:14px;text-align:center;font-size:13.5px;font-weight:600;color:var(--text)}
.modal-b .pw-alt{margin-top:4px;display:flex;justify-content:center;font-size:12.5px}
.modal-b .pw-st{display:flex;align-items:center;justify-content:center;gap:8px;min-height:20px;margin-top:3px;font-size:12px;color:var(--text3)}
.pw-dot{position:relative;width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}
.pw-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--accent);animation:ping 1.6s cubic-bezier(0,0,.2,1) infinite}
.pw-nt{display:inline-flex;align-items:center;gap:6px;color:var(--warn)}
.pw-f{display:flex;justify-content:center;margin:14px -20px -6px;padding-top:10px;border-top:1px solid var(--line)}

/* what came in, in gold */
.pw-ok{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;border:1px solid color-mix(in srgb,var(--gold3) 32%,transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--gold2) 12%,transparent),color-mix(in srgb,var(--gold2) 3%,transparent))}
.pw-oki svg{display:block;width:36px;height:36px;fill:none;stroke:var(--pw-ok);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pw-oki circle{fill:color-mix(in srgb,var(--gold2) 22%,transparent);stroke-dasharray:98;stroke-dashoffset:98;animation:pwDraw .55s cubic-bezier(.4,0,.2,1) .55s forwards}
.pw-oki path{stroke-dasharray:22;stroke-dashoffset:22;animation:pwDraw .3s cubic-bezier(.4,0,.2,1) 1s forwards}
@keyframes pwDraw{to{stroke-dashoffset:0}}
.pw-ok b{display:block;font-size:15px;font-weight:650;line-height:1.5;color:var(--text)}
.pw-ok small{display:block;margin-top:1px;font-size:12px;line-height:1.5;color:var(--text3)}
@media (max-width:360px){.pw-g{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){
  .pw-card,.pw-card.lean,.pw-grow{transition:none}.pw-step,.pw-qr,.pw-ctr,.pw-qw .pw-cr,.pw-ck,.pw-after b{animation:none}
  .pw-sweep,.pw-ring,.pw-burst{display:none}.pw-plus{animation:none}.pw-dot::after{animation:none}.pw-bar i{animation:none}
  .pw-oki circle,.pw-oki path{animation:none;stroke-dashoffset:0}}
.rqd-h{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text)}.rqd-h .mono{font-weight:600;font-size:13px}
.rqd-t{margin-top:14px}.rqd-t td{padding-top:8px;padding-bottom:8px}
.rqd-t tfoot td{border-top:1px solid var(--line2);border-bottom:0;font-weight:600;color:var(--text)}
/* a charge: the discount of its moment (the accent), the list price it came from, what was paid */
.off{display:inline-flex;align-items:center;justify-content:center;height:20px;padding:0 7px;border-radius:6px;font-size:11.5px;font-weight:620;color:var(--text3);background:var(--sunk);border:1px solid var(--line);white-space:nowrap;font-variant-numeric:tabular-nums}
.off.on{color:var(--accent-text);background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 28%,transparent)}
.off.big{height:30px;padding:0 11px;border-radius:8px;font-size:17px;letter-spacing:-.01em;margin-top:6px}
s.was{color:var(--text3);font-weight:400;text-decoration-thickness:1px}
.kpis b s.was{font-size:13px;margin-left:8px;letter-spacing:0}
.rqd-pay{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:14px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.rqd-pay>div{padding:12px 14px 13px;border-left:1px solid var(--line);min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.rqd-pay>div:first-child{border-left:0}
.rqd-pay small{font-size:12px;color:var(--text2)}
.rqd-pay b{display:block;font-size:20px;font-weight:620;letter-spacing:-.02em;margin-top:6px;font-variant-numeric:tabular-nums;color:var(--text)}
.rqd-pay b s{color:var(--text3);font-weight:500}
.rqd-pay .pay{background:var(--sunk)}.rqd-pay .pay b{font-size:22px}
.rqd-pay em{font-style:normal;font-size:11.5px;color:var(--text3);margin-top:5px;line-height:1.4}
@media (max-width:520px){.rqd-pay{grid-template-columns:1fr}.rqd-pay>div{border-left:0;border-top:1px solid var(--line)}.rqd-pay>div:first-child{border-top:0}}
.rqd-id{display:flex;align-items:center;gap:8px;margin-top:14px;padding-top:12px;border-top:1px dashed var(--line2);font-size:12px;color:var(--text3)}
.rqd-id .mono{color:var(--text2)}.rqd-id .link{margin-left:auto;font-size:12px}

/* ---- signing in and joining: one dialog over the page. A solid card on a dimmed page (nothing of the page shows
   through it, and no glow spreads past it): a hairline edge, a soft neutral shadow, a light catching its top edge.
   Its head is a small scene in fine ink lines round the mark's tile (amDoo), dressed for the season: a ringed planet
   and a moon most of the year; pumpkin, bats, a spider and a witch's hat at Halloween; a tree, snow and a moon in a
   Santa hat at Christmas; lanterns and a 福 tag at the Spring Festival (amSeason). Stars rise from what is typed and
   the password's dots are small stars (amStars). The card leans a little toward the pointer and the scene's layers
   part (amTilt): the lean is the card's only transform from first to last frame (coming, going and the shake use
   translate and scale), so nothing switches and nothing flickers. */
.auth-bg,:root[data-theme="light"] .auth-bg{background:rgba(8,8,12,.68);animation:fade .2s ease both}
:root[data-theme="light"] .auth-bg{background:rgba(30,30,44,.3)}
.auth-bg.out{pointer-events:none;animation:amGone .2s ease forwards}
.auth-m{--am-edge:rgba(255,255,255,.075);--am-top:rgba(255,255,255,.14);--am-dot:rgba(255,255,255,.06);--am-foot:rgba(255,255,255,.018);
  --am-in:rgba(255,255,255,.028);--am-in-b:rgba(255,255,255,.09);--am-in-h:rgba(255,255,255,.16);--am-ring:color-mix(in srgb,var(--accent) 24%,transparent);
  --am-ink:#a3a6ff;--am-fill:rgba(163,166,255,.13);--am-s0:#fff;--am-s1:#c9cbff;--am-s2:#8b8ff5;--am-glow:rgba(255,255,255,.05);
  --am-orange:rgba(255,176,110,.24);--am-orange2:rgba(255,196,140,.16);--am-red:#ff8d84;--am-red2:rgba(255,120,110,.22);--am-gold:#f2c36b;--am-mint:rgba(140,220,180,.16);--am-pink:#ff9fbf;--am-snow:#fff;
  position:relative;isolation:isolate;width:min(400px,100%);border-radius:18px;overflow:hidden;
  transform:perspective(1100px) rotateX(calc(var(--ty,0)*-3deg)) rotateY(calc(var(--tx,0)*3.6deg));backface-visibility:hidden;will-change:transform;
  animation:amIn .44s cubic-bezier(.16,1,.3,1) both;
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 92%,#fff) 0,var(--surface) 120px);
  box-shadow:0 0 0 1px var(--am-edge),0 2px 4px rgba(0,0,0,.25),0 24px 60px -16px rgba(0,0,0,.7)}
:root[data-theme="light"] .auth-m{--am-edge:rgba(16,16,28,.08);--am-top:#fff;--am-dot:rgba(16,16,28,.055);--am-foot:#fafafc;
  --am-in:#fff;--am-in-b:rgba(16,16,28,.12);--am-in-h:rgba(16,16,28,.2);--am-ring:color-mix(in srgb,var(--accent) 16%,transparent);
  --am-ink:#7b7fe6;--am-fill:#f1f1ff;--am-s0:#d4d6ff;--am-s1:#7d81ec;--am-s2:#4b4fcc;--am-glow:color-mix(in srgb,var(--accent) 6%,transparent);
  --am-orange:#ffe2c6;--am-orange2:#fff0e2;--am-red:#d9574c;--am-red2:#ffdcd6;--am-gold:#e9b44c;--am-mint:#e4f4ea;--am-snow:#fff;
  background:#fff;box-shadow:0 0 0 1px var(--am-edge),0 1px 2px rgba(16,16,28,.05),0 12px 28px -10px rgba(16,16,28,.16),0 36px 80px -28px rgba(16,16,28,.22)}
/* the light along the top edge; a soft light that follows the pointer (moved, never repainted) */
.auth-m::after{content:"";position:absolute;top:0;left:18%;right:18%;height:1px;z-index:3;pointer-events:none;background:linear-gradient(90deg,transparent,var(--am-top),transparent)}
:root[data-theme="light"] .auth-m::after{display:none}
.am-glow{position:absolute;z-index:0;left:50%;top:22%;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,var(--am-glow),transparent);translate:calc(var(--tx,0)*150px) calc(var(--ty,0)*120px)}
.am-defs{position:absolute;width:0;height:0;overflow:hidden}
.auth-bg.out .auth-m{animation:amOut .2s ease forwards}
.auth-m.shk{animation:amShake .42s ease}
@keyframes amIn{from{opacity:0;translate:0 12px;scale:.975}}
@keyframes amOut{to{opacity:0;translate:0 6px;scale:.985}}
@keyframes amShake{20%{translate:-8px 0}40%{translate:7px 0}60%{translate:-4px 0}80%{translate:2px 0}}
@keyframes amGone{to{opacity:0}}
@keyframes amUp{from{opacity:0;translate:0 6px}}
.am-x{position:absolute;top:12px;right:12px;z-index:4;width:30px;height:30px;border-radius:8px;color:var(--text3)}
.am-x:hover{color:var(--text);background:var(--hover)}
.am-h{position:relative;z-index:1;padding:44px 32px 0;text-align:center}
.am-h::before{content:"";position:absolute;left:0;right:0;top:0;height:170px;pointer-events:none;
  background:radial-gradient(circle,var(--am-dot) 1px,transparent 1.3px) 50% 9px/14px 14px;
  -webkit-mask-image:radial-gradient(ellipse 46% 60% at 50% 72px,#000 14%,transparent 72%);mask-image:radial-gradient(ellipse 46% 60% at 50% 72px,#000 14%,transparent 72%)}
.am-t{position:relative;translate:calc(var(--tx,0)*1.5px) calc(var(--ty,0)*1px)}
.am-t>*,.am-b>*,.am-f{animation:amUp .44s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i,0)*35ms + 80ms)}
.am-h h2{margin:0;font-size:20px;font-weight:650;letter-spacing:-.018em;line-height:1.3}
.am-h p{margin:6px 0 0;color:var(--text2);font-size:13.5px}

/* the mark's tile, nearest of all when the card leans */
.am-mkw{position:relative;width:58px;height:58px;margin:0 auto 20px;translate:calc(var(--tx,0)*4px) calc(var(--ty,0)*3px);animation:amPop .5s cubic-bezier(.16,1,.3,1) .04s both}
@keyframes amPop{from{opacity:0;scale:.9}}
.am-mk{position:relative;z-index:1;display:grid;place-items:center;width:58px;height:58px;border-radius:17px;
  background:linear-gradient(180deg,#2a2b33,#1f2026);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 1px 0 rgba(255,255,255,.1),0 1px 2px rgba(0,0,0,.4),0 10px 24px -10px rgba(0,0,0,.8)}
:root[data-theme="light"] .am-mk{background:linear-gradient(180deg,#fff,#f5f5f9);box-shadow:inset 0 0 0 1px rgba(16,16,28,.08),inset 0 -1px 0 rgba(16,16,28,.04),0 1px 2px rgba(16,16,28,.06),0 10px 22px -10px rgba(16,16,28,.2)}
.am-mk .lmk{translate:calc(var(--tx,0)*1.5px) calc(var(--ty,0)*1px)}

/* the scene: fine ink lines, pale fills, three depths (px1 near, px2 middle, px3 far) */
.am-doo{position:absolute;left:0;right:0;top:0;width:100%;height:136px;pointer-events:none;overflow:visible}
.am-doo .ink{fill:var(--am-fill);stroke:var(--am-ink);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.am-doo .ln{fill:none;stroke:var(--am-ink);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.am-doo .thin{stroke-width:.9}
.am-doo .fi{fill:var(--am-ink)}
.am-doo .sp{fill:var(--am-ink);transform-box:fill-box;transform-origin:center;animation:dooTw 3.8s ease-in-out infinite}
.am-doo .dt{fill:var(--am-ink);opacity:.45}
.am-doo .px1{transform:translate(calc(var(--tx,0)*-10px),calc(var(--ty,0)*-7px))}
.am-doo .px2{transform:translate(calc(var(--tx,0)*-6px),calc(var(--ty,0)*-4px))}
.am-doo .px3{transform:translate(calc(var(--tx,0)*-3px),calc(var(--ty,0)*-2px))}
.am-doo .bob{animation:dooBob 6.4s ease-in-out infinite}.am-doo .bob2{animation:dooBob 7.2s ease-in-out -2.6s infinite}
.am-doo .ss{opacity:0;animation:dooShoot 12s cubic-bezier(.3,.1,.4,1) 3s infinite}
@keyframes dooBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.5px)}}
@keyframes dooTw{0%,100%{opacity:.25;transform:scale(.55) rotate(0)}50%{opacity:1;transform:scale(1) rotate(45deg)}}
@keyframes dooShoot{0%{opacity:0;transform:translate(0,0)}1.5%{opacity:1}7%{opacity:0;transform:translate(150px,44px)}100%{opacity:0;transform:translate(150px,44px)}}
/* Halloween: a pumpkin with a small face, a full moon with a bat across it, two bats flying by, a spider on its thread */
.am-doo .pkn{fill:var(--am-orange)}.am-doo .pk2{fill:var(--am-orange2)}.am-doo .stem{fill:var(--am-mint)}
.am-doo .moon .cr{fill:var(--am-ink);opacity:.14}.am-doo .moon .halo{fill:none;stroke:var(--am-ink);stroke-width:.8;opacity:.28;stroke-dasharray:1.5 3.5}
.am-doo .bat{fill:var(--am-ink)}.am-doo .bwg{transform-box:fill-box;animation:batFlap .36s ease-in-out infinite alternate}
.am-doo .bwg.l{transform-origin:100% 40%}.am-doo .bwg.r{transform-origin:0 40%}
@keyframes batFlap{from{transform:scaleY(1) rotate(0)}to{transform:scaleY(.42) rotate(6deg)}}
.am-doo .bwg.r{animation-name:batFlapR}@keyframes batFlapR{from{transform:scaleY(1) rotate(0)}to{transform:scaleY(.42) rotate(-6deg)}}
.am-doo .fly{opacity:0;animation:batFly 17s cubic-bezier(.45,.05,.55,.95) infinite}.am-doo .fly.f2{animation-duration:21s;animation-delay:-9s}
.am-doo .fly .bank{animation:batBank 2.8s ease-in-out infinite alternate}
@keyframes batFly{0%{opacity:0;transform:translate(-24px,18px)}8%{opacity:1}30%{transform:translate(110px,6px)}55%{transform:translate(236px,20px)}80%{transform:translate(340px,8px)}92%{opacity:1}100%{opacity:0;transform:translate(430px,16px)}}
@keyframes batBank{from{transform:translateY(-1.5px) rotate(-7deg)}to{transform:translateY(1.5px) rotate(6deg)}}
.am-doo .spd .th{transform-box:fill-box;transform-origin:50% 0;animation:spdTh 6s ease-in-out infinite}
.am-doo .spd .bd{animation:spdBd 6s ease-in-out infinite}
@keyframes spdTh{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.62)}}
@keyframes spdBd{0%,100%{transform:translateY(0)}50%{transform:translateY(-10.6px)}}
/* Christmas: a tree with a garland and lights, a moon in a Santa hat, snow that comes and goes softly */
.am-doo .tree{fill:var(--am-mint)}.am-doo .trunk{fill:var(--am-orange)}
.am-doo .gar{fill:none;stroke:var(--am-pink);stroke-width:1.1;stroke-linecap:round;stroke-dasharray:.1 2.6}
.am-doo .lt{animation:dooLt 2.4s ease-in-out infinite}.am-doo .lt.p{fill:var(--am-pink)}.am-doo .lt.g{fill:var(--am-gold);animation-delay:-.8s}.am-doo .lt.v{fill:var(--am-ink);animation-delay:-1.6s}
@keyframes dooLt{0%,100%{opacity:1}50%{opacity:.35}}
.am-doo .tstar{fill:var(--am-gold);stroke:var(--am-ink);stroke-width:.9;stroke-linejoin:round;transform-box:fill-box;transform-origin:center;animation:dooStar 3.2s ease-in-out infinite}
@keyframes dooStar{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.14) rotate(10deg)}}
.am-doo .cap{fill:var(--am-red2)}.am-doo .fur{fill:var(--am-snow)}
.am-doo .hatg{transform-box:fill-box;transform-origin:20% 90%;animation:capSway 4.4s ease-in-out infinite alternate}
@keyframes capSway{from{transform:rotate(-4deg)}to{transform:rotate(5deg)}}
.am-doo .fl{opacity:0;animation:snowFall linear infinite}
.am-doo .fl>*{fill:var(--am-ink);opacity:.55;animation:snowSway ease-in-out infinite alternate}
:root:not([data-theme="light"]) .am-doo .fl>*{fill:#fff;opacity:.8}
.am-doo .fl .fk{fill:none;stroke:var(--am-ink);stroke-width:.7;stroke-linecap:round}:root:not([data-theme="light"]) .am-doo .fl .fk{stroke:#fff}
@keyframes snowFall{0%{opacity:0;transform:translateY(-8px)}10%{opacity:1}82%{opacity:1}100%{opacity:0;transform:translateY(142px)}}
@keyframes snowSway{from{transform:translateX(-3px)}to{transform:translateX(3px)}}
/* the Spring Festival: two lanterns swinging at their own pace, their tassels a beat behind */
.am-doo .lan{animation:lanSw ease-in-out infinite alternate}
.am-doo .lan .tas{transform-box:fill-box;transform-origin:50% 0;animation:lanTas ease-in-out infinite alternate;animation-duration:inherit}
.am-doo .lb{fill:var(--am-red2);stroke:var(--am-red)}.am-doo .lr{fill:none;stroke:var(--am-red);stroke-width:.9;opacity:.55}
.am-doo .lc{fill:var(--am-gold);stroke:var(--am-ink);stroke-width:.9}.am-doo .ls{fill:none;stroke:var(--am-red);stroke-width:1;stroke-linecap:round}
.am-doo .lk{fill:var(--am-red)}
@keyframes lanSw{from{transform:rotate(-4.5deg)}to{transform:rotate(4.5deg)}}
@keyframes lanTas{from{transform:rotate(5deg)}to{transform:rotate(-5deg)}}
.am-doo.t-gold .sp{fill:var(--am-gold)}.am-doo.t-pink .sp{fill:var(--am-pink)}

/* the season's touch on the tile: a witch's hat at its corner, a cap of snow, a 福 tag hanging at its side */
.am-wear{position:absolute;z-index:2;pointer-events:none;overflow:visible}
.am-wear .ink{fill:var(--am-fill);stroke:var(--am-ink);stroke-width:1.3;stroke-linejoin:round;stroke-linecap:round}
.am-wear .ln{fill:none;stroke:var(--am-ink);stroke-width:1.2;stroke-linecap:round}
.am-wear.hat{left:-9.2px;top:-23.1px;width:38px;height:34px;transform-origin:18px 27px;rotate:-32deg;animation:hatTip 5.2s ease-in-out infinite alternate}
.am-wear.hat .band{fill:var(--am-ink);opacity:.85}.am-wear.hat .bk{fill:var(--am-gold)}
@keyframes hatTip{from{rotate:-35deg}to{rotate:-29deg}}
.am-wear.snowcap{left:-3px;top:-3px;width:64px;height:17px;filter:drop-shadow(0 1.5px 1px rgba(16,16,28,.08))}
.am-wear.snowcap .sn{fill:var(--am-snow);stroke:color-mix(in srgb,var(--accent) 26%,transparent);stroke-width:.8}
.am-wear.snowcap .gl{fill:none;stroke:color-mix(in srgb,var(--accent) 22%,transparent);stroke-width:.8;stroke-linecap:round}
:root:not([data-theme="light"]) .am-wear.snowcap .sn{fill:#f1f2ff;stroke:none}
.am-wear.fu{right:-12px;top:17px;width:24px;height:40px;transform-origin:12px 0;animation:lanSw 3.8s ease-in-out infinite alternate}
.am-wear.fu .tag{fill:var(--am-red);stroke:color-mix(in srgb,var(--am-red) 70%,#000);stroke-width:.8}
.am-wear.fu .rim{fill:none;stroke:var(--am-gold);stroke-width:.7;opacity:.9}
.am-wear.fu .str{fill:none;stroke:var(--am-red);stroke-width:1;stroke-linecap:round}
.am-wear.fu text{font:700 8.6px/1 "PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;fill:#ffe9b8}

/* stars from the keys: from the caret a small sparkle rises and turns, now and then with a speck of dust; the
   password's dots are small sparkles that pop in with a ring of light and shrink away; the button sends a star across */
.am-b{position:relative;z-index:1;padding:26px 32px 0}
.ams{position:absolute;z-index:2;top:50%;width:var(--s,10px);height:var(--s,10px);margin:calc(var(--s,10px)/-2) 0 0 calc(var(--s,10px)/-2);pointer-events:none;
  filter:drop-shadow(0 0 2.5px color-mix(in srgb,var(--accent) 55%,transparent));animation:amsUp 1.05s cubic-bezier(.22,.7,.3,1) forwards}
.ams svg,.amp svg{display:block;width:100%;height:100%;overflow:visible}
.ams path,.amp path{fill:url(#am-sg)}.ams circle,.amp circle{fill:#fff}
@keyframes amsUp{0%{opacity:0;transform:translate(0,4px) scale(.2) rotate(0)}18%{opacity:1;transform:translate(calc(var(--dx)*.25),-6px) scale(1.15) rotate(calc(var(--r)*.3))}
  45%{transform:translate(calc(var(--dx)*.6),-14px) scale(.9) rotate(calc(var(--r)*.6))}60%{opacity:1;transform:translate(calc(var(--dx)*.75),-18px) scale(1) rotate(calc(var(--r)*.75))}
  100%{opacity:0;transform:translate(var(--dx),-28px) scale(.35) rotate(var(--r))}}
.amd{position:absolute;z-index:2;top:50%;width:3px;height:3px;margin:-1.5px 0 0 -1.5px;border-radius:50%;background:var(--am-s1);pointer-events:none;animation:amdUp .9s ease-out .06s both}
@keyframes amdUp{0%{opacity:0;transform:translate(0,0)}25%{opacity:.9}100%{opacity:0;transform:translate(var(--dx),-20px) scale(.4)}}
.am-b .inp.amsec{color:transparent;caret-color:var(--text);letter-spacing:6px}
.am-b .inp.amsec::selection{background:color-mix(in srgb,var(--accent) 22%,transparent)}
.ampw{position:absolute;left:0;right:44px;top:0;bottom:0;pointer-events:none;overflow:hidden}
.amp{position:absolute;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;filter:drop-shadow(0 0 1.5px color-mix(in srgb,var(--accent) 45%,transparent));animation:ampIn .42s cubic-bezier(.3,1.6,.5,1) both}
.amp::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:1px solid color-mix(in srgb,var(--accent) 60%,transparent);opacity:0;animation:ampRing .5s ease-out both}
.amp.out{animation:ampOut .16s ease-in forwards}
@keyframes ampIn{0%{transform:scale(0) rotate(-90deg)}100%{transform:none}}
@keyframes ampRing{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(1.5)}}
@keyframes ampOut{to{opacity:0;transform:scale(0) rotate(60deg)}}
.am-b .field{margin-bottom:14px}
.am-b .field label{display:flex;align-items:baseline;gap:8px;margin-bottom:7px;font-size:12.5px;font-weight:500;color:var(--text2);transition:color .2s}
.am-b .field label small{font-weight:400;color:var(--text3);font-size:11.5px}
.am-b .field:focus-within label{color:var(--text)}
.am-in{position:relative}
.am-in>.ic{position:absolute;left:13px;top:50%;margin-top:-8px;color:var(--text3);pointer-events:none;transition:color .2s}
.am-in:focus-within>.ic{color:var(--accent-text)}
.am-b .inp{height:42px;padding-left:39px;font-size:14px;border-radius:10px;background:var(--am-in);border:1px solid var(--am-in-b);
  box-shadow:0 1px 2px rgba(0,0,0,.12);transition:border-color .18s,box-shadow .18s,background-color .18s}
:root[data-theme="light"] .am-b .inp{box-shadow:0 1px 2px rgba(16,16,28,.05)}
.am-b .inp:hover{border-color:var(--am-in-h)}
.am-b .inp:focus{border-color:var(--accent);box-shadow:0 0 0 3.5px var(--am-ring)}
.am-b .inp::placeholder{color:var(--text3)}
.am-b .inp:-webkit-autofill{-webkit-box-shadow:0 0 0 40px var(--surface) inset;-webkit-text-fill-color:var(--text);caret-color:var(--text)}
:root[data-theme="light"] .am-b .inp:-webkit-autofill{-webkit-box-shadow:0 0 0 40px #fff inset}
.am-b .inp:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 40px var(--surface) inset,0 0 0 3.5px var(--am-ring)}
.am-b .pw .inp{padding-right:44px}
.am-b .pw button{position:absolute;z-index:3;right:6px;top:6px;width:30px;height:30px;border:0;background:none;color:var(--text3);border-radius:7px;display:grid;place-items:center;transition:color .15s,background .15s}
.am-b .pw button:hover,.am-b .pw button.on{color:var(--text);background:var(--hover)}
.am-caps{display:grid;grid-template-rows:0fr;opacity:0;margin:-6px 0 0;transition:grid-template-rows .25s cubic-bezier(.2,.8,.2,1),opacity .2s,margin .25s}
.am-caps>span{display:flex;align-items:center;gap:6px;min-height:0;overflow:hidden;font-size:12px;color:var(--warn)}
.am-caps.on{grid-template-rows:1fr;opacity:1;margin:-6px 0 12px}
.am-b .ftext{display:flex;align-items:center;gap:6px;min-height:0;margin:0;font-size:12.5px;color:var(--bad)}.am-b .ftext:not(:empty){margin:-2px 0 12px;animation:popin .25s ease}
.am-go{position:relative;overflow:hidden;width:100%;height:42px;margin-top:8px;gap:8px;font-size:14px;font-weight:550;border-radius:10px;border:0;transition:transform .15s,filter .15s}
.am-b .am-go,.am-b .am-go:hover{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 90%,#fff),var(--accent));color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 0 1px color-mix(in srgb,var(--accent) 80%,#000),0 1px 2px rgba(0,0,0,.25)}
:root[data-theme="light"] .am-b .am-go,:root[data-theme="light"] .am-b .am-go:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 0 1px color-mix(in srgb,var(--accent) 88%,#000),0 1px 2px rgba(16,16,28,.12),0 6px 14px -8px color-mix(in srgb,var(--accent) 70%,transparent)}
.am-go::before{content:"";position:absolute;top:50%;left:0;width:84px;height:12px;margin:-6px 0 0 -84px;pointer-events:none;opacity:0;
  background:radial-gradient(5px 5px at calc(100% - 6px) 50%,#fff 40%,transparent),linear-gradient(90deg,transparent,rgba(255,255,255,.55) 80%,transparent 96%) 0 50%/100% 1.5px no-repeat}
.am-go.go::before{animation:amTrail .72s cubic-bezier(.4,.1,.3,1)}
@keyframes amTrail{0%{opacity:0;translate:0 0}15%{opacity:1}85%{opacity:1}100%{opacity:0;translate:calc(400px + 84px) 0}}
.am-go:hover:not(:disabled){filter:brightness(1.06)}
.am-go .ic{transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.am-go:hover:not(:disabled) .ic{transform:translateX(3px)}
.am-go:active:not(:disabled){transform:scale(.985)}
.am-go.ok,.am-go.ok:disabled{opacity:1}.am-go.ok .ic{animation:popin .3s cubic-bezier(.2,.8,.2,1)}
.am-f{position:relative;z-index:1;display:flex;align-items:baseline;gap:6px;line-height:20px;margin-top:24px;padding:15px 32px 17px;font-size:13px;color:var(--text2);border-top:1px solid var(--line);background:var(--am-foot)}
.am-f .link{font-weight:500;line-height:inherit}
.am-f .am-n{margin-left:auto;font-size:12px;color:var(--text3)}
@media (max-width:480px){.am-h,.am-b,.am-f{padding-left:24px;padding-right:24px}}
@media (prefers-reduced-motion:reduce){.auth-m{transform:none}.auth-m,.am-mkw,.am-doo *,.am-wear,.am-t>*,.am-b>*,.am-f,.ams,.amd,.amp,.amp::after{animation:none!important}.am-doo .ss,.am-doo .fly,.am-doo .fl,.ams,.amd{display:none}}
.auth-inv{display:flex;align-items:center;gap:9px;margin:0 0 16px;padding:10px 12px;border-radius:10px;font-size:13px;line-height:1.5;background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 22%,transparent)}
.auth-inv .ic{color:var(--accent-text)}.auth-inv.bad{background:color-mix(in srgb,var(--bad) 8%,transparent);border-color:color-mix(in srgb,var(--bad) 26%,transparent)}.auth-inv.bad .ic{color:var(--bad)}
/* the festivals' scenes (festive.js): shared fills and motions; each scene picks from these */
.auth-m{--am-pink2:rgba(255,159,191,.2);--am-sky:rgba(140,190,255,.2);--am-brown:rgba(214,170,130,.24);--am-yellow:rgba(255,214,110,.22);--am-leaf:rgba(120,210,150,.22)}
:root[data-theme="light"] .auth-m{--am-pink2:#ffe1ec;--am-sky:#dfebff;--am-brown:#f2e3d3;--am-yellow:#fff1c9;--am-leaf:#ddf2e4;--am-pink:#ff8fb5}
.am-doo .c-or{fill:var(--am-orange)}.am-doo .c-or2{fill:var(--am-orange2)}.am-doo .c-red{fill:var(--am-red)}.am-doo .c-red2{fill:var(--am-red2)}.am-doo .c-gold{fill:var(--am-gold)}
.am-doo .c-mint{fill:var(--am-mint)}.am-doo .c-pink{fill:var(--am-pink)}.am-doo .c-pink2{fill:var(--am-pink2)}.am-doo .c-sky{fill:var(--am-sky)}.am-doo .c-snow{fill:var(--am-snow)}
.am-doo .c-brown{fill:var(--am-brown)}.am-doo .c-yellow{fill:var(--am-yellow)}.am-doo .c-leaf{fill:var(--am-leaf)}.am-doo .c-none{fill:none}
.am-wear .c-or{fill:var(--am-orange)}.am-wear .c-red{fill:var(--am-red)}.am-wear .c-red2{fill:var(--am-red2)}.am-wear .c-gold{fill:var(--am-gold)}.am-wear .c-pink{fill:var(--am-pink)}.am-wear .c-pink2{fill:var(--am-pink2)}
.am-wear .c-sky{fill:var(--am-sky)}.am-wear .c-leaf{fill:var(--am-leaf)}.am-wear .c-yellow{fill:var(--am-yellow)}.am-wear .c-snow{fill:var(--am-snow)}.am-wear .c-brown{fill:var(--am-brown)}.am-wear .c-mint{fill:var(--am-mint)}
.am-doo .st-pink{stroke:var(--am-pink)}.am-doo .st-red{stroke:var(--am-red)}.am-doo .st-gold{stroke:var(--am-gold)}.am-wear .st-red{stroke:var(--am-red)}.am-wear .st-gold{stroke:var(--am-gold)}
.am-doo text,.am-wear text{font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;font-weight:700}
.am-doo .fmono{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-weight:600}
/* motions: sway from a point (--o), rise and fall with a sideways drift, twinkle, firework bursts, things crossing,
   wings, a bounce, steam, a blinking cursor, drops */
.am-doo .fsw,.am-wear.fsw{transform-origin:var(--o,50% 0);animation:fSw var(--d,4.4s) ease-in-out var(--dl,0s) infinite alternate}
.am-doo .fsw{transform-box:fill-box}
@keyframes fSw{from{rotate:calc(var(--a,5deg)*-1)}to{rotate:var(--a,5deg)}}
.am-doo .fall{opacity:0;animation:fFall linear infinite}.am-doo .rise{opacity:0;animation:fRise linear infinite}
.am-doo .fall>*,.am-doo .rise>*{animation:fDrift ease-in-out infinite alternate}
@keyframes fFall{0%{opacity:0;transform:translateY(-8px)}10%{opacity:1}82%{opacity:1}100%{opacity:0;transform:translateY(142px)}}
@keyframes fRise{0%{opacity:0;transform:translateY(0)}15%{opacity:1}75%{opacity:.9}100%{opacity:0;transform:translateY(-120px)}}
@keyframes fDrift{from{transform:translateX(-4px) rotate(-12deg)}to{transform:translateX(4px) rotate(12deg)}}
.am-doo .tw{transform-box:fill-box;transform-origin:center;animation:fTw var(--d,3s) ease-in-out var(--dl,0s) infinite}
@keyframes fTw{0%,100%{opacity:.35;scale:.7}50%{opacity:1;scale:1}}
.am-doo .bst{transform-box:fill-box;transform-origin:center;opacity:0;animation:fBst var(--d,3.2s) cubic-bezier(.2,.7,.3,1) var(--dl,0s) infinite}
@keyframes fBst{0%{opacity:0;scale:.15}8%{opacity:1}45%{opacity:.9;scale:1}70%,100%{opacity:0;scale:1.08}}
.am-doo .cross{opacity:0;animation:fCross var(--d,14s) cubic-bezier(.45,.05,.55,.95) var(--dl,0s) infinite}
@keyframes fCross{0%{opacity:0;transform:translate(-30px,10px)}8%{opacity:1}50%{transform:translate(200px,-6px)}92%{opacity:1}100%{opacity:0;transform:translate(440px,8px)}}
.am-doo .flap{transform-box:fill-box;transform-origin:var(--o,50% 100%);animation:fFlap .34s ease-in-out infinite alternate}
@keyframes fFlap{to{scale:1 .4}}
.am-doo .flapx{transform-box:fill-box;transform-origin:var(--o,100% 50%);animation:fFlapX .5s ease-in-out infinite alternate}
@keyframes fFlapX{to{scale:.35 1}}
.am-doo .bnc{transform-box:fill-box;transform-origin:50% 100%;animation:fBnc 2.4s cubic-bezier(.3,1.6,.5,1) infinite}
@keyframes fBnc{0%,100%{scale:1 1}12%{scale:1 .55}30%{scale:1 1.08}45%{scale:1 1}}
.am-doo .stm{opacity:0;animation:fStm var(--d,2.6s) ease-out var(--dl,0s) infinite}
@keyframes fStm{0%{opacity:0;transform:translateY(3px)}30%{opacity:.7}100%{opacity:0;transform:translateY(-9px)}}
.am-doo .blk{animation:fBlk 1.1s steps(1) infinite}@keyframes fBlk{50%{opacity:0}}
.am-doo .drp{opacity:0;animation:fDrp var(--d,1.4s) ease-in var(--dl,0s) infinite}
@keyframes fDrp{0%{opacity:0;transform:translateY(0)}20%{opacity:.9}100%{opacity:0;transform:translateY(12px)}}
.am-doo .fspin{transform-box:fill-box;transform-origin:center;animation:fSpin var(--d,14s) linear infinite}@keyframes fSpin{to{rotate:360deg}}
.am-doo .beat,.am-wear .beat{transform-box:fill-box;transform-origin:center;animation:fBeat 1.6s ease-in-out infinite}
@keyframes fBeat{0%,40%,100%{scale:1}20%{scale:1.12}30%{scale:.98}}
.am-wear.bob{animation:fWb 3.6s ease-in-out infinite alternate}@keyframes fWb{from{translate:0 0}to{translate:0 -1.5px}}
@media (prefers-reduced-motion:reduce){.am-doo .fall,.am-doo .rise,.am-doo .cross,.am-doo .bst,.am-doo .stm,.am-doo .drp{display:none}.am-wear{animation:none!important}}

/* ================= the header: one for every page ================= */
.hd{position:sticky;top:0;z-index:40;border-bottom:1px solid transparent;transition:background .2s,border-color .2s}
.hd.solid{background:color-mix(in srgb,var(--bg) 84%,transparent);-webkit-backdrop-filter:saturate(1.5) blur(14px);backdrop-filter:saturate(1.5) blur(14px);border-bottom-color:var(--line)}
.hd-in{width:min(var(--w),calc(100% - 48px));margin:0 auto;height:60px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}
.brand{display:flex;align-items:center;gap:9px;font-weight:620;font-size:14.5px;letter-spacing:-.01em;white-space:nowrap;justify-self:start}
.links{display:flex;gap:2px}
.links a{height:34px;display:inline-flex;align-items:center;padding:0 14px;border-radius:9px;color:var(--text2);font-size:13.5px;font-weight:500;transition:color .15s,background .15s;white-space:nowrap}
.links a:hover{color:var(--text);background:var(--hover)}
.links a.on{color:var(--text);background:var(--press)}
.hd .right{justify-self:end;display:flex;align-items:center;gap:8px}
.burger{display:none}
.sheet{display:none}
.bal{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--line);font-size:12px;color:var(--text2);white-space:nowrap;transition:border-color .15s,background .15s}
.bal:hover{border-color:var(--line3);background:var(--hover)}
.bal>i{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none}
.bal.warn>i{background:var(--warn)}.bal.bad>i{background:var(--bad)}
.bal b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.bal:has(.cr-chip){padding-right:5px}
/* 限时额度 beside a balance (the same as the client's): a coin, the amount in the theme colour, a hairline edge lit from
   the top left, a faint halo. The coin is struck metal, 1em across: the rim lit from the top left with its edge showing
   below, the face sunk inside it (::before), the svg's beaded ring, raised star in eight facets and sparkle, the shine
   on top (::after: a soft spot and a glint). Every nine seconds the coin turns a little, the glint crosses it and the
   sparkle flares on its rim; then the chip's light runs over the amount */
.cr-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;min-width:0}
.cr-chip{position:relative;display:inline-flex;align-items:center;gap:6px;flex:none;height:26px;padding:0 10px 0 4px;border-radius:999px;overflow:hidden;isolation:isolate;background:var(--cr-fill);box-shadow:0 6px 18px -8px var(--cr-halo);font-size:14px;font-weight:700;letter-spacing:-.01em;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums}
.cr-chip:before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:linear-gradient(135deg,var(--cr-edge1),var(--cr-edge2) 55%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.cr-chip:after{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:0;width:60%;pointer-events:none;background:linear-gradient(100deg,transparent,var(--cr-sheen) 50%,transparent);transform:translateX(-120%);animation:cr-sheen 9s cubic-bezier(.45,0,.25,1) 1.2s infinite}
.cr-coin{position:relative;display:grid;place-items:center;flex:none;width:1em;height:1em;font-size:18px;border-radius:50%;
  background:linear-gradient(145deg,#f6f6ff 0%,#c0c3ff 20%,#8387f4 46%,#585cd6 74%,#3b3eaa 100%);
  box-shadow:0 .05em 0 #2b2d84,0 .1em .22em -.05em rgba(18,18,66,.5),inset 0 0 0 .022em rgba(24,24,92,.5),inset .03em .04em 0 rgba(255,255,255,.55);
  animation:cr-turn 9s cubic-bezier(.4,0,.2,1) 1.2s infinite}
.cr-coin:before{content:"";position:absolute;inset:.088em;border-radius:50%;
  background:radial-gradient(circle at 70% 76%,#a7aaff,rgba(167,170,255,0) 60%),linear-gradient(145deg,#5155cf,#7377ef 55%,#9a9dff);
  box-shadow:inset .028em .04em .05em rgba(16,16,72,.62),inset -.018em -.026em .02em rgba(255,255,255,.32)}
.cr-coin svg{position:relative;width:1em;height:1em;overflow:visible}
.cr-coin:after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse 56% 36% at 34% 21%,rgba(255,255,255,.5),rgba(255,255,255,0) 72%),linear-gradient(118deg,transparent 41%,rgba(255,255,255,.8) 50%,transparent 59%);
  background-size:100% 100%,320% 100%;background-repeat:no-repeat;background-position:0 0,105% 0;animation:cr-glint 9s cubic-bezier(.45,0,.3,1) 1.2s infinite}
.cr-coin .spk{transform-box:fill-box;transform-origin:center;transform:scale(0);animation:cr-spk 9s ease-out 1.2s infinite}
.cr-amt{background:linear-gradient(180deg,var(--cr-t1),var(--cr-t2));-webkit-background-clip:text;background-clip:text;color:transparent}
.cr-chip.s{height:21px;padding:0 8px 0 3px;gap:4px;font-size:12px}.cr-chip.s .cr-coin{font-size:15px}
@keyframes cr-sheen{0%,6%{transform:translateX(-120%)}20%,100%{transform:translateX(230%)}}
@keyframes cr-turn{0%,100%{transform:perspective(2.4em) rotateY(0)}5%{transform:perspective(2.4em) rotateY(-22deg)}10%{transform:perspective(2.4em) rotateY(9deg)}14%{transform:perspective(2.4em) rotateY(0)}}
@keyframes cr-glint{0%{background-position:0 0,105% 0}11%,100%{background-position:0 0,-5% 0}}
@keyframes cr-spk{0%,8%{transform:scale(0) rotate(-60deg)}11.5%{transform:scale(1) rotate(0)}17%,100%{transform:scale(0) rotate(30deg)}}
@media (prefers-reduced-motion:reduce){.cr-chip:after{display:none}.cr-coin,.cr-coin:after,.cr-coin .spk{animation:none}}
.me{position:relative}
.me>button{display:flex;align-items:center;gap:4px;height:36px;padding:0 4px 0 4px;border-radius:999px;border:0;background:none;color:var(--text3)}
.me>button:hover{background:var(--hover)}
.menu{position:absolute;right:0;top:calc(100% + 8px);min-width:232px;padding:6px;border-radius:12px;background:var(--surface);box-shadow:var(--pop);z-index:60;animation:popin .15s ease}
.menu .mh{display:flex;align-items:center;gap:10px;padding:8px 8px 10px;border-bottom:1px solid var(--line);margin-bottom:5px}
.menu .mh b{display:block;font-weight:600}.menu .mh small{color:var(--text3);font-size:12px;font-variant-numeric:tabular-nums}
.menu a,.menu button{display:flex;align-items:center;gap:9px;width:100%;height:32px;padding:0 9px;border-radius:7px;border:0;background:none;font-size:13px;color:var(--text2);text-align:left}
.menu a:hover,.menu button:hover{background:var(--hover);color:var(--text)}
.menu .sep{height:1px;background:var(--line);margin:5px 2px}
.notice{display:flex;align-items:center;justify-content:center;gap:8px;min-height:34px;padding:7px 18px;font-size:12.5px;background:var(--accent-soft);border-bottom:1px solid color-mix(in srgb,var(--accent) 22%,transparent)}
.notice .ic{color:var(--accent-text)}
.notice.imp{background:color-mix(in srgb,var(--warn) 10%,transparent);border-bottom-color:color-mix(in srgb,var(--warn) 25%,transparent)}
.notice.imp .ic{color:var(--warn)}.notice.imp b{font-weight:600;margin-right:8px}.notice.imp span{white-space:pre-wrap;max-width:820px}
/* the bell and its list of notices */
.nb{position:relative}
.nb>.iconbtn{position:relative}.nb>.iconbtn:hover{background:var(--hover);color:var(--text)}
.nb>.iconbtn em{position:absolute;top:0;right:-1px;min-width:15px;height:15px;padding:0 4px;border-radius:999px;background:var(--accent);color:#fff;font-family:inherit;font-size:10px;font-weight:600;line-height:15px;font-style:normal;font-variant-numeric:tabular-nums;text-align:center;box-shadow:0 0 0 2px var(--bg)}
.npanel{position:absolute;right:-60px;top:calc(100% + 8px);width:min(360px,calc(100vw - 32px));border-radius:12px;background:var(--surface);box-shadow:var(--pop);z-index:60;animation:popin .15s ease;overflow:hidden}
.np-h{display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 14px;border-bottom:1px solid var(--line)}
.np-h b{font-weight:600;font-size:13.5px}
.np-l{max-height:min(440px,70vh);overflow:auto;padding:4px 0}
.np-i{display:flex;gap:10px;padding:11px 14px;transition:background .15s linear}
.np-i+.np-i{border-top:1px solid var(--line)}
.np-i>i{flex:none;width:6px;height:6px;margin-top:7px;border-radius:50%;background:transparent}
.np-i.new>i{background:var(--accent)}.np-i.new{background:color-mix(in srgb,var(--accent) 5%,transparent)}
.np-i>div{min-width:0;flex:1}
.np-cv{flex:none;width:64px;height:44px;margin-top:2px;border-radius:7px;overflow:hidden;background:var(--sunk);border:1px solid var(--line)}
.np-cv img{display:block;width:100%;height:100%;object-fit:cover}
.np-t .nchip,.np-t .tag{flex:none}
.np-tt{display:block;margin:0 0 3px;font-weight:600;font-size:13px;line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.np-t{display:flex;align-items:center;gap:6px;margin-bottom:3px}.np-t b{font-weight:600;font-size:13px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.np-t small{margin-left:auto;flex:none;color:var(--text3);font-size:11.5px;font-variant-numeric:tabular-nums}
.np-t .tag{flex:none}
.np-i p{margin:0;font-size:12.5px;line-height:1.6;color:var(--text2);white-space:pre-wrap;word-break:break-word}
.np-e{display:flex;flex-direction:column;align-items:center;gap:8px;padding:34px 0;color:var(--text3);font-size:12.5px}
a.np-i{color:inherit;text-decoration:none}a.np-i:hover{background:var(--hover)}
.np-i p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.np-f{display:flex;align-items:center;justify-content:center;gap:6px;height:40px;border-top:1px solid var(--line);color:var(--accent-text);font-size:12.5px;font-weight:550;text-decoration:none;transition:background .15s linear}
.np-f:hover{background:var(--hover)}
/* 通知 (/notices): a changelog, each day on the left (staying in view beside a long notice), the notice on the right:
   its cover, its marks, the title and the body; a long body shows its start until it is opened */
.nl-pg .callout{max-width:920px}
.nl{list-style:none;margin:8px 0 0;padding:0;max-width:920px}
.nl-i{display:grid;grid-template-columns:120px minmax(0,1fr);gap:0 28px;padding:0 0 36px}
.nl-d{position:sticky;top:84px;align-self:start;padding-top:4px;text-align:right}
.nl-d b{display:block;font-size:13px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
.nl-d small{display:block;margin-top:3px;font-size:12px;color:var(--text3);font-variant-numeric:tabular-nums}
.nl-c{min-width:0;border-radius:16px;border:1px solid var(--line);background:var(--surface);overflow:hidden;transition:box-shadow .3s linear,border-color .3s linear}
.nl-i.pin .nl-c{border-color:color-mix(in srgb,var(--accent) 26%,var(--line))}
.nl-i.imp .nl-c{border-color:color-mix(in srgb,var(--warn) 38%,var(--line))}
.nl-i.hit .nl-c{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.nl-in{padding:18px 22px 20px}
.nl-h{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.nl-c h2{margin:0 0 10px;font-size:18px;font-weight:650;letter-spacing:-.015em;line-height:1.45;color:var(--text)}
.nl-b.clip{max-height:720px;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 120px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 120px),transparent)}
.nl-more{display:inline-flex;align-items:center;gap:4px;margin-top:10px;padding:4px 0;border:0;background:none;color:var(--accent-text);font-size:13px;font-weight:550;cursor:pointer}
.nl-more .ic{width:13px;height:13px}
.nl-more[hidden]{display:none}
.nl-b img,.ncv img{cursor:zoom-in}
/* a cover across the top of its notice, at its own shape (no taller than 4:3), on a quiet ground until it loads */
.ncv{background:var(--sunk);border-bottom:1px solid var(--line)}
.ncv img{display:block;width:100%;height:100%;object-fit:cover}
/* a notice's marks: 置顶 and its kind, each with its sign in a colour of its own */
.nchip{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 7px;border-radius:6px;font-size:11.5px;font-weight:550;border:1px solid var(--line2);color:var(--text2);white-space:nowrap}
.nchip .ic{width:11px;height:11px}
.nchip.pin .ic,.nchip.t-update .ic{color:var(--accent-text)}.nchip.t-maint .ic{color:var(--warn)}.nchip.t-event .ic,.nchip.t-invite .ic{color:var(--ok)}.nchip.t-price .ic{color:var(--c2)}
/* a notice's body (noticemd.js): paragraphs, headings, lists, quotes, a rule, pictures with their captions, code */
.nmd{font-size:14.5px;line-height:1.85;color:var(--text2);overflow-wrap:anywhere}
.nmd>:first-child{margin-top:0}.nmd>:last-child{margin-bottom:0}
.nmd p{margin:0 0 12px}
.nmd strong,.nmd b{color:var(--text);font-weight:600}
.nmd a{color:var(--accent-text);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--accent-text) 40%,transparent);text-underline-offset:2px}
.nmd .nmd-h{margin:22px 0 8px;font-size:15.5px;font-weight:650;line-height:1.5;color:var(--text);letter-spacing:-.01em}.nmd h2.nmd-h{margin-top:26px;font-size:17px}
.nmd .nmd-ul,.nmd .nmd-ol{margin:0 0 12px;padding-left:1.35em}.nmd li{margin:3px 0;padding-left:2px}.nmd li::marker{color:var(--text3)}
.nmd .nmd-q{margin:0 0 12px;padding:10px 14px;border-radius:10px;background:var(--sunk);color:var(--text2)}.nmd .nmd-q p{margin:0}
.nmd .nmd-hr{height:0;margin:20px 0;border:0;border-top:1px solid var(--line)}
.nmd .nmd-fig{margin:16px 0}
.nmd .nmd-fig img,.nmd img{display:block;max-width:100%;height:auto;border-radius:12px;border:1px solid var(--line);background:var(--sunk)}
.nmd .nmd-cap{margin-top:8px;font-size:12.5px;line-height:1.6;color:var(--text3);text-align:center}
.nmd .nmd-code{padding:1px 6px;border-radius:5px;border:1px solid var(--line);background:var(--sunk);font:12.5px/1.6 "SF Mono","JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;color:var(--text)}
.nl-e{display:flex;flex-direction:column;align-items:center;gap:8px;max-width:880px;padding:64px 0;color:var(--text3);font-size:13px;text-align:center}
.nl-e b{color:var(--text);font-size:15px;font-weight:600}
.notice.imp a{color:inherit;text-decoration:underline;text-underline-offset:2px}
@media (max-width:640px){.nl-i{grid-template-columns:minmax(0,1fr);padding-bottom:26px}.nl-d{position:static;text-align:left;display:flex;gap:8px;align-items:baseline;margin-bottom:8px}.nl-d small{margin:0}.nl-in{padding:16px 16px 18px}.nl-c h2{font-size:17px}}
.ava.pic{background:var(--sunk)}.ava.pic img{width:100%;height:100%;object-fit:cover;display:block}

/* ================= the footer ================= */
/* ---- the first screen's sky (stardust.js): under the hero and the star map, following the pointer ---- */
.pg1>canvas.dust{position:absolute;left:0;top:0;width:100%;height:calc(100% + 300px);display:block;pointer-events:none;z-index:0;
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 520px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 520px),transparent)}
.pg1>.sky{z-index:1}.pg1>.hero{z-index:2} /* the hero over the sky: the protocol menu opens onto it */
/* ---- under the footer: a jump through the stars (warp.js), the platform's name over it; night in both themes. The
   page is a curtain over it: the main part and the footer are opaque and above, the band is pinned to the bottom of
   the window below them, and a gap of its height after the footer lets it come out from under the page at the end:
   from nothing to all 350px of it, and there the page stops (the user, 10-25) ---- */
:root{--wh:350px}
/* with a trackpad or a mouse the window does not bounce at its ends: the page stops where the band is all out */
@media (hover:hover) and (pointer:fine){html{overscroll-behavior-y:none}}
#main{position:relative;z-index:1;background:var(--bg)}
.foot-r{height:var(--wh)}
/* 2px more than the gap, under the footer's edge: a page whose height ends in a fraction of a pixel leaves no hairline */
.warp{position:fixed;left:0;right:0;bottom:0;z-index:0;height:calc(var(--wh) + 2px);overflow:hidden;background:#05060a}
.warp canvas{position:absolute;inset:0;display:block}
.warp-b{position:absolute;left:0;right:0;bottom:0;height:var(--wh)}
.warp-core,.warp-hz{position:absolute;pointer-events:none;mix-blend-mode:screen}
.warp-core{left:var(--vx,50%);top:var(--vy,50%);width:min(620px,86%);height:250px;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(150,166,235,.16),rgba(120,136,214,.08) 45%,transparent)}
.warp-hz{left:0;right:0;top:var(--vy,50%);height:1px;background:linear-gradient(90deg,transparent,rgba(214,224,255,.42) 50%,transparent)}
.warp-in{position:relative;z-index:2;isolation:isolate;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:0 16px}
.warp-in:before{content:"";position:absolute;left:50%;top:calc(50% + 18px);width:min(600px,92%);height:230px;transform:translate(-50%,-50%);z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(5,6,10,.82),rgba(5,6,10,.5) 52%,rgba(5,6,10,0))}
.warp-lk{height:46px;width:auto;filter:drop-shadow(0 8px 34px rgba(165,182,255,.38))}
.warp-nm{display:flex;align-items:center;gap:12px;font-size:28px;font-weight:650;letter-spacing:-.02em;color:#f3f5f9;filter:drop-shadow(0 8px 30px rgba(165,182,255,.35))}
.warp-nm img{width:40px;height:40px}
/* the line under the name: quiet, wide-set, between two hairlines of light */
.warp-tag{display:flex;align-items:center;gap:14px;margin:0;font-size:14px;font-weight:450;letter-spacing:.07em;color:rgba(222,228,247,.76);text-shadow:0 2px 16px rgba(5,6,10,.95);text-align:center}
.warp-tag:before,.warp-tag:after{content:"";flex:none;width:34px;height:1px;background:linear-gradient(90deg,rgba(214,224,255,0),rgba(214,224,255,.45))}
.warp-tag:after{transform:scaleX(-1)}
@media (max-width:520px){.warp-tag{font-size:12.5px;letter-spacing:.04em;gap:10px}.warp-tag:before,.warp-tag:after{width:18px}}
#main.pub:not(.home),#main.con:has(+.foot:not([hidden])){padding-bottom:96px}
.foot-c{position:relative;z-index:1;border-top:1px solid var(--line);background:var(--bg2);box-shadow:0 22px 44px -26px rgba(0,0,0,.6)}
.foot[hidden]{display:none}
.foot-in{display:flex;justify-content:space-between;gap:48px;padding:44px 0 32px;flex-wrap:wrap}
.foot-brand p{margin:12px 0 0;max-width:340px;font-size:13px;color:var(--text2);line-height:1.75}
.foot-cols{display:grid;grid-template-columns:repeat(3,minmax(110px,auto));gap:56px}
.foot-cols h4{margin:0 0 12px;font-size:12.5px;font-weight:600;color:var(--text)}
.foot-cols a{display:block;font-size:13px;color:var(--text2);line-height:2.1;transition:color .15s}
.foot-cols a:hover{color:var(--text)}
.foot-b{display:flex;align-items:center;gap:16px;padding:16px 0 28px;border-top:1px solid var(--line);font-size:12px;color:var(--text3)}

/* ================= the public pages ================= */
.box{position:relative;width:min(var(--w),calc(100% - 48px));margin:0 auto}
.pub{position:relative;min-height:60vh}
.pub:before{content:"";position:absolute;left:0;right:0;top:-61px;height:560px;pointer-events:none;background:radial-gradient(760px 360px at 50% 0,color-mix(in srgb,var(--accent) 11%,transparent),transparent 72%)}
/* the home page's light: from the top, and a wide soft glow round the foot of the first screen that runs on under
   the second and fades there, so the two screens meet without an edge */
.pub.home:before{height:calc(100svh + 300px);background:radial-gradient(900px 420px at 50% 0,color-mix(in srgb,var(--accent) 12%,transparent),transparent 70%),radial-gradient(1200px 560px at 50% calc(100% - 300px),color-mix(in srgb,var(--accent) 6%,transparent),transparent 70%);
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 420px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 420px),transparent)}
/* the home page: four screens, each the window's height under the header; the last one with the footer under it */
html{scroll-padding-top:61px}
html.snap{scroll-snap-type:y proximity}
.pg{position:relative;scroll-snap-align:start}
.home .pg+.pg{border-top:1px solid var(--line)}
.home .pg1+.pg{border-top:0}
.home .pg:not(.pg1){min-height:calc(100svh - 61px);padding:clamp(32px,7.5vh,84px) 0 clamp(28px,5vh,56px)}
.home .pg4{min-height:calc(100svh - 61px - var(--fth,0px))!important}
.pg1{display:flex;flex-direction:column;min-height:calc(100svh - 61px - var(--nt,0px))}
/* screen 1: what it is, two ways in, the address, the sky */
.hero{position:relative;flex:none;text-align:center;padding:clamp(18px,6.4vh,76px) 0 0}
.pill{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px 0 11px;border-radius:999px;border:1px solid var(--line2);background:color-mix(in srgb,var(--surface) 80%,transparent);font-size:12.5px;color:var(--text2);transition:border-color .15s,color .15s;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.pill:hover{border-color:var(--line3);color:var(--text)}
.pill i{width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 18%,transparent)}
.pill .ic{color:var(--text3);transition:transform .15s}.pill:hover .ic{transform:translateX(2px)}
.hero h1{margin:clamp(12px,2.6vh,24px) 0 0;font-size:clamp(30px,min(4.6vw,6.3vh),58px);line-height:1.1;letter-spacing:-.04em;font-weight:700}
.hero h1 span[lang=en]{background:linear-gradient(180deg,var(--text2),var(--text3));-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:650}
/* the English line under the Chinese one: smaller, set a little wider, so it reads as a quiet second voice */
.hero h1 span[lang=en]{display:inline-block;margin-top:.22em;padding-bottom:.16em;margin-bottom:-.16em;font-size:.6em;letter-spacing:-.012em;font-weight:560;line-height:1.15}
.hero .lead{text-wrap:balance;margin:clamp(10px,2.2vh,20px) auto 0;max-width:600px;font-size:clamp(14px,1.9vh,15.5px);line-height:1.8;color:var(--text2)}
.ctas{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:clamp(16px,3.4vh,30px)}
.ctas .btn.pri .ic{transition:transform .15s}.ctas .btn.pri:hover .ic:last-child{transform:translateX(2px)}
/* the download button's corner: 推荐, in ink like the discount chips, a ring of the page between it and the button */
.btn.rec{position:relative;overflow:visible}
.rec-b{position:absolute;top:-9px;right:-10px;display:inline-flex;align-items:center;height:19px;padding:0 7px;border-radius:999px;overflow:hidden;font-size:10.5px;font-weight:650;letter-spacing:.06em;
  color:var(--bg);background:var(--text);box-shadow:0 0 0 2px var(--bg),0 6px 14px -6px rgba(0,0,0,.45);pointer-events:none;animation:recIn .55s cubic-bezier(.2,.9,.3,1.25) .45s both}
.rec-b::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,var(--rec-sheen) 50%,transparent 70%);transform:translateX(-130%);animation:recSheen 5.5s ease-in-out 1.4s infinite}
:root{--rec-sheen:rgba(113,118,236,.55)}:root[data-theme="light"]{--rec-sheen:rgba(255,255,255,.55)}
@keyframes recIn{from{opacity:0;transform:translateY(5px) scale(.75)}to{opacity:1;transform:none}}
@keyframes recSheen{0%,72%{transform:translateX(-130%)}100%{transform:translateX(130%)}}
@media (prefers-reduced-motion:reduce){.rec-b,.rec-b::after{animation:none}}
/* the address, under a choice of protocol: the menu opens below it */
.epw{position:relative;display:inline-block;max-width:100%;margin-top:clamp(10px,2.2vh,18px);text-align:left}
.ep{display:inline-flex;align-items:center;height:40px;border-radius:10px;border:1px solid var(--line2);background:color-mix(in srgb,var(--surface) 86%,transparent);max-width:100%;overflow:hidden;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ep-k{display:flex;align-items:center;gap:6px;height:100%;padding:0 10px 0 12px;border:0;border-right:1px solid var(--line);font:inherit;font-size:12px;color:var(--text2);background:var(--sunk);white-space:nowrap;cursor:pointer;transition:background .15s linear,color .15s linear}
.ep-k:hover,.epw.open .ep-k{color:var(--text);background:var(--hover)}
.ep-k .ic{color:var(--text3);transition:transform .2s ease}.epw.open .ep-k .ic{transform:rotate(180deg)}
.ep-v.epsw{animation:epSw .32s ease both}
@keyframes epSw{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.ep-m{position:absolute;left:0;top:calc(100% + 6px);z-index:20;width:max-content;min-width:250px;padding:5px;border-radius:12px;background:var(--surface);box-shadow:var(--pop);
  opacity:0;visibility:hidden;transform:translateY(-4px) scale(.985);transform-origin:top left;transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s}
.epw.open .ep-m{opacity:1;visibility:visible;transform:none;transition:opacity .16s ease,transform .16s ease}
.ep-m button{display:flex;align-items:center;gap:11px;width:100%;padding:8px 10px;border:0;border-radius:8px;background:none;color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:background .12s linear}
.ep-m button:hover{background:var(--hover)}
.ep-m button>span{flex:1;min-width:0}.ep-m b{display:block;font-size:13px;font-weight:600}.ep-m small{display:block;margin-top:1px;font-size:11.5px;color:var(--text3)}
.ep-m .aim{width:24px;height:24px;border-radius:6px}
.ep-m .ic{color:var(--accent-text);opacity:0;transition:opacity .12s linear}.ep-m [aria-selected=true] .ic{opacity:1}
.ep-v{padding:0 6px 0 13px;font-size:12.5px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ep .iconbtn{margin-right:5px}
.sky{position:relative;flex:1 1 auto;min-height:clamp(220px,36vh,600px);margin-top:clamp(0px,1vh,10px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(180deg,#000 82%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(180deg,#000 82%,transparent);mask-composite:intersect}
.sky canvas{position:absolute;inset:0;display:block;touch-action:pan-y}
.sky-none{position:absolute;left:0;right:0;bottom:22%;text-align:center;font-size:13px;color:var(--text3)}
/* screens 2–4: a head, then what the screen is about */
.home .sec-h{margin-bottom:clamp(16px,3vh,26px);align-items:flex-end}
.home .sec-h h2{font-size:clamp(22px,2.8vh,30px);letter-spacing:-.025em}
.home .sec-h p{font-size:14px;text-wrap:pretty}
.sec{padding-top:72px}
.sec-h{display:flex;align-items:flex-end;gap:16px 24px;margin-bottom:18px;flex-wrap:wrap}
.sec-h>div:first-child{flex:1 1 320px;min-width:0}
.sec-h h2{margin:0;font-size:24px;font-weight:650;letter-spacing:-.02em}
.sec-h p{margin:6px 0 0;font-size:13.5px;color:var(--text2)}
.sec-lk{color:var(--accent-text);font-weight:550;text-decoration:none;margin-left:2px}.sec-lk:hover{text-decoration:underline;text-underline-offset:2px}
.more-l{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 4px;font-size:13px;font-weight:500;color:var(--text2);transition:color .15s,gap .15s}
.more-l:hover{color:var(--text);gap:8px}
/* screen 2: the prices */
.pk{display:flex;border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden;flex:none;max-width:100%}
.pk>div{padding:9px 18px 10px;border-left:1px solid var(--line);min-width:0}
.pk>div:first-child{border-left:0}
.pk small{display:block;font-size:11.5px;color:var(--text3);white-space:nowrap}
.pk b{display:block;margin-top:1px;font-size:21px;font-weight:650;letter-spacing:-.02em;line-height:1.2;font-variant-numeric:tabular-nums;white-space:nowrap}
.pk b em{font-style:normal;font-size:12px;font-weight:500;letter-spacing:0;color:var(--text3);margin-left:3px}
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.search.sm{height:32px;min-width:200px;width:220px}
.pgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.pcard{position:relative;display:flex;flex-direction:column;container-type:inline-size;padding:16px 16px 0;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);transition:border-color .15s,box-shadow .2s,transform .2s;min-width:0;animation:popin .3s ease both}
.pcard:hover{border-color:var(--line3);box-shadow:var(--lift);transform:translateY(-1px)}
.pcard.gone,.pcard.cut{display:none}
/* 折扣走势: a card a model, scrolled inside the screen like the list */
.ptw{position:relative;overflow:auto;overscroll-behavior:contain;margin:0 -4px;padding:0 4px 4px;animation:popin .25s ease both;transition:opacity .2s linear}
.ptw.still{animation:none}.ptw.busy{opacity:.55;pointer-events:none}
.ptg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.ptc{display:flex;flex-direction:column;gap:14px;padding:16px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);min-width:0;container-type:inline-size;transition:border-color .15s linear}
.ptc:hover{border-color:var(--line3)}
.ptc.gone{display:none}.ptc.flash{animation:flash 1.8s ease}.ptc.sk-c{gap:14px}
/* the three prices, each with the official one struck under it */
.ptn{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ptn>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.ptn small{font-size:11px;line-height:1.3;color:var(--text3)}
.ptn b{font-size:13.5px;line-height:1.25;font-weight:620;font-variant-numeric:tabular-nums;white-space:nowrap}
.ptn s{display:block;min-height:13px;font-size:11px;line-height:1.2;color:var(--text3);font-variant-numeric:tabular-nums}
.pt-ch{position:relative;height:116px;touch-action:pan-y}
.pt-p{position:absolute;top:0;height:96px;cursor:crosshair;--pa:.15;--pb:.04}
:root[data-theme="light"] .pt-p{--pa:.2;--pb:.06}
.pt-p svg{position:absolute;left:0;top:0;overflow:visible}
.pt-y{position:absolute;left:0;transform:translateY(-50%);font-style:normal;font-size:10.5px;line-height:1;color:var(--text3);white-space:nowrap}
.pt-g{stroke:var(--line);stroke-width:1}.pt-g.base{stroke:var(--line2)}
.pt-sv{fill:var(--accent);opacity:.045}
.pt-av{fill:none;stroke:var(--text3);stroke-width:1;stroke-dasharray:2 3;opacity:.8}
.pt-l{fill:none;stroke:var(--pc);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.pt-sl{position:absolute;right:4px;font-style:normal;font-size:10.5px;line-height:1;font-weight:550;color:var(--accent-text);font-variant-numeric:tabular-nums;pointer-events:none}
.pt-now,.pt-dot{position:absolute;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--pc);box-shadow:0 0 0 2px var(--surface);pointer-events:none}
.pt-now::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--pc);animation:ping 2.6s 1s cubic-bezier(0,0,.2,1) infinite}
.pt-x{position:absolute;top:0;bottom:0;width:0;border-left:1px solid var(--line3);pointer-events:none}
.pt-x[hidden],.pt-dot[hidden]{display:none}
.pt-t{position:absolute;top:104px;transform:translateX(-50%);font-style:normal;font-size:10.5px;line-height:1;color:var(--text3);font-variant-numeric:tabular-nums;white-space:nowrap}
.pt-t.l{transform:none}.pt-t.r{transform:translateX(-100%)}.pt-t.d{color:var(--text2)}
/* the first time the cards show, their lines draw themselves one after another; after that they fade in */
.ptw.draw .pt-l{stroke-dasharray:1;stroke-dashoffset:1;animation:ptdraw .7s cubic-bezier(.35,.6,.3,1) forwards;animation-delay:calc(var(--i)*45ms)}
.ptw.draw .pt-a,.ptw.draw .pt-sv,.ptw.draw .pt-sl,.ptw.draw .pt-av{animation:fade .45s linear both;animation-delay:calc(var(--i)*45ms + .2s)}
.ptw.draw .pt-now{animation:fade .2s linear both;animation-delay:calc(var(--i)*45ms + .6s)}
.ptw.fade .pt-p{animation:fade .2s linear both}
@keyframes ptdraw{to{stroke-dashoffset:0}}
.pt-s{padding-top:11px;border-top:1px solid var(--line);font-size:12px;color:var(--text3);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-sc{margin-left:10px}.pt-s b{font-weight:600;color:var(--text2)}.pt-s b.dn{color:var(--accent-text)}
.seg.pth[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.ptw.draw .pt-l{animation:none;stroke-dasharray:none}.ptw .pt-a,.ptw .pt-sv,.ptw .pt-sl,.ptw .pt-av,.ptw .pt-now,.ptw.fade .pt-p{animation:none}.pt-now::after{animation:none;opacity:0}}
.pcard.sk-c{animation:none;padding-bottom:16px}
.pcard.flash{animation:flash 1.8s ease}
@keyframes flash{0%,55%{box-shadow:0 0 0 2px var(--accent),var(--lift);border-color:transparent}100%{box-shadow:0 0 0 0 transparent}}
.pc-h{display:flex;align-items:center;gap:11px;min-width:0}
.pc-h .aim.lg{width:34px;height:34px;border-radius:10px;background-size:62%}
.pc-n{flex:1;min-width:0}
.pc-n b{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:620;letter-spacing:-.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-n b .tag{height:18px;padding:0 5px;font-size:10.5px}
.pcard .pc-n b,.ptc .pc-n b{line-height:21px}
.pc-n small{display:block;margin-top:1px;font-size:12px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-cx{margin-left:10px}
.zk{display:inline-flex;align-items:center;height:22px;padding:0 7px;border-radius:6px;font:600 11.5px/1 "SF Mono","JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;color:var(--text2);border:1px solid var(--line2);background:var(--sunk);white-space:nowrap;flex:none;font-variant-numeric:tabular-nums}
.zk.on{background:var(--text);color:var(--bg);border-color:transparent}
/* input, cache input and output alike, three even columns */
.pc-p{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:15px;padding-top:13px;border-top:1px dashed var(--line2)}
.pp{min-width:0}
.pp small{display:block;font-size:11.5px;color:var(--text3);white-space:nowrap}.pp small em{font-style:normal;margin-left:4px;opacity:.75}
.pp s{display:block;margin-top:7px;font-size:12px;line-height:1.2;color:var(--text3);font-variant-numeric:tabular-nums}
.pp s.same{text-decoration:none;opacity:.8}
/* as big as the card lets an eight-figure price ($0.00099) be in a third of it, at most 22px */
.pp b{display:block;margin-top:3px;font-size:clamp(16px,calc(7.3cqi - 3.8px),22px);font-weight:650;letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums;white-space:nowrap}
.pc-f{display:flex;align-items:center;gap:8px;margin:15px -16px 0;padding:7px 12px 7px 10px;border-top:1px solid var(--line);border-radius:0 0 var(--r) var(--r);background:var(--sunk);font-size:12px;color:var(--text3);min-width:0}
.pc-id{display:inline-flex;align-items:center;gap:6px;min-width:0;height:24px;padding:0 6px;border:0;border-radius:6px;background:none;color:var(--text2);transition:background .15s,color .15s}
.pc-id .mono{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px}
.pc-id .ic{width:12px;height:12px;color:var(--text3);opacity:0;transition:opacity .15s}
.pc-id:hover{background:var(--hover);color:var(--text)}.pcard:hover .pc-id .ic,.pc-id:focus-visible .ic{opacity:1}
.pc-u{margin-left:auto;flex-shrink:0;white-space:nowrap}
.pmore{display:flex;justify-content:center;margin-top:18px}.pmore:empty{display:none}
.pall{display:inline-flex;align-items:center;gap:10px;height:42px;padding:0 16px 0 8px;border-radius:999px;border:1px solid var(--line2);background:var(--surface);font-size:13.5px;font-weight:550;color:var(--text);transition:border-color .15s,box-shadow .2s,gap .15s}
.pall:hover{border-color:var(--line3);box-shadow:var(--lift);gap:12px}
.pall>.ic{color:var(--text3);transition:transform .15s,color .15s}.pall:hover>.ic{color:var(--text);transform:translateX(2px)}
.stk{display:inline-flex;padding-left:6px}
.stk .aim{width:26px;height:26px;border-radius:50%;margin-left:-6px;background-size:58%;box-shadow:0 0 0 2px var(--surface),inset 0 0 0 1px var(--line)}
/* the view switch, and every model in a list that keeps to the screen */
.vw button{display:inline-flex;align-items:center;gap:5px}.vw .ic{width:14px;height:14px}
.plist{position:relative;overflow:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);animation:popin .25s ease both;overscroll-behavior:contain}
.ptl thead th{position:sticky;top:0;z-index:1;background:var(--surface);padding-top:11px;box-shadow:inset 0 -1px 0 var(--line);border-bottom:0}
.ptl td{padding-top:10px;padding-bottom:10px}
.ptl tbody tr.gone{display:none}
.ptl tbody tr.flash{animation:rflash 1.8s ease}
@keyframes rflash{0%,55%{background:var(--accent-soft)}100%{background:transparent}}
.lm{display:flex;align-items:center;gap:11px;min-width:0}
.lm>div{min-width:0}
.lm b{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;white-space:nowrap}.lm b .tag{height:18px;padding:0 5px;font-size:10.5px}
.lm .pc-id{height:20px;margin:1px 0 0 -6px;color:var(--text3)}.lm .pc-id .mono{font-size:11px}
.ptl tr:hover .pc-id .ic{opacity:1}
.ptl .zk{height:20px;padding:0 5px;font-size:11px}
/* the official prices plain; ours in a frame of the theme colour with a light running round it, each price with its
   discount beside it and the cache price under it (TeamoRouter's way, the user's choice) */
.ptl{position:relative}.ptl thead th{vertical-align:bottom}
/* the model column only as wide as its names, so the figures sit close to them */
.ptl th.pm{width:1%}
.ptl .th2{display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px;line-height:1.3;color:var(--text2);text-align:left}
.ptl .th2 small{font-size:11px;font-weight:500;color:var(--text3)}
.ptl .sorth{height:auto;align-items:flex-end}.ptl .sorth .ic{margin-bottom:2px}
.ptl thead th.bd{background:var(--bdh)}.ptl td.bd{background:var(--bdw)}
.ptl thead th.bd .th2{color:var(--text)}.ptl thead th.bd .th2 small{color:var(--accent-text)}
:root{--bdw:rgba(113,118,236,.075);--bdh:#212230;--pfr:rgba(113,118,236,.42);--pfr-hi:#c3c6ff;--sb0:#3a3c45}
:root[data-theme="light"]{--bdw:rgba(91,95,217,.05);--bdh:#f4f4fd;--pfr:rgba(91,95,217,.3);--pfr-hi:#5b5fd9;--sb0:#e1e1e7}
.plw{position:relative}
@property --pfa{syntax:"<angle>";initial-value:0deg;inherits:false}
.pfr{position:absolute;top:0;left:0;width:0;height:0;border-radius:10px;pointer-events:none;opacity:0;transition:opacity .5s ease;box-shadow:inset 0 0 0 1px var(--pfr)}
.pfr.on{opacity:1}
/* the light: a short bright stretch of the frame, going round it, two at a time on opposite sides */
.pfr::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;
  background:conic-gradient(from var(--pfa),transparent 0 30%,var(--pfr-hi) 42%,transparent 47% 80%,var(--pfr-hi) 92%,transparent 97%);
  -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);
  animation:pfrRun 7s linear infinite;opacity:.9}
/* and a soft glow of the same light outside the frame */
.pfr::after{content:"";position:absolute;inset:-6px;border-radius:15px;padding:6px;filter:blur(6px);opacity:.38;
  background:conic-gradient(from var(--pfa),transparent 0 30%,var(--pfr-hi) 42%,transparent 47% 80%,var(--pfr-hi) 92%,transparent 97%);
  -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);
  animation:pfrRun 7s linear infinite}
@keyframes pfrRun{to{--pfa:360deg}}
/* the rows come up one after another, and the discounts last */
.ptl tbody tr{animation:rowIn .42s cubic-bezier(.2,.7,.3,1) both;animation-delay:calc(var(--r,0)*28ms)}
@keyframes rowIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ptl .pr-b .zk{animation:zkIn .5s cubic-bezier(.2,.9,.3,1.3) both;animation-delay:calc(260ms + var(--r,0)*28ms)}
@keyframes zkIn{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.pfr::before,.pfr::after,.ptl tbody tr,.ptl .pr-b .zk{animation:none}}
.pr-o,.pr-b{display:inline-flex;flex-direction:column;white-space:nowrap;font-variant-numeric:tabular-nums}
.pr-o{color:var(--text2)}
.pr-b>span{display:inline-flex;align-items:center;gap:6px}.pr-b b{font-size:14.5px;font-weight:650}
.ptl td .pr-o small,.ptl td .pr-b small{margin-top:3px}
/* what a model takes in, as short words that wrap */
.mods{display:flex;flex-wrap:wrap;gap:4px;max-width:118px}
.mods i{display:inline-flex;align-items:center;height:19px;padding:0 6px;border:1px solid var(--line2);border-radius:6px;font-style:normal;font-size:11px;color:var(--text2);white-space:nowrap}
/* its last 24 hours: a bar an hour, the hour now last and breathing; the share that succeeded under them */
.st24{display:inline-flex;flex-direction:column;gap:5px}
.st24 .sb{display:flex;width:80px;height:18px}
.st24 .sb i{flex:1 1 0;display:flex;padding:0 1px}
.st24 .sb i::before{content:"";flex:1;border-radius:1.5px;background:var(--sb0);transform-origin:bottom;animation:sbIn .4s cubic-bezier(.2,.7,.3,1) both;animation-delay:calc(180ms + var(--i)*14ms)}
.st24 .sb i.l1::before{background:var(--ok)}.st24 .sb i.l2::before{background:var(--warn)}.st24 .sb i.l3::before{background:var(--bad)}
.st24 .sb i:last-child::before{animation:sbIn .4s cubic-bezier(.2,.7,.3,1) both,sbNow 2.4s ease-in-out 1s infinite;animation-delay:calc(180ms + 23*14ms),1s}
.st24 .sb i:hover::before{filter:brightness(1.25)}
@keyframes sbIn{from{transform:scaleY(.15);opacity:0}to{transform:none;opacity:1}}
@keyframes sbNow{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.st24 .sb i::before{animation:none!important}}
.st24 small{font-size:11px;color:var(--text3);font-variant-numeric:tabular-nums}
.ptl .rel{font-size:12.5px;color:var(--text2);font-variant-numeric:tabular-nums;white-space:nowrap}
/* three of our prices and three official ones, the cells a little closer; as the room runs out, what the model takes
   in goes first, then its release date, then the official columns (each official price then struck under ours, the
   three alike), then the last 24 hours */
.ptl th,.ptl td{padding-left:8px;padding-right:8px}
.ptl .lm-zk{display:none}
.ptl .pr-b s{display:none;margin-top:3px;font-size:11.5px;color:var(--text3)}
@media (max-width:1260px){.ptl .c-mod{display:none}}
@media (max-width:1160px){.ptl .c-rel{display:none}}
@media (max-width:1060px){.ptl .c-was{display:none}.ptl .pr-b s{display:block}}
@media (max-width:900px){.ptl .c-st{display:none}}
/* a phone: the name may wrap, without the maker's icon and the copy button, the discount once beside it, so our three
   prices fit */
@media (max-width:640px){.ptl .lm .aim,.ptl .lm .pc-id,.ptl .pr-b .zk,.ptl th.bd .th2 small{display:none}.ptl .lm b{white-space:normal;font-size:13px;flex-wrap:wrap}.ptl .lm-zk{display:inline-flex}.ptl th.pm{width:auto}
  .ptl th,.ptl td{padding-left:8px;padding-right:8px}.ptl th:first-child,.ptl td:first-child{padding-left:14px}.ptl .bd+.bd{padding-right:12px}
  .pr-b>span{gap:5px}.pr-b b{font-size:13.5px}.ptl .zk{height:18px;padding:0 4px;font-size:10.5px}}
.sorth{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0;border:0;background:none;color:var(--text3);font-size:12px;font-weight:500;white-space:nowrap;transition:color .15s}
.sorth:hover{color:var(--text2)}.sorth.on{color:var(--text)}
.sorth .ic{width:12px;height:12px;opacity:.55}.sorth.on .ic{opacity:1;color:var(--accent-text)}
.pempty{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:52px 16px;text-align:center;border:1px dashed var(--line2);border-radius:var(--r);color:var(--text3);font-size:13px;line-height:1.8}
.pempty b{color:var(--text2);font-weight:600;font-size:14px}
.pempty .lk{width:44px;height:44px;margin-bottom:12px;border-radius:12px;display:grid;place-items:center;border:1px solid var(--line2);background:var(--surface);color:var(--text3)}
.pempty.sm{padding:32px 16px}.pempty[hidden]{display:none}
/* screen 3: connect */
.ph h3 .rec{font-style:normal;display:inline-flex;align-items:center;height:18px;margin-left:8px;padding:0 6px;border-radius:5px;font-size:11px;font-weight:600;vertical-align:1px;color:var(--accent-text);background:var(--accent-soft)}
.khint{display:flex;align-items:center;gap:8px;margin:12px 0 0;font-size:12.5px;color:var(--text2)}
.khint .ic{color:var(--accent-text)}.khint.ok .ic{color:var(--ok)}
/* panels */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.panel{border-radius:var(--r);background:var(--surface);border:1px solid var(--line);padding:20px 22px 22px;min-width:0}
.ph{display:flex;gap:13px;margin-bottom:16px}
.pi{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;background:var(--sunk);border:1px solid var(--line);color:var(--accent-text)}
.ph h3{margin:5px 0 0;font-size:15px;font-weight:620}
.ph p{margin:5px 0 0;font-size:13px;color:var(--text2);line-height:1.75}
.dl{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:10px;border:1px solid var(--line);background:var(--bg2);margin-bottom:8px}
.dl:last-of-type{margin-bottom:0}
.dl .os{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);flex:none}
.dl .os svg{width:16px;height:16px}
.dl b{display:block;font-size:13.5px;font-weight:600}.dl small{display:block;font-size:12px;color:var(--text3)}
.steps{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:9px;counter-reset:s}
.steps li{display:flex;gap:10px;font-size:13px;color:var(--text2);line-height:1.6}
.steps li:before{counter-increment:s;content:counter(s);width:20px;height:20px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:11px;font-weight:650;color:var(--accent-text);background:var(--accent-soft);margin-top:1px}
.calc-t{margin:0 0 6px;font-size:12.5px;color:var(--text3)}
.calc{width:100%;border-collapse:collapse;font-size:13px}
.calc td{padding:9px 0;border-bottom:1px solid var(--line);color:var(--text2);vertical-align:top}
.calc td small{display:block;font-size:11.5px;color:var(--text3)}
.calc td.r{text-align:right;font-variant-numeric:tabular-nums;color:var(--text);white-space:nowrap;padding-left:12px}
.calc tfoot td{border-bottom:0;font-weight:600;color:var(--text);padding-top:11px}
/* a phone: the label stays on one line, the working goes above its amount */
@media (max-width:640px){.calc td:first-child{white-space:nowrap}.calc td.r .faint{display:block}}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{list-style:none;display:flex;align-items:center;gap:10px;padding:12px 0;font-size:13.5px;font-weight:550;cursor:pointer;transition:color .15s}
.faq summary:hover{color:var(--accent-text)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ic{margin-left:auto;color:var(--text3);transition:transform .2s}
.faq details[open] summary .ic{transform:rotate(180deg)}
.faq details p{margin:-2px 0 13px;font-size:13px;color:var(--text2);line-height:1.75}
.notes{margin:0;padding-left:18px;color:var(--text2);font-size:13px;line-height:1.9}
.sub-h{margin:18px 0 6px;font-size:13px;font-weight:600}
/* a page's head */
.pagehd{padding:48px 0 24px}
.pagehd.row{display:flex;align-items:flex-end;gap:24px;flex-wrap:wrap}
.pagehd.row>div:first-child{flex:1 1 420px;min-width:0}
.pagehd h1{margin:0;font-size:32px;font-weight:680;letter-spacing:-.03em}
.pagehd p{margin:10px 0 0;color:var(--text2);font-size:14px;line-height:1.75;max-width:700px}
.ph-r{display:flex;gap:8px;align-items:center;flex:none}
/* 接入方式 */
/* ---- 接入方式 (/docs): what to put where, then the two ways in as steps on a line, then what Codex may say ---- */
/* 接入方式: the page's own column beside one card of the facts (address, protocol, key), on the site's width */
.dc{width:min(var(--w),calc(100% - 48px));margin:0 auto}
.dc-hd{padding:52px 0 30px;max-width:880px}
.dc-hd h1{margin:0;font-size:34px;font-weight:680;letter-spacing:-.03em}
.dc-hd>p{margin:10px 0 0;color:var(--text2);font-size:14.5px;line-height:1.75}
.dc-lay{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:48px;align-items:start}
.dc-main{min-width:0}
.dc-side{position:sticky;top:84px;min-width:0}
.dc-info{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:4px 18px 6px}
.dc-info h2{margin:14px 0 2px;font-size:13px;font-weight:620;letter-spacing:.01em}
.dc-i{padding:13px 0;border-bottom:1px solid var(--line);min-width:0}
.dc-i small{display:block;font-size:11.5px;color:var(--text3);margin-bottom:7px}
.dc-iv{display:flex;align-items:center;gap:8px;min-height:24px;font-size:13.5px;font-weight:560;min-width:0}
.dc-iv .mono{flex:1;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.dc-ik{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:9px}
.dc-help{display:flex;align-items:center;gap:7px;padding:12px 0 10px;font-size:12.5px;color:var(--text2)}
.dc-help:hover{color:var(--text)}
.dc-a{display:inline-flex;align-items:center;gap:5px;padding:0;border:0;background:none;color:var(--accent-text);font-weight:560;font-size:13px}
.dc-a .ic{width:13px;height:13px;transition:transform .15s}.dc-a:hover .ic{transform:translateX(2px)}
.dc-m{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:28px}
.dc-m>p{margin:0;font-size:12.5px;color:var(--text3)}
.seg.big{padding:3px;border-radius:10px}
.seg.big button{height:32px;padding:0 14px;border-radius:7px;font-size:13px;display:inline-flex;align-items:center;gap:7px}
.seg.big button em{font-style:normal;height:17px;padding:0 5px;border-radius:5px;font-size:10.5px;font-weight:600;line-height:17px;color:var(--accent-text);background:var(--accent-soft)}
.dc-body.dc-swap{animation:popin .28s ease} /* a choice made on the page; the page itself comes in with reveal() */
.dc-steps{list-style:none;margin:0;padding:0}
.dc-steps>li{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr);gap:18px;padding-bottom:32px}
.dc-steps>li:before{content:"";position:absolute;left:16.5px;top:42px;bottom:8px;width:1px;background:linear-gradient(var(--line2),color-mix(in srgb,var(--line2) 30%,transparent))}
.dc-steps>li:last-child{padding-bottom:8px}.dc-steps>li:last-child:before{display:none}
.dc-n{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:13.5px;font-weight:650;color:var(--accent-text);background:var(--accent-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 35%,transparent)}
.dc-sb{min-width:0;padding-top:6px}
.dc-sb h3{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 8px;font-size:15px;font-weight:620}
.dc-sb h3 small{font-size:12px;font-weight:450;color:var(--text3)}
.dc-sb p{margin:0 0 12px;color:var(--text2);font-size:13.5px;line-height:1.8}
.dc-sb p:last-child{margin-bottom:0}
.dc-dl{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:0 14px;margin:4px 0 12px}
.dc-dl .dl{background:none;border:0;border-radius:0;margin:0;padding:12px 0;border-bottom:1px solid var(--line)}.dc-dl .dl:last-child{border-bottom:0}
.dc-first{display:grid;gap:8px}
.dc-first>div{display:flex;align-items:flex-start;gap:11px;padding:11px 13px;border-radius:11px;background:var(--sunk);border:1px solid var(--line)}
.dc-first .os{width:18px;height:18px;flex:none;color:var(--text2);margin-top:2px}.dc-first .os svg{width:18px;height:18px;display:block}
.dc-first p{margin:0;font-size:12.5px;line-height:1.75;color:var(--text2)}.dc-first b{color:var(--text);font-weight:600;margin-right:8px}
.dc-rel{margin:4px 0 0 52px;font-size:12.5px;color:var(--text2)}
.dc-rel summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;color:var(--text3);list-style:none}.dc-rel summary::-webkit-details-marker{display:none}
.dc-rel summary .ic{transition:transform .15s}.dc-rel[open] summary .ic{transform:rotate(180deg)}
.dc-rel .notes{margin:8px 0 0}
.callout+.dc-steps{margin-top:24px}
.dc-tip{display:flex;align-items:flex-start;gap:9px;margin:6px 0 0;padding:12px 14px;border-radius:11px;background:var(--sunk);border:1px solid var(--line);font-size:12.5px;color:var(--text2);line-height:1.7}
.dc-tip .ic{margin-top:3px;color:var(--accent-text)}
.dc-sec{padding-top:56px}
.dc-sec h2{margin:0;font-size:22px;font-weight:660;letter-spacing:-.02em}
.dc-sec>p{margin:8px 0 18px;font-size:13.5px;color:var(--text2)}
.dc-sec .faq{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:4px 20px}
@media (max-width:980px){.dc-lay{grid-template-columns:minmax(0,1fr);gap:24px}.dc-side{position:static;order:-1}}
@media (max-width:860px){.dc-hd{padding-top:36px}.dc-hd h1{font-size:28px}}
@media (max-width:640px){.dc{width:calc(100% - 32px)}.dc-steps>li{grid-template-columns:30px minmax(0,1fr);gap:14px}.dc-n{width:30px;height:30px}.dc-steps>li:before{left:14.5px;top:38px}.dc-rel{margin-left:44px}}
.qa{display:grid;grid-template-columns:1fr 1fr}
.qa>div{padding:16px 20px 17px;border-bottom:1px solid var(--line);min-width:0}
.qa>div:nth-child(odd){border-right:1px solid var(--line)}
.qa>div:nth-last-child(-n+2):nth-child(odd),.qa>div:last-child{border-bottom:0}
.qa b{font-size:13.5px;font-weight:600}
.qa p{margin:5px 0 0;font-size:13px;color:var(--text2);line-height:1.75}

/* ================= the console ================= */
.con{min-height:70vh}
/* the console in the same light as the public pages: a soft glow of the accent from the top, behind everything */
.con:before{content:"";position:absolute;left:0;right:0;top:-61px;height:560px;z-index:-1;pointer-events:none;background:radial-gradient(760px 360px at 50% 0,color-mix(in srgb,var(--accent) 11%,transparent),transparent 72%)}
.locked{max-width:760px;margin:0 auto;padding:88px 0 40px;text-align:center}
.locked .lk{width:54px;height:54px;margin:0 auto 20px;border-radius:15px;display:grid;place-items:center;border:1px solid var(--line2);background:var(--surface);color:var(--text2);box-shadow:var(--lift)}
.locked h1{margin:0;font-size:26px;font-weight:680;letter-spacing:-.025em}
.locked p{margin:10px 0 0;font-size:14px;color:var(--text2)}
.locked .ctas{margin-top:26px}
.lk-g{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:48px;text-align:left}
.lk-g>div{padding:16px 16px 15px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface)}
.lk-g .ic{color:var(--accent-text);margin-bottom:12px}
.lk-g b{display:block;font-size:13.5px;font-weight:600}.lk-g small{display:block;margin-top:2px;font-size:12px;color:var(--text3)}
/* the profile band and its tabs */
.prof{border-bottom:1px solid var(--line);background:linear-gradient(var(--bg2),var(--bg2)) bottom/100% 0 no-repeat}
.prof-in{display:flex;align-items:center;gap:16px;padding:30px 0 22px;flex-wrap:wrap}
.prof-in>.ava,.prof-in>.letter{box-shadow:0 0 0 3px var(--bg),0 0 0 4px var(--line2)}
.prof-t{min-width:0;flex:1 1 280px}
.prof-t h1{margin:0;font-size:22px;font-weight:650;letter-spacing:-.02em}
.prof-t p{margin:4px 0 0;display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;font-size:13px;color:var(--text2)}
.prof-b{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:16px;align-items:center;justify-items:end}
.prof-b small{grid-column:1;font-size:12px;color:var(--text3)}
.prof-b .cr-row{grid-column:1;justify-content:flex-end}
.prof-b b{font-size:26px;line-height:1.15;font-weight:650;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.prof-b b.warn{color:var(--warn)}.prof-b b.bad{color:var(--bad)}
.prof-b .btn{grid-column:2;grid-row:1/3}
.prof-b .prof-cr{grid-column:1;display:inline-flex;align-items:center;gap:5px;margin-top:4px;font-style:normal;font-size:12px;font-weight:500;color:var(--accent-text);font-variant-numeric:tabular-nums;white-space:nowrap}
.tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;margin-bottom:-1px}
.tabs::-webkit-scrollbar{display:none}
.tabs a{display:inline-flex;align-items:center;gap:7px;height:42px;padding:0 12px;border-bottom:2px solid transparent;color:var(--text2);font-size:13.5px;font-weight:500;white-space:nowrap;transition:color .15s,border-color .15s}
.tabs a .ic{opacity:.7}
.tabs a:hover{color:var(--text)}
.tabs a.on{color:var(--text);border-bottom-color:var(--accent)}
.tabs a.on .ic{opacity:1;color:var(--accent-text)}
.tabs a .tab-n{min-width:17px;height:17px;padding:0 5px;border-radius:999px;display:inline-grid;place-items:center;font-style:normal;font-size:10.5px;font-weight:650;line-height:1;background:var(--accent);color:var(--on-accent);font-variant-numeric:tabular-nums}
/* ---- 咨询: the user's conversation with the admin (wireChat in app.js) ---- */
.chu-p{display:flex;flex-direction:column;height:clamp(460px,calc(100svh - 300px),860px);overflow:hidden;transition:box-shadow .15s linear}
.chu-p.drop{box-shadow:0 0 0 2px var(--accent)}
.chu-h{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)}
.chu-hl{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--sunk);border:1px solid var(--line);flex:none}
.chu-h .t{display:flex;flex-direction:column;gap:2px;min-width:0}
.chu-h b{font-size:14.5px;font-weight:620}.chu-h small{font-size:12.5px;color:var(--text3)}
.chu-h .acc,.chu-p .acc{color:var(--accent-text)}
.chu-m{flex:1;overflow-y:auto;padding:14px 18px 10px;display:flex;flex-direction:column;gap:2px;scrollbar-width:thin;overscroll-behavior:contain}
.chu-more{text-align:center;font-size:12px;color:var(--text3);padding:4px 0 10px}
.chu-sep{display:flex;align-items:center;gap:10px;margin:14px 0 10px;font-size:11.5px;color:var(--text3)}
.chu-sep::before,.chu-sep::after{content:"";flex:1;height:1px;background:var(--line)}
.chu-sys{display:flex;justify-content:center;margin:10px 0}
.chu-sys span{font-size:11.5px;color:var(--text3);padding:3px 10px;border-radius:999px;background:var(--sunk);border:1px solid var(--line);text-align:center}
.chu-g{display:flex;align-items:flex-end;gap:8px;max-width:min(560px,82%)}
.chu-g.g0{margin-top:8px}
.chu-g.me{align-self:flex-end;justify-content:flex-end}
.chu-av{width:28px;height:28px;flex:none;display:grid;place-items:center}
.chu-b{min-width:0;display:flex;flex-direction:column;gap:4px}
.chu-g.me .chu-b{align-items:flex-end}
.chu-b .txt{padding:8px 12px;border-radius:14px;background:var(--bg2);border:1px solid var(--line);white-space:pre-wrap;word-break:break-word;line-height:1.6;font-size:14px}
.chu-b .txt a{color:var(--accent-text);text-decoration:underline;text-underline-offset:2px}
.chu-g:not(.g0) .txt{border-top-left-radius:5px}.chu-g:not(.g1) .txt{border-bottom-left-radius:5px}
.chu-g.me .txt{background:var(--accent);border-color:transparent;color:var(--on-accent);border-top-left-radius:14px;border-bottom-left-radius:14px}
.chu-g.me .txt a{color:inherit}
.chu-g.me:not(.g0) .txt{border-top-right-radius:5px}.chu-g.me:not(.g1) .txt{border-bottom-right-radius:5px}
.chu-b.pend{opacity:.6}
.chu-imgs{display:flex;flex-wrap:wrap;gap:6px}
.chu-g.me .chu-imgs{justify-content:flex-end}
.chu-imgs img{display:block;height:150px;width:auto;max-width:min(260px,100%);object-fit:cover;border-radius:12px;border:1px solid var(--line2);cursor:zoom-in;background:var(--sunk)}
.chu-meta{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 2px 36px;font-size:11.5px;color:var(--text3);font-variant-numeric:tabular-nums}
.chu-meta.me{justify-content:flex-end;margin-left:0}
.chu-meta .rd{color:var(--accent-text)}.chu-meta .bad{color:var(--bad)}
.chu-meta .link{font-size:11.5px}
.chu-typing .dots{display:inline-flex;gap:4px;padding:11px 12px;border-radius:14px;background:var(--bg2);border:1px solid var(--line)}
.chu-typing .dots i{width:5px;height:5px;border-radius:50%;background:var(--text3);animation:chudot 1.2s linear infinite}
.chu-typing .dots i:nth-child(2){animation-delay:.2s}.chu-typing .dots i:nth-child(3){animation-delay:.4s}
@keyframes chudot{0%,60%,100%{opacity:.35}30%{opacity:1}}
.chu-f{margin:0 14px 14px;border:1px solid var(--line2);border-radius:12px;background:var(--bg2);transition:border-color .15s linear,box-shadow .15s linear}
.chu-f:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.chu-th{display:flex;flex-wrap:wrap;gap:8px;padding:0 10px}.chu-th:not(:empty){padding-top:10px}
.chu-t{position:relative;width:64px;height:64px;border-radius:9px;overflow:hidden;border:1px solid var(--line2)}
.chu-t img{width:100%;height:100%;object-fit:cover;display:block}
.chu-t button{position:absolute;right:3px;top:3px;width:20px;height:20px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff;display:grid;place-items:center}
.chu-f textarea{display:block;width:100%;min-height:42px;max-height:180px;border:0;background:none;outline:0;resize:none;padding:10px 12px 2px;line-height:1.6;font:inherit;font-size:14px;color:var(--text)}
.chu-f textarea:disabled{cursor:not-allowed}
.chu-bar{display:flex;align-items:center;gap:6px;padding:6px 8px}
.chu-ib{width:32px;height:32px;border-radius:8px;border:0;background:none;color:var(--text2);display:grid;place-items:center;transition:background .15s linear,color .15s linear}
.chu-ib:hover{background:var(--hover);color:var(--text)}
.chu-hint{font-size:11.5px;color:var(--text3);white-space:nowrap}
.chu-zoom{position:fixed;inset:0;z-index:95;background:rgba(0,0,0,.8);display:grid;place-items:center;padding:24px;cursor:zoom-out}
.chu-zoom img{max-width:100%;max-height:100%;border-radius:10px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
@media (max-width:640px){.chu-p{height:calc(100svh - 230px);min-height:420px}.chu-hint{display:none}.chu-g{max-width:88%}.chu-m{padding:12px 12px 8px}.chu-f{margin:0 10px 10px}}
.wrap{padding:24px 0 72px}
.phd{display:flex;align-items:flex-end;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.phd>div:first-child{flex:1 1 360px;min-width:0}
.phd h2{margin:0;font-size:18px;font-weight:650;letter-spacing:-.015em}
.phd p{margin:4px 0 0;font-size:13px;color:var(--text2)}
.phd h2+p{margin-top:4px}.phd>div:first-child>p:first-child{margin:0 0 2px}
.phd .acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);margin-bottom:14px;min-width:0}
.card-h{display:flex;align-items:center;gap:10px;padding:14px 18px 0;min-height:34px;flex-wrap:wrap}
.card-h h2{margin:0;font-size:13.5px;font-weight:600}
.card-h small{color:var(--text3);font-size:12px}
.card-b{padding:14px 18px 18px}
.card-b.flush{padding:8px 0 4px}
a.card.go{display:flex;align-items:center;gap:14px;padding:16px 18px;transition:border-color .15s,box-shadow .2s}
a.card.go:hover{border-color:var(--line3);box-shadow:var(--lift)}
a.card.go>div{flex:1;min-width:0}
a.card.go b{display:block;font-size:14px;font-weight:600}a.card.go small{display:block;margin-top:2px;font-size:12.5px;color:var(--text3)}
a.card.go>.ic{color:var(--text3);transition:transform .15s,color .15s}
a.card.go:hover>.ic{color:var(--text);transform:translateX(2px)}
.grid{display:grid;gap:14px;margin-bottom:14px}.grid>.card{margin-bottom:0}
.g2{grid-template-columns:1fr 1fr}.g21{grid-template-columns:1.5fr 1fr}.g12{grid-template-columns:1fr 1.5fr}
.empty{padding:32px 16px;text-align:center;color:var(--text3);font-size:12.5px;line-height:1.8}
.empty b{display:block;color:var(--text2);font-weight:600;font-size:13.5px;margin-bottom:2px}
.empty span{display:block}
.empty-a{display:flex;justify-content:center;gap:8px;margin-top:12px}
.callout{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;font-size:12.5px;line-height:1.6;margin-bottom:14px}
.callout>.ic{flex:none}
.callout>span{flex:1;min-width:0}
.callout .btn{flex:none}
.callout.warn{background:color-mix(in srgb,var(--warn) 9%,transparent);border:1px solid color-mix(in srgb,var(--warn) 28%,transparent)}.callout.warn>.ic{color:var(--warn)}
.callout.bad{background:color-mix(in srgb,var(--bad) 9%,transparent);border:1px solid color-mix(in srgb,var(--bad) 28%,transparent)}.callout.bad>.ic{color:var(--bad)}
.callout.ok{background:color-mix(in srgb,var(--ok) 8%,transparent);border:1px solid color-mix(in srgb,var(--ok) 26%,transparent)}.callout.ok>.ic{color:var(--ok)}
.callout.info{background:var(--sunk);border:1px solid var(--line);color:var(--text2)}.callout.info>.ic{color:var(--accent-text)}
/* the status line: where the account stands, and the one thing to do next */
.sbar{display:flex;align-items:center;gap:12px;padding:11px 14px 11px 16px;margin-bottom:14px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);flex-wrap:wrap}
.sbar .d{position:relative;width:9px;height:9px;border-radius:50%;background:var(--text3);flex:none}
.sbar.ok .d{background:var(--ok)}.sbar.warn .d{background:var(--warn)}.sbar.bad .d{background:var(--bad)}.sbar.pri .d{background:var(--accent)}
.sbar.ok .d:after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--ok);animation:ping 2.6s ease-out infinite}
.sbar b{font-weight:600}.sbar .grow{min-width:200px;color:var(--text2);font-size:12.5px}
.sbar .grow b{color:var(--text);margin-right:8px;font-size:13.5px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:var(--r);background:var(--surface);margin-bottom:14px}
.kpis>div{padding:14px 18px 15px;border-left:1px solid var(--line);min-width:0}.kpis>div:first-child{border-left:0}
.kpis small{display:block;font-size:12px;color:var(--text3)}
.kpis b{display:block;font-size:22px;font-weight:620;letter-spacing:-.02em;margin-top:3px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpis b.warn{color:var(--warn)}.kpis b.bad{color:var(--bad)}
.kpis b.kpi-t{font-size:14px;margin-top:8px;letter-spacing:0}
.kpis em{display:block;font-style:normal;font-size:12px;color:var(--text3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpis.k5{grid-template-columns:repeat(5,1fr)}
/* the star map: the user in the middle, the models they use going round, sized by what they cost */
.smap{position:relative;height:286px;margin:4px 0 0;overflow:hidden;border-radius:0 0 var(--r) var(--r)}
.smap canvas{position:absolute;inset:0;display:block}
.smap .none{position:absolute;left:0;right:0;bottom:18px;text-align:center;font-size:12.5px;color:var(--text3)}
/* the map's corner: live, and how many of the user's requests run now */
.lvn{position:absolute;left:14px;top:12px;z-index:1;display:inline-flex;align-items:center;gap:7px;height:24px;padding:0 10px 0 9px;border:1px solid var(--line);border-radius:999px;
  background:color-mix(in srgb,var(--surface) 80%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-size:11.5px;color:var(--text3);font-variant-numeric:tabular-nums;pointer-events:none;transition:color .2s linear}
.lvn i{position:relative;width:6px;height:6px;border-radius:50%;background:var(--text3);transition:background .2s linear}
.lvn.ok{color:var(--text2)}.lvn.ok i{background:var(--accent)}.lvn.on{color:var(--text)}
.lvn.on i::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--accent);animation:lvnPing 1.6s ease-out infinite}
@keyframes lvnPing{from{opacity:.9;transform:scale(.4)}to{opacity:0;transform:scale(1.5)}}
@media (prefers-reduced-motion:reduce){.lvn.on i::after{animation:none;opacity:.6}}
/* charts */
/* costChart: the ticks outside on the left (the widest one, hidden, sets their width), solid hairlines, the baseline a
   step stronger; a day's column by maker, under the pointer opened into its models while the other days fade */
.chart{position:relative;user-select:none;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;padding-top:6px}
.cc-y{position:relative;font-size:10.5px;line-height:1;color:var(--text3);font-variant-numeric:tabular-nums;text-align:right;pointer-events:none}
.cc-y b{display:block;height:0;overflow:hidden;visibility:hidden;font-weight:400}
.cc-y span{position:absolute;right:0;transform:translateY(50%);white-space:nowrap}
.cc-p{position:relative}
.cc-g{position:absolute;left:0;right:0;height:0;border-top:1px solid var(--line)}
.cc-g.base{bottom:0;border-top-color:var(--line2)}
.cc-ds{position:absolute;inset:0;display:flex}
.cc-d{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;border-radius:3px;transition:background-color .16s linear}
.cc-d.cur{background:var(--hover)}
.cc-c{width:clamp(3px,62%,22px);display:flex;flex-direction:column-reverse;gap:2px;transition:opacity .16s linear}
.chart.on .cc-d:not(.cur) .cc-c{opacity:.45}
.cc-c.z{height:2px;border-radius:1px;background:var(--line2)}
.cc-m{flex-basis:0;min-height:2px;display:flex;flex-direction:column-reverse;transition:gap .16s linear}
.cc-c>.cc-m:last-child{border-radius:var(--rg) var(--rg) 0 0;overflow:hidden}
.cc-d.cur .cc-m{gap:1px}
.cc-d.cur .cc-c>.cc-m:last-child{border-radius:var(--rm) var(--rm) 0 0}
.cc-m i{flex-basis:0;min-height:0;background:var(--mk);transition:background-color .16s linear}
.cc-d.cur .cc-m i{background:var(--md);min-height:1px}
.tt .r.sub{padding-left:13px;font-size:11.5px;line-height:1.65}.tt .r.sub .mono{font-size:11px}
.tt .r b em{font-style:normal;font-weight:400;color:var(--text3);margin-left:6px;font-variant-numeric:tabular-nums}
.tt .r.sub .tt-n .aim{width:14px;height:14px;border-radius:4px}
.tt .r.sub2{display:block;padding-left:34px;margin-top:-3px;font-size:11px;line-height:1.5;color:var(--text3)}
.tt .r.mk+.r.sub{margin-top:-1px}
.chart .xl{grid-column:2;display:flex;justify-content:space-between;margin-top:7px;font-size:11px;color:var(--text3);font-variant-numeric:tabular-nums}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--text2)}
.legend span{display:inline-flex;align-items:center;gap:6px}.legend i{width:8px;height:8px;border-radius:2px}
.share{display:grid;gap:12px}
/* 用量's 按模型: as tall as the chart beside it, every model in it, scrolled inside (one column on narrow screens) */
.card.mshare{display:flex;flex-direction:column}
.mshare>.card-b{flex:1;position:relative;min-height:220px;padding:0}
.mshare-in{position:absolute;inset:0;overflow:auto;overscroll-behavior:contain;padding:14px 18px 18px;
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 18px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 18px),transparent)}
@media (max-width:1000px){.mshare>.card-b{position:static;min-height:0}.mshare-in{position:static;max-height:420px}}
/* 钱包 */
.wal{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr)}
.wal-b{padding:20px 22px 22px;border-right:1px solid var(--line);background:radial-gradient(90% 140% at 0% 0%,color-mix(in srgb,var(--accent) 8%,transparent),transparent 70%)}
.wal-b>small{font-size:12px;color:var(--text3)}
.wal-b>.cr-row{margin-top:4px}
.wal-b .cr-row>b{font-size:34px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.15}
/* a balance in the wallet's colour (walBalTone): the console's wallet card, the team's and a member's */
.cr-row>b.warn{color:var(--warn)}.cr-row>b.bad{color:var(--bad)}
.wal-b>p{margin:8px 0 0;font-size:12.5px;color:var(--text2)}.wal-b>p b{color:var(--text);font-weight:650}
.wal-cr{display:flex;align-items:center;gap:6px;margin-top:6px;font-style:normal;color:var(--accent-text);font-size:12.5px;font-weight:500;font-variant-numeric:tabular-nums}
.tbl tr.wal-off td{color:var(--text3)}
.wal-a{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:18px}
.wal-c{display:inline-flex;align-items:center;gap:6px;min-width:0;font-size:12.5px;color:var(--text2)}.wal-c>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:260px}
.wal-c>.ic{color:var(--text3);flex:none}
.wal-k{display:grid;grid-template-columns:1fr 1fr}
.wal-k>div{padding:18px 20px;min-width:0}
.wal-k>div:nth-child(odd){border-right:1px solid var(--line)}.wal-k>div:nth-child(-n+2){border-bottom:1px solid var(--line)}
.wal-k small{display:block;font-size:12px;color:var(--text3)}
.wal-k b{display:flex;align-items:baseline;gap:8px;margin-top:6px;font-size:20px;font-weight:650;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.wal-k b .was{font-size:12px;font-weight:500}
.wal-k em{display:block;margin-top:4px;font-style:normal;font-size:12px;color:var(--text3)}
.wal-t .wal-d{white-space:nowrap}.wal-t .wal-d small{display:inline;margin-left:8px;font-size:11.5px;color:var(--text3)}
.wal-ms{display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap;font-size:12px}
.wal-ms>span{display:inline-flex;align-items:center;gap:6px;min-width:0}
.wal-ms i{width:7px;height:7px;border-radius:50%;flex:none}.wal-ms em{font-style:normal;color:var(--text3)}
.wal-sv{color:var(--ok)}
.wal-t td.wal-mc{cursor:default}.wal-t td.wal-mc .wal-ms{transition:color .15s linear}.wal-t td.wal-mc:hover .wal-ms{color:var(--text)}
@media (max-width:760px){.wal{grid-template-columns:1fr}.wal-b{border-right:0;border-bottom:1px solid var(--line)}}
.share .r{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center}
.share .r .n{display:flex;align-items:center;gap:8px;min-width:0;font-size:12.5px}
.share .r .n span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.share .r b{font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.share .r .bar{grid-column:1/-1;height:4px;border-radius:2px;background:var(--sunk);overflow:hidden}
.share .r .bar i{display:block;height:100%;border-radius:2px}
.share .r small{grid-column:1/-1;font-size:11.5px;color:var(--text3);margin-top:-2px}
/* tables */
.scroll{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;font-weight:500;font-size:12px;color:var(--text3);padding:4px 12px 9px;white-space:nowrap;border-bottom:1px solid var(--line)}
.tbl td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr{transition:background .12s}
.tbl tbody tr:hover{background:var(--sunk)}
.tbl tr.rq{cursor:pointer}
.tbl .r{text-align:right}
.tbl td small{display:block;color:var(--text3);font-size:11.5px;margin-top:1px}
.tbl th:first-child,.tbl td:first-child{padding-left:18px}.tbl th:last-child,.tbl td:last-child{padding-right:18px}
.tbl .amt{font-variant-numeric:tabular-nums;font-weight:600}
.tbl .amt.up{color:var(--ok)}.tbl .amt.down{color:var(--bad)}
.tbl .spd{font-variant-numeric:tabular-nums;color:var(--text2);white-space:nowrap}
.tbl tr.rq .ts{display:none}
/* a phone: the requests keep every money column; the model in a narrow column, a long name wrapping (never cut), the
   effort left out, the cells closer, a success its green dot (the other states keep their word) */
@media (max-width:520px){.tbl tr.rq td,.tbl thead th{padding-left:6px;padding-right:6px}.tbl tr.rq td:first-child,.tbl thead th:first-child{padding-left:14px}.tbl tr.rq td:last-child,.tbl thead th:last-child{padding-right:14px}
  .tbl tr.rq .mono{display:inline-block;max-width:112px;white-space:normal;overflow-wrap:anywhere;line-height:1.35;vertical-align:middle}.tbl tr.rq .eff{display:none}.tbl tr.rq td{font-size:12px}.tbl tr.rq .tl{display:none}.tbl tr.rq .ts{display:inline}.tbl tr.rq .stt.ok{display:none}}
.mdl{display:flex;align-items:center;gap:11px;min-width:0}
.pc{font-variant-numeric:tabular-nums;white-space:nowrap}
.pc s{color:var(--text3);font-size:11.5px;margin-right:6px}
.why-t{display:inline-block;font-style:normal;font-size:11px;font-weight:500;line-height:18px;padding:0 6px;border-radius:5px;white-space:nowrap;vertical-align:1px;color:var(--warn);background:color-mix(in srgb,var(--warn) 13%,transparent)}
.toks{display:inline-flex;gap:10px;font-variant-numeric:tabular-nums;font-size:12px;color:var(--text2)}
.toks span{display:inline-flex;align-items:center;gap:5px}.toks i{width:6px;height:6px;border-radius:2px}
.more{display:flex;justify-content:center;padding:12px 0 8px}
.cp{border:0;background:none;color:var(--text3);width:22px;height:22px;display:inline-grid;place-items:center;border-radius:6px;vertical-align:middle;opacity:0;transition:opacity .15s}
.tbl tr:hover .cp,.cp:focus-visible{opacity:1}.cp:hover{color:var(--text);background:var(--hover)}.cp .ic{width:12px;height:12px}
/* the key, the set-up */
.keybox{display:flex;align-items:center;gap:10px;min-height:44px;padding:5px 5px 5px 14px;border-radius:10px;border:1px solid var(--line2);background:var(--bg2);flex:1;min-width:0}
.keybox .mono{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px}
.keybox.fresh{border-color:color-mix(in srgb,var(--ok) 50%,transparent)}
.keyrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.keymeta{display:flex;gap:14px;margin-top:10px;font-size:12px;color:var(--text3);flex-wrap:wrap;align-items:center}
.code{border-radius:10px;border:1px solid var(--line);background:#101115;overflow:hidden;color:#d6d7de}
:root[data-theme="light"] .code{background:#16171c;border-color:transparent}
.code-h{display:flex;align-items:center;gap:10px;height:40px;padding:0 6px 0 8px;border-bottom:1px solid rgba(255,255,255,.06);font-size:12px;color:#8a8d97}
.code-h>.ic{margin-left:4px}
.code-p{font-size:11.5px;color:#6d717b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.code-h .btn{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.09);color:#e3e4e8}.code-h .btn:hover{background:rgba(255,255,255,.09)}
.code-h .seg{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.07)}
.code-h .seg button{color:#8a8d97;height:24px;padding:0 9px}.code-h .seg button:hover{color:#e3e4e8}.code-h .seg button.on,:root[data-theme="light"] .code-h .seg button.on{background:rgba(255,255,255,.1);color:#fff}
.code pre{margin:0;padding:13px 16px 15px;font:12px/1.8 "SF Mono","JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;overflow-x:auto;white-space:pre}
.code .k{color:#a4a8ff}.code .s{color:#8fd1b0}.code .c{color:#6d717b}.code .n{color:#e9b872}
.inl{display:inline-flex;align-items:center;gap:3px;padding:0 3px 0 6px;border-radius:6px;background:var(--sunk);border:1px solid var(--line);vertical-align:1px;max-width:100%;line-height:20px}
.inl .mono{font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inl button{border:0;background:none;color:var(--text3);width:18px;height:18px;display:grid;place-items:center;border-radius:5px;flex:none}.inl button:hover{color:var(--text);background:var(--hover)}
.inl button .ic{width:11px;height:11px}
.flow{display:grid;gap:22px;counter-reset:f}
.flow>div{display:grid;grid-template-columns:26px 1fr;gap:13px;min-width:0}
.flow>div>div{min-width:0}
.flow>div:before{counter-increment:f;content:counter(f);width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:600;color:var(--accent-text);background:var(--accent-soft)}
.flow h3{margin:2px 0 4px;font-size:13.5px;font-weight:600}
.flow p{margin:0 0 10px;color:var(--text2);font-size:13px;line-height:1.75}
.flow p:last-child{margin-bottom:0}
.callout+.flow{margin-top:20px}
.opts{display:flex;gap:12px;flex-wrap:wrap;margin:2px 0 4px}
.opts label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--text3)}
.opts select{min-width:210px}
/* 邀请: the link and its QR code, the terms in a tile each over what they came to, the friends and every 返利 */
.iv-link{display:flex;align-items:center;gap:22px}
.iv-lm{flex:1;min-width:0}
.keymeta .link.bad{color:var(--bad)}
.iv-full{margin:10px 0 0;font-size:12px;color:var(--warn)}
.iv-qr{margin:0;flex:none;display:flex;flex-direction:column;align-items:center;gap:7px}
.iv-qc{position:relative;width:104px;padding:5px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px rgba(16,16,28,.06),0 1px 2px rgba(16,16,28,.06),0 10px 24px -14px rgba(16,16,28,.35);transition:opacity .2s linear}
.iv-qc svg{display:block;width:100%;height:auto;aspect-ratio:1;border-radius:7px}
.iv-ctr{position:absolute;left:50%;top:50%;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:7px;background:#fff;display:grid;place-items:center;box-shadow:0 0 0 1px rgba(16,16,28,.08)}
.iv-ctr img{width:17px;height:17px}
.iv-qr figcaption{font-size:11.5px;color:var(--text3)}
.iv-qr.gone .iv-qc{opacity:.35}
.iv-rules{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.iv-rules.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.iv-rule{display:flex;gap:12px;padding:14px 14px 14px 12px;border-radius:10px;border:1px solid var(--line);background:var(--bg2)}
.iv-ri{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex:none;background:var(--accent-soft);color:var(--accent-text)}
.iv-ri .ic{width:16px;height:16px}
.iv-rt{display:flex;flex-direction:column;min-width:0}
.iv-rt small{font-size:12px;color:var(--text3);line-height:16px}
.iv-rt b{font-size:24px;font-weight:650;letter-spacing:-.02em;line-height:32px;margin-top:2px}
.iv-rt b .iv-then{margin-left:8px;font-size:13px;font-weight:500;letter-spacing:0;color:var(--text2)}
.iv-rt p{margin:4px 0 0;font-size:12.5px;line-height:1.6;color:var(--text2);text-wrap:pretty}
.iv-rt p em{display:block;font-style:normal;color:var(--text3)}
.iv-rules+.iv-sum,.empty+.iv-sum{margin-top:14px}
.iv-sum{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;padding-top:14px;border-top:1px solid var(--line)}
.iv-sum>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.iv-sum small{font-size:12px;color:var(--text3);white-space:nowrap}
.iv-sum b{font-size:16px;font-weight:600;white-space:nowrap}
.iv-fine{margin:12px 0 0;font-size:12px;line-height:1.6;color:var(--text3)}
.iv-f{display:flex;align-items:center;gap:11px;min-height:56px;padding:8px 18px}
.iv-f+.iv-f{border-top:1px solid var(--line)}
.iv-fn{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.iv-fn b{font-size:13px;font-weight:600;overflow-wrap:anywhere}
.iv-fn small{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:12px;color:var(--text3)}
.iv-fn .tag{height:18px;font-size:11px;padding:0 6px}
.iv-fe{display:flex;align-items:baseline;gap:6px;flex:none}
.iv-fe small{font-size:12px;color:var(--text3)}
.iv-fe b{font-size:13.5px;font-weight:600}
.iv-t td{white-space:nowrap}
.iv-t td.amt{color:var(--ok)}
.iv-t td.iv-note{width:100%;white-space:normal;font-size:12.5px;color:var(--text2)}
.iv-who{display:inline-flex;align-items:center;gap:7px;vertical-align:middle;line-height:20px}
.iv-t tr.iv-gone td.amt{color:var(--text3);text-decoration:line-through;text-decoration-thickness:1px}
.iv-t tr.iv-gone .iv-who{opacity:.6}
@media (max-width:720px){ .iv-rules.two{grid-template-columns:minmax(0,1fr)} .iv-sum{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:12px} }
@media (max-width:560px){ .iv-link{flex-direction:column;align-items:stretch;gap:16px} .iv-qr{align-self:center} .iv-f{padding:8px 14px}
  /* 奖励明细 as two lines a row: the kind, the friend and the amount; when and what became of it */
  .iv-t thead{display:none} .iv-t,.iv-t tbody{display:block}
  .iv-t tr{display:grid;grid-template-columns:max-content minmax(0,1fr) auto;grid-template-areas:"kind who amt" "time note note";gap:4px 10px;align-items:center;padding:11px 14px;border-bottom:1px solid var(--line)}
  .iv-t tr:last-child{border-bottom:0} .tbl.iv-t td,.tbl.iv-t td:first-child,.tbl.iv-t td:last-child{padding:0;border:0}
  .iv-t td:nth-child(1){grid-area:time;font-size:12px} .iv-t td:nth-child(2){grid-area:kind} .iv-t td:nth-child(3){grid-area:who} .iv-t td:nth-child(4){grid-area:amt} .iv-t td.iv-note{grid-area:note;width:auto;font-size:12px} }
dl.kv{display:grid;grid-template-columns:88px 1fr;gap:10px 14px;margin:0;font-size:13px}
dl.kv dt{color:var(--text3)}dl.kv dd{margin:0;font-weight:500;min-width:0;overflow-wrap:anywhere}
.row-set{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.row-set>div:first-child,.row-set>.ava+div,.row-set>.letter+div{flex:1;min-width:200px}
.row-set b{font-weight:600}.row-set small{display:block;color:var(--text3);font-size:12px}

/* ================= smaller screens ================= */
@media (max-width:1180px){.pgrid,.ptg{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){.pgrid,.ptg{grid-template-columns:repeat(2,minmax(0,1fr))}.home .sec-h{align-items:flex-start}.pk{width:100%}.pk>div{flex:1}}
@media (max-width:1000px){
  .hd-in{grid-template-columns:1fr auto}.links{display:none}.burger{display:grid}
  .sheet{display:grid;gap:2px;width:min(var(--w),calc(100% - 48px));margin:0 auto;padding:6px 0 14px;animation:popin .15s ease}
  .sheet a{display:flex;align-items:center;justify-content:space-between;height:46px;padding:0 4px;border-bottom:1px solid var(--line);font-size:15px;font-weight:550;color:var(--text2)}
  .sheet a.on{color:var(--text)}.sheet a .ic{color:var(--text3)}
  .sheet .btn{margin-top:12px;height:42px}
  .cols,.g21,.g12{grid-template-columns:1fr}
  .kpis.k5{grid-template-columns:repeat(3,1fr)}.kpis.k5>div:nth-child(4){border-left:0}.kpis.k5>div:nth-child(n+4){border-top:1px solid var(--line)}
  .foot-cols{gap:36px}
}
/* a signed-in header on a phone: the mark without the name, closer together, so the menu button is not cut off */
@media (max-width:440px){
  .hd-in:has(.bal) .brand>span:not(.lmk):not(.lku){display:none}.hd-in:has(.bal) .lku{--lku:22px!important}
  .hd .right{gap:4px}.hd .me>button>.ic{display:none}
}
@media (max-width:760px){
  .hd-in,.box,.sheet{width:calc(100% - 32px)}
  .hd .bal .lb,.hd .bal>i{display:none}.hd .bal:has(.cr-chip){padding-right:12px}
  .hd .bal .cr-chip{height:auto;padding:0;background:none;box-shadow:none;overflow:visible}.hd .bal .cr-chip:before,.hd .bal .cr-chip:after,.hd .bal .cr-coin{display:none}
  .hero h1{font-size:clamp(28px,8.4vw,36px)}
  .ep{width:100%}.ep-v{flex:1;text-align:left}
  .sky{-webkit-mask-image:linear-gradient(180deg,#000 85%,transparent);mask-image:linear-gradient(180deg,#000 85%,transparent)}
  .sec{padding-top:56px}
  .search.sm{width:auto;flex:1 1 100%}
  .pk>div{padding:8px 12px 9px}.pk b{font-size:18px}
  .lk-g,.qa{grid-template-columns:1fr}
  .qa>div{border-right:0!important;border-bottom:1px solid var(--line)!important}.qa>div:last-child{border-bottom:0!important}
  .pagehd{padding-top:34px}.pagehd h1{font-size:26px}
  .search{min-width:0;flex:1 1 100%}
  .g2{grid-template-columns:1fr}
  .kpis,.kpis.k5{grid-template-columns:1fr 1fr}.kpis>div{border-left:0!important;border-top:1px solid var(--line)}.kpis>div:nth-child(even){border-left:1px solid var(--line)!important}.kpis>div:nth-child(-n+2){border-top:0}
  .kpis>div:last-child:nth-child(odd){grid-column:1/-1}
  .prof-in{padding-top:22px}.prof-b{width:100%;justify-items:start;grid-template-columns:1fr auto}.prof-b .btn{justify-self:end}
  .tabs a{padding:0 9px}.tabs a .ic{display:none}
  .hide-sm{display:none}
  .tbl th,.tbl td{padding-left:9px;padding-right:9px}
  .smap{height:250px}
  .code-p{display:none}
  .foot-in{flex-direction:column;gap:28px}.foot-cols{grid-template-columns:repeat(2,1fr);gap:20px}
  .locked{padding-top:56px}
}
@media (max-width:560px){.pgrid,.ptg{grid-template-columns:1fr}.vw button{padding:0 8px}}
/* short windows (or a big zoom): the first screen keeps the sky in view */
@media (max-height:640px) and (min-width:761px){.pill{display:none}.hero h1{margin-top:0}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html.snap{scroll-snap-type:none}}
.home .panel{display:flex;flex-direction:column}.home .panel .pnote{margin-top:auto}.home .panel .steps{margin-bottom:18px}
.pnote{display:flex;gap:8px;margin:16px 0 0;padding-top:14px;border-top:1px dashed var(--line2);font-size:12.5px;line-height:1.7;color:var(--text3)}
.pnote .ic{margin-top:3px}

/* ---- the avatar: the button on it, and the picker ---- */
.face-btn{position:relative;padding:0;border:0;background:none;border-radius:50%;flex:none;cursor:pointer}
.face-btn>span:last-child{position:absolute;right:-2px;bottom:-2px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--surface);color:var(--text2);
  box-shadow:0 0 0 1px var(--line2,var(--line)),0 2px 6px rgba(0,0,0,.18);opacity:0;transition:opacity .2s linear}
.face-btn:hover>span:last-child,.face-btn:focus-visible>span:last-child{opacity:1}
.face-row{display:flex;align-items:center;gap:12px;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.face-row b{display:block;font-weight:600;color:var(--text);font-size:13px}.face-row small{color:var(--text3);font-size:12px}.face-row .grow{flex:1;min-width:0}
.fc-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 14px}
.fc-now .ava.ph{display:grid;place-items:center;color:var(--text3);border:1px dashed var(--line3,var(--line))}
.fc-bg{display:flex;gap:8px;margin-bottom:12px}
.fc-bg button{width:24px;height:24px;border-radius:50%;border:0;background:var(--c);box-shadow:0 0 0 1px rgba(0,0,0,.08);cursor:pointer;transition:box-shadow .15s linear}
.fc-bg button.on{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--accent)}
.fc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:6px;max-height:min(300px,44vh);overflow:auto;padding:2px;margin:0 -2px}
.fc-grid .fg{display:grid;place-items:center;aspect-ratio:1;border-radius:12px;border:1px solid transparent;background:none;padding:0;cursor:pointer;transition:background .15s linear,border-color .15s linear}
.fc-grid .fg:hover{background:var(--hover)}.fc-grid .fg.on{border-color:var(--accent);background:var(--accent-soft)}
.fc-grid .fg svg{width:44px;height:44px;border-radius:50%}
.fc-up{display:flex;align-items:center;gap:12px;padding:18px;border-radius:12px;border:1px dashed var(--line3,var(--line));color:var(--text2);cursor:pointer;transition:border-color .15s linear,background .15s linear}
.fc-up:hover{border-color:var(--accent);background:var(--accent-soft)}.fc-up b{display:block;color:var(--text);font-weight:600;font-size:13px}.fc-up small{color:var(--text3);font-size:12px}
.fc-f{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}

/* ---- the connect page: one tab per agent in the manual setup ---- */
.dc-tools{margin:6px 0 4px;display:inline-flex}
.dc-tools button{min-width:96px}
.dc-kv{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:12px 0 0;padding:12px 14px;border-radius:10px;border:1px solid var(--line);background:var(--sunk);font-size:12.5px}
.dc-kv dt{color:var(--text3)}.dc-kv dd{margin:0;color:var(--text);word-break:break-all}

/* ---- 首页 · 实时观察: four cards on the left switch the picture on the right; the pictures are drawn at the size the
   real ones have and scaled down to the stage (the web console lays itself out) ---- */
.lv{display:grid;grid-template-columns:minmax(250px,330px) minmax(0,1fr);gap:clamp(16px,2.2vw,28px)}
.lv-side{display:flex;flex-direction:column;gap:16px;min-width:0}
.lv-cards{display:flex;flex-direction:column;gap:6px}
.lv-c{position:relative;display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;padding:13px 14px 15px;border-radius:12px;border:1px solid transparent;background:none;color:var(--text);overflow:hidden;transition:background .24s linear,border-color .24s linear}
.lv-c:hover{background:var(--hover)}
.lv-c.on{background:var(--surface);border-color:var(--line)}
.lv-c .pi{margin-top:1px;transition:color .24s linear,background .24s linear,border-color .24s linear}
.lv-c.on .pi{color:var(--accent-text);background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 22%,transparent)}
.lv-ct{min-width:0}
.lv-ct b{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:620}
.lv-ct b em{font-style:normal;height:18px;padding:0 6px;border-radius:5px;font-size:11px;font-weight:600;line-height:18px;color:var(--accent-text);background:var(--accent-soft)}
.lv-ct small{display:block;margin-top:3px;font-size:12.5px;line-height:1.55;color:var(--text2);text-wrap:pretty}
.lv-run{position:absolute;left:14px;right:14px;bottom:0;height:2px;border-radius:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;opacity:0;transition:opacity .24s linear}
.lv-c.run .lv-run{opacity:.85;animation:lvrun 7s linear forwards}
.lv.idle .lv-run,.lv-side:hover .lv-run,.lv:has(.lv-stage:hover) .lv-run{animation-play-state:paused}
@keyframes lvrun{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.lv-dl{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:auto;padding:0 2px}
.lv-dl small{color:var(--text3);font-size:12px}
.lv-stage{position:relative;min-height:clamp(380px,calc(100svh - 330px),640px);border-radius:16px;border:1px solid var(--line);overflow:hidden;background:var(--bg2);isolation:isolate;
  --wg:#1e1f25;--wgl:rgba(255,255,255,.08);--tpbg:rgba(30,31,38,.88);--mbbar:rgba(14,15,20,.5);--wall:#111217}
:root[data-theme="light"] .lv-stage{--wg:#fff;--wgl:rgba(16,16,24,.08);--tpbg:rgba(255,255,255,.9);--mbbar:rgba(255,255,255,.6);--wall:#ecedf5}
.lv-sc{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .45s linear,visibility 0s linear .45s}
.lv-sc.on{opacity:1;visibility:visible;transition:opacity .45s linear}
.lv-widget,.lv-menubar{background:radial-gradient(90% 80% at 12% 0%,color-mix(in srgb,var(--accent) 30%,transparent),transparent 62%),radial-gradient(80% 70% at 100% 100%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 66%),var(--wall)}
.lv-fit{position:absolute;left:50%;top:50%;width:calc(var(--w)*1px);height:calc(var(--h)*1px);transform:translate(-50%,-50%) scale(var(--k,1))}
.lv-fit>*{position:absolute}
.lv-widget .lv-fit.one{width:362px}.lv-fit.one .wg-m,.lv-fit.one .wg-s,.lv-fit.one .wg-cap{display:none}.lv-fit.one .wg-l{left:0!important}
.lv-soon{position:absolute;top:14px;right:14px;height:24px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:600;line-height:24px;color:var(--accent-text);background:var(--accent-soft)}
.lv .num,.lv b,.lv em{font-variant-numeric:tabular-nums}
.bump{animation:lvbump 1.2s linear}
@keyframes lvbump{from{color:var(--accent-text)}}
/* bars of the last seven days: today in the accent, the rest softer */
.lv-bars{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;align-items:end}
.lv-bars>div{display:flex;flex-direction:column;gap:5px;min-width:0}
.lv-bars span{display:flex;align-items:flex-end;height:var(--bh,58px)}
.lv-bars i{display:block;width:100%;border-radius:4px 4px 2px 2px;background:color-mix(in srgb,var(--accent) 50%,transparent);transition:height .7s cubic-bezier(.3,.7,.2,1)}
.lv-bars i.now{background:var(--accent)}
.lv-bars i.zero{background:var(--line2);height:3px!important}
.lv-bars small{font-size:11px;color:var(--text3);text-align:center;white-space:nowrap}
.lv-bars small.now{color:var(--text)}
.lv-bars.sm{--bh:32px;gap:5px;margin-top:9px}
/* the newest requests: a fixed number of rows, the one that lands opens from nothing */
.lv-rq{height:calc(var(--n)*var(--rh,26px));overflow:hidden}
.lv-rq>div{display:grid;grid-template-columns:minmax(0,1fr) auto 62px;gap:10px;align-items:center;height:var(--rh,26px);overflow:hidden;font-size:12.5px;border-top:1px solid var(--wgl,var(--line))}
.lv-rq>div:first-child{border-top-color:transparent}
.lv-rq>div.in{animation:lvin .6s cubic-bezier(.3,.7,.2,1) both}
@keyframes lvin{from{height:0;opacity:0}to{height:var(--rh,26px);opacity:1}}
.lv-rq .mono{display:flex;align-items:center;gap:6px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px}
.lv-rq b{font-weight:620;text-align:right}.lv-rq b.zero{color:var(--text3);font-weight:500}
.lv-rq em{font-style:normal;color:var(--text3);text-align:right;font-size:11.5px}
.bad-dot{width:6px;height:6px;border-radius:50%;background:var(--bad);flex:none}
/* desktop widgets, at their real sizes */
.wg{border-radius:22px;background:var(--wg);border:1px solid var(--wgl);box-shadow:0 22px 44px -22px rgba(0,0,0,.55),0 1px 0 rgba(255,255,255,.04) inset;padding:15px 17px;display:flex;flex-direction:column;color:var(--text)}
:root[data-theme="light"] .wg{box-shadow:0 18px 40px -20px rgba(30,32,70,.28)}
.wg-m{width:362px;height:186px}.wg-s{width:186px;height:186px}.wg-l{width:362px;height:388px}
.wg-h{display:flex;align-items:center;gap:8px;height:24px}
.wg-h b{font-size:14px;font-weight:620}
.wg-u{height:20px;padding:0 8px;border-radius:999px;background:var(--accent-soft);color:var(--accent-text);font-size:11.5px;font-weight:600;line-height:20px;white-space:nowrap}
.wg-bal small{display:block;font-size:12px;color:var(--text2)}
.wg-bal b{display:block;font-size:30px;font-weight:680;letter-spacing:-.03em;line-height:1.15}
.wg-bal em{display:block;font-style:normal;font-size:11.5px;color:var(--text3);margin-top:3px}
.wg-mb{display:flex;gap:16px;align-items:flex-end;margin-top:auto}
.wg-mb .wg-bal{flex:1;min-width:0}
.wg-r{width:168px;flex:none}
.wg-k{display:grid;gap:3px}
.wg-k>div{display:grid;grid-template-columns:32px 1fr auto;align-items:baseline;font-size:12.5px}
.wg-k small{color:var(--text2);font-size:12px}.wg-k b{font-weight:640}.wg-k em{font-style:normal;color:var(--text3);font-size:12px}
.wg-t{display:flex;align-items:center;gap:9px;margin-top:auto;padding-top:10px}
.wg-t span{position:relative;display:inline-flex;opacity:.4;filter:grayscale(1)}
.wg-t span.on{opacity:1;filter:none}
.wg-t span.on:after{content:"";position:absolute;right:-3px;bottom:-3px;width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 2px var(--wg)}
.wg-t small{margin-left:auto;font-size:11.5px;color:var(--text3)}
.wg-s .wg-bal{margin-top:auto}
.wg-f{margin-top:9px;font-size:12px;color:var(--text2);line-height:1.5}.wg-f b{color:var(--text);font-weight:620}
.wg-f em{display:block;font-style:normal;color:var(--text3);font-size:11.5px}
.wg-cap{width:160px;display:flex;flex-direction:column;gap:5px}
.wg-cap b{font-size:13px;font-weight:620}.wg-cap span{font-size:12px;line-height:1.55;color:var(--text2)}
.wg-lt{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:12px}
.wg-lt .wg-k{width:168px}
.wg-sub{display:flex;justify-content:space-between;align-items:baseline;margin:14px 0 8px;font-size:12px;color:var(--text2)}
.wg-sub b{font-weight:600;color:var(--text2)}.wg-sub em{font-style:normal;color:var(--text3)}
.wg-l .lv-bars{--bh:50px}
.wg-l .wg-t{margin-top:12px;padding-top:0}
/* the menu bar and the panel under its icon */
.lv-menubar{--mbr:156px}
.mb-bar{position:absolute;top:0;left:0;right:0;height:30px;display:flex;align-items:center;justify-content:flex-end;gap:15px;padding:0 16px;font-size:12.5px;font-weight:560;color:var(--text);background:var(--mbbar);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-bottom:1px solid var(--wgl);z-index:1}
.mb-me{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;margin-right:-4px;border-radius:6px;background:color-mix(in srgb,var(--text) 12%,transparent)}
.mb-me b{font-weight:620}
.mb-i{display:inline-flex;color:var(--text)}.mb-i svg{width:16px;height:16px}.mb-i.bat svg{width:24px;height:12px}
.lv-menubar .lv-fit{left:auto;top:40px;right:var(--mbr);transform:scale(var(--k,1));transform-origin:top right}
.tp{inset:0 auto auto 0;width:360px;border-radius:14px;background:var(--tpbg);border:1px solid var(--wgl);box-shadow:0 26px 60px -22px rgba(0,0,0,.6);-webkit-backdrop-filter:blur(26px);backdrop-filter:blur(26px);padding:14px 14px 10px;display:flex;flex-direction:column;gap:12px;color:var(--text)}
:root[data-theme="light"] .tp{box-shadow:0 22px 50px -20px rgba(30,32,70,.3)}
.tp-h{display:flex;align-items:center;gap:10px}
.tp-who{flex:1;display:flex;flex-direction:column;min-width:0}.tp-who b{font-size:14px;font-weight:640}.tp-who small{font-size:11.5px;color:var(--text3)}
.tp-ib{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;color:var(--text2)}
.tp-bal small{display:block;font-size:12px;color:var(--text2)}.tp-bal b{font-size:30px;font-weight:680;letter-spacing:-.03em;line-height:1.2}
.tp-kpi{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tp-kpi>div{padding:8px 11px 9px;border-radius:10px;background:var(--sunk);border:1px solid var(--wgl)}
.tp-kpi small{display:block;font-size:11.5px;color:var(--text2)}.tp-kpi b{font-size:16px;font-weight:650;margin-right:6px}.tp-kpi em{font-style:normal;font-size:11.5px;color:var(--text3)}
.tp-days{--bh:40px}
.tp-sec{font-size:11.5px;font-weight:600;color:var(--text3);margin-bottom:-6px}
.tp-tools>div{display:flex;align-items:center;gap:10px;height:40px;border-top:1px solid var(--wgl)}
.tp-tools>div:first-child{border-top:0}
.tp-tools>div:not(.on) .aim{opacity:.45;filter:grayscale(1)}
.tp-tools span{flex:1;display:flex;flex-direction:column;min-width:0;line-height:1.35}
.tp-tools b{font-size:13px;font-weight:600}.tp-tools small{font-size:11px;color:var(--text3)}
.sw{position:relative;width:30px;height:18px;border-radius:999px;background:var(--line3);flex:none}
.sw:after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.sw.on{background:var(--accent)}.sw.on:after{left:14px}
.tp-nt{display:flex;align-items:center;gap:8px;height:34px;padding:0 10px;border-radius:9px;background:var(--accent-soft);color:var(--accent-text);font-size:12.5px;font-weight:600}
.tp-nt span{flex:1}
.tp-f{display:flex;align-items:center;gap:6px;padding-top:9px;border-top:1px solid var(--wgl);font-size:11.5px;color:var(--text3)}
.tp-f .lk{color:var(--text2)}
/* the web console in a browser window */
.br{position:absolute;inset:clamp(14px,3.2vw,30px);border-radius:12px;border:1px solid var(--line2);background:var(--bg);box-shadow:0 26px 60px -26px rgba(0,0,0,.55);overflow:hidden;display:flex;flex-direction:column}
:root[data-theme="light"] .br{box-shadow:0 22px 50px -24px rgba(30,32,70,.25)}
.br-h{flex:none;height:34px;display:flex;align-items:center;gap:7px;padding:0 14px;background:var(--bg2);border-bottom:1px solid var(--line)}
.br-h>i{width:10px;height:10px;border-radius:50%;background:var(--line3)}
.br-u{margin:0 auto;display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 12px;border-radius:7px;background:var(--sunk);border:1px solid var(--line);font-size:11.5px;color:var(--text2);transform:translateX(-22px);white-space:nowrap;overflow:hidden;max-width:60%}
.br-b{flex:1;padding:14px;display:flex;flex-direction:column;gap:12px;min-height:0;font-size:12.5px}
.br-k{display:grid;grid-template-columns:repeat(3,1fr);flex:none;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.br-k>div{padding:9px 14px;border-left:1px solid var(--line);min-width:0;white-space:nowrap}.br-k>div:first-child{border-left:0}
.br-k small{display:block;font-size:11.5px;color:var(--text3)}.br-k b{font-size:18px;font-weight:650;letter-spacing:-.02em}.br-k em{font-style:normal;margin-left:6px;font-size:11.5px;color:var(--text3)}
.br-g{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:12px;flex:1;min-height:0}
.br-b section{border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:11px 14px 12px;display:flex;flex-direction:column;min-height:0;min-width:0}
.br-b h4{margin:0 0 10px;font-size:12.5px;font-weight:620;white-space:nowrap}.br-b h4 small{margin-left:8px;color:var(--text3);font-weight:400;font-size:11.5px}
.br-bars{flex:1;display:grid;grid-template-columns:repeat(7,1fr);gap:9px;align-items:end;min-height:70px}
.br-bars>div{height:100%;display:flex;flex-direction:column-reverse}
.br-bars i{display:block;width:100%;flex:none;border-radius:2px;transition:height .7s cubic-bezier(.3,.7,.2,1),background .3s linear}
.br-bars i+i{border-bottom:2px solid var(--surface);box-sizing:content-box}
.br-lg{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:10px;font-size:11px;color:var(--text2)}
.br-lg>span{display:inline-flex;align-items:center;gap:5px}.br-lg i{width:8px;height:8px;border-radius:2px}
.lv-map{flex:1;position:relative;min-height:0;margin:-4px -8px -6px}
.lv-map canvas{display:block}
.br-r{flex:none}
.br-rq{--rh:28px}
/* the watch (to come): the cases of the app's design (zastra-watch/design/assets, 2x pictures shown at half size, the
   light ones cut out of their white), two of them side by side, the screen laid over the case's own black glass */
.wt-row{inset:0;display:flex;align-items:center;justify-content:center;gap:44px}
.wt-c{display:flex;flex-direction:column;align-items:center;gap:16px}
.lv-watch{--fw:282.5px;--fh:446px;--sl:37px;--st:96px}
:root[data-theme="light"] .lv-watch{--fw:288px;--fh:480px;--sl:34.5px;--st:117px}
.wt{position:relative;width:var(--fw);height:var(--fh)}
.wt:before{content:"";position:absolute;inset:0;background:center/100% 100% no-repeat;filter:drop-shadow(0 26px 30px rgba(0,0,0,.42))}
:root[data-theme="light"] .wt:before{filter:drop-shadow(0 22px 28px rgba(30,32,70,.16))}
.wt-1:before{background-image:url(watch-b.webp)}.wt-2:before{background-image:url(watch-a.webp)}
:root[data-theme="light"] .wt-1:before{background-image:url(watch-d.webp)}:root[data-theme="light"] .wt-2:before{background-image:url(watch-e.webp)}
.wt-s{position:absolute;left:var(--sl);top:var(--st);width:208px;height:248px;border-radius:47px;background:#000;color:#fff;display:flex;flex-direction:column;overflow:hidden;line-height:1.2;
  --wn:ui-rounded,"SF Pro Rounded",-apple-system,system-ui,sans-serif;--sub:#98989f;--acc:#7176ec;--acct:#a4a8ff}
.wt-s .lmk-l{display:none!important}.wt-s .lmk-d{display:block!important}
.wt-s b{font-family:var(--wn);font-weight:600}.wt-s em{font-style:normal}
/* the app: the balance big, how long it lasts, today and the month, the requests running */
.wa{padding:12px 15px 0}
.wa-top{display:flex;align-items:center;justify-content:space-between;height:32px;margin:0 -3px 10px;font-size:15px;font-weight:600}
.wa-gear{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#232327}
.wa-pg{position:absolute;right:5px;top:62px;width:4px;height:20px;border-radius:2px;background:rgba(255,255,255,.85)}
.wa-pg:after{content:"";position:absolute;left:0;top:26px;width:4px;height:4px;border-radius:50%;background:#55555c;box-shadow:0 8px 0 #55555c}
.wa>small{font-size:13px;color:var(--sub)}
.wa>b{font-size:44px;letter-spacing:-.75px;line-height:1.08}
.wa>p{margin:2px 0 4px;padding-bottom:9px;border-bottom:1px solid #2c2c31;font-size:12px;color:var(--sub)}
.wa-row{display:flex;align-items:baseline;gap:8px;height:23px;font-size:13.5px}
.wa-row span{width:30px;color:var(--sub)}.wa-row b{font-size:16px}.wa-row em{margin-left:auto;color:var(--sub)}
.wa-run{display:flex;align-items:center;gap:7px;height:28px;margin-top:7px;padding:0 10px;border-radius:12px;background:#1c1c1f;font-size:12.5px}
.wa-run i{width:6px;height:6px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 2.5px rgba(113,118,236,.3);animation:wapulse 2.4s linear infinite}
.wa-run span{flex:1}.wa-run svg{color:var(--sub);transform:rotate(-90deg)}
@keyframes wapulse{50%{box-shadow:0 0 0 4px rgba(113,118,236,.14)}}
/* the face: balance and today in one circle, the date and the time; the week's bars with the balance; three rings */
.wf{padding:14px 12px 12px;justify-content:space-between}
.wf-top{display:flex;align-items:center;gap:8px}
.wf-duo{flex:none;width:52px;height:52px;border-radius:50%;background:#232327;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1}
.wf-duo small{font-size:8px;color:var(--sub)}.wf-duo b{font-size:15px}.wf-duo em{font-size:8px;color:var(--acct);white-space:nowrap}
.wf-t{flex:1;display:flex;flex-direction:column;align-items:flex-end;min-width:0}
.wf-t small{font-size:14px;font-weight:600;color:var(--acct)}.wf-t b{font-family:inherit;font-size:42px;letter-spacing:-1px;line-height:1}
.wf-wk{display:flex;gap:10px;align-items:stretch}
.wf-bars{flex:none;width:88px;display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.wf-bars>div{display:flex;flex-direction:column;align-items:stretch;gap:3px}
.wf-bars span{height:62px;display:flex;align-items:flex-end}
.wf-bars i{display:block;width:100%;border-radius:2.5px;background:#3d3f78;transition:height .7s cubic-bezier(.3,.7,.2,1)}
.wf-bars i.now{background:var(--acc)}
.wf-bars small{font-size:8px;text-align:center;color:#8e8e95}.wf-bars small.now{color:#fff;font-weight:600}
.wf-n{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;line-height:1.18;white-space:nowrap}
.wf-n small{display:flex;align-items:center;gap:3px;font-size:9px;color:var(--acct)}
.wf-n b{font-size:15px}.wf-n [data-lv="bal"]{font-size:18px}.wf-n em{font-size:9.5px;color:var(--sub)}
.wf-gs{display:flex;justify-content:space-between;padding:0 4px}
.wf-g{position:relative;width:52px;height:52px;display:grid;place-items:center}
.wf-g svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(135deg)}
.wf-g circle{fill:none;stroke-width:4.5;stroke-linecap:round}
.wf-g .tr{stroke:#2b2b30}.wf-g .pr{stroke:var(--acc);transition:stroke-dasharray .9s cubic-bezier(.3,.7,.2,1)}
.wf-g b{font-size:11.5px;letter-spacing:-.2px;margin-top:-3px}.wf-g [data-lv="todayc"],.wf-g [data-lv="left"]{font-size:18px}
.wf-g small{position:absolute;left:0;right:0;bottom:1px;text-align:center;font-size:8.5px;color:var(--sub)}
.wt-cap{width:232px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.wt-cap b{font-size:13.5px;font-weight:620}.wt-cap span{font-size:12px;line-height:1.5;color:var(--text2)}
.lv-watch{background:radial-gradient(58% 50% at 50% 46%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 72%),var(--bg2)}
.lv-watch .lv-fit.one{width:300px}.lv-fit.one .wt-f{display:none}
@media (prefers-reduced-motion:reduce){.wa-run i{animation:none}}
@media (max-width:980px){.lv{grid-template-columns:1fr}.lv-cards{display:grid;grid-template-columns:1fr 1fr;gap:6px}.lv-dl{margin-top:0}}
@media (max-width:640px){.lv-ct small{display:none}.lv-c{padding:11px 12px 13px;align-items:center}.lv-stage{min-height:440px}.lv-map{display:none}.br-g{grid-template-columns:1fr}.br-g section:last-child{display:none}.lv-menubar{--mbr:70px}.mb-i{display:none}}

/* ---- words that flow in as a page opens and as a screen comes into view (reveal() in app.js), the same on every
   page, quickly (the user, 10-25: no blank or blurred screen while scrolling): the heading's characters rise out of a
   slight blur one after another, the lines come in like ink, the blocks follow; translate, so a block's own transform
   stays. --rv-t: how long ago the part began, for one drawn again meanwhile; .rv-0 hides without a transition ---- */
.rv .rv-c{opacity:0;transition:opacity .3s linear calc(var(--rv-d,0ms) + var(--i,0)*var(--rv-s,4ms) - var(--rv-t,0ms))}
.rv .rv-ch{display:inline-block;transform:translateY(.22em);filter:blur(2px);
  transition:opacity .32s ease calc(var(--i,0)*14ms - var(--rv-t,0ms)),transform .5s cubic-bezier(.2,.75,.2,1) calc(var(--i,0)*14ms - var(--rv-t,0ms)),filter .3s ease calc(var(--i,0)*14ms - var(--rv-t,0ms))}
.rv .rv-b{opacity:0;translate:0 12px;transition:opacity .45s ease calc(var(--rv-d,0ms) - var(--rv-t,0ms)),translate .6s cubic-bezier(.2,.75,.2,1) calc(var(--rv-d,0ms) - var(--rv-t,0ms))}
.rv.rv-in .rv-c,.rv.rv-in .rv-b{opacity:1;translate:none}
.rv.rv-in .rv-ch{transform:none;filter:blur(0)}
.rv.rv-0 .rv-c,.rv.rv-0 .rv-b{transition:none!important}

/* ---- 使用限制 (/limits): a 1080px grid. The first screen is the title, one line of the story and the two pictures,
   which shrink with a short window so both are seen whole without scrolling; then the rule, then what we do ---- */
.dc.lmt{max-width:1080px;margin:0 auto;padding-bottom:88px}
.lm-hero{padding:32px 0 0;text-align:center}
.lm-eb{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 12px 0 10px;border-radius:999px;border:1px solid color-mix(in srgb,var(--accent) 32%,var(--line2));background:var(--accent-soft);font-size:12.5px;font-weight:560;color:var(--accent-text)}
.lm-eb .ic{color:var(--accent-text)}
.lm-hero h1{margin:14px 0 0;font-size:clamp(26px,2.6vw,34px);line-height:1.28;font-weight:700;letter-spacing:-.03em}
.lm-lead{max-width:640px;margin:10px auto 0;font-size:15px;line-height:1.8;color:var(--text2)}
.lm-lead>span{display:inline-block}
/* the pictures: as wide as fits the window's height left after everything else on the screen (about 430px) */
.lm-cmp{--lm-fit:calc((100svh - 428px) * 3.214 + 70px);width:min(100%,max(560px,var(--lm-fit)));margin:20px auto 0;border-radius:18px;border:1px solid var(--line);background:var(--surface);overflow:hidden;box-shadow:var(--lift);text-align:left}
.lm-q{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding:12px 20px;background:var(--bg2);border-bottom:1px solid var(--line)}
.lm-qb{height:22px;padding:0 8px;border-radius:6px;display:inline-flex;align-items:center;font-size:11.5px;font-weight:620;color:var(--accent-text);background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 25%,transparent)}
.lm-q b{font-size:13.5px;font-weight:600;color:var(--text)}
.lm-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:16px 18px 18px}
.lm-art{min-width:0;border-radius:14px;border:1px solid var(--line);background:var(--bg2);overflow:hidden;display:flex;flex-direction:column}
.lm-art.ok{border-color:color-mix(in srgb,var(--ok) 32%,var(--line))}
.lm-art.down{border-color:color-mix(in srgb,var(--warn) 34%,var(--line))}
.lm-img{aspect-ratio:900/560;overflow:hidden;background:var(--sunk);border-bottom:1px solid var(--line)}
.lm-img img{width:100%;height:100%;object-fit:cover;display:block}
:root:not([data-theme="light"]) .lm-img img{filter:brightness(.94)}
.lm-cap{flex:1;display:flex;align-items:center;align-content:center;gap:6px 10px;flex-wrap:wrap;padding:10px 14px;background:var(--surface)}
.lm-cap b{font-size:12.5px;font-weight:600;color:var(--text2)}
.lm-cap p{margin:0;font-size:13px;line-height:1.6;color:var(--text2)}
.lm-tag{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:999px;font-size:12px;font-weight:600;color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,transparent)}
.lm-art.down .lm-tag{color:var(--warn);background:color-mix(in srgb,var(--warn) 14%,transparent)}

.lm-sec{padding-top:64px;scroll-margin-top:72px}
.lm-h{display:grid;grid-template-columns:220px minmax(0,1fr);gap:28px;align-items:start;margin-bottom:24px}
.lm-hl{display:flex;align-items:center;gap:10px;padding-top:4px}
.lm-no{width:28px;height:24px;border-radius:6px;display:inline-grid;place-items:center;font-family:"SF Mono","JetBrains Mono",ui-monospace,monospace;font-size:11.5px;font-weight:650;color:var(--accent-text);background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 28%,transparent)}
.lm-hl small{font-size:13px;font-weight:620;letter-spacing:.02em;color:var(--text2)}
.lm-hr h2{margin:0;font-size:clamp(21px,2.2vw,26px);line-height:1.3;font-weight:680;letter-spacing:-.025em}
.lm-hr p{margin:10px 0 0;color:var(--text2);font-size:14.5px;line-height:1.82;text-wrap:pretty}

/* 02: What the platform does: three separate cards */
.lm-pro{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:0}
.lm-pro>div{padding:24px 24px 26px;min-width:0;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:var(--lift);position:relative}
.lm-pro .pi{width:36px;height:36px;border-radius:10px;display:inline-grid;place-items:center;color:var(--accent-text);background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 26%,transparent)}
.lm-pro b{display:block;margin:16px 0 8px;font-size:15.5px;font-weight:640}
.lm-pro p{margin:0;font-size:13.5px;line-height:1.8;color:var(--text2);text-wrap:pretty}

/* 03: The usage rule + transparent handling flow */
.lm-rule{border:1px solid var(--line);border-radius:18px;background:var(--surface);overflow:hidden;box-shadow:var(--lift)}
.lm-yn{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.lm-yn>div{padding:22px 24px;min-width:0}
.lm-yn>.no{border-left:1px solid var(--line);background:color-mix(in srgb,var(--bg2) 55%,var(--surface))}
.lm-ynh{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;padding-bottom:14px;margin-bottom:12px;border-bottom:1px solid var(--line)}
.lm-ynh h3{display:flex;align-items:center;gap:8px;margin:0;font-size:14.5px;font-weight:650}
.lm-ynh small{font-size:12px;color:var(--text3)}
.lm-yn .yes h3 .ic{color:var(--ok)}.lm-yn .no h3 .ic{color:var(--bad)}
.lm-yn ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.lm-yn li{display:flex;align-items:center;gap:12px;padding:10px 13px;border-radius:11px;border:1px solid var(--line);background:var(--bg2)}
.lm-yn .yes li{background:color-mix(in srgb,var(--ok) 3.5%,var(--bg2));border-color:color-mix(in srgb,var(--ok) 18%,var(--line))}
.lm-yn li>span:last-child{display:flex;flex-direction:column;gap:2px;min-width:0}
.lm-yn li b{font-size:13.5px;font-weight:620}.lm-yn li small{font-size:12px;color:var(--text2)}
.lm-ai{display:flex;gap:4px;min-width:40px;align-items:center}
.lm-x{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex:none;color:var(--bad);background:color-mix(in srgb,var(--bad) 10%,transparent);border:1px solid color-mix(in srgb,var(--bad) 22%,transparent);margin-right:6px}
.lm-flow{padding:18px 24px 20px;border-top:1px solid var(--line);background:var(--bg2)}
.lm-fl{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.lm-fl>span{font-size:12.5px;font-weight:640;color:var(--text)}
.lm-fl>small{font-size:12.5px;color:var(--text2)}
.lm-fl .link{margin-left:8px}
.lm-flow ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.lm-flow li{display:flex;align-items:flex-start;gap:11px;padding:12px 14px;border-radius:11px;border:1px solid var(--line);background:var(--surface)}
.lm-fn{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;flex:none;font-family:"SF Mono","JetBrains Mono",ui-monospace,monospace;font-size:11px;font-weight:650;color:var(--text2);background:var(--sunk);border:1px solid var(--line2);margin-top:1px}
.lm-flow li.warn .lm-fn{color:var(--warn);background:color-mix(in srgb,var(--warn) 12%,transparent);border-color:color-mix(in srgb,var(--warn) 28%,transparent)}
.lm-flow li.ban .lm-fn{color:var(--bad);background:color-mix(in srgb,var(--bad) 12%,transparent);border-color:color-mix(in srgb,var(--bad) 28%,transparent)}
.lm-flow li b{display:block;font-size:13.5px;font-weight:630}
.lm-flow li small{display:block;margin-top:3px;font-size:12.5px;line-height:1.55;color:var(--text2)}

.nw{white-space:nowrap}
@media (max-width:920px){
  .lm-h,.lm-pro{grid-template-columns:1fr;gap:20px}
  .lm-h{margin-bottom:18px}
}
@media (max-width:760px){
  .lm-hero{padding-top:28px}
  .lm-cmp{width:100%}
  .lm-sec{padding-top:48px}
  .lm-pair,.lm-yn{grid-template-columns:1fr}
  .lm-yn>.no{border-left:0;border-top:1px solid var(--line)}
  .dc.lmt{padding-bottom:56px}
}
/* ---- 用量's 请求明细, live (lqDraw in app.js; the desktop client's components/livereqs.tsx): the running requests on
   top in their model's colour with their phase, the time ticking on a bar (deep up to the first byte), a row that comes
   in lighting up a moment; the list scrolls in its own box ---- */
.lq-n{display:inline-flex;align-items:center;gap:6px;margin-left:10px;font-size:12px;font-weight:500;color:var(--accent-text);vertical-align:1px}
.lq-n:empty{display:none}
.lq-n i{position:relative;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.lq-n i:after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--accent);animation:ping 1.6s cubic-bezier(0,0,.2,1) infinite}
.lq-s{max-height:min(560px,64vh);overflow-y:auto;overflow-anchor:none;overscroll-behavior:contain}
.lq-t thead th{position:sticky;top:0;z-index:1;background:var(--surface)}
.lq-t td{transition:background-color .6s linear;vertical-align:middle}
.lq-t tr.lq-nc{cursor:default}
.lq-t tr.lq-on td{background-color:color-mix(in srgb,var(--pc) 6%,transparent)}
.lq-t tr.lq-on td:first-child{background-image:linear-gradient(var(--pc),var(--pc));background-size:2px 100%;background-repeat:no-repeat}
.lq-t tr.lq-in td{animation:lqIn 1.2s cubic-bezier(.2,.7,.2,1)}
@keyframes lqIn{from{opacity:0;box-shadow:inset 0 0 0 999px color-mix(in srgb,var(--pc) 20%,transparent)}22%{opacity:1}to{box-shadow:inset 0 0 0 999px transparent}}
.lq-ph{display:inline-flex;align-items:center;gap:6px;font-size:12px;white-space:nowrap;color:var(--text2)}
.lq-ph i{position:relative;width:6px;height:6px;border-radius:50%;flex:none}
.lq-ph.wait i{background:var(--accent)}
.lq-ph.wait i:after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--accent);animation:ping 1.4s cubic-bezier(0,0,.2,1) infinite}
.lq-ph.out{color:var(--text)}
.lq-ph.out i{background:var(--pc);box-shadow:0 0 0 3px color-mix(in srgb,var(--pc) 24%,transparent);animation:lqBeat 1.1s ease-in-out infinite}
@keyframes lqBeat{50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--pc) 6%,transparent)}}
.lq-gen{display:inline-flex;align-items:center;gap:4px;height:14px}
.lq-gen i{width:4px;height:4px;border-radius:50%;background:var(--pc);opacity:.22;animation:lqDot 1.2s ease-in-out infinite}
.lq-gen i:nth-child(2){animation-delay:.16s}.lq-gen i:nth-child(3){animation-delay:.32s}
@keyframes lqDot{40%{opacity:1;transform:translateY(-2px)}}
.lq-d{display:flex;flex-direction:column;justify-content:center;gap:4px;min-width:104px;font-size:12px;color:var(--text2)}
.lq-d i{position:relative;display:block;height:3px;border-radius:2px;background:color-mix(in srgb,var(--text3) 14%,transparent);overflow:hidden}
.lq-d i b,.lq-d i em{position:absolute;left:0;top:0;bottom:0;border-radius:2px;transition:width .12s linear}
.lq-d i b{background:color-mix(in srgb,var(--pc,var(--accent)) 34%,transparent)}
.lq-d i em{background:var(--pc,var(--accent))}
.lq-d.on{color:var(--text)}
.lq-d.on i b{background:linear-gradient(90deg,color-mix(in srgb,var(--pc) 30%,transparent),color-mix(in srgb,var(--pc) 75%,transparent))}
.lq-spin{width:12px;height:12px;border-width:1.5px;color:var(--text3);display:inline-block;vertical-align:middle}
/* ---- 请求明细's filters (rqBarHTML in app.js, as the desktop client's livereqs.tsx Bar): the bar, what the filters
   keep under it, and the panels of 自定义, 模型, 强度 and 状态 on the page's layer ---- */
.rq-tb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 18px 0}
.rq-dd{max-width:100%;height:auto;min-height:28px;padding:4px 8px 4px 10px;gap:6px}
.rq-dd>span{min-width:0;overflow-wrap:anywhere;white-space:normal;line-height:1.3;text-align:left}
.rq-dd .mono{font-size:12px}
.rq-dd>svg{color:var(--text3);flex:none}
.rq-dd .aim{width:16px;height:16px;border-radius:4px}
.rq-dd.set{color:var(--accent-text)}
.rq-dd[aria-expanded]{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.rq-sum{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-height:40px;padding:9px 18px 10px;font-size:12.5px;color:var(--text3);border-bottom:1px solid var(--line);transition:opacity .15s}
.rq-sum b{color:var(--text2);font-weight:600}
.rq-sum s{color:var(--text3)}
.rq-sum i{font-style:normal;color:var(--line3)}
.rq-sum .link{margin-left:auto;font-size:12.5px}
.rq-wait{opacity:.5}
.lq-s{transition:opacity .15s}
.rq-pop{position:absolute;z-index:70;width:288px;max-width:calc(100vw - 32px);padding:6px;border-radius:12px;background:var(--surface);box-shadow:var(--pop);animation:popin .15s ease}
.rq-pop.e,.rq-pop.s{width:200px}
.rq-pop.d{width:300px}
.rq-pop .search{display:flex;min-width:0;width:100%;height:32px;margin-bottom:6px}
.rq-pl{max-height:min(340px,52vh);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.rq-o{display:flex;align-items:center;gap:9px;width:100%;min-height:32px;padding:6px 8px;border:0;border-radius:7px;background:none;font-size:13px;color:var(--text2);text-align:left;transition:background .12s linear,color .12s linear}
.rq-o:hover{background:var(--hover);color:var(--text)}
.rq-o.on{color:var(--text)}
.rq-o.one.on{background:var(--accent-soft);color:var(--accent-text)}
.rq-o.zero{color:var(--text3)}
.rq-o .ck{width:14px;height:14px;flex:none;display:grid;place-items:center;border-radius:4px;border:1px solid var(--line3);color:transparent;transition:background .12s linear,border-color .12s linear,color .12s linear}
.rq-o.on .ck{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.rq-o .aim{width:16px;height:16px;border-radius:4px}
.rq-o .t{flex:1;min-width:0;overflow-wrap:anywhere;line-height:1.35}
.rq-o .t.mono{font-size:12px}
.rq-o em{flex:none;font-style:normal;font-size:12px;color:var(--text3);font-variant-numeric:tabular-nums}
.rq-o .tick{width:13px;flex:none;color:var(--accent-text)}
.rq-none{padding:16px 8px;text-align:center;font-size:12.5px;color:var(--text3)}
.rq-dt{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:6px 6px 2px}
.rq-dt small{display:block;margin-bottom:5px;font-size:12px;color:var(--text3)}
.rq-dt .inp{height:32px;padding:0 8px;font-size:12.5px;font-variant-numeric:tabular-nums}
.rq-pa{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 6px 4px;font-size:12.5px;color:var(--text3);font-variant-numeric:tabular-nums}
.rq-pa .bad{color:var(--bad)}
@media (max-width:560px){ .rq-tb{padding:12px 14px 0} .rq-tb .seg button{padding:0 9px} .rq-sum{padding:9px 14px 10px} }
/* ---- 绑定手表: six boxes for the watch's code, the one in use in the theme colour; red and a shake when it was wrong ---- */
.modal.wb .modal-b p{margin:0 0 16px;text-wrap:pretty}
.wb-cells{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.wb-cell{width:100%;height:68px;padding:0;border-radius:12px;border:1px solid var(--line2);background:var(--surface);color:var(--text);caret-color:var(--accent);
  font:600 28px/1 -apple-system,BlinkMacSystemFont,"SF Pro Display","Inter",system-ui,sans-serif;font-variant-numeric:tabular-nums;text-align:center;
  transition:border-color .15s linear,box-shadow .15s linear,background-color .15s linear}
.wb-cell:hover{border-color:var(--line3)}
.wb-cell:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.wb-cell:disabled{opacity:.6}
.wb-cells.bad{animation:shake .42s}
.wb-cells.bad .wb-cell{border-color:color-mix(in srgb,var(--bad) 70%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--bad) 14%,transparent)}
.wb-h{margin:10px 0 0;min-height:18px;font-size:12px;color:var(--text3);transition:color .15s linear}
.wb-h.bad{color:var(--bad)}
.wb-a{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
.wb-a .btn{min-width:72px;justify-content:center}
.wb-ok{display:flex;flex-direction:column;align-items:center;text-align:center;padding:6px 0 0;animation:popin .25s ease}
.wb-ck{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:var(--ok);background:color-mix(in srgb,var(--ok) 13%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ok) 30%,transparent)}
.wb-ok b{margin-top:14px;font-size:16px;font-weight:650;color:var(--text)}
.wb-ok p{margin:6px 0 0!important;font-size:13px;color:var(--text2)}
.wb-ok .wb-a{align-self:stretch;margin-top:22px}
@media (max-width:420px){.wb-cells{gap:6px}.wb-cell{height:54px;font-size:22px}}
/* ---- 团队 (app.js teamC): the team's mark, its views, the wallet, the limits as bars, the members, the dialogs ---- */
.tm-mk{width:var(--s);height:var(--s);border-radius:calc(var(--s)*.28);display:grid;place-items:center;flex:none;font-size:calc(var(--s)*.42);font-weight:650;color:var(--on-accent);background:linear-gradient(150deg,color-mix(in srgb,var(--accent) 82%,#fff),var(--accent));box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
/* 团队头像: the emblem or the picture as a rounded square (the emblems' own corner, 23.4% of the side) */
.tm-fc{display:block;width:var(--s);height:var(--s);flex:none;border-radius:calc(var(--s)*.234);overflow:hidden;background:var(--bg2)}
.tm-fc img{display:block;width:100%;height:100%;object-fit:cover}
.auth-inv .tm-fc{flex:none}
.tf-row{align-items:center;gap:12px}
.tf-top{display:flex;align-items:center;gap:12px;margin:4px 0 14px}
.tf-n{flex:1;min-width:0}.tf-n b{display:block;font-size:14px;font-weight:650;overflow-wrap:anywhere}.tf-n small{display:block;margin-top:2px;font-size:12px;color:var(--text3)}
.tf-ph{display:grid;place-items:center;width:56px;height:56px;flex:none;border-radius:13px;color:var(--text3);border:1px dashed var(--line3,var(--line))}
.tf-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.tf-e{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0;padding:9px 2px 7px;border-radius:12px;border:1px solid transparent;background:none;cursor:pointer;font-size:12px;color:var(--text2);transition:background .15s linear,border-color .15s linear,color .15s linear}
.tf-e:hover{background:var(--hover)}
.tf-e.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-text)}
.tf-e img{display:block;width:44px;height:44px;border-radius:10.3px}
.tf-e span{line-height:1.3}
.tm-hd{align-items:center}
.tm-id{display:flex;align-items:center;gap:12px;min-width:0}
.tm-id>div{min-width:0}
.tm-id h2{display:flex;align-items:center;flex-wrap:wrap;gap:8px;overflow-wrap:anywhere}
.tm-id p{display:flex;align-items:center;flex-wrap:wrap;gap:0 6px}
.tm-id p>span{white-space:nowrap}.tm-id p>i{font-style:normal;color:var(--text3)}
.tm-nav .seg-n{margin-left:5px;font-size:11px;color:var(--text3);font-variant-numeric:tabular-nums}
.tm-nav button.on .seg-n{color:var(--text2)}
.tm-hid{font-size:20px;font-weight:620;letter-spacing:-.01em;color:var(--text)}
.prof-b b.tm-hid{font-size:20px}
.wal-b .cr-row>b.tm-hid{font-size:24px;font-weight:650}
.pw-tag{display:inline-flex;align-items:center;gap:5px}.pw-tag .ic{width:12px;height:12px}
/* a limit: the figures, the bar, what is left */
.tm-mb{display:block;height:6px;border-radius:999px;background:var(--sunk);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.tm-mb>b{display:block;height:100%;border-radius:inherit;background:var(--accent);transition:width .4s cubic-bezier(.2,.8,.2,1)}
.warn>.tm-mb>b,.tm-m.warn .tm-mb>b{background:var(--warn)}.bad>.tm-mb>b,.tm-m.bad .tm-mb>b{background:var(--bad)}
.tm-ms2{display:grid;gap:18px}
.tm-mh{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px}
.tm-mh>span{font-size:12.5px;color:var(--text2)}
.tm-mh>b{font-size:18px;font-weight:650;letter-spacing:-.01em}.tm-mh>b small{font-size:12.5px;font-weight:500;color:var(--text3);letter-spacing:0}
.tm-ms{display:block;margin-top:6px;font-size:12px;color:var(--text3)}
.tm-m.warn .tm-ms{color:var(--warn)}.tm-m.bad .tm-ms{color:var(--bad)}
.tm-c{display:grid;gap:5px;min-width:96px;max-width:150px}
.tm-c>span{font-size:12.5px;white-space:nowrap}.tm-c>span small{display:inline;margin:0;font-size:11.5px;color:var(--text3)}
.tm-c.warn>span{color:var(--warn)}.tm-c.bad>span{color:var(--bad)}
.tm-c .tm-mb{height:4px}
/* 自付: the member's own money pays, the team's limits are not in play */
.tm-m.flat .tm-mb>b,.tm-c.flat .tm-mb>b{background:var(--line3)}
.tm-tags{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
/* a member's wallet card */
.tm-wb{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.tm-wb .cr-row>b{font-size:28px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.15}
.tm-wb .cr-row>b.warn{color:var(--warn)}.tm-wb .cr-row>b.bad{color:var(--bad)}
.tm-wb>small{font-size:12.5px;color:var(--text3)}
/* making one */
.tm-new .card-b{padding:24px 24px 22px}
.tm-nh{display:flex;align-items:flex-start;gap:14px}
.tm-ni{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;flex:none;color:var(--accent-text);background:var(--accent-soft)}
.tm-nh h2{margin:0;font-size:16px;font-weight:650}.tm-nh p{margin:4px 0 0;font-size:13px;color:var(--text2);line-height:1.6}
.tm-nf{display:flex;gap:8px;margin:20px 0 6px;max-width:460px}.tm-nf .btn{flex:none}
.tm-pts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:10px}
.tm-pts>div{padding:14px 14px 13px;border-radius:10px;border:1px solid var(--line);background:var(--bg2)}
.tm-pts .ic{color:var(--accent-text);margin-bottom:10px}
.tm-pts b{display:block;font-size:13px;font-weight:600}.tm-pts small{display:block;margin-top:2px;font-size:12px;color:var(--text3);line-height:1.55}
/* the link */
.tm-link>.callout{margin-bottom:12px}
.tm-kx{opacity:.6}
.tm-lh{margin:12px 0 0;padding-top:12px;border-top:1px solid var(--line);font-size:12px;color:var(--text3);line-height:1.65}
.link[disabled]{opacity:.45;pointer-events:none}
/* the members */
.tm-t td{vertical-align:middle}
.tm-r{cursor:pointer}
.tm-who{display:flex;align-items:center;gap:10px;min-width:0}
.tm-who b{display:flex;align-items:center;gap:6px;font-weight:600;overflow-wrap:anywhere}
.tm-who small{display:block;font-size:11.5px;color:var(--text3)}
.tm-rs{display:none}
/* a 管理员's tag: the 负责人's accent without its fill */
.tag.tm-adm{background:none}
.tm-mg .ic{display:none}
.tm-you{font-style:normal;font-size:10.5px;font-weight:600;line-height:16px;padding:0 5px;border-radius:5px;color:var(--accent-text);background:var(--accent-soft)}
.tm-sub{display:block;font-size:11.5px;color:var(--text3)}
.tm-rn{font-weight:500;color:var(--text);white-space:nowrap}
/* settings */
.tm-set{display:grid;gap:0;padding-top:4px;padding-bottom:4px}
.tm-set>.row-set{padding:14px 0;border-top:1px solid var(--line)}.tm-set>.row-set:first-child{border-top:0}
.tm-set .inrow{flex-wrap:wrap;align-items:center}
.tm-set .inrow>.inp{width:220px}
/* a sum in dollars: what it is written in, in front, inside the field */
.tm-in{display:inline-flex;align-items:center;gap:5px;width:150px;height:34px;padding-left:11px;border-radius:9px;border:1px solid var(--line2);background:var(--bg2);transition:border-color .15s,box-shadow .15s}
.tm-in:hover{border-color:var(--line3)}
.tm-in:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.tm-in>em{flex:none;font-style:normal;font-size:12.5px;color:var(--text3);white-space:nowrap}
.tm-in>.inp{flex:1;min-width:0;width:auto;height:32px;padding:0 10px 0 0;border:0;border-radius:0 9px 9px 0;background:none;box-shadow:none;font-variant-numeric:tabular-nums}
.tm-in>.inp:focus{box-shadow:none}
.tm-sw{position:relative;display:inline-flex;flex:none;cursor:pointer}
.tm-sw input{position:absolute;opacity:0;width:1px;height:1px}
.tm-sw i{width:34px;height:20px;border-radius:999px;background:var(--line3);transition:background .18s linear;position:relative}
.tm-sw i:after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.tm-sw input:checked+i{background:var(--accent)}.tm-sw input:checked+i:after{transform:translateX(14px)}
.tm-sw input:focus-visible+i{box-shadow:0 0 0 3px var(--accent-soft)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.btn.tm-danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 32%,var(--line2))}
.btn.tm-danger:hover:not(:disabled){background:color-mix(in srgb,var(--bad) 8%,transparent);border-color:color-mix(in srgb,var(--bad) 50%,transparent)}
.btn.tm-danger:disabled{opacity:.5}
/* the dialogs */
.tm-mk3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line);border-radius:10px;margin-bottom:16px}
.tm-mk3>div{padding:11px 14px;min-width:0}.tm-mk3>div+div{border-left:1px solid var(--line)}
.tm-mk3 small{display:block;font-size:11.5px;color:var(--text3)}
.tm-mk3 b{display:block;margin-top:2px;font-size:16px;font-weight:650;font-variant-numeric:tabular-nums}
.tm-mk3 em{display:block;font-style:normal;font-size:11.5px;color:var(--text3)}
.tm-lf{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.tm-lf .tm-in{width:100%}
.tm-ro{margin:0 0 14px;font-size:12.5px}
.modal .tm-ro.tm-on{margin:-2px 0 20px}
.tm-mf{display:flex;align-items:center;gap:8px;margin-top:6px;flex-wrap:wrap}
.tm-mf .grow{flex:1}
.tm-mp{margin:0 0 10px;font-size:13px;line-height:1.7;color:var(--text2)}.tm-mp b{color:var(--text)}
.tm-dl{margin:0 0 4px;font-size:13px;line-height:1.85}.tm-dl b{color:var(--text)}
.tm-jw{display:flex;align-items:center;justify-content:center;gap:8px;padding:24px 0;color:var(--text3);font-size:13px}
.tm-jh{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.tm-jh b{display:block;font-size:15px;font-weight:650;overflow-wrap:anywhere}.tm-jh small{display:block;font-size:12px;color:var(--text3)}
.rq-o .letter,.rq-o .ava{font-size:9px!important}
@media (max-width:760px){
  .tm-pts{grid-template-columns:1fr}
  .tm-t .tm-who small{display:none}.tm-t .tm-who{gap:8px}
  .tm-t .tm-who b{white-space:nowrap}.tm-rs{display:flex;gap:4px;margin-top:4px}
  .tm-t td,.tm-t th{padding-left:10px;padding-right:10px}
  .tm-mg{width:30px;padding:0;justify-content:center;border-color:transparent;background:none;color:var(--text3)}.tm-mg>span{display:none}.tm-mg .ic{display:block;transform:rotate(-90deg)}
  .tm-hd .acts{width:100%;overflow-x:auto;scrollbar-width:none}.tm-hd .acts::-webkit-scrollbar{display:none}
  .tm-set .inrow>.inp{flex:1;width:auto}.tm-set .inrow{width:100%}.tm-set .inrow>.tm-in{flex:1;min-width:120px}
  .tm-lf{grid-template-columns:1fr}
  .tm-mk3{grid-template-columns:1fr 1fr}.tm-mk3>div:nth-child(3){grid-column:1/-1;border-left:0;border-top:1px solid var(--line)}
}