/* Внутренние страницы KeiRouter. Светлая тема, один акцент, контент на всю ширину. */
:root{
  --paper:#FFFFFF;
  --surface:#F4F5F6;
  --surface-2:#EAECEE;
  --ink:#0F1417;
  --ink-2:#404B52;
  --muted:#71808A;
  --rule:#DEE3E6;
  --rule-soft:#EBEEF0;
  --accent:#C2461F;
  --accent-deep:#9E3714;
  --accent-wash:#FBEEE9;
  --shadow:24px 40px -32px rgba(15,20,23,.28);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--paper);color:var(--ink);overflow-x:hidden;
  font-family:"Golos Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:16.5px;line-height:1.66;-webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}
h1,h2,h3,h4{margin:0;font-family:"Geologica","Golos Text",sans-serif;text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace}
.wrap{width:100%;max-width:1600px;margin:0 auto;padding:0 clamp(20px,3.6vw,60px)}

.grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.55;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.11'/%3E%3C/svg%3E");
}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:#fff;
  padding:12px 20px;border-radius:0 0 10px 0;font-weight:600;text-decoration:none}
.skip:focus{left:0}

/* шапка */
.top{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.82);
  backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid var(--rule-soft)}
.top .wrap{display:flex;align-items:center;gap:14px;height:64px;min-width:0}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);
  font-weight:600;font-size:18px;letter-spacing:-.02em;font-family:"Geologica",sans-serif}
.brand .glyph{width:27px;height:27px;flex:none}
.menu{display:flex;gap:2px;margin-left:24px}
.menu a{padding:7px 12px;border-radius:7px;text-decoration:none;color:var(--ink-2);
  font-size:15px;font-weight:500;transition:color .18s,background .18s}
.menu a:hover{color:var(--ink);background:var(--surface)}
.menu a[aria-current="page"]{color:var(--ink);background:var(--surface-2)}
.top-act{margin-left:auto;display:flex;gap:9px;flex:none}
@media(max-width:1180px){.menu{display:none}}
@media(max-width:430px){.top-act .btn-line{display:none}.brand{font-size:16.5px}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 20px;border-radius:9px;font-weight:600;font-size:15px;text-decoration:none;
  border:1px solid transparent;cursor:pointer;white-space:nowrap;font-family:inherit;
  transition:background .18s,color .18s,border-color .18s,transform .12s,box-shadow .18s}
.btn:active{transform:translateY(1px) scale(.994)}
.btn-fill{background:var(--accent);color:#fff}
.btn-fill:hover{background:var(--accent-deep);box-shadow:0 10px 22px -14px rgba(194,70,31,.9)}
.btn-line{border-color:var(--rule);color:var(--ink);background:transparent}
.btn-line:hover{border-color:var(--ink);background:var(--surface)}
.btn-s{padding:8px 15px;font-size:14px;border-radius:8px}

/* заголовок страницы */
.page-head{position:relative;overflow:hidden;
  padding:clamp(40px,4.6vw,72px) 0 clamp(26px,3vw,44px);
  border-bottom:1px solid var(--rule)}
.page-head::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--rule-soft) 1px,transparent 1px),
                   linear-gradient(90deg,var(--rule-soft) 1px,transparent 1px);
  background-size:88px 88px;
  -webkit-mask-image:radial-gradient(110% 100% at 6% 0%,#000 10%,transparent 70%);
          mask-image:radial-gradient(110% 100% at 6% 0%,#000 10%,transparent 70%)}
.page-head .wrap{position:relative}
.page-head .kicker{font-family:"JetBrains Mono",monospace;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);font-weight:500}
.page-head h1{font-size:clamp(28px,3.4vw,46px);font-weight:600;letter-spacing:-.035em;
  line-height:1.08;margin-top:14px}
.page-head p{margin-top:16px;color:var(--ink-2);font-size:17.5px;max-width:66ch}
.page-head .upd{margin-top:14px;font-size:13.5px;color:var(--muted);
  font-family:"JetBrains Mono",monospace}

/* раскладка с оглавлением */
.layout>*{min-width:0;max-width:100%}
.layout{display:grid;grid-template-columns:252px minmax(0,1fr);gap:clamp(28px,4vw,72px);
  padding:clamp(34px,4vw,60px) 0 96px;align-items:start}
@media(max-width:980px){.layout{grid-template-columns:minmax(0,1fr)}
  .toc{position:static!important;margin-bottom:8px}}
.toc{position:sticky;top:88px;min-width:0;max-width:100%;
  border-left:2px solid var(--rule);padding-left:18px}
.toc h4{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);margin-bottom:12px;font-weight:500}
.toc a{display:block;padding:5px 0;text-decoration:none;color:var(--ink-2);
  font-size:14.5px;overflow-wrap:anywhere;transition:color .18s}
.toc a:hover{color:var(--accent)}

/* текст статьи */
article h2{font-size:clamp(21px,2.1vw,28px);font-weight:600;letter-spacing:-.025em;
  margin:48px 0 14px;scroll-margin-top:88px}
article h2:first-child{margin-top:0}
article h3{font-size:18.5px;font-weight:600;margin:30px 0 10px;scroll-margin-top:88px;
  letter-spacing:-.015em}
article p{margin:0 0 14px;color:var(--ink-2);max-width:78ch}
article ul,article ol{margin:0 0 16px;padding-left:20px;color:var(--ink-2);max-width:78ch}
article li{margin-bottom:7px}
article li::marker{color:var(--muted)}
article strong{color:var(--ink);font-weight:600}
article code{font-family:"JetBrains Mono",monospace;font-size:13.6px;background:var(--surface-2);
  padding:2px 6px;border-radius:5px;word-break:break-word}

pre{background:#0F1417;color:#CBD9DF;border-radius:11px;padding:20px 22px;overflow-x:auto;
  max-width:100%;font-family:"JetBrains Mono",monospace;font-size:13.3px;line-height:1.85;
  margin:0 0 18px;white-space:pre;box-shadow:var(--shadow)}
pre .c{color:#657A84}
pre .k{color:#E8895E}
pre .s{color:#8FC9A4}
pre b{color:#9EC5FF;font-weight:400}

.callout{border-left:2px solid var(--accent);background:var(--accent-wash);
  padding:16px 20px;margin:0 0 18px}
.callout p{margin:0;color:var(--ink-2);max-width:none}

.tbl{overflow-x:auto;border:1px solid var(--rule);border-radius:12px;margin:0 0 18px}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:14.8px}
th{background:var(--surface);font-family:"JetBrains Mono",monospace;font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500;
  text-align:left;padding:13px 18px;border-bottom:1px solid var(--rule);white-space:nowrap}
td{padding:12px 18px;border-bottom:1px solid var(--rule-soft);color:var(--ink-2);
  vertical-align:top;transition:background .18s}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:var(--surface)}
td.mono{font-family:"JetBrains Mono",monospace;color:var(--ink)}

footer{border-top:1px solid var(--rule);padding:40px 0 38px}
.fbot{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-size:13.5px;color:var(--muted)}
.fbot a{color:var(--ink-2);text-decoration:none;margin-right:20px}
.fbot a:hover{color:var(--accent)}