:root {
  --ink: #173b43;
  --muted: #617177;
  --line: #d9e1df;
  --paper: #ffffff;
  --wash: #f4f7f6;
  --accent: #bd8d4f;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--wash);
  color: var(--ink);
  font-family: Tahoma, Arial, sans-serif;
  line-height: 1.8;
}
a { color: inherit; }
.shell { width: min(1100px, calc(100% - 32px)); margin: 0 auto; }
header { background: var(--ink); color: #fff; padding: 34px 0 26px; }
header p { margin: 6px 0 0; color: #d7e2e0; }
nav { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
nav .shell { display: flex; gap: 8px; overflow-x: auto; padding-block: 10px; }
nav a { white-space: nowrap; text-decoration: none; padding: 7px 11px; border-radius: 6px; }
nav a:hover, nav a.active { background: var(--ink); color: #fff; }
main { padding: 30px 0 60px; }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 24px; margin-bottom: 18px; }
h1, h2, h3 { line-height: 1.35; }
h1 { margin: 0; font-size: clamp(26px, 4vw, 42px); }
h2 { margin: 0 0 14px; font-size: 25px; }
h3 { margin: 22px 0 8px; font-size: 18px; }
p, ul, ol { margin-top: 8px; }
.path, .cms {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .92em;
}
.path { display: block; background: #edf2f1; border-right: 4px solid var(--accent); padding: 10px 12px; margin: 10px 0 16px; }
.note { border-right: 4px solid var(--accent); padding: 8px 14px; background: #fff8ed; }
.warning { border-right-color: #a64b3c; background: #fff2ef; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.mini { border: 1px solid var(--line); border-radius: 8px; padding: 15px; }
.mini h3 { margin-top: 0; }
table { width: 100%; border-collapse: collapse; background: #fff; }
th, td { text-align: right; vertical-align: top; border: 1px solid var(--line); padding: 10px; }
th { background: #edf2f1; }
.steps { counter-reset: step; list-style: none; padding: 0; }
.steps li { counter-increment: step; position: relative; padding: 0 42px 14px 0; }
.steps li::before { content: counter(step); position: absolute; right: 0; top: 2px; width: 27px; height: 27px; border-radius: 50%; background: var(--ink); color: #fff; text-align: center; line-height: 27px; }
footer { color: var(--muted); text-align: center; padding: 18px; }
@media (max-width: 720px) { .grid { grid-template-columns: 1fr; } .card { padding: 18px; } }