:root{
  --ka-serif:"Noto Serif Georgian",Georgia,serif;
  --ka-sans:"Noto Sans Georgian",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
}

body{
  font-family:var(--ka-sans);
  font-size:1.0625rem;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,.serif{
  font-family:var(--ka-serif);
  font-weight:700;
  line-height:1.25;
  letter-spacing:-.005em;
}

/* Стеклянная панель — как в Quartz, но чуть плотнее для читаемости */
.pane{
  background-image:linear-gradient(125deg,rgba(255,255,255,.28),rgba(255,255,255,.16) 70%);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  box-shadow:inset 1px 1px rgba(255,255,255,.28),inset -1px -1px rgba(255,255,255,.08);
  border-radius:1rem;
}

/* Герой: строка кода как главный визуальный объект */
.codeblock{
  font-family:var(--mono);
  font-size:.8125rem;
  line-height:1.85;
  /* Перенос рвал бы токен посреди строки — вместо этого
     сохраняем форму кода и даём горизонтальную прокрутку */
  white-space:pre;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  color:#fff;
  background:rgba(20,14,40,.55);
  border-radius:.875rem;
  padding:1.35rem 1.5rem;
  box-shadow:inset 1px 1px rgba(255,255,255,.14);
  tab-size:2;
}
.codeblock::-webkit-scrollbar{height:6px}
.codeblock::-webkit-scrollbar-track{background:transparent}
.codeblock::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.25);
  border-radius:3px;
}
@media(max-width:575.98px){
  .codeblock{font-size:.6875rem;padding:1rem 1.15rem}
}
.codeblock .tag{color:#39cbfb}
.codeblock .attr{color:#41d7a7}
.codeblock .val{color:#ffd166}

.hero-title{font-size:clamp(2.1rem,5.2vw,3.6rem)}
.lead-ka{font-size:1.1875rem;max-width:56ch}

.metric{font-family:var(--mono);font-size:2.4rem;font-weight:500;line-height:1}

/*  */
.stepnum{
  font-family:var(--mono);
  font-size:.8125rem;
  color:rgba(255,255,255,.55);
  border-bottom:1px solid rgba(255,255,255,.25);
  padding-bottom:.35rem;
  margin-bottom:.75rem;
  display:block;
}

.feat-icon{
  display:block;
  font-size:2.5rem;
  line-height:1;
  margin-bottom:1rem;
  color:#fff;
  opacity:.85;
}

.spec{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.5rem 2rem;
  margin:0;
}
.spec>div{min-width:0}
.spec dt{
  font-weight:600;
  opacity:.6;
  font-size:.8125rem;
  margin-bottom:.25rem;
}
.spec dd{
  font-family:var(--mono);
  font-size:.9375rem;
  margin:0;
  overflow-wrap:anywhere;
}
.spec .wide{grid-column:1/-1}
@media(max-width:575.98px){
  .spec{grid-template-columns:1fr;gap:1.25rem}
  .spec .wide{grid-column:auto}
}

.cmp td,.cmp th{border-color:rgba(255,255,255,.16)!important;padding:.8rem .9rem}
.cmp .yes{font-weight:600}
.cmp .no{opacity:.6}
.cmp .col-ours{background:rgba(255,255,255,.07)}

/* На узком экране горизонтальный скролл прятал бы главную колонку.
   Поэтому строки таблицы превращаются в отдельные блоки. */
@media(max-width:767.98px){
  .cmp thead{display:none}
  .cmp,.cmp tbody,.cmp tr,.cmp td{display:block;width:100%}
  .cmp tr{
    background:rgba(255,255,255,.08);
    border-radius:.75rem;
    padding:.9rem 1.1rem;
    margin-bottom:.75rem;
  }
  .cmp tr:last-child{margin-bottom:0}
  .cmp td{border:0!important;padding:0}
  .cmp td:first-child{
    font-weight:600;
    opacity:1;
    margin-bottom:.6rem;
    padding-bottom:.5rem;
    border-bottom:1px solid rgba(255,255,255,.15)!important;
  }
  .cmp td[data-l]{padding:.3rem 0}
  .cmp td[data-l]::before{
    content:attr(data-l);
    display:block;
    font-size:.75rem;
    opacity:.5;
    margin-bottom:.05rem;
  }
  .cmp .col-ours{background:transparent}
}

/* Английский блок — визуально отделён сменой фона, а не только заголовком */
.en{
  background:rgba(20,14,40,.42);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  font-family:system-ui,-apple-system,sans-serif;
}
.en h2,.en h3{font-family:system-ui,-apple-system,sans-serif;letter-spacing:-.01em}

a{text-decoration:none}
a:hover{text-decoration:underline}
.navbar{background:rgba(20,14,40,.35);backdrop-filter:blur(10px)}
/* Quartz задаёт $spacer:2rem — утилиты py-* дают двойной отступ.
   Поэтому вертикальный ритм задаём явно. */
.band{padding-block:4.5rem}
.band-tight{padding-block:3rem}
section{scroll-margin-top:4.5rem}
@media(max-width:767.98px){
  .band{padding-block:3rem}
  .band-tight{padding-block:2rem}
}

.cmp-wrap{overflow-x:auto}
@media(max-width:767.98px){.cmp-wrap{overflow-x:visible}}

.sec-head{max-width:56ch;margin-bottom:2.75rem}
.sec-head h2{margin-bottom:.6rem}

:focus-visible{outline:2px solid #ffd166;outline-offset:3px;border-radius:4px}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}