/* ФИРМЕННЫЙ СТИЛЬ MeruEd / МЕРА — основание.
   Палитра снята с фирменного набора: светлая #E4E4E4 фон / #CACACA плашка,
   тёмная #141414 фон / #1D1D1D плашка, чернила #1A1A1A (из логотипа).
   Цвета нет вовсе — уровни различаются тоном, а не оттенком.

   ФОРМА: все контейнеры — СКВИРКЛ (corner-shape: squircle, радиус около
   12% стороны, замерено с образца). Цилиндр (пилюля) — ТОЛЬКО у кнопок
   действия. Браузеры без corner-shape получают обычное скругление. */

:root{
  --bg:#E4E4E4; --card:#CACACA; --fill:#BDBDBD;
  --ink:#1A1A1A; --mut:#4A4A4A; --line:rgba(26,26,26,.14);
  --cta:#1A1A1A; --ctafg:#E4E4E4;

  /* шкала радиусов: растёт вместе с блоком */
  --rc:10px;   /* мелкое: значок, галочка */
  --rx:14px;   /* контрол: кнопка-вкладка, поле */
  --rs:22px;   /* строка, акцентный блок */
  --r:32px;    /* карточка */
  --rb:40px;   /* панель, крупный контейнер */

  --display:'Nata Sans','Noto Sans',system-ui,sans-serif;
  --body:Onest,system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}

/* тёмная — ОТДЕЛЬНАЯ шкала, а не инверсия светлой */
:root[data-theme="dark"]{
  --bg:#141414; --card:#1D1D1D; --fill:#292929;
  --ink:#E4E4E4; --mut:#9A9A9A; --line:rgba(228,228,228,.12);
  --cta:#E4E4E4; --ctafg:#141414;
}

*{box-sizing:border-box}
html,body{overflow-x:clip}
body{margin:0; background-color:var(--bg); color:var(--ink);
  font:400 17px/1.62 var(--body); -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display); font-weight:600; letter-spacing:-.02em; margin:0}
p{margin:0 0 14px}
button{font-family:inherit}

/* ---------- типографика ---------- */
.kick{font:500 12px/1 var(--body); letter-spacing:.16em; text-transform:uppercase;
  color:var(--mut); margin-bottom:14px}
.lead,.sub{font-size:17px; color:var(--mut); max-width:640px}
.note,.fnote{font-size:12px; color:var(--mut); line-height:1.55}
.num{font-family:var(--mono); font-variant-numeric:tabular-nums}

/* ---------- форма ---------- */
/* контейнеры — сквиркл */
.sq{border-radius:var(--r); corner-shape:squircle}
.sq-s{border-radius:var(--rs); corner-shape:squircle}
.sq-b{border-radius:var(--rb); corner-shape:squircle}
.sq-x{border-radius:var(--rx); corner-shape:squircle}
.sq-c{border-radius:var(--rc); corner-shape:squircle}

/* ---------- кнопки ---------- */
/* ГЛАВНОЕ ДЕЙСТВИЕ — единственный цилиндр на экране, круглая липкая кнопка */
.go{position:sticky; bottom:8px; display:block; margin:28px 0 0 auto;
  width:112px; height:112px; padding:0; flex:0 0 auto;
  border:0; border-radius:999px; corner-shape:round;
  background:var(--cta); color:var(--ctafg); cursor:pointer;
  font-family:var(--body); font-size:12px; font-weight:600; letter-spacing:.12em}
.go:disabled{background:var(--fill); color:var(--mut); cursor:default}

/* ВТОРОСТЕПЕННОЕ — текстом, без формы вовсе */
.ghost{border:0; background:transparent; color:var(--mut); cursor:pointer;
  padding:0; font-size:15px; border-radius:0; corner-shape:round}
.ghost:hover{color:var(--ink)}

/* МЕЛКОЕ ДЕЙСТВИЕ внутри строки — сквиркл, не пилюля */
.mini{border:1px solid var(--line); background:transparent; color:var(--ink); cursor:pointer;
  padding:9px 18px; font-size:14px; border-radius:var(--rc); corner-shape:squircle}
.mini:hover{border-color:var(--ink)}

/* ВЫБОР — карточка-сквиркл, выбранное заливается чернилами */
.opt{border:1px solid var(--line); background:transparent; color:var(--ink); cursor:pointer;
  text-align:left; padding:14px 18px; font-size:15px;
  border-radius:var(--rs); corner-shape:squircle}
.opt:hover{border-color:var(--ink)}
.opt.on{background:var(--cta); color:var(--ctafg); border-color:var(--cta)}

/* ---------- поля ---------- */
/* поле — подчёркивание, а не коробка */
.field{position:relative; min-width:0}
.field label{display:block; font-size:11px; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--mut); margin-bottom:8px}
.field input,.field select,.field textarea{width:100%; border:0;
  border-bottom:1px solid var(--line); background:transparent; color:var(--ink);
  padding:8px 0 10px; font:400 17px var(--body); border-radius:0}
.field select{appearance:none; cursor:pointer}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-bottom-color:var(--ink)}
.field input::placeholder{color:var(--mut); opacity:.6}

/* ---------- автозаполнение ----------
   Chrome красит автозаполненное поле своим светло-голубым фоном и чёрным текстом —
   в монохроме это чужая заплатка, а в тёмной теме ещё и чёрное по тёмному.
   Перекрываем: цвет текста через -webkit-text-fill-color (обычный color
   автозаполнение игнорирует), фон гасим внутренней тенью в цвет подложки,
   плюс бесконечный transition — он не даёт браузеру перекрасить фон. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill{
  -webkit-text-fill-color:var(--ink);
  caret-color:var(--ink);
  -webkit-box-shadow:0 0 0 120px var(--card) inset;
  box-shadow:0 0 0 120px var(--card) inset;
  transition:background-color 9999s ease-in-out 0s;
  font:400 17px var(--body);
}
/* стандартный селектор — ОТДЕЛЬНЫМ блоком, чтобы старый браузер не уронил правило выше */
input:autofill{-webkit-text-fill-color:var(--ink); caret-color:var(--ink)}

/* ---------- акценты ----------
   Цвета нет: акцент делает заливка против обводки, а не оттенок. */
.acc-fill{background:var(--cta); color:var(--ctafg);
  border-radius:var(--rs); corner-shape:squircle; padding:22px 24px}
.acc-line{border:1.5px solid var(--ink);
  border-radius:var(--rs); corner-shape:squircle; padding:22px 24px}
.acc-tone{background:var(--fill);
  border-radius:var(--rs); corner-shape:squircle; padding:22px 24px}