:root{
  --paper:#F2F4F7; --surface:#FFFFFF; --surface-2:#E9EDF2;
  --ink:#141A21; --ink-2:#4B5763; --ink-3:#7C8794; --line:#D7DDE5;
  --accent:#1B4FD8; --accent-soft:#E4EAFC; --accent-ink:#123AA8;
  --warn:#8A5A00; --warn-soft:#FBF0D8;
  --radius:14px; --shadow:0 1px 2px rgba(20,26,33,.06), 0 8px 24px rgba(20,26,33,.06);
  color-scheme:light dark;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#0E1319; --surface:#161D25; --surface-2:#1E2731;
    --ink:#EEF2F6; --ink-2:#AEBAC6; --ink-3:#7F8C99; --line:#2A343F;
    --accent:#6C93FF; --accent-soft:#1B2740; --accent-ink:#A9C0FF;
    --warn:#E0B463; --warn-soft:#2A2113;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.35);
  }
}
*{box-sizing:border-box}
html,body{margin:0; padding:0}
body{
  background:var(--paper); color:var(--ink);
  font-family:"PT Sans","Segoe UI",Roboto,-apple-system,sans-serif;
  font-size:16px; line-height:1.55; -webkit-text-size-adjust:100%;
}
h1,h2,h3,h4{font-family:"Golos Text","PT Sans",sans-serif; margin:0; line-height:1.22; text-wrap:balance}
h1{font-size:clamp(25px,5.2vw,38px); font-weight:800; letter-spacing:-.02em}
h2{font-size:clamp(20px,3.6vw,26px); font-weight:700; margin-top:6px}
h3{font-size:18px; font-weight:700}
p{margin:0}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--accent); outline-offset:2px; border-radius:6px}
img{max-width:100%}
.wrap{max-width:1080px; margin:0 auto; padding-inline:16px}
.num{font-family:"JetBrains Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums}

header.site{position:sticky; top:0; z-index:20; background:var(--surface); border-bottom:1px solid var(--line)}
header.site .wrap{display:flex; gap:12px; align-items:center; padding-block:12px}
.logo{font-family:"Golos Text",sans-serif; font-weight:800; font-size:18px; letter-spacing:-.02em; color:var(--ink); white-space:nowrap}
.logo em{font-style:normal; color:var(--accent)}
.search{flex:1; min-width:0; display:flex; align-items:center; gap:8px; background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:8px 12px}
.search input{flex:1; min-width:0; border:0; background:transparent; color:var(--ink); font:inherit; font-size:15px; outline:none}

main{padding-block:26px 10px}
.lead{color:var(--ink-2); margin-top:10px; max-width:64ch}
.crumbs{font-size:13.5px; color:var(--ink-3); margin-bottom:12px}
.crumbs a{color:var(--ink-3)}

.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px}
.chip{border:1px solid var(--line); background:var(--surface); color:var(--ink-2); border-radius:999px; padding:7px 13px; font-size:14px; cursor:pointer; font:inherit}
.chip[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:#fff}
.cat{margin-bottom:26px}
.cat h3{display:flex; align-items:center; gap:10px; margin-bottom:12px; font-size:15px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-2)}
.cat h3::after{content:""; flex:1; height:1px; background:var(--line)}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:10px}
.card{display:flex; flex-direction:column; gap:3px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:13px 15px; color:var(--ink)}
a.card:hover{border-color:var(--accent); text-decoration:none}
.card b{font-family:"Golos Text",sans-serif; font-weight:600; font-size:15.5px}
.card small{color:var(--ink-3); font-size:13px}
.card.soon{opacity:.62}
.card.soon .tagsoon{font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); margin-top:4px}

.calc{display:grid; grid-template-columns:1fr; gap:16px; margin-top:20px}
@media(min-width:780px){.calc{grid-template-columns:1.05fr .95fr}}
.fields{display:flex; flex-direction:column; gap:13px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px}
.field label{display:block; font-size:13.5px; color:var(--ink-2); margin-bottom:5px}
.field input[type=number],.field select{width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:10px; background:var(--paper); color:var(--ink); font-family:"JetBrains Mono",monospace; font-size:16px}
.field select{font-family:"PT Sans",sans-serif}
.field input[type=range]{width:100%; accent-color:var(--accent); margin-top:6px}
.hint{font-size:12.5px; color:var(--ink-3); margin-top:4px}
.result{background:var(--accent-soft); border:1px solid var(--accent); border-radius:var(--radius); padding:18px; position:sticky; top:74px}
.result .caption{font-size:13.5px; color:var(--ink-2)}
.result .big{font-family:"JetBrains Mono",monospace; font-weight:700; font-size:clamp(27px,7vw,37px); color:var(--accent-ink); line-height:1.1}
.rows{margin-top:14px; display:flex; flex-direction:column; gap:8px}
.row{display:flex; justify-content:space-between; gap:12px; font-size:14.5px; border-bottom:1px dashed var(--line); padding-bottom:7px}
.row span:last-child{font-family:"JetBrains Mono",monospace; font-variant-numeric:tabular-nums; white-space:nowrap}
.steps{margin-top:14px; background:var(--surface-2); border-radius:var(--radius); padding:14px 16px; font-size:14.5px; color:var(--ink-2)}
.steps b{color:var(--ink)}
.partner{margin-top:16px; border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; background:var(--surface)}
.partner .tag{display:inline-block; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--warn); background:var(--warn-soft); border-radius:999px; padding:3px 9px; margin-bottom:8px}
.partner .line{display:flex; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px solid var(--line); font-size:14.5px}
.partner .line:last-of-type{border-bottom:0}
.partner b{font-family:"JetBrains Mono",monospace}

article{margin-top:26px; display:flex; flex-direction:column; gap:14px; max-width:70ch}
article p{color:var(--ink-2); font-size:16px}
article ul{color:var(--ink-2); padding-left:22px; margin:0}
article li{margin-bottom:6px}
.formula{background:var(--surface-2); border-left:3px solid var(--accent); padding:12px 14px; border-radius:0 10px 10px 0; font-family:"JetBrains Mono",monospace; font-size:13.5px; overflow-x:auto; color:var(--ink)}
.example{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; font-size:15.5px; color:var(--ink-2)}
details{border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:var(--surface)}
details+details{margin-top:8px}
summary{cursor:pointer; font-weight:700; font-family:"Golos Text",sans-serif; font-size:15.5px}
details p{margin-top:8px; font-size:15.5px}
.related{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
.related a{border:1px solid var(--line); border-radius:999px; padding:6px 12px; font-size:14px; background:var(--surface); color:var(--ink-2)}
.updated{font-size:13px; color:var(--ink-3); margin-top:6px}
footer{border-top:1px solid var(--line); margin-top:34px; padding-block:22px 40px; color:var(--ink-3); font-size:14px; background:var(--surface)}
footer .wrap{display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between}
footer a{color:var(--ink-3)}
table.tbl{width:100%; border-collapse:collapse; font-size:15px}
table.tbl th,table.tbl td{border-bottom:1px solid var(--line); padding:8px 6px; text-align:left}
table.tbl td:last-child{font-family:"JetBrains Mono",monospace; white-space:nowrap}
.scroll{overflow-x:auto}