:root{--font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue","Segoe UI",Inter,Roboto,system-ui,sans-serif;
--primary:#CFBCFF;--on-primary:#381E72;--pc:#4F378B;--on-pc:#EADDFF;--sc:#4A4458;--on-sc:#E8DEF8;
--surface:#141218;--s1:#211F26;--s2:#2B2930;--s3:#36343B;--on:#E6E0E9;--var:#CAC4D0;--outline:#938F99;--ov:#49454F;--err:#F2B8B5}
*{box-sizing:border-box;margin:0}
html{background:var(--surface);color:var(--on);font:400 16px/24px var(--font);-webkit-font-smoothing:antialiased}
body{min-height:100vh}
a{color:var(--primary);text-decoration:none}a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
svg{width:24px;height:24px;fill:currentColor;flex:none}
.wrap{width:min(1040px,calc(100% - 32px));margin:0 auto}
header.nav{display:flex;align-items:center;gap:8px;height:64px}
.brand{display:flex;align-items:center;gap:12px;font:600 20px var(--font);color:var(--on)}
.brand:hover{text-decoration:none}
.mark{width:36px;height:36px;border-radius:12px;background:var(--pc);color:var(--on-pc);display:grid;place-items:center}
.mark svg{width:22px;height:22px}
.nav nav{margin-left:auto;display:flex;gap:4px}
.nav nav a{padding:8px 16px;border-radius:20px;color:var(--var)}
.nav nav a:hover,.nav nav a[aria-current]{background:var(--sc);color:var(--on-sc);text-decoration:none}
.hero{padding:72px 0 56px;text-align:center;background:radial-gradient(800px 380px at 50% 0,color-mix(in srgb,var(--pc) 40%,transparent),transparent 70%)}
.hero .mark{width:88px;height:88px;border-radius:28px;margin:0 auto 24px}.hero .mark svg{width:52px;height:52px}
h1{font:600 clamp(40px,8vw,72px)/1.05 var(--font);letter-spacing:-.03em}
.lead{max-width:560px;margin:16px auto 32px;color:var(--var);font-size:18px;line-height:28px}
.btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.btn{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 28px;border-radius:24px;font-weight:500;border:1px solid var(--outline);color:var(--primary)}
.btn:hover{text-decoration:none;background:color-mix(in srgb,var(--primary) 8%,transparent)}
.btn.fill{background:var(--primary);color:var(--on-primary);border-color:transparent}
.btn.fill:hover{background:color-mix(in srgb,var(--primary) 88%,#fff)}
.small{margin-top:16px;color:var(--var);font-size:13px}
section{padding:40px 0}
h2{font:600 28px/36px var(--font);margin-bottom:24px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.card{padding:24px;border-radius:24px;background:var(--s1)}
.card h3{font:600 18px/24px var(--font);margin:12px 0 8px}
.card p{color:var(--var);font-size:15px;line-height:22px}
.ico{width:48px;height:48px;border-radius:16px;background:var(--sc);color:var(--on-sc);display:grid;place-items:center}
.note{padding:20px 24px;border-radius:24px;background:var(--s2);color:var(--var)}
.note b{color:var(--on)}
footer{margin-top:40px;padding:32px 0;border-top:1px solid var(--ov);color:var(--var);font-size:14px}
/* каталог */
.search{display:flex;gap:8px;margin:0 0 24px}
.search input{flex:1;height:52px;padding:0 24px;border-radius:26px;border:0;background:var(--s2);color:var(--on);font:400 16px var(--font)}
.search input:focus{outline:0;box-shadow:inset 0 0 0 2px var(--primary)}
.ext{display:flex;flex-direction:column;gap:12px}
.ext .top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.ext h3{margin:0}.ver{color:var(--var);font-size:13px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{padding:2px 10px;border-radius:8px;border:1px solid var(--ov);color:var(--var);font-size:12px;line-height:20px}
.chip.warn{border-color:transparent;background:#8C1D18;color:#F9DEDC}
.ext .btn{height:40px;padding:0 20px;align-self:flex-start;margin-top:auto}
pre{padding:16px;border-radius:16px;background:var(--s2);overflow:auto;font:13px/20px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.empty{padding:48px 0;text-align:center;color:var(--var)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}