/* Документация 366 TECH — в стилистике главной: тёмный фон, стекло, фиолетовый + мята. */
:root{
  --bg:#050608; --card:rgba(255,255,255,.035); --card-2:rgba(255,255,255,.06); --hair:rgba(255,255,255,.08);
  --text:#f2f4f9; --dim:#a6abbd; --mute:#6b7189; --violet:#8B5CF6; --violet-soft:#b9a3ff; --mint:#2FE0AC;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:90px}
body{margin:0; background:var(--bg); color:var(--text); font:16px/1.65 Inter, system-ui, sans-serif; -webkit-font-smoothing:antialiased}
a{color:var(--violet-soft); text-decoration:none} a:hover{color:#fff}
.glow{position:fixed; inset:-20% -10% auto; height:520px; z-index:0; pointer-events:none;
  background:radial-gradient(closest-side, rgba(139,92,246,.22), transparent 70%), radial-gradient(closest-side at 85% 30%, rgba(47,224,172,.12), transparent 70%)}

.top{position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px clamp(16px,4vw,40px); background:rgba(5,6,8,.72); backdrop-filter:blur(18px) saturate(140%); border-bottom:1px solid var(--hair)}
.brand{display:flex; align-items:center; gap:10px; color:var(--text); font:700 18px "Space Grotesk", sans-serif}
.brand .mark{display:grid; place-items:center; width:34px; height:34px; border-radius:10px; font-size:13px;
  background:linear-gradient(135deg,var(--violet),#4C4FE8); color:#fff}
.top nav{display:flex; align-items:center; gap:clamp(10px,2vw,26px); font-size:14px}
.top nav a{color:var(--dim); transition:color .25s}
.top nav a:hover,.top nav a[aria-current]{color:#fff}
.top .btn{color:#fff; padding:8px 16px; border-radius:999px; background:var(--violet); box-shadow:0 8px 24px -8px rgba(139,92,246,.7)}

.layout{position:relative; z-index:1; display:grid; grid-template-columns:250px 1fr; gap:clamp(20px,4vw,56px);
  max-width:1180px; margin:0 auto; padding:28px clamp(16px,4vw,40px) 60px}
.toc{position:sticky; top:86px; align-self:start; max-height:calc(100vh - 110px); overflow:auto}
.search input{width:100%; padding:11px 14px; border-radius:14px; border:1px solid var(--hair); background:var(--card);
  color:var(--text); font:inherit; font-size:14px; outline:none; transition:border-color .25s, background .25s}
.search input:focus{border-color:rgba(139,92,246,.6); background:var(--card-2)}
#toc-links{display:flex; flex-direction:column; margin-top:14px}
#toc-links a{position:relative; padding:7px 12px; border-radius:10px; color:var(--dim); font-size:14px; transition:color .2s, background .2s}
#toc-links a:hover{color:#fff; background:var(--card)}
#toc-links a.on{color:#fff; background:rgba(139,92,246,.14)}
#toc-links a.on::before{content:""; position:absolute; left:0; top:9px; bottom:9px; width:3px; border-radius:3px; background:var(--violet)}

.hero{padding:10px 0 18px}
.pill{display:inline-block; font-size:12px; font-weight:600; letter-spacing:.6px; text-transform:uppercase; color:var(--mint);
  border:1px solid rgba(47,224,172,.35); background:rgba(47,224,172,.08); padding:5px 12px; border-radius:999px}
h1{font:700 clamp(32px,5vw,52px)/1.05 "Space Grotesk", sans-serif; margin:16px 0 12px; letter-spacing:-.5px}
.lead{color:var(--dim); font-size:18px; max-width:640px; margin:0}
.card{background:var(--card); border:1px solid var(--hair); border-radius:24px; padding:clamp(18px,3vw,30px); margin:18px 0}
h2{font:700 24px/1.2 "Space Grotesk", sans-serif; margin:0 0 12px}
h3{font:600 17px/1.3 "Space Grotesk", sans-serif; margin:18px 0 6px}
p,li{color:#d6d9e4}
ul,ol{padding-left:22px} li{margin:6px 0}
.steps{counter-reset:s; list-style:none; padding:0}
.steps li{counter-increment:s; position:relative; padding:8px 0 8px 44px}
.steps li::before{content:counter(s); position:absolute; left:0; top:7px; width:30px; height:30px; border-radius:10px;
  display:grid; place-items:center; font:700 13px "Space Grotesk"; background:rgba(139,92,246,.16); color:var(--violet-soft)}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:8px 0}
.tile{background:rgba(255,255,255,.03); border:1px solid var(--hair); border-radius:18px; padding:16px; transition:transform .35s var(--ease), border-color .35s}
.tile:hover{transform:translateY(-3px); border-color:rgba(139,92,246,.4)}
.tile h3{margin:0 0 6px} .tile p{margin:0; font-size:14px; color:var(--dim)}
.note{font-size:14px; color:var(--dim); border-left:3px solid var(--mint); padding:4px 0 4px 12px; margin-top:12px}
details{border-top:1px solid var(--hair); padding:12px 0}
details:first-of-type{border-top:0}
summary{cursor:pointer; font-weight:600; list-style:none; display:flex; justify-content:space-between; align-items:center}
summary::after{content:"+"; color:var(--violet-soft); font-size:20px; transition:transform .3s var(--ease)}
details[open] summary::after{transform:rotate(45deg)}
details p{margin:8px 0 0; color:var(--dim)}
.empty{color:var(--dim); text-align:center; padding:40px 0}
.hide{display:none!important}

.reveal{opacity:0; transform:translateY(16px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1; transform:none; transition:none} html{scroll-behavior:auto}}

.foot{position:relative; z-index:1; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; max-width:1180px; margin:0 auto;
  padding:22px clamp(16px,4vw,40px) 40px; border-top:1px solid var(--hair); color:var(--mute); font-size:13px}
.foot a{color:var(--mute)} .foot a:hover{color:#fff}

@media (max-width:860px){
  .layout{grid-template-columns:1fr}
  .toc{position:relative; top:0; max-height:none}
  #toc-links{flex-direction:row; flex-wrap:wrap; gap:4px}
  .grid3{grid-template-columns:1fr}
  .top nav a:not(.btn):not([aria-current]){display:none}
}