:root {
  --bg: #0b0f14;
  --bg-elev: #0f141a;
  --text: #e6edf3;
  --muted: #9fb2c3;
  --brand: #7cc4ff;
  --brand-2: #a1ffdd;
  --accent: #ffd580;
  --border: #1e2a36;
  --code-bg: #0a1117;
  --kbd-bg: #182331;
  --ok: #5ee6a8;
  --warn: #ffd166;
  --danger: #ff6b6b;
  --shadow: 0 6px 28px rgba(0,0,0,.35);
}

@media (prefers-color-scheme: light) {
  :root{
    --bg:#f6f8fb; --bg-elev:#ffffff; --text:#0e1621; --muted:#536274; --brand:#007aff; --brand-2:#06c167; --accent:#8b5cf6; --border:#e6eaf0; --code-bg:#f3f5f9; --kbd-bg:#e8ecf3; --shadow:0 6px 28px rgba(14,22,33,.08)
  }
}

*{box-sizing:border-box}
html{height:100%}
body{
  min-height:100%;
  display:flex;
  flex-direction:column;
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
}

.container{flex:1; max-width:1080px; margin:0 auto; padding:24px}

header.hero{
  background: radial-gradient(1200px 500px at 10% -10%, rgba(124,196,255,.15), transparent),
              radial-gradient(900px 400px at 90% 0%, rgba(161,255,221,.12), transparent),
              linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:5; backdrop-filter:saturate(1.1) blur(10px);
  flex-shrink:0;
}

.hero-inner{display:flex; align-items:center; gap:24px; padding:14px 24px}
.hero-inner > div:first-child{flex:1}

h1.title{margin:0; font-size:clamp(22px, 3vw, 34px); line-height:1.2}

.badge{display:inline-flex; gap:8px; align-items:center; border:1px solid var(--border); padding:6px 10px; border-radius:999px; background:var(--bg-elev); box-shadow:var(--shadow);}
.badge .dot{width:8px;height:8px;border-radius:50%;background:var(--brand)}

.actions{display:flex; gap:10px; flex-wrap:wrap}

.btn{appearance:none; border:1px solid var(--border); background:var(--bg-elev); color:var(--text); padding:10px 14px; border-radius:12px; cursor:pointer; font-weight:600; box-shadow:var(--shadow)}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:linear-gradient(180deg, rgba(124,196,255,.18), rgba(124,196,255,.08)); border-color:rgba(124,196,255,.4)}

.grid{display:grid; grid-template-columns: 280px 1fr; gap:28px}

nav.toc{position:sticky; top:78px; align-self:start; max-height:calc(100vh - 96px); overflow:auto; padding-right:6px}
nav.toc .card{background:var(--bg-elev); border:1px solid var(--border); border-radius:16px; padding:16px}
nav.toc h3{margin:0 0 10px 0; font-size:14px; color:var(--muted); letter-spacing:.4px; text-transform:uppercase}
nav.toc a{display:block; padding:6px 8px; border-radius:8px; color:var(--text); text-decoration:none; font-size:15px}
nav.toc a:hover{background:rgba(124,196,255,.12)}

main article{background:var(--bg-elev); border:1px solid var(--border); border-radius:16px; padding:24px; box-shadow:var(--shadow)}
main article ol li{font-size:18px; padding:10px 0; line-height:1.6}
main article ol li a{font-weight:500}

h2{margin-top:34px; border-top:1px dashed var(--border); padding-top:20px}
h2 .tag{font-size:.8em; color:var(--muted); margin-left:8px}
h3{margin-top:22px}

p, li{color:var(--text)}

.note{border-left:4px solid var(--brand); padding:10px 14px; background:linear-gradient(90deg, rgba(124,196,255,.12), transparent); border-radius:8px}
.warn{border-left-color:var(--warn); background:linear-gradient(90deg, rgba(255,209,102,.15), transparent)}
.ok{border-left-color:var(--ok); background:linear-gradient(90deg, rgba(94,230,168,.12), transparent)}

pre{background:var(--code-bg); border:1px solid var(--border); border-radius:14px; padding:14px 14px; overflow:auto; position:relative}
code{font:13.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Monaco, "JetBrains Mono", Consolas, "Liberation Mono", monospace; background:var(--kbd-bg); padding:2px 6px; border-radius:6px; border:1px solid var(--border)}
pre code{background:transparent; padding:0; border:none; border-radius:0; display:block; padding:0}
h1 code, h2 code, h3 code{font-size:0.9em; background:rgba(124,196,255,.12); border-color:rgba(124,196,255,.2); color:var(--brand)}

.code-actions{position:absolute; top:8px; right:8px; display:flex; gap:6px}
.copy{
  border:1px solid rgba(124,196,255,.5);
  background:rgba(30,42,54,.85);
  color:#a1ffdd;
  border-radius:10px;
  padding:6px 12px;
  cursor:pointer;
  font-size:12px;
  font-weight:600;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.copy:hover{
  background:rgba(124,196,255,.3);
  border-color:rgba(161,255,221,.7);
  color:#fff;
  transform:translateY(-1px);
  box-shadow: 0 4px 12px rgba(124,196,255,.4);
}

kbd{background:var(--kbd-bg); border:1px solid var(--border); border-bottom-width:2px; border-radius:6px; padding:0 6px; font:12px/1.6 ui-monospace, monospace}

ul.check>li{list-style:none; position:relative; padding-left:28px}
ul.check>li::before{content:"✓"; position:absolute; left:0; top:0; color:var(--ok); font-weight:800}

a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
a code{background:rgba(124,196,255,.15); border-color:rgba(124,196,255,.3); color:var(--brand-2); font-weight:500}

.pill{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background: rgba(124,196,255,.12); border: 1px solid var(--border)}
.row{display:flex; gap:10px; flex-wrap: wrap}

footer{
  color:var(--muted);
  text-align:center;
  padding:30px 20px;
  border-top:2px solid var(--border);
  margin-top:40px;
  font-size:14px;
  line-height:1.6;
  flex-shrink:0;
  background:rgba(11,15,20,.5);
}
footer a{color:var(--muted)}
footer a:hover{color:var(--brand)}
footer .company{font-weight:600; margin-bottom:8px}
footer .phones{margin-top:4px}

@media (prefers-color-scheme: light) {
  footer{background:rgba(246,248,251,.8)}
}

@media (max-width: 980px){.grid{grid-template-columns:1fr}}

@media print{
  header.hero, .actions, nav.toc{display:none}
  body{background:#fff; color:#000}
  main article{box-shadow:none; border-color:#ccc}
}