#cc{
  --paper:#F4F3EE; --ink:#15181C; --lime:#C8F048; --muted:#5F666D;
  --card:#FFFFFF; --line:#E2E0D7; --line2:rgba(21,24,28,.06);
  --code-bg:#15181C; --code-fg:#EDECE6;
  --ok:#2F7D4F; --ok-bg:#EDF7F0; --warn:#8A5A00; --warn-bg:#FBF3E2; --fail-bg:#F7F0EE; --fail:#8A3B2C;
  --radius:18px; --radius-sm:11px;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  max-width:1180px;margin:0 auto;padding:0 20px;color:var(--ink)}
#cc *{box-sizing:border-box}
#cc p{text-wrap:pretty}
#cc h1,#cc h2,#cc h3,#cc h4,#cc strong,#cc b{text-wrap:balance}

/* переключатель ОС: прячем неподходящее, показанному не навязываем display */
#cc[data-os="mac"] [data-os="win"],#cc[data-os="win"] [data-os="mac"]{display:none}

/* ── герой ─────────────────────────────────────────────── */
#cc .cc-hero{padding:48px 0 26px}
#cc .cc-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;
  text-transform:uppercase;letter-spacing:.09em;color:var(--muted);margin-bottom:18px}
#cc .cc-eyebrow .tag{background:var(--lime);color:#15181C;padding:3px 9px;border-radius:6px;letter-spacing:.06em}
#cc .cc-hero h1{font-size:clamp(30px,4.8vw,58px);line-height:1.05;margin:0 0 18px;font-weight:800;
  letter-spacing:-.025em;max-width:16ch}
#cc .cc-lead{font-size:clamp(16.5px,1.7vw,20px);color:var(--muted);max-width:64ch;margin:0;line-height:1.5}
#cc .cc-lead b{color:var(--ink);font-weight:600}

#cc .cc-how{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:34px 0 0}
#cc .cc-step{border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:16px 16px 18px;background:var(--card)}
#cc .cc-step .n{font-family:var(--mono);font-size:11.5px;color:var(--muted);font-weight:600;letter-spacing:.03em}
#cc .cc-step h4{margin:8px 0 5px;font-size:15.5px;font-weight:700}
#cc .cc-step p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.45}

#cc .cc-need{margin:16px 0 0;border:1.5px solid var(--line);border-radius:var(--radius);background:var(--card);padding:20px 22px}
#cc .cc-need-h{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
#cc .cc-need ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
#cc .cc-need li{position:relative;padding-left:26px;font-size:14.5px;line-height:1.5;color:var(--muted)}
#cc .cc-need li b{color:var(--ink);font-weight:600}
#cc .cc-need li::before{content:"";position:absolute;left:0;top:4px;width:15px;height:15px;border-radius:4px;
  border:1.5px solid var(--ink);background:var(--lime)}
#cc .cc-need li::after{content:"";position:absolute;left:4px;top:8px;width:7px;height:4px;border-left:1.7px solid #15181C;
  border-bottom:1.7px solid #15181C;transform:rotate(-45deg)}

#cc .cc-note{display:flex;gap:9px;align-items:flex-start;margin:16px 0 0;font-size:13.5px;color:var(--muted);line-height:1.5;max-width:84ch}
#cc .cc-note svg{flex:none;margin-top:3px}

/* ── панель «ваш сервер» ───────────────────────────────── */
#cc .cc-my{border:2px solid var(--ink);border-radius:var(--radius);background:var(--card);padding:24px;margin:34px 0 0}
#cc .cc-my-h h2{margin:0 0 6px;font-size:clamp(20px,2.3vw,26px);font-weight:800;letter-spacing:-.02em}
#cc .cc-my-h p{margin:0 0 20px;font-size:14px;color:var(--muted);line-height:1.5;max-width:76ch}
#cc .cc-my-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
#cc .cc-field-wide{grid-column:1/-1;max-width:520px}
#cc label.cc-lbl{display:block;font-size:13px;font-weight:700;margin-bottom:5px}
#cc .cc-desc{font-size:12.5px;color:var(--muted);margin:0 0 8px;line-height:1.45}
#cc input[type=text],#cc select{width:100%;font-family:inherit;font-size:14px;color:var(--ink);background:var(--paper);
  border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;outline:none;transition:border-color .12s}
#cc input[type=text]{font-family:var(--mono);font-size:13.5px}
#cc input:focus,#cc select:focus{border-color:var(--ink)}

/* ── выбор ОС ──────────────────────────────────────────── */
#cc .cc-osbar{margin:34px 0 0;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
#cc .cc-osbar-h{font-size:15px;font-weight:700}
#cc .cc-seg{display:inline-flex;border:1.5px solid var(--ink);border-radius:999px;padding:3px;gap:3px;background:var(--card)}
#cc .cc-seg button{font-family:inherit;font-size:14px;font-weight:700;border:none;background:none;color:var(--muted);
  padding:9px 26px;border-radius:999px;cursor:pointer;transition:.14s}
#cc .cc-seg button[aria-selected=true]{background:var(--ink);color:var(--paper)}
#cc .cc-seg button:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
#cc .cc-osbar-note{font-size:13.5px;color:var(--muted)}

/* ── шаги ──────────────────────────────────────────────── */
#cc .cc-steps{display:grid;gap:16px;margin:20px 0 0}
#cc .cc-block{border:1.5px solid var(--line);border-radius:var(--radius);background:var(--card);padding:22px 24px 24px}
#cc .cc-block-final{border-color:var(--ink);border-width:2px}
#cc .cc-block-h{display:flex;align-items:baseline;gap:12px;margin:0 0 12px;flex-wrap:wrap}
#cc .cc-block-h .idx{font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  background:var(--line2);color:var(--muted);padding:4px 9px;border-radius:6px}
#cc .cc-block-final .cc-block-h .idx{background:var(--lime);color:#161a08}
#cc .cc-block-h h3{margin:0;font-size:clamp(18px,2vw,21px);font-weight:800;letter-spacing:-.02em}
#cc .cc-block p{margin:0 0 12px;font-size:14.5px;line-height:1.55;color:var(--muted);max-width:80ch}
#cc .cc-block p:last-child{margin-bottom:0}
#cc .cc-block p b,#cc .cc-check b,#cc .cc-fail b,#cc .cc-tip b,#cc .cc-warn b{color:var(--ink);font-weight:600}
#cc code{font-family:var(--mono);font-size:.88em;background:var(--line2);padding:1.5px 5px;border-radius:4px;word-break:break-word}
#cc a{color:var(--ink);text-underline-offset:3px}

/* блок команды */
#cc .cc-cmd{position:relative;margin:0 0 14px;border-radius:var(--radius-sm);background:var(--code-bg);overflow:hidden}
#cc .cc-cmd pre{margin:0;padding:16px 108px 16px 16px;overflow-x:auto}
#cc .cc-cmd code{font-family:var(--mono);font-size:13px;line-height:1.65;color:var(--code-fg);background:none;padding:0;
  white-space:pre-wrap;word-break:break-word;display:block}
#cc .cc-cmd .cc-var{color:var(--lime);font-weight:700;font-style:normal;box-shadow:inset 0 -1px 0 rgba(200,240,72,.45)}
#cc .cc-copy{position:absolute;top:10px;right:10px;font-family:inherit;font-size:12.5px;font-weight:700;
  border:1.5px solid rgba(237,236,230,.28);background:rgba(237,236,230,.06);color:var(--code-fg);
  border-radius:8px;padding:7px 12px;cursor:pointer;transition:.14s}
#cc .cc-copy:hover{background:rgba(237,236,230,.14)}
#cc .cc-copy.done{background:var(--lime);color:#161a08;border-color:var(--lime)}
#cc .cc-copy:focus-visible{outline:2px solid var(--lime);outline-offset:2px}

/* плашки «получилось / не получилось» */
#cc .cc-check,#cc .cc-fail,#cc .cc-tip,#cc .cc-warn{font-size:13.5px;line-height:1.55;border-radius:var(--radius-sm);
  padding:13px 15px;margin:0 0 12px;color:var(--muted)}
#cc .cc-check{background:var(--ok-bg);border-left:3px solid var(--ok)}
#cc .cc-fail{background:var(--fail-bg);border-left:3px solid var(--fail)}
#cc .cc-tip{background:var(--line2);border-left:3px solid var(--line)}
#cc .cc-warn{background:var(--warn-bg);border-left:3px solid var(--warn)}
#cc .cc-warn-big{font-size:14.5px;padding:18px 20px;margin-top:18px}
#cc .cc-check code,#cc .cc-fail code,#cc .cc-tip code,#cc .cc-warn code{background:rgba(21,24,28,.07)}
#cc .cc-fail ul{margin:8px 0 0;padding-left:20px;display:grid;gap:7px}
#cc .cc-block>*:last-child{margin-bottom:0}
#cc .cc-var{font-style:normal;font-weight:700;color:var(--ink)}
#cc .cc-check .cc-var,#cc .cc-tip .cc-var,#cc .cc-adv .cc-var{background:var(--lime);padding:0 4px;border-radius:3px}

/* ── готовые файлы ─────────────────────────────────────── */
#cc .cc-files{margin:44px 0 0}
#cc .cc-files-h h2,#cc .cc-rules h2,#cc .cc-trouble h2,#cc .cc-faq h2{margin:0 0 6px;font-size:clamp(22px,2.6vw,30px);
  font-weight:800;letter-spacing:-.025em}
#cc .cc-files-h p{margin:0 0 18px;font-size:14.5px;color:var(--muted);max-width:76ch}
#cc .cc-files-card{border:1.5px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--card)}
#cc .cc-tabs{display:flex;border-bottom:1.5px solid var(--line)}
#cc .cc-tabs button{flex:1;background:none;border:none;font-family:inherit;font-size:13.5px;font-weight:700;
  color:var(--muted);padding:14px 10px;cursor:pointer;position:relative;transition:color .12s;line-height:1.3}
#cc .cc-tabs button[aria-selected=true]{color:var(--ink)}
#cc .cc-tabs button[aria-selected=true]::after{content:"";position:absolute;left:12px;right:12px;bottom:-1.5px;height:2px;background:var(--ink)}
#cc .cc-tabs .num{font-family:var(--mono);font-size:11px;color:var(--muted);display:block;margin-bottom:3px;font-weight:600}
#cc .cc-panel-head{padding:14px 16px 8px;font-size:12.5px;color:var(--muted);line-height:1.5}
#cc .cc-panel-head b{color:var(--ink);font-weight:600}
#cc pre.cc-out{margin:0;background:var(--code-bg);color:var(--code-fg);font-family:var(--mono);
  font-size:12.5px;line-height:1.65;padding:18px 16px;max-height:52vh;overflow:auto;white-space:pre-wrap;word-break:break-word}
#cc pre.cc-out code{background:none;padding:0;font-size:inherit;color:inherit}
#cc .cc-foot{display:flex;gap:12px;align-items:center;padding:14px 16px;border-top:1.5px solid var(--line);flex-wrap:wrap}
#cc .cc-btn{font-family:inherit;font-size:14px;font-weight:700;border:none;border-radius:10px;padding:11px 20px;cursor:pointer;transition:.14s}
#cc .cc-btn.primary{background:var(--lime);color:#15181C}
#cc .cc-btn.primary:hover{filter:brightness(.96)}
#cc .cc-btn.primary.done{background:var(--ink);color:var(--paper)}
#cc .cc-btn:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
#cc .cc-foot-note{font-size:12.5px;color:var(--muted);margin-left:auto;text-align:right;line-height:1.4}

/* ── правила / ошибки / FAQ ────────────────────────────── */
#cc .cc-rules,#cc .cc-trouble,#cc .cc-faq{margin:44px 0 0}
#cc .cc-rules-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
#cc .cc-rule{border:1.5px solid var(--line);border-radius:var(--radius-sm);background:var(--card);padding:18px}
#cc .cc-rule h4{margin:0 0 7px;font-size:15.5px;font-weight:700;letter-spacing:-.01em}
#cc .cc-rule p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.5}
#cc .cc-rule code{font-size:12.5px}

#cc .cc-adv{border:1.5px solid var(--line);border-radius:var(--radius-sm);background:var(--card);padding:0 18px;margin-top:10px}
#cc .cc-adv summary{cursor:pointer;padding:15px 0;font-size:14.5px;font-weight:600;list-style:none;user-select:none}
#cc .cc-adv summary::-webkit-details-marker{display:none}
#cc .cc-adv summary::before{content:"+  ";font-family:var(--mono);color:var(--muted)}
#cc .cc-adv[open] summary::before{content:"–  "}
#cc .cc-adv[open] summary{border-bottom:1px solid var(--line2)}
#cc .cc-adv summary:focus-visible{outline:2px solid var(--lime);outline-offset:2px;border-radius:6px}
#cc .cc-adv-body{padding:14px 0 18px}
#cc .cc-adv-body p{margin:0;font-size:14px;color:var(--muted);line-height:1.55;max-width:80ch}

#cc .cc-faq-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:18px 0 72px}
#cc .cc-faq-i{border:1.5px solid var(--line);border-radius:var(--radius-sm);background:var(--card);padding:18px}
#cc .cc-faq-i h4{margin:0 0 7px;font-size:15px;font-weight:700}
#cc .cc-faq-i p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.5}

/* ── адаптив ───────────────────────────────────────────── */
@media(max-width:1000px){
  #cc .cc-my-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #cc .cc-rules-grid,#cc .cc-faq-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:720px){
  #cc .cc-how{grid-template-columns:1fr}
  #cc .cc-my-grid{grid-template-columns:1fr}
  #cc .cc-rules-grid,#cc .cc-faq-grid{grid-template-columns:1fr}
  #cc .cc-block{padding:18px 16px 20px}
  #cc .cc-my{padding:18px 16px}
  #cc .cc-need{padding:18px 16px}
  #cc .cc-cmd pre{padding:46px 14px 14px}
  #cc .cc-copy{top:8px;right:8px}
  #cc .cc-seg{width:100%}
  #cc .cc-seg button{flex:1;padding:10px 0}
  #cc .cc-tabs{flex-direction:column}
  #cc .cc-tabs button[aria-selected=true]::after{left:0;right:auto;top:0;bottom:0;width:2px;height:auto}
  #cc .cc-foot-note{margin-left:0;text-align:left}
}
@media (prefers-reduced-motion:reduce){#cc *{transition:none!important}}