/* 8pt — site styles. Motion uses transform / opacity only. */
:root{
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Inter,system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"JetBrains Mono",Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);--spring:cubic-bezier(.3,1.3,.5,1);
  --r-sm:8px;--r:12px;--r-lg:18px;--r-xl:28px;
  --nav-h:64px;--side-w:248px;
  --wrap:min(100% - 48px, 2400px);
}
[data-theme=dark]{
  color-scheme:dark;
  --bg:#0B0D17;--bg-2:#0F1220;--panel:#131726;--card:#121522;--card-2:#1A1F31;
  --fg:#F5F7FF;--muted:#98A1B8;--dim:#6F7890;
  --line:rgba(200,212,255,.085);--line-2:rgba(200,212,255,.15);
  --hover:rgba(200,212,255,.06);--shadow:0 24px 60px -30px rgba(0,0,0,.8);
  --code-bg:#0E111D;
  --accent:#6B8CFF;--accent-2:#8AA4FF;--accent-fg:#0B0D17;
  --ok:#3DD68C;--warn:#F5B83D;--err:#FF6B6B;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 16px)}
body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.55 var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
img,svg{display:block}
::selection{background:color-mix(in srgb,var(--accent) 40%,transparent)}
.wrap{width:var(--wrap);margin-inline:auto}
.mono{font-family:var(--mono)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 18px;border-radius:10px;border:1px solid transparent;background:var(--card-2);color:var(--fg);font-weight:600;font-size:14px;white-space:nowrap;cursor:pointer;transition:transform .2s var(--ease),opacity .2s,background-color .2s}
.btn:hover{background:var(--hover)}
.btn:active{transform:scale(.97)}
.btn--primary{background:var(--accent);color:var(--accent-fg)}
.btn--primary:hover{background:var(--accent);opacity:.9}
.btn--line{background:transparent;border-color:var(--line-2)}
.btn--ghost{background:transparent}
.btn--lg{height:48px;padding:0 24px;font-size:15px;border-radius:12px}
.btn--sm{height:32px;padding:0 12px;font-size:13px;border-radius:8px}
.btn svg{width:16px;height:16px}
.icon-btn{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:10px;border:0;background:transparent;color:var(--muted);cursor:pointer;transition:background-color .2s,color .2s}
.icon-btn:hover{background:var(--hover);color:var(--fg)}
.icon-btn svg{width:18px;height:18px}
kbd{display:inline-flex;align-items:center;height:20px;padding:0 6px;border-radius:5px;border:1px solid var(--line-2);font:600 11px/1 var(--mono);color:var(--muted)}
.chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--muted);font-size:13px;font-weight:500;white-space:nowrap;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.chip:hover{color:var(--fg)}
.chip.on{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.chip small{opacity:.6;font-size:12px}
.badge{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:6px;font-size:11px;font-weight:600;background:var(--hover);color:var(--muted)}
.badge--accent{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent-2)}

.badge--new{background:color-mix(in srgb,#22c55e 18%,transparent);color:#22c55e}

/* ---------- top nav ---------- */
.nav{position:sticky;top:0;z-index:50;height:var(--nav-h);background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color .3s}
.nav.scrolled{border-bottom-color:var(--line)}
.nav__in{display:flex;align-items:center;gap:8px;height:100%;width:var(--wrap);margin:auto}
.nav--app .nav__in{width:auto;padding:0 20px}
.logo{display:inline-flex;align-items:center;height:28px;margin-right:20px}
.logo i{display:block;width:76px;height:26px;background:currentColor;-webkit-mask:url(/assets/logo.svg) left center/contain no-repeat;mask:url(/assets/logo.svg) left center/contain no-repeat}
.nav__links{display:flex;align-items:center;gap:2px}
.nav__item{position:relative}
.nav__link{display:inline-flex;align-items:center;gap:4px;height:36px;padding:0 12px;border:0;border-radius:9px;background:transparent;color:var(--muted);font-size:14px;font-weight:500;cursor:pointer;transition:color .2s,background-color .2s}
.nav__link:hover,.nav__item.open .nav__link{color:var(--fg);background:var(--hover)}
.nav__link svg{width:12px;height:12px;transition:transform .25s var(--ease)}
.nav__item.open .nav__link svg{transform:rotate(180deg)}
.nav__menu{position:absolute;top:calc(100% + 8px);left:0;display:grid;grid-template-columns:repeat(2,minmax(220px,1fr));gap:4px;padding:8px;border-radius:16px;background:var(--panel);border:1px solid var(--line-2);box-shadow:var(--shadow);opacity:0;transform:translateY(-6px) scale(.98);transform-origin:top left;pointer-events:none;transition:opacity .2s,transform .25s var(--ease)}
.nav__item.open .nav__menu{opacity:1;transform:none;pointer-events:auto}
.nav__menu a{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:10px;transition:background-color .2s}
.nav__menu a:hover{background:var(--hover)}
.nav__menu a i{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:var(--card-2);color:var(--fg)}
.nav__menu a i svg{width:16px;height:16px}
.nav__menu b{display:block;font-size:14px;font-weight:600}
.nav__menu span{display:block;font-size:12.5px;color:var(--muted);line-height:1.45}
.nav__sp{flex:1}
.nav__search{display:inline-flex;align-items:center;gap:10px;height:36px;padding:0 8px 0 12px;border:0;border-radius:10px;background:transparent;color:var(--muted);font-size:14px;cursor:pointer;transition:background-color .2s,color .2s}
.nav__search:hover{background:var(--hover);color:var(--fg)}
.nav__search svg{width:16px;height:16px}
.nav__burger{display:none}

/* ---------- app layout (sidebar) ---------- */
.app{display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);min-height:calc(100vh - var(--nav-h))}
.side{position:sticky;top:var(--nav-h);align-self:start;height:calc(100vh - var(--nav-h));overflow:auto;padding:16px 12px 24px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:2px;scrollbar-width:thin}
.side__search{display:flex;align-items:center;gap:8px;height:36px;margin-bottom:10px;padding:0 10px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--dim);font-size:13.5px;cursor:pointer;width:100%;transition:border-color .2s}
.side__search:hover{border-color:var(--line-2)}
.side__search svg{width:15px;height:15px}
.side__search kbd{margin-left:auto}
.side__label{padding:16px 10px 6px;font-size:12px;font-weight:500;color:var(--dim)}
.side a{display:flex;align-items:center;gap:10px;height:36px;padding:0 10px;border-radius:9px;color:var(--muted);font-size:14px;font-weight:500;transition:background-color .2s,color .2s}
.side a:hover{background:var(--hover);color:var(--fg)}
.side a.on{background:var(--hover);color:var(--fg)}
.side a svg{width:17px;height:17px;flex:none}
.side a .badge{margin-left:auto}
.side a small{margin-left:auto;color:var(--dim);font-size:12px}
.side__foot{margin-top:auto;padding-top:16px}
.main{min-width:0;padding:28px clamp(20px,2.4vw,44px) 64px}

/* ---------- sections ---------- */
.sec{margin-top:48px}
.sec:first-child{margin-top:0}
.sec__head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px}
.sec__head h2{margin:0;font-size:18px;font-weight:650;letter-spacing:-.01em}
.sec__head p{margin:4px 0 0;color:var(--muted);font-size:13.5px}
.more{display:inline-flex;align-items:center;gap:4px;color:var(--muted);font-size:13.5px;font-weight:500;white-space:nowrap;transition:color .2s}
.more:hover{color:var(--fg)}
.more svg{width:14px;height:14px;transition:transform .2s var(--ease)}
.more:hover svg{transform:translateX(2px)}
.page-head{margin-bottom:28px}
.page-head h1{margin:0;font-size:clamp(30px,3vw,44px);line-height:1.08;letter-spacing:-.035em}
.page-head p{margin:10px 0 0;color:var(--muted);font-size:15.5px;max-width:640px}
.crumbs{display:flex;align-items:center;gap:6px;margin-bottom:20px;color:var(--dim);font-size:13px}
.crumbs a:hover{color:var(--fg)}
.crumbs svg{width:12px;height:12px}

/* ---------- grids & cards ---------- */
.grid{display:grid;gap:clamp(14px,1.2vw,22px);grid-template-columns:repeat(var(--cols,4),minmax(0,1fr))}
.grid--fixed>:nth-child(n+9){display:none}
@media(max-width:1180px){.grid{--cols:3}.grid--fixed>:nth-child(n+7){display:none}}
@media(max-width:860px){.grid{--cols:2}}
.grid--row>:nth-child(n+5){display:none!important}
@media(max-width:1180px){.grid--row>:nth-child(n+4){display:none!important}}
@media(max-width:860px){.grid--row>:nth-child(4){display:flex!important}}
@media(max-width:560px){.grid{--cols:1}}
.card{position:relative;display:flex;flex-direction:column;gap:10px;min-width:0}
.card__pv{position:relative;overflow:hidden;aspect-ratio:4/3;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--card);transition:border-color .25s,transform .35s var(--ease)}
.card:hover .card__pv{border-color:var(--line-2)}
.card__link{position:absolute;inset:0;z-index:1}
.card__meta{display:flex;align-items:center;gap:10px;min-width:0;padding:0 2px}
.card__meta b{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card__meta span{color:var(--dim);font-size:12.5px;white-space:nowrap}
.card__meta .sp{flex:1}
.card__av{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:7px;background:var(--fg);color:var(--bg);font:800 10px/1 var(--font)}
.card__save{position:absolute;right:10px;top:10px;z-index:3;opacity:0;transform:translateY(-4px);transition:opacity .2s,transform .25s var(--ease);background:color-mix(in srgb,var(--panel) 85%,transparent);backdrop-filter:blur(8px)}
.card:hover .card__save,.card__save.on{opacity:1;transform:none}
.card__save.on{color:var(--accent)}
.card__save.on svg{fill:currentColor}
/* rank */
/* rank number sits in its own column beside the card, never under it */
.rank{--nw:clamp(46px,3.7vw,76px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,1.6vw,28px) clamp(16px,1.4vw,26px)}
.rank__item{display:grid;grid-template-columns:var(--nw) minmax(0,1fr);align-items:start;min-width:0}
.rank__n{padding:.08em clamp(10px,.9vw,16px) 0 0;text-align:right;font:800 clamp(34px,2.8vw,58px)/1 var(--font);letter-spacing:-.06em;font-variant-numeric:tabular-nums;color:var(--dim);opacity:.75;user-select:none;transition:color .25s,opacity .25s}
.rank__item:hover .rank__n{color:var(--fg);opacity:1}
.rank>:nth-child(n+10){display:none}
@media(max-width:1180px){.rank{grid-template-columns:repeat(2,minmax(0,1fr))}.rank>:nth-child(n+7){display:none}}
@media(max-width:560px){.rank{grid-template-columns:1fr}.rank>:nth-child(n+6){display:none}}

/* live demo host */
.demo{--d-font:var(--font);--d-bg:var(--card);--d-fg:var(--fg);--d-muted:var(--muted);--d-line:var(--line-2);--d-card:var(--card-2);--d-accent:var(--accent);position:absolute;inset:0;display:grid;place-items:center;padding:20px;overflow:hidden;background:var(--d-bg);color:var(--d-fg);font-family:var(--font)}
.demo[data-tone=light]{--d-bg:#fafafb;--d-fg:#0c0c11;--d-muted:#5f5f6c;--d-line:rgba(12,12,20,.14);--d-card:#fff;color-scheme:light}
.demo[data-tone=dark]{--d-bg:#09090d;--d-fg:#f3f3f6;--d-muted:#9b9ba8;--d-line:rgba(255,255,255,.13);--d-card:#14141c;color-scheme:dark}
.demo--bleed{padding:0}
.demo--bleed>*{width:100%;height:100%}
.card .demo>*{max-width:100%}
.demo.paused *,.demo.paused *::before,.demo.paused *::after{animation-play-state:paused!important}
[data-fit]>.demo,[data-fit]>.skpv{inset:auto;left:0;top:0;width:340px;height:255px;transform-origin:0 0}
.final .x-dots__title{display:none}
h1,h2,h3{text-wrap:balance}
[data-fit]>.skpv{background:none}
.stagebox__pv[data-fit]{background:radial-gradient(80% 80% at 50% 40%,var(--card-2),var(--card))}

/* ---------- hero (home) ---------- */
.hero{position:relative;padding:clamp(56px,6.6vw,112px) 0 44px;text-align:center;isolation:isolate}
.hero__bg{position:absolute;inset:-64px 0 -20% 0;z-index:-1;overflow:hidden;pointer-events:none;-webkit-mask:linear-gradient(#000 55%,transparent);mask:linear-gradient(#000 55%,transparent)}
.hero__bg i{position:absolute;border-radius:50%;will-change:transform}
.hero__bg i:nth-child(1){left:42%;top:-20%;width:62vw;aspect-ratio:1;background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 55%,transparent),transparent);animation:drift-a 18s ease-in-out infinite alternate}
.hero__bg i:nth-child(2){left:-12%;top:10%;width:44vw;aspect-ratio:1;background:radial-gradient(closest-side,rgba(0,170,255,.28),transparent);animation:drift-b 22s ease-in-out infinite alternate}
.hero__bg i:nth-child(3){right:-10%;top:30%;width:36vw;aspect-ratio:1;background:radial-gradient(closest-side,rgba(70,100,255,.2),transparent);animation:drift-a 26s ease-in-out infinite alternate-reverse}

.hero__bg::after{content:"";position:absolute;inset:0;background:radial-gradient(var(--line-2) 1px,transparent 1.2px) 0 0/24px 24px;-webkit-mask:radial-gradient(70% 60% at 50% 30%,#000,transparent);mask:radial-gradient(70% 60% at 50% 30%,#000,transparent);opacity:.6}
@keyframes drift-a{to{transform:translate(-12%,10%) scale(1.12)}}
@keyframes drift-b{to{transform:translate(14%,-6%) scale(.92)}}
.hero h1{margin:0 auto;max-width:14ch;font-size:clamp(46px,7.2vw,132px);line-height:.98;letter-spacing:-.055em;font-weight:800}
.hero h1 em{font-style:normal;background:linear-gradient(90deg,var(--fg),var(--accent-2) 55%,var(--fg));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{margin:26px auto 0;max-width:52ch;text-wrap:balance;color:var(--muted);font-size:clamp(16px,1.25vw,21px)}
.hero__cta{display:flex;justify-content:center;gap:12px;margin-top:36px}

/* framed library shell */
.shell{margin-top:16px}
.shell__in{display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);border-radius:var(--r-xl);border:1px solid var(--line);background:var(--bg);overflow:hidden}
.shell .side{position:static;height:auto;border-right:1px solid var(--line)}
.shell__main{min-width:0;padding:28px clamp(18px,2vw,36px) 40px}
.shell__top{display:flex;justify-content:flex-end;gap:8px;margin:-8px 0 8px}
.cats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.cats__col{padding:18px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--card)}
.cats__col h3{margin:0 0 10px;font-size:13px;font-weight:500;color:var(--dim)}
.cats__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 16px}
.cats__list a{display:flex;align-items:center;gap:10px;height:38px;padding:0 8px;border-radius:9px;font-size:14px;font-weight:500;transition:background-color .2s}
.cats__list a:hover{background:var(--hover)}
.cats__list a svg{width:16px;height:16px;color:var(--muted)}
.cats__list a small{color:var(--dim);font-size:12px}

/* big sections (home) */
.big{margin-top:clamp(96px,9vw,160px)}
.big__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:32px}
.big__head h2{margin:0;font-size:clamp(32px,3.6vw,60px);line-height:1.02;letter-spacing:-.045em;font-weight:800}
.big__head p{margin:12px 0 0;max-width:46ch;color:var(--muted);font-size:16px}

/* ---------- home: framed library screen + scripted Mac demo (design 1280×900, scaled by home.js) ---------- */
.dv{position:relative;width:min(100% - 48px,1760px);margin:clamp(48px,4.4vw,80px) auto 0;text-align:left}
.dv__fit{position:relative;height:calc(min(100vw - 48px,1760px) * .703)}
.dv__stage{position:absolute;left:0;top:0;width:1280px;height:900px;transform-origin:0 0;font-size:14px;line-height:1.45}
.dv__bezel{position:absolute;inset:0;border-radius:52px;background:linear-gradient(180deg,rgba(28,32,48,.92),rgba(12,13,20,.96));border:1px solid rgba(200,212,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 80px 160px -60px color-mix(in srgb,var(--accent) 55%,transparent),0 40px 90px -40px rgba(0,0,0,.85)}
.dv__bezel::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,0) 40%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.dv__screen{position:absolute;left:40px;top:40px;width:1200px;height:820px;border-radius:24px;overflow:hidden;background:var(--bg);border:1px solid var(--line-2);display:grid;grid-template-columns:232px minmax(0,1fr);isolation:isolate}

/* sidebar */
.lx-side{display:flex;flex-direction:column;gap:2px;padding:18px 12px 14px;border-right:1px solid var(--line)}
.lx-side .logo{height:30px;margin:2px 8px 14px}
.lx-side .logo i{width:66px;height:24px}
.lx-search{display:flex;align-items:center;gap:8px;height:34px;margin-bottom:10px;padding:0 10px;border-radius:9px;border:1px solid var(--line);background:var(--card);color:var(--dim);font-size:13px}
.lx-search svg{width:14px;height:14px}.lx-search kbd{margin-left:auto;font:11px var(--font);color:var(--dim)}
.lx-side small{padding:14px 10px 6px;color:var(--dim);font-size:12px}
.lx-si{display:flex;align-items:center;gap:10px;height:34px;padding:0 10px;border-radius:9px;color:var(--muted);font-size:13.5px;font-weight:500}
.lx-si.on{background:var(--hover);color:var(--fg)}
.lx-si>svg{width:16px;height:16px;flex:none}
.lx-si em{margin-left:auto;display:grid;color:var(--dim)}.lx-si em svg{width:14px;height:14px}
.lx-new{margin-left:2px;padding:1px 6px;border-radius:6px;background:var(--hover);color:var(--muted);font-size:10.5px;font-weight:600}
.lx-side__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;padding:0 6px}
.lx-side__foot a{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:13.5px;font-weight:500}
.lx-side__foot svg{width:18px;height:18px}
/* main */
.lx-main{position:relative;min-width:0;overflow:hidden}
.lx-topbar{position:absolute;right:22px;top:16px;z-index:2;display:flex;align-items:center;gap:16px;color:var(--muted)}
.lx-topbar svg{width:18px;height:18px}
.lx-av{width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#c9d6ff,var(--accent) 55%,#2a3b9c)}
.lx-scroll{position:absolute;inset:0;overflow:hidden;-webkit-mask:linear-gradient(transparent,#000 56px);mask:linear-gradient(transparent,#000 56px)}
.lx-content{padding:34px 34px 60px;will-change:transform}
.lx-content section+section{margin-top:34px}
.lx-h{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:16px}
.lx-h h3{margin:0;font-size:17px;font-weight:650;letter-spacing:-.01em}
.lx-h p{margin:3px 0 0;color:var(--muted);font-size:12.5px}
.lx-h a{display:flex;align-items:center;gap:2px;color:var(--muted);font-size:12.5px}
.lx-h a svg{width:13px;height:13px}
.lx-rank{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.lx-rank__i{position:relative;padding-left:58px}
.lx-rank__n{position:absolute;left:-4px;top:50%;transform:translateY(-52%);font:800 168px/1 var(--font);letter-spacing:-.08em;color:var(--fg);opacity:.09;user-select:none}
.lx-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.lx-card .card__pv{border-radius:14px;transition:border-color .25s,transform .35s var(--ease),box-shadow .35s}
.lx-card.is-hov .card__pv{border-color:var(--line-2);transform:translateY(-2px);box-shadow:0 18px 40px -22px rgba(0,0,0,.8)}
.lx-save{position:absolute;right:8px;top:8px;z-index:3;display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:color-mix(in srgb,var(--panel) 85%,transparent);color:var(--muted);opacity:0;transform:translateY(-3px);transition:opacity .2s,transform .25s var(--ease)}
.lx-save svg{width:14px;height:14px}
.lx-card.is-hov .lx-save{opacity:1;transform:none}
.lx-cats{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.lx-cats small{display:block;margin-bottom:6px;color:var(--dim);font-size:12px}
.lx-cats>div>div{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.lx-cats a{display:flex;align-items:center;gap:10px;height:34px;font-size:13.5px;font-weight:500}
.lx-cats a svg{width:16px;height:16px;color:var(--muted)}
.lx-cats a small{display:inline;margin:0;color:var(--dim)}
/* modal + toast inside the screen */
.lx-modal{position:absolute;inset:0;z-index:5;display:grid;place-items:center;background:rgba(4,5,10,.55);opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
.dv.is-modal .lx-modal{opacity:1;visibility:visible;transition:opacity .3s}
.lx-modal__p{width:780px;border-radius:18px;border:1px solid var(--line-2);background:var(--panel);box-shadow:0 40px 90px -30px rgba(0,0,0,.9);overflow:hidden;transform:translateY(14px) scale(.97);transition:transform .45s var(--ease)}
.dv.is-modal .lx-modal__p{transform:none}
.lx-modal header{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line)}
.lx-modal header .card__av{width:28px;height:28px;border-radius:50%}
.lx-modal header b{display:block;font-size:14.5px}.lx-modal header small{color:var(--dim);font-size:12px}
.lx-modal header .sp{flex:1}
.lx-copy{position:relative;gap:6px;transition:transform .15s,background-color .2s}
.lx-copy svg{width:14px;height:14px}.lx-copy i{display:grid}
.lx-copy .b{display:none}.lx-copy.is-done .a{display:none}.lx-copy.is-done .b{display:inline;display:grid}
.lx-copy.is-done span.b{display:inline}
.lx-copy.is-press{transform:scale(.95)}
.lx-x{display:grid;place-items:center;width:30px;height:30px;color:var(--muted)}.lx-x svg{width:16px;height:16px}
.lx-modal__pv{position:relative;height:440px}
.lx-toast{position:absolute;left:50%;bottom:118px;z-index:6;display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:12px;background:var(--fg);color:var(--bg);font-size:13.5px;font-weight:600;box-shadow:0 18px 40px -16px rgba(0,0,0,.7);opacity:0;transform:translate(-50%,10px);transition:opacity .3s,transform .35s var(--ease)}
.lx-toast svg{width:15px;height:15px}
.lx-toast.on{opacity:1;transform:translate(-50%,0)}
/* mac windows (always dark, like the apps) */
.mw{position:absolute;left:-14px;top:300px;z-index:8;width:770px;height:520px;display:flex;flex-direction:column;border-radius:14px;background:#1d1d21;color:#ececf1;border:1px solid rgba(255,255,255,.12);box-shadow:0 0 0 .5px rgba(0,0,0,.8),0 50px 100px -30px rgba(0,0,0,.9),0 20px 40px -20px rgba(0,0,0,.6);font-size:13px;overflow:hidden;opacity:0;visibility:hidden;transform-origin:var(--ox,50%) var(--oy,120%);transform:translateY(24px) scale(.9);transition:opacity .35s,transform .5s cubic-bezier(.2,.9,.25,1),visibility 0s .5s}
.mw.open{opacity:1;visibility:visible;transform:none;transition:opacity .3s,transform .5s cubic-bezier(.2,.9,.25,1)}
.mw.min{opacity:0;transform:translate(var(--mx,0),var(--my,280px)) scale(.08);transition:opacity .45s .1s,transform .55s cubic-bezier(.6,0,.8,.4)}
.mw svg{width:15px;height:15px}
.mw__bar{flex:none;display:flex;align-items:center;gap:10px;height:40px;padding:0 12px;border-bottom:1px solid rgba(255,255,255,.07);color:#9b9ba6}
.tl{display:flex;gap:8px;margin-right:6px}.tl i{width:12px;height:12px;border-radius:50%;background:#ff5f57}.tl i:nth-child(2){background:#febc2e}.tl i:nth-child(3){background:#28c840}
.tl.is-press i:first-child{filter:brightness(.75)}
.mw__i{display:grid;place-items:center;color:#9b9ba6}.mw__i.dim{opacity:.4}
.mw__seg{display:flex;gap:2px;margin-left:56px;padding:2px;border-radius:7px;background:rgba(255,255,255,.06)}
.mw__seg i{display:grid;place-items:center;width:26px;height:22px;border-radius:5px}.mw__seg i.on{background:rgba(255,255,255,.12);color:#fff}
.mw__seg svg{width:13px;height:13px}
.mw__t{margin-left:24px;color:#e6e6ec;font-weight:500;font-size:13px}
.mw__t .b{display:none}.mw.chat .mw__t .a{display:none}.mw.chat .mw__t .b{display:inline}
.mw .sp{flex:1}
.mw__link{color:#8cb4ff;font-size:12.5px}
.mw__body{flex:1;min-height:0;display:flex}
/* claude window */
.cc-side{flex:none;width:186px;display:flex;flex-direction:column;gap:1px;padding:10px 8px;border-right:1px solid rgba(255,255,255,.07);background:#18181b;font-size:12.5px;color:#d6d6dd}
.cc-search{display:flex;align-items:center;gap:6px;height:26px;margin-bottom:8px;padding:0 8px;border-radius:7px;background:rgba(255,255,255,.05);color:#85858f;font-size:12px}
.cc-search svg{width:12px;height:12px}
.cc-n{display:flex;align-items:center;gap:8px;height:26px;padding:0 8px;border-radius:7px}
.cc-n.on{background:rgba(255,255,255,.08)}
.cc-n svg{width:13px;height:13px;color:#9b9ba6}
.cc-n em{margin-left:4px;padding:0 5px;border-radius:4px;background:rgba(255,255,255,.1);font:500 10px/16px var(--font);font-style:normal;color:#b6b6c0}
.cc-side small{padding:12px 8px 4px;color:#7d7d88;font-size:11.5px}
.cc-s{display:flex;align-items:center;height:24px;padding:0 8px;border-radius:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-s.dim{color:#7d7d88}
.cc-s.on{background:rgba(255,255,255,.08)}
.cc-s.on i{margin-left:auto;width:6px;height:6px;border-radius:50%;background:#e8875a;box-shadow:0 0 0 3px rgba(232,135,90,.18)}
.cc-work{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .4s var(--ease),opacity .3s}
.cc-work>*{min-height:0;overflow:hidden}
.mw.chat .cc-work{grid-template-rows:auto auto;opacity:1}
.mw.done .cc-s.on i{background:#4ade80;box-shadow:none}
.cc-main{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;padding:16px 18px 12px}
.cc-new{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;transition:opacity .3s}
.mw.chat .cc-new{display:none}
.cc-pick{width:196px;padding:5px;border-radius:9px;border:1px solid rgba(255,255,255,.1);background:#222227;font-size:12px}
.cc-pick span{display:flex;align-items:center;gap:7px;padding:5px 6px;border-radius:6px;color:#dcdce3}
.cc-pick span.on{background:rgba(255,255,255,.06)}
.cc-pick span svg{width:13px;height:13px;color:#9b9ba6}
.cc-pick span.on svg:last-child{margin-left:auto;color:#dcdce3}
.cc-pick span.dim{color:#85858f;border-top:1px solid rgba(255,255,255,.07);border-radius:0;margin-top:3px;padding-top:8px}
.cc-chat{display:none;flex:1;min-height:0;flex-direction:column;gap:10px;overflow:hidden}
.mw.chat .cc-chat{display:flex}
.cc-msg{align-self:flex-start;max-width:400px;padding:10px 12px;border-radius:10px;background:#2a2a30;font-size:12.5px;line-height:1.55;animation:mwin .45s var(--ease)}
.cc-paste{position:relative;margin-top:6px;max-height:84px;overflow:hidden;color:#b9b9c3}
.cc-paste .fade{position:absolute;left:0;right:0;bottom:0;height:34px;background:linear-gradient(transparent,#2a2a30)}
.cc-msg .more{display:inline-block;margin-top:4px;color:#8d8d98;font-size:11.5px}
.cc-tool,.cc-todo,.cc-run,.cc-done{opacity:0;transform:translateY(6px);transition:opacity .35s,transform .4s var(--ease)}
.cc-tool.on,.cc-todo.on,.cc-run.on,.cc-done.on{opacity:1;transform:none}
.cc-tool{display:flex;align-items:center;gap:8px;font:12px var(--mono);color:#b3b3bd}
.cc-tool b{color:#c9c1ff;font-weight:600}
.cc-tool span{margin-left:auto;color:#7d7d88;font-family:var(--font)}
.cc-tool .ok{display:none;color:#4ade80}.cc-tool.ok .spin{display:none}.cc-tool.ok .ok{display:grid}
.cc-tool .ok svg{width:13px;height:13px}
i.spin{width:12px;height:12px;flex:none;border-radius:50%;border:2px solid rgba(255,255,255,.18);border-top-color:#e8e8ee;animation:tspin .75s linear infinite}
@keyframes tspin{to{transform:rotate(1turn)}}
.cc-todo{display:grid;gap:2px;padding:8px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.09)}
.cc-todo>div{display:flex;align-items:center;gap:9px;height:24px;color:#8d8d98;font-size:12.5px;transition:color .3s}
.cc-todo i{position:relative;width:14px;height:14px;flex:none;border-radius:50%;border:1.5px solid rgba(255,255,255,.25);transition:background-color .25s,border-color .25s}
.cc-todo .run{color:#ececf1}.cc-todo .run i{border-color:rgba(255,255,255,.18);border-top-color:#ececf1;animation:tspin .75s linear infinite}
.cc-todo .ok{color:#ececf1}.cc-todo .ok i{background:#ececf1;border-color:#ececf1}
.cc-todo .ok i::after{content:"";position:absolute;left:4px;top:1.5px;width:3px;height:6px;border:solid #1d1d21;border-width:0 1.6px 1.6px 0;transform:rotate(45deg)}
.mw.done .cc-run{display:none}
.cc-run{display:flex;align-items:center;gap:7px;color:#e8875a;font-size:12px}
.cc-run span{color:#a3a3ad}.cc-run b{font-weight:500;color:#a3a3ad;font-variant-numeric:tabular-nums}
.cc-run svg{width:14px;height:14px;animation:tspin 2.4s linear infinite}
.cc-done{font-size:12.5px;line-height:1.6;color:#dcdce3}
.cc-done code{font:12px var(--mono);color:#c9c1ff}
.cc-files{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.cc-files span{padding:2px 8px;border-radius:6px;background:rgba(255,255,255,.06);font:11px var(--mono);color:#b3b3bd}
.cc-files b{color:#4ade80;font-weight:500}.cc-files s{color:#f87171;text-decoration:none}
.cc-comp{flex:none;margin-top:10px}
.cc-in{display:flex;align-items:center;gap:8px;height:38px;padding:0 10px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:#25252a;color:#9b9ba6;font-size:12.5px;transition:border-color .2s}
.cc-in.focus{border-color:rgba(255,255,255,.28)}
.cc-in .ph{color:#7d7d88;white-space:nowrap}.cc-in .ph.b{display:none}
.mw.chat .cc-in .ph.a{display:none}.mw.chat .cc-in .ph.b{display:inline}
.cc-in.has .ph{display:none!important}
.ty{color:#ececf1;white-space:nowrap}
.caret{display:none;width:1.5px;height:15px;background:#ececf1;animation:blink 1s steps(1) infinite}
.focus>.caret{display:inline-block}
.dv .chip{display:none;padding:1px 8px;border-radius:6px;background:rgba(201,193,255,.14);color:#c9c1ff;font-size:12px;white-space:nowrap;animation:mwin .3s var(--ease)}
.dv .chip.on{display:inline-block}
.cc-meta{display:flex;align-items:center;gap:10px;height:26px;padding:0 4px;color:#85858f;font-size:11.5px}
.cc-meta svg{width:13px;height:13px}.cc-meta .dim{color:#6a6a75;margin-left:-4px}
.cc-meta .ring{width:12px;height:12px;border-radius:50%;border:1.5px solid rgba(140,180,255,.35);border-top-color:#8cb4ff}
.mw.busy .cc-meta .ring{animation:tspin .9s linear infinite}
@keyframes mwin{from{opacity:0;transform:translateY(8px)}}
@keyframes blink{50%{opacity:0}}
/* localhost preview window */
.pw{position:absolute;left:700px;top:118px;z-index:9;width:500px;height:360px;display:flex;flex-direction:column;border-radius:12px;background:#f4f5f8;border:1px solid rgba(255,255,255,.2);box-shadow:0 40px 90px -30px rgba(0,0,0,.9);overflow:hidden;opacity:0;visibility:hidden;transform:translateY(16px) scale(.94);transition:opacity .3s,transform .5s cubic-bezier(.2,.9,.25,1),visibility 0s .5s}
.pw.open{opacity:1;visibility:visible;transform:none;transition:opacity .3s,transform .5s cubic-bezier(.2,.9,.25,1)}
.pw.min{opacity:0;transform:translate(-150px,420px) scale(.08);transition:opacity .45s .1s,transform .55s cubic-bezier(.6,0,.8,.4)}
.pw__bar{display:flex;align-items:center;gap:10px;height:34px;padding:0 12px;background:#e6e8ee;border-bottom:1px solid #d9dce5}
.pw__bar .tl i{width:10px;height:10px}
.pw__url{flex:1;max-width:260px;margin:0 auto;padding:3px 10px;border-radius:7px;background:#fff;color:#62687a;font-size:11.5px;text-align:center}
.pw__body{flex:1;display:flex;flex-direction:column;background:#0b0d17}
.pw__nav{display:flex;align-items:center;gap:16px;height:36px;padding:0 16px;border-bottom:1px solid rgba(255,255,255,.08);color:#9aa2b8;font-size:11.5px}
.pw__nav b{color:#fff;font-size:13px;margin-right:8px}.pw__nav i{margin-left:auto;width:58px;height:20px;border-radius:6px;background:#6B8CFF}
.pw__pv{position:relative;flex:1}
/* codex window */
.mw--cx{background:#202024}
.cx-rail{flex:none;width:44px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 0;border-right:1px solid rgba(255,255,255,.07);color:#8d8d98}
.cx-rail span{display:grid;place-items:center;width:28px;height:28px;border-radius:7px}
.cx-rail span.on{background:rgba(255,255,255,.08);color:#fff}
.cx-rail hr{width:18px;border:0;border-top:1px solid rgba(255,255,255,.1);margin:4px 0}
.cx-side{flex:none;width:176px;display:flex;flex-direction:column;gap:1px;padding:12px 8px;border-right:1px solid rgba(255,255,255,.07);font-size:12.5px;color:#d6d6dd}
.cx-side>b{display:flex;align-items:center;gap:4px;padding:0 6px 8px;font-size:14px}
.cx-side>b em{font-style:normal;color:#85858f;font-size:11px}
.cx-side>b span{margin-left:auto;display:flex;gap:8px;color:#85858f}.cx-side>b svg{width:13px;height:13px}
.cx-side small{padding:12px 8px 4px;color:#7d7d88;font-size:11.5px}
.cx-n,.cx-s{display:flex;align-items:center;gap:8px;height:25px;padding:0 8px;border-radius:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cx-n svg{width:13px;height:13px;color:#9b9ba6;flex:none}
.cx-n.on{background:rgba(255,255,255,.08)}
.cx-s{padding-left:28px;color:#b3b3bd}
.cx-task{display:none}.mw.chat .cx-task{display:flex;color:#ececf1}
.cx-task i{margin-left:auto;width:10px;height:10px;flex:none;border-radius:50%;border:1.6px solid rgba(255,255,255,.2);border-top-color:#ececf1;animation:tspin .75s linear infinite}
.mw.done .cx-task i{animation:none;border:0;width:6px;height:6px;background:#4ade80}
.cx-main{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;padding:16px 22px 14px}
.cx-new{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.cx-new i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.2);color:#c9c9d2}
.cx-new h4{margin:0;font-size:19px;font-weight:500;color:#f0f0f4}
.cx-new u{text-decoration:underline dotted rgba(255,255,255,.4);text-underline-offset:4px}
.mw.chat .cx-new{display:none}
.cx-chat{display:none;flex:1;min-height:0;flex-direction:column;gap:9px;overflow:hidden}
.mw.chat .cx-chat{display:flex}
.cx-msg{align-self:flex-end;padding:8px 12px;border-radius:12px;background:#2e2e34;font-size:12.5px;animation:mwin .45s var(--ease)}
.cx-msg .chip{display:inline-block;margin-left:4px}
.cx-work{display:flex;align-items:center;gap:8px;color:#a3a3ad;font-size:12.5px}
.cx-work b{font-weight:500;font-variant-numeric:tabular-nums;color:#ececf1}
.mw.done .cx-work i.spin{display:none}
.cx-step{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#dcdce3;opacity:0;transform:translateY(6px);transition:opacity .35s,transform .4s var(--ease)}
.cx-step svg{width:13px;height:13px;color:#4ade80}
.cx-step code{font:12px var(--mono);color:#b9b9c3}
.cx-diff{border-radius:10px;border:1px solid rgba(255,255,255,.1);background:#19191c;overflow:hidden;opacity:0;transform:translateY(6px);transition:opacity .35s,transform .4s var(--ease)}
.cx-step.on,.cx-diff.on{opacity:1;transform:none}
.cx-diff header,.cx-diff footer{display:flex;align-items:center;gap:10px;height:32px;padding:0 12px;font-size:12px}
.cx-diff header{border-bottom:1px solid rgba(255,255,255,.07)}
.cx-diff header span{margin-left:auto;font:12px var(--mono)}.cx-diff em{font-style:normal;color:#4ade80}.cx-diff s{text-decoration:none;color:#f87171}
.cx-diff pre{margin:0;padding:8px 12px;font:11.5px/1.7 var(--mono);color:#b9b9c3}
.cx-diff pre span{display:block}.cx-diff pre .a{color:#86efac}.cx-diff pre .d{color:#fca5a5}
.cx-diff footer{border-top:1px solid rgba(255,255,255,.07);color:#85858f}
.cx-pr{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 12px;border-radius:999px;background:#f2f2f5;color:#111;font-weight:600;font-size:12px;transition:transform .15s}
.cx-pr .b{display:none}.cx-pr.is-done .a{display:none}.cx-pr.is-done .b{display:inline-flex;align-items:center;gap:5px}
.cx-pr svg{width:12px;height:12px}.cx-pr.is-press{transform:scale(.94)}
.cx-comp{flex:none;margin-top:10px;border-radius:14px;border:1px solid rgba(255,255,255,.1);background:#2a2a2f;overflow:hidden}
.cx-chips{display:flex;align-items:center;gap:14px;height:30px;padding:0 12px;background:#242428;color:#b3b3bd;font-size:12px}
.cx-chips span{display:flex;align-items:center;gap:6px}.cx-chips svg{width:13px;height:13px}
.cx-in{display:flex;align-items:center;gap:6px;height:40px;padding:0 14px;font-size:13px}
.cx-in .ph{color:#7d7d88}.cx-in.has .ph{display:none}
.cx-bot{display:flex;align-items:center;gap:12px;height:36px;padding:0 10px 0 12px;color:#9b9ba6;font-size:12px}
.cx-bot span{display:flex;align-items:center;gap:5px}.cx-bot .dim{color:#6a6a75}
.cx-bot .warn{color:#f59e5b}.cx-bot svg{width:13px;height:13px}
.cx-send{display:grid!important;place-items:center;width:24px;height:24px;border-radius:50%;background:#f2f2f5;color:#111!important;transition:transform .15s}
.cx-send.is-press,[data-x=cc-send].is-press{transform:scale(.88)}
/* dock */
.dock2{position:absolute;left:50%;top:828px;z-index:12;display:flex;align-items:flex-end;gap:9px;height:66px;padding:0 10px 9px;border-radius:19px;background:rgba(30,32,44,.55);border:1px solid rgba(255,255,255,.14);box-shadow:0 20px 50px -20px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.08);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);transform:translate(-50%,40px);opacity:0;transition:transform .6s cubic-bezier(.2,1.25,.3,1),opacity .35s}
.dock2.up{transform:translate(-50%,0);opacity:1}
.dk{position:relative;display:block;width:48px;height:48px;transform-origin:50% 100%;transition:transform .28s cubic-bezier(.2,.9,.3,1.2)}
.dk svg{width:100%;height:100%;filter:drop-shadow(0 4px 8px rgba(0,0,0,.35))}
.dk.near{transform:scale(1.12)}
.dk.hov{transform:translateY(-6px) scale(1.3)}
.dk.bounce{animation:dkb .9s cubic-bezier(.3,.6,.4,1)}
@keyframes dkb{0%,100%{transform:translateY(-6px) scale(1.3)}30%{transform:translateY(-24px) scale(1.3)}60%{transform:translateY(-4px) scale(1.3)}}
.dk b{position:absolute;left:50%;bottom:calc(100% + 12px);padding:3px 9px;border-radius:7px;background:rgba(40,40,46,.92);border:1px solid rgba(255,255,255,.14);color:#f2f2f5;font-size:11px;font-weight:500;white-space:nowrap;opacity:0;transform:translate(-50%,4px) scale(.77);transition:opacity .2s,transform .2s}
.dk.hov b{opacity:1;transform:translate(-50%,0) scale(.77)}
.dk i{position:absolute;left:50%;bottom:-7px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:rgba(255,255,255,.8);opacity:0;transition:opacity .3s}
.dk.run i{opacity:1}
/* cursor */
.dv__cur{position:absolute;left:0;top:0;z-index:20;width:26px;height:26px;margin:-3px 0 0 -5px;pointer-events:none;will-change:transform;opacity:0;transition:opacity .4s}
.dv__cur.on{opacity:1}
.dv__cur svg{width:100%;height:100%;transition:transform .12s;transform-origin:20% 15%}
.dv__cur.down svg{transform:scale(.82)}
/* reduced motion: static frame, no transitions */
.dv.static *{transition:none!important;animation:none!important}

/* bento extras (themes + icons) */
.thm{display:grid;grid-template-columns:1.25fr .9fr;gap:14px;padding:18px;align-items:stretch}
.thm__card{display:flex;flex-direction:column;gap:4px;padding:16px;border-radius:14px;border:1px solid var(--tl,var(--line));background:var(--tc,var(--card-2));color:var(--tf,var(--fg));transition:background-color .6s,color .6s,border-color .6s}
.thm__card small{color:var(--tm,var(--muted));font-size:12px;transition:color .6s}
.thm__card b{font-size:26px;letter-spacing:-.02em}
.thm__card span{color:var(--tm,var(--muted));font-size:12px;transition:color .6s}
.thm__bars{flex:1;display:flex;align-items:flex-end;gap:8px;margin-top:12px;min-height:80px}
.thm__bars i{flex:1;height:var(--h);border-radius:4px;background:var(--ta,var(--accent));transition:background-color .6s}
.thm__sw{display:grid;gap:6px;align-content:center}
.thc{display:flex;align-items:center;gap:8px;height:30px;padding:0 10px;border-radius:9px;border:1px solid var(--line);font-size:12.5px;color:var(--muted);transition:border-color .3s,background-color .3s,color .3s}
.thc b{font-weight:500}
.thc i{margin-left:auto;width:36px;height:12px;border-radius:4px;background:linear-gradient(90deg,var(--b) 0 50%,var(--a) 50%);border:1px solid var(--l)}
.thc.on{border-color:var(--line-2);background:var(--hover);color:var(--fg)}
.icn{display:flex;flex-direction:column;gap:12px;padding:16px}
.icn__q{display:flex;align-items:center;gap:8px;height:34px;padding:0 10px;border-radius:9px;border:1px solid var(--line);background:var(--bg-2);color:var(--muted);font-size:13px}
.icn__q svg{width:14px;height:14px}
.icn__g{flex:1;display:grid;grid-template-columns:repeat(6,1fr);gap:6px;align-content:center;color:var(--muted)}
.icn__g span{display:grid;place-items:center;aspect-ratio:1;border-radius:9px}
.icn__g span:nth-child(3n+1){color:var(--fg)}
.icn__g svg{width:20px;height:20px}
@media(max-width:1180px){.thm{grid-template-columns:1fr}.thm__sw{display:none}}

/* bento */
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(12px,1.2vw,20px)}
.bento>*{position:relative;display:flex;flex-direction:column;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--card);overflow:hidden;transition:border-color .25s}
.bento>*:hover{border-color:var(--line-2)}
.bento .b-lg{grid-column:span 4}.bento .b-md{grid-column:span 2}.bento .b-third{grid-column:span 2}
.bento__pv{position:relative;flex:1;min-height:240px;border-bottom:1px solid var(--line);overflow:hidden}
.bento__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:16px 18px}
.bento__foot b{display:block;font-size:15px;font-weight:650}
.bento__foot>div span{display:block;color:var(--muted);font-size:13px}

/* frames for templates */
.tframe{position:absolute;inset:0;overflow:hidden;background:var(--card-2)}
.tframe iframe{position:absolute;left:0;top:0;width:1440px;height:900px;border:0;transform-origin:0 0;transform:translate(var(--x,0px),var(--y,0px)) scale(var(--s,.25));pointer-events:none;background:#fff}

/* delivery panels */
.ship{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.2vw,20px)}
.ship__p{position:relative;display:flex;flex-direction:column;border-radius:var(--r-lg);overflow:hidden;color:#fff;isolation:isolate}
.ship__p::before{content:"";position:absolute;inset:0;z-index:-1}
.ship__p--a::before{background:linear-gradient(180deg,#e2875f,#c4572b)}
.ship__p--b::before{background:radial-gradient(90% 70% at 60% 0%,#c8c6ff,#5b5ff0 55%,#2a2db3)}
.ship__p--c::before{background:radial-gradient(90% 70% at 40% 0%,#c9f5e5,#23b48a 55%,#0b6b50)}
.ship__stage{position:relative;height:clamp(260px,19vw,380px);display:flex;align-items:flex-end;justify-content:center;padding:0 clamp(16px,1.6vw,28px);overflow:hidden}
.ship__mock{width:100%;margin-bottom:-14px;border-radius:14px 14px 0 0;background:rgba(14,14,20,.86);border:1px solid rgba(255,255,255,.14);border-bottom:0;backdrop-filter:blur(8px);padding:16px 18px 26px;font:12.5px/1.8 var(--mono);color:#e8e8ee;box-shadow:0 -20px 50px -20px rgba(0,0,0,.45);transform:translateY(18px);transition:transform .7s var(--ease)}
.ship__p:hover .ship__mock{transform:translateY(6px)}
.ship__mock--light{background:rgba(255,255,255,.96);color:#1a1a22;font-family:var(--font)}
.ship__mock--light .t{font-weight:650;font-size:14px}
.ship__mock--light .dim2{display:flex;align-items:center;gap:6px;color:#6b7080;font-size:12px}
.ship__mock--light .dim2 svg{width:13px;height:13px}
.ship__mock--light .row,.ship__mock--light .add,.ship__mock--light .del{font-family:var(--mono);font-size:12px}
.ship__mock--light .add{color:#15803d}.ship__mock--light .del{color:#b91c1c}
.ship__mock .ok{color:#4ade80}.ship__mock .dim{color:#8d8d99}.ship__mock .add{color:#4ade80}.ship__mock .del{color:#f87171}
.ship__mock .row{display:flex;justify-content:space-between;gap:10px;margin-top:8px;padding-top:8px;border-top:1px solid rgba(0,0,0,.08)}
.ship__mock .pill{display:inline-block;margin-top:8px;padding:4px 10px;border-radius:999px;background:#fff;color:#000;font:600 12px/1.4 var(--font)}
.ship__mock .cur{display:inline-block;width:7px;height:14px;margin-left:4px;vertical-align:-2px;background:#e8e8ee;animation:blink 1s steps(1) infinite}
.ship__txt{position:relative;padding:20px 24px 24px;background:rgba(0,0,0,.14);border-top:1px solid rgba(255,255,255,.14)}
.ship__txt b{display:flex;align-items:center;gap:10px;font-size:17px}
.ship__txt .ap{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;overflow:hidden;font:800 12px/1 var(--font);font-style:normal}
.ship__txt .ap svg{width:100%;height:100%}
.ship__txt .ap--tr{background:#0f1512;color:#3fe0a6;border:1px solid rgba(255,255,255,.2)}
.ship__txt p{margin:8px 0 0;color:rgba(255,255,255,.82);font-size:14px}
.ship+.duo{margin-top:clamp(12px,1.2vw,20px)}

/* duo: code + save */
.duo{display:grid;grid-template-columns:1.25fr 1fr;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--card);overflow:hidden}
.duo>*{padding:clamp(20px,2.2vw,36px);display:flex;flex-direction:column;gap:20px}
.duo>*+*{border-left:1px solid var(--line)}
.duo h3{margin:0;font-size:18px;letter-spacing:-.01em}
.duo p{margin:6px 0 0;color:var(--muted);font-size:14px;max-width:48ch}
.codebox{border-radius:14px;border:1px solid var(--line);background:var(--code-bg);overflow:hidden}
.codebox__bar{display:flex;align-items:center;gap:6px;height:42px;padding:0 8px;border-bottom:1px solid var(--line)}
.codebox__bar .file{margin-left:8px;color:var(--muted);font:12.5px var(--mono)}
.codebox__bar .sp{flex:1}
.seg{position:relative;display:inline-flex;padding:3px;border-radius:10px;background:var(--hover)}
.seg button{position:relative;z-index:1;height:28px;padding:0 12px;border:0;border-radius:7px;background:transparent;color:var(--muted);font-size:13px;font-weight:600;cursor:pointer;transition:color .2s}
.seg button.on{color:var(--fg)}
.seg button{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.seg button svg{width:15px;height:15px;flex:none}
.seg__thumb{position:absolute;top:3px;left:0;height:28px;width:10px;border-radius:7px;background:var(--panel);box-shadow:0 1px 3px rgba(0,0,0,.2);transform-origin:left;transition:transform .35s var(--ease)}
pre.code{margin:0;padding:16px 18px;overflow:auto;font:12.75px/1.7 var(--mono);color:var(--fg);tab-size:2;max-height:520px;scrollbar-width:thin}
pre.code .ln{display:inline-block;width:2.4em;color:var(--dim);user-select:none}
.tk-k{color:#c792ea}.tk-s{color:#9ece6a}.tk-c{color:var(--dim);font-style:italic}.tk-n{color:#ff9e64}.tk-t{color:#7aa2f7}.tk-a{color:#e0af68}

.code-pv{position:relative;height:280px;border-radius:14px;border:1px solid var(--line);overflow:hidden}
.lists{position:relative;flex:1;min-height:280px;display:grid;place-items:center;border-radius:14px;border:1px solid var(--line);background:var(--bg-2)}
.lists__pop{width:min(280px,90%);padding:8px;border-radius:14px;background:var(--panel);border:1px solid var(--line-2);box-shadow:var(--shadow)}
.lists__pop header{display:flex;align-items:center;gap:8px;padding:8px 8px 10px;font-size:13px;color:var(--muted);border-bottom:1px solid var(--line);margin-bottom:6px}
.lists__pop header svg{width:15px;height:15px}
.lists__row{display:flex;align-items:center;gap:10px;width:100%;height:38px;padding:0 8px;border:0;border-radius:9px;background:transparent;font-size:14px;cursor:pointer;text-align:left;transition:background-color .2s}
.lists__row:hover{background:var(--hover)}
.lists__row i{display:grid;place-items:center;width:18px;height:18px;border-radius:5px;border:1.5px solid var(--line-2);transition:background-color .2s,border-color .2s}
.lists__row i svg{width:12px;height:12px;opacity:0;transform:scale(.5);transition:opacity .2s,transform .25s var(--spring)}
.lists__row.on i{background:var(--accent);border-color:var(--accent);color:#fff}
.lists__row.on i svg{opacity:1;transform:none}
.lists__row small{margin-left:auto;color:var(--dim)}
.lists__new{display:flex;gap:6px;padding:6px 4px 2px}
.lists__new input{flex:1;min-width:0;height:32px;padding:0 10px;border-radius:8px;border:1px solid var(--line);background:var(--card);font-size:13px;outline:0}
.lists__new input:focus{border-color:var(--accent)}

/* tools */
.tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-radius:var(--r-lg);border:1px solid var(--line);overflow:hidden}
.tools>a{display:flex;flex-direction:column;gap:14px;padding:22px;background:var(--card);transition:background-color .25s}
.tools>a+a{border-left:1px solid var(--line)}
.tools>a:hover{background:var(--card-2)}
.tools__pv{position:relative;height:150px;border-radius:12px;border:1px solid var(--line);background:var(--bg-2);overflow:hidden;display:grid;place-items:center}
.tools b{display:flex;align-items:center;gap:6px;font-size:15px}
.tools b svg{width:14px;height:14px;transition:transform .2s var(--ease)}
.tools>a:hover b svg{transform:translateX(3px)}
.tools>a>span{color:var(--muted);font-size:13.5px}
.mini-term{width:86%;padding:12px 14px;border-radius:10px;background:#0b0b10;color:#e8e8ee;font:12px/1.8 var(--mono)}
.mini-term .ok{color:#4ade80}.mini-term .dim{color:#8d8d99}

/* faq */
.faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:clamp(24px,4vw,80px)}
.faq h2{margin:0;font-size:clamp(32px,3.6vw,60px);line-height:1.02;letter-spacing:-.045em;font-weight:800}
.acc{border-top:1px solid var(--line)}
.acc__item{border-bottom:1px solid var(--line)}
.acc__q{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:20px 2px;border:0;background:transparent;font-size:16px;font-weight:600;text-align:left;cursor:pointer}
.acc__q i{position:relative;flex:none;width:14px;height:14px;transition:transform .35s var(--ease)}
.acc__q i::before,.acc__q i::after{content:"";position:absolute;left:0;top:6px;width:14px;height:2px;border-radius:2px;background:var(--muted)}
.acc__q i::after{transform:rotate(90deg)}
.acc__item.open .acc__q i{transform:rotate(45deg)}
.acc__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
.acc__a>div{overflow:hidden}
.acc__a p{margin:0;padding:0 2px 22px;color:var(--muted);font-size:15px;line-height:1.7;max-width:70ch;opacity:0;transform:translateY(-4px);transition:opacity .3s,transform .35s var(--ease)}
.acc__item.open .acc__a{grid-template-rows:1fr}
.acc__item.open .acc__a p{opacity:1;transform:none}

/* final cta */
.final{position:relative;margin-top:clamp(96px,9vw,160px);padding:clamp(80px,9vw,170px) 24px;border-radius:var(--r-xl);text-align:center;overflow:hidden;isolation:isolate;border:1px solid var(--line);background:var(--bg-2);container-type:inline-size}
.final__wall{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.final__wall::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 70% at 50% 50%,color-mix(in srgb,var(--bg) 82%,transparent),color-mix(in srgb,var(--bg) 35%,transparent)),linear-gradient(color-mix(in srgb,var(--accent) 22%,transparent),color-mix(in srgb,var(--accent) 22%,transparent))}
.wall{position:absolute;left:50%;top:50%;display:grid;gap:2cqw;width:150cqw;transform:translate(-50%,-50%) rotate(-9deg) skewX(8deg);opacity:.85}
.wall__row{display:flex;gap:2cqw;will-change:transform}
.wall__c{position:relative;flex:none;width:22cqw;aspect-ratio:4/3;border-radius:16px;overflow:hidden;border:1px solid var(--line-2);background:var(--card)}
.final h2{margin:0 0 28px;font-size:clamp(36px,4.6vw,80px);letter-spacing:-.05em;line-height:1;font-weight:800}
.final__cta{display:flex;gap:12px;justify-content:center}

/* footer */

/* ---------- library list ---------- */
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:16px}
.toolbar .sp{flex:1}
.search-in{display:flex;align-items:center;gap:8px;width:min(340px,100%);height:38px;padding:0 10px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--dim);transition:border-color .2s}
.search-in:focus-within{border-color:var(--accent)}
.search-in svg{width:15px;height:15px;flex:none}
.search-in input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--fg);font-size:14px}
.chips{display:flex;gap:8px;overflow:auto;padding-bottom:4px;margin-bottom:24px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.tabs-line{display:inline-flex;gap:2px;padding:3px;border-radius:12px;background:var(--hover)}
.tabs-line a{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:9px;color:var(--muted);font-size:13.5px;font-weight:600;transition:background-color .2s,color .2s}
.tabs-line a.on{background:var(--panel);color:var(--fg);box-shadow:0 1px 3px rgba(0,0,0,.18)}
.tabs-line a small{opacity:.55;font-weight:500}
.empty{padding:80px 20px;text-align:center;color:var(--muted)}
.empty b{display:block;color:var(--fg);font-size:16px;margin-bottom:6px}

/* ---------- detail ---------- */
.det{display:grid;grid-template-columns:minmax(300px,.62fr) minmax(0,1.38fr);gap:clamp(20px,2.4vw,44px);align-items:start}
.det__info{position:sticky;top:calc(var(--nav-h) + 24px);display:flex;flex-direction:column;gap:18px}
.det__author{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted)}
.det__author .card__av{width:28px;height:28px;border-radius:9px;font-size:11px}
.det h1{margin:0;font-size:clamp(28px,2.4vw,40px);letter-spacing:-.03em;line-height:1.1}
.det__sub{display:flex;flex-wrap:wrap;align-items:center;gap:8px;color:var(--muted);font-size:13.5px}
.det__desc{margin:0;color:var(--muted);font-size:15px;line-height:1.7}
.det__actions{display:flex;flex-wrap:wrap;gap:8px}
.det__kv{display:grid;grid-template-columns:auto 1fr;gap:10px 20px;padding-top:18px;border-top:1px solid var(--line);font-size:13.5px}
.det__kv dt{color:var(--dim)}
.det__kv dd{margin:0;text-align:right}
.cmd{display:flex;align-items:center;gap:10px;height:44px;padding:0 6px 0 14px;border-radius:10px;border:1px solid var(--line);background:var(--code-bg);font:13px var(--mono);color:var(--fg)}
.cmd span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmd span::before{content:"$ ";color:var(--dim)}
.cmd--plain span::before{content:none}
.stagebox{border-radius:var(--r-lg);border:1px solid var(--line);background:var(--card);overflow:hidden}
.stagebox__bar{display:flex;align-items:center;gap:8px;height:52px;padding:0 10px 0 12px;border-bottom:1px solid var(--line)}
.stagebox__bar .sp{flex:1}
.stagebox__pv{position:relative;height:clamp(420px,52vh,680px)}
.stagebox__code{display:none}
.stagebox.code .stagebox__pv{display:none}
.stagebox.code .stagebox__code{display:block}
.ftabs{display:flex;gap:2px;padding:8px 10px 0;border-bottom:1px solid var(--line)}
.ftabs button{height:32px;padding:0 12px;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--muted);font:600 12.5px var(--mono);cursor:pointer}
.ftabs button.on{color:var(--fg);border-bottom-color:var(--accent)}
.fpane{display:none}.fpane.on{display:block}
.related{margin-top:56px}

/* skill detail extras */
.tree{margin:0;padding:16px 18px;border-radius:14px;border:1px solid var(--line);background:var(--code-bg);font:13px/1.75 var(--mono);color:var(--muted);white-space:pre;overflow:auto}
.md{border-radius:14px;border:1px solid var(--line);background:var(--code-bg);overflow:hidden}
.md pre{margin:0;padding:18px;font:13px/1.75 var(--mono);white-space:pre-wrap;color:var(--fg)}
.md .h{color:var(--accent-2);font-weight:700}
.md .fm{color:var(--dim)}
.cols2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.blk h3{margin:0 0 12px;font-size:15px}
.ticks{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.ticks li{display:flex;gap:10px;font-size:14.5px;color:var(--muted)}
.ticks li svg{flex:none;width:18px;height:18px;color:var(--accent)}

/* skill output previews */
.skpv{position:absolute;inset:0;display:grid;place-items:center;padding:18px;background:linear-gradient(135deg,var(--card-2),var(--card));overflow:hidden}
.stagebox__pv .skpv{padding:40px}
.skpv>*{transform-origin:center}
.sk-rep{display:flex;gap:14px;align-items:flex-end}
.sk-rep__cover,.sk-rep__page{position:relative;width:150px;aspect-ratio:1/1.414;border-radius:6px;padding:14px;box-shadow:0 18px 40px -18px rgba(0,0,0,.6);display:flex;flex-direction:column;gap:6px;overflow:hidden}
.sk-rep__cover{background:#141018;color:#fff}
.sk-rep__cover small{font-size:8px;letter-spacing:.12em;color:#c8a7ff}
.sk-rep__cover b{font-size:14px;line-height:1.25}
.sk-rep__cover em{margin-top:auto;font-style:normal;font-size:8px;color:#8d8799}
.sk-rep__lens{position:absolute;right:-26px;bottom:24px;width:96px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#0b0910 0 18%,transparent 18.5%),repeating-conic-gradient(#7a4fd1 0 5deg,#b494ff 5deg 10deg);-webkit-mask:radial-gradient(circle,#000 62%,transparent 63%);mask:radial-gradient(circle,#000 62%,transparent 63%)}
.sk-rep__page{background:#fff;color:#141018}
.sk-rep__page small{font-size:8px;font-weight:700;color:#7a4fd1}
.sk-rep__bars{display:flex;align-items:flex-end;gap:5px;height:56px;padding:4px 0;border-bottom:1px solid #eee}
.sk-rep__bars i{flex:1;height:var(--h);border-radius:2px 2px 0 0;background:#7a4fd1;opacity:.85}
.sk-rep__lines{display:grid;gap:4px}
.sk-rep__lines i{height:4px;border-radius:2px;background:#e6e3ee}
.sk-rep table{width:100%;border-collapse:collapse;font-size:7px}
.sk-rep th,.sk-rep td{padding:2px 0;border-bottom:1px solid #eee;text-align:left}
.sk-deck{display:grid;grid-template-columns:1.3fr 1fr;grid-template-rows:1fr 1fr;gap:10px;width:min(360px,100%)}
.sk-deck__s{aspect-ratio:16/9;border-radius:6px;padding:10px;background:#fff;color:#0c0c11;display:flex;flex-direction:column;gap:4px;box-shadow:0 12px 30px -16px rgba(0,0,0,.5);overflow:hidden}
.sk-deck__s small{font:700 7px var(--mono);color:#4D74FF}
.sk-deck__s b{font-size:10px;line-height:1.2}
.sk-deck__s--title{grid-row:span 2;aspect-ratio:auto;background:#0c0c11;color:#fff;justify-content:flex-end;padding:16px}
.sk-deck__s--title b{font-size:18px;letter-spacing:-.02em}
.sk-deck__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:auto}
.sk-deck__cols i{height:22px;border-radius:3px;background:#eeecf7}
.sk-deck__cols i:first-child{background:#4D74FF}
.sk-deck__s svg{margin-top:auto;width:100%;height:30px;color:#4D74FF}
.sk-pack{display:flex;gap:18px;align-items:center;color:var(--fg)}
.sk-pack__die{width:190px;color:var(--muted)}
.sk-pack__box{position:relative;width:90px;height:120px;transform-style:preserve-3d;transform:rotateX(-16deg) rotateY(28deg)}
.sk-pack__box i{position:absolute;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;backface-visibility:hidden}
.sk-pack__box .f{left:0;top:0;width:90px;height:120px;background:linear-gradient(160deg,#f3e9df,#e7d6c7);color:#3a2a20;transform:translateZ(30px)}
.sk-pack__box .f b{font-size:14px;letter-spacing:.2em}.sk-pack__box .f small{font-size:7px;letter-spacing:.2em}
.sk-pack__box .s{left:15px;top:0;width:60px;height:120px;background:linear-gradient(160deg,#d9c5b2,#c9b29d);transform:rotateY(-90deg) translateZ(45px)}
.sk-pack__box .t{left:0;top:30px;width:90px;height:60px;background:#f1e5d9;transform:rotateX(90deg) translateZ(60px)}
.sk-vid{display:flex;gap:14px;align-items:center}
.sk-vid__phone{position:relative;width:86px;aspect-ratio:9/19;border-radius:14px;border:3px solid #1a1a22;background:linear-gradient(170deg,#ff7a59,#4D74FF);overflow:hidden;box-shadow:0 16px 30px -14px rgba(0,0,0,.6)}
.sk-vid__cap{position:absolute;left:6px;right:6px;top:40%;padding:3px;border-radius:4px;background:#ffe14d;color:#111;font:800 10px/1.2 var(--font);text-align:center}
.sk-vid__phone i{position:absolute;left:50%;bottom:12%;width:26px;height:26px;margin-left:-13px;border-radius:50%;background:rgba(255,255,255,.85)}
.sk-vid__tb{border-collapse:collapse;font-size:10px;background:var(--panel);border-radius:8px;overflow:hidden;color:var(--fg)}
.sk-vid__tb th,.sk-vid__tb td{padding:5px 8px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.sk-vid__tb th{color:var(--dim);font-weight:500}
.sk-tok{display:grid;gap:14px;width:min(300px,100%);padding:16px;border-radius:12px;background:var(--panel);border:1px solid var(--line)}
.sk-tok__sp{display:flex;align-items:flex-end;gap:8px;height:52px}
.sk-tok__sp i{width:var(--s);height:var(--s);background:color-mix(in srgb,var(--accent) 70%,transparent);border-radius:2px}
.sk-tok__ty{display:flex;align-items:baseline;gap:14px;color:var(--fg)}
.sk-tok__co{display:flex;gap:6px}
.sk-tok__co i{flex:1;height:26px;border-radius:6px;border:1px solid var(--line)}
.sk-lp{width:min(320px,100%);aspect-ratio:4/3;padding:12px;border-radius:10px;background:var(--panel);border:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.sk-lp__nav{display:flex;gap:6px;align-items:center}
.sk-lp__nav i{width:14px;height:14px;border-radius:4px;background:var(--accent)}
.sk-lp__nav span{width:22px;height:5px;border-radius:3px;background:var(--line-2)}
.sk-lp__nav b{margin-left:auto;width:34px;height:12px;border-radius:6px;background:var(--fg)}
.sk-lp__hero{display:grid;justify-items:center;gap:6px;padding:14px 0}
.sk-lp__hero i{height:10px;border-radius:5px;background:var(--fg)}
.sk-lp__hero i+i{height:6px;background:var(--line-2)}
.sk-lp__hero b{margin-top:6px;width:60px;height:16px;border-radius:8px;background:var(--accent)}
.sk-lp__grid{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.sk-lp__grid span{border-radius:6px;background:var(--card-2);border:1px solid var(--line)}
.skpv .demo-tag{position:absolute;left:12px;top:12px}

/* themes & icons */
.th-pv{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1.4fr;gap:10px;padding:16px;background:var(--t-bg);color:var(--t-fg)}
.th-pv .c{border-radius:10px;background:var(--t-card);border:1px solid var(--t-line);padding:12px;display:flex;flex-direction:column;gap:7px}
.th-pv i{display:block;height:7px;border-radius:4px;background:var(--t-line)}
.th-pv b{font-size:13px}
.th-pv .btn-t{margin-top:auto;height:24px;border-radius:7px;background:var(--t-accent)}
.th-pv .sw{display:flex;gap:5px;margin-top:auto}
.th-pv .sw span{flex:1;height:18px;border-radius:5px}
.ic-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px}
.ic{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;aspect-ratio:1;border-radius:14px;border:1px solid var(--line);background:var(--card);color:var(--fg);cursor:pointer;transition:border-color .2s,transform .25s var(--ease)}
.ic:hover{border-color:var(--line-2);transform:translateY(-2px)}
.ic svg{width:26px;height:26px}
.ic span{font:11.5px var(--mono);color:var(--dim)}

/* ---------- pricing ---------- */
.price-wrap{text-align:center;padding:24px 0 8px}
.price-wrap h1{margin:0;font-size:clamp(36px,4.4vw,72px);letter-spacing:-.05em;line-height:1}
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,520px));justify-content:center;gap:20px;margin-top:40px}
.plan{position:relative;display:flex;flex-direction:column;gap:18px;padding:28px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--card);text-align:left}
.plan--pro{border-color:color-mix(in srgb,var(--accent) 60%,transparent);background:radial-gradient(100% 70% at 100% 0%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 60%),var(--card)}
.plan h3{margin:0;font-size:18px}
.plan__price{display:flex;align-items:baseline;gap:8px;font-size:44px;font-weight:800;letter-spacing:-.04em}
.plan__price small{font-size:14px;font-weight:500;color:var(--muted);letter-spacing:0}
.plan ul{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.plan li{display:flex;gap:10px;font-size:14.5px}
.plan li svg{flex:none;width:18px;height:18px;color:var(--accent)}
.plan li.no{color:var(--dim)}.plan li.no svg{color:var(--dim)}
.plan .btn{width:100%}
.ctable{width:100%;max-width:1060px;margin:64px auto 0;border-collapse:collapse;font-size:14.5px}
.ctable th,.ctable td{padding:14px 12px;border-bottom:1px solid var(--line);text-align:left}
.ctable th{font-weight:600}
.ctable td:not(:first-child),.ctable th:not(:first-child){text-align:center;width:24%}
.ctable td:first-child{color:var(--muted)}

/* ---------- MCP page ---------- */
.mcp-hero{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding:24px 0 32px}
.mcp-hero h1{margin:0;font-size:clamp(36px,4.4vw,72px);line-height:1;letter-spacing:-.05em}
.mcp-hero p{margin:18px 0 28px;color:var(--muted);font-size:17px;max-width:46ch}
.clients{display:flex;flex-wrap:wrap;gap:8px}
.flow{position:relative;height:320px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--bg-2);overflow:hidden}
.flow__hub{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px;border-radius:24px;background:var(--fg);color:var(--bg);display:grid;place-items:center;font:800 20px var(--font);box-shadow:0 0 0 10px color-mix(in srgb,var(--accent) 12%,transparent),0 0 60px color-mix(in srgb,var(--accent) 40%,transparent)}
.flow__n{position:absolute;padding:7px 12px;border-radius:999px;border:1px solid var(--line-2);background:var(--panel);font-size:13px;font-weight:600;white-space:nowrap}
.flow svg{position:absolute;inset:0;width:100%;height:100%}
.flow svg path{stroke:var(--line-2);stroke-dasharray:4 6;animation:dash 1.4s linear infinite}
@keyframes dash{to{stroke-dashoffset:-20}}
.toolslist{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.toolslist div{padding:16px;border-radius:14px;border:1px solid var(--line);background:var(--card)}
.toolslist code{font:600 13px var(--mono);color:var(--accent-2)}

.toolslist p{margin:6px 0 0;color:var(--muted);font-size:13.5px}

/* ---------- AI page ---------- */
.ai-hero{text-align:center;padding:clamp(32px,6vw,96px) 0 24px}
.ai-hero h1{margin:0 0 28px;font-size:clamp(36px,4.6vw,76px);letter-spacing:-.05em;line-height:1}
.ai-box{width:min(820px,100%);margin:0 auto;padding:16px;border-radius:20px;border:1px solid color-mix(in srgb,var(--accent) 55%,var(--line));background:var(--card);box-shadow:0 30px 80px -40px color-mix(in srgb,var(--accent) 60%,transparent);text-align:left}
.ai-box textarea{width:100%;min-height:96px;max-height:260px;resize:none;border:0;outline:0;background:transparent;font-size:16px;line-height:1.6}
.ai-box textarea::placeholder{color:var(--dim)}
.ai-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ai-bar .sp{flex:1}
.ai-credits{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;border-radius:999px;border:1px solid var(--line);color:var(--muted);font-size:13px}
.ai-credits b{color:var(--fg);font-variant-numeric:tabular-nums}
.dd{position:relative}
.dd__menu{position:absolute;left:0;top:calc(100% + 6px);z-index:20;min-width:210px;padding:6px;border-radius:12px;background:var(--panel);border:1px solid var(--line-2);box-shadow:var(--shadow);opacity:0;transform:translateY(-4px) scale(.98);transform-origin:top left;pointer-events:none;transition:opacity .18s,transform .2s var(--ease)}
.dd.open .dd__menu{opacity:1;transform:none;pointer-events:auto}
.dd--up .dd__menu{top:auto;bottom:calc(100% + 6px);transform-origin:bottom left}
.dd__menu button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;height:36px;padding:0 10px;border:0;border-radius:8px;background:transparent;font-size:13.5px;cursor:pointer;text-align:left}
.dd__menu button:hover{background:var(--hover)}
.dd__menu button small{color:var(--dim)}
.dd__menu button.on::after{content:"✓";color:var(--accent)}
.ai-ex{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;width:min(820px,100%);margin:16px auto 0}
.ai-ex button{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:14px;border:1px solid var(--line);background:var(--card);text-align:left;font-size:13.5px;font-weight:600;cursor:pointer;transition:border-color .2s,transform .25s var(--ease)}
.ai-ex button:hover{border-color:var(--line-2);transform:translateY(-2px)}
.ai-ex .m{height:64px;border-radius:8px;background:var(--bg-2);border:1px solid var(--line);position:relative;overflow:hidden}
.ai-out{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px;margin-top:40px}
.ai-out[hidden]{display:none}
.ai-frame{position:relative;height:520px;border-radius:var(--r-lg);border:1px solid var(--line);background:#fff;overflow:hidden}
.ai-frame iframe{width:100%;height:100%;border:0}
.ai-frame .loading{position:absolute;inset:0;display:grid;place-items:center;background:var(--card)}
.shimmer-lines{display:grid;gap:10px;width:60%}
.shimmer-lines i{height:12px;border-radius:6px;background:linear-gradient(90deg,var(--hover),var(--line-2),var(--hover));background-size:200% 100%;animation:sh 1.2s linear infinite}
@keyframes sh{to{background-position:-200% 0}}
.takes{display:flex;gap:6px}

/* ---------- forms / auth ---------- */
.auth{min-height:calc(100vh - var(--nav-h));display:grid;place-items:center;padding:40px 20px;position:relative;isolation:isolate}
.auth__card{width:min(400px,100%);padding:32px;border-radius:22px;border:1px solid var(--line);background:var(--panel);box-shadow:var(--shadow)}
.auth__card h1{margin:0 0 6px;font-size:26px;letter-spacing:-.03em}
.auth__card .sub{margin:0 0 24px;color:var(--muted);font-size:14px}
.field{display:grid;gap:6px;margin-bottom:14px}
.field label{font-size:13px;font-weight:500;color:var(--muted)}
.input,.select,.textarea{width:100%;height:42px;padding:0 12px;border-radius:10px;border:1px solid var(--line-2);background:var(--card);font-size:14px;outline:0;transition:border-color .2s,box-shadow .2s}
.textarea{height:auto;min-height:120px;padding:10px 12px;resize:vertical;font-family:var(--mono);font-size:13px}
.input:focus,.select:focus,.textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)}
.or{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--dim);font-size:12px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.gbtn{width:100%;height:44px;gap:10px;background:var(--card);border:1px solid var(--line-2)}
.gbtn svg{width:18px;height:18px}
.auth__switch{display:flex;margin-bottom:22px}
.auth__legal{margin:18px 0 0;color:var(--dim);font-size:12px;text-align:center}
.auth__legal a{text-decoration:underline;text-underline-offset:3px}

/* ---------- account ---------- */
.acct{display:grid;grid-template-columns:220px minmax(0,1fr);gap:32px;padding-top:12px}
.acct nav a{display:flex;align-items:center;height:36px;padding:0 10px;border-radius:9px;color:var(--muted);font-size:14px;font-weight:500}
.acct nav a.on,.acct nav a:hover{background:var(--hover);color:var(--fg)}
.panel{padding:22px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--card)}
.panel+.panel{margin-top:16px}
.grid2>.panel+.panel,.cols2>.panel+.panel{margin-top:0}
.panel h2{margin:0 0 4px;font-size:16px}
.panel .hint{margin:0 0 16px;color:var(--muted);font-size:13.5px}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.table{width:100%;border-collapse:collapse;font-size:13.5px}
.table th,.table td{padding:11px 10px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.table th{color:var(--dim);font-weight:500;font-size:12.5px}
.table-wrap{overflow:auto;border-radius:12px;border:1px solid var(--line)}
.table-wrap .table tr:last-child td{border-bottom:0}
.empty-row td{padding:44px 10px!important;text-align:center;color:var(--dim)!important}

/* ---------- modal & toast ---------- */
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .2s}
.modal.open{opacity:1;pointer-events:auto}
.modal__box{width:min(640px,100%);max-height:min(72vh,640px);display:flex;flex-direction:column;border-radius:18px;border:1px solid var(--line-2);background:var(--panel);box-shadow:0 40px 100px -40px rgba(0,0,0,.8);overflow:hidden;transform:translateY(8px) scale(.98);transition:transform .25s var(--ease)}
.modal.open .modal__box{transform:none}
.k-in{display:flex;align-items:center;gap:10px;height:56px;padding:0 16px;border-bottom:1px solid var(--line)}
.k-in svg{width:18px;height:18px;color:var(--dim)}
.k-in input{flex:1;border:0;outline:0;background:transparent;font-size:16px}
.k-list{overflow:auto;padding:8px}
.k-group{padding:10px 10px 4px;font-size:12px;color:var(--dim)}
.k-item{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:10px;font-size:14px;cursor:pointer}
.k-item.on{background:var(--hover)}
.k-item i{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:var(--card-2);color:var(--muted)}
.k-item i svg{width:15px;height:15px}
.k-item small{margin-left:auto;color:var(--dim);font-size:12px}
.k-foot{display:flex;gap:14px;padding:10px 16px;border-top:1px solid var(--line);color:var(--dim);font-size:12px}
.mbody{padding:22px}
.mbody h3{margin:0 0 6px;font-size:18px}
.mbody p{margin:0 0 18px;color:var(--muted);font-size:14px}
.mfoot{display:flex;justify-content:flex-end;gap:8px;padding:14px 22px;border-top:1px solid var(--line)}
.toasts{position:fixed;left:50%;bottom:24px;z-index:120;display:grid;gap:8px;justify-items:center;transform:translateX(-50%);pointer-events:none}
.toast{display:flex;align-items:center;gap:10px;padding:11px 16px;border-radius:12px;background:var(--fg);color:var(--bg);font-size:14px;font-weight:500;box-shadow:var(--shadow);animation:tin .3s var(--ease)}
.toast svg{width:16px;height:16px}
.toast.out{opacity:0;transform:translateY(8px);transition:opacity .25s,transform .25s}
@keyframes tin{from{opacity:0;transform:translateY(10px) scale(.98)}}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ---------- admin ---------- */
.adm{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:calc(100vh - var(--nav-h))}
.adm .side{border-right:1px solid var(--line)}
.adm__main{min-width:0;padding:24px clamp(20px,2.4vw,40px) 64px}
.adm__head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.adm__head h1{margin:0;font-size:24px;letter-spacing:-.02em}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:16px}
.kpi{padding:18px;border-radius:14px;border:1px solid var(--line);background:var(--card)}
.kpi small{color:var(--muted);font-size:13px}
.kpi b{display:block;margin-top:8px;font-size:28px;letter-spacing:-.02em}
/* v65 admin API page: items folded by template group */
.agbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.agbar .agsel{width:auto;min-width:120px;height:38px;padding:0 30px 0 10px;font-size:13.5px}
.agbar__n{color:var(--muted);font-size:12.5px;white-space:nowrap}
.agl{display:flex;flex-direction:column;gap:8px}
.agl__empty{padding:28px 12px;border:1px dashed var(--line-2);border-radius:12px;color:var(--muted);font-size:13.5px;text-align:center}
.agp{border:1px solid var(--line);border-radius:12px;background:var(--card);transition:border-color .2s}
.agp:hover,.agp.on{border-color:var(--line-2)}
.agp__h{display:grid;grid-template-columns:minmax(220px,1fr) 260px 120px 110px 140px 76px;align-items:center;gap:14px;padding:10px 12px 10px 6px;cursor:pointer;border-radius:12px}
.agp.on .agp__h{border-bottom:1px solid var(--line);border-radius:12px 12px 0 0}
.agp__h:hover{background:var(--hover)}
.agp__t{display:flex;align-items:center;gap:6px;min-width:0;padding:4px;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer;font:inherit;border-radius:8px}
.agp__t:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.agp__chev{flex:none;width:16px;height:16px;color:var(--muted);transition:transform .2s}
.agp.on .agp__chev{transform:rotate(90deg)}
.agp__n{display:flex;flex-direction:column;min-width:0}
.agp__n b{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.agp__n .mono{color:var(--muted);font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.agp__c{display:flex;gap:6px;flex-wrap:wrap}
.agp__c span{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:6px;background:var(--card-2);color:var(--muted);font-size:12px;white-space:nowrap}
.agp__c b{color:var(--fg);font-weight:600}
.agp__s{display:flex;gap:4px;flex-wrap:wrap}
.agp__by,.agp__d{color:var(--muted);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.agp__a{text-align:right}
.agp__b{padding:4px 12px 10px}
.agp__tw{overflow-x:auto;scrollbar-width:thin}
.agp__tw .table tr:last-child td{border-bottom:0}
@media (max-width:1180px){.agp__h{grid-template-columns:minmax(0,1fr) 250px 110px;row-gap:6px}.agp__by,.agp__d{grid-row:2}.agp__by{grid-column:2}.agp__d{grid-column:3}.agp__a{grid-row:1;grid-column:3}.agp__s{grid-row:2;grid-column:1;padding-left:26px}}
@media (max-width:640px){.agp__h{grid-template-columns:minmax(0,1fr) auto}.agp__a{min-width:0}.agp__c{grid-column:1/-1;grid-row:2;padding-left:26px}.agp__s{grid-row:3;grid-column:1}.agp__by{grid-row:3;grid-column:2}.agp__d{display:none}.agp__a{grid-row:1;grid-column:2}}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.stub-banner{display:flex;align-items:center;gap:10px;margin-bottom:18px;padding:10px 14px;border-radius:12px;border:1px dashed color-mix(in srgb,#f5b742 60%,transparent);background:color-mix(in srgb,#f5b742 8%,transparent);color:#d9a032;font-size:13px}

.gate{display:grid;place-items:center;min-height:60vh;text-align:center}
.tpl-pre{margin:0;padding:14px;border-radius:10px;background:var(--code-bg);border:1px solid var(--line);font:12.5px/1.7 var(--mono);white-space:pre-wrap;color:var(--muted)}
.toggle{position:relative;width:38px;height:22px;flex:none;border-radius:999px;border:0;background:var(--line-2);cursor:pointer;transition:background-color .2s}
.toggle::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .25s var(--spring)}
.toggle.on{background:var(--accent)}
.toggle.on::after{transform:translateX(16px)}
.setrow{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.setrow:last-child{border-bottom:0}
.setrow b{display:block;font-size:14px}
.setrow span{color:var(--muted);font-size:13px}

/* ---------- misc pages ---------- */
.prose{max-width:760px}
.prose h2{margin:36px 0 10px;font-size:20px}
.prose p,.prose li{color:var(--muted);font-size:15px;line-height:1.8}
.nf{min-height:calc(100vh - var(--nav-h));display:grid;place-items:center;text-align:center}
.nf b{display:block;font-size:clamp(96px,16vw,220px);line-height:1;letter-spacing:-.06em;font-weight:800;background:radial-gradient(circle,var(--line-2) 1.6px,transparent 1.8px) 0 0/8px 8px;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:1px var(--line-2)}

/* ---------- responsive ---------- */
@media(max-width:1180px){
  .bento .b-lg{grid-column:span 6}.bento .b-md,.bento .b-third{grid-column:span 3}
  .tools{grid-template-columns:repeat(2,minmax(0,1fr))}.tools>a:nth-child(3){border-left:0}.tools>a:nth-child(n+3){border-top:1px solid var(--line)}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:980px){
  :root{--side-w:220px}
  .app,.shell__in,.adm{grid-template-columns:1fr}
  .side{display:none}.shell .side{display:none}
  .adm .side{display:flex;position:static;height:auto;flex-direction:row;flex-wrap:wrap;border-right:0;border-bottom:1px solid var(--line)}
  .adm .side .side__label{display:none}
  .nav__links{display:none}.nav__burger{display:inline-grid}
  .stage,.duo,.faq,.det,.mcp-hero,.ai-out,.cols2,.grid2{grid-template-columns:1fr}
  .duo>*+*{border-left:0;border-top:1px solid var(--line)}
  .det__info{position:static}
  .ship{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr}
  .acct{grid-template-columns:1fr}
  .cats{grid-template-columns:1fr}
  .ai-ex{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .nav__search span,.nav__search kbd{display:none}
  .nav .btn--ghost{display:none}
  .bento .b-md,.bento .b-third{grid-column:span 6}
  .tools{grid-template-columns:1fr}.tools>a+a{border-left:0;border-top:1px solid var(--line)}
  .hero__cta,.final__cta{flex-direction:column;align-items:center}
  .kpis{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
}

/* wide screens: keep the agent showcase compact */
.dd__menu{min-width:min(210px,70vw)}
.dd:not(.open) .dd__menu{display:none}
.dd.open .dd__menu{animation:tin .2s var(--ease)}
@media(max-width:640px){#ait .dd__menu{left:auto;right:0;transform-origin:bottom right}}

/* =====================================================================================
   reference parity layer (Nov 2026). Measured against the reference site at 1280 / 1440 / 1920 / 2560:
   one container rule for every page: max 1152px incl. 24px gutters -> 1104px content,
   identical from 1152px up to 2560px. Near-black palette, Inter-style type scale, blue accent.
   ===================================================================================== */
@font-face{font-family:"Inter";font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/inter-latin-var.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  --font:Inter,-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI","PingFang SC","Hiragino Sans GB","Noto Sans SC","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;
  --wrap:min(100% - 48px,1104px);
  --nav-h:56px;
  --g-sec:min(8vw,116px);
}
[data-theme=dark]{
  --bg:#050506;--bg-2:#09090b;--panel:#0d0d0e;--card:#0d0d0e;--card-2:#141416;
  --fg:#f6f6f8;--muted:#98989d;--dim:#6c6c72;
  --line:rgba(246,246,248,.075);--line-2:rgba(246,246,248,.12);--hover:rgba(246,246,248,.07);
  --code-bg:#09090b;--shadow:0 24px 60px -30px rgba(0,0,0,.9);
  --accent:#0033ff;--accent-2:#6f8bff;--accent-fg:#fff;
}

@supports (color:oklch(0.5 0.2 264)){
  [data-theme=dark]{--bg:oklch(.115 .002 286);--bg-2:oklch(.141 .004 286);--panel:oklch(.158 .003 286);--card:oklch(.158 .003 286);--card-2:oklch(.19 .004 286);--fg:oklch(.975 .002 286);--muted:oklch(.68 .008 286);--line:oklch(.975 .002 286/.075);--line-2:oklch(.975 .002 286/.12);--hover:oklch(.975 .002 286/.07)}
  :root{--accent:oklch(.485 .291 264.121)}
  [data-theme=dark]{--accent:oklch(.485 .291 264.121)}
}
body{letter-spacing:-.011em}
.wrap{width:var(--wrap)}

/* buttons: 10px radius, primary = solid blue with a 1px top highlight, secondary = 8% white fill */
.btn{height:40px;padding:0 16px;border-radius:10px;font-size:14px;font-weight:500;border:0}
.btn--primary{background:var(--accent);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.btn--primary:hover{background:var(--accent);opacity:.92}
.btn--line{background:color-mix(in srgb,var(--fg) 8%,transparent);border:0;color:var(--fg)}
.btn--line:hover{background:color-mix(in srgb,var(--fg) 12%,transparent)}
.btn--lg{height:46px;padding:0 22px;font-size:15px;border-radius:10px}
.btn--sm{height:32px;padding:0 12px;font-size:13px;border-radius:10px}
.btn--ghost{color:var(--muted)}
.btn--ghost:hover{color:var(--fg);background:transparent}

/* nav: 56px, same container as the page */
.nav{height:56px;background:color-mix(in srgb,var(--bg) 62%,transparent);backdrop-filter:saturate(1.3) blur(16px);-webkit-backdrop-filter:saturate(1.3) blur(16px)}
.nav__in{width:var(--wrap)}
.nav--app .nav__in{width:auto;padding:0 24px}
.logo{margin-right:28px}.nav .logo i{width:64px;height:20px}
.nav__links{gap:0}
.nav__link{height:36px;padding:0 12px;font-size:14px;font-weight:450;color:var(--muted)}
.nav__search{height:36px;font-size:14px;font-weight:450;gap:8px}
.nav__search kbd{height:20px;border:0;background:color-mix(in srgb,var(--fg) 8%,transparent);font:500 11px/1 var(--font)}
.nav .btn--ghost{height:36px;font-size:14px;padding:0 12px}

/* ---------- home hero ---------- */
.hero{padding:81px 0 96px;text-align:center}
.hero>.wrap:first-of-type{position:relative}
.hero__bg{inset:-56px 0 auto 0;height:1040px;-webkit-mask:linear-gradient(#000 62%,transparent);mask:linear-gradient(#000 62%,transparent)}
.hero__bg::after{display:none}
.hero__gl{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.2s}
.hero__gl.on{opacity:1}
.hero__bg.gl i{display:none}
.hero h1{max-width:none;font-size:clamp(44px,5.9vw,88px);line-height:1;letter-spacing:-.05em;font-weight:700}
.hero h1 em{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--fg)}
.hero p{margin:20px auto 0;max-width:none;font-size:clamp(16px,1.45vw,21px);line-height:1.5;color:var(--muted);letter-spacing:-.008em}
.hero__cta{gap:10px;margin-top:28px}

/* framed screen: plate 1104 wide, 40px radius, app inset 37px and cut off at the bottom */
.dv{width:var(--wrap);margin:64px auto 0}
.dv__fit{height:auto}
.dv__stage{width:1104px;height:820px;font-size:13px;letter-spacing:-.011em}
.dv__bezel{border-radius:40px;background:color-mix(in srgb,var(--fg) 3.5%,transparent);border:1px solid color-mix(in srgb,var(--fg) 6%,transparent);box-shadow:none}
.dv__bezel::before{display:none}
.dv__screen{left:37px;top:37px;width:1030px;height:calc(100% - 38px);border-radius:20px 20px 0 0;border:0;background:var(--bg);grid-template-columns:228px minmax(0,1fr);box-shadow:0 0 0 1px color-mix(in srgb,var(--fg) 5%,transparent)}

.lx-side{padding:16px 12px 12px;gap:1px;background:color-mix(in srgb,var(--fg) 1.5%,transparent);border-right:1px solid color-mix(in srgb,var(--fg) 7%,transparent)}
.lx-side .logo{height:22px;margin:0 8px 0}
.lx-side .logo i{width:58px;height:20px}
.lx-search{height:32px;margin:16px 0 12px;padding:0 10px;border:0;border-radius:8px;background:color-mix(in srgb,var(--fg) 4.5%,transparent);color:var(--muted);font-size:13px;font-weight:450}
.lx-search kbd{background:none;border:0;opacity:.7;font:450 11.5px var(--font)}
.lx-side small{padding:16px 8px 4px;color:var(--muted);font-size:11.5px;font-weight:500}
.lx-si{height:30px;padding:0 8px;gap:10px;border-radius:7px;color:color-mix(in srgb,var(--fg) 78%,transparent);font-size:13px;font-weight:450}
.lx-si.on{background:color-mix(in srgb,var(--fg) 7%,transparent);color:var(--fg);font-weight:500}
.lx-si>svg{width:16px;height:16px}
.lx-new{margin-left:2px;height:18px;display:inline-flex;align-items:center;padding:0 7px;border-radius:999px;background:color-mix(in srgb,var(--fg) 8%,transparent);color:color-mix(in srgb,var(--fg) 72%,transparent);font-size:10.5px;font-weight:500}
.lx-side__foot{padding:16px 4px 0}
.lx-side__foot a{font-size:12.5px;font-weight:450;color:color-mix(in srgb,var(--fg) 80%,transparent)}
.lx-topbar{right:20px;top:12px;gap:10px}
.lx-topbar .lx-bm{display:grid;place-items:center;width:32px;height:32px}
.lx-av{width:28px;height:28px}
.lx-scroll{top:56px;-webkit-mask:none;mask:none}
.lx-content{padding:0 28px 40px}
.lx-content section+section{margin-top:36px}
.lx-h{padding:0 4px;margin-bottom:11px}
.lx-h h3{font-size:17px;font-weight:600;letter-spacing:-.01em;line-height:26px}
.lx-h p{margin:2px 0 0;font-size:13px;line-height:20px;color:var(--muted)}
.lx-h a{font-size:13px;color:var(--muted)}
/* Top today: a horizontal row of 8, big rank numerals tucked under each card */
.lx-rank{display:flex;gap:16px;padding-left:8px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.lx-rank::-webkit-scrollbar{display:none}
.lx-rank__i{flex:none;display:flex;align-items:center;width:273px;padding:0}
.lx-rank__n{position:static;flex:none;width:57px;margin:0 -16px 12px 0;transform:none;font:900 103px/1 ui-rounded,"SF Pro Rounded",var(--font);letter-spacing:-.05em;color:var(--fg);opacity:.08;text-align:left}
.lx-rank__i .lx-card{flex:none;width:232px}
.lx-row{display:flex;gap:16px;padding-left:4px;overflow:hidden}
.lx-row>.lx-card{flex:none;width:232px}
.lx-card .card__pv{aspect-ratio:4/3;height:174px;border-radius:10px;border:0;background:color-mix(in srgb,var(--fg) 5%,transparent)}
.lx-cats{grid-template-columns:336px 336px;gap:40px;padding:0 4px}
.lx-cats small{font-size:13px;font-weight:500;color:var(--muted);margin-bottom:7px}
.lx-cats>div>div{grid-template-columns:172px 172px;gap:2px 8px}
.lx-cats a{height:33px;gap:10px;font-size:14px;font-weight:500;letter-spacing:-.025em}
/* in-screen modal */
.lx-modal{place-items:start center;padding-top:83px;background:rgba(0,0,0,.55)}
.lx-modal__p{width:737px;border-radius:14px;border:0;background:var(--bg);box-shadow:0 0 0 1px color-mix(in srgb,var(--fg) 8%,transparent),0 40px 90px -30px rgba(0,0,0,.9)}
.lx-modal header{gap:12px;padding:12px 16px;border-bottom:0;min-height:61px}
.lx-modal header .card__av{width:27px;height:27px;border-radius:50%;background:color-mix(in srgb,var(--fg) 10%,transparent);color:var(--fg);font-size:12px}
.lx-modal header b{font-size:14px;font-weight:600}.lx-modal header small{font-size:12px;color:var(--muted)}
.lx-copy{height:29px;padding:0 10px;font-size:12.5px;border-radius:8px}
.lx-modal__pv{height:415px;background:color-mix(in srgb,var(--fg) 5%,transparent)}
.lx-modal .m2,.dv.m2 .lx-modal .m1{display:none}
.dv.m2 .lx-modal .m2{display:block}
.dv.m2 .lx-modal__pv.m2{display:block}
.lx-toast{bottom:120px}
/* mac windows at the reference size (624 x 410) */
.mw{left:-29px;top:368px;width:624px;height:410px;font-size:12px;border-radius:12px}
.mw--cx{left:452px;top:330px}
.mw__bar{height:33px;gap:8px}
.mw__seg{margin-left:20px}
.mw__t{margin-left:10px;font-size:12px}
.cc-side{width:168px;padding:8px 6px;font-size:12px}
.cc-main{padding:12px 14px 10px}
.cx-side{width:150px}
.pw{left:610px;top:86px;width:430px;height:300px}
/* Dock: always on, centred, overlapping the bottom edge of the screen */
.dock2{left:50%;top:779px;height:70px;gap:0;padding:6px 5px;border-radius:21px;background:rgba(46,46,50,.42);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.22),0 0 0 .5px rgba(0,0,0,.55),0 12px 32px -10px rgba(0,0,0,.6);transform:translate(-50%,0);opacity:1;border:0}
.dock2.up{transform:translate(-50%,0)}
.dk{width:58px;height:58px;padding:5px}
.dk i{bottom:-5px}
/* the demo's text inside windows stays readable */
.mw .cc-msg{max-width:330px}

/* ---------- "works with" strip (layout of the reference social-proof block, our own honest content) ---------- */
.usedby{margin-top:128px;text-align:left}
.usedby h2{margin:0;max-width:56ch;font-size:clamp(28px,3.6vw,44px);font-weight:500;line-height:1.1;letter-spacing:-.022em;color:var(--muted)}
.usedby h2 .hl{color:var(--fg);box-shadow:inset 0 -.06em 0 0 var(--accent)}
.usedby h2 .mu{color:var(--muted)}
.usedby h2{color:var(--fg)}
.usedby__g{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:56px}
.usedby__g small{display:block;color:var(--muted);font-size:13px;font-weight:500}
.usedby__l{display:flex;flex-wrap:wrap;gap:20px 28px;margin-top:24px}
.usedby__l span{font-size:20px;font-weight:650;letter-spacing:-.03em;color:color-mix(in srgb,var(--fg) 62%,transparent)}

/* ---------- home sections: 116px section padding, 46px headings ---------- */
.big{margin-top:0;padding:var(--g-sec) 0}
.big__head{gap:48px;margin-bottom:56px}
.big__head h2,.faq h2{font-size:clamp(32px,3.2vw,46px);line-height:1.02;letter-spacing:-.045em;font-weight:700}
.big__head p{margin:8px 0 0;max-width:26em;font-size:clamp(15px,1.18vw,17px);line-height:1.5;color:var(--muted);text-wrap:balance}
.big__head .btn{height:40px}
/* bento: 12 columns, 12px gap, 7/5 then 4/4/4 */
.bento{grid-template-columns:repeat(12,minmax(0,1fr));gap:12px}
.bento .b-lg{grid-column:span 7}.bento .b-md{grid-column:span 5}.bento .b-third{grid-column:span 4}
.bento>*{border-radius:20px;border:1px solid color-mix(in srgb,var(--fg) 7.5%,transparent);background:var(--card)}
.bento>.b-lg,.bento>.b-md{height:423px}.bento>.b-third{height:391px}
.bento__pv{flex:1;min-height:0;margin:8px 8px 0;border:0;border-radius:13px;background:color-mix(in srgb,var(--fg) 3%,transparent)}
.bento__foot{flex:none;height:84px;padding:0 24px 20px;align-items:flex-end}
.bento__foot b{font-size:16px;font-weight:500;letter-spacing:-.012em;line-height:21.6px}
.bento__foot>div span{font-size:14px;line-height:21px;color:var(--muted)}
.bento__foot .more{font-size:14px;color:var(--fg)}
/* ship: three 520px tiles, 24px gap, 12px radius, copy at the bottom */
.ship{gap:24px}
.ship__p{height:520px;border-radius:12px;padding:32px;justify-content:space-between}
.ship__p::before{border-radius:inherit}
.ship__p--a::before{background:#c86a50}
.ship__p--b::before{background:radial-gradient(70% 45% at 70% 18%,rgba(255,255,255,.55),transparent 70%),radial-gradient(90% 60% at 20% 70%,rgba(186,198,255,.55),transparent 70%),linear-gradient(180deg,#4f6fe8,#7d8cf0 45%,#b6b2f2)}
.ship__p--c::before{background:radial-gradient(160px 160px at 10% 40%,rgba(75,115,255,.42),transparent 70%),radial-gradient(170px 170px at 55% 55%,rgba(255,102,244,.4),transparent 70%),radial-gradient(150px 150px at 70% 30%,rgba(255,48,41,.3),transparent 70%),radial-gradient(170px 170px at 95% 50%,rgba(254,123,2,.4),transparent 70%),#F6F6F1}
.ship__stage{flex:1;height:auto;align-items:center;padding:0}
.ship__mock{margin:0;border-radius:12px;border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.ship__p:hover .ship__mock{transform:translateY(-4px)}
.ship__txt{min-height:88px;padding:0;background:none;border:0}
.ship__txt b{height:32px;font-size:17px;font-weight:600;gap:10px}
.ship__txt p{margin:8px 0 0;font-size:16px;line-height:1.6;color:rgba(255,255,255,.75);max-width:34ch}
.ship__p--c{color:#171717}.ship__p--c .ship__txt p{color:#525252}
.ship+.duo{margin-top:24px}
/* duo: 3/2 split, 615px tall, 20px radius, page-black fill with a hairline ring */
.duo{grid-template-columns:3fr 2fr;border-radius:20px;border:0;background:var(--bg);box-shadow:0 0 0 1px color-mix(in srgb,var(--fg) 8%,transparent);min-height:615px;overflow:hidden}
.duo>*{padding:40px 40px 32px;gap:0;justify-content:space-between}
.duo>*+*{border-left:1px solid color-mix(in srgb,var(--fg) 8%,transparent)}
.duo>*>:last-child{min-height:110px;padding-top:24px}
.duo h3{font-size:17px;font-weight:600;line-height:25.5px;letter-spacing:-.012em}
.duo p{margin:8px 0 0;font-size:16px;line-height:1.6;color:var(--muted);max-width:46ch}
/* tools: four 276px cards in one ringed strip */
.big__head:only-child,.big>.big__head:has(+ .tools){margin-bottom:40px}
.tools{border-radius:20px;border:0;box-shadow:0 0 0 1px color-mix(in srgb,var(--fg) 8%,transparent);background:var(--bg);overflow:hidden}
.tools>a{padding:24px;gap:0;background:transparent;min-height:273px}
.tools>a:hover{background:color-mix(in srgb,var(--fg) 2.5%,transparent)}
.tools>a+a{border-left:1px solid color-mix(in srgb,var(--fg) 8%,transparent)}
.tools__pv{height:auto;aspect-ratio:16/10;border-radius:10px;border:0;background:color-mix(in srgb,var(--fg) 4%,transparent);margin-bottom:16px}
.tools b{font-size:16px;font-weight:500;letter-spacing:-.012em}
.tools>a>span{margin-top:6px;font-size:14px;line-height:21px;color:var(--muted)}
/* faq: 1fr / 1.6fr, 64px gap, 64px rows */
.faq{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:64px;padding-bottom:56px}
.faq h2{max-width:12ch;margin:0}
.acc{border-top:0}
.acc__item{border-bottom:0;border-radius:14px;transition:background-color .2s}
.acc__item:hover,.acc__item.open{background:color-mix(in srgb,var(--fg) 3.5%,transparent)}
.acc__q{padding:20px;font-size:16px;font-weight:500;line-height:24px;color:color-mix(in srgb,var(--fg) 88%,transparent)}
.acc__a p{padding:0 20px 20px;font-size:15px}
/* final: 375px card, 28px radius, tilted wall tinted blue */
.final{margin:48px 0 var(--g-sec);padding:112px 24px 128px;border-radius:28px;border:0;background:var(--card);isolation:isolate;overflow:hidden;container-type:inline-size}
.final__wall{z-index:-4}
.final__wall::after{display:none}
.wall{width:auto;gap:16px;transform:translate(-50%,-50%) rotate(-8deg)}
.wall__row{gap:16px}
.wall__c{width:300px;aspect-ratio:960/510;border-radius:12px;border:0}
.final__tint,.final__scrim,.final__ground{position:absolute;inset:0;pointer-events:none}
.final__tint{z-index:-3;background:rgb(20,50,230);opacity:.85;mix-blend-mode:color}
.final__scrim{z-index:-2;background:radial-gradient(58% 70% at 50% 46%,rgba(3,4,12,.96),rgba(3,6,22,.8) 52%,rgba(2,8,34,.5))}
.final__ground{z-index:-1;background:radial-gradient(64% 52% at 50% 100%,rgba(0,52,255,.34),rgba(0,34,170,.2) 42%,rgba(0,18,96,.08) 70%,transparent 88%)}
.final h2{margin:0 auto;font-size:clamp(32px,4.2vw,56px);line-height:1.02;letter-spacing:-.045em;font-weight:700}
.final__cta{margin-top:32px;gap:12px}

/* ---------- library pages: same 1104px container, reference-style page head ---------- */
.lib{padding:64px 0 96px}
.lib .page-head{margin-bottom:56px}
.lib .page-head small{display:block;margin-bottom:10px;color:color-mix(in srgb,var(--fg) 80%,transparent);font-size:13px;font-weight:450}
.lib .page-head h1{font-size:clamp(40px,4.5vw,64px);line-height:1;letter-spacing:-.05em;font-weight:700}
.lib .page-head p{margin:20px 0 0;max-width:34em;font-size:clamp(16px,1.25vw,18px);line-height:1.4;color:color-mix(in srgb,var(--fg) 80%,transparent)}
.lib .toolbar{margin-bottom:12px}
.lib .tabs-line{border-radius:10px;background:color-mix(in srgb,var(--fg) 6%,transparent)}
.lib .tabs-line a{font-weight:500}
.lib .search-in{width:280px;height:36px;border:0;background:color-mix(in srgb,var(--fg) 6%,transparent)}
.lib .chips{margin-bottom:46px}
.lib .chip{height:28px;border:0;background:color-mix(in srgb,var(--fg) 6%,transparent)}
.lib .chip.on{background:var(--fg);color:var(--bg)}
.lib .grid{--cols:4;gap:44px 12px}
.lib .card__pv{border-radius:12px}
@media(max-width:1100px){.lib .grid{--cols:3}}
@media(max-width:860px){.lib .grid{--cols:2}}
@media(max-width:560px){.lib .grid{--cols:1}}

/* ---------- responsive for the parity layer ---------- */
@media(max-width:1100px){
  .bento .b-lg,.bento .b-md{grid-column:span 12}.bento .b-third{grid-column:span 6}
  .bento>.b-lg,.bento>.b-md,.bento>.b-third{height:380px}
  .ship__p{height:460px}
}
@media(max-width:980px){
  .duo{grid-template-columns:1fr}.duo>*+*{border-left:0;border-top:1px solid var(--line)}
  .faq{grid-template-columns:1fr;gap:28px}
  .usedby__g{grid-template-columns:1fr;gap:32px}
  .ship__p{height:auto;min-height:420px}
}
@media(max-width:767px){
  .hero{padding-top:56px}
  .usedby{margin-top:80px}
  .bento .b-third{grid-column:span 12}
  .big__head{flex-direction:column;align-items:flex-start;gap:20px;margin-bottom:40px}
}
.dock2{top:auto;bottom:-29px}
/* section seams: soft blue light where sections meet (painted from the hero shader once) */
.seams{position:absolute;left:0;right:0;top:0;height:0;z-index:-1;pointer-events:none}
.seams i{position:absolute;left:0;right:0;height:320px;opacity:.85;background-size:cover;background-position:var(--bp,50% 30%);-webkit-mask:radial-gradient(44% 50% at var(--x) 50%,#000 0,rgba(0,0,0,.55) 42%,rgba(0,0,0,.15) 72%,transparent 100%);mask:radial-gradient(44% 50% at var(--x) 50%,#000 0,rgba(0,0,0,.55) 42%,rgba(0,0,0,.15) 72%,transparent 100%)}
main{position:relative;isolation:isolate}
/* pricing head: left aligned like the home hero scale, plans fill the 1104 container */
.price-wrap{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;padding-top:41px;text-align:left}
.price-wrap h1{margin:0;font-size:clamp(44px,5.9vw,88px);line-height:1;letter-spacing:-.05em;font-weight:700}
.price-wrap p{margin:20px 0 0;max-width:30em;color:var(--muted);font-size:clamp(16px,1.25vw,18px);line-height:1.5}
.price-wrap__bill{flex:none}
.plans{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:56px}
.plan{border-radius:20px}
@media(max-width:767px){.price-wrap{flex-direction:column;align-items:flex-start}}
.det>*,.det__info{min-width:0}
.cmd{min-width:0;max-width:100%}
.cmd code{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* =====================================================================================
   reference parity, part 2 (Nov 2026): library list pages + detail pages, measured on
   the reference library and detail pages
   at 1440 and 2560. Same 1104px container as every other page.
   ===================================================================================== */
:root{--border:oklch(.24 .004 286);--fg80:color-mix(in srgb,var(--fg) 80%,transparent);--ease-out:cubic-bezier(.23,1,.32,1)}
/* ---------- list page head ---------- */
.lib{padding:64px 0 96px}
.lhead h1{margin:0;font-size:13px;line-height:17.55px;font-weight:450;letter-spacing:normal;color:var(--muted)}
.lhead__t{margin:12px 0 0;font-size:58px;line-height:59.16px;font-weight:700;letter-spacing:-2.61px;color:var(--fg)}
.lhead__d{margin:16px 0 0;max-width:540px;font-size:17px;line-height:25.5px;color:var(--muted);letter-spacing:-.176px}
.lbar{margin-top:52px}
.lbar__row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cattabs{display:inline-flex;align-items:center;gap:4px;padding:3px;border-radius:12px;background:color-mix(in srgb,var(--fg) 6%,transparent);max-width:100%;overflow-x:auto;scrollbar-width:none}
.cattabs::-webkit-scrollbar{display:none}
.cattabs a{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-radius:9px;font-size:13px;line-height:19.5px;font-weight:500;color:var(--muted);white-space:nowrap;transition:background-color .2s,color .2s}
.cattabs a:hover{color:var(--fg)}
.cattabs a.on{background:var(--fg);color:var(--bg)}
.cattabs small{opacity:.6}
.catsearch{position:relative;flex:none;display:block;width:280px;height:36px}
.catsearch svg{position:absolute;left:12px;top:10px;width:16px;height:16px;color:var(--muted);pointer-events:none}
.catsearch input{width:100%;height:36px;padding:0 44px 0 36px;border:1px solid transparent;border-radius:10px;background:color-mix(in srgb,var(--fg) 6%,transparent);color:var(--fg);font-size:14px;outline:0;transition:border-color .2s}
.catsearch input::placeholder{color:var(--muted)}
.catsearch input:focus{border-color:color-mix(in srgb,var(--accent) 70%,transparent)}
.catsearch input::-webkit-search-cancel-button{display:none}
.catsearch kbd{position:absolute;right:10px;top:8px;height:20px;padding:0 6px;border:0;border-radius:6px;background:color-mix(in srgb,var(--fg) 8%,transparent);color:var(--muted);font:500 11px/20px var(--font)}
.catchips{display:flex;gap:6px;margin-top:12px;padding-bottom:2px;overflow-x:auto;scrollbar-width:none}
.catchips::-webkit-scrollbar{display:none}
.catchips .chip,.lib .catchips .chip{height:28px;padding:0 12px;border:1px solid transparent;border-radius:999px;background:color-mix(in srgb,var(--fg) 7%,transparent);color:var(--muted);font-size:12px;font-weight:500}
.catchips .chip:hover{color:var(--fg)}
.catchips .chip.on,.lib .catchips .chip.on{background:var(--fg);color:var(--bg);border-color:transparent}
.lbody{margin-top:29px}
.lbody--chips{margin-top:12px}
.lbody .empty{margin-top:24px}
/* ---------- component / skill card: preview only, name row slides up on hover ---------- */
.lgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0 -6px;padding-top:8px}
.lc{position:relative;padding:6px;overflow:hidden;min-width:0}
.lc__in{transform:translateY(18px);transition:transform .3s var(--ease-out)}
.lc__pv{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:14px;background:var(--card-2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),0 1px 3px rgba(0,0,0,.07)}
.lc__pv>.demo{border-radius:inherit}
.lc__meta{display:flex;align-items:center;gap:8px;padding:12px 4px 0;transform:translateY(30px);transition:transform .3s var(--ease-out)}
.lc__meta h3,.tc__meta h3{margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;line-height:18px;font-weight:500;color:var(--fg80)}
.lc__av{flex:none;display:grid;place-items:center;width:18px;height:18px;border-radius:30%;background:var(--fg);color:var(--bg);font:800 9px/1 var(--font);box-shadow:0 .5px 1px rgba(0,0,0,.25)}
.lc__save{position:relative;z-index:2;flex:none;display:grid;place-items:center;width:24px;height:21px;margin-left:auto;padding:0;border:0;border-radius:6px;background:transparent;color:var(--muted);cursor:pointer;transition:color .2s}
.lc__save svg{width:14px;height:14px}
.lc__save:hover{color:var(--fg)}
.lc__save.on{color:var(--accent-2)}.lc__save.on svg{fill:currentColor}
.lc__link{position:absolute;inset:0;z-index:1;border-radius:14px}
.lc__link:focus-visible{outline:2px solid color-mix(in srgb,var(--accent) 70%,transparent);outline-offset:-2px}
.lc:hover .lc__in,.lc:focus-within .lc__in,.lc:hover .lc__meta,.lc:focus-within .lc__meta{transform:none}
@media (hover:none){.lc__in,.lc__meta{transform:none}}
/* ---------- template card (always shows its name) ---------- */
.tgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 12px}
.tc,.thcard{position:relative;min-width:0}
.tc__pv{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:14px;background:var(--card-2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.tc__pv .tframe{border-radius:inherit}
.tc__meta{display:flex;align-items:center;gap:8px;padding:12px 4px 0}
.tc__meta h3{line-height:19.5px}
.tc__meta>span:not(.lc__av):not(.thcard__dot){margin-left:auto;font-size:11px;line-height:16.5px;color:var(--muted);white-space:nowrap}
.tc__meta>span+.lc__save{margin-left:2px}
.tc:hover .tc__pv,.thcard:hover .thcard__pv{box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
/* ---------- theme card ---------- */
.thgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 24px}
.thcard__pv{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:14px;background:var(--card-2)}
.thcard__dot{flex:none;width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.tmk{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--t-bg);color:var(--t-fg)}
.tmk__card{width:81%;padding:16px;border-radius:10px;border:1px solid var(--t-line);background:var(--t-card)}
.tmk__card b{display:block;font-size:14px;line-height:21px;font-weight:600}
.tmk__card small{display:block;margin-top:4px;font-size:12px;line-height:18px;color:var(--t-muted)}
.tmk__btns{display:flex;gap:8px;margin-top:12px}
.tmk__btns span{flex:1;display:grid;place-items:center;height:32px;border-radius:8px;font-size:12px;font-weight:500}
.tmk__b1{background:var(--t-accent);color:var(--t-bg)}
.tmk__b2{border:1px solid var(--t-line);color:var(--t-fg)}
.tmk--big{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:10px;padding:16px}
.tmk__top{display:flex;align-items:center;gap:10px;height:22px;padding:0 4px}
.tmk__top .sp{flex:1}
.tmk__logo{width:14px;height:14px;border-radius:4px;background:var(--t-fg)}
.tmk__bar{display:block;height:8px;border-radius:99px;background:var(--t-fg)}
.tmk__line{display:block;height:6px;border-radius:99px;background:var(--t-muted)}
.tmk__body{flex:1;display:grid;grid-template-columns:1.6fr 1fr;gap:10px;min-height:0}
.tmk--big .tmk__card{width:auto;display:flex;flex-direction:column;gap:8px;padding:12px}
.tmk__fill{flex:1}
.tmk--big .tmk__btns{margin-top:0;width:200px}
.tmk--big .tmk__btns span{height:28px;font-size:11px}
.tmk__side{display:flex;flex-direction:column;gap:8px}
.tmk__panel{flex:1;border-radius:8px;background:color-mix(in srgb,var(--t-accent) 22%,var(--t-card))}
.tmk__input{height:24px;border-radius:6px;border:1px solid var(--t-line);background:var(--t-card)}
/* ---------- icons ---------- */
.lib .ic-grid{grid-template-columns:repeat(auto-fill,minmax(124px,1fr));gap:12px}
.lib .ic{border:0;border-radius:14px;background:var(--card-2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.lib .ic span{color:var(--muted)}
/* ---------- detail pages ---------- */
.dx{padding:48px 0 96px}
.dx__crumbs{display:flex;align-items:center;gap:8px;margin:0;height:21px;color:var(--muted);font-size:14px;line-height:21px}
.dx__crumbs svg{width:14px;height:14px;opacity:.7}
.dx__crumbs a:first-child svg{width:16px;height:16px;opacity:1}
.dx__crumbs a:hover{color:var(--fg)}
.dx__crumbs span{color:var(--muted)}
.dx__hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,9fr);gap:56px;align-items:center;margin-top:56px}
.dx__info{min-width:0}
.dx__author{display:flex;align-items:center;gap:10px;font-size:15px;line-height:22.5px;color:var(--fg80)}
.dx__av{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--fg);color:var(--bg);font:800 14px/1 var(--font);box-shadow:0 0 0 1px color-mix(in srgb,var(--fg) 15%,transparent)}
.dx h1{margin:16px 0 0;font-size:32px;line-height:38.4px;font-weight:600;letter-spacing:-.32px}
.dx__desc{margin:12px 0 0;font-size:15px;line-height:24px;color:var(--muted)}
.dx__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px;font-size:15px;line-height:22.5px;color:var(--muted)}
.dx__meta i{font-style:normal}
.dx__meta a:hover{color:var(--fg)}
.dx__actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.btn--xl{height:44px;padding:0 20px;gap:8px;border-radius:8px;font-size:16px;font-weight:500}
.btn--xl svg{width:18px;height:18px}
.dx__save{height:44px;padding:0 16px;gap:8px;border-radius:8px;font-size:16px}
.dx__save svg{width:18px;height:18px}
.dx__save.on{color:var(--accent-2)}.dx__save.on svg{fill:currentColor}
.dx__stage{min-width:0}
.dx__frame{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:12px;background:var(--card-2);box-shadow:0 0 0 1px color-mix(in srgb,var(--fg) 8%,transparent),0 25px 50px -12px rgba(0,0,0,.25)}
.dx__pv{position:absolute;inset:0}
.dx__pv>.demo{border-radius:inherit}
.dx__pv--skill{background:radial-gradient(80% 80% at 50% 40%,var(--card-2),var(--card))}
.dx__frame .tframe{border-radius:inherit}
.dx__tools{position:absolute;right:12px;bottom:12px;z-index:3;display:flex;align-items:center;gap:8px}
.dx__tool{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border:0;border-radius:8px;background:rgba(0,0,0,.85);color:#fff;font-size:15px;font-weight:500;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background-color .2s}
.dx__tool:hover{background:#000}
.dx__tool svg{width:16px;height:16px}
.dx__tool--tag{cursor:default;font-size:13px;height:32px}
.dx__tools .seg{height:40px;padding:4px;border-radius:8px;background:rgba(0,0,0,.85);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:0}
.dx__tools .seg button{height:32px;color:rgba(255,255,255,.7)}
.dx__tools .seg button.on{color:#fff}
.dx__tools .seg__thumb{top:4px;height:32px;border-radius:6px;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.dx__tools .seg button{width:36px;padding:0;justify-content:center;border-radius:6px}
.dx__tabs{margin-top:96px;border-bottom:1px solid var(--border)}
.dx__tabs span{display:inline-block;height:38px;padding:0 2px;font-size:16px;line-height:24px;font-weight:500;color:var(--fg);box-shadow:inset 0 -2px 0 var(--fg)}
.dx__body{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:48px;padding-top:32px}
.dx__main{min-width:0;max-width:720px}
.dx__main>p{margin:0 0 16px;font-size:16px;line-height:28px;color:var(--fg80)}
.dx__main>p:last-of-type{margin-bottom:0}
.dx__sec{padding-top:24px}
.dx__sec h2{margin:0;font-size:16px;line-height:28px;font-weight:500;color:var(--fg)}
.dx__sec>p{margin:12px 0 0;font-size:15px;line-height:24px;color:var(--muted)}
.dx__sec>.cmd,.dx__sec>.dx__code,.dx__sec>.ticks,.dx__sec>.dx__tokens{margin-top:12px}
.dx .cmd{height:44px;border:0;border-radius:12px;background:transparent;box-shadow:0 0 0 1px var(--border);font-size:13px}
.dx__code{overflow:hidden;border-radius:12px;box-shadow:0 0 0 1px var(--border)}
.dx__code .ftabs{height:41px;padding:0 8px;gap:0;align-items:stretch;border-bottom:1px solid var(--border)}
.dx__code .ftabs button{height:41px;padding:0 10px;font:12px var(--mono);font-weight:450;color:var(--muted);border-bottom-width:1px}
.dx__code .ftabs button.on{color:var(--fg);border-bottom-color:var(--fg)}
.dx__code pre.code{padding:16px;font-size:13px;line-height:20px;max-height:480px}
.dx__code .tree,.dx__code .md pre{margin:0;padding:16px;font:13px/20px var(--mono);color:var(--fg80);overflow:auto;max-height:480px;white-space:pre}
.dx__code .md{border:0;background:transparent;padding:0}
.dx .ticks{margin:12px 0 0}
.dx__aside{min-width:0}
.dx__kv{margin:0;display:flex;flex-direction:column;gap:12px;font-size:14px;line-height:21px}
.dx__kv>div{display:flex;justify-content:space-between;gap:16px}
.dx__kv dt{color:var(--muted);flex:none}
.dx__kv dd{margin:0;color:var(--fg80);text-align:right;min-width:0}
.dx__sw{display:inline-block;width:10px;height:10px;margin-right:6px;border-radius:3px;vertical-align:-1px}
.dx__tags-w{margin-bottom:32px}
.dx__tags-w h2{margin:0 0 16px;font-size:16px;line-height:24px;font-weight:500}
.dx__tags{display:flex;flex-wrap:wrap;gap:8px}
.dx__tags span{display:inline-flex;align-items:center;height:36px;padding:0 12px;border-radius:8px;box-shadow:inset 0 0 0 1px var(--border);font-size:14px;color:var(--fg80)}
.dx__tokens{display:grid;gap:0;border-radius:12px;box-shadow:0 0 0 1px var(--border);overflow:hidden}
.dx__tokens>div{display:grid;grid-template-columns:16px 110px 1fr auto;align-items:center;gap:12px;height:44px;padding:0 16px;font-size:14px}
.dx__tokens>div+div{border-top:1px solid var(--border)}
.dx__tokens i{width:16px;height:16px;border-radius:5px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.dx__tokens code{font:13px var(--mono);color:var(--fg)}
.dx__tokens span{color:var(--muted)}
.dx__tokens .v{color:var(--muted)}
.dx__more{margin-top:80px}
.dx__more-h{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.dx__more-h h2{margin:0;font-size:20px;line-height:30px;font-weight:500;letter-spacing:-.2px}
.dx__all{display:inline-flex;align-items:center;gap:4px;font-size:14px;line-height:21px;color:var(--muted)}
.dx__all:hover{color:var(--fg)}
.dx__all svg{width:14px;height:14px}
.dx__more>.tgrid,.dx__more>.thgrid{margin-top:24px}
.dx__explore{margin-top:72px;padding-top:24px}
.dx__explore h2{margin:0;font-size:18px;line-height:28px;font-weight:600}
.dx__chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.dx__chips a{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;background:color-mix(in srgb,var(--fg) 6%,transparent);font-size:12px;font-weight:500;color:var(--fg);transition:background-color .2s}
.dx__chips a:hover{background:color-mix(in srgb,var(--fg) 11%,transparent)}
/* ---------- responsive ---------- */
@media(max-width:1279px){.lgrid{grid-template-columns:repeat(3,minmax(0,1fr))}.thgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1023px){.lgrid,.thgrid,.tgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:767px){
  .lhead__t{font-size:44px;line-height:46px;letter-spacing:-1.9px}
  .lbar__row{flex-direction:column;align-items:stretch}
  .catsearch{width:100%}
  .dx__hero{grid-template-columns:1fr;gap:40px;margin-top:40px}
  .dx__tabs{margin-top:64px}
  .dx__body{grid-template-columns:1fr;gap:48px}
  .lgrid{margin:0 -3px}.lc{padding:3px}
}
@media(max-width:560px){.tgrid,.thgrid{grid-template-columns:1fr}}
@media(max-width:419px){.lgrid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.lc__in,.lc__meta{transition:none}}
.dx__save--i{width:44px;padding:0;justify-content:center}
/* ---------- pricing (reference /pricing parity) ---------- */
.pp{padding:80px 0 96px}
.pp-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px}
.pp-head h1{margin:0;font-size:clamp(44px,5.9vw,88px);line-height:1;font-weight:700;letter-spacing:-.05em}
.pp-head p{margin:20px 0 0;max-width:440px;font-size:17px;line-height:25.5px;color:var(--muted)}
.pp-bill{flex:none;height:44px;padding:4px;border-radius:12px;background:color-mix(in srgb,var(--fg) 6%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fg) 5%,transparent)}
.pp-bill button{height:36px;padding:0 16px;border-radius:9px;font-size:14px;font-weight:500}
.pp-bill button.on{color:var(--bg)}
.pp-bill .seg__thumb{top:4px;height:36px;border-radius:9px;background:var(--fg)}
.pp-plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:56px}
.pp-plan{display:flex;flex-direction:column;padding:24px;border-radius:20px;background:var(--panel);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fg) 7.5%,transparent)}
.pp-plan--pro{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 95%,transparent)}
.pp-plan h2{display:flex;align-items:center;gap:8px;margin:0;font-size:19px;line-height:22.8px;font-weight:500;letter-spacing:-.418px}
.pp-badge{display:inline-flex;align-items:center;height:17px;padding:0 6px;border-radius:5px;background:var(--accent);color:#fff;font-size:11px;font-weight:600;box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.pp-sub{margin:4px 0 0;font-size:14px;line-height:21px;color:var(--muted)}
.pp-price{display:flex;align-items:center;gap:12px;margin-top:24px;height:50px}
.pp-price b{font-size:56px;line-height:50.4px;font-weight:600;letter-spacing:-2.24px}
.pp-price span{font-size:13px;line-height:17.55px;color:var(--muted)}
.pp-lim{display:flex;justify-content:space-between;gap:12px;margin-top:24px;padding:10px 0;border-top:1px solid color-mix(in srgb,var(--fg) 7%,transparent);border-bottom:1px solid color-mix(in srgb,var(--fg) 7%,transparent);font-size:13px;line-height:19.5px}
.pp-lim .m{color:var(--muted)}
.pp-btn{width:100%;height:40px;margin-top:20px;justify-content:center;border-radius:10px}
.pp-btn--alt{margin-top:8px}
.pp-plan ul{display:grid;gap:12px;margin:24px 0 0;padding:0;list-style:none}
.pp-plan li{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:20px;color:color-mix(in srgb,var(--fg) 82%,transparent)}
.pp-plan li svg{flex:none;width:18px;height:18px;margin-top:1px;color:var(--muted)}
.pp-plan--pro li svg{color:var(--accent-2)}
.pp-note{margin:40px 0 0;text-align:center;font-size:13px;line-height:19.5px;color:var(--muted)}
.pp-note a{text-decoration:underline;text-underline-offset:3px}
.pp-cmp{margin-top:116px}
.pp-cmp h2{margin:0;font-size:46px;line-height:1.02;font-weight:700;letter-spacing:-.045em}
.pp-lead{margin:12px 0 0;font-size:17px;line-height:25.5px;color:var(--muted)}
.pp-table{margin-top:56px;font-size:14px}
.pp-thead,.pp-row{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,1fr));gap:16px}
.pp-thead{position:sticky;top:56px;z-index:2;padding:16px 0;background:var(--bg);border-bottom:1px solid color-mix(in srgb,var(--fg) 8%,transparent)}
.pp-thead>div{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:0 16px}
.pp-thead b{font-size:15px;line-height:22.5px;font-weight:500}
.pp-thead small{font-size:12px;line-height:18px;color:var(--muted)}
.pp-thead .btn{margin-top:8px;width:100%;justify-content:center}
.pp-grp{padding:32px 0 12px;font-size:13px;line-height:19.5px;font-weight:500;color:var(--muted)}
.pp-row{min-height:44px;align-items:center}
.pp-row>div{padding:0 16px;color:var(--muted);font-size:13px}
.pp-k{padding-left:4px;color:var(--fg)}
.pp-hl{background:color-mix(in srgb,var(--accent) 7%,transparent)}
.pp-row>.pp-hl{align-self:stretch;display:flex;align-items:center}
.pp-dot{display:inline-block;width:6px;height:6px;border-radius:2px;background:var(--accent)}
.pp-no{color:var(--dim)}
@media(max-width:767px){.pp-head{flex-direction:column;align-items:flex-start}.pp-plans{grid-template-columns:1fr}.pp-thead,.pp-row{grid-template-columns:1.2fr 1fr 1fr;gap:8px}.pp-thead>div,.pp-row>div{padding:0 8px}}
/* home: section rhythm tuned so every heading lands on the reference y (±10px) at 1440 and 2560 */
.usedby__g{margin-top:49px}
@media(min-width:1101px){
  .big:has(>.bento)>.big__head{margin-bottom:97px}
  .big:has(>.bento){padding-bottom:calc(var(--g-sec) - 15px)}
  .big:has(>.ship)>.big__head{margin-bottom:82px}
}
/* ---------- MCP (reference /mcp parity: 1040px column, console card) ---------- */
.mx{width:min(100% - 48px,1040px);margin-inline:auto;padding:64px 0 96px}
.mx-head{display:flex;align-items:flex-end;justify-content:space-between;gap:48px}
.mx-ic{display:grid;place-items:center;width:48px;height:48px;margin-bottom:38px;border-radius:14px;background:var(--panel);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fg) 10%,transparent),0 1px 2px rgba(0,0,0,.5);color:var(--fg)}
.mx-ic svg{width:22px;height:22px}
.mx-head h1{margin:0;font-size:60px;line-height:1;font-weight:700;letter-spacing:-3px}
.mx-side{flex:none;width:440px;padding-bottom:4px}
.mx-side p{margin:0;font-size:17px;line-height:25.5px;color:var(--muted)}
.mx-side .btn{margin-top:20px;gap:6px}
.mx-side .btn svg{width:14px;height:14px}
.mx-console{margin-top:49px;border-radius:20px;background:oklch(.172 .003 286);box-shadow:0 1px 2px rgba(0,0,0,.5),inset 0 0 0 1px color-mix(in srgb,var(--fg) 7%,transparent);overflow:hidden}
.mx-console .ftabs{display:flex;gap:4px;padding:6px;border-bottom:1px solid color-mix(in srgb,var(--fg) 7%,transparent);overflow-x:auto;scrollbar-width:none}
.mx-console .ftabs button{height:32px;padding:0 12px;border:0;border-radius:9px;font:450 12.5px var(--font);color:var(--muted);white-space:nowrap}
.mx-console .ftabs button.on{background:color-mix(in srgb,var(--fg) 8%,transparent);color:var(--fg);border:0}
.mx-body{padding:32px}
.mx-ph{display:flex;align-items:center;justify-content:space-between;gap:16px}
.mx-ph h2{margin:0;font-size:16px;line-height:24px;font-weight:500}
.mx-ph .btn{gap:6px;color:var(--muted)}.mx-ph .btn svg{width:14px;height:14px}
.mx-steps{display:grid;gap:24px;margin:24px 0 0;padding:0;list-style:none}
.mx-steps li{display:grid;grid-template-columns:40px minmax(0,1fr)}
.mx-n{font-size:14px;line-height:23px;color:var(--muted)}
.mx-steps h3{margin:0;font-size:15px;line-height:22.5px;font-weight:500}
.mx-steps p{margin:4px 0 0;font-size:14px;line-height:22.75px;color:var(--muted)}
.mx-cmd{position:relative;margin-top:12px;border-radius:12px;background:#0b0b0d;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.mx-cmd pre.code{padding:12px 48px 12px 16px;font-size:13px;line-height:22.1px;max-height:none}
.mx-cmd pre.code .ln{display:none}
.mx-cmd .icon-btn{position:absolute;right:8px;top:8px}
.mx-foot{margin:24px 0 0;font-size:13px;line-height:19.5px;color:var(--muted)}
.mx-tools{margin-top:229px}
.mx-tools h2{margin:0;font-size:46px;line-height:1.02;font-weight:700;letter-spacing:-2.07px}
.mx-lead{margin:12px 0 0;max-width:440px;font-size:17px;line-height:25.5px;color:var(--muted)}
.mx-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:48px}
.mx-grid>div{padding:18px;border-radius:20px;background:var(--panel);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fg) 7.5%,transparent)}
.mx-grid code{font:500 13px var(--mono);color:var(--fg)}
.mx-grid p{margin:8px 0 0;font-size:14px;line-height:21px;color:var(--muted)}
@media(max-width:860px){.mx-head{flex-direction:column;align-items:flex-start;gap:24px}.mx-side{width:auto}.mx-head h1{font-size:44px;letter-spacing:-2px}.mx-grid{grid-template-columns:1fr}.mx-body{padding:20px}}
/* ---------- 8pt AI (reference /ai parity: 760px solid accent prompt box) ---------- */
.ai-hero{padding:110px 0 80px}
.ai-hero h1{margin:0 0 44px;font-size:58px;line-height:58px;font-weight:700;letter-spacing:-2.9px}
.ai-box{width:min(760px,100%);padding:12px;border:0;border-radius:18px;background:var(--accent);color:#fff;box-shadow:none}
.ai-box textarea{min-height:82px;padding:4px;color:#fff;font-size:15px}
.ai-box textarea::placeholder{color:rgba(255,255,255,.72)}
.ai-box .seg{height:36px;padding:2px;border-radius:10px;background:rgba(255,255,255,.15)}
.ai-box .seg button{height:32px;color:rgba(255,255,255,.7);font-weight:500}
.ai-box .seg button.on{color:#fff}
.ai-box .seg__thumb{top:2px;height:32px;border-radius:8px;background:rgba(255,255,255,.25);box-shadow:none}
.ai-box .btn--line{background:transparent;color:rgba(255,255,255,.85);height:32px}
.ai-box .btn--line:hover{background:rgba(255,255,255,.12)}
.ai-box .ai-credits{border:0;padding:0 6px;color:rgba(255,255,255,.7);font-size:12.5px;white-space:nowrap}
.ai-box .ai-credits b{color:#fff}
.ai-box .btn--primary{height:36px;padding:0 14px;background:#fff;color:var(--accent);box-shadow:none;font-size:14px}
.ai-box .btn--primary:hover{opacity:.92}
.ai-ex{width:min(760px,100%);gap:10px;margin-top:24px}
.ai-ex button{flex-direction:column-reverse;justify-content:flex-end;height:148px;padding:0;border:0;border-radius:14px;background:var(--panel);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fg) 7%,transparent);font-size:14px;font-weight:500;overflow:hidden}
.ai-ex button{align-items:stretch;padding:8px 0 0 12px}
.ai-ex .m{flex:1;height:auto;margin:8px 0 0 0;border-radius:8px 0 0 0;border-bottom:0;border-right:0}
.ai-note{margin:28px 0 0;font-size:13px;line-height:19.5px;color:var(--muted)}
.ai-note a{color:var(--fg);font-weight:500}
.lib .pub{margin-top:52px}
.lib .bl{margin-top:52px}
.lib .bl .sec__head h2{font-size:20px;line-height:30px;font-weight:500;letter-spacing:-.2px}
.lib .bl .sec{margin-top:56px}.lib .bl .sec:first-child{margin-top:0}
.lib .acct{margin-top:52px}
@media(max-width:860px){.mx-tools{margin-top:96px}.mx-tools h2{font-size:34px;letter-spacing:-1.4px}}

/* ── footer: mirrors 21st.dev (measured 1440/2560, Nov 2026) ── */
.foot{margin-top:0;padding:0;border-top:1px solid color-mix(in srgb,var(--fg) 8%,transparent);overflow:hidden;font-weight:450}
.foot__in,.foot__cats,.foot__mark{width:var(--wrap);margin-inline:auto}
.foot__in{display:flex;gap:64px;padding:49px 0 48px}
.foot__brand{flex:none;width:13%;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.foot__logo{display:block;color:var(--fg);transition:filter .2s}
.foot__logo:hover{filter:brightness(1.25)}
.foot__logo svg{display:block;width:60px;height:60px}
.foot__brand p{margin:0;font-size:13px;line-height:19.5px;color:var(--muted)}
.foot__tag{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-size:13px;line-height:19.5px;color:var(--muted)}
.foot__tag i{display:grid;place-items:center;width:16px;height:16px;border-radius:3px;background:var(--fg);color:var(--bg);font:600 10px/1 Inter,system-ui,sans-serif;font-style:normal}
.foot__cols{flex:1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:40px 32px}
.foot__col p{margin:0;font-size:13px;line-height:19.5px;color:var(--muted)}
.foot__col ul{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.foot__col li{display:flex;align-items:center;height:24px}
.foot__col a{display:inline-flex;align-items:center;gap:4px;padding:4px 0;font-size:14px;line-height:21px;color:color-mix(in srgb,var(--fg) 75%,transparent);transition:color .2s}
.foot__col a:hover{color:var(--fg)}
.foot__ext{width:12px;height:12px;color:var(--muted)}
.foot__cats{padding:0 0 48px;line-height:24px}
.foot__cats>a{font-size:13px;line-height:19.5px;color:var(--muted);transition:color .2s}
.foot__cats>a:hover,.foot__cats li a:hover{color:var(--fg)}
.foot__cats ul{margin:12px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px 16px}
.foot__cats li{line-height:24px}
.foot__cats li a{font-size:13px;line-height:19.5px;color:color-mix(in srgb,var(--fg) 60%,transparent);transition:color .2s}
.foot__mark{height:158px;background:radial-gradient(circle,color-mix(in srgb,var(--fg) 20%,transparent) 1.5px,transparent 1.7px) 0 0/6px 6px;-webkit-mask:url(/assets/logo.svg) left top/100% auto no-repeat;mask:url(/assets/logo.svg) left top/100% auto no-repeat}
@media (max-width:767px){
  .foot__in{flex-direction:column;gap:40px}
  .foot__brand{order:1;width:auto}
  .foot__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 32px}
  .foot__mark{height:72px}
}
@media (max-width:1279px){.foot__tag{white-space:normal}}

/* ── detail fixes (Nov 2026, round 2) ── */
/* 1. nav: no bar, no border. 21st's recipe: 7 stacked backdrop-blur bands (0.5→28px) masked into a progressive
   blur that runs 36px past the nav, plus a bg-tinted gradient that fades to nothing. Same at the top and on scroll. */
.nav,.nav.scrolled{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:0;box-shadow:none}
.nav__glass{position:absolute;inset:0 0 -36px;z-index:-1;pointer-events:none}
.nav__glass i,.nav__glass b{position:absolute;inset:0}
.nav__glass i:nth-child(1){-webkit-backdrop-filter:blur(.5px);backdrop-filter:blur(.5px);-webkit-mask:linear-gradient(transparent 62.5%,#000 75%,#000 87.5%,transparent);mask:linear-gradient(transparent 62.5%,#000 75%,#000 87.5%,transparent)}
.nav__glass i:nth-child(2){-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);-webkit-mask:linear-gradient(transparent 50%,#000 62.5%,#000 75%,transparent 87.5%);mask:linear-gradient(transparent 50%,#000 62.5%,#000 75%,transparent 87.5%)}
.nav__glass i:nth-child(3){-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);-webkit-mask:linear-gradient(transparent 37.5%,#000 50%,#000 62.5%,transparent 75%);mask:linear-gradient(transparent 37.5%,#000 50%,#000 62.5%,transparent 75%)}
.nav__glass i:nth-child(4){-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);-webkit-mask:linear-gradient(transparent 25%,#000 37.5%,#000 50%,transparent 62.5%);mask:linear-gradient(transparent 25%,#000 37.5%,#000 50%,transparent 62.5%)}
.nav__glass i:nth-child(5){-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);-webkit-mask:linear-gradient(transparent 12.5%,#000 25%,#000 37.5%,transparent 50%);mask:linear-gradient(transparent 12.5%,#000 25%,#000 37.5%,transparent 50%)}
.nav__glass i:nth-child(6){-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);-webkit-mask:linear-gradient(transparent,#000 12.5%,#000 25%,transparent 37.5%);mask:linear-gradient(transparent,#000 12.5%,#000 25%,transparent 37.5%)}
.nav__glass i:nth-child(7){-webkit-backdrop-filter:blur(28px);backdrop-filter:blur(28px);-webkit-mask:linear-gradient(#000,#000 12.5%,transparent 25%);mask:linear-gradient(#000,#000 12.5%,transparent 25%)}
.nav__glass b{background:linear-gradient(color-mix(in srgb,var(--bg) 86%,transparent),color-mix(in srgb,var(--bg) 62%,transparent) 45%,color-mix(in srgb,var(--bg) 22%,transparent) 78%,transparent)}

/* 7. logo: the overlap of the two shapes is the button blue, wherever the logo is drawn */
.logo i{position:relative}
.logo i::after{display:none;content:"";position:absolute;inset:0;background:var(--accent);-webkit-mask:url(/assets/logo-overlap.svg) left center/contain no-repeat;mask:url(/assets/logo-overlap.svg) left center/contain no-repeat}
.mk{display:block}
.foot__logo .mk{width:60px;height:60px}

/* 8. dotted footer wordmark: blue dots, same crop; the overlap in brighter, denser blue */
.foot__mark{position:relative;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 62%,transparent) 1.5px,transparent 1.7px) 0 0/6px 6px}
.foot__mark::after{content:none}

/* 6. our mark instead of the white "8" squares */
.foot__tag .foot__tagmk{flex:none;width:16px;height:16px;color:var(--fg)}
.card__av,.lc__av,.dx__av{background:#141417;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);font-size:0}
.card__av .mk,.lc__av .mk,.dx__av .mk{width:58%;height:58%}
.lx-modal header .card__av{background:#141417;color:#fff}
.mx-ic .mk{width:24px;height:24px;color:var(--fg)}

/* 2. official third-party marks */
.ship__mk{flex:none;width:24px;height:24px;color:#fff}
.ship__p--c .ship__mk{color:#171717}
.mw__t{display:inline-flex;align-items:center;gap:6px}
.mw__bm{flex:none;width:13px;height:13px}
.mw__bm--cc{color:#D97757}
.cx-side>b .cx-bm{flex:none;width:16px;height:16px;margin-right:6px;border-radius:4px}
.cx-side>b{align-items:center}
.cx-new i svg{width:16px;height:16px}
.ftabs button{display:inline-flex;align-items:center;gap:7px}
.ft__bm{flex:none;width:14px;height:14px}
.ft__bm--cc,.mx-bm.mx-bm--cc,.mx-bm--cc{color:#D97757}
.mx-ph h2{display:inline-flex;align-items:center;gap:10px}
.mx-bm{flex:none;width:18px;height:18px}
.mdl{flex:none;width:16px;height:16px;color:var(--fg)}
.mdl--claude{color:#D97757}.mdl--deepseek{color:#4D6BFE}.mdl--qwen{color:#615CED}
#aim .dd__menu button{justify-content:flex-start;gap:10px}
#aim .dd__menu button small{margin-left:auto}
#aim .dd__menu button.on::after{margin-left:8px}
.aimb__ic{display:inline-grid;place-items:center;font-style:normal}
.aimb__ic .mdl{width:14px;height:14px}

/* 3. compatibility logo strip (21st proportions: 20px mark + 17px semibold name, 55% → 90% on hover) */
.usedby__l{gap:20px 28px}
.usedby__l .lg{display:inline-flex;align-items:center;gap:10px;opacity:.55;transition:opacity .2s;font-size:17px;font-weight:600;letter-spacing:-.02em;color:var(--fg)}
.usedby__l .lg:hover{opacity:.9}
.usedby__l .lg b{font-weight:600;white-space:nowrap}
.lg__i{flex:none;width:20px;height:20px;color:var(--fg)}
.lg__i *{fill:currentColor}
.hero .usedby__note{margin:32px 0 0;max-width:none;font-size:12px;line-height:18px;letter-spacing:0;color:var(--dim)}

/* 4. previews never show scrollbars (content still scrolls) */
.tframe,.tframe iframe,.card__pv,.card__pv *,.lx-scroll,.lx-scroll *,.wall,.wall *,.bento__pv,.bento__pv *,.tools__pv,.tools__pv *,.code-pv,.code-pv *,.dx__pv,.dx__pv *,.stagebox__pv,.stagebox__pv *,.lx-modal__pv,.lx-modal__pv *,.pw__pv,.pw__pv *,.tc__pv,.tc__pv *{scrollbar-width:none}
.tframe::-webkit-scrollbar,.tframe iframe::-webkit-scrollbar,.card__pv::-webkit-scrollbar,.card__pv *::-webkit-scrollbar,.lx-scroll::-webkit-scrollbar,.lx-scroll *::-webkit-scrollbar,.wall *::-webkit-scrollbar,.bento__pv *::-webkit-scrollbar,.tools__pv *::-webkit-scrollbar,.code-pv *::-webkit-scrollbar,.dx__pv *::-webkit-scrollbar,.stagebox__pv *::-webkit-scrollbar,.lx-modal__pv *::-webkit-scrollbar,.pw__pv *::-webkit-scrollbar,.tc__pv *::-webkit-scrollbar{display:none;width:0;height:0}

/* 5. segmented controls: rounded rectangles (container 10px, thumb 7px), never pills */
.seg,.pp-bill,.ai-box .seg,.cattabs,.tabs-line,.lib .tabs-line{border-radius:10px}
.seg__thumb,.seg button,.pp-bill button,.pp-bill .seg__thumb,.ai-box .seg__thumb,.tabs-line a,.cattabs a,.cattabs button{border-radius:7px}
.dx__tool{border-radius:10px}
.dx__tools .seg{border-radius:10px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.mx-console .ftabs button{border-radius:7px}
/* hero: no WebGL -> a still CSS take on the blue silk (the shader canvas covers this when it runs) */
.hero__bg:not(.gl){background:radial-gradient(62% 52% at 70% 6%,rgba(50,68,165,.55),transparent 70%),radial-gradient(40% 38% at 86% 30%,rgba(18,60,235,.35),transparent 70%),radial-gradient(46% 40% at 16% 2%,rgba(14,42,190,.42),transparent 72%),linear-gradient(162deg,rgba(8,26,140,.30),transparent 52%)}
.dx__lock{display:flex;align-items:center;gap:12px;padding:16px;border-top:1px solid var(--line);color:var(--muted);font-size:14px}
.dx__lock svg{width:16px;height:16px;flex:none}
.dx__lock span{flex:1}
/* pricing v17: three plans, no free tier */
.pp-plans--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pp-bill button em{margin-left:6px;font-style:normal;font-size:12px;font-weight:600;color:var(--accent-2)}
.pp-bill button.on em{color:var(--accent)}
.pp-badge--soon{background:color-mix(in srgb,var(--fg) 10%,transparent);color:var(--muted);box-shadow:none}
.pp-price span{white-space:nowrap}
.pp-plan .btn[disabled]{opacity:1;color:var(--muted);cursor:not-allowed}
.pp-seats{align-items:center}
.pp-step{display:inline-flex;align-items:center;gap:2px;height:28px;padding:2px;border-radius:8px;background:color-mix(in srgb,var(--fg) 6%,transparent);margin-right:auto;margin-left:12px}
.pp-step button{width:24px;height:24px;border:0;border-radius:6px;background:transparent;color:var(--muted);font-size:15px;cursor:pointer}
.pp-step button:hover{background:color-mix(in srgb,var(--fg) 8%,transparent);color:var(--fg)}
.pp-step b{min-width:24px;text-align:center;font-size:13px;font-weight:600}
.pp-table--3 .pp-thead,.pp-table--3 .pp-row{grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr))}
.pp-faq{max-width:720px;margin:116px auto 0}
.pp-faq h2{margin:0 0 24px;font-size:46px;line-height:1.02;font-weight:700;letter-spacing:-.045em}
.pp-faq details{border-bottom:1px solid color-mix(in srgb,var(--fg) 8%,transparent)}
.pp-faq summary{display:flex;justify-content:space-between;align-items:center;padding:18px 0;font-size:16px;font-weight:500;cursor:pointer;list-style:none}
.pp-faq summary::-webkit-details-marker{display:none}
.pp-faq summary::after{content:"+";color:var(--muted);font-size:20px;transition:transform .25s var(--ease)}
.pp-faq details[open] summary::after{transform:rotate(45deg)}
.pp-faq p{margin:0 0 18px;font-size:14px;line-height:22px;color:var(--muted)}
@media(max-width:1023px){.pp-plans--3{grid-template-columns:1fr}}
@media(max-width:767px){.pp-table--3{overflow-x:auto;-webkit-overflow-scrolling:touch}.pp-table--3 .pp-thead{position:static}.pp-table--3 .pp-thead,.pp-table--3 .pp-row,.pp-table--3 .pp-grp{min-width:600px}.pp-table--3 .pp-thead,.pp-table--3 .pp-row{grid-template-columns:150px repeat(3,minmax(0,1fr));gap:8px}.pp-table--3 .pp-thead>div,.pp-table--3 .pp-row>div{padding:0 8px}.pp-faq h2,.pp-cmp h2{font-size:34px}.pp-bill button{padding:0 12px}}
.pp-seats{padding:5.75px 0}

/* ---------- logged-out browsing gate (list pages, 21st parity, v30) ---------- */
/* Before auth.js runs, visitors without the ep_in hint get the same cut by column count; auth.js then sets data-gate. */
.lgate{display:none}
.lbody--gate[data-gate=on]>.lgate{display:block}
.lbody--gate[data-gate=on] #lg>.is-gone{display:none}
.lbody--gate[data-gate=on] #lg>.is-fade{pointer-events:none;user-select:none}
.lgate{position:relative;z-index:3;margin-top:calc(-1 * var(--gate-h,230px) - 8px);padding:calc(var(--gate-h,230px) * .5) 20px 24px;text-align:center;
  background:linear-gradient(to bottom,color-mix(in srgb,var(--bg) 0%,transparent) 0,color-mix(in srgb,var(--bg) 72%,transparent) calc(var(--gate-h,230px) * .32),var(--bg) calc(var(--gate-h,230px) * .62))}
.lgate__in{max-width:520px;margin:0 auto}
.lgate h2{margin:0;font-size:28px;line-height:34px;font-weight:600;letter-spacing:-.02em;color:var(--fg)}
.lgate p{margin:12px auto 0;max-width:440px;font-size:15px;line-height:24px;color:var(--muted);text-wrap:pretty}
.lgate__btns{display:flex;justify-content:center;gap:10px;margin-top:24px}
.lgate__btns .btn{border-radius:999px;padding:0 22px;height:44px}
html:not(.ep-in) .lbody--gate:not([data-gate]) .lgrid>:nth-child(n+9){pointer-events:none}
html:not(.ep-in) .lbody--gate:not([data-gate]) .lgrid>:nth-child(n+13){display:none}
html:not(.ep-in) .lbody--gate:not([data-gate]):has(.lgrid>:nth-child(9))>.lgate{display:block}
@media(max-width:1279px){
  html:not(.ep-in) .lbody--gate:not([data-gate]) .lgrid>:nth-child(n+7){pointer-events:none}
  html:not(.ep-in) .lbody--gate:not([data-gate]) .lgrid>:nth-child(n+10){display:none}
  html:not(.ep-in) .lbody--gate:not([data-gate]):has(.lgrid>:nth-child(7))>.lgate{display:block}}
@media(max-width:1023px){
  html:not(.ep-in) .lbody--gate:not([data-gate]) .lgrid>:nth-child(n+5){pointer-events:none}
  html:not(.ep-in) .lbody--gate:not([data-gate]) .lgrid>:nth-child(n+7){display:none}
  html:not(.ep-in) .lbody--gate:not([data-gate]):has(.lgrid>:nth-child(5))>.lgate{display:block}}
@media(max-width:419px){
  html:not(.ep-in) .lbody--gate:not([data-gate]) .lgrid>:nth-child(n+3){pointer-events:none}
  html:not(.ep-in) .lbody--gate:not([data-gate]) .lgrid>:nth-child(n+4){display:none}
  html:not(.ep-in) .lbody--gate:not([data-gate]):has(.lgrid>:nth-child(3))>.lgate{display:block}}
@media(max-width:560px){.lgate h2{font-size:24px;line-height:30px}.lgate p{font-size:14px;line-height:22px}.lgate__btns .btn{flex:1;max-width:180px;padding:0 14px}}
/* signed-in hint: show 账户 instead of 登录/注册 from the first paint */
.ep-in .nav [data-auth=out]{display:none}
.ep-in .nav [data-auth=in][hidden]{display:inline-flex!important}

/* ---------- sign-in modal (v30) ---------- */
.am-lock,.am-lock body{overflow:hidden}
.am-lock body{padding-right:var(--sbw,0)}
.am{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:24px;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .28s var(--ease-out)}
.am.open{opacity:1}
.am__box{position:relative;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr);width:min(940px,100%);height:min(520px,calc(100vh - 48px));border-radius:16px;border:1px solid var(--line-2);background:var(--bg);box-shadow:0 50px 120px -30px rgba(0,0,0,.9);overflow:hidden;
  transform:translateY(12px) scale(.97);opacity:.6;transition:transform .34s var(--ease-out),opacity .28s var(--ease-out)}
.am.open .am__box{transform:none;opacity:1}
.am__x{position:absolute;top:12px;right:12px;z-index:3;display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:8px;background:color-mix(in srgb,var(--bg) 60%,transparent);color:var(--muted);cursor:pointer;transition:color .2s,background-color .2s}
.am__x:hover{color:var(--fg);background:var(--hover)}
.am__x svg{width:16px;height:16px}
.am__l{display:flex;align-items:center;justify-content:center;padding:40px 52px;min-width:0}
.am__pane{width:100%;max-width:340px;text-align:center}
.am__logo{display:inline-grid;place-items:center;color:var(--fg)}
.am__mk{width:34px;height:34px}
.am__t{margin:18px 0 0;font-size:24px;line-height:30px;font-weight:600;letter-spacing:-.02em;outline:0}
.am__sub{margin:10px auto 0;max-width:300px;font-size:14px;line-height:21px;color:var(--muted);text-wrap:pretty}
.am__form{display:grid;gap:10px;margin-top:28px}
.am__in{height:44px;border-radius:10px;font-size:15px;background:var(--bg-2)}
.am__go{height:44px;border-radius:10px;width:100%}
.am__or{display:flex;align-items:center;gap:12px;margin:16px 0;color:var(--dim);font-size:12px}
.am__or::before,.am__or::after{content:"";flex:1;height:1px;background:var(--line)}
.am__google{width:100%;height:44px;border-radius:10px;gap:10px;background:var(--bg-2);border:1px solid var(--line-2)}
.am__google:hover{background:var(--card-2)}
.am__g{width:18px;height:18px}
.am__legal{margin:20px 0 0;font-size:12px;line-height:18px;color:var(--dim)}
.am__legal a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.am__legal a:hover{color:var(--fg)}
.am__mail{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:14px;background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent-2)}
.am__mail svg{width:24px;height:24px}
.am__addr{margin:6px 0 0;font-size:15px;font-weight:600;color:var(--fg);word-break:break-all}
.am__hint{margin:16px auto 0;max-width:300px;font-size:13px;line-height:20px;color:var(--dim)}
.am__sentbtns{display:flex;justify-content:center;gap:8px;margin-top:24px}
.am__sentbtns .btn{height:40px;border-radius:10px}
.am__resend:disabled{opacity:.55;cursor:default}
.am__pane[data-pane=sent]:not([hidden]){animation:am-in .3s var(--ease-out)}
@keyframes am-in{from{opacity:0;transform:translateY(6px)}}
.am__r{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;border-left:1px solid var(--line);background:var(--bg-2)}
.am__mq{position:relative;flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:0 22px;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 40px,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(to bottom,transparent 0,#000 40px,#000 calc(100% - 56px),transparent)}
.am__col{min-width:0}
.am__track{display:flex;flex-direction:column;gap:14px;animation:am-up 70s linear infinite}
.am__col--2 .am__track{animation-duration:84s;animation-delay:-30s}
.am__r,.am__r *{pointer-events:none!important;cursor:default!important}
@keyframes am-up{from{transform:translateY(0)}to{transform:translateY(calc(-50% - 7px))}}
.am__card{margin:0}
.am__pv{position:relative;overflow:hidden;border-radius:12px;background:var(--card-2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.am__pv>.demo{border-radius:inherit}
.am__pv .tframe{border-radius:inherit}
.am__card figcaption{margin-top:8px;font-size:12px;line-height:16px;font-weight:500;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.am__tools{flex:none;padding:14px 22px 20px;border-top:1px solid var(--line)}
.am__tools>span{display:block;font-size:12px;line-height:16px;color:var(--dim)}
.am__tools>div{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:10px}
.am__tool{display:inline-flex;align-items:center;gap:6px;color:var(--muted)}
.am__tool b{font-size:13px;font-weight:600;letter-spacing:-.01em}
.am__ti{width:15px;height:15px}
@media(prefers-reduced-motion:reduce){.am__track{animation:none}.am,.am__box{transition:none}}
@media(max-width:760px){
  .am{place-items:end center;padding:0}
  .am__box{grid-template-columns:1fr;grid-template-rows:auto;width:100%;height:auto;max-height:calc(100dvh - 24px);border-radius:16px 16px 0 0;border-bottom:0;overflow:auto;transform:translateY(100%);opacity:1;transition:transform .36s var(--ease-out)}
  .am.open .am__box{transform:none}
  .am__box::before{content:"";position:absolute;top:8px;left:50%;width:36px;height:4px;margin-left:-18px;border-radius:2px;background:var(--line-2)}
  .am__r{display:none}
  .am__l{padding:44px 24px calc(28px + env(safe-area-inset-bottom))}
  .am__pane{max-width:400px}
  .am__in{font-size:16px}
}

/* =====================================================================================
   v31 workspace (signed-in Home, /home/ + /bookmarks/) — light by default like the reference,
   Light / Dark / System from the avatar menu. Marketing pages keep data-theme=dark.
   ===================================================================================== */
[data-theme=light]{
  color-scheme:light;
  --bg:#f7f7f8;--bg-2:#ffffff;--panel:#ffffff;--card:#ffffff;--card-2:#f1f1f3;
  --fg:#0b0b0f;--muted:#6b6b73;--dim:#8a8a90;--fg80:rgba(11,11,15,.82);
  --line:#e6e6e8;--line-2:#dcdce0;--hover:#ededef;--border:#e6e6e8;
  --code-bg:#f4f4f6;--shadow:0 20px 50px -24px rgba(16,16,24,.25);
  --accent-2:#0033ff;--accent-fg:#fff;
}
[data-theme=dark].ws-doc{--fg80:rgba(246,246,248,.82)}
.ws-themeswap *,.ws-themeswap *::before,.ws-themeswap *::after{transition:none!important}
.ws-lock,.ws-lock body{overflow:hidden}
.ws-doc body{background:var(--bg)}
.ws{--ws-side:240px;--ws-pad:clamp(20px,2.6vw,40px);display:grid;grid-template-columns:var(--ws-side) minmax(0,1fr);min-height:100vh}

/* ---------- sidebar ---------- */
.ws-side{position:sticky;top:0;height:100vh;height:100dvh;border-right:1px solid var(--line);background:var(--bg);overflow:hidden;z-index:30}
.ws-panes{position:relative;height:100%}
.ws-pane{position:absolute;inset:0;display:flex;flex-direction:column;padding:12px 10px 12px;overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
.ws-pane::-webkit-scrollbar{display:none}
.ws-pane.in-r{animation:wsInR .26s var(--ease-out) both}.ws-pane.out-l{animation:wsOutL .26s var(--ease-out) both}
.ws-pane.in-l{animation:wsInL .26s var(--ease-out) both}.ws-pane.out-r{animation:wsOutR .26s var(--ease-out) both}
@keyframes wsInR{from{transform:translateX(30%);opacity:0}}@keyframes wsInL{from{transform:translateX(-30%);opacity:0}}
@keyframes wsOutL{to{transform:translateX(-30%);opacity:0}}@keyframes wsOutR{to{transform:translateX(30%);opacity:0}}
.ws-logo{display:inline-flex;align-items:center;height:36px;padding:0 8px;margin-bottom:8px;color:var(--fg);align-self:flex-start}
.ws-logo i{display:block;width:62px;height:21px;background:currentColor;-webkit-mask:url(/assets/logo.svg) left center/contain no-repeat;mask:url(/assets/logo.svg) left center/contain no-repeat}
.ws-search{display:flex;align-items:center;gap:8px;width:100%;height:34px;margin-bottom:10px;padding:0 8px 0 10px;border:0;border-radius:10px;background:var(--hover);color:var(--dim);font-size:14px;cursor:pointer;transition:background-color .2s,color .2s}
.ws-search:hover{color:var(--muted);background:color-mix(in srgb,var(--hover) 70%,var(--line-2))}
.ws-search svg{width:15px;height:15px;flex:none}
.ws-search kbd{margin-left:auto;border:0;background:transparent;height:auto;padding:0;font:500 11.5px/1 var(--font);color:var(--dim);letter-spacing:.06em}
.ws-nav{display:flex;flex-direction:column;gap:1px}
.ws-si{display:flex;align-items:center;gap:10px;width:100%;height:34px;padding:0 10px;border:0;border-radius:9px;background:transparent;color:var(--fg80);font-size:14px;font-weight:500;text-align:left;cursor:pointer;transition:background-color .15s,color .15s}
.ws-si:hover{background:var(--hover);color:var(--fg)}
.ws-si.on{background:var(--hover);color:var(--fg)}
.ws-si svg{width:16px;height:16px;flex:none;color:var(--muted)}
.ws-si.on svg,.ws-si:hover svg{color:var(--fg)}
.ws-si em{margin-left:auto;display:grid;place-items:center;color:var(--dim)}
.ws-si em svg{width:13px;height:13px;color:inherit}
.ws-badge{margin-left:6px;display:inline-flex;align-items:center;height:18px;padding:0 7px;border-radius:999px;background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent);font-size:11px;font-weight:600;white-space:nowrap}
[data-theme=dark] .ws-badge{color:#8fa6ff;background:color-mix(in srgb,var(--accent) 24%,transparent)}
.ws-lab{padding:16px 10px 5px;font-size:12px;font-weight:500;color:var(--dim)}
.ws-promo{margin-top:auto;padding:12px 12px 10px;border-radius:12px;border:1px solid var(--line);background:var(--card);box-shadow:0 1px 2px rgba(16,16,24,.04);transition:opacity .2s,transform .2s}
.ws-promo.bye{opacity:0;transform:translateY(6px)}
.ws-promo__h{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.ws-promo__h b{font-size:13.5px;font-weight:600}
.ws-promo__x{display:grid;place-items:center;width:22px;height:22px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--dim);cursor:pointer}
.ws-promo__x:hover{background:var(--hover);color:var(--fg)}
.ws-promo__x svg{width:14px;height:14px}
.ws-promo p{margin:0 0 8px;font-size:12.5px;line-height:1.55;color:var(--muted)}
.ws-promo__btn{display:flex;align-items:center;justify-content:center;gap:4px;height:32px;margin-top:10px;border-radius:9px;background:var(--accent);color:#fff;font-size:13px;font-weight:600;box-shadow:inset 0 1px 0 rgba(255,255,255,.22);transition:opacity .2s}
.ws-promo__btn:hover{opacity:.92}
.ws-promo__btn svg{width:13px;height:13px}
.ws-promo__link{display:block;margin-top:8px;text-align:center;font-size:12px;color:var(--muted)}
.ws-promo__link:hover{color:var(--fg)}
/* drill-in panes */
.ws-dh{display:flex;align-items:center;gap:6px;height:36px;margin-bottom:8px}
.ws-dh b{font-size:15px;font-weight:600}
.ws-back{display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer}
.ws-back:hover{background:var(--hover);color:var(--fg)}
.ws-back svg{width:17px;height:17px}
.ws-dsearch{display:flex;align-items:center;gap:8px;height:34px;margin-bottom:8px;padding:0 8px 0 10px;border-radius:10px;background:var(--hover);color:var(--dim)}
.ws-dsearch svg{width:15px;height:15px;flex:none}
.ws-dsearch input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;font-size:14px;color:var(--fg)}
.ws-dsearch input::placeholder{color:var(--dim)}
.ws-dsearch input::-webkit-search-cancel-button{display:none}
.ws-dsearch kbd{height:18px;padding:0 5px;font-size:10.5px}
.ws-dsearch:focus-within{box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 35%,transparent)}
.ws-dlab{padding:14px 10px 4px;font-size:12px;font-weight:500;color:var(--dim)}
.ws-di{display:flex;align-items:center;gap:10px;height:32px;padding:0 10px;border-radius:8px;color:var(--fg80);font-size:13.5px;font-weight:500;transition:background-color .15s,color .15s}
.ws-di:hover{background:var(--hover);color:var(--fg)}
.ws-di svg{width:15px;height:15px;flex:none;color:var(--muted)}
.ws-di small{margin-left:auto;font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums}
.ws-di--top{margin-bottom:2px}
.ws-dempty{margin:12px 10px;font-size:13px;color:var(--dim)}

/* ---------- top bar ---------- */
.ws-main{min-width:0;display:flex;flex-direction:column}
.ws-scrim{display:none}
.ws-top{position:sticky;top:0;z-index:25;display:flex;align-items:center;gap:6px;height:56px;padding:0 calc(var(--ws-pad) - 8px) 0 var(--ws-pad);background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px)}
.ws-sp{flex:1}
.ws-burger{display:none;place-items:center;width:36px;height:36px;margin-left:-8px;padding:0;border:0;border-radius:9px;background:transparent;color:var(--fg);cursor:pointer}
.ws-burger svg{width:19px;height:19px}
.ws-logo--top{display:none;margin:0;align-self:center}
.ws-up,.ws-tb{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 11px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--fg);font-size:13.5px;font-weight:500;white-space:nowrap;box-shadow:0 1px 2px rgba(16,16,24,.04);transition:background-color .15s,border-color .15s}
.ws-up:hover,.ws-tb:hover{background:var(--hover)}
.ws-up svg{width:15px;height:15px;color:#7c5cff}
.ws-tb svg{width:15px;height:15px;color:var(--muted)}
.ws-tb--in{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.ws-tb--in:hover{background:var(--fg);opacity:.88}
.ws-ib{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;color:var(--fg80);transition:background-color .15s}
.ws-ib:hover{background:var(--hover);color:var(--fg)}
.ws-ib svg{width:18px;height:18px}
.ws-me{position:relative}
.ws-avbtn{display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer}
.ws-avbtn:focus-visible{outline:2px solid color-mix(in srgb,var(--accent) 70%,transparent);outline-offset:1px}
.ws-av{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:linear-gradient(140deg,hsl(var(--av-h,228) 85% 64%),hsl(calc(var(--av-h,228) + 40) 80% 48%));color:#fff;font-size:13px;font-weight:650;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.ws-av--lg{width:36px;height:36px;font-size:15px}
.ws-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:40;width:284px;padding:6px;border-radius:16px;background:#141416;color:#f4f4f5;border:1px solid rgba(255,255,255,.08);box-shadow:0 30px 70px -20px rgba(0,0,0,.55),0 4px 12px rgba(0,0,0,.18);opacity:0;transform:translateY(-6px) scale(.98);transform-origin:top right;transition:opacity .18s,transform .22s var(--ease-out)}
.ws-menu.open{opacity:1;transform:none}
.ws-menu__me{display:flex;align-items:center;gap:10px;padding:8px 8px 10px}
.ws-menu__me>div{min-width:0;flex:1}
.ws-menu__me b{display:block;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ws-menu__me small{display:block;font-size:12.5px;color:#a1a1aa;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ws-menu__gear{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;color:#a1a1aa}
.ws-menu__gear:hover{background:rgba(255,255,255,.08);color:#fff}
.ws-menu__gear svg{width:16px;height:16px}
.ws-menu__plan{display:flex;align-items:center;justify-content:space-between;margin:0 4px 6px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.05);font-size:12.5px;color:#a1a1aa}
.ws-menu__plan b{color:#fff;font-weight:600}
.ws-menu>a{display:flex;align-items:center;gap:10px;height:36px;padding:0 10px;border-radius:9px;font-size:14px;color:#e4e4e7;transition:background-color .12s}
.ws-menu>a:hover,.ws-menu>a:focus-visible{background:rgba(255,255,255,.08);color:#fff;outline:0}
.ws-menu>a svg{width:16px;height:16px;color:#a1a1aa}
.ws-menu__foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px;padding:8px 4px 2px;border-top:1px solid rgba(255,255,255,.08)}
.ws-theme{display:inline-flex;padding:2px;border-radius:9px;background:rgba(255,255,255,.06)}
.ws-theme button{display:grid;place-items:center;width:30px;height:26px;padding:0;border:0;border-radius:7px;background:transparent;color:#a1a1aa;cursor:pointer;transition:background-color .15s,color .15s}
.ws-theme button:hover{color:#fff}
.ws-theme button.on{background:rgba(255,255,255,.14);color:#fff}
.ws-theme svg{width:15px;height:15px}
.ws-logout{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:#e4e4e7;font-size:13.5px;cursor:pointer}
.ws-logout:hover{background:rgba(255,255,255,.08);color:#fff}
.ws-logout svg{width:15px;height:15px;color:#a1a1aa}

/* ---------- body + rows ---------- */
.ws-body{width:100%;max-width:1720px;padding:8px var(--ws-pad) 96px}
.wsr{margin-top:52px}
.ws-body>.wsr:first-of-type,.ws-body>h1+.wsr{margin-top:12px}
.wsr__h{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px}
.wsr__h h2{margin:0;font-size:19px;line-height:26px;font-weight:650;letter-spacing:-.02em}
.wsr__h p{margin:3px 0 0;font-size:13.5px;color:var(--muted)}
.wsr__more{display:inline-flex;align-items:center;gap:3px;flex:none;font-size:13.5px;color:var(--muted);transition:color .15s}
.wsr__more svg{width:13px;height:13px;transition:transform .2s var(--ease-out)}
.wsr__more:hover{color:var(--fg)}.wsr__more:hover svg{transform:translateX(2px)}
.wsr__wrap{position:relative}
.wsr__track{--n:5;--gap:20px;display:flex;gap:var(--gap);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scroll-padding:0 4px;scrollbar-width:none;padding:14px 4px 10px;margin:-14px -4px -10px;overscroll-behavior-x:contain}
.wsr__track::-webkit-scrollbar{display:none}
.wsr__track>.wc,.wsr__track>.rk-i{flex:none;width:calc((100% - (var(--n) - 1) * var(--gap)) / var(--n));scroll-snap-align:start}
.wsr__arr{position:absolute;top:calc(50% - 36px);z-index:4;display:grid;place-items:center;width:36px;height:36px;padding:0;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--fg);box-shadow:0 6px 18px -6px rgba(16,16,24,.25);cursor:pointer;opacity:0;transform:scale(.9);transition:opacity .2s,transform .2s var(--ease-out),background-color .15s}
.wsr__arr:hover{background:var(--hover)}
.wsr__arr svg{width:16px;height:16px}
.wsr__arr--l{left:-14px}.wsr__arr--r{right:-14px}
.wsr__wrap:hover .wsr__arr,.wsr__arr:focus-visible{opacity:1;transform:none}

/* ---------- cards ---------- */
.wc{position:relative;min-width:0}
.wc__pv{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:12px;background:var(--card);box-shadow:0 0 0 1px var(--line),0 1px 2px rgba(16,16,24,.04);transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out)}
.wc__pv>.demo,.wc__pv>.skpv,.wc__pv>.tframe{border-radius:inherit}
.wc--th .wc__pv{aspect-ratio:16/10}
[data-theme=light] .wc__pv .demo{--d-bg:#ffffff}
[data-theme=light] .wc__pv .skpv{background:linear-gradient(135deg,#f6f6f8,#ffffff)}
.wc:hover .wc__pv,.wc:focus-within .wc__pv{transform:translateY(-4px) scale(1.025);box-shadow:0 0 0 1px var(--line),0 22px 40px -18px rgba(16,16,24,.32)}
[data-theme=dark] .wc:hover .wc__pv{box-shadow:0 0 0 1px var(--line-2),0 22px 44px -18px rgba(0,0,0,.8)}
.wc__meta{display:flex;align-items:center;gap:8px;height:36px;padding:10px 2px 0;opacity:0;transform:translateY(-4px);transition:opacity .3s var(--ease-out),transform .35s var(--ease-out)}
.wc:hover .wc__meta,.wc:focus-within .wc__meta,.wgrid .wc__meta{opacity:1;transform:none}
.wc__av{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:6px;background:var(--fg);color:var(--bg)}
.wc__av svg{width:12px;height:12px}
.wc__meta h3{flex:1;min-width:0;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px;font-weight:500;color:var(--fg)}
.wc__save{position:relative;z-index:2;flex:none;display:grid;place-items:center;width:26px;height:26px;padding:0;border:0;border-radius:7px;background:transparent;color:var(--dim);cursor:pointer;transition:color .15s,background-color .15s}
.wc__save:hover{color:var(--fg);background:var(--hover)}
.wc__save svg{width:15px;height:15px}
.wc__save.on{color:var(--accent)}.wc__save.on svg{fill:currentColor}
[data-theme=dark] .wc__save.on{color:#8fa6ff}
.wc__link{position:absolute;inset:0 0 36px;z-index:1;border-radius:12px}
.wc__link:focus-visible{outline:2px solid color-mix(in srgb,var(--accent) 70%,transparent);outline-offset:2px}

/* ---------- rank numerals: flat grey at rest, blue liquid glass on hover ---------- */
.wsr__track--rank{--gap:14px}
.rk-i{position:relative;padding-left:62px}
.rk-i>.wc{z-index:1}
.rk{position:absolute;left:-6px;top:0;bottom:36px;display:grid;align-items:center;justify-items:start;pointer-events:none;user-select:none;font:800 clamp(118px,9.6vw,164px)/1 Inter,var(--font);letter-spacing:-.07em;font-variant-numeric:lining-nums}
.rk>*{grid-area:1/1;display:block;padding:.08em .06em .1em;font-style:normal;font-weight:inherit}
.rk b{color:#d9dadd;transition:opacity .45s var(--ease-out),transform .6s var(--ease-out)}
[data-theme=dark] .rk b{color:rgba(246,246,248,.09)}
/* glass body: drawn by the SVG filter #rkg (build.py RK_DEFS); the glyph itself only supplies the shape */
.rk-defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.rk i{color:#2f5bff;filter:url(#rkg);opacity:0;transform:translate(6px,10px) scale(.88);transform-origin:30% 75%;
  transition:opacity .42s var(--ease-out),transform .75s cubic-bezier(.3,1.4,.45,1);will-change:transform,opacity}
.rk-i:hover .rk b,.rk-i:focus-within .rk b{opacity:0;transform:scale(1.06)}
.rk-i:hover .rk i,.rk-i:focus-within .rk i{opacity:1;transform:none;filter:url(#rkg-live)}
@media(prefers-reduced-motion:reduce){.rk-i:hover .rk i{filter:url(#rkg)}.rk i{transition:opacity .2s}}

/* ---------- categories ---------- */
.wcats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 40px}
.wcat h3{margin:0 0 6px;font-size:13px;font-weight:500;color:var(--muted)}
.wcat>div{display:grid;grid-template-columns:1fr 1fr;gap:2px 16px}
.wcat a{display:flex;align-items:center;gap:10px;height:34px;padding:0 8px;margin:0 -8px;border-radius:8px;font-size:14.5px;font-weight:500;color:var(--fg);transition:background-color .15s}
.wcat a:hover{background:var(--hover)}
.wcat a svg{width:16px;height:16px;flex:none;color:var(--muted)}
.wcat a small{font-size:12.5px;color:var(--dim);font-variant-numeric:tabular-nums}

/* ---------- grid / empty / page head ---------- */
.wgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:22px 20px}
.wgrid .wc__link{inset:0 0 36px}
.wsh{margin:12px 0 8px}
.wsh h1{margin:0;font-size:28px;line-height:1.2;font-weight:650;letter-spacing:-.025em}
.wsh p{margin:8px 0 0;max-width:620px;font-size:14px;color:var(--muted)}
.wempty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:40px 20px;border:1px dashed var(--line-2);border-radius:14px;background:var(--card);text-align:center}
.wempty b{font-size:15px;font-weight:600}
.wempty span{font-size:13.5px;color:var(--muted)}
.wempty .btn{margin-top:10px}
.wsb-out{margin-top:24px}
.ws .btn--line{border:1px solid var(--line-2)}

/* ---------- ⌘K palette ---------- */
.wk{position:fixed;inset:0;z-index:130;display:flex;justify-content:center;align-items:flex-start;padding:12vh 16px 16px;background:rgba(12,12,18,.32);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;transition:opacity .18s}
.wk.open{opacity:1}
.wk__box{width:min(640px,100%);max-height:76vh;display:flex;flex-direction:column;border-radius:18px;background:var(--panel);border:1px solid var(--line);box-shadow:0 40px 100px -30px rgba(10,10,20,.45),0 6px 18px rgba(10,10,20,.08);overflow:hidden;transform:translateY(-8px) scale(.985);transition:transform .25s var(--ease-out)}
.wk.open .wk__box{transform:none}
.wk__bar{display:flex;align-items:center;gap:10px;height:52px;margin:8px;padding:0 10px 0 14px;border-radius:12px;background:var(--accent);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.wk__bar svg{width:18px;height:18px;flex:none}
.wk__bar input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;color:#fff;font-size:16px}
.wk__bar input::placeholder{color:rgba(255,255,255,.72)}
.wk__bar kbd{border-color:rgba(255,255,255,.3);color:rgba(255,255,255,.85)}
.wk__clear{height:26px;padding:0 9px;border:0;border-radius:7px;background:rgba(255,255,255,.16);color:#fff;font-size:12.5px;cursor:pointer}
.wk__clear:hover{background:rgba(255,255,255,.26)}
.wk__list{flex:1;min-height:0;overflow-y:auto;padding:2px 8px 8px;scrollbar-width:thin}
.wk__g{padding:10px 10px 4px;font-size:12px;font-weight:500;color:var(--dim)}
.wk__it{display:flex;align-items:center;gap:12px;height:40px;padding:0 10px;border-radius:10px;font-size:14px;color:var(--fg)}
.wk__it.on{background:var(--hover)}
.wk__it i{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:7px;border:1px solid var(--line);background:var(--card);color:var(--muted)}
.wk__it i svg{width:14px;height:14px}
.wk__it span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wk__it small{margin-left:auto;flex:none;font-size:12px;color:var(--dim)}
.wk__empty{display:grid;gap:4px;padding:36px 0;text-align:center;font-size:13.5px;color:var(--muted)}
.wk__empty b{color:var(--fg);font-size:14.5px}
.wk__foot{display:flex;gap:16px;padding:9px 16px;border-top:1px solid var(--line);font-size:12px;color:var(--dim)}
.wk__foot span{display:inline-flex;align-items:center;gap:4px}
.wk__foot kbd{height:18px;padding:0 5px;font-size:10.5px}

/* ---------- responsive ---------- */
@media(max-width:1380px){.wsr__track{--n:4}}
@media(max-width:1100px){.wsr__track{--n:3}.wcats{grid-template-columns:1fr 1fr}}
@media(max-width:900px){
  .ws{grid-template-columns:minmax(0,1fr)}
  .ws-side{position:fixed;left:0;top:0;bottom:0;width:min(300px,86vw);height:100dvh;box-shadow:0 30px 80px -20px rgba(0,0,0,.4);transform:translateX(-102%);transition:transform .32s var(--ease-out);z-index:60}
  .ws.nav-open .ws-side{transform:none}
  .ws-scrim{display:block;position:fixed;inset:0;z-index:55;background:rgba(10,10,16,.36);opacity:0;pointer-events:none;transition:opacity .3s}
  .ws.nav-open .ws-scrim{opacity:1;pointer-events:auto}
  .ws-burger,.ws-logo--top{display:inline-grid}
  .ws-logo--top{display:inline-flex}
  .wsr__track{--n:2.3}
  .wsr__arr{display:none}
}
@media(max-width:640px){
  .ws{--ws-pad:16px}
  .ws-top{gap:4px}
  .ws-tb span,.ws-up span{display:none}
  .ws-up,.ws-tb{width:34px;padding:0;justify-content:center}
  .ws-tb--in{width:auto;padding:0 12px}.ws-tb--in span{display:inline}
  .wsr{margin-top:40px}
  .wsr__track{--n:1.45;--gap:14px}
  .wsr__track--rank{--n:1.3}
  .wsr__h p{font-size:13px}
  .wcats{grid-template-columns:1fr}
  .wgrid{grid-template-columns:1fr 1fr;gap:16px 12px}
  .wc__meta h3{font-size:12.5px}
  .rk{font-size:132px}
  .ws-menu{position:fixed;right:12px;left:12px;top:60px;width:auto}
}

/* =====================================================================================
   v31 welcome flow (.ob) — always light, like the reference
   ===================================================================================== */
.ob-lock,.ob-lock body{overflow:hidden}
.ob{position:fixed;inset:0;z-index:140;display:flex;padding:16px;overflow-y:auto;background:rgba(12,12,16,.44);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;transition:opacity .3s var(--ease-out)}
.ob.open{opacity:1}
.ob__box{color-scheme:light;--ob-acc:#0033ff;position:relative;width:min(436px,100%);margin:auto;padding:34px 32px 22px;border-radius:24px;background:#f4f4f5;color:#0b0b0f;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 40px 100px -30px rgba(0,0,0,.5);transform:translateY(12px) scale(.98);transition:transform .45s var(--ease-out);letter-spacing:-.01em}
@supports (color:oklch(0.5 0.2 264)){.ob__box{--ob-acc:oklch(.485 .291 264.121)}}
.ob.open .ob__box{transform:none}
.ob__box--up{width:min(452px,100%)}
.ob__view{position:relative}
.ob__ghost{position:absolute;left:0;top:0;width:100%;pointer-events:none}
.ob__step{text-align:center}
.ob__logo{display:inline-grid;place-items:center;color:var(--ob-acc)}
.ob__mk{width:34px;height:34px}
.ob__t{margin:16px 0 24px;font-size:27px;line-height:1.25;font-weight:650;letter-spacing:-.03em;color:#0b0b0f}
.ob__form{display:grid;gap:12px;text-align:left}
.ob__field{display:flex;align-items:center;width:100%;height:46px;padding:0 14px;border-radius:12px;border:1px solid #e4e4e7;background:#fff;color:#0b0b0f;font-size:15px;box-shadow:0 1px 2px rgba(0,0,0,.04);outline:0;transition:border-color .15s,box-shadow .15s}
.ob__field::placeholder{color:#9a9aa2}
.ob__field:focus-visible,.ob__in:focus,.ob__dd.open .ob__ddb{border-color:color-mix(in srgb,var(--ob-acc) 55%,#e4e4e7);box-shadow:0 0 0 3px color-mix(in srgb,var(--ob-acc) 14%,transparent)}
.ob__dd{position:relative}
.ob__ddb{justify-content:space-between;gap:10px;cursor:pointer;text-align:left}
.ob__ddb>svg{width:16px;height:16px;flex:none;color:#a1a1aa;transition:transform .2s var(--ease-out)}
.ob__dd.open .ob__ddb>svg{transform:rotate(180deg)}
.ob__ddv{display:flex;align-items:center;gap:10px;min-width:0;color:#9a9aa2}
.ob__ddv.has{color:#0b0b0f}
.ob__ddv i{display:grid;place-items:center;width:18px;height:18px;flex:none}
.ob__ddv svg{width:17px;height:17px}
.ob__menu{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:6;max-height:312px;overflow-y:auto;padding:6px;border-radius:12px;background:#18181b;border:1px solid rgba(255,255,255,.06);box-shadow:0 24px 50px -16px rgba(0,0,0,.55);scrollbar-width:thin;scrollbar-color:#3f3f46 transparent;animation:obMenu .18s var(--ease-out)}
@keyframes obMenu{from{opacity:0;transform:translateY(-4px)}}
.ob__opt{display:flex;align-items:center;gap:10px;width:100%;height:36px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:#f4f4f5;font-size:14.5px;font-weight:500;text-align:left;cursor:pointer;outline:0}
.ob__opt:hover,.ob__opt:focus-visible,.ob__opt:focus{background:#27272a}
.ob__opt i{display:grid;place-items:center;width:18px;height:18px;flex:none;color:#e4e4e7}
.ob__opt i svg,.ob__bi{width:16px;height:16px}
.ob__opt>svg{width:15px;height:15px;margin-left:auto;color:#a1a1aa;opacity:0}
.ob__opt[aria-selected=true]>svg{opacity:1}
.ob__go{height:46px;margin-top:4px;border:0;border-radius:12px;background:var(--ob-acc);color:#fff;font-size:15px;font-weight:600;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.22);transition:background-color .25s,opacity .2s,transform .15s}
.ob__go:not(:disabled):hover{opacity:.92}
.ob__go:not(:disabled):active{transform:scale(.985)}
.ob__go:disabled{background:color-mix(in srgb,var(--ob-acc) 48%,#f4f4f5);cursor:default;box-shadow:none}
.ob__go.busy{opacity:.7}
.ob__note{margin:18px 0 0;font-size:13px;color:#71717a}
.ob__use{display:grid;gap:12px;margin-top:4px}
.ob__usebtn{height:48px;border:0;border-radius:12px;background:#e8e8eb;color:#3f3f46;font-size:15px;font-weight:500;cursor:pointer;transition:background-color .15s,color .15s,transform .15s}
.ob__usebtn:hover{background:#dfdfe3;color:#0b0b0f}
.ob__usebtn:active{transform:scale(.985)}
.ob__usebtn.on{background:#0b0b0f;color:#fff}
.ob__usebtn:focus-visible{outline:2px solid color-mix(in srgb,var(--ob-acc) 60%,transparent);outline-offset:2px}
.ob__dots{display:flex;justify-content:center;gap:6px;margin-top:26px}
.ob__dots i{width:26px;height:3px;border-radius:2px;background:#d4d4d8;transition:background-color .35s}
.ob__dots i.on{background:#0b0b0f}
/* step 3 */
.ob__h{margin:6px 0 0;font:600 34px/1.22 "Songti SC","STSong","Noto Serif SC","Noto Serif CJK SC","Source Han Serif SC","Source Han Serif CN",Georgia,serif;letter-spacing:-.01em;color:#0b0b0f}
.ob__s{position:relative;text-decoration:none;color:#0b0b0f;margin-right:.18em}
.ob__s span{opacity:1;transition:opacity .5s .55s}
.ob__s::after{content:"";position:absolute;left:-6%;right:-6%;top:54%;height:3px;border-radius:3px;background:#e5484d;transform:rotate(-4deg) scaleX(0);transform-origin:left center;transition:transform .55s cubic-bezier(.65,0,.35,1) .25s}
.ob__s.draw::after{transform:rotate(-4deg) scaleX(1)}
.ob__s.draw span{opacity:.55}
.ob__pd{margin:14px 0 18px;font-size:14px;color:#71717a}
.ob__pd b{color:#0b0b0f;font-weight:650}
.ob__card{padding:20px 20px 16px;border-radius:20px;border:1px solid #e4e4e7;background:#ececee;text-align:left}
.ob__ch{display:flex;align-items:center;gap:10px}
.ob__ch b{font-size:23px;font-weight:650;letter-spacing:-.02em}
.ob__badge{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;background:var(--ob-acc);color:#fff;font-size:12px;font-weight:600}
.ob__iv{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:16px 0 12px;font-size:14px;color:#3f3f46}
.ob__seg{display:inline-flex;padding:2px;border-radius:10px;border:1px solid #e4e4e7;background:#fff}
.ob__seg button{height:28px;padding:0 12px;border:0;border-radius:8px;background:transparent;color:#52525b;font-size:13px;font-weight:500;cursor:pointer;transition:background-color .2s,color .2s}
.ob__seg button.on{background:var(--ob-acc);color:#fff}
.ob__feats{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.ob__feats li{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.45;color:#27272a}
.ob__feats svg{width:17px;height:17px;flex:none;margin-top:1px;color:#52525b}
.ob__buy{width:100%;height:46px;margin-top:18px;border:0;border-radius:12px;background:var(--ob-acc);color:#fff;font-size:15px;font-weight:600;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.22);transition:opacity .2s,transform .15s}
.ob__buy:hover{opacity:.92}.ob__buy:active{transform:scale(.985)}.ob__buy:disabled{opacity:.6}
.ob__fine{margin:10px 0 0;text-align:center;font-size:12.5px;color:#71717a}
.ob__fine a{color:#52525b;text-decoration:underline;text-underline-offset:3px}
.ob__end{display:flex;align-items:center;justify-content:space-between;margin-top:16px;padding:0 6px}
.ob__skip,.ob__wallet{height:32px;padding:0;border:0;background:transparent;font-size:14.5px;cursor:pointer}
.ob__skip{color:#0b0b0f;font-weight:500}
.ob__wallet{color:#71717a}
.ob__skip:hover,.ob__wallet:hover{text-decoration:underline;text-underline-offset:3px}
@media(max-width:480px){
  .ob{padding:12px}
  .ob__box{padding:28px 20px 18px;border-radius:20px}
  .ob__t{font-size:24px}
  .ob__h{font-size:29px}
  .ob__card{padding:16px 14px 14px}
  .ob__iv{flex-wrap:wrap}
}
/* =====================================================================================
   v32 workspace: every signed-in page (library lists, quick view, details, bookmarks,
   settings, pricing, ⌘K) in the 21st logged-in layout. Light by default, dark via the avatar menu.
   ===================================================================================== */
[data-theme=light]{--bg:#f5f5f5;--line:#e4e4e4;--line-2:#dadada;--hover:#e9e9e9;--card-2:#efefef;--sel:#dedede}
[data-theme=dark].ws-doc{--sel:rgba(255,255,255,.1)}
.ws-sel,.ws-si.on,.ws-di.on{background:var(--sel,var(--hover));color:var(--fg)}
.ws-di.on svg{color:var(--fg)}
/* top bar: 40px like the reference, centred page title / breadcrumb */
.ws-top{height:44px;position:sticky}
.ws-up,.ws-tb{height:30px;font-size:13px;padding:0 10px}
.ws-ib{width:32px;height:32px}.ws-avbtn{width:32px;height:32px}
.ws-title{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:46%;font-size:13.5px;font-weight:500;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:auto}
.ws-crumb{display:flex;align-items:center;gap:7px;min-width:0}
.ws-crumb a,.ws-crumb span{color:var(--muted);transition:color .15s}
.ws-crumb a:hover{color:var(--fg)}
.ws-crumb i{font-style:normal;color:var(--dim)}
.ws-crumb b{font-weight:500;color:var(--fg);overflow:hidden;text-overflow:ellipsis}
.ws-brand{display:flex;align-items:center;height:32px;margin:-6px 0 6px}
.ws-brand .ws-logo{margin:0;height:32px}
.ws-pane[data-pane=main] .ws-brand{margin-bottom:8px}
.ws-dh{position:relative;justify-content:center;height:32px;margin-bottom:6px}
.ws-dh .ws-back{position:absolute;left:0;top:1px}
.ws-dh b{font-size:14.5px;font-weight:500;color:var(--fg80)}
.ws-dsearch{height:32px;border-radius:8px}
.ws-dsearch kbd{border:0;background:transparent;color:var(--dim);font-size:12px}
.ws-di{height:33px;font-size:14px}
.ws-di--top{margin-bottom:0}
.ws-di--top:last-of-type{margin-bottom:6px}
.ws-dlab{padding:12px 10px 4px}
/* filter pane (21st search / filter sidebar) */
.ws-fh{display:flex;align-items:center;gap:6px;height:32px;margin-bottom:6px}
.ws-fh b{flex:1;text-align:center;font-size:14.5px;font-weight:500;color:var(--fg80)}
.ws-fclear{height:26px;padding:0 8px;border:0;border-radius:7px;background:transparent;color:var(--muted);font-size:13px;cursor:pointer}
.ws-fclear:hover{background:var(--hover);color:var(--fg)}
.ws-dx{display:grid;place-items:center;width:22px;height:22px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--dim);cursor:pointer}
.ws-dx svg{width:13px;height:13px}
.ws-scope{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin:2px 0 10px;padding:2px;border-radius:9px;background:var(--hover)}
.ws-scope a{display:flex;align-items:center;justify-content:center;gap:5px;height:28px;border-radius:7px;font-size:12.5px;font-weight:500;color:var(--muted)}
.ws-scope a svg{width:13px;height:13px}
.ws-scope a.on{background:var(--card);color:var(--fg);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.ws-scope a:not(.on):hover{color:var(--fg)}
.wf-g{border-top:1px solid var(--line)}
.wf-gh{display:flex;align-items:center;gap:8px;width:100%;height:38px;padding:0 6px 0 10px;border:0;background:transparent;color:var(--fg);font-size:13.5px;font-weight:500;cursor:pointer}
.wf-gh span{flex:1;text-align:left}
.wf-gh em{display:grid;place-items:center;color:var(--dim);transition:transform .2s var(--ease-out)}
.wf-gh em svg{width:14px;height:14px}
.wf-g:not(.open) .wf-gh em{transform:rotate(-90deg)}
.wf-dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.wf-gb{display:grid;gap:1px;padding:0 0 10px}
.wf-g:not(.open) .wf-gb{display:none}
.wf-r{display:flex;align-items:center;gap:10px;height:32px;padding:0 10px;border-radius:8px;font-size:13.5px;color:var(--fg80);cursor:pointer}
.wf-r:hover{background:var(--hover);color:var(--fg)}
.wf-r input{position:absolute;opacity:0;pointer-events:none}
.wf-r i{width:15px;height:15px;flex:none;border-radius:50%;border:1.5px solid var(--line-2);background:var(--card);transition:border-color .15s,box-shadow .15s}
.wf-r input:checked+i{border-color:var(--accent);box-shadow:inset 0 0 0 3px var(--card),inset 0 0 0 8px var(--accent)}
.wf-r input:focus-visible+i{outline:2px solid color-mix(in srgb,var(--accent) 50%,transparent);outline-offset:2px}
/* body */
.ws-doc .ws-body{max-width:none;padding:6px 20px 96px}
.ws--collapsed .ws-body,.ws--bare .ws-body{padding:0 0 96px}
.ws--collapsed,.ws--bare{grid-template-columns:minmax(0,1fr)}
.ws--bare .ws-side{display:none}
.ws--collapsed .ws-side{position:fixed;left:0;top:0;bottom:0;width:min(280px,86vw);height:100dvh;box-shadow:0 30px 80px -20px rgba(0,0,0,.35);transform:translateX(-102%);transition:transform .32s var(--ease-out);z-index:60}
.ws--collapsed.nav-open .ws-side{transform:none}
.ws--collapsed .ws-scrim{display:block;position:fixed;inset:0;z-index:55;background:rgba(10,10,16,.3);opacity:0;pointer-events:none;transition:opacity .3s}
.ws--collapsed.nav-open .ws-scrim{opacity:1;pointer-events:auto}
.ws--collapsed .ws-burger{display:inline-grid}
.ws--collapsed .ws-logo--top,.ws--bare .ws-logo--top{display:inline-flex}
.ws--bare .ws-burger{display:none!important}
.ws-tt{font-weight:500}
/* shelves of cells (21st component shelves: hairline cells, previews inset, hover lift + footer) */
.wsr--cells{margin-top:28px}
.ws-body>.wl .wl-shelves>.wsr--cells:first-child{margin-top:4px}
.wsr--cells .wsr__h{margin:0 0 10px;padding:0 8px}
.wsr--cells .wsr__h h2{font-size:15px;line-height:22px;font-weight:500;letter-spacing:0}
.wsr--cells .wsr__more{font-size:14px}
.wsr--cells .wsr__track{--cw:clamp(232px,(100vw - 300px)/5.15,320px);gap:0;padding:0;margin:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);scroll-snap-type:x proximity}
.wsr--cells .wsr__track>.wcl{flex:none;width:var(--cw);scroll-snap-align:start}
.wsr--cells .wsr__arr{top:calc(50% - 18px);right:10px;left:auto;opacity:1;transform:none;width:32px;height:32px;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.wsr--cells .wsr__arr--l{left:10px;right:auto}
.wcl{position:relative;min-width:0;border-right:1px solid var(--line)}
.wcl__in{position:relative;padding:38px 20px}
.wcl__pv{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:4px;background:var(--card);box-shadow:0 0 0 1px color-mix(in srgb,var(--fg) 5%,transparent);transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out)}
.wcl__pv>.demo,.wcl__pv>.skpv,.wcl__pv>.tframe{border-radius:inherit}
[data-theme=light] .wcl__pv .demo{--d-bg:#fff}
[data-theme=light] .wcl__pv .skpv{background:linear-gradient(135deg,#f6f6f8,#fff)}
.wcl--t .wcl__pv,.wcl--th .wcl__pv{aspect-ratio:16/10}
.wcl__meta{position:absolute;left:20px;right:16px;bottom:7px;display:flex;align-items:center;gap:8px;height:24px;opacity:0;transform:translateY(4px);transition:opacity .25s var(--ease-out),transform .3s var(--ease-out)}
.wcl__meta h3{flex:1;min-width:0;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:500;color:var(--fg)}
.wcl__meta .wc__av{width:16px;height:16px;border-radius:4px}
.wcl__meta .wc__av svg{width:10px;height:10px}
.wcl:hover .wcl__pv,.wcl:focus-within .wcl__pv{transform:translateY(-16px);box-shadow:0 0 0 1px color-mix(in srgb,var(--fg) 6%,transparent),0 18px 30px -18px rgba(0,0,0,.28)}
.wcl:hover .wcl__meta,.wcl:focus-within .wcl__meta{opacity:1;transform:none}
.wcl__meta .wc__save{position:relative;z-index:3}
.wcl__link{position:absolute;inset:0 0 34px;z-index:2}
.wcl__link:focus-visible{outline:2px solid color-mix(in srgb,var(--accent) 70%,transparent);outline-offset:-3px}
.wcl__badge{position:absolute;right:28px;top:46px;z-index:2;display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 7px;border-radius:999px;background:#0b0b0f;color:#fff;font-size:11.5px;font-weight:600;pointer-events:none}
.wcl__badge svg{width:11px;height:11px}
.wcl__badge--soft{background:color-mix(in srgb,var(--card) 92%,transparent);color:var(--fg);box-shadow:0 0 0 1px var(--line)}
.wcl:hover .wcl__badge{transform:translateY(-16px);transition:transform .4s var(--ease-out)}
.wcl .wcl__badge{transition:transform .4s var(--ease-out)}
/* grid of cells */
.wl-cells{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.wl-cells>.wcl{border-bottom:1px solid var(--line)}
.wl-cells--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.wl-bar{position:sticky;top:44px;z-index:5;display:flex;align-items:center;gap:10px;height:44px;margin:0 0 0;padding:0 8px;background:var(--bg)}
.wl-sort{display:flex;gap:18px;height:100%}
.wl-sort button{position:relative;height:100%;padding:0;border:0;background:transparent;color:var(--muted);font-size:14px;font-weight:500;cursor:pointer}
.wl-sort button:hover{color:var(--fg)}
.wl-sort button.on{color:var(--fg)}
.wl-sort button.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px;background:var(--fg)}
.wl-count{font-size:13px;color:var(--dim);font-variant-numeric:tabular-nums}
.wl-filter{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--fg);font-size:13px;font-weight:500;cursor:pointer}
.wl-filter:hover{background:var(--hover)}
.wl-filter svg{width:14px;height:14px;color:var(--muted)}
.wl-lab{font-size:14px;font-weight:500}
.wl-head{display:flex;align-items:baseline;gap:10px;padding:8px 4px 14px}
.wl-head b{font-size:13.5px;font-weight:600}
.wl-head span{font-size:12.5px;color:var(--muted)}
.wl-gridv--t .wl-bar{display:none}
.wl-head+.wl-gridv .wl-bar{display:none}
.wl-empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:72px 20px;border:1px solid var(--line);border-top:0;text-align:center}
.wl-empty b{font-size:15px;font-weight:600}
.wl-empty span{font-size:13.5px;color:var(--muted)}
.wl-empty .ws-btn{margin-top:10px}
/* buttons */
.ws-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:36px;padding:0 13px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--fg);font-size:14px;font-weight:500;white-space:nowrap;cursor:pointer;transition:background-color .15s,opacity .15s,border-color .15s}
.ws-btn svg{width:15px;height:15px;flex:none}
.ws-btn--sm{height:30px;padding:0 10px;font-size:13px;border-radius:7px}
.ws-btn--sm svg{width:14px;height:14px}
.ws-btn--pri{background:#0033ff;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
@supports (color:oklch(0.5 0.2 264)){.ws-btn--pri{background:oklch(.485 .291 264.121)}}
.ws-btn--pri:hover{opacity:.9}
.ws-btn--dark{background:var(--fg);color:var(--bg)}
.ws-btn--dark:hover{opacity:.88}
.ws-btn--dark.on svg{fill:currentColor}
.ws-btn--line{border-color:var(--line-2);background:var(--card)}
.ws-btn--line:hover{background:var(--hover)}
.ws-btn--line.on{color:var(--accent)}.ws-btn--line.on svg{fill:currentColor}
.ws-btn--ghost{color:var(--muted)}
.ws-btn--ghost:hover{background:var(--hover);color:var(--fg)}
.ws-btn:disabled{opacity:.55;cursor:default}
.ws-seg{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:var(--hover)}
.ws-seg button{white-space:nowrap;height:30px;padding:0 15px;border:0;border-radius:999px;background:transparent;color:var(--muted);font-size:13.5px;font-weight:500;cursor:pointer;transition:background-color .15s,color .15s}
.ws-seg button:hover{color:var(--fg)}
.ws-seg button.on{background:var(--card);color:var(--fg);box-shadow:0 1px 2px rgba(0,0,0,.1)}
.ws-seg button em{font-style:normal;color:var(--accent);font-size:12px;margin-left:2px}
[data-theme=dark] .ws-seg button em{color:#8fa6ff}
.ws-seg--sm{border-radius:8px;padding:2px}.ws-seg--sm button{height:24px;padding:0 10px;font-size:12.5px;border-radius:6px}
.ws-seg--dark{border-radius:8px;padding:2px;background:var(--card);box-shadow:0 0 0 1px var(--line)}.ws-seg--dark button{height:24px;padding:0 10px;font-size:12.5px;border-radius:6px}
.ws-seg--dark button.on{background:var(--fg);color:var(--bg);box-shadow:none}
/* ---------- quick view ---------- */
/* ---------- detail ---------- */
.wd{position:relative;max-width:895px;min-height:calc(100vh - 44px);margin:0 auto;padding:24px 53px 40px;border-inline:1px solid var(--line)}
.wd-head h1{margin:0;font-size:24px;line-height:1.3;font-weight:700;letter-spacing:-.02em}
.wd-desc{margin:8px 0 0;max-width:640px;font-size:15.5px;line-height:1.55;color:var(--muted)}
.wd-by{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:16px;font-size:14px;color:var(--muted)}
.wd-by a{color:var(--fg)}.wd-by a:hover{text-decoration:underline;text-underline-offset:3px}
.wd-by i{font-style:normal;color:var(--dim)}
.wd-av{display:grid;place-items:center;width:24px;height:24px;margin-right:4px;border-radius:6px;background:#0033ff;color:#fff}
.wd-av svg{width:14px;height:14px}
.wd-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:22px}
.wd-split{position:relative;display:inline-flex}
.wd-split>.ws-btn:first-child{border-radius:8px 0 0 8px}
.wd-split__chev{width:32px;padding:0;border-radius:0 8px 8px 0!important;border-left:1px solid rgba(255,255,255,.25)}
.wd-menu{position:absolute;left:0;top:calc(100% + 6px);z-index:30;min-width:270px;padding:5px;border-radius:12px;background:var(--card);border:1px solid var(--line);box-shadow:0 20px 40px -16px rgba(0,0,0,.25)}
.wd-menu button{display:grid;grid-template-columns:18px 1fr;column-gap:10px;width:100%;padding:8px 10px;border:0;border-radius:8px;background:transparent;color:var(--fg);text-align:left;cursor:pointer}
.wd-menu button:hover{background:var(--hover)}
.wd-menu svg{width:15px;height:15px;margin-top:2px;color:var(--muted)}
.wd-menu span{font-size:13.5px;font-weight:500}
.wd-menu small{grid-column:2;font-size:12px;color:var(--muted)}
.wd-show{margin:30px -4px 0;padding:6px;border:1px solid var(--line);border-radius:6px;background:var(--card-2)}
.wd-pv{position:relative;height:clamp(360px,62vh,735px);overflow:hidden;border-radius:3px;background:#fff;box-shadow:0 0 0 1px var(--line)}
.wd-pv>.demo{border-radius:inherit}
.wd-pv.dark{background:#09090d}
.wd-pv--frame{height:clamp(360px,58vh,490px)}
.wd-frame{display:block;width:100%;height:100%;border:0;background:#fff}
.wd-pv--skill{background:linear-gradient(135deg,#f6f6f8,#fff)}
.wd-fit{position:absolute;inset:0;display:grid;place-items:center}
.wd-tools{position:absolute;left:10px;top:10px;z-index:3;display:flex;gap:2px;padding:2px;border-radius:8px;background:color-mix(in srgb,var(--card) 92%,transparent);box-shadow:0 0 0 1px var(--line),0 2px 6px rgba(0,0,0,.06)}
.wd-tools--r{left:auto;right:10px}
.wd-tools button,.wd-tools a{display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--muted);cursor:pointer}
.wd-tools button:hover,.wd-tools a:hover{background:var(--hover);color:var(--fg)}
.wd-tools svg{width:15px;height:15px}
.wd-tag{display:inline-flex;align-items:center;height:28px;padding:0 9px;font-size:12px;font-weight:500;color:var(--muted)}
.wd-pv:fullscreen{height:100vh;border-radius:0}
.wd-code{position:relative;margin-top:6px;border-radius:3px;background:var(--card);box-shadow:0 0 0 1px var(--line);overflow:hidden}
.wd-code--solo{margin-top:12px;border-radius:8px}
.wd-tabs{display:flex;align-items:center;justify-content:space-between;gap:10px;height:44px;padding:0 8px;border-bottom:1px solid var(--line)}
.wd-tabs__l{display:flex;gap:2px;min-width:0;overflow-x:auto;scrollbar-width:none}
.wd-tabs__l button{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 10px;border:0;border-radius:7px;background:transparent;color:var(--muted);font:500 13px/1 var(--mono);white-space:nowrap;cursor:pointer}
.wd-tabs__l button[data-pane=prompt]{font-family:var(--font)}
.wd-tabs__l button svg{width:12px;height:12px}
.wd-tabs__l button:hover{color:var(--fg)}
.wd-tabs__l button.on{background:var(--hover);color:var(--fg)}
.wd-pane{display:none;max-height:420px;overflow:auto}
.wd-pane.on{display:block}
.wd-code pre.code,.wd-tree,.wd-md{margin:0;padding:16px 18px;background:transparent;font:13px/1.65 var(--mono);color:var(--fg);white-space:pre;overflow:auto;border:0;border-radius:0}
.wd-md{white-space:pre-wrap;font-family:var(--font);font-size:14px}
.wd-prompt{padding:22px 20px}
.wd-prompt b{font-size:15px}
.wd-prompt p{margin:6px 0 14px;max-width:560px;font-size:14px;line-height:1.6;color:var(--muted)}
.wd-lock{display:flex;align-items:center;gap:10px;padding:12px 16px;border-top:1px solid var(--line);background:color-mix(in srgb,var(--card-2) 60%,var(--card));font-size:13px;color:var(--muted)}
.wd-lock>svg{width:15px;height:15px;flex:none}
.wd-lock span{flex:1}
.wd-sec{margin-top:44px}
.wd-sec h2{margin:0 0 12px;font-size:13.5px;font-weight:600;color:var(--fg80)}
.wd-sec p{margin:0;font-size:15px;line-height:1.6;color:var(--muted)}
.wd-tags{display:flex;flex-wrap:wrap;gap:6px}
.wd-pill{display:inline-flex;align-items:center;height:26px;padding:0 9px;border-radius:6px;background:var(--hover);color:var(--fg80);font-size:13px;font-weight:500}
a.wd-pill:hover{background:var(--sel,var(--hover));color:var(--fg)}
.wd-cmd{display:flex;align-items:center;gap:10px;margin-top:14px;padding:6px;border:1px solid var(--line);border-radius:6px;background:var(--card-2)}
.wd-cmd code{flex:1;min-width:0;height:40px;display:flex;align-items:center;gap:6px;padding:0 12px;border-radius:3px;background:var(--card);box-shadow:0 0 0 1px var(--line);font:13px var(--mono);color:var(--fg);overflow:hidden;white-space:nowrap}
.wd-cmd code b{font-weight:500;color:#7c3aed}
.wd-cmd button{display:grid;place-items:center;width:30px;height:30px;margin-left:-46px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--muted);cursor:pointer;z-index:1}
.wd-cmd button:hover{background:var(--hover);color:var(--fg)}
.wd-cmd button svg{width:15px;height:15px}
.wd-ghostlink{display:inline-flex;align-items:center;gap:6px;margin-top:12px;padding:0;border:0;background:transparent;color:var(--muted);font-size:13px;cursor:pointer}
.wd-ghostlink:hover{color:var(--fg)}
.wd-ghostlink svg{width:14px;height:14px}
.wd-det{display:flex;flex-wrap:wrap;gap:6px 22px}
.wd-ticks{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.wd-ticks li{display:flex;gap:10px;font-size:14.5px;line-height:1.55;color:var(--fg80)}
.wd-ticks svg{width:16px;height:16px;flex:none;margin-top:3px;color:var(--muted)}
.wd-info{display:grid;margin:0;border-top:1px solid var(--line)}
.wd-info>div{display:grid;grid-template-columns:140px 1fr;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px}
.wd-info dt{color:var(--muted)}
.wd-info dd{margin:0;display:flex;flex-wrap:wrap;gap:6px;align-items:center;color:var(--fg)}
.wd-link{display:inline-flex;align-items:center;gap:2px;color:var(--fg)}
.wd-link svg{width:13px;height:13px}
.wd-link:hover{text-decoration:underline;text-underline-offset:3px}
.wd-more{margin:52px -53px 0}
.wd-more .wsr__h{margin:0 0 10px;padding:0 53px}
.wd-more .wsr__h h2{font-size:15px;font-weight:500;letter-spacing:0}
.wd-more .wl-cells{border-left:0}
.wd-more .wl-cells>.wcl:nth-child(3n){border-right:0}
/* ---------- bookmarks ---------- */
.wb{padding:20px 8px 0}
.wb-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.wb-head h1{margin:0;font-size:26px;line-height:1.3;font-weight:500;letter-spacing:-.02em}
.wb-head p{margin:2px 0 0;font-size:13px;color:var(--muted)}
.wb-tools{display:flex;gap:10px;margin-top:4px}
.wb-search{display:flex;align-items:center;gap:8px;width:190px;height:32px;padding:0 10px;border:1px solid var(--line);border-radius:7px;background:var(--card);color:var(--dim)}
.wb-search svg{width:14px;height:14px;flex:none}
.wb-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:13.5px;color:var(--fg)}
.wb-search:focus-within{border-color:color-mix(in srgb,var(--accent) 50%,var(--line))}
.wb-tools .ws-btn{height:32px;font-size:13px}
.wb .ws-seg{margin-top:30px}
.wb-out{display:flex;align-items:center;gap:12px;margin-top:18px;font-size:13.5px;color:var(--muted)}
.wb-out p{margin:0}
.wb-body{margin-top:32px}
.wb-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,394px));gap:16px}
.wb-tile{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:296px;padding:10px 10px 14px;border:1px solid var(--line);border-radius:8px;background:color-mix(in srgb,var(--card) 50%,transparent);color:var(--fg);text-align:left;cursor:pointer;transition:background-color .15s,border-color .15s}
.wb-tile:hover{background:var(--card);border-color:var(--line-2)}
.wb-mos{display:grid;grid-template-columns:1fr 1fr;gap:6px;width:100%;flex:1;margin-bottom:10px}
.wb-mos i{display:flex;align-items:flex-end;min-height:96px;padding:8px;border-radius:5px;background:var(--hover);font-style:normal}
.wb-mos em{font-style:normal;font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wb-tile b{font-size:14.5px;font-weight:600;padding:0 4px}
.wb-tile small{font-size:12.5px;color:var(--muted);padding:0 4px}
.wb-tile--new{align-items:center;justify-content:center;gap:8px;background:transparent;color:var(--dim)}
.wb-tile--new svg{width:20px;height:20px}
.wb-tile--new span{font-size:13px}
.wb-tile--new:hover{color:var(--fg)}
.wb-lh{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.wb-lh h2{margin:0;font-size:17px;font-weight:600}
.wb-lh>span:not(.ws-sp){font-size:13px;color:var(--muted)}
.wb-del:hover{color:#e5484d}
.wb-empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:72px 20px;border:1px dashed var(--line-2);border-radius:8px;text-align:center}
.wb-empty b{font-size:15px;font-weight:600}
.wb-empty span{max-width:420px;font-size:13.5px;line-height:1.6;color:var(--muted)}
.wb-empty .ws-btn{margin-top:10px}
.wl-cells--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.wb-pick{display:grid;gap:2px;max-height:50vh;margin-top:12px;overflow:auto}
.wb-pick label{display:grid;grid-template-columns:18px 1fr auto;align-items:center;gap:10px;padding:8px 6px;border-radius:8px;font-size:14px;cursor:pointer}
.wb-pick label:hover{background:var(--hover)}
.wb-pick small{font-size:12px;color:var(--muted)}
/* ---------- settings ---------- */
.st{max-width:623px;margin:0 auto;padding:34px 0 40px}
.st--wide{max-width:680px}
.st-h1{margin:0;font-size:24px;line-height:1.3;font-weight:700;letter-spacing:-.02em}
.st-h1:empty{display:none}
.st-sub{margin:6px 0 0;font-size:15px;color:var(--muted)}
.st-sec{margin-top:44px}
.st-sec__h{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:14px}
.st-sec h2{margin:0;font-size:17px;font-weight:650;letter-spacing:-.01em}
.st-sec__h p{margin:6px 0 0;font-size:15px;line-height:1.5;color:var(--muted)}
.st-card{border:1px solid var(--line);border-radius:12px;background:var(--card);overflow:hidden}
.st-row{display:flex;align-items:center;gap:16px;min-height:60px;padding:10px 16px}
.st-row+.st-row{border-top:1px solid var(--line)}
.st-row__l{flex:1;min-width:0}
.st-row__l b{display:block;font-size:15px;font-weight:500}
.st-row__l small{display:block;margin-top:2px;font-size:14px;line-height:1.45;color:var(--muted)}
.st-row__c{flex:none;display:flex;align-items:center;gap:8px}
.st-val{font-size:15px;color:var(--fg);font-weight:500}
.st-meta{font-size:12.5px;color:var(--muted)}
.st-inline{display:flex;gap:8px}
.st-input,.st-select{height:36px;padding:0 12px;border:1px solid var(--line-2);border-radius:8px;background:var(--card);color:var(--fg);font-size:14.5px;outline:0}
.st-input{width:220px}
.st-input:focus,.st-select:focus{border-color:color-mix(in srgb,var(--accent) 55%,var(--line-2));box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}
.st-select{padding-right:30px;appearance:none;-webkit-appearance:none;background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 10px center/14px no-repeat;cursor:pointer}
.st-danger{font-size:13.5px;font-weight:500;color:#e5484d}
.st-danger:hover{text-decoration:underline;text-underline-offset:3px}
.st-dev{display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:8px;background:var(--hover);color:var(--muted)}
.st-dev svg{width:17px;height:17px}
.st-pad{padding:16px}
.st-kpi{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.st-kpi b{font-size:24px;font-weight:700;margin-right:6px;font-variant-numeric:tabular-nums}
.st-kpi span{font-size:14.5px;color:var(--muted)}
.st-kpi small{font-size:13px;color:var(--muted)}
.st-bars{display:flex;align-items:flex-end;gap:2px;height:64px;margin-top:14px;padding-bottom:1px;border-bottom:1px solid var(--line)}
.st-bars i{flex:1;height:var(--h);min-height:0;border-radius:2px 2px 0 0;background:#0033ff;opacity:.85}
.st-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;border-top:1px solid var(--line);background:color-mix(in srgb,var(--card-2) 45%,var(--card));font-size:13px;color:var(--muted)}
.st-foot a:not(.ws-btn){color:var(--fg);text-decoration:underline;text-underline-offset:3px}
.st-table{width:100%;border-collapse:collapse;font-size:14px}
.st-table th{height:38px;padding:0 14px;text-align:left;font-size:13px;font-weight:500;color:var(--muted);background:color-mix(in srgb,var(--card-2) 45%,var(--card));border-bottom:1px solid var(--line)}
.st-table td{height:48px;padding:0 14px;border-bottom:1px solid var(--line)}
.st-table tr:last-child td{border-bottom:0}
.st-table .r{text-align:right}
.st-table code{font:12.5px var(--mono);color:var(--muted)}
.st-table a{color:var(--accent)}
.st-empty{height:84px!important;text-align:center;color:var(--muted)}
.st-fine{margin:22px auto 0;max-width:620px;text-align:center;font-size:13.5px;line-height:1.6;color:var(--muted)}
.st-fine a{color:var(--fg);text-decoration:underline;text-underline-offset:3px}
.st-hero,.wp-hero{text-align:center}
.st-hero h1,.wp-hero h1{margin:0;font-size:46px;line-height:1.15;font-weight:700;letter-spacing:-.04em}
.st-hero p,.wp-hero p{margin:10px 0 0;font-size:15px;color:var(--muted)}
.st-plans{margin-top:0}
.st-hero h1{font-size:50px;white-space:nowrap;letter-spacing:-.045em}
.st-hero p{margin-top:6px}
.st-ctl{display:flex;flex-direction:column;align-items:center;gap:10px;margin:20px 0 22px}
.st-cur+.st-plans{margin-top:56px}
.st-cur .st-sec:first-of-type{margin-top:34px}
/* plan cards */
.pc-grid{display:grid;gap:16px;margin:0 auto}
.pc-grid--2{grid-template-columns:repeat(2,minmax(0,320px));justify-content:center}
.pc-grid--1{grid-template-columns:minmax(0,320px);justify-content:center}
.pc-grid--3{grid-template-columns:repeat(3,minmax(0,330px));justify-content:center}
.pc{display:flex;flex-direction:column;padding:22px 20px 22px;border:1px solid var(--line);border-radius:16px;background:var(--card)}
.pc--feat{background:var(--card-2)}
.pc h3{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0;font-size:22px;font-weight:700;letter-spacing:-.02em}
.pc-badge{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:999px;font-size:12px;font-weight:600}
.pc-badge--soon{background:#0033ff;color:#fff}
.pc-badge--line{border:1px solid var(--line-2);color:var(--muted)}
.pc-sub{margin:6px 0 0;font-size:14.5px;color:var(--muted)}
.pc-price{display:flex;align-items:center;gap:10px;margin:20px 0 18px}
.pc-price b{font-size:34px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.pc-price>span{display:grid;font-size:13.5px;line-height:1.35;color:var(--muted)}
.pc-btn{width:100%;height:40px}
.pc .ws-btn--line:not(:disabled){border-color:var(--line-2)}
.pc-alt{margin:8px auto 0;padding:0;border:0;background:transparent;color:var(--muted);font-size:13px;cursor:pointer}
.pc-alt:hover{color:var(--fg);text-decoration:underline;text-underline-offset:3px}
.pc-feats{display:grid;gap:11px;margin:20px 0 0;padding:0;list-style:none}
.pc-feats li{display:flex;gap:10px;font-size:14.5px;line-height:1.45;color:var(--fg)}
.pc-feats svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--muted)}
.pc-feats small{display:block;font-size:13px;color:var(--muted)}
/* signed-in pricing */
.wp{max-width:1060px;margin:0 auto;padding:56px 24px 40px}
.wp-ctl{display:flex;justify-content:center;margin:28px 0 30px}
.wp-cmp,.wp-faq{margin-top:88px}
.wp-cmp>h2,.wp-faq>h2{margin:0;text-align:center;font-size:28px;font-weight:700;letter-spacing:-.03em}
.wp-cmp>p,.wp-faq>p{margin:6px 0 26px;text-align:center;font-size:14.5px;color:var(--muted)}
.pt{width:100%;border-collapse:collapse;font-size:14px;table-layout:fixed}.pt col.pt-c0{width:34%}
.pt thead th{position:sticky;top:44px;z-index:2;padding:12px;background:var(--bg);text-align:center;border-bottom:1px solid var(--line)}
.pt thead th b{display:block;font-size:15px}
.pt thead th small{display:block;margin-top:2px;font-size:12.5px;font-weight:400;color:var(--muted)}
.pt tbody th{padding:12px;text-align:left;font-weight:400;color:var(--fg80)}
.pt td{padding:12px;text-align:center;color:var(--fg)}
.pt tbody tr{border-bottom:1px solid var(--line)}
.pt .pt-g th{padding:26px 12px 8px;font-size:13px;font-weight:600;color:var(--muted)}
.pt td>span{display:inline-flex;align-items:center;justify-content:center;min-height:20px;vertical-align:middle}.pt-y svg{width:16px;height:16px;color:var(--fg)}.pt thead th,.pt td{width:22%}.pt tbody th{width:34%}
.pt-n{color:var(--dim)}
.wp-faq{max-width:720px;margin-left:auto;margin-right:auto}
.pf{margin-top:8px;border-radius:12px;background:var(--hover)}
.pf summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;font-size:15px;font-weight:500;cursor:pointer;list-style:none}
.pf summary::-webkit-details-marker{display:none}
.pf summary svg{width:16px;height:16px;flex:none;color:var(--muted);transition:transform .2s var(--ease-out)}
.pf[open] summary svg{transform:rotate(180deg)}
.pf p{margin:0;padding:0 18px 18px;font-size:14.5px;line-height:1.65;color:var(--muted)}
/* ---------- ⌘K (21st: blue full-bleed bar, plain rows) ---------- */
.wk{padding-top:14vh;background:rgba(10,10,12,.42);backdrop-filter:none;-webkit-backdrop-filter:none}
.wk__box{width:min(640px,100%);max-height:min(496px,76vh);border-radius:12px;border:0;overflow:hidden;background:var(--panel)}
.wk__bar{flex:none;height:56px;margin:0;border-radius:0;padding:0 14px 0 20px;gap:12px}
.wk__bar svg{width:19px;height:19px}
.wk__list{padding:8px 8px 8px}
.wk__g{display:flex;align-items:center;justify-content:space-between;padding:12px 8px 4px;font-size:12.5px;color:var(--dim)}
.wk__g button{padding:0;border:0;background:transparent;color:var(--dim);font-size:12.5px;cursor:pointer}
.wk__g button:hover{color:var(--fg)}
.wk__it{gap:10px;height:32px;padding:0 8px;border-radius:7px;font-size:14.5px}
.wk__it i{width:18px;height:18px;border:0;background:transparent;border-radius:0;color:var(--fg80)}
.wk__it i svg{width:16px;height:16px}
.wk__it b{font-weight:600}
.wk__it.on{background:var(--sel,var(--hover))}
/* ---------- responsive ---------- */
@media(max-width:1380px){.wl-cells,.wl-cells--4{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1100px){.wl-cells,.wl-cells--4{grid-template-columns:repeat(2,minmax(0,1fr))}.pc-grid--3{grid-template-columns:repeat(2,minmax(0,330px))}}
@media(max-width:900px){
  .ws-title{display:none}
  .wsr--cells .wsr__arr{display:none}
  .wd{padding:28px 20px 32px;border:0}
  .wd-more{margin:44px -20px 0}.wd-more .wsr__h{padding:0 20px}
  .wl-cells--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wd-more .wl-cells>.wcl:nth-child(3n){border-right:1px solid var(--line)}
  .wd-more .wl-cells>.wcl:nth-child(2n){border-right:0}
}
@media(max-width:640px){
  .ws-doc .ws-body{padding:4px 12px 80px}
  .ws--collapsed .ws-body,.ws--bare .ws-body{padding:0 0 80px}
  .wsr--cells .wsr__track{--cw:72vw}
  .wcl__in{padding:24px 14px 32px}
  .wcl__meta{left:14px;right:10px;bottom:4px;opacity:1;transform:none}
  .wcl:hover .wcl__pv{transform:none}
  .wcl:hover .wcl__badge{transform:none}
  .wcl__badge{right:20px;top:30px}
  .wl-cells,.wl-cells--3,.wl-cells--4{grid-template-columns:minmax(0,1fr)}
  .wl-cells>.wcl{border-right:1px solid var(--line)}
  .wd-more .wl-cells>.wcl{border-right:0}
  .wl-head{flex-direction:column;gap:2px}
  .wd-acts .ws-btn--ghost span{display:none}
  .wd-info>div{grid-template-columns:96px 1fr}
  .wb-head{flex-direction:column}
  .wb-tools{width:100%}.wb-search{flex:1;width:auto}
  .wb-tiles{grid-template-columns:1fr}
  .st{padding:28px 16px 32px}
  .st-row{flex-wrap:wrap;gap:10px}
  .st-row__c{width:100%;justify-content:flex-start}
  .st-row--dev .st-row__c{width:auto}
  .st-input{width:auto;flex:1}.st-inline{width:100%}
  .st-hero h1,.wp-hero h1{font-size:34px}
  .pc-grid--2,.pc-grid--3,.pc-grid--1{grid-template-columns:minmax(0,1fr)}
  .st-table th:nth-child(2),.st-table td:nth-child(2){display:none}
  #keys .st-table th:nth-child(4),#keys .st-table td:nth-child(4){display:none}
  .wp{padding:36px 16px 32px}
  .pt{font-size:13px}.pt tbody th,.pt td{padding:10px 6px}
  .wk{padding-top:10px}
}

/* =================================================================== v33 workspace
   Component viewer (21st-style fullscreen), avatar menu + top-right cluster, 8pt AI in the workspace,
   workspace twins of MCP / themes / icons / publish, changelog. */
:root{--blue:#0033ff}
@supports (color:oklch(0.5 0.2 264)){:root{--blue:oklch(.485 .291 264.121)}}

/* ---------- viewer ---------- */
.qv{--qv-w:min(62.5vw,1200px);--qv-t:clamp(56px,12.6vh,130px);--qv-b:116px;position:fixed;inset:0;z-index:120;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;background:rgba(0,0,0,.8);opacity:0;transition:opacity .2s var(--ease-out);scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent}
.qv.open{opacity:1}
.qv__top{position:fixed;left:0;right:0;top:0;z-index:6;height:52px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 10px 0 12px}
.qv__top::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(12,12,14,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;transition:opacity .2s}
.qv.scrolled .qv__top::before{opacity:1}
.qv__who{display:flex;align-items:center;gap:12px;min-width:0;color:#fff}
.qv__av{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#fff;color:#0b0b0f;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.qv__av svg{width:15px;height:15px}
.qv__who h2{margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;line-height:20px;font-weight:600;letter-spacing:-.005em;color:#fff}
.qv__acts{display:flex;align-items:center;gap:0;flex:none}
.qv__mw{position:relative;display:inline-flex}
.qv__ic{display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:8px;background:transparent;color:#fff;cursor:pointer;transition:background-color .15s}
.qv__ic:hover,.qv__ic[aria-expanded=true]{background:rgba(255,255,255,.12)}
.qv__ic:focus-visible{outline:2px solid rgba(255,255,255,.6);outline-offset:-2px}
.qv__ic svg{width:18px;height:18px}
.qv__stage{position:relative;height:100vh;height:100dvh;min-height:520px}
.qv__panel{position:absolute;left:50%;top:var(--qv-t);width:var(--qv-w);height:calc(100% - var(--qv-t) - var(--qv-b));transform:translateX(-50%) scale(.985);border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 30px 80px -24px rgba(0,0,0,.6);transition:transform .25s var(--ease-out),background-color .2s}
.qv.open .qv__panel{transform:translateX(-50%)}
.qv__view{position:absolute;inset:0;border-radius:inherit}
.qv__view>.demo{border-radius:inherit}
.qv__view>iframe{display:block;width:100%;height:100%;border:0;background:#fff}
.qv__panel.dark{background:#09090d}
.qv__panel--s .qv__view{background:linear-gradient(135deg,#f6f6f8,#fff)}
.qv__fit{position:absolute;inset:0;display:grid;place-items:center}
.qv__chip{position:absolute;top:16px;right:16px;z-index:3;display:inline-flex;align-items:center;gap:6px;height:34px;min-width:34px;justify-content:center;padding:0 10px;border:1px solid #e4e4e7;border-radius:10px;background:#fff;color:#18181b;font:500 14px/1 var(--font);font-variant-numeric:tabular-nums;box-shadow:0 1px 2px rgba(16,16,24,.06);cursor:pointer;transition:background-color .15s,border-color .15s}
.qv__chip:hover{background:#f4f4f5}
.qv__chip svg{width:16px;height:16px}
.qv__chip.on svg{fill:currentColor}
.qv__panel.dark .qv__chip{background:#18181b;border-color:#2c2c31;color:#f4f4f5}
.qv__nav{position:absolute;top:calc(var(--qv-t) + (100% - var(--qv-t) - var(--qv-b)) / 2);z-index:3;display:grid;place-items:center;width:36px;height:36px;margin-top:-18px;padding:0;border:0;border-radius:8px;background:transparent;color:#fff;cursor:pointer;transition:background-color .15s}
.qv__nav:hover{background:rgba(255,255,255,.12)}
.qv__nav svg{width:20px;height:20px}
.qv__nav--l{left:calc(50% - var(--qv-w) / 2 - 44px)}.qv__nav--r{right:calc(50% - var(--qv-w) / 2 - 44px)}
.qv__peek{position:absolute;top:calc(var(--qv-t) + 32px);bottom:calc(var(--qv-b) + 33px);width:156px;padding:0;border:0;border-radius:10px;background:#e9e9ea;cursor:pointer;opacity:.94;transition:opacity .2s,transform .3s var(--ease-out)}
.qv__peek:hover{opacity:1}
.qv__peek--l{left:16px;border-radius:4px 10px 10px 4px}.qv__peek--r{right:16px;border-radius:10px 4px 4px 10px}
.qv__peek--l:hover{transform:translateX(4px)}.qv__peek--r:hover{transform:translateX(-4px)}
.qv__bar{position:absolute;left:50%;top:calc(100% - var(--qv-b) + 16px);transform:translateX(-50%);display:flex;align-items:center;gap:2px}
.qv__b{white-space:nowrap;display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 12px;border:0;border-radius:8px;background:transparent;color:#fff;font:600 14px/1 var(--font);cursor:pointer;transition:background-color .15s}
.qv__b:hover{background:rgba(255,255,255,.12)}
.qv__b svg{width:16px;height:16px}
.qv__b.on svg{fill:currentColor}
.qv__split{position:relative;display:flex;margin-left:6px}
.qv__copy,.qv__chev{display:inline-flex;align-items:center;justify-content:center;height:36px;border:0;background:var(--blue);color:#fff;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.18);transition:filter .15s}
.qv__copy{gap:7px;padding:0 14px 0 13px;border-radius:8px 0 0 8px;font:600 14px/1 var(--font);white-space:nowrap}
.qv__chev{width:32px;border-left:1px solid rgba(255,255,255,.3);border-radius:0 8px 8px 0}
.qv__copy:hover,.qv__chev:hover,.qv__chev[aria-expanded=true]{filter:brightness(1.12)}
.qv__copy svg{width:16px;height:16px}.qv__chev svg{width:15px;height:15px}
.qv__simb{position:absolute;left:50%;top:calc(100% - var(--qv-b) + 65px);transform:translateX(-50%);display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 12px 0 15px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:#151517;color:#fff;font:600 14px/1 var(--font);white-space:nowrap;cursor:pointer;transition:background-color .15s,border-color .15s}
.qv__simb:hover{background:#1f1f22;border-color:rgba(255,255,255,.22)}
.qv__simb svg{width:15px;height:15px;opacity:.8}
.qv-pop{position:absolute;z-index:8;min-width:208px;padding:5px;border-radius:12px;background:#18181b;border:1px solid rgba(255,255,255,.09);box-shadow:0 24px 60px -16px rgba(0,0,0,.7),0 2px 8px rgba(0,0,0,.3);color:#f4f4f5;animation:qvPop .16s var(--ease-out)}
@keyframes qvPop{from{opacity:0;transform:translateY(-4px) scale(.98)}}
.qv-pop--more{top:42px;right:0}
.qv-pop--copy{bottom:calc(100% + 8px);right:0;width:292px;animation-name:qvPopUp}
@keyframes qvPopUp{from{opacity:0;transform:translateY(4px) scale(.98)}}
.qv-pop [role=menuitem]{display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;column-gap:10px;width:100%;min-height:36px;padding:6px 10px;border:0;border-radius:8px;background:transparent;color:#f4f4f5;font:500 14px/1.3 var(--font);text-align:left;cursor:pointer}
.qv-pop [role=menuitem]:hover,.qv-pop [role=menuitem]:focus-visible{background:rgba(255,255,255,.08);outline:0}
.qv-pop [role=menuitem] svg{width:16px;height:16px;color:#a1a1aa}
.qv-pop [role=menuitem] small{grid-column:2;grid-row:2;font-size:12px;color:#a1a1aa}
.qv-pop [role=menuitem] i{grid-column:3;grid-row:1;color:#a1a1aa}.qv-pop [role=menuitem] i svg{width:15px;height:15px;color:#fff}
.qv-pop kbd{grid-column:3;font:500 11.5px/1 var(--font);color:#8a8a93;background:none;border:0;padding:0}
.qv-pop__hr{height:1px;margin:5px 4px;background:rgba(255,255,255,.08)}
.qv__sim{--bg:transparent;--fg:#f4f4f5;--line:rgba(255,255,255,.1);--muted:#a1a1aa;--card:#fff;position:relative;max-width:1888px;margin:0 auto;padding:0 16px 56px}
.qv__sim .wl-cells{border-color:rgba(255,255,255,.1)}
.qv__sim .wcl__meta{opacity:1;transform:none}
.qv__sim .wcl__meta .wc__av{background:#fff;color:#0b0b0f}
.qv__sim .wc__save{color:#d4d4d8}

/* ---------- top-right cluster + avatar menu ---------- */
.ws-top .ws-tb,.ws-top .ws-up{height:30px;padding:0 10px;border-radius:8px;font-size:13.5px;font-weight:500;gap:6px;box-shadow:0 1px 2px rgba(16,16,24,.05)}
.ws-top .ws-tb svg,.ws-top .ws-up svg{width:15px;height:15px}
.ws-top .ws-tb--in{border-radius:8px}
.ws-top .ws-ib{width:32px;height:32px;border-radius:8px}
.ws-top .ws-ib svg{width:17px;height:17px}
.ws-top .ws-avbtn{width:34px;height:34px;margin-left:2px}
@media(min-width:901px){.ws-top{padding-right:10px}}
.ws-menu{width:256px;padding:4px;border-radius:12px;background:#171717;border:1px solid rgba(255,255,255,.08);top:calc(100% + 6px)}
.ws-menu__me{display:flex;align-items:center;gap:6px;padding:8px 6px 8px 8px;border-radius:9px;background:rgba(255,255,255,.06)}
.ws-menu__id{display:flex;align-items:center;gap:10px;flex:1;min-width:0;border-radius:6px}
.ws-menu__id:focus-visible{outline:2px solid rgba(255,255,255,.4);outline-offset:2px}
.ws-menu__nm{min-width:0;flex:1}
.ws-menu__nm b{display:block;font-size:15px;line-height:20px;font-weight:600;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ws-menu__nm small{display:block;font-size:13px;line-height:18px;color:#a1a1aa;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ws-menu__gear{flex:none;width:30px;height:30px;color:#a1a1aa}
.ws-menu__gear svg{width:18px;height:18px}
.ws-menu__lab{padding:12px 10px 4px;font-size:12.5px;line-height:16px;color:#8f8f97}
.ws-av--sm{width:20px;height:20px;font-size:10px}
.ws-menu>a.ws-menu__ws{gap:10px;color:#fff;font-weight:600}
.ws-menu__ws>span:nth-child(2){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ws-menu__ws i{display:grid;place-items:center;color:#fff}.ws-menu__ws i svg{width:16px;height:16px;color:#fff}
.ws-menu__hr{height:1px;margin:4px 2px;background:rgba(255,255,255,.08)}
.ws-menu>a{height:32px;padding:0 10px;gap:11px;font-size:14.5px;font-weight:550;color:#f4f4f5}
.ws-menu>a svg{width:17px;height:17px;color:#d4d4d8}
.ws-menu__foot{margin-top:4px;padding:6px 2px 2px 4px}
.ws-theme{gap:2px;padding:0;background:transparent}
.ws-theme button{width:30px;height:30px;border-radius:8px}
.ws-theme button.on{background:rgba(255,255,255,.12)}
.ws-theme svg{width:16px;height:16px}
.ws-logout{height:30px;padding:0 8px;font-size:14px;color:#a1a1aa}
.ws-logout:hover{color:#fff}

/* ---------- 8pt AI (/w/ai/) ---------- */
.ws-pane--ai{padding-bottom:12px}
.ws-newdraft{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;height:32px;flex:none;margin:0;border:0;border-radius:6px;background:var(--blue);color:#fff;font:500 14px/1 var(--font);cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.18);transition:filter .15s}
.ws-newdraft:hover{filter:brightness(1.1)}
.ws-newdraft svg{width:15px;height:15px}
.ws-aiempty{padding:40px 8px 0}
.ws-aiempty b{display:block;font-size:13px;line-height:18px;font-weight:600}
.ws-aiempty span{display:block;margin-top:3px;font-size:12.5px;line-height:17px;color:var(--muted)}
.ws-aifoot{margin-top:auto;display:flex;align-items:center;padding:8px 4px 0}
.ws-aihelp{display:grid;place-items:center;width:28px;height:28px;border-radius:7px;color:var(--muted)}
.ws-aihelp:hover{background:var(--hover);color:var(--fg)}
.ws-aihelp svg{width:17px;height:17px}
.wai{max-width:672px;margin:0 auto;padding:clamp(40px,10vh,108px) 0 96px}
.wai-h,.wai-h2{margin:0;text-align:center;font-family:"Songti SC","STSong","Noto Serif SC","Noto Serif CJK SC","Source Han Serif SC","Source Han Serif CN",Georgia,"Times New Roman",serif;font-weight:500;letter-spacing:-.005em;color:var(--fg)}
.wai-h{font-size:clamp(28px,2.1vw,38px);line-height:1.25}
.wai-h em,.wai-h2 em{font-style:italic;font-weight:500}
.wai-box{margin-top:26px;padding:14px 16px 13px;border:1.5px solid var(--blue);border-radius:10px;background:var(--card);box-shadow:0 0 0 4px color-mix(in srgb,var(--blue) 7%,transparent),0 12px 30px -16px color-mix(in srgb,var(--blue) 45%,transparent)}
.wai-box textarea{display:block;width:100%;min-height:52px;max-height:220px;padding:0;border:0;outline:0;resize:none;background:transparent;color:var(--fg);font:15px/1.5 var(--font)}
.wai-box textarea::placeholder{color:var(--dim)}
.wai-bar{display:flex;align-items:center;gap:10px;margin-top:8px}
.wai-seg{display:inline-flex;gap:2px;padding:3px;border-radius:9px;background:var(--card-2)}
.wai-seg button{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 9px;border:0;border-radius:6px;background:transparent;color:var(--muted);font:500 13px/1 var(--font);cursor:pointer}
.wai-seg button svg{width:14px;height:14px}
.wai-seg button.on{background:var(--card);color:var(--fg);box-shadow:0 1px 2px rgba(16,16,24,.1),0 0 0 1px var(--line)}
.wai-go{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 13px 0 11px;border:0;border-radius:7px;background:color-mix(in srgb,var(--blue) 50%,#fff);color:#fff;font:600 14px/1 var(--font);cursor:pointer;transition:background-color .15s}
.wai-go svg{width:15px;height:15px}
.wai-go.on{background:var(--blue)}
[data-theme=dark] .wai-go{background:color-mix(in srgb,var(--blue) 55%,#000)}[data-theme=dark] .wai-go.on{background:var(--blue)}
.wai-note{margin:12px 0 0;text-align:center;font-size:12.5px;line-height:18px;color:var(--muted)}
.wai-note a{margin-left:6px;color:var(--fg);font-weight:500;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.wai-soon{position:relative;display:flex;gap:12px;margin-top:14px;padding:14px 44px 14px 14px;border:1px solid var(--line);border-radius:12px;background:var(--card);box-shadow:0 10px 30px -18px rgba(16,16,24,.25)}
.wai-soon.in{animation:qvPop .2s var(--ease-out)}
.wai-soon__ic{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:color-mix(in srgb,var(--blue) 10%,transparent);color:var(--blue)}
.wai-soon__ic svg{width:17px;height:17px}
.wai-soon b{font-size:14px;font-weight:600}
.wai-soon p{margin:3px 0 0;font-size:13.5px;line-height:1.55;color:var(--muted)}
.wai-soon__a{display:flex;gap:6px;margin-top:10px}
.wai-soon__x{position:absolute;top:10px;right:10px;display:grid;place-items:center;width:26px;height:26px;padding:0;border:0;border-radius:7px;background:transparent;color:var(--muted);cursor:pointer}
.wai-soon__x:hover{background:var(--hover);color:var(--fg)}.wai-soon__x svg{width:14px;height:14px}
.wai-starts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-top:12px}
.wai-start{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;height:120px;padding:11px 12px;border:1px solid var(--line);border-radius:8px;background:color-mix(in srgb,var(--card) 55%,var(--bg));color:var(--fg);font:500 13px/18px var(--font);text-align:left;overflow:hidden;cursor:pointer;transition:border-color .15s,background-color .15s}
.wai-start>span:first-child{position:relative;z-index:1}
.wai-start:hover{border-color:var(--line-2);background:var(--card)}
.wai-th{position:absolute;right:0;bottom:-1px;width:150px;height:70px}
.wai-th i{position:absolute;bottom:0;display:block;width:70px;height:56px;padding:7px 6px;border-radius:5px 5px 0 0;background:#fff;box-shadow:0 0 0 1px rgba(16,16,24,.08),0 6px 14px -8px rgba(16,16,24,.35);transition:transform .35s var(--ease-out)}
.wai-th i.a{right:56px;height:44px;opacity:.9}.wai-th i.b{right:0;z-index:1}
.wai-start:hover .wai-th i.b{transform:translateY(-4px)}
.wai-th b,.wai-th s,.wai-th u{display:block;height:4px;margin-bottom:4px;border-radius:2px;background:#d9d9de;text-decoration:none}
.wai-th b{width:60%;height:5px;background:#3b3b44}.wai-th s{width:85%}.wai-th u{width:40%;height:7px;margin-top:6px;background:var(--blue)}
.wai-th--pricing i.b{background:linear-gradient(#fff 55%,#eef1ff)}
.wai-th--login i.a{background:linear-gradient(135deg,#5b2fd6,#9b6bff)}.wai-th--login i.a b,.wai-th--login i.a s{background:rgba(255,255,255,.55)}.wai-th--login i.a u{background:#fff}
.wai-th--login i.b{background:linear-gradient(90deg,#fff 58%,#5468ff 58%,#a855f7)}
.wai-th--hero i.a,.wai-th--hero i.b{background:#121219}.wai-th--hero b{background:#fff}.wai-th--hero s{background:rgba(255,255,255,.28)}
.wai-th--hero i.b{background:radial-gradient(120% 90% at 80% 100%,#2b4bff,#121219 60%)}
.wai-th--review i.a s,.wai-th--review i.b s{width:100%}.wai-th--review i.b{background:#fff}.wai-th--review u{width:20px;height:7px;border-radius:999px}
.wai-more{max-width:760px;margin:clamp(100px,21vh,200px) auto 0;text-align:center}
.wai-h2{font-size:clamp(26px,2vw,36px);line-height:1.25}
.wai-lead{max-width:450px;margin:14px auto 0;font-size:15px;line-height:23px;color:var(--muted)}
.wai-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:40px;text-align:left}
.wai-card{position:relative;min-height:230px;padding:22px 20px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--card) 55%,var(--bg));overflow:hidden}
.wai-card h3{margin:0;font-size:16px;line-height:22px;font-weight:600}
.wai-card p{margin:6px 0 0;font-size:15px;line-height:23px;color:var(--muted)}
.wai-cm{position:absolute;left:20px;right:20px;bottom:-12px;height:96px;display:flex;gap:10px}
.wai-cm i{flex:1;border-radius:8px 8px 0 0;background:#fff;box-shadow:0 0 0 1px rgba(16,16,24,.08),0 10px 24px -14px rgba(16,16,24,.35)}
.wai-cm--takes i:nth-child(2){transform:translateY(-10px);box-shadow:0 0 0 2px var(--blue),0 14px 28px -14px color-mix(in srgb,var(--blue) 60%,transparent)}
.wai-cm--remix i:first-child{flex:.7;background:linear-gradient(160deg,#eef1ff,#fff)}.wai-cm--remix i:last-child{background:linear-gradient(160deg,#fff 40%,#e9ecff)}
[data-theme=dark] .wai-th i:not([class*=x]),[data-theme=dark] .wai-cm i{box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.wai-fine{margin:28px 0 0;font-size:13px;color:var(--muted)}
.wai-fine a{color:var(--fg);text-decoration:underline;text-underline-offset:3px;margin:0 2px}

/* ---------- workspace twins: MCP, themes, icons, publish ---------- */
.wmx .mx{padding-top:40px;width:min(100%,1040px)}
.wmx .mx-console{background:var(--card);box-shadow:0 0 0 1px var(--line),0 1px 2px rgba(16,16,24,.04)}
.wmx .mx-console .ftabs{border-bottom-color:var(--line)}
.wmx .mx-ic{background:var(--card);box-shadow:0 0 0 1px var(--line)}
.wmx .mx-grid>div{background:var(--card)}
.wd-pv--theme{display:grid;place-items:center;height:clamp(320px,52vh,520px);padding:clamp(16px,3vw,40px);background:#f1f1f3}
.wd-pv--theme .tmk--big{width:100%;height:100%;border-radius:10px}
.wd-toks{border:1px solid var(--line);border-radius:12px;background:var(--card);overflow:hidden}
.wd-toks>div{display:grid;grid-template-columns:20px 110px minmax(0,1fr) auto;align-items:center;gap:12px;height:48px;padding:0 16px;border-top:1px solid var(--line);font-size:14px}
.wd-toks>div:first-child{border-top:0}
.wd-toks i{width:20px;height:20px;border-radius:6px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.wd-toks code{font:12.5px var(--mono)}.wd-toks span{color:var(--muted)}.wd-toks .v{color:var(--muted)}
.wic{padding:8px 4px 0}
.wic .wl-head{align-items:center}
.wic .wb-search{width:220px}
.wic .ic-grid{grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}
.wic .ic{background:var(--card)}
.wpub{padding:28px 4px 0}
.wpub .lhead{padding:0 0 22px;text-align:left}
.wpub .lhead h1{margin:0;font-size:13px;font-weight:500;color:var(--muted)}
.wpub .lhead__t{margin:6px 0 0;font-size:24px;line-height:1.3;font-weight:700;letter-spacing:-.02em}
.wpub .lhead__d{margin:6px 0 0;font-size:15px;color:var(--muted)}

/* ---------- changelog ---------- */
.wcg{max-width:760px;margin:0 auto;padding:40px 0 80px}
.wcg-h h1{margin:0;font-size:24px;line-height:1.3;font-weight:700;letter-spacing:-.02em}
.wcg-h p{margin:6px 0 0;font-size:15px;color:var(--muted)}
.wcg-l{margin:28px 0 0;padding:0;list-style:none}
.wcg-i{display:grid;grid-template-columns:120px minmax(0,1fr);gap:24px;padding:24px 0;border-top:1px solid var(--line)}
.wcg-d b{display:block;font-size:14px;font-weight:600}
.wcg-d time{display:block;margin-top:2px;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.wcg-b h2{margin:0;font-size:17px;line-height:1.4;font-weight:600}
.wcg-b ul{margin:8px 0 0;padding-left:18px;color:var(--fg80);font-size:14.5px;line-height:1.75}

@media(max-width:1180px){.qv__peek{display:none}}
@media(max-width:760px){
  .qv{--qv-w:calc(100vw - 24px);--qv-t:56px;--qv-b:122px}
  .qv__nav{display:none}
  .qv__acts .qv__ic[data-qv-link]{display:none}
  .qv__top::before{opacity:1}
  .qv__chip{display:none}
  .qv__sim .wl-cells{grid-template-columns:repeat(2,minmax(0,1fr))}
  .qv-pop--copy{right:-8px;width:min(292px,calc(100vw - 24px))}
  .wai{padding-top:28px}
  .wai-starts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wai-cards{grid-template-columns:1fr}
  .wcg{padding-top:24px}.wcg-i{grid-template-columns:1fr;gap:6px}
  .wic .wl-head{flex-wrap:wrap}.wic .wb-search{width:100%}
}

/* ---------- v34 sidebar footer: ? help + ⊕ 发布, both menus open upward ---------- */
.ws-side{display:flex;flex-direction:column;overflow:visible}
.ws-panes{flex:1;min-height:0;height:auto;overflow:hidden}
.ws-foot{position:relative;flex:none;display:flex;align-items:center;justify-content:space-between;padding:6px 12px 5px 4px}
.ws-fm{position:relative;display:flex}
.ws-fhelp{display:grid;place-items:center;width:24px;height:24px;padding:0;border:0;border-radius:999px;background:transparent;color:var(--muted);cursor:pointer;transition:background-color .15s,color .15s}
.ws-fhelp svg{width:18px;height:18px}
.ws-fpub{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 6px;border:0;border-radius:7px;background:transparent;color:var(--muted);font:500 14px/1 var(--font);cursor:pointer;transition:background-color .15s,color .15s}
.ws-fpub svg{width:18px;height:18px}
.ws-fhelp:hover,.ws-fpub:hover{background:var(--hover);color:var(--fg)}
.ws-fhelp[aria-expanded=true],.ws-fpub[aria-expanded=true]{color:var(--fg)}
.ws-fpub.on{color:var(--fg)}
.ws-fhelp:focus-visible,.ws-fpub:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.ws-pop{position:absolute;bottom:calc(100% + 6px);z-index:70;display:flex;flex-direction:column;padding:4px;border-radius:10px;background:#171717;color:#f4f4f5;border:1px solid rgba(255,255,255,.08);box-shadow:0 24px 60px -18px rgba(0,0,0,.5),0 4px 12px rgba(0,0,0,.16);opacity:0;transform:translateY(6px) scale(.98);transform-origin:bottom left;transition:opacity .16s,transform .2s var(--ease-out)}
.ws-pop.open{opacity:1;transform:none}
[data-theme=dark] .ws-pop{background:#1b1b1d;border-color:rgba(255,255,255,.1)}
.ws-pop>a,.ws-pop .ws-hm__news>a{display:flex;align-items:center;gap:8px;height:32px;padding:0 8px;border-radius:7px;color:#f4f4f5;font-size:14px;font-weight:600;white-space:nowrap;transition:background-color .12s}
.ws-pop a:hover,.ws-pop a:focus-visible{background:rgba(255,255,255,.08);outline:0}
.ws-pop a svg{width:15px;height:15px;flex:none;color:#b4b4bb}
.ws-pop a span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.ws-pop--pub{left:-6px;width:191px}
.ws-pop--help{left:-2px;bottom:calc(100% + 8px);width:244px;transform-origin:bottom left}
.ws-pop--help>a{padding:0 11px;gap:8px}
.ws-pop--help>a svg{width:16px;height:16px;stroke-width:1.9;color:#e4e4e7}
.ws-pop__lab{padding:9px 11px 5px;font-size:12.5px;line-height:16px;color:#8a8a93}
.ws-hm__news{display:flex;flex-direction:column}
.ws-pop .ws-hm__news>a{padding:0 11px;gap:8px}
.ws-hm__tl i{position:relative;flex:none;align-self:stretch;width:16px}
.ws-hm__tl i::before{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:#8a8a93}
.ws-hm__tl:not(:last-child) i::after{content:"";position:absolute;left:50%;top:calc(50% + 6px);height:20px;border-left:1px dashed rgba(255,255,255,.18)}
.ws-hm__tl:hover i::before{background:#d4d4d8}
@media(max-width:900px){.ws-pop--pub{left:auto;right:-6px;transform-origin:bottom right}}

/* =================================================================== v35 workspace
 * top-right 升级 / 反馈, dialogs (feedback, contact, upgrade), themes (list, viewer, spec, editor), icons, docs,
 * avatar, purchases, changelog (21st layout), viewer carousel, help menu buttons. */
/* ---------- top-right: purple gem 升级 text button + bordered 反馈 ---------- */
.ws-top .ws-up{border:0;background:transparent;box-shadow:none;color:#7c3aed;padding:0 6px;gap:5px;cursor:pointer}
.ws-top .ws-up:hover{background:color-mix(in srgb,#7c3aed 8%,transparent)}
.ws-top .ws-up svg{color:#8b5cf6;fill:color-mix(in srgb,#8b5cf6 35%,transparent)}
[data-theme=dark] .ws-top .ws-up{color:#b79bff}
.ws-top .ws-tb{cursor:pointer;font-family:var(--font)}
/* help menu rows are buttons now (in-app forms instead of mail links) */
.ws-pop>button[role=menuitem]{display:flex;align-items:center;gap:8px;height:32px;padding:0 11px;border:0;border-radius:7px;background:transparent;color:#f4f4f5;font:600 14px/1 var(--font);white-space:nowrap;text-align:left;cursor:pointer;transition:background-color .12s}
.ws-pop>button[role=menuitem]:hover,.ws-pop>button[role=menuitem]:focus-visible{background:rgba(255,255,255,.08);outline:0}
.ws-pop>button[role=menuitem] svg{width:16px;height:16px;flex:none;stroke-width:1.9;color:#e4e4e7}
.qv-pop button[role=menuitem][data-qv-report]{font-family:var(--font)}

/* ---------- dialogs ---------- */
.xd{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:16px;background:rgba(10,10,12,.55);opacity:0;transition:opacity .18s}
.xd.open{opacity:1}
.xd__box{position:relative;width:min(480px,100%);max-height:calc(100dvh - 32px);overflow:auto;border-radius:20px;background:#fff;color:#0a0a0a;box-shadow:0 40px 100px -30px rgba(0,0,0,.5),0 0 0 1px rgba(0,0,0,.06);transform:translateY(8px) scale(.98);transition:transform .22s var(--ease-out);outline:0;--fg:#0a0a0a;--muted:#6b6b73;--line:#e6e6e8}
.xd.open .xd__box{transform:none}
[data-theme=dark] .xd__box{background:#161618;color:#f4f4f5;box-shadow:0 40px 100px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.08);--fg:#f4f4f5;--muted:#a1a1aa;--line:#2a2a2e}
.xd__x{position:absolute;top:14px;right:14px;display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer}
.xd__x:hover{background:color-mix(in srgb,var(--fg) 7%,transparent);color:var(--fg)}
.xd__x svg{width:17px;height:17px}
.xf__f h2,.xf__done h2,.xf__st h2{margin:0;font-size:20px;line-height:28px;font-weight:650;letter-spacing:-.015em}
.xf__f{padding:24px 24px 0}
.xf__s{margin:4px 0 0;font-size:14px;line-height:21px;color:var(--muted)}
.xf__to{margin:12px 0 0;font-size:13.5px;color:var(--muted)}.xf__to b{color:var(--fg);font-weight:600}
.xf__l{display:block;margin:16px 0 6px;font-size:14px;font-weight:550}
.xf__ta{display:block;width:100%;height:130px;min-height:90px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--fg);font:14.5px/1.55 var(--font);resize:vertical;outline:0;transition:border-color .15s,box-shadow .15s}
.xf__ta:focus{border-color:#0033ff;box-shadow:0 0 0 3px color-mix(in srgb,#0033ff 18%,transparent)}
.xf__ta.bad{border-color:#e5484d;animation:xfShake .3s}
@keyframes xfShake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.xf__foot{display:flex;align-items:center;justify-content:space-between;margin:20px -24px 0;padding:14px 24px;border-top:1px solid var(--line);background:color-mix(in srgb,var(--fg) 3%,transparent)}
.xf__hint{font-size:12px;color:var(--muted)}
.xf__go{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 16px;border:0;border-radius:9px;background:#0033ff;color:#fff;font:600 14px/1 var(--font);cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.xf__go:hover{filter:brightness(1.1)}.xf__go:disabled{opacity:.6;cursor:default}
.xf__go--w{width:100%;height:46px;margin-top:14px;border-radius:12px;font-size:15px}
.xf__done{padding:36px 24px 26px;text-align:center}
.xf__done p{margin:6px 0 20px;color:var(--muted);font-size:14px}
.xf__ok{display:inline-grid;place-items:center;width:44px;height:44px;margin-bottom:12px;border-radius:50%;background:color-mix(in srgb,#16a34a 14%,transparent);color:#16a34a;animation:xfPop .35s var(--ease-out)}
.xf__ok svg{width:22px;height:22px}
@keyframes xfPop{from{transform:scale(.6);opacity:0}}
.xf--steps .xd__box{padding:30px 28px 22px;text-align:center}
.xf--steps .xf__s{margin-bottom:16px}
.xf__ta--c{text-align:left}
.xf__opts{display:grid;gap:8px;margin-top:18px}
.xf__opts button{height:46px;padding:0 16px;border:0;border-radius:12px;background:color-mix(in srgb,var(--fg) 5%,transparent);color:var(--fg);font:500 15px/1 var(--font);text-align:left;cursor:pointer;transition:background-color .15s}
.xf__opts button:hover{background:color-mix(in srgb,var(--fg) 9%,transparent)}
.xf__skip{margin-top:10px;border:0;background:none;color:var(--muted);font:500 13px var(--font);cursor:pointer}
.xf__dots{display:flex;justify-content:center;gap:6px;margin-top:18px}
.xf__dots i{width:16px;height:5px;border-radius:9px;background:color-mix(in srgb,var(--fg) 12%,transparent);transition:width .2s,background-color .2s}
.xf__dots i.on{width:26px;background:var(--fg)}
/* upgrade */
.xu .xd__box{width:min(768px,100%);border-radius:16px}
.xu__in{padding:34px 52px 34px;text-align:center}
.xu__h{margin:0;font:400 clamp(32px,4.2vw,50px)/1.12 "Songti SC","Noto Serif SC",Georgia,serif;letter-spacing:-.01em}
.xu__h s{text-decoration:none;position:relative;white-space:nowrap}
.xu__h s::after{content:"";position:absolute;left:-4px;right:-4px;top:54%;height:3px;border-radius:2px;background:#e5484d}
.xu__s{margin:12px 0 0;font-size:14.5px;color:var(--muted)}
.xu__seg{display:inline-flex;margin-top:18px;padding:3px;border-radius:9px;background:color-mix(in srgb,var(--fg) 5%,transparent)}
.xu__seg button{height:26px;padding:0 10px;border:0;border-radius:7px;background:transparent;color:var(--muted);font:500 12.5px/1 var(--font);cursor:pointer}
.xu__seg button.on{background:#fff;color:var(--fg);box-shadow:0 1px 2px rgba(0,0,0,.08),0 0 0 1px rgba(0,0,0,.06)}
[data-theme=dark] .xu__seg button.on{background:#2a2a2e}
.xu__yr{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:14px;font-size:14px;color:var(--muted)}
.xu__yr b{color:#0033ff;font-weight:500}
.xu__sw{position:relative;width:36px;height:20px;padding:0;border:0;border-radius:99px;background:color-mix(in srgb,var(--fg) 18%,transparent);cursor:pointer;transition:background-color .2s}
.xu__sw i{position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .2s var(--ease-out)}
.xu__sw.on{background:#0033ff}.xu__sw.on i{transform:translateX(16px)}
.xu__cards{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:22px;text-align:left}
.xu__cards--1{grid-template-columns:minmax(0,320px);justify-content:center}
.xu__c{padding:22px 20px 24px;border-radius:20px;border:1px solid var(--line);background:#fff}
.xu__c--ai{background:#f7f7f8}
[data-theme=dark] .xu__c{background:#1b1b1e}[data-theme=dark] .xu__c--ai{background:#202024}
.xu__c h3{display:flex;align-items:center;gap:8px;margin:0;font-size:22px;line-height:28px;font-weight:650;letter-spacing:-.015em}
.xu__c h3 em{font-style:normal;display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:99px;background:#0033ff;color:#fff;font-size:13px;font-weight:600}
.xu__c h3 em.xu__soon{background:color-mix(in srgb,var(--fg) 8%,transparent);color:var(--muted)}
.xu__cs{margin:8px 0 0;font-size:14px;color:var(--muted)}
.xu__p{display:flex;align-items:center;gap:12px;margin:16px 0 18px}
.xu__p b{font-size:44px;line-height:1;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.xu__p span{font-size:13.5px;line-height:20px;color:var(--muted)}
.xu__b{display:flex;align-items:center;justify-content:center;width:100%;height:40px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--fg);font:500 14.5px/1 var(--font);cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.04)}
[data-theme=dark] .xu__b{background:#26262a}
.xu__b:hover{background:#f6f6f7}
.xu__b--pri{background:#0033ff;border-color:#0033ff;color:#fff}
.xu__b:disabled{cursor:default;opacity:.55}
.xu__b--pri:disabled{opacity:.45;background:#0033ff}
.xu__alt{display:block;width:100%;margin-top:8px;border:0;background:none;color:var(--muted);font:500 13px var(--font);cursor:pointer}
.xu__alt:hover{color:var(--fg)}
.xu__f{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:12px}
.xu__f li{display:flex;gap:10px;font-size:14.5px;line-height:20px}
.xu__f svg{flex:none;width:16px;height:16px;margin-top:2px;color:var(--muted)}
.xu__f small{display:block;font-size:13px;color:var(--muted)}
.xu__promo{margin:22px 0 0;font-size:13.5px;color:var(--muted)}
.xu__foot{margin:12px 0 0;font-size:13.5px;color:var(--muted)}
.xu__foot a{color:var(--fg);text-decoration:underline;text-underline-offset:3px}
@media(max-width:700px){.xu__in{padding:28px 18px}.xu__cards{grid-template-columns:1fr}}

/* ---------- avatar (uploaded image everywhere) ---------- */
.ws-av.has-img{background-size:cover;background-position:center;color:transparent;font-size:0}
.ws-av--xl{width:56px;height:56px;border-radius:14px;font-size:22px}
.st-avw{display:flex;align-items:center;gap:10px}
.st-avb{position:relative;padding:0;border:0;border-radius:14px;background:none;cursor:pointer}
.st-avb i{position:absolute;inset:0;display:grid;place-items:center;border-radius:14px;background:rgba(0,0,0,.45);color:#fff;font:600 12.5px/1 var(--font);font-style:normal;opacity:0;transition:opacity .15s}
.st-avb:hover i,.st-avb:focus-visible i{opacity:1}
.st-avb.busy i{opacity:1}
.st-avx{border:0;background:none;color:var(--muted);font:500 13px var(--font);cursor:pointer}.st-avx:hover{color:var(--fg)}
.st-saved{margin-left:8px;font-size:12.5px;color:var(--muted);white-space:nowrap}
.st-link{border:0;background:none;padding:0;color:inherit;font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
button.st-danger{border:0;background:none;padding:0;font:inherit;cursor:pointer}
.st-empty-card{padding:36px 24px;text-align:center}
.st-empty-card b{display:block;font-size:15px}
.st-empty-card p{max-width:400px;margin:8px auto 16px;font-size:14px;line-height:21px;color:var(--muted)}
.mono{font-family:var(--mono)}

/* ---------- drill panes: themes / icons / editor rail ---------- */
.ws-create{display:flex;align-items:center;justify-content:center;gap:7px;height:32px;margin:0 0 10px;border-radius:8px;background:#0033ff;color:#fff;font-size:14px;font-weight:500;box-shadow:inset 0 1px 0 rgba(255,255,255,.18);transition:filter .15s}
.ws-create:hover{filter:brightness(1.1)}
.ws-create svg{width:15px;height:15px}
.ws-exit{display:flex;align-items:center;gap:8px;height:32px;padding:0 8px;margin-bottom:12px;border-radius:8px;color:var(--fg80);font-size:14px;font-weight:500}
.ws-exit:hover{background:var(--hover);color:var(--fg)}
.ws-exit svg{width:15px;height:15px}
.te-lab{display:block;padding:0 4px 6px;font-size:12.5px;color:var(--dim)}
.te-sel,.te-fs select{width:100%;height:34px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--fg);font:14px var(--font)}
.te-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin:12px 0 4px;padding:3px;border-radius:10px;background:var(--hover)}
.te-tabs button{display:grid;place-items:center;gap:2px;height:44px;padding:4px 0;border:0;border-radius:8px;background:transparent;color:var(--muted);font:500 11.5px/1 var(--font);cursor:pointer}
.te-tabs button svg{width:16px;height:16px}
.te-tabs button.on{background:var(--card);color:var(--fg);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.te-panel{padding-bottom:16px}
.te-g{padding:12px 2px 4px}
.te-g h3{margin:0 0 6px;padding:0 4px;font-size:12.5px;font-weight:500;color:var(--dim)}
.te-c{display:grid;grid-template-columns:minmax(0,1fr) 74px 26px;align-items:center;gap:6px;height:34px;padding:0 4px;border-radius:8px;font-size:13.5px;color:var(--fg80)}
.te-c:hover{background:var(--hover)}
.te-hex{width:74px;height:26px;padding:0 6px;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--muted);font:12px var(--mono);text-transform:lowercase}
.te-hex:focus{border-color:var(--line);background:var(--card);color:var(--fg);outline:0}
.te-sw{position:relative;width:24px;height:24px;border-radius:6px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);overflow:hidden}
.te-sw input{position:absolute;inset:-6px;width:36px;height:36px;padding:0;border:0;opacity:0;cursor:pointer}
.te-r{display:grid;gap:6px;padding:6px 4px;font-size:13.5px;color:var(--fg80)}
.te-r span{display:flex;justify-content:space-between}.te-r b{font:500 12px var(--mono);color:var(--muted)}
.te-r input{width:100%;accent-color:#0033ff}
.te-fs{display:grid;gap:6px;padding:6px 4px;font-size:13.5px;color:var(--fg80)}
.te-note{margin:12px 4px 0;font-size:12.5px;line-height:18px;color:var(--muted)}

/* ---------- themes list: hairline cells, theme swatch, palette dots ---------- */
.wth-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-left:1px solid var(--line);border-top:1px solid var(--line);margin:14px 20px 40px 20px}
.wth-g--3{grid-template-columns:repeat(3,minmax(0,1fr));margin:12px 0 0}
.wth{position:relative;padding:32px 20px 0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-width:0}
.wth__pv{position:relative;display:flex;align-items:flex-end;height:175px;padding:16px 18px;border-radius:10px;box-shadow:0 0 0 1px rgba(0,0,0,.06);overflow:hidden;transition:transform .2s var(--ease-out),box-shadow .2s}
.wth__pv:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(0,0,0,.06),0 14px 30px -14px rgba(0,0,0,.35)}
.wth__pv b{font-size:24px;line-height:1.2;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wth__dots{position:absolute;top:14px;right:14px;display:flex}
.wth__dots i{width:26px;height:26px;margin-left:-8px;border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.18),0 1px 3px rgba(0,0,0,.18)}
.wth__meta{display:flex;align-items:center;gap:6px;height:47px;font-size:13px;color:var(--muted)}
.wth__meta i{font-style:normal;color:var(--dim)}
.wth__meta .wc__av{width:18px;height:18px;border-radius:5px}
.wth__save,.wth__ed{margin-left:auto;display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:7px;background:transparent;color:var(--muted);cursor:pointer}
.wth__ed{width:auto;padding:0 8px;font-size:13px}
.wth__save:hover,.wth__ed:hover{background:var(--hover);color:var(--fg)}
.wth__save svg{width:16px;height:16px}.wth__save.on svg{fill:currentColor;color:var(--fg)}
.wth-empty{margin:40px 20px}
@media(max-width:1400px){.wth-g{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1000px){.wth-g,.wth-g--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.wth-g,.wth-g--3{grid-template-columns:1fr;margin:10px 12px 30px}.wth{padding:16px 14px 0}.wth__pv{height:150px}}

/* ---------- theme spec sheet (rendered with the theme's own variables) ---------- */
.tsp{--tr2:calc(var(--trad) * 1.5);color:var(--tf);font-family:var(--tfont);letter-spacing:var(--ttrack);font-size:14px;line-height:1.45}
.tsp *{box-sizing:border-box}
.tsp-card{border:1px solid var(--tbd);border-radius:var(--tr2);background:var(--tc);color:var(--tcf);box-shadow:var(--tsh);overflow:hidden}
.tsp-h{display:flex;align-items:center;gap:12px;padding:20px;border-bottom:1px solid var(--tbd)}
.tsp-av{flex:none;width:38px;height:38px;border-radius:8px}
.tsp-hn{min-width:0}.tsp-hn b{display:block;font:600 16px/1.25 var(--thfont)}.tsp-hn small{display:block;margin-top:2px;font-size:12px;color:var(--tmf)}
.tsp-chip{margin-left:auto;display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:7px;background:var(--ts);color:var(--tsf);font-size:12px;font-weight:500;white-space:nowrap}
.tsp-chip svg{width:13px;height:13px}
.tsp-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--tbd)}
.tsp-col{padding:20px;min-height:180px}.tsp-col+.tsp-col{border-left:1px solid var(--tbd)}
.tsp-l{margin:0 0 14px;font-size:11px;letter-spacing:.04em;color:var(--tmf)}
.tsp-sws{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px 10px}
.tsp-sws i{display:block;height:30px;border-radius:6px;box-shadow:inset 0 0 0 1px var(--tbd)}
.tsp-sws small{display:block;margin-top:5px;font-size:10px;color:var(--tmf);white-space:nowrap}
.tsp-t1{display:block;font:700 24px/1.2 var(--thfont)}.tsp-t2{margin:6px 0 0;font-size:14px}.tsp-t3{margin:4px 0 0;font-size:12.5px;color:var(--tmf)}
.tsp-rad{display:flex;gap:8px}.tsp-rad i{width:32px;height:32px;border:2px solid var(--tf)}
.tsp-comp{padding:20px}
.tsp .tb{display:inline-flex;align-items:center;justify-content:center;height:28px;padding:0 12px;border-radius:calc(var(--trad) * .75);font-size:13px;font-weight:500;white-space:nowrap;border:1px solid transparent}
.tb--p{background:var(--tp);color:var(--tpf)}.tb--s{background:var(--ts);color:var(--tsf)}.tb--o{border-color:var(--tbd)!important;background:var(--tc)}.tb--g{background:transparent}.tb--d{background:var(--td);color:#fff}
.tb--w{width:100%;height:34px;margin-top:12px}
.tsp-btns{display:flex;flex-wrap:wrap;gap:10px}
.tsp-bdg{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:18px}
.tsp .bd{display:inline-flex;align-items:center;height:21px;padding:0 8px;border-radius:calc(var(--trad) * .6);font-size:12px;font-weight:600;border:1px solid transparent}
.bd--p{background:var(--tp);color:var(--tpf)}.bd--s{background:var(--ts);color:var(--tsf)}.bd--o{border-color:var(--tbd)!important}.bd--d{background:var(--td);color:#fff}
.tsp-avs{margin-left:auto;display:flex}.tsp-avs i{display:grid;place-items:center;width:24px;height:24px;margin-left:-4px;border-radius:50%;background:var(--tm);color:var(--tf);font:600 10px/1 var(--tfont);font-style:normal;box-shadow:0 0 0 2px var(--tc)}
.tsp-ctl{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto minmax(0,1fr);align-items:end;gap:14px;margin-top:20px}
.tsp-lb{display:block;margin:0 0 6px;font-size:12.5px;font-weight:500}
.tsp-in{display:flex;align-items:center;height:35px;padding:0 12px;border:1px solid var(--tin);border-radius:calc(var(--trad) * .75);background:var(--tb);color:var(--tmf);font-size:13.5px}
.tsp-sw{position:relative;display:inline-block;width:36px;height:20px;border-radius:99px;background:var(--tin);margin-bottom:8px;flex:none}
.tsp-sw i{position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:var(--tc);box-shadow:0 1px 2px rgba(0,0,0,.2)}
.tsp-sw.on{background:var(--tp)}.tsp-sw.on i{left:18px;background:var(--tpf)}
.tsp-cb{display:grid;place-items:center;width:16px;height:16px;margin-bottom:10px;border-radius:4px;background:var(--tp);color:var(--tpf)}.tsp-cb svg{width:12px;height:12px}
.tsp-cl{margin-bottom:9px;font-size:12.5px}
.tsp-rng{display:grid;gap:12px;padding-bottom:8px}
.tsp-prog{display:block;height:8px;border-radius:99px;background:var(--ts);overflow:hidden}.tsp-prog i{display:block;width:62%;height:100%;background:var(--tp)}
.tsp-sld{position:relative;display:block;height:4px;border-radius:99px;background:var(--ts)}.tsp-sld i{position:absolute;left:0;top:0;bottom:0;width:42%;border-radius:inherit;background:var(--tp)}
.tsp-sld b{position:absolute;left:42%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:var(--tc);border:2px solid var(--tp)}
.tsp-sec{display:flex;align-items:baseline;gap:8px;margin:38px 0 14px;font-size:14px;font-weight:500;color:var(--tf)}
.tsp-sec small{font-size:12px;color:var(--tmf);font-weight:400}
.tsp-dash,.tsp-forms{display:grid;grid-template-columns:1fr 1fr;gap:17px}
.tsp-k{display:flex;flex-direction:column;padding:24px;border:1px solid var(--tbd);border-radius:var(--tr2);background:var(--tc);color:var(--tcf);box-shadow:var(--tsh);min-width:0}
.tsp-k>span{font-size:13.5px}.tsp-k>b{margin-top:6px;font:700 28px/1.15 var(--tfont);letter-spacing:-.01em}.tsp-k>small{margin-top:4px;font-size:12.5px;color:var(--tmf)}
.tsp-k--w{grid-column:1/-1}
.tsp-ch{width:100%;height:70px;margin-top:14px}.tsp-ch--t{height:110px}
.tsp-ch .ln{fill:none;stroke:var(--tc1);stroke-width:2.2;vector-effect:non-scaling-stroke}.tsp-ch .ln--2{stroke:var(--tc2)}.tsp-ch .ln--3{stroke:var(--tc3)}
.tsp-ch .ar{fill:var(--tc1);opacity:.14}.tsp-ch .br{fill:var(--tc1);opacity:.85}
.tsp-goal{display:flex;align-items:center;justify-content:center;gap:24px;margin:10px 0 0}.tsp-goal b{font:700 36px/1 var(--tfont);text-align:center}.tsp-goal small{display:block;margin-top:4px;font-size:11px;font-weight:500;color:var(--tmf)}
.tsp-rb{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--tbd);font-size:16px}
.tsp-ft{font:600 16px/1.3 var(--thfont)}.tsp-k .tsp-ft+small{margin:2px 0 12px;font-size:12.5px;color:var(--tmf)}
.tsp-k .tsp-lb{margin-top:10px}
.tsp-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--tbd);font-size:13.5px}
.tsp-row small{display:block;font-size:12px;color:var(--tmf)}.tsp-row .tsp-sw{margin:0}
.tsp-mem{display:flex;align-items:center;gap:10px}.tsp-mem i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--tm);font:600 12px/1 var(--tfont);font-style:normal}
.tsp-host{min-width:0}
.wd-show .tsp-host{padding:clamp(16px,3vw,32px);border-radius:14px;background:#f1f1f3}
[data-theme=dark] .wd-show .tsp-host{background:#121214}
@media(max-width:760px){.tsp-3{grid-template-columns:1fr}.tsp-col+.tsp-col{border-left:0;border-top:1px solid var(--tbd)}.tsp-col{min-height:0}.tsp-ctl{grid-template-columns:1fr auto auto auto}.tsp-rng{grid-column:1/-1}.tsp-dash,.tsp-forms{grid-template-columns:1fr}}

/* ---------- theme viewer (21st: dark backdrop, white sheet 62.5vw, arrows, 保存 + 在编辑器中打开, 查看相似内容) ---------- */
.tv{--tv-w:min(62.5vw,1200px);--tv-t:116px;--tv-b:116px;position:fixed;inset:0;z-index:130;background:rgba(0,0,0,.82);opacity:0;transition:opacity .2s var(--ease-out);overflow:hidden}
.tv.open{opacity:1}
.tv__top{position:absolute;left:0;right:0;top:0;height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 12px 0 10px;color:#fff;z-index:4}
.tv__who{display:flex;align-items:center;gap:10px;min-width:0}
.tv__av{flex:none;width:28px;height:28px;border-radius:7px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.tv__who b{display:block;font-size:13.5px;line-height:17px;font-weight:650}.tv__who small{display:block;font-size:12px;line-height:15px;font-weight:600;color:#fff}
.tv__acts{display:flex;align-items:center}
.tv__ic{display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:8px;background:transparent;color:#fff;cursor:pointer}
.tv__ic:hover{background:rgba(255,255,255,.12)}.tv__ic svg{width:18px;height:18px}
.tv__up,.qv__up{display:inline-flex;align-items:center;gap:5px;height:30px;margin-right:8px;padding:0 8px;border:0;border-radius:8px;background:transparent;color:#b79bff;font:500 13.5px/1 var(--font);cursor:pointer}
.tv__up:hover,.qv__up:hover{background:rgba(255,255,255,.08)}.tv__up svg,.qv__up svg{width:15px;height:15px}
.tv__sheet{position:absolute;left:50%;top:var(--tv-t);width:var(--tv-w);height:calc(100% - var(--tv-t) - var(--tv-b));transform:translateX(-50%);border-radius:12px;background:#fff;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;box-shadow:0 30px 80px -24px rgba(0,0,0,.6);transition:background-color .25s}
.tv__sheet.alt{background:#0d0d0f}
.tv__in{width:min(1024px,calc(100% - 48px));margin:0 auto;padding:24px 0 48px}
.tv__sheet.in-r{animation:tvInR .46s cubic-bezier(.2,.8,.2,1)}.tv__sheet.in-l{animation:tvInL .46s cubic-bezier(.2,.8,.2,1)}
@keyframes tvInR{from{transform:translateX(calc(-50% + 58vw)) scale(.74);opacity:.4;filter:brightness(.7)}}
@keyframes tvInL{from{transform:translateX(calc(-50% - 58vw)) scale(.74);opacity:.4;filter:brightness(.7)}}
.tv__ghost{pointer-events:none;z-index:1;transition:transform .46s cubic-bezier(.2,.8,.2,1),opacity .46s,filter .46s}
.tv .tv__sheet.tv__ghost.go{transform:translateX(calc(-50% + var(--dx) * 58vw)) scale(.74) perspective(1400px) rotateY(calc(var(--dx) * -8deg));opacity:0;filter:blur(3px) brightness(.7)}
.tv__nav{position:absolute;top:calc(var(--tv-t) + (100% - var(--tv-t) - var(--tv-b)) / 2 - 18px);z-index:3;display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:8px;background:transparent;color:#fff;cursor:pointer}
.tv__nav:hover{background:rgba(255,255,255,.12)}.tv__nav svg{width:20px;height:20px}
.tv__nav--l{left:calc(50% - var(--tv-w) / 2 - 43px)}.tv__nav--r{right:calc(50% - var(--tv-w) / 2 - 43px)}
.tv__bar{position:absolute;left:50%;top:calc(100% - var(--tv-b) + 17px);transform:translateX(-50%);display:flex;align-items:center;gap:14px}
.tv__save{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:#fff;font:600 14px/1 var(--font);cursor:pointer;white-space:nowrap}
.tv__save:hover{background:rgba(255,255,255,.1)}.tv__save svg{width:16px;height:16px}.tv__save.on svg{fill:currentColor}
.tv__ed{display:inline-flex;align-items:center;height:34px;padding:0 16px;border-radius:999px;background:#0033ff;color:#fff;font-size:14px;font-weight:600;white-space:nowrap;box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.tv__ed:hover{filter:brightness(1.12)}
.tv__simb{position:absolute;left:50%;top:calc(100% - var(--tv-b) + 67px);transform:translateX(-50%);display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px 0 15px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:#151517;color:#fff;font:600 14px/1 var(--font);white-space:nowrap;cursor:pointer}
.tv__simb:hover{background:#1f1f22}.tv__simb svg{width:15px;height:15px;opacity:.8}
.tv__sim{position:absolute;left:0;right:0;bottom:0;top:72px;z-index:5;padding:20px clamp(16px,4vw,64px) 40px;border-radius:16px 16px 0 0;background:#0f0f11;overflow-y:auto;transform:translateY(100%);transition:transform .32s var(--ease-out);--line:rgba(255,255,255,.1);--muted:#a1a1aa;--fg:#f4f4f5;--hover:rgba(255,255,255,.08);--dim:#8a8a93}
.tv__sim.open{transform:none}
.tv__simh{display:flex;align-items:center;justify-content:space-between}.tv__simh h2{margin:0;color:#fff;font-size:18px;font-weight:600}
@media(max-width:900px){.tv{--tv-w:calc(100vw - 24px);--tv-t:58px;--tv-b:120px}.tv__nav{display:none}.tv__in{width:calc(100% - 24px);padding-top:12px}}

/* ---------- theme editor ---------- */
.te{display:flex;flex-direction:column;min-height:calc(100vh - 44px)}
.te-bar{position:sticky;top:44px;z-index:5;display:flex;align-items:center;gap:6px;height:52px;padding:0 20px;background:color-mix(in srgb,var(--bg) 92%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.te-name{display:flex;align-items:baseline;gap:10px;min-width:0}
.te-name input{width:min(280px,40vw);height:32px;padding:0 8px;border:1px solid transparent;border-radius:7px;background:transparent;color:var(--fg);font:600 15px var(--font)}
.te-name input:hover{border-color:var(--line)}.te-name input:focus{border-color:#0033ff;outline:0;background:var(--card)}
.te-name input.bad{border-color:#e5484d}
.te-name small{font-size:12.5px;color:var(--muted);white-space:nowrap}
.te-ib{display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--fg80);cursor:pointer}
.te-ib:hover:not(:disabled){background:var(--hover);color:var(--fg)}.te-ib:disabled{opacity:.35;cursor:default}.te-ib svg{width:17px;height:17px}
.te-save{height:32px;margin-left:6px;padding:0 14px;border:0;border-radius:8px;background:#0033ff;color:#fff;font:600 14px/1 var(--font);cursor:pointer}
.te-save:hover{filter:brightness(1.1)}.te-save:disabled{opacity:.6}
.te-canvas{flex:1;padding:28px clamp(16px,4vw,64px) 60px;background:#f1f1f3}
[data-theme=dark] .te-canvas{background:#0e0e10}
.te-canvas .tsp-host{max-width:1080px;margin:0 auto}
.ws-pane--te{padding-bottom:12px}

/* ---------- icons (21st: hairline tiles, hover chip + 详情, copied state, bottom control pill, right panel) ---------- */
.wic2{position:relative;padding:14px 20px 110px}
.wic-grid{--ic-s:24px;display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.wic-t{position:relative;aspect-ratio:1/1.08;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background-color .15s,box-shadow .2s}
.wic-t:hover,.wic-t.sel{z-index:2;background:var(--card);box-shadow:0 10px 30px -12px rgba(0,0,0,.25),0 0 0 1px var(--line)}
.wic-b{position:absolute;inset:0;display:grid;place-items:center;padding:0;border:0;background:transparent;color:var(--fg);cursor:pointer}
.wic-g{display:grid;place-items:center;transition:transform .25s var(--ease-out),opacity .15s}
.wic-g svg{width:var(--ic-s);height:var(--ic-s)}
.wic-t:hover .wic-g{transform:scale(1.18)}
.wic-ok{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:4px;opacity:0;transform:scale(.8);transition:opacity .15s,transform .25s var(--ease-out);pointer-events:none}
.wic-ok svg{width:20px;height:20px}.wic-ok b{font-size:12.5px;font-weight:600}
.wic-t.ok .wic-g{opacity:0;transform:scale(.6)}.wic-t.ok .wic-ok{opacity:1;transform:none}
.wic-t.ok .wic-ok svg path{stroke-dasharray:24;stroke-dashoffset:24;animation:icDraw .35s .05s forwards}
@keyframes icDraw{to{stroke-dashoffset:0}}
.wic-lib{position:absolute;left:8px;right:8px;top:8px;display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;opacity:0;transform:translateY(-3px);transition:opacity .15s,transform .2s;pointer-events:none}
.wic-mk{flex:none;width:14px;height:14px;color:var(--fg)}
.wic-d{position:absolute;left:50%;bottom:8px;display:inline-flex;align-items:center;gap:1px;height:20px;padding:0 4px 0 7px;border:0;border-radius:6px;background:transparent;color:var(--muted);font:500 11.5px/1 var(--font);white-space:nowrap;cursor:pointer;opacity:0;transform:translate(-50%,3px);transition:opacity .15s,transform .2s,background-color .15s}
.wic-d svg{width:12px;height:12px}.wic-d:hover{background:var(--hover);color:var(--fg)}
.wic-t:hover .wic-lib,.wic-t:hover .wic-d,.wic-t.ok .wic-lib,.wic-t.ok .wic-d,.wic-t:focus-within .wic-d{opacity:1;transform:translate(0,0)}
.wic-t:hover .wic-d,.wic-t.ok .wic-d,.wic-t:focus-within .wic-d{transform:translate(-50%,0)}
/* per-category hover motion */
.wic-t[data-mo=nudge]:hover .wic-g svg{animation:icNudge .5s var(--ease-out)}
.wic-t[data-mo=bounce]:hover .wic-g svg{animation:icBounce .55s var(--ease-out)}
.wic-t[data-mo=wiggle]:hover .wic-g svg{animation:icWiggle .55s ease-in-out}
.wic-t[data-mo=spin]:hover .wic-g svg{animation:icSpin .7s var(--ease-out)}
.wic-t[data-mo=pop]:hover .wic-g svg{animation:icPop .45s var(--ease-out)}
.wic-t[data-mo=draw]:hover .wic-g svg *{stroke-dasharray:1;animation:icStroke .6s ease-out}
@keyframes icNudge{40%{transform:translateX(3px)}70%{transform:translateX(-1px)}}
@keyframes icBounce{30%{transform:translateY(-4px)}55%{transform:translateY(0)}75%{transform:translateY(-1.5px)}}
@keyframes icWiggle{25%{transform:rotate(-10deg)}50%{transform:rotate(8deg)}75%{transform:rotate(-4deg)}}
@keyframes icSpin{from{transform:rotate(-90deg)}}
@keyframes icPop{40%{transform:scale(.82)}75%{transform:scale(1.08)}}
@keyframes icStroke{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.wic-t .wic-g svg,.wic-t .wic-g svg *{animation:none!important}}
.wic-bar{position:fixed;left:calc(var(--ws-side) + (100vw - var(--ws-side)) / 2);bottom:22px;z-index:20;transform:translateX(-50%);display:flex;align-items:center;gap:4px;padding:5px;border-radius:999px;background:var(--card);border:1px solid var(--line);box-shadow:0 16px 40px -14px rgba(0,0,0,.28),0 2px 6px rgba(0,0,0,.06);transition:left .2s}
.ic-panel .wic-bar{left:calc(var(--ws-side) + (100vw - var(--ws-side) - 300px) / 2)}
.wic-bar label{display:flex;align-items:center;gap:4px;height:32px;padding:0 4px 0 12px;border-radius:999px;font-size:13px;color:var(--muted);white-space:nowrap}
.wic-bar label:hover{background:var(--hover)}
.wic-bar select{height:30px;padding:0 4px;border:0;background:transparent;color:var(--fg);font:600 13px var(--font);cursor:pointer;outline:0}
.ic-panel .ws-main{padding-right:300px}
.wic-p{position:fixed;top:44px;right:0;bottom:0;z-index:25;width:300px;border-left:1px solid var(--line);background:var(--bg);overflow-y:auto;transform:translateX(100%);transition:transform .22s var(--ease-out)}
.wic-p.open{transform:none}
.wic-p__h{display:flex;align-items:center;justify-content:space-between;height:46px;padding:0 10px 0 16px;border-bottom:1px solid var(--line);font-size:13.5px}
.wic-p__x{display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:7px;background:transparent;color:var(--muted);cursor:pointer}.wic-p__x:hover{background:var(--hover);color:var(--fg)}.wic-p__x svg{width:15px;height:15px}
.wic-p__in{padding:16px}
.wic-p__top{display:flex;align-items:center;gap:12px}
.wic-p__pv{flex:none;display:grid;place-items:center;width:64px;height:64px;border-radius:12px;background:var(--hover);color:var(--fg)}.wic-p__pv svg{width:32px;height:32px}
.wic-p__top b{display:block;font-size:14.5px;font-weight:600}.wic-p__top small{display:block;margin-top:2px;font:12px var(--mono);color:var(--muted)}
.wic-p__kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 12px;margin:18px 0;font-size:13px}
.wic-p__kv dt{color:var(--muted)}.wic-p__kv dd{margin:0;display:flex;align-items:center;justify-content:flex-end;gap:6px;text-align:right}
.wic-p__kv .wc__av{width:18px;height:18px;border-radius:5px}
.wic-p__split{position:relative;display:flex}
.wic-p__copy{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;height:36px;border:0;border-radius:8px 0 0 8px;background:#0033ff;color:#fff;font:600 14px/1 var(--font);cursor:pointer;transition:filter .15s}
.wic-p__copy.ok{background:#16a34a}
.wic-p__chev{width:34px;border:0;border-left:1px solid rgba(255,255,255,.3);border-radius:0 8px 8px 0;background:#0033ff;color:#fff;cursor:pointer}
.wic-p__copy svg,.wic-p__chev svg{width:15px;height:15px}.wic-p__copy:hover,.wic-p__chev:hover{filter:brightness(1.1)}
.wic-p__menu{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:3;display:flex;flex-direction:column;padding:4px;border-radius:10px;background:#18181b;box-shadow:0 20px 50px -16px rgba(0,0,0,.5)}
.wic-p__menu button{height:32px;padding:0 10px;border:0;border-radius:7px;background:transparent;color:#f4f4f5;font:500 13.5px var(--font);text-align:left;cursor:pointer}.wic-p__menu button:hover{background:rgba(255,255,255,.08)}
.wic-p__sl{display:flex;justify-content:space-between;margin:22px 0 8px;font-size:13px}.wic-p__sl small{color:var(--muted)}
.wic-p__sim{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.wic-p__sim button{display:grid;place-items:center;aspect-ratio:1;padding:0;border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:transparent;color:var(--fg);cursor:pointer}
.wic-p__sim button:hover{background:var(--card)}.wic-p__sim svg{width:22px;height:22px}
@media(max-width:900px){.wic-bar{left:50%}.ic-panel .wic-bar{left:50%}.ic-panel .ws-main{padding-right:0}.wic-p{top:auto;height:min(70vh,560px);width:100%;border-left:0;border-top:1px solid var(--line);border-radius:16px 16px 0 0;transform:translateY(100%)}.wic2{padding:10px 12px 100px}.wic-grid{grid-template-columns:repeat(auto-fill,minmax(72px,1fr))}.wic-bar label span{display:none}.wic-bar label{padding-left:8px}}

/* ---------- viewer carousel (component viewer) ---------- */
.qv.open .qv__panel.qv__ghost{pointer-events:none;z-index:2;transition:transform .46s cubic-bezier(.2,.8,.2,1),opacity .46s,filter .46s}
.qv.open .qv__panel.qv__ghost.go{transform:translateX(calc(-50% + var(--dx) * 58vw)) scale(.72) perspective(1400px) rotateY(calc(var(--dx) * -9deg));opacity:0;filter:blur(3px) brightness(.75)}
.qv.open .qv__panel.in-r{animation:qvInR .46s cubic-bezier(.2,.8,.2,1)}
.qv.open .qv__panel.in-l{animation:qvInL .46s cubic-bezier(.2,.8,.2,1)}
@keyframes qvInR{from{transform:translateX(calc(-50% + 58vw)) scale(.72) perspective(1400px) rotateY(-9deg);opacity:.5;filter:brightness(.75)}}
@keyframes qvInL{from{transform:translateX(calc(-50% - 58vw)) scale(.72) perspective(1400px) rotateY(9deg);opacity:.5;filter:brightness(.75)}}

/* ---------- changelog (21st: centred 720 column, date gutter, tagged blocks) ---------- */
.wcg{max-width:720px;padding:40px 0 100px}
.wcg-h h1{font-size:18px;font-weight:650;letter-spacing:-.01em}
.wcg-h p{margin-top:4px;font-size:14px}
.wcg-l{margin-top:56px}
.wcg-i{grid-template-columns:152px minmax(0,1fr);gap:0;padding:28px 0 48px;border-top:0;border-bottom:1px solid var(--line)}
.wcg-i+.wcg-i{padding-top:48px}
.wcg-d time{margin:0;font-size:13px;line-height:22px;color:var(--muted)}
.wcg-d small{display:block;font:500 12px var(--mono);color:var(--dim)}
.wcg-b h2{font-size:28px;line-height:1.25;font-weight:700;letter-spacing:-.02em}
.wcg-lead{margin:18px 0 0;font-size:16px;line-height:1.6;color:var(--fg)}
.wcg-blk{margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}
.wcg-blk p{margin:0 0 8px;font-size:15px;line-height:1.6;color:var(--fg80)}
.wcg-tag{display:block;margin-bottom:8px;font-size:11px;font-weight:650;letter-spacing:.06em}
.wcg-tag--new{color:#16a34a}.wcg-tag--imp{color:#0284c7}.wcg-tag--fix{color:#d97706}
@media(max-width:760px){.wcg{padding:24px 16px 60px}.wcg-i{grid-template-columns:1fr;gap:4px}.wcg-b h2{font-size:22px}}

/* ---------- docs (/docs/ dark marketing, /w/docs/ light workspace) ---------- */
.dz{display:grid;grid-template-columns:240px minmax(0,720px) 200px;justify-content:center;gap:0 56px;width:min(100% - 40px,1320px);margin:0 auto;padding:40px 0 100px}
main>.dz{padding-top:110px}
.dz--ws{padding-top:32px}
.dz-nav{position:sticky;top:96px;align-self:start;max-height:calc(100vh - 120px);overflow:auto;scrollbar-width:none}
.dz--ws .dz-nav{top:68px}
.dz-g{padding:18px 10px 6px;font-size:12px;font-weight:600;color:var(--dim)}
.dz-g:first-child{padding-top:0}
.dz-ni{display:flex;align-items:center;height:32px;padding:0 10px;border-radius:8px;font-size:14px;color:var(--muted);transition:background-color .15s,color .15s}
.dz-ni:hover{color:var(--fg);background:var(--hover,rgba(255,255,255,.06))}
.dz-ni.on{color:var(--fg);font-weight:550;background:var(--sel,var(--hover,rgba(255,255,255,.08)))}
.dz-main{min-width:0}
.dz-eb{margin:0;font-size:13px;font-weight:600;color:var(--accent-2,#4d74ff)}
.dz-hrow{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-top:6px}
.dz-hrow h1{margin:0;font-size:32px;line-height:1.25;font-weight:700;letter-spacing:-.02em}
.dz-cp{flex:none;display:inline-flex;align-items:center;gap:6px;height:30px;margin-top:4px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--muted);font:500 13px var(--font);cursor:pointer}
.dz-cp:hover{color:var(--fg)}.dz-cp svg{width:14px;height:14px}
.dz-lead{margin:12px 0 0;font-size:16.5px;line-height:1.65;color:var(--muted)}
.dz-s{scroll-margin-top:90px;margin-top:44px}
.dz-s h2{position:relative;margin:0 0 12px;font-size:21px;line-height:1.35;font-weight:650;letter-spacing:-.01em}
.dz-a{position:absolute;left:-22px;color:var(--dim);opacity:0;transition:opacity .15s}.dz-s h2:hover .dz-a{opacity:1}
.dz-s p,.dz-s li{font-size:15.5px;line-height:1.75;color:var(--fg80,var(--fg))}
.dz-s p{margin:0 0 12px}.dz-s ol,.dz-s ul{margin:0 0 12px;padding-left:22px}.dz-s li{margin:4px 0}
.dz-s a{color:var(--fg);text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);text-underline-offset:3px}
.dz-s a:hover{text-decoration-color:currentColor}
.dz-s code{padding:1px 6px;border-radius:6px;background:var(--code-bg,rgba(255,255,255,.07));font:13.5px var(--mono)}
.dz-code{position:relative;margin:12px 0 16px;border:1px solid var(--line);border-radius:12px;background:var(--code-bg,rgba(255,255,255,.03));overflow:hidden}
.dz-code__h{height:36px;display:flex;align-items:center;padding:0 14px;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.dz-code pre{margin:0;padding:14px 52px 14px 16px;overflow-x:auto;font:13px/1.65 var(--mono);background:transparent!important;border:0!important}
.dz-copy{position:absolute;right:8px;bottom:8px;display:grid;place-items:center;width:30px;height:30px;padding:0;border:1px solid var(--line);border-radius:8px;background:var(--card,transparent);color:var(--muted);cursor:pointer}
.dz-code__h+pre+.dz-copy{top:3px;bottom:auto}
.dz-copy:hover{color:var(--fg)}.dz-copy svg{width:14px;height:14px}
.dz-note{margin:14px 0;padding:12px 16px;border-radius:12px;background:color-mix(in srgb,#0033ff 8%,transparent);border:1px solid color-mix(in srgb,#0033ff 18%,transparent)}
.dz-note b{display:block;font-size:13px;color:#4d74ff}.dz-note p{margin:4px 0 0!important;font-size:14.5px!important}
[data-theme=light] .dz-note b{color:#0033ff}
.dz-tw{margin:12px 0 16px;overflow-x:auto}
.dz-t{width:100%;border-collapse:collapse;font-size:14.5px}
.dz-t th{padding:10px 12px 10px 0;border-bottom:1px solid var(--line);text-align:left;font-weight:600;white-space:nowrap}
.dz-t td{padding:14px 12px 14px 0;border-bottom:1px solid var(--line);vertical-align:top;color:var(--fg80,var(--fg))}
.dz-t td:first-child{white-space:nowrap}
.dz-pn{display:flex;justify-content:space-between;gap:16px;margin-top:64px;padding-top:24px;border-top:1px solid var(--line)}
.dz-pn a{display:inline-flex;align-items:center;gap:6px;font-size:14.5px;color:var(--muted)}.dz-pn a:hover{color:var(--fg)}.dz-pn svg{width:15px;height:15px}
.dz-toc{position:sticky;top:96px;align-self:start;display:flex;flex-direction:column;gap:2px}
.dz--ws .dz-toc{top:68px}
.dz-toc b{display:flex;align-items:center;gap:7px;margin-bottom:8px;font-size:13px;font-weight:600;color:var(--fg)}.dz-toc b svg{width:15px;height:15px}
.dz-toc a{padding:4px 0;font-size:13.5px;line-height:1.45;color:var(--muted);transition:color .15s}
.dz-toc a:hover{color:var(--fg)}.dz-toc a.on{color:#4d74ff;font-weight:550}
[data-theme=light] .dz-toc a.on{color:#0033ff}
.dz-mnav{display:none;margin:0 0 18px;border:1px solid var(--line);border-radius:10px}
.dz-mnav summary{display:flex;align-items:center;gap:8px;height:42px;padding:0 12px;font-size:14px;cursor:pointer;list-style:none}.dz-mnav summary svg{width:16px;height:16px}
.dz-mnav nav{padding:4px 6px 10px}
@media(max-width:1280px){.dz{grid-template-columns:220px minmax(0,1fr);gap:0 40px}.dz-toc{display:none}}
@media(max-width:860px){.dz{grid-template-columns:minmax(0,1fr);width:calc(100% - 32px)}.dz-nav{display:none}.dz-mnav{display:block}main>.dz{padding-top:84px}.dz-hrow h1{font-size:26px}.dz-cp span{display:none}}

/* ---------- MCP page additions ---------- */
.mx-btns{display:flex;flex-wrap:wrap;gap:8px}
.mx-tasks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:20px}
.mx-task{display:flex;flex-direction:column;padding:20px;border-radius:14px;border:1px solid var(--line);background:var(--card,rgba(255,255,255,.02))}
.mx-task__ic{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--hover,rgba(255,255,255,.06))}.mx-task__ic svg{width:17px;height:17px}
.mx-task h3{margin:12px 0 0;font-size:15.5px;font-weight:600}.mx-task p{margin:6px 0 12px;font-size:14px;line-height:1.6;color:var(--muted)}
.mx-cmd--sm{margin-top:auto}
.mx-note{margin:20px 0 0;font-size:14px;color:var(--muted)}.mx-note a,.mx-lead a{color:var(--fg);text-decoration:underline;text-underline-offset:3px}
@media(max-width:700px){.mx-tasks{grid-template-columns:1fr}}

/* ---------- sign-in: Google + GitHub side by side ---------- */
.am__oauth{display:grid;grid-template-columns:1fr;gap:8px}
.am--2oauth .am__oauth{grid-template-columns:1fr 1fr}
.am__gh{color:var(--fg);fill:currentColor}
.gbtn--gh{margin-top:8px}.gbtn--gh svg{fill:currentColor}
.wmx .mx-cmd{background:var(--code-bg,#f4f4f6);box-shadow:inset 0 0 0 1px var(--line)}
.wmx .mx-cmd pre,.wmx .mx-cmd pre .ln{color:var(--fg)}
.wmx .mx-cmd pre .ln{opacity:.35}
.wmx .mx-task{background:var(--card)}

/* =================================================================== v36
 * marketing nav mega menus (资源库 / 产品), visitor ⌘K, 「新建组件」 modal, Creator Studio, sandbox editor, community shelf. */
/* ---------- mega menus: one panel under the nav that morphs between 资源库 and 产品 ---------- */
.nav__in{position:relative}
.nav__link.on{color:var(--fg);background:var(--hover)}
.nav__link.on svg{transform:rotate(180deg)}
.mm{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:60;opacity:0;transform:translateY(-4px) scale(.995);transform-origin:top center;transition:opacity .18s ease,transform .22s var(--ease)}
.mm.open{opacity:1;transform:none}
.mm__box{overflow:hidden;border-radius:18px;background:rgba(16,16,20,.92);border:1px solid rgba(255,255,255,.09);box-shadow:0 40px 90px -30px rgba(0,0,0,.75),0 0 0 1px rgba(0,0,0,.3);-webkit-backdrop-filter:blur(22px) saturate(1.3);backdrop-filter:blur(22px) saturate(1.3);transition:height .24s var(--ease)}
.mm__p{padding:8px;transition:opacity .2s ease,transform .24s var(--ease)}
.mm__p.in-r{opacity:0;transform:translateX(18px)}.mm__p.in-l{opacity:0;transform:translateX(-18px)}
.mm-lib{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr) minmax(260px,330px);gap:8px;min-height:372px}
.mm-lib__k{display:flex;flex-direction:column;gap:6px;padding:16px 18px 14px}
.mm-k{display:block;padding:6px 8px;margin:0 -8px;border-radius:10px;transition:background-color .15s}
.mm-k:hover,.mm-k:focus-visible{background:rgba(255,255,255,.05);outline:0}
.mm-k b{display:flex;align-items:baseline;gap:8px;font-size:17px;font-weight:650;letter-spacing:-.01em;color:#f4f4f5}
.mm-k b small{font-size:13px;font-weight:450;color:#8b8b94;font-variant-numeric:tabular-nums}
.mm-k span{display:block;margin-top:2px;font-size:13px;color:#9a9aa3}
.mm-pub{display:inline-flex;align-items:center;gap:4px;margin-top:auto;padding-top:10px;font-size:13px;color:#a1a1aa;transition:color .15s}
.mm-pub:hover{color:#fff}.mm-pub svg{width:13px;height:13px;transition:transform .2s var(--ease)}.mm-pub:hover svg{transform:translateX(2px)}
.mm-lib__c{padding:16px 14px 12px;border-radius:12px;background:rgba(255,255,255,.035)}
.mm-lib__c>p{margin:0 0 6px 8px;font-size:13px;color:#8b8b94}
.mm-lib__g{display:grid;grid-template-columns:1fr 1fr;gap:1px 8px}
.mm-c{display:flex;align-items:center;justify-content:space-between;height:40px;padding:0 10px;border-radius:9px;font-size:14.5px;font-weight:500;color:#e8e8ec;transition:background-color .15s}
.mm-c small{font-size:12.5px;color:#8b8b94;font-variant-numeric:tabular-nums}
.mm-c:hover,.mm-c:focus-visible{background:rgba(255,255,255,.07);outline:0}
.mm-pv{display:flex;flex-direction:column;padding:10px;border-radius:12px;background:rgba(255,255,255,.035)}
.mm-pv.swap{animation:mmSwap .26s var(--ease)}
@keyframes mmSwap{from{opacity:.4}to{opacity:1}}
.mm-pv__img{position:relative;display:block;aspect-ratio:16/10;border-radius:9px;overflow:hidden;background:#0b0b0f;border:1px solid rgba(255,255,255,.06)}
.mm-pv__fit{position:absolute;inset:0;overflow:hidden}
.mm-pv__fit>.demo{border-radius:0}
.mm-pv__h{display:flex;align-items:center;justify-content:space-between;margin:12px 6px 6px}
.mm-pv__h b{font-size:15px;font-weight:600;color:#f4f4f5}.mm-pv__h b small{margin-left:4px;font-weight:450;color:#8b8b94;font-size:13px}
.mm-pv__h a{display:inline-flex;align-items:center;gap:3px;font-size:13px;color:#a1a1aa}.mm-pv__h a:hover{color:#fff}.mm-pv__h a svg{width:13px;height:13px}
.mm-pv__l{display:flex;flex-direction:column}
.mm-pv__l a{display:flex;align-items:center;gap:9px;height:30px;padding:0 6px;border-radius:7px;font-size:13.5px;color:#e4e4e7}
.mm-pv__l a:hover{background:rgba(255,255,255,.06)}
.mm-pv__l i{display:grid;place-items:center;width:20px;height:20px;border-radius:5px;background:rgba(255,255,255,.08);color:#c4c4cc}.mm-pv__l i svg{width:12px;height:12px}
.mm-pv__l span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mm-pv__l small{color:#8b8b94;font-size:12px}
.mm-prod{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:8px}
.mp{display:block;padding:0 0 14px;border-radius:14px;transition:background-color .18s}
.mp:hover,.mp:focus-visible{background:rgba(255,255,255,.035);outline:0}
.mp__art{position:relative;display:grid;place-items:center;aspect-ratio:1/1.12;margin-bottom:14px;border-radius:12px;background:rgba(255,255,255,.035);overflow:hidden;transition:background-color .18s}
.mp:hover .mp__art{background:rgba(255,255,255,.05)}
.mp>b{display:block;padding:0 6px;font-size:16px;font-weight:600;color:#f4f4f5}
.mp>span{display:block;margin-top:4px;padding:0 6px;font-size:13.5px;line-height:1.45;color:#9a9aa3}
.mp-lib{display:grid;grid-template-columns:repeat(3,52px);gap:8px;transition:transform .4s var(--ease)}
.mp:hover .mp-lib{transform:scale(1.04)}
.mp-lib i{height:40px;border-radius:8px;background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.08)}
.mp-lib i:nth-child(2){background:linear-gradient(160deg,#2e4bff,#1428a8)}.mp-lib i:nth-child(6){background:linear-gradient(160deg,rgba(255,255,255,.2),rgba(255,255,255,.06))}
.mp-lib b{grid-column:1/-1;display:flex;gap:6px;justify-content:center}.mp-lib b span{padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.08);font-size:11px;font-weight:500;color:#c4c4cc}
.mp-ai{width:78%}
.mp-ai__q{display:flex;align-items:center;justify-content:space-between;height:38px;padding:0 6px 0 14px;border-radius:10px;background:#0033ff;color:#fff;font-size:13px;font-weight:600}
.mp-ai__q em{display:grid;place-items:center;width:26px;height:26px;border-radius:7px;background:#fff;color:#0033ff}.mp-ai__q em svg{width:14px;height:14px}
.mp-ai__c{margin-top:8px;padding:12px;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07)}
.mp-ai__c i{display:block;height:6px;margin-bottom:7px;border-radius:3px;background:rgba(255,255,255,.16)}
.mp-ai__c b{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:10px}.mp-ai__c b span{height:34px;border-radius:6px;background:rgba(255,255,255,.07)}.mp-ai__c b span:nth-child(2){background:rgba(46,75,255,.5)}
.mp:hover .mp-ai__c b span:nth-child(2){animation:mpPulse 1.4s ease-in-out infinite}
@keyframes mpPulse{50%{background:rgba(46,75,255,.8)}}
.mp-cli{display:flex;flex-direction:column;gap:5px;width:84%;padding:14px;border-radius:10px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.08);font:11.5px/1.5 var(--mono);color:#d4d4d8}
.mp-cli code{font:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mp-cli s{text-decoration:none;color:#8b8b94}.mp-cli .ok{color:#7dd3a8}
.mp-sk{width:74%}
.mp-sk__f{padding:14px;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.mp-sk__f b{display:block;margin-bottom:10px;font:600 12px var(--mono);color:#e4e4e7}
.mp-sk__f i{display:block;height:6px;margin-bottom:7px;border-radius:3px;background:rgba(255,255,255,.14)}
.mp-sk__t{display:flex;gap:6px;margin-top:8px}.mp-sk__t span{padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.07);font-size:11px;color:#c4c4cc}
@media (max-width:1100px){.mm-lib{grid-template-columns:240px minmax(0,1fr)}.mm-pv{display:none}.mm-prod{grid-template-columns:repeat(2,minmax(0,1fr))}.mp__art{aspect-ratio:16/9}}
@media (max-width:900px){.mm{display:none}}
@media (prefers-reduced-motion:reduce){.mm,.mm__p,.mm__box{transition:none}}

/* ---------- visitor ⌘K ---------- */
.kv{position:fixed;inset:0;z-index:120;display:flex;justify-content:center;align-items:flex-start;padding:min(9vh,90px) 16px 16px;background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;transition:opacity .16s}
.kv.open{opacity:1}
.kv__box{display:flex;flex-direction:column;width:min(680px,100%);max-height:min(720px,calc(100dvh - 120px));border-radius:16px;background:#151518;border:1px solid rgba(255,255,255,.09);box-shadow:0 40px 100px -30px rgba(0,0,0,.85);color:#f4f4f5;transform:translateY(-6px) scale(.985);transition:transform .2s var(--ease);overflow:hidden}
.kv.open .kv__box{transform:none}
.kv__in{flex:none;display:flex;align-items:center;gap:12px;height:58px;padding:0 14px 0 18px;border-bottom:1px solid rgba(255,255,255,.07)}
.kv__in svg{width:19px;height:19px;color:#a1a1aa;flex:none}
.kv__in input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;font-size:17px;color:#fff}
.kv__in input::placeholder{color:#7a7a84}.kv__in input::-webkit-search-cancel-button{display:none}
.kv__in kbd{border:0;background:rgba(255,255,255,.08);color:#a1a1aa}
.kv__terms{flex:none;display:flex;gap:2px;padding:8px 10px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid rgba(255,255,255,.05)}
.kv__terms button{flex:none;height:30px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:#b4b4bc;font-size:13.5px;cursor:pointer;transition:background-color .12s,color .12s}
.kv__terms button:hover{background:rgba(255,255,255,.07);color:#fff}
.kv__list{flex:1;overflow:auto;padding:6px;scrollbar-width:thin}
.kv__g{padding:4px 2px 6px;border-radius:12px}
.kv__g+.kv__g{margin-top:6px}
.kv__g:first-child{background:rgba(255,255,255,.03)}
.kv__g>p{margin:0;padding:10px 12px 6px;font-size:13px;color:#8b8b94}
.kv__r{display:flex;align-items:center;gap:14px;min-height:54px;padding:6px 12px;border-radius:10px;color:#f4f4f5}
.kv__r.on{background:rgba(255,255,255,.07)}
.kv__th{position:relative;flex:none;width:52px;height:36px;border-radius:7px;overflow:hidden;background:#0b0b0f;border:1px solid rgba(255,255,255,.08)}
.kv__fit{position:absolute;inset:0}
.kv__fit>.demo{pointer-events:none}
.kv__ic{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:9px;background:rgba(255,255,255,.06);color:#c4c4cc}.kv__ic svg{width:17px;height:17px}
.kv__t{display:flex;flex-direction:column;min-width:0}
.kv__t b{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kv__t small{font-size:13px;color:#8b8b94;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kv__ri{margin-left:auto;color:#7a7a84}.kv__ri svg{width:16px;height:16px}
.kv__none{display:flex;flex-direction:column;align-items:center;gap:4px;padding:48px 16px;text-align:center}.kv__none b{font-weight:600}.kv__none span{font-size:13.5px;color:#8b8b94}
.kv__foot{flex:none;display:flex;align-items:center;gap:16px;height:42px;padding:0 14px;border-top:1px solid rgba(255,255,255,.07);font-size:12.5px;color:#8b8b94}
.kv__foot span{display:inline-flex;align-items:center;gap:6px}
.kv__foot kbd{display:inline-grid;place-items:center;width:20px;height:20px;padding:0;border:0;border-radius:5px;background:rgba(255,255,255,.08);color:#b4b4bc}.kv__foot kbd svg{width:12px;height:12px}
.kv__foot em{margin-left:auto;font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:600px){.kv{padding:12px}.kv__foot span{display:none}.kv__foot em{margin:0 auto}.kv__box{max-height:calc(100dvh - 24px)}}

/* ---------- 「新建组件」 modal (21st New component) ---------- */
.ws-btn--danger{background:#e5484d;color:#fff}.ws-btn--danger:hover{opacity:.9}
.xn .xd__box{width:min(620px,100%);background:#f4f4f5}
[data-theme=dark] .xn .xd__box{background:#18181b}
.xn__in{padding:22px 22px 18px}
.xn__in h2,.xc__in h2{margin:0;font-size:19px;line-height:26px;font-weight:650;letter-spacing:-.015em}
.xn__s{margin:4px 0 0;font-size:13.5px;line-height:20px;color:var(--muted)}
.xn__cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
.xn__c{display:flex;flex-direction:column;padding:16px;border-radius:12px;border:1px solid color-mix(in srgb,var(--fg) 8%,transparent);background:transparent}
.xn__c--a{background:color-mix(in srgb,var(--fg) 4%,transparent);border-color:color-mix(in srgb,var(--fg) 14%,transparent)}
.xn__c>i{display:block;color:var(--fg)}.xn__c>i svg{width:20px;height:20px}
.xn__c b{margin-top:12px;font-size:14.5px;font-weight:650}
.xn__c p{flex:1;margin:4px 0 16px;font-size:13px;line-height:19px;color:var(--muted)}
.xn__b{display:inline-flex;align-items:center;justify-content:center;gap:7px;width:100%;height:34px;border-radius:8px;border:1px solid color-mix(in srgb,var(--fg) 12%,transparent);background:#fff;color:#0a0a0a;font:600 13.5px/1 var(--font);cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.06);transition:background-color .13s,box-shadow .13s}
[data-theme=dark] .xn__b{background:#27272a;color:#f4f4f5}
.xn__b:hover{background:#ececee;box-shadow:none}[data-theme=dark] .xn__b:hover{background:#303034}
.xn__b svg{width:15px;height:15px}
.xn__b--pri,[data-theme=dark] .xn__b--pri{background:#0033ff;border-color:transparent;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.xn__b--pri:hover,[data-theme=dark] .xn__b--pri:hover{background:#0a3dff;box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.xn__b--pri.done{background:#16a34a}
.xn__b.busy svg{animation:xnSpin .8s linear infinite}
@keyframes xnSpin{to{transform:rotate(360deg)}}
.xn__f{margin:16px 0 0;text-align:center;font-size:12.5px;color:var(--muted)}.xn__f a{color:var(--fg);font-weight:550;text-decoration:underline;text-underline-offset:2px}
@media (max-width:560px){.xn__cards{grid-template-columns:1fr}}
.xc .xd__box{width:min(420px,100%)}
.xc__in{padding:24px}.xc__in--ok{text-align:center}
.xc__ok{display:inline-grid;place-items:center;width:44px;height:44px;margin-bottom:12px;border-radius:50%;background:color-mix(in srgb,#16a34a 14%,transparent);color:#16a34a}.xc__ok svg{width:22px;height:22px}
.xc__b{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}.xc__in--ok .xc__b{justify-content:center}
/* community item viewer */
.xv .xd__box{width:min(980px,100%)}
.xv__in{padding:20px 22px 22px}
.xv__h h2{margin:0;font-size:19px;font-weight:650}.xv__h p{margin:2px 0 0;font-size:13px;color:var(--muted)}
.xv__stage{margin-top:14px;height:min(62vh,560px);border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#fff}
.xv__stage iframe{width:100%;height:100%;border:0;display:block}
.xv__d{margin:12px 0 0;font-size:14px;color:var(--muted)}
.xv__t{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.xv__t span{padding:3px 9px;border-radius:999px;background:var(--hover);font-size:12px;color:var(--muted)}
.xv__b{display:flex;justify-content:flex-end;margin-top:14px}
/* community shelf */
.wcm{flex:none;display:flex;flex-direction:column;width:clamp(220px,19vw,300px);padding:0;border:0;background:transparent;text-align:left;color:inherit;cursor:pointer}
.wcm__pv{position:relative;display:block;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:var(--card);border:1px solid var(--line);transition:transform .25s var(--ease),box-shadow .25s}
.wcm:hover .wcm__pv{transform:translateY(-2px);box-shadow:0 18px 40px -22px rgba(0,0,0,.35)}
.wcm__pv iframe{position:absolute;left:0;top:0;width:200%;height:200%;border:0;transform:scale(.5);transform-origin:0 0;pointer-events:none}
.wcm__m{display:flex;flex-direction:column;padding:8px 2px 0}.wcm__m b{font-size:14px;font-weight:600}.wcm__m small{font-size:12.5px;color:var(--muted)}

/* ---------- Creator Studio ---------- */
.ws-pane--studio .ws-dh a.ws-back{display:grid;place-items:center}
.cs-me{display:flex;align-items:center;gap:9px;margin:6px 2px 10px;padding:6px 8px;border-radius:9px;border:1px solid var(--line)}
.cs-me__t{display:flex;flex-direction:column;min-width:0}.cs-me__t b{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cs-me__t small{font-size:11.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-new{position:relative;display:flex;margin:0 0 10px}
.cs-new__b,.cs-new__c{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;border:0;background:#0033ff;color:#fff;font:600 13.5px/1 var(--font);cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.2);transition:background-color .13s}
@supports (color:oklch(0.5 0.2 264)){.cs-new__b,.cs-new__c{background:oklch(.485 .291 264.121)}}
.cs-new__b{flex:1;border-radius:8px 0 0 8px}.cs-new__c{width:32px;border-radius:0 8px 8px 0;border-left:1px solid rgba(255,255,255,.22)}
.cs-new__b:hover,.cs-new__c:hover{filter:brightness(1.08)}
.cs-new__b svg{width:15px;height:15px}.cs-new__c svg{width:12px;height:12px}
.cs-new__m{position:absolute;left:0;right:-8px;top:calc(100% + 6px);z-index:40;padding:5px;border-radius:10px;background:#141416;border:1px solid rgba(255,255,255,.08);box-shadow:0 24px 50px -16px rgba(0,0,0,.5)}
.cs-new__m>a,.cs-new__m>button{display:flex;align-items:center;gap:9px;width:100%;height:32px;padding:0 10px;border:0;border-radius:7px;background:transparent;color:#e4e4e7;font:500 13.5px/1 var(--font);text-align:left;cursor:pointer}
.cs-new__m>a:hover,.cs-new__m>button:hover,.cs-new__m>a:focus-visible,.cs-new__m>button:focus-visible{background:rgba(255,255,255,.08);color:#fff;outline:0}
.cs-new__m svg{width:15px;height:15px;color:#a1a1aa}
.cs-nav .ws-di.on{background:var(--hover);color:var(--fg)}
.cs-foot{display:flex;align-items:center;gap:6px;margin:14px 10px 0;font-size:12.5px;color:var(--dim)}.cs-foot svg{width:14px;height:14px}.cs-foot a:hover{color:var(--fg)}
.cs{max-width:1080px;margin:0 auto;padding:24px 0 40px}
.cs-h h1{margin:0;font-size:24px;font-weight:700;letter-spacing:-.02em}.cs-h p{margin:4px 0 0;font-size:14px;color:var(--muted)}
.cs-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:22px}
.cs-tile{padding:14px 16px;border-radius:12px;background:var(--card);border:1px solid var(--line)}
.cs-tile span{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--muted)}.cs-tile span svg{width:15px;height:15px}
.cs-tile b{display:block;margin-top:6px;font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}
.cs-empty{display:flex;flex-direction:column;align-items:center;text-align:center;margin-top:20px;padding:40px 20px;border-radius:14px;border:1px dashed var(--line-2)}
.cs-empty__i{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--hover)}.cs-empty__i svg{width:24px;height:24px}
.cs-empty h2{margin:14px 0 0;font-size:20px;font-weight:700}.cs-empty p{max-width:460px;margin:6px 0 0;font-size:14px;color:var(--muted)}
.cs-empty__b{display:flex;gap:8px;margin-top:18px}
.cs-list{margin-top:26px}
.cs-bar{display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--line)}
.cs-tabs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.cs-tabs button{position:relative;display:inline-flex;align-items:center;gap:5px;height:38px;padding:0 10px;border:0;background:transparent;color:var(--muted);font:500 14px/1 var(--font);cursor:pointer;white-space:nowrap}
.cs-tabs button small{font-size:12px;color:var(--dim)}
.cs-tabs button:hover{color:var(--fg)}
.cs-tabs button.on{color:var(--fg)}.cs-tabs button.on::after{content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:2px;border-radius:2px;background:var(--fg)}
.cs-q{display:flex;align-items:center;gap:6px;height:32px;padding:0 10px;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--muted)}
.cs-q svg{width:14px;height:14px}.cs-q input{width:140px;border:0;outline:0;background:transparent;font-size:13.5px}
.cs-bar__new{height:32px;font-size:13.5px}.cs-bar__new svg{width:15px;height:15px}
.cs-table{margin-top:4px}
.cs-tr{display:grid;grid-template-columns:minmax(0,1fr) 90px 150px 110px 76px;align-items:center;gap:12px;min-height:54px;padding:0 8px;border-bottom:1px solid var(--line)}
.cs-tr--h{min-height:38px;font-size:12.5px;color:var(--dim)}
.cs-tr:not(.cs-tr--h):hover{background:color-mix(in srgb,var(--fg) 3%,transparent)}
.cs-nm{display:flex;align-items:center;gap:12px;min-width:0;padding:8px 0}
.cs-th{display:grid;place-items:center;flex:none;width:44px;height:32px;border-radius:7px;background:var(--hover);color:var(--muted)}.cs-th svg{width:16px;height:16px}
.cs-nm>span{display:flex;flex-direction:column;min-width:0}.cs-nm b{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cs-nm small{font-size:12.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-un{font-style:italic;font-weight:500!important;color:var(--dim)}
.cs-ty,.cs-dt{font-size:13px;color:var(--muted)}
.cs-st{display:flex;flex-wrap:wrap;align-items:center;gap:5px;font-size:13px;color:var(--muted)}.cs-st svg{width:15px;height:15px}
.cs-st small{flex-basis:100%;font-size:12px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-st--pending{color:#b45309}.cs-st--approved{color:#15803d}.cs-st--rejected{color:#dc2626}
[data-theme=dark] .cs-st--pending{color:#fbbf24}[data-theme=dark] .cs-st--approved{color:#4ade80}[data-theme=dark] .cs-st--rejected{color:#f87171}
.cs-ac{display:flex;justify-content:flex-end;gap:2px}
.cs-ib{display:grid;place-items:center;width:30px;height:30px;border:0;border-radius:7px;background:transparent;color:var(--muted);cursor:pointer}.cs-ib:hover{background:var(--hover);color:var(--fg)}.cs-ib svg{width:15px;height:15px}
.cs-none{display:flex;flex-direction:column;align-items:center;gap:4px;padding:40px 16px;text-align:center}.cs-none b{font-weight:600}.cs-none span{font-size:13.5px;color:var(--muted)}.cs-none .ws-btn{margin-top:10px}
.cs-loading{display:flex;flex-direction:column;gap:10px;padding:16px 8px}.cs-loading i{height:34px;border-radius:8px;background:linear-gradient(90deg,var(--hover),var(--card-2),var(--hover));background-size:200% 100%;animation:stShim 1.2s linear infinite}
@keyframes stShim{to{background-position:-200% 0}}
.cs-go{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:24px;margin-top:34px}
.cs-go h3{margin:0;font-size:15px;font-weight:650}.cs-go p{margin:4px 0 0;font-size:13.5px;color:var(--muted)}
.cs-go__l{display:flex;flex-direction:column;gap:8px}
.cs-row{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border-radius:11px;border:1px solid var(--line);background:var(--card);color:inherit;font:inherit;text-align:left;cursor:pointer;transition:background-color .15s}
.cs-row:hover{background:var(--hover)}
.cs-row>i{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:9px;background:var(--hover)}.cs-row>i svg{width:17px;height:17px}
.cs-row>span{flex:1;display:flex;flex-direction:column;min-width:0}.cs-row b{font-size:14px;font-weight:600}.cs-row small{font-size:12.5px;color:var(--muted)}
.cs-row>svg{width:14px;height:14px;color:var(--dim)}
@media (max-width:900px){.cs{padding-top:8px}.cs-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.cs-go{grid-template-columns:1fr;gap:12px}
  .cs-tr{grid-template-columns:minmax(0,1fr) 92px 64px}.cs-tr>.cs-ty,.cs-tr>.cs-dt,.cs-tr--h>:nth-child(2),.cs-tr--h>:nth-child(4){display:none}
  .cs-q input{width:90px}.cs-bar{flex-wrap:wrap;padding-bottom:8px}.cs-bar__new span{display:none}}

/* ---------- sandbox editor ---------- */
.pe{--pe-side:clamp(240px,14.5vw,290px);display:grid;grid-template-columns:var(--pe-side) minmax(0,1fr) minmax(0,1fr);height:100vh;height:100dvh;background:var(--bg);color:var(--fg);overflow:hidden}
.pe[data-step=info],.pe[data-step=submit]{grid-template-columns:var(--pe-side) 0 minmax(0,1fr)}
.pe[data-step=info] .pe-code,.pe[data-step=submit] .pe-code{visibility:hidden}
.pe-side{display:flex;flex-direction:column;min-height:0;padding:12px 10px 12px;border-right:1px solid var(--line);background:var(--bg)}
.pe-brand{height:32px;padding:4px 6px}.pe-brand .ws-logo i{width:52px;height:17px}
.pe-sh{display:grid;grid-template-columns:30px 1fr 30px;align-items:center;margin:6px 0 4px}
.pe-sh b{text-align:center;font-size:14px;font-weight:650}
.pe-back{display:grid;place-items:center;width:30px;height:30px;border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer}.pe-back:hover{background:var(--hover);color:var(--fg)}.pe-back svg{width:16px;height:16px}
.pe-steps{display:flex;margin:4px 0 12px;padding:0;list-style:none;border-bottom:1px solid var(--line)}
.pe-steps li{flex:1}
.pe-steps button{position:relative;width:100%;height:32px;border:0;background:transparent;color:var(--dim);font:500 12.5px/1 var(--font);cursor:pointer}
.pe-steps button.done{color:var(--muted)}
.pe-steps button.on{color:var(--fg);font-weight:650}.pe-steps button.on::after{content:"";position:absolute;left:10%;right:10%;bottom:-1px;height:2px;border-radius:2px;background:var(--fg)}
.pe-pane{flex:1;min-height:0;overflow:auto;padding:0 2px}
.pe-lab{margin:4px 8px 6px;font-size:11.5px;font-weight:600;color:var(--dim)}
.pe-files{display:flex;flex-direction:column;gap:1px}
.pe-files button{display:flex;align-items:center;gap:8px;height:32px;padding:0 8px;border:0;border-radius:8px;background:transparent;color:var(--fg80);font:500 13px/1 var(--mono);text-align:left;cursor:pointer}
.pe-files button:hover{background:var(--hover)}.pe-files button.on{background:var(--hover);color:var(--fg)}
.pe-files small{margin-left:auto;font:11px var(--font);color:var(--dim)}
.pe-fi{display:grid;place-items:center}.pe-fi svg{width:15px;height:15px}
.pe-fi--html{color:#e8590c}.pe-fi--css{color:#1971c2}.pe-fi--js{color:#d4a600}.pe-fi--md{color:#7048e8}
.pe-hint{margin:14px 8px 0;font-size:12.5px;line-height:1.55;color:var(--dim)}
.pe-f{display:flex;flex-direction:column;gap:5px;margin:0 6px 14px}
.pe-f>span{font-size:12.5px;font-weight:600}.pe-f em{margin-left:2px;font-style:normal;color:#e5484d}
.pe-f small{font-size:11.5px;color:var(--dim)}
.pe-in{width:100%;height:34px;padding:0 10px;border:1px solid var(--line-2);border-radius:8px;background:var(--card);color:var(--fg);font-size:13.5px;outline:0;transition:border-color .15s,box-shadow .15s}
.pe-ta{height:auto;padding:8px 10px;line-height:1.5;resize:vertical}
.pe-in:focus{border-color:#0033ff;box-shadow:0 0 0 3px color-mix(in srgb,#0033ff 16%,transparent)}
.pe-in:disabled{opacity:.6}
.pe-seg{display:grid;grid-template-columns:repeat(3,1fr);padding:2px;border-radius:9px;background:var(--hover)}
.pe-seg button{height:28px;border:1px solid transparent;border-radius:7px;background:transparent;color:var(--muted);font:500 12.5px/1 var(--font);cursor:pointer}
.pe-seg button.on{background:var(--card);border-color:var(--line-2);color:var(--fg);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.pe-chk{display:flex;flex-direction:column;gap:6px;margin:2px 6px 0}
.pe-ck{display:flex;align-items:center;gap:9px;height:34px;padding:0 10px;border-radius:8px;border:1px solid var(--line);background:var(--card);font-size:13px;color:var(--muted)}
.pe-ck i{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--line-2)}.pe-ck i svg{width:11px;height:11px}
.pe-ck.ok{color:var(--fg)}.pe-ck.ok i{border-color:#16a34a;background:#16a34a;color:#fff}
.pe-rules{margin:10px 8px 0;padding-left:16px;font-size:12.5px;line-height:1.7;color:var(--dim)}
.pe-note{margin:10px 4px 0;padding:9px 10px;border-radius:8px;font-size:12.5px;line-height:1.5;background:var(--hover);color:var(--muted)}
.pe-note--pending{background:color-mix(in srgb,#f59e0b 12%,transparent);color:#a16207}.pe-note--rejected{background:color-mix(in srgb,#e5484d 10%,transparent);color:#c2272d}.pe-note--approved{background:color-mix(in srgb,#16a34a 12%,transparent);color:#15803d}
[data-theme=dark] .pe-note--pending{color:#fbbf24}[data-theme=dark] .pe-note--rejected{color:#fca5a5}[data-theme=dark] .pe-note--approved{color:#86efac}
.pe-foot{display:flex;flex-direction:column;gap:8px;margin-top:10px;padding-top:10px}
.pe-save{display:flex;align-items:center;justify-content:space-between;padding:0 4px;font-size:12px;color:var(--dim)}
[data-pe-saved].dirty{color:#b45309}[data-theme=dark] [data-pe-saved].dirty{color:#fbbf24}
.pe-sbtn{height:26px;padding:0 9px;border:1px solid var(--line-2);border-radius:7px;background:var(--card);color:var(--fg);font:500 12px/1 var(--font);cursor:pointer}.pe-sbtn:hover{background:var(--hover)}
.pe-go{display:flex;align-items:center;justify-content:center;gap:7px;height:38px;border:0;border-radius:9px;background:#0033ff;color:#fff;font:600 14px/1 var(--font);cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
@supports (color:oklch(0.5 0.2 264)){.pe-go{background:oklch(.485 .291 264.121)}}
.pe-go:hover{filter:brightness(1.08)}.pe-go:disabled{opacity:.5;cursor:default;filter:none}.pe-go svg{width:15px;height:15px}
.pe-code{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--card);border-right:1px solid var(--line)}
.pe-crumb{display:flex;align-items:center;gap:6px;height:38px;padding:0 14px;border-bottom:1px solid var(--line);font:12.5px var(--mono);color:var(--dim);white-space:nowrap}
.pe-crumb i{font-style:normal;opacity:.6}.pe-crumb b{color:var(--fg);font-weight:600}
.pe-lang{font:11.5px var(--font);color:var(--dim)}
.ce{position:relative;flex:1;min-height:0}
.ce__s{position:absolute;inset:0;display:grid;grid-template-columns:auto minmax(0,1fr);overflow:auto;scrollbar-width:thin;--ce-f:12.5px/1.7 var(--mono)}
.ce__g{position:sticky;left:0;z-index:2;display:flex;flex-direction:column;align-items:flex-end;min-width:44px;padding:12px 12px 40px 8px;background:var(--card);font:var(--ce-f);color:color-mix(in srgb,var(--fg) 32%,transparent);user-select:none;font-variant-numeric:tabular-nums}
.ce__w{display:grid;min-width:0}
.ce__hl,.ce__ta{grid-area:1/1;margin:0;padding:12px 24px 40px 4px;border:0;font:var(--ce-f);letter-spacing:0;tab-size:2;white-space:pre;word-wrap:normal;overflow:hidden}
.ce__hl{color:var(--fg);pointer-events:none}
.ce__ta{width:100%;min-height:100%;resize:none;outline:0;background:transparent;color:transparent;caret-color:var(--fg);-webkit-text-fill-color:transparent}
.ce__ta::selection{background:color-mix(in srgb,#0033ff 22%,transparent);-webkit-text-fill-color:transparent}
.t-c{color:#8a8a8e;font-style:italic}.t-k{color:#7c3aed}.t-s{color:#b45309}.t-tag{color:#0f7b6c}.t-a{color:#c2410c}.t-p{color:#8a8a8e}.t-n{color:#1971c2}.t-v{color:#0b7285}.t-f{color:#c2410c}
[data-theme=dark] .t-k{color:#c4a7ff}[data-theme=dark] .t-s{color:#f6c177}[data-theme=dark] .t-tag{color:#5eead4}[data-theme=dark] .t-a,[data-theme=dark] .t-f{color:#fdba74}[data-theme=dark] .t-n{color:#93c5fd}[data-theme=dark] .t-v{color:#67e8f9}
.pe-prev{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--card)}
.pe-pbar{display:flex;align-items:center;gap:4px;height:38px;padding:0 8px 0 14px;border-bottom:1px solid var(--line)}
.pe-plab{font-size:12.5px;color:var(--muted)}
.pe-err{margin-left:8px;padding:2px 7px;border-radius:999px;background:color-mix(in srgb,#e5484d 14%,transparent);color:#dc2626;font-size:11.5px;font-weight:600;cursor:help}
.pe-w{margin-right:6px;padding:2px 7px;border-radius:6px;background:var(--hover);font:500 11.5px var(--mono);font-style:normal;color:var(--muted)}
.pe-vp{display:flex;gap:2px}
.pe-vp button,.pe-ib{display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:7px;background:transparent;color:var(--muted);cursor:pointer}
.pe-vp button:hover,.pe-ib:hover{background:var(--hover);color:var(--fg)}
.pe-vp button.on,.pe-ib.on{background:var(--hover);color:var(--fg)}
.pe-vp svg,.pe-ib svg{width:15px;height:15px}
.pe-div{width:1px;height:16px;margin:0 4px;background:var(--line-2)}
.pe-stage{position:relative;flex:1;min-height:0;display:flex;justify-content:center;background:#fff}
.pe-stage.dark{background:#0b0b0f}
.pe-stage.vp{padding:16px;background:var(--bg)}
.pe-stage iframe{flex:none;width:100%;height:100%;border:0;background:#fff;transition:width .25s var(--ease)}
.pe-stage.dark iframe{background:#0b0b0f}
.pe-stage.vp iframe{border-radius:12px;box-shadow:0 0 0 1px var(--line),0 20px 40px -24px rgba(0,0,0,.3)}
.pe-prev:fullscreen{background:var(--card)}
@media (max-width:900px){
  .pe{grid-template-columns:1fr;grid-template-rows:auto minmax(260px,1fr) minmax(260px,1fr);height:auto;min-height:100dvh;overflow:visible}
  .pe[data-step=info],.pe[data-step=submit]{grid-template-columns:1fr;grid-template-rows:auto 0 minmax(320px,1fr)}
  .pe[data-step=info] .pe-code,.pe[data-step=submit] .pe-code{display:none}
  .pe-side{border-right:0;border-bottom:1px solid var(--line)}.pe-pane{overflow:visible}
  .pe-files{flex-direction:row;flex-wrap:wrap}.pe-files button{flex:1;min-width:110px}.pe-hint{display:none}
  .pe-code{border-right:0;border-bottom:1px solid var(--line)}.pe-vp,.pe-div,[data-pe-full]{display:none}}
.cs-nm{color:var(--fg)}
.modal__box>.mform{display:flex;flex-direction:column;min-height:0;flex:1}.modal__box>.mform>.mbody{flex:1;min-height:0}
/* v38 Skill viewer: file tree + overview / file panes, and previous / next peeks with real content */
.qv__pk{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;border-radius:inherit;pointer-events:none}
.qv__pkv{position:relative;flex:1;min-height:0;display:grid;place-items:center;overflow:hidden;background:linear-gradient(135deg,#f3f3f5,#fff)}
.qv__pkn{flex:none;padding:10px 12px;font:600 12px/16px var(--font);color:#3f3f46;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-top:1px solid #e4e4e7;background:#fafafa}
.qv__peek--l .qv__pkv{justify-content:end}.qv__peek--r .qv__pkv{justify-content:start}
.qv__panel--s .qv__view{background:#fff}
.qsk{position:absolute;inset:0;display:grid;grid-template-columns:232px minmax(0,1fr);color:#18181b;font-family:var(--font);text-align:left}
.qsk__side{min-height:0;overflow:auto;padding:16px 10px;border-right:1px solid #ececef;background:#fafafa;scrollbar-width:thin}
.qsk__lab{display:flex;align-items:center;gap:6px;padding:0 8px;margin:4px 0 6px;font:600 11px/16px var(--font);letter-spacing:.04em;text-transform:uppercase;color:#71717a}
.qsk__lab small{font:500 11px/1 var(--font);color:#a1a1aa}
.qsk__lab:not(:first-child){margin-top:20px}
.qsk__f,.qsk__dir{display:flex;align-items:center;gap:8px;width:100%;min-height:32px;padding:0 8px 0 calc(8px + var(--lv,0) * 16px);border:0;border-radius:8px;background:transparent;color:#3f3f46;font:500 13px/1.3 var(--font);text-align:left}
.qsk__f{cursor:pointer;transition:background-color .15s,color .15s}
.qsk__f:hover{background:#f0f0f2;color:#18181b}
.qsk__f.on{background:#fff;color:#18181b;box-shadow:0 0 0 1px #e4e4e7,0 1px 2px rgba(16,16,24,.05)}
.qsk__f span,.qsk__dir span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qsk__f svg,.qsk__dir svg{flex:none;width:16px;height:16px;color:#71717a}
.qsk__f b{flex:none;display:grid;place-items:center;min-width:30px;height:18px;padding:0 4px;border-radius:4px;background:#ededf0;color:#52525b;font:600 9px/1 var(--mono);letter-spacing:.02em}
.qsk__f.on b{background:#e6edff;color:#2f5bea}
.qsk__dir{color:#52525b;cursor:default}
.qsk__in .qsk__dir,.qsk__in .qsk__f{padding-left:calc(24px + var(--lv,0) * 16px)}
.qsk__main{position:relative;min-height:0;min-width:0}
.qsk__pane{position:absolute;inset:0;display:none;flex-direction:column;min-height:0}
.qsk__pane.on{display:flex}
.qsk__ov{flex:1;min-height:0;overflow:auto;padding:28px 32px 32px;scrollbar-width:thin}
.qsk__hd{padding-right:56px}
.qsk__chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font:500 12px/16px var(--font);color:#71717a}
.qsk__chips i{font-style:normal;color:#d4d4d8}
.qsk__hd h3{margin:8px 0 6px;font:600 24px/32px var(--font);letter-spacing:-.01em;color:#09090b}
.qsk__hd p{margin:0;max-width:640px;font:400 14px/22px var(--font);color:#52525b}
.qsk__grid{display:grid;grid-template-columns:1.35fr 1fr 1.15fr;gap:12px;margin-top:24px}
.qsk__box{min-width:0;padding:16px;border:1px solid #ececef;border-radius:12px;background:#fff}
.qsk__box h4,.qsk__exh h4{margin:0 0 12px;font:600 13px/20px var(--font);color:#18181b}
.qsk__box ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.qsk__box li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:8px;font:400 13px/20px var(--font);color:#3f3f46}
.qsk__box li svg{width:16px;height:16px;margin-top:2px;color:#2f5bea}
.qsk__box p{margin:12px 0 0;font:400 12px/18px var(--font);color:#71717a}
.qsk__models{display:flex;flex-wrap:wrap;gap:6px}
.qsk__models span{display:inline-flex;align-items:center;height:24px;padding:0 8px;border-radius:6px;background:#f4f4f5;font:500 12px/1 var(--font);color:#3f3f46}
.qsk__cmd{display:flex;align-items:center;gap:4px;height:36px;padding:0 4px 0 10px;border-radius:8px;background:#0b0b0f;color:#e4e4e7}
.qsk__cmd code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:12px/1 var(--mono)}
.qsk__cmd button{display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:6px;background:transparent;color:#a1a1aa;cursor:pointer}
.qsk__cmd button:hover{background:rgba(255,255,255,.1);color:#fff}
.qsk__cmd svg{width:15px;height:15px}
.qsk__box dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 12px;margin:12px 0 0;font:400 12px/18px var(--font)}
.qsk__box dt{color:#71717a}.qsk__box dd{margin:0;color:#3f3f46}
.qsk__ex{margin-top:16px;border:1px solid #ececef;border-radius:12px;overflow:hidden}
.qsk__exh{display:flex;align-items:baseline;gap:10px;padding:14px 16px 0}
.qsk__exh h4{margin:0}.qsk__exh span{font:400 12px/18px var(--font);color:#a1a1aa}
.qsk__exv{position:relative;height:320px;display:grid;place-items:center;overflow:hidden;background:linear-gradient(135deg,#f6f6f8,#fff)}
.qsk__fh{flex:none;display:flex;align-items:center;gap:12px;height:52px;padding:0 64px 0 20px;border-bottom:1px solid #ececef}
.qsk__path{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 13px/1 var(--mono);color:#3f3f46}
.qsk__cp{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border:1px solid #e4e4e7;border-radius:8px;background:#fff;color:#18181b;font:500 13px/1 var(--font);cursor:pointer}
.qsk__cp:hover{background:#f4f4f5}.qsk__cp svg{width:14px;height:14px}
.qsk__body{flex:1;min-height:0;overflow:auto;scrollbar-width:thin}
.qsk__pre{margin:0;padding:20px 24px 32px;font:12.5px/1.7 var(--mono);color:#27272a;white-space:pre;tab-size:2;background:transparent;border:0}
.qsk__pre--md{white-space:pre-wrap;font-family:var(--font);font-size:13.5px;line-height:1.75}
.qsk__pre .fm{color:#a1a1aa}.qsk__pre .h{font-weight:600;color:#09090b}
.qsk__ld{padding:24px;font:400 13px/20px var(--font);color:#71717a}
.qsk__lock{display:flex;align-items:center;gap:14px;margin:8px 24px 24px;padding:16px;border:1px dashed #d4d4d8;border-radius:12px;background:#fafafa}
.qsk__lock>svg{flex:none;width:20px;height:20px;color:#71717a}
.qsk__lock div{flex:1;min-width:0;display:grid;gap:2px}
.qsk__lock b{font:600 13px/20px var(--font);color:#18181b}.qsk__lock span{font:400 12px/18px var(--font);color:#71717a}
@media(max-width:980px){.qsk{grid-template-columns:1fr}.qsk__side{display:none}.qsk__grid{grid-template-columns:1fr}.qsk__ov{padding:20px}}

/* v39: peeks carry the neighbour's real preview and slide with the carousel */
.qv__pkv .demo{pointer-events:none}
.qv__pkf{position:absolute;left:0;top:0;width:1440px;height:2400px;transform:scale(.108);transform-origin:0 0}
.qv__peek--l .qv__pkf{left:auto;right:0;transform-origin:100% 0}
.qv__pkf iframe{display:block;width:100%;height:100%;border:0;background:#fff}
.qv.open .qv__peek.sw{animation:qvPkIn .46s cubic-bezier(.2,.8,.2,1)}
@keyframes qvPkIn{from{transform:translateX(calc(var(--dx) * 180px)) scale(.86);opacity:0;filter:blur(2px)}}

/* v41 */.qv.open .qv__panel.qv__ghost{z-index:2;pointer-events:none;transition:none}
.qv__stage{overflow:hidden}

/* v42: no visible scrollbars in the viewer */
.qv,.qv *{scrollbar-width:none}
.qv::-webkit-scrollbar,.qv *::-webkit-scrollbar{display:none;width:0;height:0}

/* v42: 21st-style track. Peeks are full-size neighbour cards parked one step out, scaled, tilted and dimmed. */
.qv__peek{left:50%;right:auto;top:var(--qv-t);bottom:auto;width:var(--qv-w);height:calc(100% - var(--qv-t) - var(--qv-b));border-radius:12px;overflow:hidden;background:#fff;opacity:.42;transform-origin:50% 50%;transition:opacity .25s;will-change:transform;box-shadow:0 30px 80px -24px rgba(0,0,0,.6)}
.qv__peek--l,.qv__peek--r{border-radius:12px}
.qv__peek--l:hover,.qv__peek--r:hover{opacity:.55}
.qv__pkview{position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:#fff}
.qv__pkview>.demo{border-radius:inherit}.qv__pkview>iframe{display:block;width:100%;height:100%;border:0;background:#fff}
.qv__pkview.qv__pv-s{background:linear-gradient(135deg,#f6f6f8,#fff)}
.qv__peek--ghost{pointer-events:none}
.qv.open .qv__panel{will-change:transform}

/* v43: rest slots in CSS so they are right from the first frame (JS measured 0 width before the viewer opened) */
.qv{--qv-step:calc(var(--qv-w) + max(48px, 7vw))}
.qv .qv__peek--l,.qv .qv__peek--l:hover{transform:translateX(-50%) translateX(calc(-1 * var(--qv-step))) perspective(1600px) rotateY(7deg) scale(.9)}
.qv .qv__peek--r,.qv .qv__peek--r:hover{transform:translateX(-50%) translateX(var(--qv-step)) perspective(1600px) rotateY(-7deg) scale(.9)}
.qv .qv__peek--ghost{transition:none}

/* v45 legal (structure after 21st /terms): eyebrow + tab switch + numbered "on this page" + doc column */
.lg{display:grid;grid-template-columns:240px minmax(0,720px);gap:72px;justify-content:center;max-width:1100px;margin:0 auto;padding:56px 24px 120px}
.lg__sticky{position:sticky;top:88px}
.lg__eyebrow{margin:0 0 12px;color:var(--dim);font-size:12px;font-weight:600;letter-spacing:.06em}
.lg__tabs{display:flex;flex-direction:column;gap:2px;padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--line)}
.lg__tabs a{display:flex;align-items:center;height:34px;padding:0 10px;border-radius:9px;color:var(--muted);font-size:14px;font-weight:500;transition:background-color .2s,color .2s}
.lg__tabs a:hover{color:var(--fg);background:var(--hover)}
.lg__tabs a.on{color:var(--fg);background:var(--card-2)}
.lg__tabs--m{display:none}
.lg__toch{margin:0 0 10px;color:var(--dim);font-size:12px;font-weight:600;letter-spacing:.06em}
.lg__toc{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.lg__toc a{display:flex;align-items:center;gap:10px;min-height:30px;padding:4px 8px;border-radius:8px;color:var(--muted);font-size:13px;line-height:1.35;transition:color .2s,background-color .2s}
.lg__toc a:hover{color:var(--fg)}
.lg__toc a.on{color:var(--fg);background:var(--hover)}
.lg__n{flex:none;display:inline-grid;place-items:center;width:20px;height:20px;border-radius:6px;border:1px solid var(--line-2);color:var(--dim);font:600 11px/1 var(--mono);transition:color .2s,border-color .2s,background-color .2s}
.lg__toc a.on .lg__n{color:var(--accent-fg);background:var(--accent);border-color:var(--accent)}
.lg__doc h1{margin:0;font-size:36px;line-height:1.15;font-weight:700;letter-spacing:-.01em;color:var(--fg)}
.lg__date{margin:10px 0 0;color:var(--dim);font-size:13px}
.lg__sec{scroll-margin-top:88px;padding-top:48px}
.lg__sec h2{margin:0 0 14px;font-size:20px;line-height:1.35;font-weight:650}
.lg__sec h2 a{color:var(--fg);transition:color .2s}
.lg__sec h2 a:hover{color:var(--accent-2)}
.lg__sec h3{margin:24px 0 10px;font-size:16px;font-weight:600;color:var(--fg);scroll-margin-top:88px}
.lg__sec p,.lg__sec li{color:var(--muted);font-size:15px;line-height:1.8}
.lg__sec p{margin:0 0 14px}
.lg__sec ul{margin:0 0 14px;padding-left:20px}
.lg__sec li{margin:0 0 6px}
.lg__sec li::marker{color:var(--accent)}
.lg__sec strong{color:var(--fg);font-weight:600}
.lg__sec p a,.lg__sec li a{color:var(--fg);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
.lg__sec p a:hover,.lg__sec li a:hover{text-decoration-color:var(--fg)}
@media (max-width:900px){.lg{grid-template-columns:1fr;gap:0;padding-top:32px}.lg__side{display:none}.lg__tabs--m{display:flex;flex-direction:row;gap:4px;padding:0 0 16px;margin:0 0 24px}.lg__doc h1{font-size:28px}}
/* v51: modals and toasts above every viewer overlay (qv/tv/kv/xd) */
.modal{z-index:300}.toasts{z-index:310}
/* v51: viewer already has the 收藏 button in its bottom bar */
.qv__chip{display:none!important}

.k-auth{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line-2)}.k-auth .btn{flex:1;justify-content:center}
/* v57 创始终身版 card — black-gold, same look in light & dark (pricing, /w/pricing, upgrade modal) */
@property --lt-a{syntax:"<angle>";initial-value:0deg;inherits:false}
.lt{--g1:#fbe7b0;--g2:#e7c172;--g3:#b98a35;--gt:#f3e6c8;--gm:rgba(243,230,200,.62);
  position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:0;margin-top:18px;padding:0;border-radius:22px;
  border:1.5px solid transparent;color:var(--gt);
  background:radial-gradient(120% 90% at 0% 0%,#1d170c 0%,#0c0b09 46%,#080807 100%) padding-box,
    conic-gradient(from var(--lt-a),#5a4419 0deg,#fff3cf 28deg,#e2b863 56deg,#6e5320 100deg,#3a2c12 160deg,#8a6a2c 200deg,#e9c46a 228deg,#8a6a2c 256deg,#3a2c12 310deg,#5a4419 360deg) border-box;
  box-shadow:0 30px 70px -34px rgba(201,151,58,.55),0 0 0 1px rgba(0,0,0,.25),0 0 46px -18px rgba(231,193,114,.4);
  animation:lt-spin 6s linear infinite}
@keyframes lt-spin{to{--lt-a:360deg}}
.lt--ws{max-width:1022px;margin:20px auto 0}
.lt::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(240,200,120,.10),transparent 65%)}
.lt:hover::before{opacity:1}
.lt-main{display:flex;flex-direction:column;align-items:flex-start;padding:34px 36px 32px}
.lt-side{display:flex;flex-direction:column;justify-content:center;padding:34px 36px 32px;border-left:1px solid rgba(231,193,114,.16)}
.lt-badge{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 12px 0 10px;border-radius:999px;
  background:linear-gradient(135deg,#fbe3a2,#d6a84f 60%,#b88731);color:#1d1406;font-size:12.5px;font-weight:650;letter-spacing:.02em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 6px 18px -8px rgba(231,193,114,.7)}
.lt-badge svg{width:14px;height:14px}
.lt .lt-title{margin:18px 0 0;font:600 32px/1.15 "Songti SC","Noto Serif SC","STSong",Georgia,serif;letter-spacing:.04em;
  background:linear-gradient(180deg,#fff3cf 0%,#efcd84 48%,#bf8f3a 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.lt-sub{margin:10px 0 0;font-size:14.5px;line-height:23px;color:var(--gm)}
.lt-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px;margin-top:24px}
.lt-num{font-size:64px;line-height:1;font-weight:650;letter-spacing:-2.4px;font-variant-numeric:tabular-nums;padding-right:2px;
  background-image:linear-gradient(100deg,transparent 38%,rgba(255,250,232,.95) 50%,transparent 62%),linear-gradient(180deg,#fff0c2 0%,#ecc778 45%,#c4933a 78%,#a87a2a 100%);
  background-size:260% 100%,100% 100%;background-repeat:no-repeat;background-position:160% 0,0 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:lt-sheen 5.5s ease-in-out infinite 1s}
@keyframes lt-sheen{0%,62%{background-position:160% 0,0 0}100%{background-position:-60% 0,0 0}}
.lt-price span{font-size:14px;color:var(--gt);letter-spacing:.02em}
.lt-seat{width:100%;max-width:340px;margin-top:22px}
.lt-seat-t{display:flex;justify-content:space-between;gap:12px;font-size:13px;line-height:18px;color:var(--gm)}
.lt-seat-t b{color:var(--g1);font-weight:650;font-variant-numeric:tabular-nums}
.lt-seat-r{font-variant-numeric:tabular-nums;color:var(--g2)}
.lt-bar{position:relative;height:6px;margin-top:9px;border-radius:99px;background:rgba(243,230,200,.09);overflow:hidden}
.lt-bar i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:inherit;background:linear-gradient(90deg,#a87a2a,#f3d58c);box-shadow:0 0 10px rgba(243,213,140,.55);transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.lt-btn{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;width:100%;max-width:340px;height:48px;margin-top:22px;padding:0 20px;
  border:0;border-radius:12px;cursor:pointer;font:650 15.5px/1 var(--font,system-ui);letter-spacing:.06em;color:#1d1406;
  background:linear-gradient(180deg,#fbe6a8 0%,#e6bd66 52%,#c8963d 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(120,80,20,.35),0 12px 28px -12px rgba(231,180,90,.75);
  transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s,filter .2s}
.lt-btn span{position:relative;z-index:1}
.lt-btn::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);animation:lt-btnsheen 4.2s ease-in-out infinite 2.2s}
@keyframes lt-btnsheen{0%,70%{left:-60%}100%{left:130%}}
.lt-btn:hover{transform:translateY(-2px);filter:brightness(1.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(120,80,20,.35),0 18px 36px -12px rgba(231,180,90,.9)}
.lt-btn:hover::after{animation-duration:1.1s;animation-delay:0s}
.lt-btn:active{transform:translateY(0)}
.lt-btn:focus-visible{outline:2px solid #f3d58c;outline-offset:3px}
.lt.is-busy .lt-btn{cursor:progress;filter:saturate(.8)}
.lt-kick{margin:0 0 16px;font-size:12px;font-weight:650;letter-spacing:.18em;color:var(--g2)}
.lt-feats{display:grid;gap:13px;margin:0;padding:0;list-style:none}
.lt-feats li{display:flex;align-items:flex-start;gap:11px;font-size:14.5px;line-height:21px;color:var(--gt)}
.lt-ck{flex:none;display:grid;place-items:center;width:20px;height:20px;margin-top:0;border-radius:50%;
  background:linear-gradient(180deg,#f6dc98,#c4923a);color:#1d1406;box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.lt-ck svg{width:12px;height:12px}
.lt-feats li.lt-no{color:rgba(243,230,200,.4)}
.lt-feats li.lt-no .lt-ck{background:rgba(243,230,200,.08);color:rgba(243,230,200,.4);box-shadow:none}
/* sparkles: few, tiny, only in the quiet corners */
.lt-sp{position:absolute;z-index:-1;width:3px;height:3px;border-radius:50%;background:#ffe6a8;box-shadow:0 0 6px 1px rgba(255,214,130,.8);opacity:0;pointer-events:none;animation:lt-tw 5s ease-in-out infinite}
.lt-sp--1{top:16%;right:5%;animation-delay:.2s}.lt-sp--2{top:68%;right:3%;animation-delay:1.6s;animation-duration:6s}
.lt-sp--3{bottom:9%;left:50%;animation-delay:3s}.lt-sp--4{top:8%;left:44%;animation-delay:2.2s;animation-duration:6.5s}
.lt-sp--5{top:42%;right:48%;width:2px;height:2px;animation-delay:4s}
@keyframes lt-tw{0%,100%{opacity:0;transform:translateY(4px) scale(.4)}45%{opacity:.95;transform:translateY(-3px) scale(1)}70%{opacity:0;transform:translateY(-8px) scale(.5)}}
/* sold out */
.lt.is-sold{animation:none;background:radial-gradient(120% 90% at 0% 0%,#17150f 0%,#0c0b09 50%,#080807 100%) padding-box,linear-gradient(#3a3324,#3a3324) border-box;box-shadow:0 20px 50px -30px rgba(0,0,0,.6)}
.lt.is-sold .lt-badge{background:rgba(243,230,200,.1);color:var(--gm);box-shadow:none}
.lt.is-sold .lt-num{animation:none}.lt.is-sold .lt-sp{display:none}
.lt .lt-btn[disabled]{cursor:not-allowed;transform:none;filter:none;color:rgba(243,230,200,.5);background:rgba(243,230,200,.08);box-shadow:inset 0 0 0 1px rgba(243,230,200,.12)}
.lt .lt-btn[disabled]::after{display:none}
.lt.is-busy .lt-btn[disabled]{color:#1d1406;background:linear-gradient(180deg,#fbe6a8 0%,#e6bd66 52%,#c8963d 100%);opacity:.8}
@media(max-width:767px){
  .lt{grid-template-columns:1fr}
  .lt-main{padding:26px 22px 24px}
  .lt-side{padding:22px 22px 26px;border-left:0;border-top:1px solid rgba(231,193,114,.16)}
  .lt .lt-title{font-size:28px}.lt-num{font-size:52px;letter-spacing:-2px}
  .lt-seat,.lt-btn{max-width:none}
}
@media(prefers-reduced-motion:reduce){
  .lt,.lt-num,.lt-btn::after,.lt-sp{animation:none}
  .lt-sp,.lt::before{display:none}
  .lt-btn,.lt-bar i{transition:none}.lt-btn:hover{transform:none}
}
/* v58 upgrade modal: 创始终身版 as a one-row banner; no visible scrollbar, inner scroller keeps all four corners */
.xd__box{scrollbar-width:none}.xd__box::-webkit-scrollbar{display:none}
.xu .xd__box{overflow:hidden;display:flex;flex-direction:column}
.xu__in{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.xu__in::-webkit-scrollbar{display:none}
.xu__in{padding:30px 48px 26px}
.xu__h{font-size:clamp(30px,3.6vw,42px)}
.xu__s{margin-top:10px}
.xu__ctl{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px 20px;margin-top:16px}
.xu__ctl .xu__seg,.xu__ctl .xu__yr{margin-top:0}
.xu__cards{gap:16px;margin-top:18px}
.xu__c{padding:20px 20px 20px}
.xu__p{margin:14px 0 14px}.xu__p b{font-size:40px}
.xu__f{margin-top:14px;gap:8px}.xu__f li{font-size:14px}
.xu__promo{display:inline;margin:0}.xu__foot{margin:16px 0 0}.xu__foot .xu__promo{margin-right:10px}
.lt--xu{grid-column:1/-1;margin-top:0;border-radius:18px;text-align:left;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) auto;align-items:center;gap:0;min-height:118px}
.lt--xu>div{padding:18px 22px}
.ltx-a{display:flex;flex-direction:column;align-items:flex-start}
.lt--xu .lt-badge{height:22px;padding:0 10px 0 8px;font-size:11.5px}
.lt--xu .lt-badge svg{width:12px;height:12px}
.lt--xu .lt-title{margin:9px 0 0;font-size:24px;line-height:1.15}
.lt--xu .lt-sub{margin:6px 0 0;font-size:12.5px;line-height:18px}
.ltx-b{align-self:stretch;display:flex;flex-direction:column;justify-content:center;border-left:1px solid rgba(231,193,114,.16);border-right:1px solid rgba(231,193,114,.16)}
.lt--xu .lt-price{margin:0;gap:2px 10px}
.lt--xu .lt-num{font-size:38px;letter-spacing:-1.2px}
.lt--xu .lt-price span{font-size:12.5px}
.lt--xu .lt-seat{max-width:none;margin-top:11px}
.lt--xu .lt-seat-t{font-size:12px;line-height:16px}
.lt--xu .lt-bar{height:4px;margin-top:6px}
.ltx-c{display:flex;flex-direction:column;align-items:center;gap:8px}
.lt--xu .lt-btn{width:auto;min-width:152px;height:42px;margin:0;font-size:14.5px;letter-spacing:.04em}
.ltx-more{font-size:12.5px;color:var(--gm);text-decoration:underline;text-decoration-color:rgba(243,230,200,.3);text-underline-offset:3px}
.ltx-more:hover{color:var(--g1)}
@media(min-width:701px) and (max-height:900px){
  .xu__in{padding:24px 44px 20px}
  .xu__h{font-size:32px}.xu__h br{display:none}
  .xu__s{margin-top:6px;font-size:14px}.xu__ctl{margin-top:14px}.xu__cards{margin-top:16px}
  .xu__c{padding:18px 18px 18px}.xu__p{margin:10px 0 12px}.xu__p b{font-size:36px}
  .xu__f{margin-top:12px;gap:7px}.xu__f li{font-size:13.5px;line-height:19px}
  .xu__foot{margin-top:14px}
}
@media(max-width:700px){
  .xu__in{padding:28px 18px 22px}
  .lt--xu{grid-template-columns:1fr;min-height:0}
  .lt--xu>div{padding:18px 18px}
  .ltx-a{padding-bottom:4px!important}
  .ltx-b{border:0;border-top:1px solid rgba(231,193,114,.16);padding-top:16px!important}
  .ltx-c{padding-top:0!important;padding-bottom:18px!important}
  .lt--xu .lt-btn{width:100%}
}

/* ---------------------------------------------------------------- v59: newsletter (footer, result pages, settings switch, welcome opt-in) */
.foot__nl{width:var(--wrap);margin-inline:auto;display:flex;align-items:flex-start;justify-content:space-between;gap:24px 48px;padding:28px 0 32px;border-top:1px solid color-mix(in srgb,var(--fg) 8%,transparent)}
.foot__nl-t{display:flex;flex-direction:column;gap:6px;min-width:0}
.foot__nl-t b{font-size:15px;line-height:22px;font-weight:550;color:var(--fg)}
.foot__nl-t span{font-size:13px;line-height:19.5px;color:var(--muted)}
.foot__nl-f{flex:none;width:min(420px,100%)}
.foot__nl-row{display:flex;gap:8px;padding:4px;border-radius:12px;background:color-mix(in srgb,var(--fg) 4%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fg) 10%,transparent);transition:box-shadow .2s}
.foot__nl-row:focus-within{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 70%,transparent),0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.foot__nl-row input{flex:1;min-width:0;height:36px;padding:0 10px;border:0;background:transparent;color:var(--fg);font:inherit;font-size:14px;outline:0}
.foot__nl-row input::placeholder{color:color-mix(in srgb,var(--fg) 40%,transparent)}
.foot__nl-row button{flex:none;height:36px;padding:0 16px;border:0;border-radius:9px;background:var(--accent);color:#fff;font:inherit;font-size:14px;font-weight:550;cursor:pointer;transition:filter .2s,opacity .2s}
.foot__nl-row button:hover{filter:brightness(1.12)}
.foot__nl-row button:disabled{opacity:.6;cursor:default}
.foot__nl-m{min-height:18px;margin:8px 2px 0;font-size:12.5px;line-height:18px;color:color-mix(in srgb,var(--fg) 70%,transparent)}
.foot__nl-m.bad{color:#f87171}
@media (max-width:900px){.foot__nl{flex-direction:column;padding:24px 0 28px}.foot__nl-f{width:100%}}

.nlp{min-height:calc(100vh - 64px);display:grid;place-items:center;padding:48px 24px}
.nlp__box{width:min(440px,100%);padding:36px 32px 32px;border-radius:20px;background:var(--card);box-shadow:0 0 0 1px color-mix(in srgb,var(--fg) 8%,transparent),0 30px 60px -20px rgba(0,0,0,.5);text-align:center}
.nlp__mk{display:inline-grid;color:var(--fg);margin-bottom:18px}
.nlp__mk svg{width:40px;height:40px}
.nlp__box h1{margin:0 0 10px;font-size:24px;line-height:1.3;font-weight:600;letter-spacing:-.01em}
.nlp__box p{margin:0;font-size:14.5px;line-height:1.7;color:var(--muted);overflow-wrap:anywhere}
.nlp__act{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:24px}
.nlp__act:empty{display:none}
.nlp__box.wait h1{opacity:.7}

.st-sw{position:relative;width:40px;height:24px;flex:none;padding:0;border:0;border-radius:999px;background:var(--line-2);cursor:pointer;transition:background-color .2s}
.st-sw i{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .2s var(--ease-out)}
.st-sw.on{background:var(--accent)}
.st-sw.on i{transform:translateX(16px)}
.st-sw:disabled{opacity:.6;cursor:default}
.st-sw:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.ob__nl{display:flex;align-items:flex-start;gap:8px;margin:2px 2px 4px;font-size:13px;line-height:19px;color:#52525b;text-align:left;cursor:pointer}
.ob__nl input{flex:none;width:15px;height:15px;margin:2px 0 0;accent-color:var(--ob-acc)}

/* ---------------------------------------------------------------- v59: items from the content API */
.cms-cardif{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none;border-radius:inherit;background:transparent}
.cms-cardimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.cms-skpv{flex-direction:column;align-content:center;gap:8px;text-align:center}
.cms-skpv b{font-size:16px;font-weight:600;color:var(--fg)}
.cms-skpv small{max-width:90%;font-size:12.5px;line-height:1.5;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cms-stage .cms-if{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:inherit;background:transparent}
.cms-stage--txt{display:grid;place-items:center;background:radial-gradient(80% 80% at 50% 40%,var(--card-2),var(--card))}
.cms-stage--txt b{font-size:22px;font-weight:600}
.cms-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dx__frame>.tmk--big{position:absolute;inset:0}
.cms-sw{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.cms-sw span{display:grid;grid-template-columns:28px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:10px;border-radius:10px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fg) 8%,transparent)}
.cms-sw i{grid-row:1/3;width:28px;height:28px;border-radius:8px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.cms-sw b{font-size:13px;font-weight:550}
.cms-sw small{font:12px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted)}
/* v60: API items use the same cards as baked ones; component previews are a fixed 1200×900 sandboxed frame scaled in (.tframe data-h) */
.tframe.cms-tf{background:transparent}
.tframe.cms-tf iframe{background:transparent}
.cms-skpv{position:absolute;inset:0;padding:0;overflow:hidden}
.cms-skpv .cms-cardimg{border-radius:0}
.cms-skpv--t{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:24px}
/* v59 admin: newsletter composer */
.nlc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}
.nlc__pv{display:flex;flex-direction:column;gap:8px}
.nlc__prog{margin-top:16px}
.nlc__bar{height:8px;border-radius:99px;background:var(--line);overflow:hidden}
.nlc__bar i{display:block;height:100%;width:0;border-radius:inherit;background:var(--accent);transition:width .4s}
.nlc__prog p{margin:8px 0 0;font-size:13px;color:var(--muted)}
@media (max-width:900px){.nlc{grid-template-columns:1fr}.nlc__pv iframe{height:420px!important}}
/* ---------- v61: list badges sit under the preview (never on top of it), template grid 3-up, template theme + icon set ---------- */
.wcl__badge,.wcl__badge--soft{top:auto;right:auto;left:20px;bottom:9px;background:color-mix(in srgb,var(--fg) 7%,transparent);color:var(--muted);box-shadow:none;font-weight:500;transition:opacity .2s var(--ease-out)}
.wcl .wcl__badge{transition:opacity .2s var(--ease-out)}
.wcl:hover .wcl__badge,.wcl:focus-within .wcl__badge{transform:none;opacity:0}
.wl-gridv--t .wl-cells{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1100px){.wl-gridv--t .wl-cells{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){
  .wcl__badge,.wcl__badge--soft{left:auto;bottom:auto;right:14px;top:2px}
  .wcl:hover .wcl__badge,.wcl:focus-within .wcl__badge{opacity:1}
  .wl-gridv--t .wl-cells{grid-template-columns:minmax(0,1fr)}
}
.cms-tpth{display:flex;flex-wrap:wrap;gap:10px}
.cms-tpth__it{display:inline-flex;align-items:center;gap:10px;padding:8px 12px 8px 8px;border-radius:10px;box-shadow:inset 0 0 0 1px var(--line);color:var(--fg);text-decoration:none;font-size:13.5px}
.cms-tpth__it:hover{background:var(--hover)}
.cms-tpth__sw{display:inline-flex;border-radius:6px;overflow:hidden;box-shadow:0 0 0 1px var(--line)}
.cms-tpth__sw i{width:14px;height:24px}
.cms-tpic{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
.cms-tpic__it{display:grid;justify-items:center;gap:6px;padding:14px 6px 10px;border-radius:10px;box-shadow:inset 0 0 0 1px var(--line);color:var(--fg);text-decoration:none}
.cms-tpic__it:hover{background:var(--hover)}
.cms-tpic__it svg{width:24px;height:24px}
.cms-tpic__it small{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:var(--muted)}

/* ---------------------------------------------------------------- v62 home: compact logo grid (21st-style), template carousel */
.usedby__g{grid-template-columns:8fr 6fr;gap:32px 40px;margin-top:40px}
.usedby__l{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:14px}
.usedby__l--llm{grid-template-columns:repeat(3,minmax(0,1fr))}
.usedby__l .ub{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;height:56px;padding:0 8px;border-radius:12px;background:color-mix(in srgb,var(--fg) 3%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fg) 5%,transparent);opacity:.62;transition:opacity .2s,background-color .2s;font-size:14.5px;font-weight:600;letter-spacing:-.02em;line-height:1;color:var(--fg)}
.usedby__l .ub:hover{opacity:.95;background:color-mix(in srgb,var(--fg) 6%,transparent)}
.usedby__l .ub b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ub__i{flex:none;width:18px;height:18px;color:var(--fg)}
.ub__i *{fill:currentColor}
.hero .usedby__note{margin-top:20px}
@media(max-width:980px){.usedby__g{grid-template-columns:1fr;gap:24px}.usedby__l,.usedby__l--llm{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:600px){.usedby__l,.usedby__l--llm{grid-template-columns:repeat(2,minmax(0,1fr))}.usedby__l .ub{height:48px;font-size:14px;justify-content:flex-start;padding:0 14px}}
.tcar{display:block}
.tcar__track{display:flex;height:100%;transition:transform .7s cubic-bezier(.65,0,.35,1);will-change:transform}
.tcar__s{position:relative;flex:0 0 100%;height:100%;min-width:0}
.tcar__s .tframe{position:absolute;inset:0}
.tcar__ui{position:absolute;left:12px;right:12px;bottom:12px;display:flex;align-items:center;justify-content:space-between;gap:12px;pointer-events:none}
.tcar__nm{max-width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:5px 10px;border-radius:999px;background:rgba(10,10,14,.78);color:#f3f3f6;font-size:12px;font-weight:500;line-height:16px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.tcar__dots{display:flex;gap:5px;padding:6px 8px;border-radius:999px;background:rgba(10,10,14,.78)}
.tcar__dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.35);transition:background-color .3s,width .3s}
.tcar__dots i.on{width:16px;border-radius:3px;background:#fff}
@media(prefers-reduced-motion:reduce){.tcar__track{transition:none}}
/* v62 API detail pages */
.cms-dxpv .tframe{position:absolute;inset:0}
.cms-tpic__all{margin-top:10px;font-size:13px}

/* ---------- v67: admin 访问 (visit analytics) ---------- */
.ana-bar0{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;margin:-4px 0 14px}
.ana-tabs{display:inline-flex;flex-wrap:wrap;gap:2px;padding:3px;border-radius:12px;background:var(--hover)}
.ana-tabs button{height:30px;padding:0 12px;border:0;border-radius:9px;background:transparent;color:var(--muted);font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.ana-tabs button:hover{color:var(--fg)}
.ana-tabs button.on{background:var(--panel);color:var(--fg);box-shadow:0 1px 3px rgba(0,0,0,.18)}
.ana-cust{display:inline-flex;align-items:center;gap:8px}
.ana-cust .input{height:34px;width:150px;padding:0 10px}
.ana-cust span{color:var(--muted);font-size:13px}
.ana-ck{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:13px;cursor:pointer;user-select:none}
.ana-ck input{accent-color:var(--accent);margin:0}
[data-ana]{transition:opacity .2s}
.ana-note{margin:0 0 14px;color:var(--muted);font-size:13px;line-height:1.65}
.ana-fl{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 12px;font-size:13px;color:var(--muted)}
.ana-chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:999px;border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--fg);font-size:12.5px;cursor:pointer}
.ana-chip span{opacity:.6;font-size:15px;line-height:1}
.ana-chip--x{border-color:var(--line-2);background:transparent;color:var(--muted)}
.ana-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
.ana-kpi b{font-size:26px}
.ana-kpi__s{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;margin-top:6px;min-height:18px;font-size:12px;color:var(--dim)}
.ana-kpi__s i{font-style:normal}
.ana-d{font-style:normal;font-weight:600;color:var(--muted)}
.ana-d--up{color:var(--ok)}.ana-d--down{color:var(--err)}.ana-d--new{color:var(--accent-2)}
.ana-p{min-width:0}
.ana-p+.ana-p,.ana-g+.ana-p,.ana-p+.ana-g{margin-top:16px}
.ana-g>.panel+.panel{margin-top:0}
.ana-g>*{min-width:0}
.ana-more-b{display:block;width:100%;margin-top:8px;height:34px;border:1px dashed var(--line-2);border-radius:10px;background:transparent;color:var(--muted);font-size:12.5px;cursor:pointer}
.ana-more-b:hover{color:var(--fg);background:var(--hover)}
.ana-tw tr.ana-more{display:none}
.ana-tw.open tr.ana-more{display:table-row}
.ana-g--in{gap:16px;margin-top:12px}
.ana-ph{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;margin-bottom:12px}
.ana-ph h2{margin:0!important}
.ana-ph .ana-tabs button{height:26px;padding:0 10px;font-size:12.5px}
.ana-p>.ana-tabs{margin-bottom:12px}
.ana-leg{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.ana-leg i{display:inline-block;width:16px;height:0;border-top:2px solid var(--accent);margin-left:6px}
.ana-leg .ana-leg__p{border-top:2px dashed var(--dim)}
.ana-chart{position:relative;width:100%;min-height:200px}
.ana-chart svg{display:block;overflow:visible}
.ana-grid{stroke:var(--line);stroke-width:1}
.ana-ax{fill:var(--dim);font-size:11px;font-family:var(--font)}
.ana-line{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.ana-area{fill:color-mix(in srgb,var(--accent) 12%,transparent);stroke:none}
.ana-prev{fill:none;stroke:var(--dim);stroke-width:1.5;stroke-dasharray:4 4}
.ana-dot{fill:var(--accent)}
.ana-cur{stroke:var(--line-2);stroke-width:1}
.ana-tip{position:absolute;z-index:2;display:grid;gap:2px;padding:8px 10px;border-radius:10px;border:1px solid var(--line-2);background:var(--panel);box-shadow:var(--shadow);font-size:12px;white-space:nowrap;pointer-events:none}
.ana-tip span{color:var(--muted)}
.ana-tip .ana-tip__p{color:var(--dim)}
.ana-tw{overflow-x:auto;border-radius:12px;border:1px solid var(--line)}
.ana-t{table-layout:auto}
.ana-t th{font-size:12px;color:var(--dim);font-weight:600}
.ana-t td,.ana-t th{padding:9px 12px}
.ana-t tr:last-child td{border-bottom:0}
.ana-num{text-align:right!important;font-variant-numeric:tabular-nums;width:1%}
.ana-bar{position:relative;max-width:0;width:100%;overflow:hidden;text-overflow:ellipsis}
.ana-bar i{position:absolute;left:0;top:4px;bottom:4px;border-radius:6px;background:color-mix(in srgb,var(--accent) 10%,transparent);pointer-events:none}
.ana-bar span{position:relative;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ana-bar span span{display:inline;position:static}.ana-bar span .badge{display:inline-flex;vertical-align:1px}
.ana-path{font-size:12.5px}
.ana-click{cursor:pointer}
.ana-click:hover td{background:var(--hover)}
.ana-live{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.ana-live i{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 60%,transparent);animation:anaPulse 2s infinite}
@keyframes anaPulse{70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){.ana-live i{animation:none}}
.ana-online{display:flex;align-items:baseline;gap:8px;margin:0 0 14px}
.ana-online b{font-size:40px;letter-spacing:-.03em;line-height:1}
.ana-online span{color:var(--muted);font-size:13px}
.ana-scroll{max-height:452px;overflow-y:auto;margin-right:-10px;padding-right:10px;scrollbar-width:thin;scrollbar-gutter:stable}
.ana-rec{list-style:none;margin:0;padding:0}
.ana-rec li{display:grid;grid-template-columns:76px minmax(0,1fr);gap:2px 12px;padding:9px 0;border-bottom:1px solid var(--line)}
.ana-rec li:last-child{border-bottom:0}
.ana-rt{grid-row:span 2;color:var(--dim);font-size:12px;padding-top:1px}
.ana-rp{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.ana-rp b{font-weight:600;font-size:12.5px}
.ana-rm{min-width:0;color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ana-rec .ana-empty{display:block;padding:40px 0;text-align:center;color:var(--dim)}
.ana-fun{display:grid;gap:10px}
.ana-fun__r{display:grid;grid-template-columns:150px minmax(0,1fr) 72px 64px;align-items:center;gap:12px;font-size:13.5px}
.ana-fun__r span{color:var(--muted)}
.ana-fun__r b{text-align:right;font-variant-numeric:tabular-nums}
.ana-fun__r em{font-style:normal;text-align:right;color:var(--dim);font-size:12px}
.ana-fun__b{height:22px;border-radius:7px;background:var(--hover);overflow:hidden}
.ana-fun__b i{display:block;height:100%;border-radius:7px;background:color-mix(in srgb,var(--accent) 55%,transparent)}
.ana-pills{display:flex;flex-wrap:wrap;gap:8px}
.ana-pill{display:inline-flex;align-items:baseline;gap:6px;padding:6px 12px;border-radius:999px;border:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.ana-pill b{color:var(--fg);font-size:14px}
@media(max-width:1180px){.ana-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){
  .ana-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .ana-kpi{padding:14px}.ana-kpi b{font-size:21px}
  .ana-leg{margin-left:0}
  .ana-cust{flex-wrap:wrap}.ana-cust .input{width:136px}
  .ana-fun__r{grid-template-columns:96px minmax(0,1fr) 54px;gap:8px}.ana-fun__r em{display:none}
  .ana-rec li{grid-template-columns:1fr}.ana-rt{grid-row:auto}
  .ana-scroll{margin-right:0;padding-right:0}
}
/* v68: 后台全部隐藏滚动条（仍可滚动） */
html:has(.adm),html:has(.adm) *{scrollbar-width:none}
html:has(.adm)::-webkit-scrollbar,html:has(.adm) *::-webkit-scrollbar{display:none;width:0;height:0}

/* ---------------------------------------------------------------- v69 SEO / GEO pages: /guides/, /ui/, update line, FAQ */
.dz-upd{margin:10px 0 0;font-size:13px;color:var(--dim,var(--muted))}
.lhead .dz-upd{margin-top:14px}
.dz-lead.gans{padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--fg) 3%,transparent);color:var(--fg80,var(--fg))}
.gfaq details{border-bottom:1px solid var(--line)}
.gfaq details:first-child{border-top:1px solid var(--line)}
.gfaq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;font-size:15.5px;font-weight:550;cursor:pointer;list-style:none}
.gfaq summary::-webkit-details-marker{display:none}
.gfaq summary::after{content:"";flex:none;width:9px;height:9px;border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);transform:rotate(45deg) translateY(-3px);transition:transform .2s}
.gfaq details[open] summary::after{transform:rotate(225deg) translate(-2px,-1px)}
.gfaq details p{margin:0 0 16px!important;font-size:15px;line-height:1.75;color:var(--muted)}
.lhead__eb{margin:0;font-size:13px;line-height:17.55px;font-weight:450;color:var(--muted)}
.lhead__eb a{color:inherit;text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);text-underline-offset:3px}
.lhead h1.lhead__t{margin:12px 0 0;font-size:58px;line-height:1.02;font-weight:700;letter-spacing:-2.6px;color:var(--fg)}
.gidx{padding:0 0 40px}
.gcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;margin-top:48px}
.gcard{display:flex;flex-direction:column;gap:8px;padding:22px 22px 24px;border-radius:16px;background:var(--card-2,color-mix(in srgb,var(--fg) 4%,transparent));box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);transition:background-color .15s,transform .2s}
.gcard:hover{background:color-mix(in srgb,var(--fg) 7%,transparent);transform:translateY(-2px)}
.gcard b{font-size:17px;font-weight:650;letter-spacing:-.01em}
.gcard span{font-size:14px;line-height:1.6;color:var(--muted)}
.gidx__h{margin:64px 0 16px;font-size:21px;font-weight:650}
.gchips,.uix-nav{display:flex;flex-wrap:wrap;gap:8px}
.gchip,.uix-nav a{display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:999px;background:color-mix(in srgb,var(--fg) 6%,transparent);font-size:13.5px;color:var(--fg80,var(--fg));transition:background-color .15s}
.gchip:hover,.uix-nav a:hover{background:color-mix(in srgb,var(--fg) 11%,transparent)}
.uix-nav a.on{background:var(--fg);color:var(--bg)}
.gidx__more{margin-top:32px;font-size:14px;color:var(--muted)}
.gidx__more a{color:var(--fg);text-decoration:underline;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent)}
.uix .uix-nav{margin:36px 0 32px}
.uix .uix-grid{margin-bottom:24px}
.uix-body{max-width:760px}
.uix-body section{margin-top:52px}
.uix-body h2{margin:0 0 14px;font-size:22px;line-height:1.35;font-weight:650;letter-spacing:-.01em}
.uix-body p,.uix-body li{font-size:15.5px;line-height:1.75;color:var(--fg80,var(--fg))}
.uix-body ol,.uix-body ul{margin:0 0 12px;padding-left:22px}
.uix-body a{color:var(--fg);text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);text-underline-offset:3px}
.uix-list{list-style:none;padding:0!important;margin:0;counter-reset:u}
.uix-list li{padding:14px 0;border-bottom:1px solid var(--line)}
.uix-list li a{text-decoration:none!important}
.uix-list li b{font-weight:600}
.uix-list li span{margin-left:6px;color:var(--muted);font-size:14px}
.uix-list li p{margin:4px 0 0;font-size:14.5px;line-height:1.65;color:var(--muted)}
.uix-body .dz-code{margin-top:16px}
@media (max-width:760px){.lhead h1.lhead__t{font-size:40px;letter-spacing:-1.6px}.gcards{grid-template-columns:1fr}.uix-body section{margin-top:40px}}