/* VB Knowledgebase: токены 1:1 со style-reference Notion (DESIGN(10).md) + слои свечения/3D/моушена по брифу */
:root{
 --blue:#0075de;--paper:#f6f5f4;--white:#fff;--ink:#000;--charcoal:#111;--stone:#757575;--graphite:#615d59;--slate:#696969;
 --sky-tint:#e6f3fe;--marigold:#ffb110;--coral:#f64932;--saffron:#e89d01;--mocha:#b18164;--signal:#097fe8;--sky:#62aef0;--midnight:#02093a;--peach:#f6d5b8;
 --line:rgba(0,0,0,.08);--line2:rgba(0,0,0,.14);--t95:rgba(0,0,0,.95);--t60:rgba(0,0,0,.6);--t54:rgba(0,0,0,.54);--t40:rgba(0,0,0,.4);
 --bg:var(--paper);--surface:#fff;--text:#000;--body:var(--graphite);--soft:#f1f1ef;
 --sans:'Inter',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
 --serif:'Source Serif 4',Georgia,serif;--mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
 --r-card:12px;--r-btn:8px;--r-sm:4px;--max:1240px;--gap:80px;
 --ease:cubic-bezier(.2,.8,.2,1);--spring:cubic-bezier(.34,1.56,.64,1);
 --sh-nav:0 .7px 1.462px rgba(0,0,0,.015),0 3px 9px rgba(0,0,0,.03);--sh-ui:0 4px 12px rgba(0,0,0,.1);
 --fs-body:16px;--col:720px
}
html[data-fs=l]{--fs-body:18px}html[data-fs=xl]{--fs-body:20px}html[data-w=wide]{--col:900px}
html[data-theme=dark]{--bg:#191919;--surface:#202020;--text:#f1f1ef;--body:#c9c6c2;--line:rgba(255,255,255,.1);--line2:rgba(255,255,255,.18);--soft:#2a2a2a;--t95:rgba(255,255,255,.92);--t60:rgba(255,255,255,.62);--t54:rgba(255,255,255,.58);--t40:rgba(255,255,255,.42);--sky-tint:#1d2a38}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--text);font:400 var(--fs-body)/1.5 var(--sans);font-feature-settings:"lnum";-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:6px}
code,kbd,pre{font-family:var(--mono)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--blue);color:#fff;padding:8px 14px;border-radius:8px}.skip:focus{left:8px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.ic{width:20px;height:20px;flex:none}.ic.sm{width:16px;height:16px}.ic.xs{width:14px;height:14px}
.muted{color:var(--t60)}.small{font-size:14px}

/* buttons: Notion spec 8px radius, 14px/500, 6px 15px */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;font-size:15px;font-weight:500;line-height:1.3;padding:7px 15px;border-radius:var(--r-btn);transition:background .2s ease,transform .2s var(--spring),box-shadow .3s ease,color .2s}
.btn:active{transform:translateY(1px) scale(.98)}
.btn-blue{background:var(--blue);color:#fff}.btn-blue:hover{background:#005bab}
.btn-ghost{background:var(--sky-tint);color:var(--blue)}.btn-ghost:hover{background:#d4e9fd}
html[data-theme=dark] .btn-ghost{color:#62aef0}
.btn-text{color:var(--t95)}.btn-text:hover{background:rgba(0,0,0,.05)}
.btn-dark{background:#000;color:#fff}.btn-dark:hover{background:#222}
.btn-white{background:#fff;color:#000;border:1px solid var(--line)}
.btn-l{font-size:16px;padding:10px 20px}.btn-s{font-size:14px;padding:6px 12px}
.glow{position:relative;isolation:isolate}
.glow::after{content:"";position:absolute;inset:-6px;border-radius:14px;z-index:-1;background:radial-gradient(60% 80% at 50% 50%,rgba(0,117,222,.45),transparent 70%);filter:blur(10px);opacity:.0;transition:opacity .35s ease}
.glow:hover::after,.glow:focus-visible::after{opacity:1}
@media (prefers-reduced-motion:no-preference){.glow::after{animation:breathe 3.6s ease-in-out infinite}}
@keyframes breathe{0%,100%{opacity:.25;transform:scale(.96)}50%{opacity:.6;transform:scale(1.04)}}
.lnk{display:inline-flex;align-items:center;gap:6px;color:var(--blue);font-weight:500;font-size:15px}
.lnk .ic{transition:transform .2s ease}.lnk:hover .ic{transform:translateX(3px)}
kbd{font-size:11px;border:1px solid var(--line2);border-radius:4px;padding:1px 5px;color:var(--t54);background:var(--surface)}

/* nav: 64px sticky, hairline, Notion muted links */
.nav{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);transition:box-shadow .2s}
.nav.sc{box-shadow:var(--sh-nav);border-bottom:1px solid var(--line)}
.nav-in{max-width:1440px;margin:0 auto;height:64px;padding:0 20px;display:flex;align-items:center;gap:12px}
.brand{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:16px;letter-spacing:-.01em;white-space:nowrap}
.logo-mark{width:28px;height:28px;transition:transform .5s var(--spring)}.brand:hover .logo-mark{transform:rotate(-8deg) scale(1.06)}
html[data-theme=dark] .logo-mark rect{fill:#191919;stroke:#f1f1ef}html[data-theme=dark] .logo-mark path{stroke:#f1f1ef}
.nav-links{display:flex;align-items:center;gap:2px;margin-left:12px}
.nl{display:inline-flex;align-items:center;gap:4px;color:var(--t54);font-size:15px;font-weight:500;padding:8px 12px;border-radius:8px;transition:color .2s,background .2s}
.nl:hover,.dd-btn[aria-expanded=true]{color:var(--t95);background:rgba(0,0,0,.04)}
.nav-act{margin-left:auto;display:flex;align-items:center;gap:6px}
.srch-btn{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 8px 0 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--t54);font-size:14px;transition:border-color .2s,box-shadow .2s}
.srch-btn:hover{border-color:var(--line2);box-shadow:0 0 0 4px rgba(0,117,222,.08)}
.srch-btn .ic{width:16px;height:16px}
.burger{display:none;width:38px;height:38px;align-items:center;justify-content:center;border-radius:8px}
.dd{position:relative}
.mm{position:absolute;top:calc(100% + 8px);left:-12px;width:560px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.1);padding:10px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s,transform .25s var(--ease),visibility .2s}
.dd.open .mm{opacity:1;visibility:visible;transform:none}
.mm-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.mm-i{display:flex;gap:10px;align-items:flex-start;padding:9px 10px;border-radius:8px;transition:background .15s}
.mm-i:hover{background:var(--soft)}
.mm-i b{display:block;font-size:14px;font-weight:600}.mm-i small{display:block;font-size:13px;color:var(--t54)}
.mm-dot{width:22px;height:22px;border-radius:6px;background:var(--c);flex:none;margin-top:1px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.mm-all{display:flex;align-items:center;gap:6px;margin:6px 4px 2px;padding:9px 8px 4px;border-top:1px solid var(--line);font-size:14px;font-weight:500;color:var(--blue)}
.mob[hidden]{display:none}
.mob{border-top:1px solid var(--line);padding:12px 20px 20px;display:grid;gap:2px;background:var(--bg)}
.mob a{padding:10px 4px;font-weight:500}.mob hr{border:0;border-top:1px solid var(--line);margin:6px 0}.mob .btn{margin-top:8px;padding:12px}
.rprog{position:fixed;left:0;right:0;top:0;height:2px;z-index:50;pointer-events:none}.rprog i{display:block;height:100%;width:100%;background:var(--blue);transform-origin:0 50%;transform:scaleX(0)}

/* type: Notion scale with aggressive negative tracking */
.h-display{font-size:clamp(40px,6.2vw,80px);line-height:1.04;letter-spacing:-.045em;font-weight:700;margin:0;text-wrap:balance}
.h-display.s{font-size:clamp(34px,4.8vw,56px);letter-spacing:-.035em}
.h-sec{font-size:clamp(30px,4vw,54px);line-height:1.06;letter-spacing:-.035em;font-weight:700;margin:0 0 14px;text-wrap:balance}
.h-sec.s{font-size:clamp(24px,2.6vw,32px);letter-spacing:-.025em}
.h-sec.on-dark{color:#fff}
.h-sub,.h-lede{font-family:var(--serif);font-size:clamp(18px,1.6vw,21px);line-height:1.5;color:var(--body);margin:18px auto 0;max-width:620px}
.h-lede{margin:0 0 40px;max-width:640px}
.hl-pill{display:inline-block;background:var(--pc,var(--peach));border-radius:9999px;padding:0 .32em .06em;line-height:1.08;transform:rotate(-1.5deg);position:relative}
.hl-pill span{display:inline-block;transition:transform .45s var(--spring),opacity .3s}
.hl-pill.out span{transform:translateY(-40%);opacity:0}.hl-pill.in span{transform:translateY(40%);opacity:0;transition:none}
.pill-cat{display:inline-flex;align-items:center;width:max-content;max-width:100%;border-radius:9999px;padding:2px 10px;font-size:12.5px;font-weight:500;line-height:1.5;background:var(--c,var(--soft));color:var(--fg,var(--t95))}
.sep{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.5;display:inline-block;margin:0 8px;vertical-align:middle}

/* reveal & motion */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}
.rv.on{opacity:1;transform:none}
.float{animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.tilt{transform-style:preserve-3d;transition:transform .35s var(--ease),box-shadow .35s ease}
.spot{position:relative;isolation:isolate;overflow:hidden}
.spot::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.55),transparent 60%)}
.spot:hover::before{opacity:1}
.spot>*{position:relative;z-index:1}

/* hero */
.hero{padding:56px 0 24px;text-align:center;overflow:hidden}
.hero-in{display:flex;flex-direction:column;align-items:center}
.ava-row{display:flex;gap:6px;margin-bottom:26px}
.ava{width:48px;height:48px;border-radius:50%;border:2px solid var(--b);background:#fff;overflow:hidden;display:block;opacity:0;transform:translateY(16px) scale(.6)}
.ava img{width:100%;height:100%;object-fit:cover}
.ava-row.on .ava{animation:pop .7s var(--spring) forwards;animation-delay:calc(var(--i)*70ms)}
.ava-row.on .ava:hover{animation:none;opacity:1;transform:translateY(-6px) rotate(-6deg)}
@keyframes pop{to{opacity:1;transform:none}}
.h-cta{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:28px}
.app-stage{perspective:1600px;margin:48px auto 0;max-width:1120px}
.app{background:#fff;border-radius:12px;box-shadow:var(--sh-ui),0 30px 80px -30px rgba(2,9,58,.35);border:1px solid var(--line);overflow:hidden;text-align:left;color:#000;transform:rotateX(18deg) scale(.94);transform-origin:50% 0;transition:transform .2s linear;will-change:transform}
.app-top{height:40px;display:flex;align-items:center;gap:14px;padding:0 14px;border-bottom:1px solid rgba(0,0,0,.06);font-size:13px;color:rgba(0,0,0,.6)}
.dots{display:flex;gap:6px}.dots i{width:10px;height:10px;border-radius:50%;background:#e3e2e0}
.app-crumb{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.app-share{margin-left:auto}
.app-body{display:grid;grid-template-columns:240px 1fr;min-height:470px}
.app-side{background:#f7f7f5;border-right:1px solid rgba(0,0,0,.06);padding:12px 8px;font-size:13.5px;color:rgba(0,0,0,.66)}
.sb-search{display:flex;align-items:center;gap:6px;padding:6px 8px;color:rgba(0,0,0,.45)}
.sb-h{font-size:11.5px;font-weight:600;color:rgba(0,0,0,.42);padding:14px 8px 4px}
.sb-i,.sb-l{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:5px 8px;border-radius:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .15s}
.sb-i:hover,.sb-l:hover{background:rgba(0,0,0,.05)}.sb-i.on{background:rgba(0,0,0,.07);color:#000;font-weight:500}
.sb-ic{width:14px;height:14px;border-radius:4px;background:var(--c);flex:none}
.app-doc{position:relative;min-width:0}
.doc-cover{height:92px;background:var(--c);transition:background .4s ease;background-image:radial-gradient(rgba(255,255,255,.35) 1px,transparent 1.2px);background-size:14px 14px}
.doc-in{padding:20px 44px 28px;max-width:720px;transition:opacity .25s ease,transform .3s var(--ease)}
.doc-in.sw{opacity:0;transform:translateY(8px)}
.doc-t{font-size:30px;line-height:1.15;letter-spacing:-.025em;margin:0 0 14px;font-weight:700}
.doc-props{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;font-size:13.5px;color:rgba(0,0,0,.5);margin-bottom:14px;align-items:center}
.doc-props span{display:inline-flex;gap:6px;align-items:center}.doc-props b{font-weight:400;color:#000}
.doc-l{font-size:15px;color:#37352f;margin:0 0 14px}
.doc-code,.mini-code,.code{background:#f7f6f3;border-radius:8px;border:1px solid rgba(0,0,0,.06);overflow:hidden;position:relative}
.dc-h{display:flex;align-items:center;gap:10px;padding:7px 12px;font-size:12px;color:rgba(0,0,0,.5);font-family:var(--sans)}
.dc-copy{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:12px;color:rgba(0,0,0,.5);padding:2px 6px;border-radius:5px;transition:background .15s,color .15s}
.dc-copy:hover{background:rgba(0,0,0,.06);color:#000}.dc-copy.ok{color:#0f7b3f}
pre{margin:0;padding:4px 16px 16px;overflow:auto;font-size:13px;line-height:1.6;tab-size:4}
html[data-wrap="1"] pre{white-space:pre-wrap;word-break:break-word}
.t-k{color:#0b57a4}.t-s{color:#a3412b}.t-c{color:#6b8e5a;font-style:italic}.t-n{color:#9a5b00}
.doc-call{display:flex;gap:10px;align-items:flex-start;background:#fbf3db;border-radius:8px;padding:12px 14px;font-size:14px;margin:14px 0}
.doc-call .ic{color:#b8860b;margin-top:2px}
.typing::after{content:"";display:inline-block;width:7px;height:14px;background:var(--blue);vertical-align:-2px;margin-left:1px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* logos */
.logos{padding:56px 0 24px}
.logos-h{text-align:center;color:var(--t54);font-size:15px;margin:0 0 26px}
.logo-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(12,1fr);gap:18px;align-items:center;justify-items:center;color:var(--t60)}
.lg{width:32px;height:32px;transition:transform .3s var(--spring),color .2s}
.logo-grid li:hover .lg{transform:translateY(-4px) scale(1.12);color:var(--text)}

/* sections */
.sec{padding:var(--gap) 0 0}
.sec:last-of-type{padding-bottom:var(--gap)}
.b22{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.bx{background:var(--c);border-radius:var(--r-card);padding:28px;color:#000;display:flex;flex-direction:column;gap:6px;min-height:340px}
.bx h3{font-size:24px;letter-spacing:-.02em;line-height:1.2;margin:0}.bx p{margin:0 0 14px;max-width:440px;color:rgba(0,0,0,.78)}
.bx-wide{grid-column:1/-1;display:grid;grid-template-columns:1fr 1.1fr;gap:32px;align-items:center;min-height:300px}
.bx-tx{display:flex;flex-direction:column;gap:8px;align-items:flex-start}.bx-tx h3{font-size:clamp(26px,2.8vw,40px)}
.bx-demo{background:#fff;border-radius:12px;box-shadow:var(--sh-ui);padding:14px;min-height:230px}
.sd-field{display:flex;align-items:center;gap:8px;border:1px solid rgba(0,0,0,.1);border-radius:8px;padding:9px 12px;font-size:15px;box-shadow:0 0 0 4px rgba(0,117,222,.1)}
.caret{width:2px;height:18px;background:var(--blue);animation:blink 1s steps(1) infinite}
.sd-res{margin-top:10px;display:grid;gap:4px}
.sd-r{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:8px;font-size:14px;opacity:0;transform:translateY(6px);animation:pop .4s var(--ease) forwards}
.sd-r:first-child{background:#f1f1ef}
.sd-r small{margin-left:auto;color:rgba(0,0,0,.5);font-size:12px;white-space:nowrap}
.mini-code{margin-top:auto;background:#fff;box-shadow:var(--sh-ui)}
.flip{perspective:1000px;margin-top:auto;height:150px}
.flip-in{position:relative;height:100%;transform-style:preserve-3d;transition:transform .8s var(--spring)}
.flip.on .flip-in{transform:rotateY(180deg)}
.fl{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#fff;border-radius:8px;box-shadow:var(--sh-ui);overflow:hidden}
.fl-b{transform:rotateY(180deg);background:#02093a;color:#e8ecff}
.fl-b .dc-h{color:rgba(255,255,255,.6)}.fl-b .t-k{color:#8ab8ff}.fl-b .t-c{color:#9bc48a}.fl-b .t-s{color:#ffb38a}
.bx .btn-white{align-self:flex-start;margin-top:12px}

/* tabs */
.tabs{display:grid;grid-template-columns:300px 1fr;gap:24px;align-items:start}
.tab-list{display:grid;gap:2px}
.tab{position:relative;text-align:left;padding:12px 16px;border-radius:10px;overflow:hidden;transition:background .2s}
.tab b{display:block;font-size:16px;font-weight:600;color:var(--t54);transition:color .2s}.tab small{display:block;font-size:13.5px;color:var(--t40)}
.tab:hover b,.tab.on b{color:var(--text)}.tab.on{background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.tbar{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--blue);transform:scaleX(0);transform-origin:0 50%}
.tab.on .tbar{animation:tbar 6s linear forwards}.tabs.paused .tab.on .tbar{animation-play-state:paused}
@keyframes tbar{to{transform:scaleX(1)}}
.tab-panes{position:relative;min-height:480px}
.pane{display:none;background:var(--c);color:var(--fg);border-radius:var(--r-card);padding:28px;grid-template-columns:1fr 1fr;gap:24px;align-items:center;min-height:480px}
.pane.on{display:grid;animation:paneIn .5s var(--ease)}
@keyframes paneIn{from{opacity:0;transform:translateY(10px) scale(.99)}}
.pane-art{background:#fff;border-radius:10px;padding:10px;box-shadow:var(--sh-ui);transform:rotate(-2deg);transition:transform .5s var(--spring)}
.pane:hover .pane-art{transform:rotate(0) scale(1.02)}
.pane-doc{background:#fff;color:#000;border-radius:10px;padding:20px;box-shadow:var(--sh-ui)}
.pd-h{display:flex;align-items:center;gap:10px;margin-bottom:8px}.pd-h b{font-size:18px}
.pd-ic{width:18px;height:18px;border-radius:5px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}
.pd-n{margin-left:auto;font-size:12.5px;color:rgba(0,0,0,.5)}
.pane-doc p{font-size:14.5px;color:#37352f;margin:0 0 12px}
.pd-list{display:grid;gap:2px;margin-bottom:12px}
.pd-list a{display:flex;gap:8px;align-items:flex-start;padding:7px 8px;border-radius:6px;font-size:14.5px;transition:background .15s}
.pd-list a:hover{background:#f1f1ef}.pd-list .ic{margin-top:3px;color:rgba(0,0,0,.45)}

/* dark card + glow */
.dark-card{background:var(--midnight);color:#fff;border-radius:var(--r-card);padding:56px;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;position:relative;overflow:hidden;isolation:isolate}
.dark-card::before{content:"";position:absolute;width:520px;height:520px;right:-120px;top:-160px;border-radius:50%;background:radial-gradient(circle,rgba(0,117,222,.55),transparent 65%);filter:blur(30px);z-index:-1}
.dark-card::after{content:"";position:absolute;width:380px;height:380px;left:-140px;bottom:-200px;border-radius:50%;background:radial-gradient(circle,rgba(255,177,16,.28),transparent 65%);filter:blur(30px);z-index:-1}
@media (prefers-reduced-motion:no-preference){.dark-card::before{animation:drift 12s ease-in-out infinite alternate}}
@keyframes drift{to{transform:translate(-60px,50px) scale(1.1)}}
.dk-l{font-family:var(--serif);font-size:19px;color:rgba(255,255,255,.72);margin:0 0 26px;max-width:460px}
.anat{list-style:none;margin:0;padding:0;display:grid;gap:4px;counter-reset:a}
.anat li{display:grid;grid-template-columns:auto 1fr;column-gap:14px;padding:12px 14px;border-radius:10px;cursor:default;transition:background .25s;counter-increment:a}
.anat li::before{content:counter(a);grid-row:span 2;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:600;border:1px solid rgba(255,255,255,.25);transition:all .25s}
.anat b{font-size:17px}.anat span{color:rgba(255,255,255,.62);font-size:14.5px}
.anat li.on{background:rgba(255,255,255,.07)}.anat li.on::before{background:var(--blue);border-color:var(--blue);box-shadow:0 0 18px rgba(0,117,222,.9)}
.dk-sheet{background:#fff;border-radius:12px;padding:22px;display:grid;gap:14px;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.sh-row{display:grid;gap:7px;padding:10px;border-radius:8px;transition:box-shadow .35s,background .35s,transform .35s var(--spring)}
.sh-row i{display:block;height:9px;border-radius:5px;background:#e9e7e4}
.sh-code{background:#f7f6f3}.sh-code i{background:#d7e6f7}.sh-call{background:#fbf3db}.sh-call i{background:#f2dfa6}
.sh-row.on{background:#eef6ff;box-shadow:0 0 0 2px var(--blue),0 0 28px rgba(0,117,222,.55);transform:scale(1.03)}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.st{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:24px;position:relative;overflow:hidden}
.st::after{content:"";position:absolute;right:-30px;top:-30px;width:100px;height:100px;border-radius:50%;background:var(--c,var(--sky-tint));opacity:.9;transition:transform .5s var(--spring)}
.st:hover::after{transform:scale(1.25)}
.st b{display:block;font-size:clamp(40px,4.4vw,60px);letter-spacing:-.04em;line-height:1;font-weight:700;position:relative;z-index:1}
.st span{display:block;color:var(--t60);margin-top:8px;font-size:15px;position:relative;z-index:1}

/* carousel cards */
.row-h{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px}.row-h .h-sec{margin:0}
.car-nav{display:flex;gap:8px}
.cbtn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line2);display:grid;place-items:center;background:var(--surface);transition:transform .2s var(--spring),background .2s}
.cbtn:hover{transform:scale(1.08)}
.car{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(280px,320px);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px 18px;scrollbar-width:thin}
.car>*{scroll-snap-align:start}
.acard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;display:flex;flex-direction:column}
.acard:hover{box-shadow:0 14px 30px -12px rgba(0,0,0,.18)}
.ac-top{position:relative;background:var(--c);aspect-ratio:16/9;display:block;overflow:hidden}
.ac-top .pill-cat{position:absolute;left:12px;top:12px;z-index:1;background:#fff;color:#000}
.ac-img{position:absolute;inset:8% 10% 0;width:80%;height:auto;margin:auto;border-radius:8px 8px 0 0;background:#fff;object-fit:cover;object-position:center;transition:transform .5s var(--spring)}
.acard:hover .ac-img{transform:translateY(-6px) rotate(-1deg)}
.ac-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.ac-body b{font-size:17px;line-height:1.3;letter-spacing:-.01em}
.ac-lead{color:var(--body);font-size:14.5px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ac-meta{margin-top:auto;display:flex;align-items:center;gap:5px;font-size:13px;color:var(--t54)}

/* blog */
.bl{display:grid;grid-template-columns:1.5fr 1fr;gap:16px}
.bl-feat{display:grid;grid-template-rows:auto 1fr;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.bl-img{width:100%;aspect-ratio:16/8;object-fit:cover;background:var(--peach)}
.bl-tx{padding:22px 24px;display:flex;flex-direction:column;gap:10px}.bl-tx b{font-size:24px;letter-spacing:-.02em;line-height:1.2}.bl-tx>span:not(.pill-cat):not(.ac-meta){color:var(--body)}
.bl-side{display:flex;flex-direction:column;gap:16px}
.bl-row{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:22px;display:flex;flex-direction:column;gap:10px;flex:1;transition:transform .3s var(--spring),box-shadow .3s}
.bl-row .ac-lead{-webkit-line-clamp:2}
.bl-row:hover{transform:translateY(-3px);box-shadow:0 12px 26px -14px rgba(0,0,0,.2)}.bl-row b{font-size:19px;line-height:1.25;letter-spacing:-.015em}
.blog-top{grid-template-columns:1fr}.blog-top .bl-feat{grid-template-columns:1.1fr 1fr;grid-template-rows:none}.blog-top .bl-img{height:100%;aspect-ratio:auto}
.post-g{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:16px}
.post-c{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:16px;display:flex;flex-direction:column;gap:10px}
.post-c b{font-size:20px;line-height:1.25;letter-spacing:-.015em}
.pc-art{background:var(--c);border-radius:8px;aspect-ratio:16/8;display:grid;place-items:center;overflow:hidden}
.pc-img{width:62%;mix-blend-mode:multiply;transition:transform .5s var(--spring)}.post-c:hover .pc-img{transform:scale(1.06) rotate(-2deg)}

/* quote */
.quote-split{display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:center}
.quote{margin:0}
.quote blockquote{margin:0;font-family:var(--serif);font-size:clamp(24px,2.6vw,34px);line-height:1.3;letter-spacing:-.01em}
.quote blockquote::before{content:"«";color:var(--blue)}.quote blockquote::after{content:"»";color:var(--blue)}
.quote figcaption{margin-top:20px;display:flex;flex-direction:column;font-size:15px}.quote figcaption span{color:var(--t54)}
.q-art{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:12px}
html[data-theme=dark] .q-art,html[data-theme=dark] .ac-img,html[data-theme=dark] .pane-art{background:#fff}

/* toggles (Notion toggle blocks) */
.faq-w{max-width:880px}
.tgs{display:grid;gap:0;border-top:1px solid var(--line)}
.tg{border-bottom:1px solid var(--line)}
.tg summary{list-style:none;cursor:pointer;display:flex;gap:10px;align-items:flex-start;padding:16px 4px;font-weight:600;font-size:17px}
.tg summary::-webkit-details-marker{display:none}
.tg-ic{margin-top:3px;transition:transform .25s var(--spring)}.tg[open] .tg-ic{transform:rotate(90deg)}
.tg-b{padding:0 4px 16px 30px;color:var(--body)}.tg-b p{margin:0}

/* cta */
.cta-in{text-align:center;display:flex;flex-direction:column;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:48px 24px 56px;position:relative;overflow:hidden}
.cta-img{width:min(380px,80%);margin-bottom:8px}

/* footer */
.foot{border-top:1px solid var(--line);padding:56px 0 28px;margin-top:var(--gap);font-size:14.5px}
.foot-in{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:32px}
.foot h3{font-size:14px;font-weight:600;margin:0 0 10px}
.foot-in>div>a:not(.brand){display:block;color:var(--t60);padding:4px 0;transition:color .15s}.foot-in>div>a:hover{color:var(--text)}
.foot-brand p{color:var(--t60);max-width:300px;margin:12px 0}
.foot-rss{display:inline-flex!important;align-items:center;gap:6px}
.foot-bot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:40px;padding-top:20px;border-top:1px solid var(--line);color:var(--t54);font-size:13.5px}

/* search modal */
.sm-wrap{position:fixed;inset:0;z-index:80;display:flex;justify-content:center;align-items:flex-start;padding:12vh 16px 16px}
.sm-wrap[hidden]{display:none}
.sm-back{position:absolute;inset:0;background:rgba(15,15,15,.45);animation:fade .2s}
.smod{position:relative;width:min(640px,100%);background:var(--surface);border-radius:12px;box-shadow:0 24px 70px rgba(0,0,0,.3);overflow:hidden;animation:pop .3s var(--spring);opacity:0;transform:translateY(10px) scale(.98)}
@keyframes fade{from{opacity:0}}
.sm-field{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.sm-field input{flex:1;border:0;outline:0;font:inherit;font-size:17px;background:none;color:var(--text);min-width:0}
.sm-field input::placeholder{color:var(--t40)}
.sm-res{max-height:52vh;overflow:auto;padding:6px}
.sr{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:8px}
.sr b{font-weight:500}.sr small{color:var(--t54);font-size:13px}
.sr.on,.sr:hover{background:var(--soft)}
.sr mark{background:#fbe7a6;color:inherit;border-radius:3px}
.sm-empty{padding:28px;text-align:center;color:var(--t60)}
.sm-foot{display:flex;gap:16px;padding:10px 16px;border-top:1px solid var(--line);font-size:12.5px;color:var(--t54)}

/* article (Notion page) */
.cover{height:220px;background:var(--c);position:relative;overflow:hidden;background-image:radial-gradient(rgba(255,255,255,.4) 1px,transparent 1.3px);background-size:16px 16px}
.cover-art{position:absolute;right:max(24px,calc((100vw - var(--max))/2 + 40px));bottom:-14px;width:300px;background:#fff;border-radius:10px 10px 0 0;padding:8px 8px 0;transform:rotate(-2deg);box-shadow:var(--sh-ui)}
.cover-img{border-radius:6px 6px 0 0;aspect-ratio:4/3;object-fit:cover}
.doc-wrap{display:grid;grid-template-columns:minmax(0,var(--col)) 260px;gap:64px;justify-content:center}
.doc-main{min-width:0;position:relative}
.doc-icon{width:72px;height:72px;border-radius:14px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;margin-top:-36px;box-shadow:var(--sh-ui);position:relative;z-index:2}
.doc-icon .ic{width:36px;height:36px;color:#000}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px;font-size:13.5px;color:var(--t54);margin:22px 0 10px}
.crumbs a:hover{color:var(--text)}.crumbs span{color:var(--t95)}
.doc-h1{font-size:clamp(32px,4vw,44px);line-height:1.12;letter-spacing:-.03em;margin:0 0 18px;font-weight:700;text-wrap:balance}
.props{display:grid;grid-template-columns:auto 1fr;gap:8px 22px;font-size:14.5px;color:var(--t54);padding-bottom:18px;border-bottom:1px solid var(--line);align-items:center}
.props>span{display:inline-flex;align-items:center;gap:7px}.props>b{font-weight:400;color:var(--text)}
.tags{display:flex;flex-wrap:wrap;gap:6px}.tagp{font-size:12.5px;background:var(--soft);border-radius:4px;padding:1px 7px}
.doc-lead{font-family:var(--serif);font-size:calc(var(--fs-body) + 4px);line-height:1.55;color:var(--body);margin:22px 0 16px}
.doc-act{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
[data-bookmark].on{background:var(--blue);color:#fff}
.ps h2{font-size:clamp(23px,2.3vw,28px);letter-spacing:-.02em;line-height:1.25;margin:40px 0 12px}
.ps p{margin:0 0 14px;color:var(--t95)}
.ps p code,.prose code,.callout code,.tg-b code{font-size:.88em;background:var(--soft);color:#c4554d;border-radius:4px;padding:1px 5px}
.ul{margin:0 0 14px;padding-left:22px}.ul li{margin:4px 0}.ul li::marker{color:var(--t40)}
.code{margin:16px 0 20px}
.code .cl{color:rgba(0,0,0,.38)}
html[data-theme=dark] .code,html[data-theme=dark] .doc-code{background:#262626;border-color:rgba(255,255,255,.08)}
html[data-theme=dark] .code pre{color:#e6e6e6}html[data-theme=dark] .code .dc-h,html[data-theme=dark] .code .dc-copy{color:rgba(255,255,255,.55)}
html[data-theme=dark] .t-k{color:#7cb7ff}html[data-theme=dark] .t-s{color:#f0a37b}html[data-theme=dark] .t-c{color:#8fbf7a}
.callout{display:flex;gap:12px;align-items:flex-start;background:var(--soft);border-radius:8px;padding:14px 16px;margin:16px 0;font-size:calc(var(--fs-body) - 1px)}
.callout .ic{margin-top:3px;flex:none}.callout a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.c-yel{background:#fbf3db}.c-yel .ic{color:#b8860b}.c-blue{background:#e7f3f8}.c-blue .ic{color:var(--blue)}
html[data-theme=dark] .c-yel{background:#3a3220}html[data-theme=dark] .c-blue{background:#1f2f3a}
.doc-aside{position:relative}
.toc-box{position:sticky;top:88px;padding-top:40px}
.toc-box>b{font-size:13px;font-weight:600;color:var(--t54)}
.toc{display:grid;gap:2px;margin-top:8px;border-left:1px solid var(--line)}
.toc a{font-size:13.5px;color:var(--t54);padding:4px 0 4px 12px;margin-left:-1px;border-left:2px solid transparent;transition:color .15s,border-color .15s;line-height:1.35}
.toc a:hover{color:var(--text)}.toc a.on{color:var(--text);border-left-color:var(--blue)}
.aside-cta{position:sticky;top:calc(88px + var(--tocH,380px));margin-top:24px;background:var(--sky-tint);border-radius:12px;padding:18px}
.aside-cta b{display:block;margin-bottom:4px}.aside-cta p{margin:0 0 12px;font-size:14px;color:var(--t60)}
.pn{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:48px 0 0}
.pn-i{border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:4px;background:var(--surface);transition:border-color .2s,transform .3s var(--spring)}
.pn-i:hover{border-color:var(--blue);transform:translateY(-2px)}.pn-i small{display:inline-flex;gap:4px;align-items:center;color:var(--t54);font-size:13px}.pn-r{text-align:right}.pn-r small{justify-content:flex-end}
.pn-i b{font-weight:500;font-size:15px}
.rel{margin-top:64px}.rel-g{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rel-i{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:10px;transition:transform .3s var(--spring),box-shadow .3s}
.rel-i:hover{transform:translateY(-3px);box-shadow:0 12px 26px -14px rgba(0,0,0,.2)}.rel-i b{font-size:17px;line-height:1.3}

/* page shells */
.pg-head{background:var(--c);color:#000;overflow:hidden}
.pg-hi{display:grid;grid-template-columns:1.3fr 1fr;gap:32px;align-items:center;padding-top:28px;padding-bottom:36px}
.pg-head .crumbs{color:rgba(0,0,0,.6);margin-top:0}.pg-head .crumbs span{color:#000}
.pg-head .h-sub{margin:14px 0 0;color:rgba(0,0,0,.75)}
.pg-art{background:#fff;border-radius:12px;padding:10px;box-shadow:var(--sh-ui);max-width:400px;justify-self:end;transform:rotate(2deg)}
.pg-body{padding-top:48px}
.prose{max-width:720px}.prose h2{font-size:26px;letter-spacing:-.02em;margin:32px 0 10px}.prose p{color:var(--t95)}.prose a{color:var(--blue)}
.sec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.sec-card{background:var(--c);color:var(--fg);border-radius:var(--r-card);padding:18px;display:flex;flex-direction:column;gap:14px;min-height:300px}
.sec-card.big{grid-column:span 2;flex-direction:row;align-items:center}
.sc-art{background:#fff;border-radius:10px;padding:8px;box-shadow:var(--sh-ui);display:block;transition:transform .45s var(--spring)}
.sec-card:hover .sc-art{transform:rotate(-2deg) scale(1.03)}
.sec-card.big .sc-art{width:48%;flex:none}
.sc-tx{display:flex;flex-direction:column;gap:8px}.sc-tx b{font-size:22px;letter-spacing:-.02em}.sc-tx>span:not(.sc-n){opacity:.8;font-size:15px}
.sc-n{display:inline-flex;align-items:center;gap:6px;font-weight:600;margin-top:4px}
.db-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.views{display:flex;background:var(--soft);border-radius:8px;padding:3px}
.vw{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:6px;font-size:14px;color:var(--t60)}
.vw.on{background:var(--surface);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{font-size:13.5px;padding:5px 12px;border-radius:9999px;border:1px solid var(--line2);color:var(--t60);transition:all .2s}
.chip[aria-pressed=true]{background:#000;color:#fff;border-color:#000}
html[data-theme=dark] .chip[aria-pressed=true]{background:#f1f1ef;color:#000}
.db-q{margin-left:auto;display:flex;align-items:center;gap:8px;border:1px solid var(--line2);border-radius:8px;padding:6px 10px;background:var(--surface);min-width:220px}
.db-q input{border:0;outline:0;font:inherit;font-size:14px;background:none;color:var(--text);flex:1;min-width:0}
.db-table{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.dbh,.dbr{display:grid;grid-template-columns:minmax(0,1fr) 170px 110px 80px;gap:12px;align-items:center;padding:11px 16px}
.db-table:not(:has(.dbr .pill-cat)) .dbh,.db-table:not(:has(.dbr .pill-cat)) .dbr{grid-template-columns:minmax(0,1fr) 110px 80px}
.dbh{font-size:13px;color:var(--t54);border-bottom:1px solid var(--line);background:var(--soft)}
.dbr{border-bottom:1px solid var(--line);transition:background .15s}.dbr:last-child{border-bottom:0}.dbr:hover{background:var(--soft)}
.dbr-t{display:flex;gap:8px;align-items:flex-start;min-width:0}.dbr-t .ic{margin-top:3px;color:var(--t40)}.dbr-t b{font-weight:500}
.dbr-lv,.dbr-m{font-size:14px;color:var(--t60)}
.db-gal{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.db-empty{display:flex;gap:8px;align-items:center;justify-content:center;padding:32px;color:var(--t60);background:var(--surface);border:1px dashed var(--line2);border-radius:12px}
.db-count{font-size:13.5px;color:var(--t54)}
.other{margin-top:56px}.chip-row{display:flex;flex-wrap:wrap;gap:8px}
.chip-l{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:9999px;background:var(--surface);border:1px solid var(--line);font-weight:500;font-size:14.5px;transition:transform .25s var(--spring)}
.chip-l::before{content:"";width:12px;height:12px;border-radius:4px;background:var(--c)}.chip-l:hover{transform:translateY(-2px)}
.set-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.set-c{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px}.set-c.wide{grid-column:1/-1}
.set-c h2{display:flex;align-items:center;gap:8px;font-size:17px;margin:0 0 14px}
.seg{display:inline-flex;flex-wrap:wrap;background:var(--soft);border-radius:8px;padding:3px;gap:2px}
.seg button{padding:7px 14px;border-radius:6px;font-size:14px;color:var(--t60)}.seg button.on{background:var(--surface);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.1)}
.bm-list{display:grid;gap:4px}.bm-list a{display:flex;gap:8px;align-items:center;padding:8px 10px;border-radius:8px}.bm-list a:hover{background:var(--soft)}
.bm-x{margin-left:auto;color:var(--t40)}
.fb{display:grid;grid-template-columns:1.4fr 1fr;gap:24px;align-items:start}
.fb-form{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:24px;display:grid;gap:16px}
.fld{display:grid;gap:6px}.fld label{font-weight:500;font-size:14.5px}
.fld input,.fld textarea{font:inherit;font-size:15px;color:var(--text);background:var(--surface);border:1px solid var(--line2);border-radius:8px;padding:10px 12px;transition:border-color .2s,box-shadow .2s}
.fld input::placeholder,.fld textarea::placeholder{color:var(--t54)}
.fld input:focus,.fld textarea:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,117,222,.18)}
.fld.bad input{border-color:#d1351b}.err{color:#b42318;font-size:13.5px;margin:0}
.fb-form .btn{justify-self:start}
.smp-g{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.smp{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:4px}
.smp h2{font-size:17px;margin:0 0 6px}.smp a{font-size:14.5px;color:var(--t60)}.smp a:hover{color:var(--blue)}
.nf{padding:40px 0 20px}.nf-in{text-align:center;display:flex;flex-direction:column;align-items:center}.nf-img{width:min(340px,80%)}

/* responsive */
@media (max-width:1100px){
 .nav-links{display:none}.burger{display:inline-flex}
 .logo-grid{grid-template-columns:repeat(6,1fr);row-gap:26px}
 .doc-wrap{grid-template-columns:minmax(0,1fr);gap:0}.doc-aside{display:none}
 .foot-in{grid-template-columns:1fr 1fr 1fr}.foot-brand{grid-column:1/-1}
}
@media (max-width:900px){
 :root{--gap:64px}
 .app-body{grid-template-columns:1fr}.app-side{display:none}.doc-in{padding:18px 20px 22px}
 .b22,.bx-wide{grid-template-columns:1fr}
 .tabs{grid-template-columns:1fr}.tab-list{display:flex;overflow-x:auto;gap:6px;padding-bottom:4px;scrollbar-width:none}
 .tab{flex:none;padding:9px 14px}.tab small{display:none}
 .pane{grid-template-columns:1fr;min-height:0}.tab-panes{min-height:0}
 .dark-card{grid-template-columns:1fr;padding:32px 22px;gap:28px}
 .stats{grid-template-columns:1fr 1fr}
 .bl,.quote-split,.blog-top .bl-feat,.pg-hi,.fb{grid-template-columns:1fr}
 .pg-art{justify-self:start;max-width:300px}
 .sec-grid,.db-gal,.smp-g,.rel-g{grid-template-columns:1fr 1fr}.sec-card.big{grid-column:1/-1}
 .post-g{grid-template-columns:1fr}
 .cover{height:160px}.cover-art{width:200px;right:16px}
}
@media (max-width:640px){
 .wrap{padding:0 16px}.nav-in{padding:0 12px;gap:6px}
 .hide-s{display:none}.srch-btn span,.srch-btn kbd{display:none}.srch-btn{padding:0 9px}
 .brand span{font-size:15px}
 .hero{padding-top:36px}.ava{width:38px;height:38px}.ava-row{gap:4px}
 .app{transform:none!important}.doc-t{font-size:22px}.doc-props{grid-template-columns:auto 1fr;font-size:12.5px}
 .logo-grid{grid-template-columns:repeat(4,1fr)}
 .bx{padding:20px;min-height:0}.bx-demo{min-height:0}
 .stats,.sec-grid,.db-gal,.smp-g,.rel-g,.set-grid,.pn{grid-template-columns:1fr}
 .sec-card.big{flex-direction:column;align-items:stretch}.sec-card.big .sc-art{width:auto}
 .dbh{display:none}.dbr,.db-table:not(:has(.dbr .pill-cat)) .dbr{grid-template-columns:1fr auto;row-gap:6px}
 .dbr .pill-cat{grid-column:1}.dbr-lv{grid-column:1}.dbr-m{grid-column:2;grid-row:1}
 .db-q{margin-left:0;min-width:0;width:100%}
 .foot-in{grid-template-columns:1fr 1fr}
 .row-h{align-items:center}.car{grid-auto-columns:82%}
 .cta-in{padding:36px 16px 40px}.btn-l{padding:10px 16px}
 .cover-art{display:none}.cover{height:110px}.doc-icon{width:60px;height:60px;margin-top:-30px}
 .props{gap:8px 14px;font-size:13.5px}
 .h-cta .btn{flex:1 1 auto}
}
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 .rv,.ava{opacity:1;transform:none}.app{transform:none}
}
.prose p,.prose li,.prose h2,.callout,.tg-b,.tg summary{overflow-wrap:anywhere}.prose code,.callout code,.tg-b code{overflow-wrap:anywhere;word-break:break-word}
article.doc{overflow-x:clip}.ps{min-width:0}.code,.code pre{max-width:100%}