@font-face{font-family:Inter;src:url("/assets/blog-design/3100e775e8616cd2611b.woff2") format('woff2');font-weight:100 900;font-style:normal;font-display:swap}*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,sans-serif;color:#2e2e2e;background:#fff;-webkit-font-smoothing:antialiased}p,h1,h2,h3{margin:0;font:inherit}img{display:block;max-width:100%}button,input,a{font:inherit;color:inherit}button{cursor:pointer;background:transparent}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid #5e85ee;outline-offset:4px}.svg-library{position:absolute;width:0;height:0;overflow:hidden}
.fg-709{border-color:var(--line,#f1f3f5);border-style:solid;border-top-width:1px;align-content:stretch;display:flex;flex-direction:column;gap:12px;align-items:center;padding-left:300px;padding-right:300px;padding-top:80px;padding-bottom:80px;position:relative;flex-shrink:0;width:100%}
.fg-710{align-content:stretch;display:flex;gap:2px;align-items:center;justify-content:center;position:relative;flex-shrink:0;width:100%}
.fg-711{overflow-wrap:break-word;font-family:Inter,sans-serif;font-weight:400;line-height:1.375rem;font-style:normal;position:relative;flex-shrink:0;color:var(--ink,#2e2e2e);font-size:0.875rem;text-align:center;white-space:nowrap}
.fg-714{overflow-wrap:break-word;font-family:Inter,sans-serif;font-weight:400;line-height:1.375rem;font-style:normal;position:relative;flex-shrink:0;color:var(--ink,#2e2e2e);font-size:0.875rem;text-align:center;width:100%}
body #masthead{z-index:100!important;overflow:visible!important}
body #masthead .nav-products{position:static}
body #masthead .nav-products>summary{font-size:0.875rem;color:#333;gap:8px}
.nav-products[open]>summary>span{transform:rotate(180deg)}
body #masthead .nav-products>.product-menu{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);width:min(1120px,calc(100vw - 64px));max-height:calc(100dvh - 110px);overflow:auto;box-sizing:border-box;display:grid;grid-template-columns:320px minmax(0,1fr);gap:24px;padding:16px;border:1px solid #ededed;border-radius:22px;background:#fff;box-shadow:0 24px 65px #00000016;z-index:200}
body #masthead .nav-products:not([open])>.product-menu{display:none}
.product-menu-list{display:flex;flex-direction:column;gap:4px}
.product-menu-list button{font:inherit;text-align:left;border:0;background:transparent;padding:14px 17px;border-radius:12px;cursor:pointer;color:#161616;transition:background .18s}
.product-menu-list button[aria-selected=true]{background:#f4f4f3}
.product-menu-list button>span{font-size:1.1875rem;line-height:1.25;letter-spacing:-.025em;display:block;margin-bottom:5px}
.product-menu-list button>small{display:block;font-size:0.8125rem;line-height:1.4;color:#828282;font-weight:400}
.product-menu-list button:focus-visible{outline:2px solid #8a8a8a;outline-offset:-2px}
.product-menu-previews{background:#f8f7f5;border-radius:16px;min-width:0;display:flex}
.product-menu-panel{padding:38px 36px;width:100%;box-sizing:border-box;animation:product-preview-in .2s ease}
.product-menu-panel[hidden]{display:none!important}
.product-menu-panel h2{font-size:1.875rem;line-height:1.18;letter-spacing:-.035em;font-weight:450;max-width:420px;margin:0 0 26px;color:#252525}
@keyframes product-preview-in{from{opacity:.4;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:760px){body #masthead .nav-products>.product-menu{position:fixed;top:130px;left:16px;transform:none;width:calc(100vw - 32px);max-height:calc(100dvh - 150px);grid-template-columns:1fr;gap:12px;padding:12px;border-radius:16px}.product-menu-list{display:grid;grid-template-columns:1fr 1fr;gap:4px}.product-menu-list button{padding:10px}.product-menu-list button>span{font-size:0.875rem}.product-menu-list button>small{display:none}.product-menu-panel{padding:24px}.product-menu-panel h2{font-size:1.5625rem}}
@media(prefers-reduced-motion:reduce){.product-menu-panel{animation:none}}
body #masthead .nav-products>summary>span{display:block;width:8px;height:8px;font-size:0;box-sizing:border-box;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transform-origin:center;transition:transform .18s ease;margin-left:3px;margin-right:3px}
body #masthead .nav-products[open]>summary>span{transform:translateY(2px) rotate(225deg)}
/* Compact reference proportions: 700 × 390 with a scene preview. */
body #masthead .nav-products>.product-menu{width:700px;height:390px;max-width:calc(100vw - 40px);max-height:calc(100dvh - 96px);grid-template-columns:208px minmax(0,1fr);gap:20px;padding:8px;border-radius:14px;overflow:hidden;box-shadow:0 18px 42px #00000012}
.product-menu-list{gap:0;justify-content:space-between;min-height:0}
.product-menu-list button{padding:9px 12px;border-radius:8px;min-height:59px}
.product-menu-list button>span{font-size:0.875rem;line-height:1.125rem;margin-bottom:3px;letter-spacing:-.02em}
.product-menu-list button>small{font-size:0.65625rem;line-height:0.8125rem;color:#828282}
.product-menu-previews{border-radius:10px;overflow:hidden;background:#f8f7f5}
.product-menu-panel{padding:22px 20px;min-width:0;display:flex;align-items:center}
@media(max-width:760px){body #masthead .nav-products>.product-menu{height:auto;max-height:calc(100dvh - 150px);width:calc(100vw - 32px);max-width:none;grid-template-columns:1fr;gap:10px;overflow:auto;padding:10px}.product-menu-list{gap:3px}.product-menu-list button{min-height:40px;padding:8px}.product-menu-list button>small{display:none}.product-menu-panel{padding:20px}}
/* Match navigation typography and use the reference's tighter dropdown gap. */
body #masthead .nav>a,body #masthead .nav-products>summary{color:#858993;font-size:0.8125rem;line-height:1.25rem;font-weight:400;padding:5px 8px;border-radius:999px;transition:color .18s ease,background .18s ease}
body #masthead .nav>a:hover,body #masthead .nav-products>summary:hover{color:var(--ink);background:var(--surface)}
body #masthead .nav-products>.product-menu{top:calc(100% - 8px);transform-origin:50% 0}
@media(max-width:760px){body #masthead .nav-products>.product-menu{top:130px}}


body #masthead .nav-products>.product-menu{width:820px;height:430px;grid-template-columns:246px minmax(0,1fr);gap:16px;padding:12px;border-radius:18px;box-shadow:0 18px 48px #00000010,0 2px 8px #00000006}
body #masthead .product-menu-previews{background:#f7f7f6;border:1px solid #efefed;border-radius:12px}
body #masthead .product-menu-list button{border-radius:9px;transition:background .18s ease}
.nav-editorial{width:100%;height:100%;padding:22px 26px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;color:#2e2e2e}
.nv-copy h4{font-size:1.0625rem;font-weight:500;letter-spacing:-.025em;line-height:1.4;margin:10px 0 6px}.nv-copy p{font-size:0.75rem;line-height:1.6;color:#858585;margin:0}
html[data-theme="dark"] .nav-editorial{color:#e4e4e4}
@media(max-width:760px){body #masthead .nav-products>.product-menu{width:calc(100vw - 32px);height:auto;grid-template-columns:1fr;max-height:calc(100dvh - 92px);overflow:auto}.nav-editorial{padding:18px}}


body #masthead .nav-editorial :is(.nv-sheet,.nv-console){background:linear-gradient(145deg,#303133,#252628 65%);color:#efefef;border:1px solid #ffffff12;box-shadow:0 12px 24px #00000012,0 2px 5px #00000008}
body #masthead .nav-editorial :is(.nv-member,.nv-step,.nv-bars){border-color:#ffffff15}
body #masthead .nav-editorial :is(.nv-member small,.nv-step small,.nv-score-main small,.nv-agent-tiles small,.nv-review small,.nv-trail small,.nv-bottom){color:#b2b3b5}
body #masthead .nav-editorial :is(.nv-member em,.nv-step em,.nv-top small){color:#a2a3a5}
body #masthead .nav-editorial :is(.nv-member i,.nv-step i,.nv-seal){background:#3a3b3d;border-color:#ffffff18;color:#ddd}

:root{--ink:#2e2e2e;--muted:#6b7280;--faint:#9ca3af;--surface:#fafafa;--page:#fff;--line:#ebebec}
html{scroll-padding-top:96px}body{overflow-x:clip}button,input{font:inherit}button,a,summary{-webkit-tap-highlight-color:transparent}button{padding:0}button:disabled{cursor:wait}
.masthead{height:70px;position:relative;z-index:30;border-bottom:1px solid #f3f3f4;background:var(--page)}.masthead-inner{width:calc(100% - 80px);max-width:1240px;margin:auto;height:100%;display:flex;align-items:center;gap:32px}.brand{display:flex;align-items:center;gap:6px;font-size:1.25rem;font-weight:500;white-space:nowrap;color:var(--ink)}.brand svg{width:24px;height:24px;fill:currentColor}.nav{margin-left:auto;display:flex;align-items:center;gap:28px;font-size:0.875rem;color:#6b7280}.nav>a{padding:12px 0}.nav-products{position:static}.nav-products summary{list-style:none;display:flex;align-items:center;gap:8px;cursor:pointer;font-size:0.875rem!important;color:var(--muted)!important}.nav-products summary::-webkit-details-marker{display:none}.mast-actions{display:flex;align-items:center;gap:24px}.icon-link{display:grid;place-items:center;width:20px;height:24px}.icon-link svg{width:20px;height:20px;fill:currentColor}.theme-toggle{width:30.4px;height:16px;position:relative;background:linear-gradient(90deg,#181535,#31277b);border-radius:99px;border:1px solid #282252}.theme-toggle img{display:none}.theme-toggle:after{content:'';position:absolute;width:12px;height:12px;left:1px;top:1px;background:white;border-radius:50%;transition:transform .2s}.theme-toggle[aria-checked=true]:after{transform:translateX(14px)}.rv-menu-button{display:none}.design-footer{width:100%;padding:80px 24px;border-top:1px solid #f1f3f5}
@media(max-width:1000px){.nav{gap:16px}.masthead-inner{gap:20px}.brand{font-size:1rem}.mast-actions{gap:16px}}
@media(max-width:700px){.masthead{height:64px}.masthead-inner{width:calc(100% - 40px)}.nav{display:none;position:absolute;top:64px;left:20px;right:20px;background:var(--page);padding:20px;flex-direction:column;align-items:stretch;border:1px solid var(--line);border-radius:16px;box-shadow:0 12px 30px #0001}.nav.is-open{display:flex}.mast-actions{margin-left:auto}.rv-menu-button{display:block;font-size:1.375rem}.closing h2{font-size:2rem;line-height:2.5rem}.design-footer{padding:48px 20px}.design-footer p{font-size:0.75rem}}
html[data-theme=dark]{color-scheme:dark;--ink:#f4f4f5;--muted:#abb1bd;--page:#151617;--surface:#202225;--line:#35373c}html[data-theme=dark] body,html[data-theme=dark] body>div{background:var(--page);color:var(--ink)}html[data-theme=dark] h1,html[data-theme=dark] h2,html[data-theme=dark] h3{color:var(--ink)}.masthead{position:sticky;top:0}
/* Restore the original supplied sun/moon artwork and its crossfade. */
.theme-toggle{width:31px;height:16px;padding:0;border:0;border-radius:999px;background:none;box-shadow:none;display:grid;place-items:center}
.theme-toggle:after{display:none}
.theme-toggle img{display:block;width:31px;height:16px;grid-area:1 / 1;transition:opacity 200ms ease-out,transform 200ms ease-out}
.theme-toggle:active{transform:scale(.97)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

/* 1920px artboard: 1200px content, 360px margins. */
.masthead-inner{max-width:1200px}
#masthead .masthead-inner,#masthead .nav,#masthead .mast-actions{gap:8px}
/* Keep the complete icon at a definite size, independent of its source resolution. */
/* The supplied blue disc is RGBA(96,134,238,61/255).
   A white backing composites it to exactly #D9E2FB in both themes. */
.closing [data-node-id="2051:1250"]>img,
.closing [data-node-id="2051:1256"]>img{background:#fff;border-radius:50%}
.closing h2{line-height:2.5rem;white-space:normal}
/* Reuse the previous Common Questions cards, badges and animated pastel edge. */
@property --faq-border-angle{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes hb-faq-border-turn{to{--faq-border-angle:360deg}}
/* A next step appears only after the selected walkthrough finishes. */
@media(max-width:700px){.closing h2{font-size:1.875rem;line-height:2.125rem;letter-spacing:-0.075rem}}
/* Role controls share one color source; inner Figma labels cannot override state. */
#hero-word{display:inline-block;line-height:5rem;height:80px;overflow:hidden;flex:none;transition:inline-size .3s cubic-bezier(.86,0,.07,1)}
#hero-word{position:relative}
@keyframes hero-word-enter{from{opacity:0;translate:0 .15em}to{opacity:1;translate:0 0}}
@media(max-width:700px){#hero-word{line-height:2.75rem;height:44px}}
/* Each illustration tells one finite story; the final state remains visible. */
@media(prefers-reduced-motion:reduce){#hero-word{transition:none}}

/* Shared motion rhythm: quiet entrances and direct, reversible pointer feedback. */
:root{--motion-fast:160ms;--motion-ui:240ms;--motion-ease:cubic-bezier(.22,1,.36,1)}
@keyframes hb-title-intro{from{opacity:0;transform:translateY(35%) rotateX(-24deg)}to{opacity:1;transform:translateY(0) rotateX(0)}}
@keyframes hb-copy-intro{from{opacity:0;filter:blur(6px);translate:0 8px}to{opacity:1;filter:blur(0);translate:0 0}}
@keyframes hb-demo-intro{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:no-preference){
 .masthead-inner{animation:hb-copy-intro 460ms var(--motion-ease) both}
}
html{scroll-padding-top:94px}
.design-footer{padding-block:40px}
.icon-link,.theme-toggle{transition:background-color var(--motion-fast) ease,color var(--motion-fast) ease,border-color var(--motion-fast) ease,scale var(--motion-fast) var(--motion-ease),translate var(--motion-ui) var(--motion-ease),box-shadow var(--motion-ui) ease;touch-action:manipulation}
.theme-toggle:focus-visible{outline:2px solid #5e85ee;outline-offset:4px}
@media(hover:hover) and (pointer:fine){
 .icon-link:hover{scale:1.06}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
 .icon-link:hover{scale:1}
}

/* Semantic dark palette; product screenshots keep their original artwork. */
:root{color-scheme:light;--accent-text:#5e85ee}
html[data-theme=dark]{color-scheme:dark;--ink:#f4f4f5;--muted:#abb1bd;--faint:#9ca3af;--page:#151617;--surface:#202225;--raised:#2b2b2b;--line:#35373c;--accent-text:#5e85ee;--soft-surface:#202225;--inset-surface:#2b2b2b}
.theme-toggle{width:31px;height:16px;padding:0;border-radius:99px;border:0;background:transparent;overflow:visible;flex:none}
.theme-toggle::before{content:'';position:absolute;inset:-8px 0}
.theme-toggle::after{display:none}
.theme-toggle .theme-scene{position:absolute;inset:0;display:block;width:31px;height:16px;max-width:none;pointer-events:none;transition:opacity 180ms ease}
.theme-toggle .theme-stars{opacity:0}
.theme-toggle[aria-checked=true] .theme-clouds{opacity:0}
.theme-toggle[aria-checked=true] .theme-stars{opacity:1}
html[data-theme=dark] .brand,html[data-theme=dark] .icon-link{color:var(--ink)}
html[data-theme=dark] .masthead,html[data-theme=dark] .design-footer{border-color:var(--line)}
html[data-theme=dark] #masthead .nav>a,html[data-theme=dark] #masthead .nav-products>summary{color:var(--muted)}
html[data-theme=dark] #masthead .nav>a:hover,html[data-theme=dark] #masthead .nav-products>summary:hover{color:var(--ink);background:var(--surface)}
html[data-theme=dark] #masthead .nav-products>.product-menu{background:var(--surface);border-color:var(--line);box-shadow:0 18px 48px #0006}
html[data-theme=dark] #masthead .product-menu-list button{color:var(--ink)}
html[data-theme=dark] #masthead .product-menu-list button[aria-selected=true]{background:var(--raised)}
html[data-theme=dark] #masthead .product-menu-list button>small,html[data-theme=dark] .nv-copy p{color:var(--muted)}
html[data-theme=dark] #masthead .product-menu-previews{background:var(--page);border-color:var(--line)}
html[data-theme=dark] .nv-copy h4{color:var(--ink)}
html[data-theme=dark] :is(button,a,summary):focus-visible{outline-color:var(--accent-text)}
html[data-theme=dark] :is(.hero-workspace-peek,.hero-side-friend,.assistant-hi){filter:drop-shadow(0 1px 1px #ffffff80)}


/* Figma 2102:626: 1200 x 426 desktop composition. */
#assistant{box-sizing:border-box;display:flex;align-items:flex-start;justify-content:space-between;width:100%;padding-right:80px;gap:0;min-height:426px}
#assistant h2{margin:0;font-family:Inter,sans-serif;font-size:3.375rem;line-height:4rem;font-weight:700;letter-spacing:-0.135rem;white-space:nowrap;color:var(--ink)}
@media(max-width:1100px){#assistant{gap:40px;padding-right:70px}#assistant h2{font-size:2.75rem;line-height:3.375rem;letter-spacing:-0.11rem}}
@media(max-width:900px){#assistant{flex-direction:column;padding-right:0;gap:40px;min-height:0}}
@media(max-width:480px){#assistant h2{font-size:2.25rem;line-height:2.75rem;letter-spacing:-0.09rem}}


/* Figma qtFIu7jvSXz3t8BDx5vQMO: 2036:467, 2108:1417, 2102:685, 2102:724. */
#journal{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;gap:36px}
#journal>h2,#faqs>h2{margin:0;color:var(--ink);font-family:Inter,sans-serif;font-size:3.375rem;line-height:4rem;font-weight:700;letter-spacing:-0.135rem;text-align:center;white-space:normal}
#faqs{width:100%;gap:36px}
#closing{gap:24px;padding:0;width:100%}
#closing>h2{margin:0;font-size:2.5rem;line-height:2.5rem;font-weight:700;letter-spacing:-0.1rem;text-align:center;color:var(--ink)}
footer.design-footer{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;padding:40px max(20px,calc((100% - 1200px)/2));border:0;border-top:1px solid #f1f3f5}
footer.design-footer p{margin:0;font-size:0.875rem;line-height:1.375rem;font-weight:400;color:var(--ink)}
footer.design-footer>.fg-710{gap:2px}
html[data-theme=dark] footer.design-footer{border-color:var(--line)}
@media(min-width:1001px) and (max-width:1300px){#journal,#faqs,#closing{margin-top:40px}}
@media(min-width:701px) and (max-width:1000px){#journal,#faqs,#closing{margin-top:80px}}
@media(max-width:1000px){#journal>h2,#faqs>h2{font-size:2.625rem;line-height:3.25rem;letter-spacing:-0.105rem}}
@media(max-width:700px){#journal>h2,#faqs>h2{font-size:2.125rem;line-height:2.625rem;letter-spacing:-0.085rem}#closing>h2{font-size:2.125rem;line-height:2.5rem;letter-spacing:-0.085rem}footer.design-footer p{font-size:0.875rem;line-height:1.375rem}}


/* Figma 2102:562, with one-shot message and reward motion. */
#how{gap:36px}#how>h2{width:100%;margin:0;font:700 3.375rem/4rem Inter,sans-serif;letter-spacing:-0.135rem;text-align:center;text-decoration:none;color:var(--ink)}
@keyframes of-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}@keyframes of-icon{0%{transform:scale(.8) rotate(-10deg)}60%{transform:scale(1.1) rotate(5deg)}100%{transform:none}}@keyframes of-peer{from{opacity:0;transform:translateX(-8px) scale(.85)}to{opacity:1;transform:none}}@keyframes of-sheen{0%{translate:-130% 0;opacity:0}20%{opacity:1}80%{opacity:1}100%{translate:130% 0;opacity:0}}
@media(max-width:600px){#how>h2{font-size:2.125rem;line-height:2.625rem;letter-spacing:-0.085rem}}

/* Updated Figma loading state: 2121:743. */
@keyframes of-thinking{0%,100%{opacity:.4;transform:translateY(0)}50%{opacity:1;transform:translateY(-1.5px)}}
@keyframes of-thinking-avatar{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}

/* Product previews in the Products menu: simplified widgets on a design-pixel grid (--u) that scales with the panel, so
   each one fills the space it is given. Colours are --pv-* tokens that follow the page theme. */
body #masthead .product-menu-panel{padding:0;display:block}
body #masthead .nav-editorial{padding:0;height:100%;display:flex;flex-direction:column;justify-content:flex-start;transform:none}
body #masthead .nav-editorial .nv-copy{padding:.125rem 1.375rem 1rem}
body #masthead .nav-editorial .nv-copy h4{margin:0 0 .125rem}
body #masthead .nav-editorial .nv-copy a{color:var(--accent-text);text-decoration:none;white-space:nowrap}body #masthead .nav-editorial .nv-copy a:hover{text-decoration:underline}
body #masthead .product-menu-previews{position:relative}
.pv-size{display:none}
/* Wide screens: the menu is sized from one width, so the preview's height (a fixed share of its width) and the caption
   always fit. The switch at the corner trades that width for a larger one. */
@media (min-width:43.8125em){
body #masthead .nav-products>.product-menu{--mw:min(57.5rem,calc(100vw - 2.5rem));width:var(--mw);height:calc((var(--mw) - 17.875rem)*.6242 + 5.75rem);max-width:none;max-height:none;transition:width .34s cubic-bezier(.22,1,.36,1),height .34s cubic-bezier(.22,1,.36,1)}
body #masthead .nav-products>.product-menu.is-big{--mw:min(73.75rem,calc(100vw - 2rem),calc((100dvh - 11.875rem)*1.602 + 17.875rem))}
body #masthead .product-menu.is-big .pvb{--w:calc(var(--w0)*1.15)}
body #masthead .product-menu-list{justify-content:flex-start;gap:.125rem}
body #masthead .product-menu-list button{min-height:3.25rem;padding:.4375rem .75rem}
.pv-size{position:absolute;right:.875rem;bottom:.875rem;z-index:9;display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border-radius:50%;border:1px solid var(--line);background:var(--page);color:var(--muted);cursor:pointer;transition:color .12s ease,border-color .12s ease,transform .12s ease}
.pv-size:hover{color:var(--ink);border-color:var(--muted)}.pv-size:active{transform:scale(.94)}.pv-size:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px}
.pv-size svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.pv-size .b,.pv-size[aria-pressed=true] .a{display:none}.pv-size[aria-pressed=true] .b{display:block}
}
@media (min-width:43.8125em) and (prefers-reduced-motion:reduce){body #masthead .nav-products>.product-menu{transition:none}}
.pv{container-type:inline-size;width:100%;flex:none}
.pvb{--w:var(--w0);--h:412;--pf:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--u:calc(100cqw/var(--w));
--pv-card:#fff;--pv-ink:#2E2E2E;--pv-mid:#6B7280;--pv-dim:#9CA3AF;--pv-soft:#C9CCD1;--pv-line:#EDEEF0;--pv-line2:#E6E7EA;--pv-sub:#F6F6F7;--pv-chip:#F1F2F4;
--pv-btn:#2E2E2E;--pv-btn-h:#161616;--pv-on-btn:#fff;--pv-blue:#5E85EE;--pv-blue-bg:rgba(94,133,238,.12);--pv-green:#58B92F;--pv-green-ink:#3F7A22;--pv-green-bg:rgba(138,229,96,.18);
--pv-amber:#F0A419;--pv-amber-ink:#A9620B;--pv-amber-bg:rgba(255,186,53,.18);--pv-star:#FFBA35;--pv-bubble:#F2F2F2;--pv-seg-on:#fff;--pv-canvas:#F9F9F9;--pv-dot:#D5D5D5;--pv-field:#F7F7F8;--pv-node-sel:#5C5C5C;--pv-wire:#BBBBBE;--pv-raise:0 calc(2*var(--u)) calc(4*var(--u)) 0 rgba(0,0,0,.04);
box-sizing:border-box;position:relative;overflow:hidden;height:calc(var(--h)*100cqw/660);padding:calc(22*var(--u));display:flex;flex-direction:column;justify-content:center;gap:calc(12*var(--u));color:var(--pv-ink);font:400 calc(14*var(--u))/calc(20*var(--u)) var(--pf);text-align:left;letter-spacing:0;font-variant-numeric:tabular-nums;-webkit-text-size-adjust:none;cursor:default;-webkit-user-select:none;user-select:none}
html[data-theme=dark] .pvb{--pv-card:#222427;--pv-ink:#F4F4F5;--pv-mid:#B4B9C4;--pv-dim:#8C92A0;--pv-soft:#565A63;--pv-line:#2E3035;--pv-line2:#35383E;--pv-sub:#1B1C1F;--pv-chip:#303238;
--pv-btn:#F4F4F5;--pv-btn-h:#fff;--pv-on-btn:#17181A;--pv-blue:#86A3F5;--pv-blue-bg:rgba(134,163,245,.18);--pv-green:#8AE560;--pv-green-ink:#A6EC85;--pv-green-bg:rgba(138,229,96,.16);
--pv-amber:#FFBA35;--pv-amber-ink:#FFCB6B;--pv-amber-bg:rgba(255,186,53,.16);--pv-bubble:#303238;--pv-seg-on:#3A3D44;--pv-canvas:#17181A;--pv-dot:rgba(255,255,255,.11);--pv-field:#1B1C1F;--pv-node-sel:#B4B9C4;--pv-wire:#565A63;--pv-raise:0 calc(2*var(--u)) calc(6*var(--u)) 0 rgba(0,0,0,.4)}
.pvb *{box-sizing:border-box}.pvb :where(b){font-weight:inherit}.pvb :where(i,em,u){font-style:normal;text-decoration:none}.pvb :where(small){font-size:inherit}
.pvb [data-act]{cursor:pointer}.pvb svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}.pvb svg.f{fill:currentColor;stroke:none}
/* Shared parts */
.pv-card{background:var(--pv-card);border:1PX solid var(--pv-line);border-radius:calc(12*var(--u));transition:transform 160ms cubic-bezier(.4,0,.2,1),box-shadow 160ms ease-out,border-color 160ms ease}
.pv-eb{display:block;font:500 calc(12*var(--u))/calc(16*var(--u)) var(--pf);color:var(--pv-dim);white-space:nowrap}
.pv-ttl{display:block;font:600 calc(17*var(--u))/calc(22*var(--u)) var(--pf);letter-spacing:calc(-.2*var(--u))}.pv-ttl.lg{font:700 calc(22*var(--u))/calc(28*var(--u)) var(--pf);letter-spacing:calc(-.4*var(--u))}
.pv-cap{display:block;font:400 calc(13*var(--u))/calc(18*var(--u)) var(--pf);color:var(--pv-mid)}.pv-cap b{font-weight:600;color:var(--pv-ink)}
.pv-num{display:block;font:700 calc(40*var(--u))/calc(44*var(--u)) var(--pf);letter-spacing:calc(-1.4*var(--u));white-space:nowrap}.pv-num small{font:600 calc(18*var(--u))/1 var(--pf);letter-spacing:calc(-.3*var(--u));color:var(--pv-dim)}
.pv-num.xl{font:700 calc(50*var(--u))/calc(54*var(--u)) var(--pf);letter-spacing:calc(-2*var(--u))}.pv-num.sm{font:700 calc(26*var(--u))/calc(30*var(--u)) var(--pf);letter-spacing:calc(-.8*var(--u))}.pv-num.blue{color:var(--pv-blue)}
.pv-name{display:flex;flex-direction:column;gap:calc(2*var(--u));min-width:0;flex:1}
.pv-head{display:flex;align-items:center;gap:calc(12*var(--u))}
.pv-chip{display:inline-flex;align-items:center;gap:calc(6*var(--u));height:calc(26*var(--u));padding:0 calc(11*var(--u));border-radius:calc(100*var(--u));background:var(--pv-chip);color:var(--pv-mid);font:500 calc(12*var(--u))/calc(26*var(--u)) var(--pf);white-space:nowrap;flex:none;transition:background 160ms ease,color 160ms ease}
.pv-chip>i{width:calc(6*var(--u));height:calc(6*var(--u));border-radius:50%;background:currentColor;flex:none}
.pv-chip.green{background:var(--pv-green-bg);color:var(--pv-green-ink)}.pv-chip.blue{background:var(--pv-blue-bg);color:var(--pv-blue)}.pv-chip.amber{background:var(--pv-amber-bg);color:var(--pv-amber-ink)}
.pv-btn{display:inline-flex;align-items:center;justify-content:center;height:calc(36*var(--u));padding:0 calc(16*var(--u));border-radius:calc(100*var(--u));background:var(--pv-btn);color:var(--pv-on-btn);font:500 calc(14*var(--u))/calc(36*var(--u)) var(--pf);white-space:nowrap;flex:none;border:1PX solid transparent;transition:background 100ms ease,color 160ms ease,transform 140ms ease,border-color 160ms ease}
.pv-btn:hover{background:var(--pv-btn-h)}.pv-btn:active{transform:scale(.97)}.pv-btn.wide{width:100%}
.pv-btn>span:last-child:not(:only-child){display:none}
.pv-btn.sec{background:var(--pv-card);color:var(--pv-ink);border-color:var(--pv-line2)}.pv-btn.sec:hover{background:var(--pv-chip)}
.pv-btn.is-done,.is-wired .pv-btn,.is-granted .pv-btn{background:var(--pv-chip);color:var(--pv-ink);border-color:var(--pv-line2)}
.is-paused .pv-btn.sec{background:var(--pv-btn);color:var(--pv-on-btn);border-color:transparent}.is-paused .pv-btn.sec:hover{background:var(--pv-btn-h)}
.pv-btn.is-done>span:first-child:not(:only-child),.is-wired .pv-btn>span:first-child,.is-granted .pv-btn>span:first-child,.is-paused .pv-btn>span:first-child{display:none}
.pv-btn.is-done>span:last-child,.is-wired .pv-btn>span:last-child,.is-granted .pv-btn>span:last-child,.is-paused .pv-btn>span:last-child{display:inline}
.pv-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;width:calc(40*var(--u));height:calc(40*var(--u));border-radius:calc(10*var(--u));background:var(--pv-card);border:1PX solid var(--pv-line2);color:var(--pv-mid);flex:none;transition:background 160ms ease,color 160ms ease,border-color 160ms ease}
.pv-icon svg{width:calc(20*var(--u));height:calc(20*var(--u))}.pv-icon.lg{width:calc(44*var(--u));height:calc(44*var(--u))}.pv-icon.lg svg{width:calc(22*var(--u));height:calc(22*var(--u))}
.pv-icon .b{position:absolute;opacity:0;transform:scale(.5)}.pv-icon .a,.pv-icon .b{transition:opacity 200ms ease,transform 260ms cubic-bezier(.34,1.45,.64,1)}
.pv-tile{background:var(--pv-sub);border-radius:calc(10*var(--u));padding:calc(14*var(--u)) calc(16*var(--u));display:flex;flex-direction:column;gap:calc(4*var(--u));min-width:0;transition:background 160ms ease}
.pv-bar{display:block;height:calc(8*var(--u));border-radius:calc(100*var(--u));background:var(--pv-line2);overflow:hidden}
.pv-bar>i{display:block;height:100%;border-radius:inherit;background:var(--pv-blue);transition:width 500ms cubic-bezier(.22,1,.36,1)}
/* Segmented switch (the design system's pill toggle: only the active item lifts) */
.pv-seg{display:inline-flex;align-self:flex-start;gap:calc(2*var(--u));padding:calc(3*var(--u));border-radius:calc(100*var(--u));background:var(--pv-chip);flex:none}
.pv-seg>span{height:calc(26*var(--u));padding:0 calc(13*var(--u));border-radius:calc(100*var(--u));font:500 calc(12.5*var(--u))/calc(26*var(--u)) var(--pf);color:var(--pv-mid);white-space:nowrap;cursor:pointer;transition:background 120ms ease,color 120ms ease}
.pv-seg>span:hover{color:var(--pv-ink)}.pv-seg>span.on{background:var(--pv-seg-on);color:var(--pv-ink);box-shadow:0 calc(1*var(--u)) calc(3*var(--u)) rgba(0,0,0,.10)}
.pv-seg.sm>span{height:calc(22*var(--u));line-height:calc(22*var(--u));padding:0 calc(11*var(--u));font-size:calc(12*var(--u))}
.pv-price{display:flex;align-items:baseline;gap:calc(6*var(--u))}.pv-price small{font:400 calc(12*var(--u))/calc(16*var(--u)) var(--pf);color:var(--pv-dim);white-space:nowrap}
/* Opening: cards rise in order, meters fill. `backwards` only, so nothing is left transformed afterwards. */
@keyframes pv-rise{from{opacity:0;transform:translateY(calc(10*var(--u)))}}
@keyframes pv-grow{from{transform:scaleX(0)}}
@keyframes pv-pop{40%{transform:scale(1.12)}}
/* Icons: each shape has pathLength=1, so one dash covers it and the offset draws it. A second name replays the stroke on a state change. */
@keyframes pv-draw{0%{stroke-dashoffset:1;opacity:0}8%{opacity:1}100%{stroke-dashoffset:0}}
@keyframes pv-tick{0%{stroke-dashoffset:1;opacity:0}8%{opacity:1}100%{stroke-dashoffset:0}}
@keyframes pv-twinkle{0%,100%{transform:none}50%{transform:scale(1.22) rotate(90deg)}}
.pvb svg:not(.f)>*{stroke-dasharray:1;animation:pv-draw .7s cubic-bezier(.22,1,.36,1) .3s backwards}
.pvb svg:not(.f)>:nth-child(2){animation-delay:.42s}.pvb svg:not(.f)>:nth-child(3){animation-delay:.54s}.pvb svg:not(.f)>:nth-child(4){animation-delay:.66s}
.pvb svg.f{animation:pv-rise .5s cubic-bezier(.34,1.45,.64,1) .3s backwards}
.pvb>.pv-card,.pv-pair>*,.pv-outs>*{animation:pv-rise .45s cubic-bezier(.22,1,.36,1) backwards}
.pvb>.pv-card:nth-child(2),.pv-pair>:nth-child(2),.pv-outs>:nth-child(1){animation-delay:60ms}.pv-outs>:nth-child(2){animation-delay:120ms}
.pv-fill{transform-origin:0 50%;animation:pv-grow .9s cubic-bezier(.22,1,.36,1) .3s backwards}
.pv-bump{animation:pv-pop .32s cubic-bezier(.34,1.45,.64,1)}
/* Campaign: the pipeline canvas - dot grid, node cards, wires with a packet moving along them, the budget strip */
@keyframes pv-live{50%{opacity:.3}}
@keyframes pk-r{0%{opacity:0;transform:none}2%,14%{opacity:1}16%,100%{opacity:0;transform:translateX(calc(28*var(--u)))}}
@keyframes pk-l{0%{opacity:0;transform:none}2%,14%{opacity:1}16%,100%{opacity:0;transform:translateX(calc(-28*var(--u)))}}
@keyframes pk-d{0%{opacity:0;transform:none}2%,14%{opacity:1}16%,100%{opacity:0;transform:translateY(calc(28*var(--u)))}}
.pvb-campaign{gap:calc(16*var(--u));padding:calc(20*var(--u));background-color:var(--pv-canvas);background-image:radial-gradient(var(--pv-dot) calc(1*var(--u)),transparent calc(1.2*var(--u)));background-size:calc(10*var(--u)) calc(10*var(--u))}
.pv-cbar{display:flex;align-items:center;gap:calc(8*var(--u));flex:none;animation:pv-rise .4s cubic-bezier(.22,1,.36,1) backwards}.pv-cbar .pv-ttl{margin-right:calc(2*var(--u))}
.pv-cbar .pv-chip.green>i{animation:pv-live 1.6s ease-in-out infinite}.is-paused .pv-cbar .pv-chip>i{animation:none}
.pv-count{margin-left:auto;font:400 calc(13*var(--u))/calc(20*var(--u)) var(--pf);color:var(--pv-mid);white-space:nowrap}.pv-count b{font-weight:700;color:var(--pv-ink)}
.pv-btn.sm{height:calc(30*var(--u));padding:0 calc(13*var(--u));font:500 calc(13*var(--u))/calc(30*var(--u)) var(--pf)}
.pv-canvas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(34*var(--u));flex:none}
.pv-nd{position:relative;display:flex;flex-direction:column;gap:calc(8*var(--u));padding:calc(10*var(--u));background:var(--pv-card);border:calc(1.5*var(--u)) solid var(--pv-line2);border-radius:calc(14*var(--u));transition:border-color 160ms ease,background 200ms ease;animation:pv-rise .42s cubic-bezier(.22,1,.36,1) calc(.08s + var(--k)*.09s) backwards}
.pv-nd:hover{border-color:var(--pv-soft)}.pv-nd.sel,.pv-nd.sel:hover{border-color:var(--pv-node-sel)}
.pv-nd-h{display:flex;align-items:center;gap:calc(8*var(--u))}.pv-nd-h b{font:700 calc(14*var(--u))/calc(22*var(--u)) var(--pf);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-nd-i{display:inline-flex;align-items:center;justify-content:center;width:calc(18*var(--u));height:calc(18*var(--u));border-radius:calc(6*var(--u));background:var(--pv-line);flex:none}.pv-nd-i svg{width:calc(13*var(--u));height:calc(13*var(--u));stroke-width:2}
.pv-nd svg:not(.f)>*{animation-delay:calc(.3s + var(--k)*.09s)}
.pv-nd-f{display:flex;align-items:center;justify-content:space-between;gap:calc(6*var(--u));min-width:0;font:400 calc(13*var(--u))/calc(20*var(--u)) var(--pf);color:var(--pv-dim);background:var(--pv-field);border:1PX solid var(--pv-line);border-radius:calc(8*var(--u));padding:calc(4*var(--u)) calc(10*var(--u));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-nd-f.pick{cursor:pointer;transition:border-color 120ms ease}.pv-nd-f.pick:hover{border-color:var(--pv-soft)}.pv-nd-f.pick b{color:var(--pv-ink);font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis}
.pv-nd-f.pick svg{width:calc(14*var(--u));height:calc(14*var(--u));color:var(--pv-dim);transition:transform 160ms ease,color 120ms ease}.pv-nd-f.pick:hover svg{color:var(--pv-ink);transform:translateY(calc(2*var(--u)))}
.pv-nd-c{display:flex;flex-wrap:wrap;gap:calc(6*var(--u));min-height:calc(26*var(--u))}
.pv-ck{display:inline-flex;align-items:center;gap:calc(4*var(--u));padding:calc(4*var(--u)) calc(7*var(--u));border-radius:calc(6*var(--u));border:1PX solid var(--pv-line);background:var(--pv-card);font:400 calc(12*var(--u))/calc(16*var(--u)) var(--pf);color:var(--pv-dim)}
/* wires: where each card's input comes from; the packet shows work moving through, in step order */
.pv-wire{position:absolute;background:var(--pv-wire)}.pv-wire::after{content:'';position:absolute;border:calc(3*var(--u)) solid transparent}
.pv-wire.w-l{right:calc(100% + calc(1.5*var(--u)));top:50%;width:calc(34*var(--u));height:1PX}.pv-wire.w-l::after{right:0;top:calc(-3*var(--u));border-right:0;border-left:calc(6*var(--u)) solid var(--pv-dim)}
.pv-wire.w-r{left:calc(100% + calc(1.5*var(--u)));top:50%;width:calc(34*var(--u));height:1PX}.pv-wire.w-r::after{left:0;top:calc(-3*var(--u));border-left:0;border-right:calc(6*var(--u)) solid var(--pv-dim)}
.pv-wire.w-t{bottom:calc(100% + calc(1.5*var(--u)));left:50%;height:calc(34*var(--u));width:1PX}.pv-wire.w-t::after{bottom:0;left:calc(-3*var(--u));border-bottom:0;border-top:calc(6*var(--u)) solid var(--pv-dim)}
.pv-wire>u{position:absolute;width:calc(6*var(--u));height:calc(6*var(--u));border-radius:50%;background:var(--pv-blue);opacity:0;animation:pk-r 3.6s linear calc(1.2s + var(--k)*.55s) infinite}
.pv-wire.w-l>u{left:0;top:calc(-3*var(--u))}.pv-wire.w-r>u{right:0;top:calc(-3*var(--u));animation-name:pk-l}.pv-wire.w-t>u{top:0;left:calc(-3*var(--u));animation-name:pk-d}
.is-paused .pv-wire>u{animation:none}
/* the reward: a coin on the card's corner that grows with the amount, a label, and the stepper */
.pv-sig{position:absolute;left:calc(-10*var(--u));top:calc(-11*var(--u));z-index:2;display:inline-flex;align-items:center;justify-content:center;width:calc(22*var(--u));height:calc(22*var(--u));border-radius:50%;background:var(--pv-card);border:calc(1.5*var(--u)) solid var(--pv-node-sel);transform:scale(var(--sig,.8));transition:transform 320ms cubic-bezier(.34,1.45,.64,1)}
.pv-sig svg{width:calc(13*var(--u));height:calc(13*var(--u));stroke-width:2}
.pv-tag{position:absolute;right:calc(10*var(--u));top:calc(-11*var(--u));z-index:2;height:calc(20*var(--u));padding:0 calc(8*var(--u));border-radius:calc(100*var(--u));background:var(--pv-blue);color:#fff;font:500 calc(11*var(--u))/calc(20*var(--u)) var(--pf);white-space:nowrap}
html[data-theme=dark] .pv-tag{color:#17181A}
.pv-stepper{display:flex;align-items:center;gap:calc(6*var(--u));flex:1;padding:calc(2*var(--u));border-radius:calc(100*var(--u));background:var(--pv-blue-bg);border:1PX solid var(--pv-blue)}
.pv-stepper>b{flex:1;text-align:center;font:600 calc(13.5*var(--u))/calc(22*var(--u)) var(--pf);white-space:nowrap}
.pv-stepper>i{display:inline-flex;align-items:center;justify-content:center;width:calc(22*var(--u));height:calc(22*var(--u));border-radius:50%;background:var(--pv-card);color:var(--pv-ink);cursor:pointer;transition:background 120ms ease,transform 120ms ease}
.pv-stepper>i:hover{background:var(--pv-blue);color:#fff}.pv-stepper>i:active{transform:scale(.88)}.pv-stepper>i svg{width:calc(12*var(--u));height:calc(12*var(--u));stroke-width:2.2}
/* a step can be taken out and put back */
.pv-nd-x{position:absolute;right:calc(8*var(--u));top:calc(9*var(--u));display:inline-flex;align-items:center;justify-content:center;width:calc(22*var(--u));height:calc(22*var(--u));border-radius:calc(6*var(--u));color:var(--pv-dim);opacity:0;cursor:pointer;transition:opacity 120ms ease,background 120ms ease,color 120ms ease}
.pv-nd:hover .pv-nd-x{opacity:1}.pv-nd-x:hover{background:var(--pv-line);color:var(--pv-red,#EC7979)}.pv-nd-x svg{width:calc(13*var(--u));height:calc(13*var(--u));stroke-width:2}
.pv-nd-add{display:none;position:absolute;inset:0;align-items:center;justify-content:center;gap:calc(6*var(--u));font:500 calc(13*var(--u))/calc(20*var(--u)) var(--pf);color:var(--pv-mid);cursor:pointer;transition:color 120ms ease}.pv-nd-add svg{width:calc(14*var(--u));height:calc(14*var(--u));stroke-width:2}.pv-nd-add:hover{color:var(--pv-ink)}
.pv-nd.off{background:transparent;border-style:dashed;border-color:var(--pv-soft)}.pv-nd.off>:not(.pv-wire):not(.pv-nd-add){visibility:hidden}.pv-nd.off>.pv-nd-add{display:flex}
/* budget strip */
.pv-budget{align-self:flex-start;display:inline-flex;align-items:center;gap:calc(8*var(--u));min-height:calc(36*var(--u));padding:calc(3*var(--u)) calc(4*var(--u)) calc(3*var(--u)) calc(14*var(--u));border-radius:calc(100*var(--u));background:var(--pv-card);box-shadow:var(--pv-raise);font:400 calc(13*var(--u))/calc(18*var(--u)) var(--pf);color:var(--pv-mid);white-space:nowrap;animation:pv-rise .42s cubic-bezier(.22,1,.36,1) .7s backwards}
.pv-budget b{font-weight:700;color:var(--pv-ink);transition:color 160ms ease}.pv-budget>i{color:var(--pv-soft)}.pv-budget>span:not(.pv-btn):last-of-type{padding-right:calc(10*var(--u))}
.pv-budget .pv-btn{display:none;gap:calc(4*var(--u))}.is-over .pv-budget .pv-btn{display:inline-flex}.is-over .pv-budget [data-k=proj]{color:var(--pv-amber-ink)}.is-over .pv-budget>span:not(.pv-btn):last-of-type{padding-right:0}
/* Team & Guild */
.pv-guild{padding:calc(20*var(--u));display:flex;flex-direction:column;gap:calc(16*var(--u))}
.pv-where{display:flex;align-items:center;gap:calc(4*var(--u))}.pv-where svg{width:calc(14*var(--u));height:calc(14*var(--u))}
.pv-duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:calc(12*var(--u))}
.pv-duo .pv-tile:hover{background:var(--pv-chip)}.pv-duo .pv-bar{margin-top:calc(6*var(--u))}.pv-guild:hover .pv-icon{color:var(--pv-ink)}
.pv-foot{display:flex;align-items:center;justify-content:space-between;gap:calc(12*var(--u))}
.pv-stack{display:flex;align-items:center;padding-left:calc(8*var(--u))}
.pv-av{position:relative;display:inline-flex;align-items:center;justify-content:center;width:calc(34*var(--u));height:calc(34*var(--u));border-radius:50%;background:var(--pv-chip);border:calc(2*var(--u)) solid var(--pv-card);margin-left:calc(-8*var(--u));color:var(--pv-mid);font:600 calc(12*var(--u))/1 var(--pf);transition:transform 180ms cubic-bezier(.34,1.45,.64,1),color 120ms ease}
.pv-av:hover{transform:translateY(calc(-4*var(--u)));color:var(--pv-ink);z-index:2}
.pv-av.more{color:var(--pv-dim)}
.pv-av[data-tip]::after{content:attr(data-tip);position:absolute;bottom:calc(100% + calc(8*var(--u)));left:50%;width:max-content;background:var(--pv-btn);color:var(--pv-on-btn);font:500 calc(12*var(--u))/calc(16*var(--u)) var(--pf);padding:calc(5*var(--u)) calc(9*var(--u));border-radius:calc(8*var(--u));opacity:0;transform:translate(-50%,calc(4*var(--u)));transition:opacity 120ms ease,transform 160ms ease;pointer-events:none}
.pv-av[data-tip]:hover::after{opacity:1;transform:translate(-50%,0)}.pv-av:first-child::after{left:0;transform:translate(0,calc(4*var(--u)))}.pv-av:first-child:hover::after{transform:none}
/* Reputation */
.pv-rep{padding:calc(22*var(--u));display:flex;flex-direction:column;gap:calc(22*var(--u))}
.pv-rep-top{display:flex;align-items:stretch;justify-content:space-between;gap:calc(16*var(--u))}
.pv-score{display:flex;flex-direction:column;align-items:flex-start;gap:calc(6*var(--u));min-width:0}
.pv-mult{min-width:calc(186*var(--u));align-items:flex-end;text-align:right;justify-content:center;padding:calc(14*var(--u)) calc(18*var(--u))}
.pv-ladder{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:calc(6*var(--u))}
.pv-rung{display:flex;flex-direction:column;gap:calc(2*var(--u));min-width:0;cursor:pointer;font:400 calc(12*var(--u))/calc(16*var(--u)) var(--pf);color:var(--pv-dim);transition:color 140ms ease,transform 180ms cubic-bezier(.22,1,.36,1)}
.pv-rung>i{display:block;height:calc(8*var(--u));border-radius:calc(100*var(--u));background:var(--pv-line2);margin-bottom:calc(8*var(--u));overflow:hidden;transition:background 140ms ease,transform 180ms ease}
.pv-rung.done>i{background:var(--pv-blue)}.pv-rung>i>u{display:block;height:100%;border-radius:inherit;background:var(--pv-blue)}
.pv-rung b{font-weight:600;color:var(--pv-mid);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color 140ms ease}.pv-rung.on b{color:var(--pv-ink)}
.pv-rung:hover{transform:translateY(calc(-2*var(--u)))}.pv-rung:hover b{color:var(--pv-ink)}.pv-rung:hover>i{transform:scaleY(1.5)}.pv-rung:not(.done):not(.on):hover>i{background:var(--pv-blue-bg)}
/* Academy: three authored elements, then what they unlock */
.pv-course{padding:calc(18*var(--u));display:flex;flex-direction:column;gap:calc(14*var(--u))}.pv-course:hover>.pv-head .pv-icon{color:var(--pv-ink)}
.pv-mods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(8*var(--u))}
.pv-mod{position:relative;display:flex;flex-direction:column;gap:calc(2*var(--u));padding:calc(12*var(--u));border-radius:calc(10*var(--u));background:var(--pv-sub);border:1PX solid transparent;color:var(--pv-dim);transition:background 200ms ease,border-color 200ms ease,color 200ms ease}
.pv-mi{display:inline-flex;margin-bottom:calc(8*var(--u))}.pv-mi svg{width:calc(20*var(--u));height:calc(20*var(--u))}
.pv-mod b{font:600 calc(14*var(--u))/calc(18*var(--u)) var(--pf);color:var(--pv-mid);transition:color 200ms ease}.pv-mod small{font:400 calc(12*var(--u))/calc(16*var(--u)) var(--pf);transition:color 200ms ease}
.pv-mod .ok{position:absolute;top:calc(13*var(--u));right:calc(12*var(--u));width:calc(16*var(--u));height:calc(16*var(--u));stroke-width:2;opacity:0}
.pv-mod:hover{background:var(--pv-chip);color:var(--pv-mid)}.pv-mod:hover b{color:var(--pv-ink)}
.pv-mod.on,.pv-mod.on:hover{background:var(--pv-blue-bg);border-color:var(--pv-blue);color:var(--pv-blue)}.pv-mod.on b{color:var(--pv-ink)}
.pv-mod.done,.pv-mod.done:hover{color:var(--pv-green-ink)}.pv-mod.done b{color:var(--pv-ink)}.pv-mod.done .ok{opacity:1}.pv-mod.done .ok>*{animation:pv-tick .5s cubic-bezier(.22,1,.36,1) backwards}
.pv-outs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:calc(12*var(--u))}
.pv-out{padding:calc(14*var(--u));display:flex;align-items:center;gap:calc(12*var(--u));cursor:pointer}.pv-out .pv-ttl{font-size:calc(15.5*var(--u));line-height:calc(20*var(--u));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pv-out:hover{transform:translateY(calc(-2*var(--u)));box-shadow:var(--pv-raise);border-color:var(--pv-soft)}.pv-out:hover .pv-icon{color:var(--pv-ink)}
.is-passed .pv-out{border-color:var(--pv-green)}.is-passed .pv-out .pv-icon,.is-passed .pv-out:hover .pv-icon{background:var(--pv-green-bg);border-color:transparent;color:var(--pv-green-ink)}
.is-passed .pv-out .pv-icon .a{opacity:0;transform:scale(.5)}.is-passed .pv-out .pv-icon .b{opacity:1;transform:none}.is-passed .pv-out .pv-icon .b>*{animation:pv-tick .5s cubic-bezier(.22,1,.36,1) .1s backwards}
.is-passed .pv-out:nth-child(2){transition-delay:140ms}.is-passed .pv-out:nth-child(2) .pv-icon{transition-delay:140ms}
/* Agents */
.pv-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:calc(12*var(--u));flex:1;min-height:0}
.pv-agent{padding:calc(18*var(--u));display:flex;flex-direction:column;gap:calc(10*var(--u));cursor:pointer}
.pv-agent:hover,.pv-listing:hover{transform:translateY(calc(-2*var(--u)));box-shadow:var(--pv-raise);border-color:var(--pv-soft)}
.pv-agent:hover .pv-icon,.pv-listing:hover .pv-icon{background:var(--pv-sub);color:var(--pv-ink)}
.pv-atop{display:flex;align-items:flex-start;justify-content:space-between}
.pv-agent .pv-name{flex:none}.pv-agent .pv-cap{flex:1}
.pv-star{width:calc(20*var(--u));height:calc(20*var(--u));stroke:var(--pv-dim);transition:transform 180ms cubic-bezier(.34,1.45,.64,1),stroke 120ms ease,fill 120ms ease}
.pv-star:hover{stroke:var(--pv-star);transform:scale(1.18)}.pv-star:active{transform:scale(.88)}.is-fav .pv-star{fill:var(--pv-star);stroke:var(--pv-star)}
.is-wired.pv-agent{border-color:var(--pv-green)}.is-wired .pv-icon,.is-wired.pv-agent:hover .pv-icon{background:var(--pv-green-bg);border-color:transparent;color:var(--pv-green-ink)}
/* Lineage + Marketplace */
.pv-trace{padding:calc(18*var(--u)) calc(20*var(--u)) calc(16*var(--u));display:flex;flex-direction:column;gap:calc(18*var(--u))}
.pv-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.pv-step{position:relative;display:flex;flex-direction:column;align-items:center;gap:calc(8*var(--u));cursor:pointer;font:500 calc(12*var(--u))/calc(16*var(--u)) var(--pf);color:var(--pv-dim);transition:color 140ms ease}
.pv-step::before{content:'';position:absolute;top:calc(16*var(--u));right:50%;width:100%;height:calc(2*var(--u));background:var(--pv-line2);transform:translateY(-50%)}
.pv-step:first-child::before{display:none}.pv-step.done::before{background:var(--pv-ink)}
@keyframes pv-node{from{opacity:0;transform:scale(.4)}}@keyframes pv-line{from{transform:translateY(-50%) scaleX(0)}}@keyframes pv-halo{50%{box-shadow:0 0 0 calc(9*var(--u)) var(--pv-green-bg)}}
.pv-step::before{transform-origin:0 50%;animation:pv-line .32s ease-out calc(.1s + var(--i)*.22s) backwards}
.pv-step>b{animation:pv-rise .4s cubic-bezier(.22,1,.36,1) calc(.4s + var(--i)*.22s) backwards}
.pv-step svg:not(.f)>*{animation-delay:calc(.45s + var(--i)*.22s)}.pv-step svg:not(.f)>:nth-child(n+2){animation-delay:calc(.57s + var(--i)*.22s)}
.pv-step>i{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:calc(32*var(--u));height:calc(32*var(--u));border-radius:50%;background:var(--pv-card);border:calc(1.5*var(--u)) solid var(--pv-soft);color:var(--pv-dim);transition:transform 200ms cubic-bezier(.34,1.45,.64,1),box-shadow 160ms ease,background 160ms ease;animation:pv-node .45s cubic-bezier(.34,1.45,.64,1) calc(.25s + var(--i)*.22s) backwards}
.pv-step>i svg{width:calc(17*var(--u));height:calc(17*var(--u))}.pv-step.done>i{border-color:var(--pv-ink);color:var(--pv-ink)}
.pv-step.on>i{box-shadow:0 0 0 calc(5*var(--u)) var(--pv-green-bg);animation:pv-node .45s cubic-bezier(.34,1.45,.64,1) calc(.25s + var(--i)*.22s) backwards,pv-halo 2.8s ease-in-out 2.2s infinite}.pv-step.done b{color:var(--pv-ink)}
.pv-step:hover{color:var(--pv-ink)}.pv-step:hover>i{transform:scale(1.15);background:var(--pv-sub)}
.pv-listing{padding:calc(10*var(--u)) calc(18*var(--u)) calc(14*var(--u));display:flex;flex-direction:column;gap:calc(10*var(--u))}
/* real rows of the published file */
.pv-tbl{display:flex;flex-direction:column}
.pv-tr{display:grid;grid-template-columns:calc(108*var(--u)) calc(218*var(--u)) calc(54*var(--u)) minmax(0,1fr);gap:calc(14*var(--u));align-items:center;min-height:calc(29*var(--u));margin:0 calc(-8*var(--u));padding:0 calc(8*var(--u));border-radius:calc(8*var(--u));font:400 calc(13*var(--u))/calc(18*var(--u)) var(--pf);color:var(--pv-mid);transition:background 120ms ease}
.pv-tr>span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pv-tr>span:nth-child(3){text-align:right}
.pv-tr.h{min-height:calc(24*var(--u));font-size:calc(12*var(--u));color:var(--pv-dim)}.pv-tr:not(.h){box-shadow:0 -1PX 0 var(--pv-line);animation:pv-rise .4s cubic-bezier(.22,1,.36,1) calc(.25s + var(--i)*.08s) backwards}
.pv-tr:not(.h):hover{background:var(--pv-sub)}.pv-tr:not(.h)>span:first-child{color:var(--pv-ink)}.pv-tr b{font-weight:600;color:var(--pv-ink)}
.pv-terms{display:flex;align-items:center;gap:calc(12*var(--u))}.pv-terms .pv-cap{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.is-granted .pv-listing{border-color:var(--pv-green)}
/* Compliance */
.pv-agree{padding:calc(16*var(--u)) calc(18*var(--u));display:flex;flex-direction:column;gap:calc(12*var(--u))}.pv-agree:hover>.pv-head .pv-icon{color:var(--pv-ink)}
.pv-ev{display:flex;align-items:center;gap:calc(6*var(--u));font:400 calc(12*var(--u))/calc(16*var(--u)) var(--pf);color:var(--pv-dim)}.pv-ev>b{font-weight:500;margin-right:calc(4*var(--u))}
.pv-ev>span{display:inline-flex;align-items:center;gap:calc(5*var(--u));padding:calc(4*var(--u)) calc(8*var(--u)) calc(4*var(--u)) calc(7*var(--u));border-radius:calc(6*var(--u));border:1PX solid var(--pv-line2);color:var(--pv-mid);white-space:nowrap;transition:background 220ms ease,color 220ms ease,border-color 220ms ease}
.pv-ev i{position:relative;display:inline-flex;align-items:center;justify-content:center;width:calc(11*var(--u));height:calc(11*var(--u));flex:none}
.pv-ev i::before{content:'';width:calc(5*var(--u));height:calc(5*var(--u));border-radius:50%;border:calc(1.5*var(--u)) solid currentColor;opacity:.55;transition:opacity 200ms ease}
.pv-ev .ok{position:absolute;inset:0;width:calc(11*var(--u));height:calc(11*var(--u));stroke-width:2.4;opacity:0;transition:opacity 200ms ease}
.is-signing .pv-ev>span{border-color:var(--pv-blue);color:var(--pv-blue)}.is-signed .pv-ev>span{background:var(--pv-green-bg);border-color:transparent;color:var(--pv-green-ink)}.is-signed .pv-ev .ok{opacity:1}.is-signed .pv-ev i::before{opacity:0}.is-signed .pv-ev .ok>*{animation:pv-tick .45s cubic-bezier(.22,1,.36,1) backwards}
.is-signing .pv-ev>span:nth-child(3),.is-signed .pv-ev>span:nth-child(3){transition-delay:120ms}.is-signing .pv-ev>span:nth-child(4),.is-signed .pv-ev>span:nth-child(4){transition-delay:240ms}
.is-signing .pv-ev>span:nth-child(5),.is-signed .pv-ev>span:nth-child(5){transition-delay:360ms}.is-signing .pv-ev>span:nth-child(6),.is-signed .pv-ev>span:nth-child(6){transition-delay:480ms}
.pv-signrow{display:flex;align-items:center;gap:calc(10*var(--u))}.pv-signrow .pv-cap{flex:1;min-width:0}.is-signed .pv-agree{border-color:var(--pv-green)}
.pvb-compliance .pv-trace{padding:calc(14*var(--u)) calc(18*var(--u)) calc(14*var(--u));gap:calc(14*var(--u))}.pv-steps.three{grid-template-columns:repeat(3,minmax(0,1fr))}
/* DSA + MCP: example chat. The lines arrive in order: question, typing, answer, plan rows, then the launch row. */
@keyframes pv-typing{0%{opacity:0;transform:translateY(calc(6*var(--u)))}14%,86%{opacity:1;transform:none}100%{opacity:0}}
@keyframes pv-dot{0%,60%,100%{transform:none;opacity:.35}30%{transform:translateY(calc(-3*var(--u)));opacity:1}}
@keyframes pv-ring{from{opacity:.7;transform:scale(1)}to{opacity:0;transform:scale(1.18,1.5)}}
.pv-chat{padding:calc(16*var(--u)) calc(18*var(--u));display:flex;flex-direction:column;gap:calc(12*var(--u))}
.pv-chead{display:flex;align-items:center;justify-content:space-between;gap:calc(12*var(--u))}
.pv-ask{display:flex;flex-direction:column;justify-content:center;min-height:calc(38*var(--u))}
.pvb[data-via=chat] .pv-ask>:not([data-via=chat]),.pvb[data-via=cli] .pv-ask>:not([data-via=cli]),.pvb[data-via=mcp] .pv-ask>:not([data-via=mcp]){display:none}
.pv-cmd{display:flex;align-items:center;gap:calc(8*var(--u));align-self:flex-start;max-width:100%;padding:calc(9*var(--u)) calc(14*var(--u));border-radius:calc(10*var(--u));background:var(--pv-sub);font:400 calc(13.5*var(--u))/calc(20*var(--u)) var(--pf);white-space:nowrap;animation:pv-rise .4s cubic-bezier(.22,1,.36,1) .05s backwards}
.pv-cmd>i{color:var(--pv-dim)}.pv-cmd>svg{width:calc(16*var(--u));height:calc(16*var(--u));color:var(--pv-mid)}.pv-cmd b{font-weight:600}.pv-cmd small{color:var(--pv-dim);margin-left:calc(8*var(--u))}
.pv-eg{display:flex;align-items:center;gap:calc(6*var(--u));animation:pv-rise .4s cubic-bezier(.22,1,.36,1) backwards}.pv-eg svg{width:calc(13*var(--u));height:calc(13*var(--u));color:var(--pv-blue);animation:pv-twinkle 3.4s ease-in-out 1s infinite}
.pv-msg{display:flex}.pv-msg.me{justify-content:flex-end;animation:pv-rise .4s cubic-bezier(.22,1,.36,1) .15s backwards}
.pv-bub{max-width:80%;padding:calc(9*var(--u)) calc(15*var(--u));border-radius:calc(18*var(--u));background:var(--pv-bubble);font:400 calc(14*var(--u))/calc(20*var(--u)) var(--pf)}
.pv-msg.ai{position:relative}
.pv-say{flex:1;min-width:0;display:flex;flex-direction:column;gap:calc(6*var(--u));font:400 calc(14*var(--u))/calc(20*var(--u)) var(--pf);animation:pv-rise .45s cubic-bezier(.22,1,.36,1) 1.8s backwards}
.pv-typing{position:absolute;left:0;top:calc(6*var(--u));display:inline-flex;gap:calc(4*var(--u));opacity:0;animation:pv-typing 1.15s linear .7s both;pointer-events:none}
.pv-typing i{width:calc(6*var(--u));height:calc(6*var(--u));border-radius:50%;background:var(--pv-dim);animation:pv-dot .9s ease-in-out infinite}.pv-typing i:nth-child(2){animation-delay:.15s}.pv-typing i:nth-child(3){animation-delay:.3s}
.pv-plan{display:flex;flex-direction:column;gap:calc(2*var(--u));margin:0 calc(-6*var(--u))}
.pv-plan>div{display:flex;align-items:center;gap:calc(10*var(--u));padding:calc(5*var(--u)) calc(6*var(--u));border-radius:calc(11*var(--u));animation:pv-rise .4s cubic-bezier(.22,1,.36,1) backwards;transition:background 120ms ease}
.pv-plan>div:nth-child(1){animation-delay:2.1s}.pv-plan>div:nth-child(2){animation-delay:2.35s}.pv-plan>div:nth-child(3){animation-delay:2.6s}
.pv-plan>div:nth-child(1) .a>*{animation-delay:2.25s}.pv-plan>div:nth-child(2) .a>*{animation-delay:2.5s}.pv-plan>div:nth-child(3) .a>*{animation-delay:2.75s}
.is-live .pv-pi .b>*{animation:pv-tick .45s cubic-bezier(.22,1,.36,1) .05s backwards}.is-live .pv-plan>div:nth-child(2) .pv-pi .b>*{animation-delay:.31s}.is-live .pv-plan>div:nth-child(3) .pv-pi .b>*{animation-delay:.57s}
.pv-plan>div:hover{background:var(--pv-sub)}.pv-plan>div:hover .pv-pi{color:var(--pv-ink)}
.pv-pi{position:relative;display:inline-flex;align-items:center;justify-content:center;width:calc(30*var(--u));height:calc(30*var(--u));border-radius:calc(8*var(--u));background:var(--pv-card);border:1PX solid var(--pv-line2);color:var(--pv-mid);flex:none;transition:background 240ms ease,color 240ms ease,border-color 240ms ease}
.pv-pi svg{width:calc(17*var(--u));height:calc(17*var(--u));transition:opacity 200ms ease,transform 260ms cubic-bezier(.34,1.45,.64,1)}.pv-pi .b{position:absolute;opacity:0;transform:scale(.5);stroke-width:2}
.pv-plan b{display:block;font:600 calc(13.5*var(--u))/calc(18*var(--u)) var(--pf)}.pv-plan small{display:block;font:400 calc(12*var(--u))/calc(16*var(--u)) var(--pf);color:var(--pv-dim)}
.is-live .pv-pi,.is-live .pv-plan>div:hover .pv-pi{background:var(--pv-green-bg);border-color:transparent;color:var(--pv-green-ink)}.is-live .pv-pi .a{opacity:0;transform:scale(.5)}.is-live .pv-pi .b{opacity:1;transform:none}
.is-live .pv-plan>div:nth-child(2) .pv-pi,.is-live .pv-plan>div:nth-child(2) .pv-pi svg{transition-delay:260ms}.is-live .pv-plan>div:nth-child(3) .pv-pi,.is-live .pv-plan>div:nth-child(3) .pv-pi svg{transition-delay:520ms}
.pv-act{display:flex;align-items:center;justify-content:space-between;gap:calc(12*var(--u));animation:pv-rise .4s cubic-bezier(.22,1,.36,1) 3s backwards}
.pv-act .pv-btn{position:relative}.pv-act .pv-btn::after{content:'';position:absolute;inset:-1PX;border-radius:inherit;border:calc(2*var(--u)) solid var(--pv-blue);opacity:0;pointer-events:none;animation:pv-ring 1.3s ease-out 3.5s 2 backwards}
.pv-act .pv-btn.is-done::after{animation:none}
@media (prefers-reduced-motion:reduce){.pvb *,.pvb *::before,.pvb *::after{animation:none!important;transition-property:opacity,background-color,color,border-color,box-shadow!important}}
@container (max-width:400PX){.pvb{--w:392!important;--h:640;padding:calc(16*var(--u));gap:calc(10*var(--u))}.pv-num{font-size:calc(32*var(--u));line-height:calc(36*var(--u))}.pv-num.xl{font-size:calc(38*var(--u));line-height:calc(42*var(--u));letter-spacing:calc(-1.4*var(--u))}.pv-num small{font-size:calc(15*var(--u))}.pv-guild,.pv-rep,.pv-course{padding:calc(16*var(--u))}.pv-course>.pv-head>.pv-icon{display:none}.pv-course .pv-eb{white-space:normal}.pv-mod{padding:calc(10*var(--u))}.pv-outs{grid-template-columns:minmax(0,1fr)}.pv-out{padding:calc(12*var(--u)) calc(14*var(--u))}.pv-rep{gap:calc(18*var(--u))}.pv-mult{min-width:0;flex:1}.pv-rung{font-size:calc(11*var(--u))}.pv-ladder{gap:calc(4*var(--u))}.pv-agent{padding:calc(14*var(--u))}.pv-agent .pv-ttl{font-size:calc(15*var(--u))}.pv-step{font-size:calc(11*var(--u))}.pv-trace{padding:calc(16*var(--u)) calc(14*var(--u)) calc(14*var(--u))}.pv-trace .pv-head{flex-direction:column;align-items:flex-start;gap:calc(8*var(--u))}.pv-listing{padding:calc(14*var(--u))}.pv-chat{padding:calc(14*var(--u))}.pv-bub{max-width:90%}.pv-plan small{display:none}.pv-chead .pv-eg{font-size:0}.pv-chead .pv-eg svg{width:calc(15*var(--u));height:calc(15*var(--u))}.pv-cmd{font-size:calc(12*var(--u));padding:calc(9*var(--u)) calc(11*var(--u))}.pv-cmd small{display:none}.pvb-campaign{padding:calc(14*var(--u));gap:calc(10*var(--u))}.pv-cbar [data-k=rev],.pv-cbar .pv-btn{display:none}.pv-canvas{grid-template-columns:minmax(0,1fr);gap:calc(9*var(--u))}.pv-nd{grid-area:auto!important;flex-direction:row;align-items:center;gap:calc(8*var(--u));padding:calc(6*var(--u)) calc(10*var(--u));border-radius:calc(10*var(--u))}.pv-nd-h{flex:1;min-width:0}.pv-nd-f:not(.pick),.pv-tag,.pv-nd-x,.pv-nd[data-node=gate] .pv-nd-c{display:none}.pv-nd-c{min-height:0;flex:none}.pv-nd-f.pick{flex:none;max-width:calc(150*var(--u));padding:calc(2*var(--u)) calc(8*var(--u));font-size:calc(12*var(--u))}.pv-stepper{flex:none;width:calc(150*var(--u))}.pv-sig{left:calc(-8*var(--u));top:calc(-9*var(--u))}.pv-wire.w-l,.pv-wire.w-r,.pv-wire.w-t{left:50%;right:auto;top:auto;bottom:calc(100% + calc(1.5*var(--u)));width:1PX;height:calc(9*var(--u))}.pv-wire::after,.pv-wire>u{display:none}.pv-budget{font-size:calc(12*var(--u));gap:calc(6*var(--u));padding-left:calc(12*var(--u))}.pv-budget>span:nth-of-type(3),.pv-budget>i:nth-of-type(2){display:none}.pv-agree{padding:calc(14*var(--u));gap:calc(10*var(--u))}.pv-ev{flex-wrap:wrap}.pv-ev>b,.pv-signrow .pv-cap,.pv-agree .pv-head>.pv-icon,.pv-agree .pv-head>.pv-chip,.pv-agree .pv-head .pv-eb{display:none}.pv-signrow{justify-content:space-between}.pvb-compliance .pv-trace{padding:calc(12*var(--u)) calc(14*var(--u))}.pvb-compliance .pv-trace .pv-head{flex-direction:row;align-items:center}.pvb-compliance .pv-trace .pv-name{display:none}.pvb-compliance .pv-trace .pv-chip{margin-right:auto}.pv-tr{grid-template-columns:calc(96*var(--u)) minmax(0,1fr) calc(30*var(--u));gap:calc(8*var(--u));font-size:calc(12*var(--u));min-height:calc(26*var(--u))}.pv-tr.h,.pv-tr>span:nth-child(4){display:none}.pv-tr:first-of-type+.pv-tr{box-shadow:none}.pv-terms{flex-wrap:wrap;gap:calc(8*var(--u)) calc(10*var(--u))}.pv-terms .pv-cap{flex:1 1 100%;order:3}.pv-trace .pv-eb{white-space:normal}.pv-rung b{font-size:calc(10.5*var(--u))}.pv-ttl.lg{font-size:calc(19*var(--u));line-height:calc(24*var(--u))}}


body #masthead .pv-size svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pv-size .b,.pv-size[aria-pressed=true] .a{display:none}.pv-size[aria-pressed=true] .b{display:block}

/* Accessible web adaptation of Apple HIG: type, materials, interaction. */
html{font-size:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%}
@supports(font:-apple-system-body){html{font:-apple-system-body}}
body{font-size:1rem}
body #masthead{background:color-mix(in srgb,var(--page) 78%,transparent)!important;backdrop-filter:saturate(160%) blur(20px);-webkit-backdrop-filter:saturate(160%) blur(20px);border-bottom:1px solid var(--line)}
body #masthead :is(.product-menu-list button,summary,.pv-size){touch-action:manipulation}
body #masthead .product-menu-list button:active{background:rgb(94 133 238 / 18%);scale:.985}
body #masthead summary:active,.pvb [role=button]:active{opacity:.72}
.pvb [role=button]:focus-visible{outline:2px solid var(--accent-text,#5e85ee);outline-offset:3px}
#masthead :is(.icon-link,.rv-menu-button),#masthead .nav-products>summary{min-height:2.75rem;min-width:2.75rem}
#masthead .theme-toggle:before{inset:-.875rem -.4rem}
#faqs summary{min-height:2.75rem;transition:color 160ms ease,background-color 160ms ease}
#faqs summary:hover,#faqs summary:focus-visible{color:var(--accent-text,#5e85ee);background:rgb(94 133 238 / 3%)}
#faqs summary:active{background:rgb(94 133 238 / 8%)}
#journal p{height:auto;white-space:normal}

@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){
 body #masthead{background:var(--page)!important;backdrop-filter:none;-webkit-backdrop-filter:none}
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
 #masthead .product-menu{translate:none!important}
 body #masthead .product-menu-list button:active,.pv-size:active,.pv-btn:active{transform:none;scale:1}
 .pvb *,.pvb *::before,.pvb *::after{animation:none!important}
}

/* Keep reference geometry; accessibility feedback does not resize the illustration. */
.pvb{-webkit-text-size-adjust:100%;user-select:text}
.pv-size::after{content:"";position:absolute;inset:-.375rem;border-radius:50%}

/* Tiny-h mascots sit on a layer the exact size of the demo canvas, so they stay on its edges at every width. */
/* The art's canvas-edge line (136 of 204) lands on the canvas top: head behind it, hands over it. */
/* The side Tiny's art is cut at 80 of 96: that line sits on the canvas's left edge, with the tail curling round in front. */
/* The chat Tiny and the closing five. Their motion is CSS and only runs while they are on screen (.tm-on). */
@keyframes tm-bob{from{transform:translateY(var(--bob-a,5px))}to{transform:translateY(calc(var(--bob-a,5px)*-1))}}
@keyframes tm-sway{from{transform:translateX(calc(var(--amp)*-1px))}to{transform:translateX(calc(var(--amp)*1px))}}
@keyframes tm-blink{0%,97.2%,100%{transform:scaleY(1)}98.6%{transform:scaleY(.1)}}
/* Chat Tiny: data-face picks which eyes show; a quick blink (.tm-swap) covers each change. */
/* Its "Hi" floats in, stays a while, and drifts off. */
@keyframes tm-say{0%{opacity:0;transform:translate(-12px,16px) scale(.5)}14%{opacity:1;transform:translate(0,0) scale(1)}48%{opacity:1;transform:translate(1px,-4px) scale(1)}80%{opacity:1;transform:translate(0,-1px) scale(1)}100%{opacity:0;transform:translate(4px,-18px) scale(.92)}}
/* Closing five: each has its own small habit. */
@keyframes tm-code{0%,8%{opacity:0;transform:translateY(7px) scale(.7)}20%{opacity:1;transform:translateY(0) scale(1)}62%{opacity:1;transform:translateY(-2px) scale(1)}80%,100%{opacity:0;transform:translateY(-9px) scale(.9)}}
@keyframes tm-laugh{0%,46%,100%{transform:translateY(0)}6%,18%,30%{transform:translateY(-9px)}12%,24%,38%{transform:translateY(3px)}}
@keyframes tm-line{0%,46%,100%{opacity:0;transform:translateY(-5px)}8%,34%{opacity:1;transform:translateY(0)}21%{opacity:.5;transform:translateY(2px)}}
@keyframes tm-dot{0%,6%{opacity:0;transform:translate(4px,8px) scale(.3)}18%{opacity:1;transform:translate(0,0) scale(1)}60%{opacity:1;transform:translate(0,-2px) scale(1)}74%,100%{opacity:0;transform:translate(-2px,-8px) scale(.8)}}
@keyframes tm-happy{from{transform:translateY(5px) rotate(-4deg)}to{transform:translateY(-7px) rotate(4deg)}}
@keyframes tm-hello{0%,6%{opacity:0;transform:translate(-8px,10px) scale(.5)}16%{opacity:1;transform:translate(0,0) scale(1)}40%{opacity:1;transform:translate(1px,-3px) scale(1)}62%{opacity:1;transform:translate(0,0) scale(1)}74%,100%{opacity:0;transform:translate(3px,-12px) scale(.9)}}
/* The side Tiny's three dots come out once, linger, and go. */
@keyframes tiny-dot{0%{opacity:0;transform:translate(calc(var(--dx)*1px),calc(var(--dy)*1px)) scale(.2)}20%{opacity:1;transform:translate(0,0) scale(1)}68%{opacity:1;transform:translate(0,-4px) scale(1)}100%{opacity:0;transform:translate(calc(var(--dx)*-.4px),calc(var(--dy)*-.4px - 10px)) scale(.5)}}

#title-preview-region>[data-heading-version][hidden]{display:none!important}
#title-preview-region[data-title-version="2"]{gap:1.5rem}
@media(max-width:700px){#title-preview-region[data-title-version="2"]{gap:1.5rem}}
#title-two-eye-1,#title-two-eye-2{transform-box:fill-box;transform-origin:center}
@media(prefers-reduced-motion:no-preference){
@keyframes title-thinking{0%,100%{transform:rotate(0deg)}25%,60%{transform:rotate(-7deg)}80%{transform:rotate(2deg)}}
@keyframes title-thinking-eye{0%,100%{transform:translate(0,0) scaleY(1)}20%,55%{transform:translate(-1.6px,-2px) scaleY(.72)}65%{transform:translate(-1.6px,-2px) scaleY(.12)}78%,90%{transform:translate(-1px,-1.5px) scaleY(1.05)}}
@keyframes title-idea-appear{0%{opacity:0;transform:translateY(5px) scale(.65) rotate(-12deg)}70%{opacity:1;transform:translateY(-1px) scale(1.08) rotate(3deg)}100%{opacity:1;transform:none}}
}
@media(prefers-reduced-motion:no-preference){@keyframes title-three-arrive{from{opacity:0;transform:translateY(12px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}}
#hero:has(#title-preview-region[data-title-version="2"]){gap:3.75rem}
#hero:has(#title-preview-region[data-title-version="3"]){gap:2rem}
#hero:has(#title-preview-region:is([data-title-version="2"],[data-title-version="3"])) .audience-tabs{gap:.75rem}
#hero:has(#title-preview-region:is([data-title-version="2"],[data-title-version="3"])) .audience-tabs button{height:2.75rem;padding:.375rem 1.25rem;font-size:1rem;line-height:1.5rem}
#hero:has(#title-preview-region:is([data-title-version="2"],[data-title-version="3"])) .audience-tabs button[aria-selected="true"]{background:#2e2e2e;color:#fff;border-color:#2e2e2e}
#hero:has(#title-preview-region:is([data-title-version="2"],[data-title-version="3"])) .audience-tabs button[aria-selected="false"]{background:var(--page,#fff);color:var(--ink,#2e2e2e);border-color:var(--line,#ebebec)}
@media(max-width:700px){#hero:has(#title-preview-region[data-title-version="2"]){gap:2.5rem}}
#title-preview-region[data-title-version="2"]{gap:1.5rem}
@media(prefers-reduced-motion:no-preference){
@keyframes title-two-roam{0%,100%{translate:0 0;rotate:0deg}25%{translate:.008em -.035em;rotate:-1.2deg}50%{translate:.015em 0;rotate:0deg}75%{translate:.005em .027em;rotate:1deg}}
}


#masthead .product-menu .pvb{
 --pv-blue:#5E85EE;--pv-blue-bg:rgb(94 133 238 / 12%);
 --pv-green:#9BCB8B;--pv-green-ink:var(--pv-ink);--pv-green-bg:rgb(155 203 139 / 18%);
 --pv-amber:#FFBA35;--pv-amber-ink:var(--pv-ink);--pv-amber-bg:rgb(255 186 53 / 18%);
 --pv-red:#EC7979;--pv-red-bg:rgb(236 121 121 / 12%);--pv-star:#FFBA35;
}
#masthead .product-menu .pv-chip.green>i{background:var(--pv-green)}
#masthead .product-menu .pv-chip.amber>i{background:var(--pv-amber)}


@media(min-width:761px){
 body #masthead .nav{gap:12px}
 body #masthead .nav>a,body #masthead .nav-products>summary{padding:8px 10px;font-size:14px;line-height:20px}
 body #masthead .nav-products>.product-menu{--mw:min(1120px,calc(100vw - 64px));width:var(--mw);height:auto;max-height:calc(100dvh - 100px);grid-template-columns:270px minmax(0,1fr);gap:24px;padding:20px;top:calc(100% + 8px);border:1px solid #ededed;border-radius:24px;overflow:auto;overscroll-behavior:contain;box-shadow:0 24px 60px rgb(0 0 0 / 10%),0 2px 8px rgb(0 0 0 / 3%)}
 body #masthead .nav-products>.product-menu.is-big{--mw:min(1240px,calc(100vw - 40px));height:auto}
 body #masthead .product-menu-list{display:flex;gap:4px;justify-content:space-between;padding:4px 0}
 body #masthead .product-menu-list button{min-height:62px;padding:11px 16px;border-radius:12px;background:transparent;transition:background 180ms ease,color 180ms ease}
 body #masthead .product-menu-list button>span{font-size:16px;line-height:22px;letter-spacing:-.02em;margin-bottom:3px}
 body #masthead .product-menu-list button>small{font-size:12px;line-height:17px;color:#7b7b7b;white-space:normal}
 body #masthead .product-menu-list button:hover{background:#f7f7f6}
 body #masthead .product-menu-list button[aria-selected=true]{background:#f1f1ef}
 body #masthead .product-menu-previews{background:#f8f7f6;border:0;border-radius:18px;overflow:hidden}
 body #masthead .nav-editorial{justify-content:center;min-height:100%}
 body #masthead .nav-editorial .nv-copy{padding:18px 24px 24px;padding-right:64px}
 body #masthead .nv-copy h4{font-size:18px;line-height:26px;letter-spacing:-.025em}
 body #masthead .nv-copy p{font-size:13px;line-height:20px;margin-top:4px}
 body #masthead .pv-size{right:18px;bottom:20px;width:32px;height:32px;background:#fff;border-color:#e8e8e8}
 body #masthead .pvb{--pv-canvas:#f8f7f6;--pv-dot:#dededc;--pv-line:#e9e9e7;--pv-line2:#e2e2e0;--pv-sub:#f1f1ef;--pv-field:#f5f5f4}
}
@media(min-width:761px) and (max-width:1050px){
 body #masthead .nav{gap:4px}
 body #masthead .nav>a,body #masthead .nav-products>summary{padding:7px 6px;font-size:13px}
 body #masthead .nav-products>.product-menu{grid-template-columns:230px minmax(0,1fr);gap:16px;padding:16px}
 body #masthead .product-menu-list button{min-height:56px;padding:8px 12px}
 body #masthead .product-menu-list button>span{font-size:15px;line-height:21px}
 body #masthead .product-menu-list button>small{font-size:11px;line-height:15px}
 body #masthead .nav-editorial .nv-copy{padding:14px 18px 20px;padding-right:56px}
}
@media(max-width:760px){
 body #masthead .nav-products>.product-menu{width:calc(100vw - 32px);height:auto;max-height:calc(100dvh - 146px);padding:12px;gap:12px;border-radius:20px;overflow:auto;overscroll-behavior:contain}
 body #masthead .product-menu-list{display:grid;grid-template-columns:1fr 1fr;gap:4px}
 body #masthead .product-menu-list button{min-height:44px;padding:10px 12px;border-radius:10px}
 body #masthead .product-menu-list button>span{font-size:14px;line-height:20px;margin:0}
 body #masthead .product-menu-previews{border:0;border-radius:14px;background:#f8f7f6}
 body #masthead .nav-editorial .nv-copy{padding:12px 16px 18px}
}
html[data-theme=dark] body #masthead .product-menu-list button:hover{background:#292b2e}
html[data-theme=dark] body #masthead .product-menu-list button[aria-selected=true]{background:#303236}
html[data-theme=dark] body #masthead .product-menu-list button>small{color:#abb1bd}
html[data-theme=dark] body #masthead .product-menu-previews{background:#1b1c1e}
html[data-theme=dark] body #masthead .pvb{--pv-canvas:#1b1c1e;--pv-dot:#34363a;--pv-line:#303236;--pv-line2:#3a3c40;--pv-sub:#26282b;--pv-field:#242629}
html[data-theme=dark] body #masthead .pv-size{background:#27292c;border-color:#3a3c40}


body *,body *::before,body *::after{text-decoration-line:none!important}


@media(min-width:761px){
 body #masthead .nav-products>.product-menu,body #masthead .nav-products>.product-menu.is-big{--mw:700px;width:700px;height:380px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 100px);grid-template-columns:194px minmax(0,1fr);gap:14px;padding:12px;border-radius:18px}
 body #masthead .product-menu-list{gap:0;padding:0;justify-content:space-between}
 body #masthead .product-menu-list button{min-height:0;padding:5px 10px;border-radius:8px}
 body #masthead .product-menu-list button>span{font-size:13px;line-height:18px;margin-bottom:2px}
 body #masthead .product-menu-list button>small{font-size:10px;line-height:13px}
 body #masthead .nav-editorial .nv-copy{padding:12px 14px 16px;padding-right:14px}
 body #masthead .nv-copy h4{font-size:14px;line-height:20px}
 body #masthead .nv-copy p{font-size:11px;line-height:16px;margin-top:3px}
 body #masthead .product-menu.is-big .pvb{--w:var(--w0)}
 body #masthead .pv-size{display:none}
}
body #masthead .product-menu-list button:hover,body #masthead .product-menu-list button[aria-selected=true],body #masthead .nav>a:hover,body #masthead .nav-products>summary:hover{background:rgba(0,0,0,.02)}
body #masthead .product-menu-previews{background:rgba(0,0,0,.02)}
body #masthead .product-menu .pvb{--pv-canvas:transparent}
html[data-theme=dark] body #masthead .product-menu-list button:hover,html[data-theme=dark] body #masthead .product-menu-list button[aria-selected=true],html[data-theme=dark] body #masthead .product-menu-previews{background:rgba(0,0,0,.02)}


html{--line:#F1F3F5}
html{--interface-border:#F1F3F5}html[data-theme=dark]{--interface-border:#353940}
@layer interface-borders{html body *,html body *::before,html body *::after{border-color:var(--interface-border)!important}}
html body .pvb{--pv-line:#F1F3F5;--pv-line2:#F1F3F5;--pv-node-sel:#F1F3F5;--pv-wire:#F1F3F5}

#masthead .product-menu .pv-tr{border-radius:0}#masthead .product-menu .pv-tr:not(.h){box-shadow:0 -1px 0 #F1F3F5}

@media(min-width:761px){
 body #masthead .nav>a,body #masthead .nav-products>summary{box-sizing:border-box;display:flex;align-items:center;min-height:36px;height:36px;padding:8px 10px;line-height:20px;font-size:14px!important;color:var(--muted,#6b7280)!important}
 body #masthead .nav>a:hover,body #masthead .nav-products>summary:hover{color:var(--ink,#2e2e2e)!important}
 body #masthead .nav-products>.product-menu{overflow:hidden}
 body #masthead .product-menu-list{height:100%;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;justify-content:flex-start;gap:4px;padding:0 4px 0 0;scrollbar-width:thin;scrollbar-color:#d9dde3 transparent}
 body #masthead .product-menu-list button{flex:0 0 auto;min-height:64px;padding:11px 10px;border-radius:8px}
 body #masthead .product-menu-list button>span{font-size:14px;line-height:20px;margin-bottom:4px}
 body #masthead .product-menu-list button>small{font-size:11px;line-height:16px;white-space:normal}
 body #masthead .product-menu-list::-webkit-scrollbar{width:4px}
 body #masthead .product-menu-list::-webkit-scrollbar-thumb{background:#d9dde3;border-radius:4px}
}
@layer interface-borders{html body #masthead .nav-products>summary>span{border-color:currentColor!important}}


body #masthead .product-menu-previews{--preview-inset:18px}
body #masthead .product-menu .pvb{padding-left:var(--preview-inset);padding-right:var(--preview-inset)}
body #masthead .product-menu .nav-editorial .nv-copy{padding-left:var(--preview-inset);padding-right:var(--preview-inset)}
@media(max-width:760px){body #masthead .product-menu-previews{--preview-inset:16px}}

/* Theme-specific surfaces and quiet structural borders. */
html[data-theme=dark]{--line:#353940;--soft-surface:#202225;--inset-surface:#292c31}
html[data-theme=dark] body #masthead .pvb{--pv-line:#353940;--pv-line2:#41464f;--pv-node-sel:#71809a;--pv-wire:#555e6d}
html[data-theme=dark] body #masthead .product-menu-previews{background:#1c1e21}
html[data-theme=dark] body #masthead .product-menu-list button:hover,
html[data-theme=dark] body #masthead .product-menu-list button[aria-selected=true],
html[data-theme=dark] body #masthead .nav>a:hover,
html[data-theme=dark] body #masthead .nav-products>summary:hover,
html[data-theme=dark] body #masthead .nav-products[open]>summary{background:#292c31}
html[data-theme=dark] body #masthead .product-menu .pv-tr:not(.h){box-shadow:0 -1px 0 #353940}
/* Keep original mascot colors; add the same contour as Tiny-h. */
/* The Tiny-h conversation frame intentionally retains its white keyline. */
@layer interface-borders{
 html[data-theme=dark] body #masthead .nav-products>summary>span{border-color:currentColor!important}
}


body #masthead{border-bottom:1px solid transparent!important}
/* Important declarations must share the existing border layer to override it. */
@layer interface-borders{
 html body #masthead{border-bottom-color:transparent!important}
 html body #masthead.is-scrolled{border-bottom-color:var(--interface-border,var(--line,#f1f3f5))!important}
}
body .design-footer{border-top:0!important}


footer.design-footer .hb-footer-heart{display:inline-block;flex:none;appearance:none;border:0;margin:0;padding:0 1px;background:transparent;color:inherit;cursor:pointer;font:inherit;line-height:inherit;transform-origin:50% 58%;vertical-align:-.08em;will-change:transform}
footer.design-footer .hb-footer-heart:hover,footer.design-footer .hb-footer-heart.is-latched{animation:hb-footer-heartbeat 1154ms ease-in-out infinite}
footer.design-footer .hb-footer-heart:focus-visible{border-radius:999px;outline:2px solid var(--ink,#2e2e2e);outline-offset:3px}
@keyframes hb-footer-heartbeat{0%,100%{transform:scale(1)}16%{transform:scale(1.24)}30%{transform:scale(.94)}46%{transform:scale(1.17)}74%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){footer.design-footer .hb-footer-heart,footer.design-footer .hb-footer-heart:hover,footer.design-footer .hb-footer-heart.is-latched{animation:none}}

/* Editorial inner-page layout: original copy and section order are preserved. */
html{scroll-padding-top:96px}body{display:block;background:var(--page,#fff);color:var(--ink,#2e2e2e)}
body #masthead{width:100%;min-width:0;position:sticky;top:0;display:block;flex:none}
body #masthead .masthead-inner{width:min(1200px,calc(100% - 80px));max-width:none;margin-inline:auto;animation:none;transform:none;min-width:0}
body #masthead .brand{flex:none}body #masthead .mast-actions{flex:none}body #masthead .nav{min-width:0;margin-left:auto}
body #masthead .product-menu-panel[hidden]{display:none!important}
body #masthead .nav>a[aria-current=page]{color:var(--ink,#2e2e2e)!important}
body footer.design-footer{width:100%;border-top:0!important;padding:28px 24px 40px;gap:12px;background:var(--page,#fff);color:var(--muted,#6b7280)}
body footer.design-footer .fg-710{justify-content:center;align-items:center;gap:4px}
body footer.design-footer p{color:var(--muted,#6b7280);font-size:12px;line-height:20px}
body footer.design-footer .hb-footer-heart{font-size:12px}
@media(min-width:901px){body #masthead .nav{display:flex;position:static;padding:0;border:0;box-shadow:none;background:transparent;flex-direction:row}body #masthead .rv-menu-button{display:none}}
@media(max-width:900px){body #masthead{height:64px}body #masthead .masthead-inner{width:calc(100% - 40px);gap:16px}body #masthead .mast-actions{margin-left:auto;gap:16px}body #masthead .brand{font-size:18px}body #masthead .rv-menu-button{display:block;font-size:22px;padding:0}body #masthead .nav{display:none;position:absolute;top:72px;left:20px;right:20px;margin:0;padding:16px;background:var(--page);border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 30px #0001;flex-direction:column;align-items:stretch;gap:4px;max-height:calc(100dvh - 92px);overflow:auto}body #masthead .nav.is-open{display:flex}body #masthead .nav-products>.product-menu,body #masthead .nav-products>.product-menu.is-big{position:relative;top:auto;left:auto;transform:none;translate:none!important;width:100%;max-width:none;height:auto;max-height:none;margin:8px 0;grid-template-columns:1fr;gap:12px;padding:10px;overflow:visible;box-shadow:none;border-radius:10px}body #masthead .product-menu-list{display:grid;grid-template-columns:1fr 1fr;height:auto;overflow:visible;gap:4px;padding:0}body #masthead .product-menu-list button{min-height:44px;padding:8px}body #masthead .product-menu-list button>small{display:none}body #masthead .product-menu-list button>span{font-size:12px;margin:0}body #masthead .product-menu-previews{min-width:0}body #masthead .pv-size{display:none}}
@media(max-width:700px){body footer.design-footer{padding-inline:20px}}
@media(max-width:430px){body #masthead .brand{font-size:16px}body #masthead .masthead-inner{gap:10px}body #masthead .mast-actions{gap:8px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}


/* Comment refinements: quiet spacing, one CTA, homepage-style information chips. */


/* Shared editorial rules. Only the cover, media, and supporting note have distinct roles. */
/* Inline badges inherit surrounding typography; the text establishes the baseline. */
/* Same footer markup, spacing, type, theme and heart interaction as the homepage. */
body footer.design-footer{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;padding:40px max(20px,calc((100% - 1200px)/2));border:0!important;background:var(--page,#fff);color:var(--ink,#2e2e2e)}
body footer.design-footer p{margin:0;font-size:14px;line-height:22px;font-weight:400;color:var(--ink,#2e2e2e)}
body footer.design-footer>.fg-710{gap:2px}
body footer.design-footer .hb-footer-heart{font-size:14px;line-height:22px}


/* Keep the centered editorial measure; only refine heading breaks and list consistency. */


/* Use the homepage primary button's final 44px / 16px specification at every breakpoint. */

/* Comparison article: shared inner-page scale, one centered reading column. */


/* Three-column comparisons use equal option widths and a consistent Humanbased column. */
/* Humanbased blog: the same site components, with an editorial reading layout. */
#blog-page{--reading-width:660px;--color-gray-100:var(--surface,#fafafa);--color-gray-200:var(--line,#eee);--color-gray-300:var(--line,#e7e7e7);--color-gray-400:var(--faint,#999);--color-gray-900:var(--muted,#6b7280);--color-gray-1100:var(--muted,#6b7280);--color-gray-1200:var(--ink,#2e2e2e);--color-dark-code-bg:#202124;--color-dark-border:#34363b;--font-mono:ui-monospace,SFMono-Regular,Consolas,monospace;width:min(960px,calc(100% - 64px));margin:0 auto;padding:56px 0 80px;color:var(--ink,#2e2e2e);font:400 16px/1.8 Inter,'Microsoft YaHei',sans-serif}
#blog-page *,#blog-page *::before,#blog-page *::after{box-sizing:border-box}
#blog-page h1,#blog-page h2,#blog-page h3,#blog-page h4,#blog-page p{margin:0}
#blog-page h1,#blog-page h2,#blog-page h3,#blog-page h4{color:var(--ink,#2e2e2e);font-family:inherit;font-weight:550;letter-spacing:-.035em;text-wrap:balance}
#blog-page a{color:inherit;text-decoration:none;overflow-wrap:anywhere}
#blog-page [id]{scroll-margin-top:100px}
#blog-page a:focus-visible,#blog-page summary:focus-visible,#blog-page [tabindex="0"]:focus-visible{outline:2px solid var(--ink);outline-offset:5px;border-radius:3px}
#blog-page .blog-hero{text-align:center;margin:0 auto 72px}
#blog-page .blog-hero h1{font-size:52px;line-height:1.08;max-width:860px;margin:0 auto}
#blog-page .blog-hero p{font-size:17px;line-height:1.75;color:var(--muted);max-width:var(--reading-width);margin:28px auto 0;text-wrap:pretty}
#blog-page .blog-section{max-width:var(--reading-width);margin:84px auto 0}
#blog-page .blog-section:first-of-type{margin-top:0}
#blog-page h2{font-size:30px;line-height:1.25;margin-bottom:28px}
#blog-page h3{font-size:22px;line-height:1.4}
#blog-page .blog-category{margin-top:44px}
#blog-page .blog-category>h3{font-size:17px;line-height:1.5;margin:0 0 4px;font-weight:550;letter-spacing:-.015em}
#blog-page .blog-post-list{display:grid;gap:0}
#blog-page .blog-post-card{position:relative;display:block;padding:26px 0;border-bottom:1px solid var(--line,#eee);transition:color 160ms ease}
#blog-page .blog-post-card:last-child{border-bottom:0;padding-bottom:0}
#blog-page .blog-post-card:hover .blog-card-title{text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--faint);text-underline-offset:5px}
#blog-page .blog-card-title{display:block;font-size:22px;line-height:1.4;font-weight:550;letter-spacing:-.025em;text-wrap:pretty;color:var(--ink)}
#blog-page .blog-card-description{display:block;font-size:16px;line-height:1.75;color:var(--muted);margin-top:10px}
#blog-page .blog-card-meta{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:13px;line-height:20px;color:var(--muted);font-variant-numeric:tabular-nums}
#blog-page .blog-card-meta time{font:inherit;color:inherit}
#blog-page .blog-post-hero{max-width:900px;margin:0 auto 56px;text-align:center}
#blog-page .blog-post-hero h1{font-size:48px;line-height:1.15;margin:0 auto;text-wrap:balance}
#blog-page .blog-post-meta{max-width:760px;margin:24px auto 0;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 12px;font-size:13px;line-height:22px;color:var(--muted)}
#blog-page .blog-post-meta>span:first-child{letter-spacing:.06em;font-size:12px;font-weight:500}
#blog-page .blog-prose{width:min(100%,var(--reading-width));margin:0 auto;font-size:16px;line-height:1.8;color:var(--muted);overflow-wrap:break-word}
#blog-page .blog-prose p{font:inherit;line-height:1.8;margin:0 0 20px;opacity:1}
#blog-page .blog-prose h2{font-size:30px;line-height:1.25;margin:64px 0 24px;font-weight:550}
#blog-page .blog-prose h3{font-size:22px;line-height:1.4;margin:36px 0 16px}
#blog-page .blog-prose h4{font-size:17px;line-height:1.5;margin:28px 0 12px}
#blog-page .blog-prose strong{font-weight:550;color:var(--ink)}
#blog-page .blog-prose ul,#blog-page .blog-prose ol{margin:20px 0 24px;padding-left:24px;opacity:1}
#blog-page .blog-prose li{margin:8px 0;padding-left:3px;line-height:1.8}
#blog-page .blog-prose li>p{margin-bottom:8px}
#blog-page .blog-prose a{text-decoration:underline;text-decoration-color:var(--faint);text-underline-offset:4px}
#blog-page .blog-prose a:hover{text-decoration-color:currentColor;color:var(--ink)}
#blog-page .blog-prose blockquote{border-left:2px solid var(--line);margin:28px 0;padding:0 0 0 24px;opacity:1}
#blog-page .blog-prose blockquote p:last-child{margin-bottom:0}
#blog-page .blog-prose pre{width:100%;max-width:100%;margin:28px 0;transform:none;border:1px solid var(--line);border-radius:12px;padding:22px 24px;box-shadow:none;overflow:auto;font:13px/1.75 var(--font-mono);tab-size:2}
#blog-page .blog-prose code:not(pre code){font-size:.875em;color:var(--ink);background:var(--surface)}
#blog-page .blog-prose pre code{font:inherit;white-space:pre}
#blog-page .blog-prose figure{width:min(960px,calc(100vw - 64px));max-width:none;margin:36px 0 36px 50%;transform:translateX(-50%)}
#blog-page .blog-prose figure img{display:block;width:100%;height:auto;margin:0;background:#fff;border-radius:12px}
#blog-page .blog-prose>p>img{display:block;width:100%;height:auto;margin:32px auto}
#blog-page .blog-prose figcaption{font-size:13px;line-height:1.65;color:var(--muted);margin:14px auto 0;max-width:var(--reading-width);text-align:left}
#blog-page .blog-resources{max-width:var(--reading-width);display:flex;flex-wrap:wrap;gap:24px;margin:64px auto 0;font-size:13px;color:var(--muted)}
#blog-page .blog-resources a:hover{color:var(--ink)}
@media(max-width:700px){#blog-page{width:calc(100% - 40px);padding-top:32px;padding-bottom:56px}#blog-page .blog-hero{margin-bottom:48px}#blog-page .blog-hero h1{font-size:38px}#blog-page .blog-hero p{font-size:16px;margin-top:24px}#blog-page .blog-section{margin-top:60px}#blog-page h2,#blog-page .blog-prose h2{font-size:26px}#blog-page .blog-post-hero{margin-bottom:40px}#blog-page .blog-post-hero h1{font-size:34px;line-height:1.16}#blog-page .blog-card-title{font-size:20px}#blog-page .blog-post-meta{gap:6px 8px;margin-top:20px}#blog-page .blog-prose h2{margin-top:48px}#blog-page .blog-prose figure{width:calc(100vw - 40px)}#blog-page .blog-prose pre{padding:18px 16px}}
@media(max-width:430px){#blog-page .blog-hero h1{font-size:34px}#blog-page .blog-post-hero h1{font-size:30px}}
@media(prefers-reduced-motion:reduce){#blog-page *{animation:none!important;transition:none!important}}

/* Restrained editorial type scale, shared by the blog index and articles. */
#blog-page{--blog-body:#60646c;--blog-meta:#747880}
html[data-theme=dark] #blog-page{--blog-body:#b9bdc5;--blog-meta:#a0a5ae}
#blog-page .blog-hero{max-width:var(--reading-width);margin-bottom:56px}
#blog-page .blog-hero h1{font-size:34px;line-height:1.25;font-weight:500;letter-spacing:-.025em}
#blog-page .blog-hero p{font-size:16px;line-height:1.75;color:var(--blog-body);margin-top:20px}
#blog-page .blog-section{margin-top:64px}
#blog-page .blog-section:first-of-type{margin-top:0}
#blog-page .blog-section>h2{font-size:13px;line-height:20px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--blog-meta);margin-bottom:16px}
#blog-page .blog-category{margin-top:36px}
#blog-page .blog-category>h3{font-size:14px;line-height:22px;font-weight:500;letter-spacing:0;color:var(--blog-meta);margin-bottom:4px}
#blog-page .blog-post-card{padding:20px 0}
#blog-page .blog-card-title{font-size:17px;line-height:1.5;font-weight:500;letter-spacing:-.012em}
#blog-page .blog-card-description{font-size:15px;line-height:1.7;color:var(--blog-body);margin-top:6px}
#blog-page .blog-card-meta{font-size:12px;line-height:20px;color:var(--blog-meta);margin-top:10px}
#blog-page .blog-post-hero{max-width:760px;margin-bottom:44px}
#blog-page .blog-post-hero h1{font-size:34px;line-height:1.3;font-weight:500;letter-spacing:-.025em}
#blog-page .blog-post-meta{font-size:12px;line-height:20px;color:var(--blog-meta);margin-top:20px}
#blog-page .blog-post-meta>span:first-child{font-size:12px;letter-spacing:.03em}
#blog-page .blog-prose{color:var(--blog-body);font-size:16px;line-height:1.8}
#blog-page .blog-prose h2{font-size:23px;line-height:1.4;font-weight:500;letter-spacing:-.02em;margin:48px 0 18px}
#blog-page .blog-prose h3{font-size:19px;line-height:1.5;font-weight:500;letter-spacing:-.012em;margin:32px 0 12px}
#blog-page .blog-prose h4{font-size:16px;line-height:1.6;font-weight:500;letter-spacing:0;margin:24px 0 10px}
#blog-page .blog-prose strong{font-weight:550}
#blog-page .blog-prose figcaption,#blog-page .blog-resources{color:var(--blog-meta)}
html[lang=zh-Hans] #blog-page .blog-hero h1,html[lang=zh-Hans] #blog-page .blog-post-hero h1{line-height:1.4;letter-spacing:-.01em}
html[lang=zh-Hans] #blog-page .blog-section>h2{letter-spacing:.04em;line-height:20px}
html[lang=zh-Hans] #blog-page .blog-card-title{letter-spacing:0}
@media(max-width:700px){
 #blog-page .blog-hero{margin-bottom:44px}
 #blog-page .blog-hero h1,#blog-page .blog-post-hero h1{font-size:28px}
 #blog-page .blog-hero p{font-size:15px;margin-top:16px}
 #blog-page .blog-section{margin-top:48px}
 #blog-page .blog-post-hero{margin-bottom:36px}
 #blog-page .blog-card-title{font-size:16px}
 #blog-page .blog-prose h2{font-size:21px;margin-top:40px}
 #blog-page .blog-prose h3{font-size:18px}
}
@media print{.masthead,footer.design-footer,.blog-resources{display:none!important}#blog-page{width:100%;padding:0}#blog-page .blog-prose figure{width:100%;margin-left:0;transform:none;overflow:visible}#blog-page .blog-prose{width:100%}}

@media(max-width:1080px){body #masthead{height:64px}body #masthead .masthead-inner{width:calc(100% - 40px);gap:16px}body #masthead .mast-actions{margin-left:auto;gap:16px}body #masthead .brand{font-size:18px}body #masthead .rv-menu-button{display:block;font-size:22px;padding:0}body #masthead .nav{display:none;position:absolute;top:72px;left:20px;right:20px;margin:0;padding:16px;background:var(--page);border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 30px #0001;flex-direction:column;align-items:stretch;gap:4px;max-height:calc(100dvh - 92px);overflow:auto}body #masthead .nav.is-open{display:flex}body #masthead .nav-products>.product-menu,body #masthead .nav-products>.product-menu.is-big{position:relative;top:auto;left:auto;transform:none;translate:none!important;width:100%;max-width:none;height:auto;max-height:none;margin:8px 0;grid-template-columns:1fr;gap:12px;padding:10px;overflow:visible;box-shadow:none;border-radius:10px}body #masthead .product-menu-list{display:grid;grid-template-columns:1fr 1fr;height:auto;overflow:visible;gap:4px;padding:0}body #masthead .product-menu-list button{min-height:44px;padding:8px}body #masthead .product-menu-list button>small{display:none}body #masthead .product-menu-list button>span{font-size:12px;margin:0}body #masthead .product-menu-previews{min-width:0}body #masthead .pv-size{display:none}}
#masthead .mast-action-divider{display:block;flex:none;width:1px;height:16px;margin-inline:-4px;background:var(--muted,#6b7280);opacity:.25}
#masthead a.language-switch{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;gap:6px;min-width:0;min-height:36px;padding:0;border:0;background:transparent;color:var(--muted,#6b7280);font:500 12px/20px Inter,"Microsoft YaHei",sans-serif;text-decoration:none;white-space:nowrap;transition:color 160ms ease;touch-action:manipulation}
#masthead a.language-switch:hover{color:var(--ink,#2e2e2e);background:transparent}
#masthead a.language-switch:focus-visible{outline:2px solid var(--ink,#2e2e2e);outline-offset:4px;border-radius:3px}
#masthead .language-switch svg{display:block;flex:none;width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;transform:rotate(90deg)}
html[lang=zh-Hans] #blog-page h1{letter-spacing:-.02em;line-height:1.25;text-wrap:balance}
html[lang=zh-Hans] #blog-page h2{letter-spacing:-.015em;line-height:1.4}
html[lang=zh-Hans] #blog-page .blog-prose{line-height:1.9;word-break:normal}
@media(max-width:650px){body #masthead .masthead-inner{gap:8px}body #masthead .mast-actions{gap:8px}body #masthead .brand{gap:6px;font-size:18px}#masthead .mast-action-divider{margin-inline:-2px}}
@media(max-width:380px){body #masthead .brand{font-size:16px}body #masthead .masthead-inner{width:calc(100% - 24px)}body #masthead .mast-actions{gap:4px}#masthead .mast-action-divider{margin-inline:0}}
@media(prefers-reduced-motion:reduce){#masthead a.language-switch{transition:none!important}}

/* Shared spacing for the compact language and theme controls. */
body #masthead .mast-actions{display:flex;align-items:center;gap:12px}
body #masthead .mast-actions>.icon-link{position:relative;flex:none;width:20px;min-width:20px;height:36px;min-height:36px;padding:0}
body #masthead .mast-actions>.icon-link:before{content:"";position:absolute;inset:-4px -6px}
body #masthead .mast-action-divider{height:16px;margin:0;align-self:center}
body #masthead a.language-switch{min-width:40px;min-height:36px;gap:4px;padding:0}
body #masthead .language-switch>span{display:inline-block;min-width:18px;text-align:center}
@media(max-width:650px){body #masthead .mast-actions{gap:10px}}
@media(max-width:380px){body #masthead .mast-actions{gap:8px}}


/* Match the homepage title offset below the navigation at each breakpoint. */
:root{--page-title-space:100px}
#blog-page{padding-top:var(--page-title-space)}
#blog-page:has(>.blog-toolbar){padding-top:calc(var(--page-title-space) - 56px)}
@media(max-width:1000px){:root{--page-title-space:70px}}
@media(max-width:700px){:root{--page-title-space:60px}}
@media print{#blog-page,#blog-page:has(>.blog-toolbar){padding-top:0}}


html[lang=zh-Hans] #blog-page .blog-post-hero[lang=en] h1{line-height:1.3;letter-spacing:-.025em}
html[lang=zh-Hans] #blog-page .blog-prose[lang=en]{line-height:1.8}
html[lang=zh-Hans] #blog-page .blog-prose[lang=en] h2{letter-spacing:-.02em}
html[lang=zh-Hans] #blog-page .blog-post-card[lang=en] .blog-card-title{letter-spacing:-.012em}


#blog-page .blog-hero>.page-eyebrow{font:400 16px/24px Inter,'Microsoft YaHei',sans-serif;color:var(--muted,#6b7280);margin:0 0 16px;padding:0;text-align:center;letter-spacing:0;text-transform:none}
#blog-page{padding-top:calc(var(--page-title-space,100px) - 40px)}
@media print{#blog-page{padding-top:0}}