/* Визуальный язык сайта-мастерской.
   Три роли шрифта: Montserrat — заголовки и числа, Inter — обычный текст,
   JetBrains Mono — данные, подписи, поля и код. Моноширинный для абзацев не годится:
   читать длинный текст в нём тяжело, поэтому тело набрано текстовым шрифтом.
   Поверхности идут лестницей: холст → панель → углубление → акцент → афиша. */

:root{
  /* цвет */
  --ink:#111111; --text-ink:#1F1F1F;
  --blue:#0070B2;      /* 4.82 на холсте, 5.30 на белом — проходит AA */
  --green:#007E52; --green-text:#0A6E4C; --red:#C53030;
  --muted:#6C6C6C; --faint:#9A9A9A;
  --border:#DCDCDC; --hairline:#EDEDED;
  /* поверхности */
  --canvas:#F4F4F3;      /* холст страницы */
  --paper:#FFFFFF;       /* панель */
  --inset:#F6F6F5;       /* углубление: поля, код, превью */
  --tint:#EEF4FA;        /* подсветка результата */
  --tint-green:#EDF6F2;
  --deep:#0B0B0B;        /* афиша */
  /* шрифты */
  --disp:'Montserrat','Arial Black',sans-serif;
  --text:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
  /* размеры */
  --r-lg:16px; --r-md:12px; --r-sm:9px; --r-pill:9999px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  --shadow-panel:0 1px 2px rgba(17,17,17,.04), 0 12px 28px rgba(17,17,17,.06);
  --shadow-lift:0 2px 4px rgba(17,17,17,.05), 0 20px 44px rgba(17,17,17,.10);
  /* акцент раздела: у данных синий, у документов зелёный, у дизайна — чернила */
  --accent:var(--blue);
}
body.acc-data{--accent:var(--blue)}
body.acc-doc{--accent:var(--green-text)}
body.acc-design{--accent:var(--ink)}

*{margin:0;padding:0;box-sizing:border-box}
/* дети сеток не должны раздувать колонку содержимым: таблица, лист А4 и полотно
   шире экрана ломали мобильную вёрстку */
.cols > *,.cards > *,.prev > *{min-width:0}
img,canvas,svg{max-width:100%}
.scroll,.stage,.raw,.doc,.sheet,textarea{max-width:100%}

body{
  background:var(--canvas); color:var(--text-ink);
  font:400 16px/1.6 var(--text);
  -webkit-font-smoothing:antialiased; padding:0 0 var(--s8);
}
.wrap{max-width:1360px;margin:0 auto;padding:var(--s6) var(--s6) 0}
.wrap.narrow{max-width:980px}
::selection{background:rgba(0,119,188,.18)}

/* ---------- шапка ---------- */
.top{position:sticky;top:0;z-index:50;background:rgba(244,244,243,.86);
     backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--hairline)}
.top .in{max-width:1360px;margin:0 auto;padding:0 var(--s6);height:60px;display:flex;align-items:center;gap:var(--s5)}
.top .mark{display:flex;align-items:center;gap:var(--s3);text-decoration:none;color:var(--ink);
           font:900 15px/1 var(--disp);letter-spacing:.1em;text-transform:uppercase}
.top .mark img{width:26px;height:26px;display:block}
.top nav{margin-left:auto;display:flex;gap:var(--s5)}
.top nav a{color:var(--muted);text-decoration:none;font:500 14px/1 var(--text)}
.top nav a:hover{color:var(--blue)}
.top nav a.on{color:var(--ink);font-weight:600}

/* ---------- заголовки и текст ---------- */
h1{font-family:var(--disp);font-weight:900;font-size:46px;line-height:1.02;
   letter-spacing:-.04em;text-transform:uppercase;color:var(--ink);margin-top:var(--s5)}
h2{font-family:var(--disp);font-weight:900;font-size:26px;line-height:1.12;
   letter-spacing:-.03em;text-transform:uppercase;color:var(--ink);margin-bottom:var(--s4)}
h3{font-family:var(--disp);font-weight:800;font-size:19px;line-height:1.25;letter-spacing:-.02em}
.lead{margin-top:var(--s4);font-size:17.5px;line-height:1.65;color:var(--muted);max-width:1010px}
.lead b{color:var(--accent);font-weight:600}
.rule{height:2px;background:var(--ink);margin:var(--s5) 0 var(--s6);opacity:.9}
.back{display:inline-block;margin:0 0 var(--s3);font:500 13.5px/1 var(--text);color:var(--muted);
      text-decoration:none}
.back:hover{color:var(--accent)}
.note{font-size:14px;line-height:1.65;color:var(--muted)}
.note b{color:var(--text-ink);font-weight:600}
.privacy{margin-top:var(--s4);font-size:14px;line-height:1.65;color:var(--muted);
         border-top:1px dashed var(--border);padding-top:var(--s3)}
.privacy b{color:var(--green-text);font-weight:600}
code{font-family:var(--mono);font-size:.88em;background:var(--inset);border-radius:5px;padding:1px 5px;color:var(--ink)}

/* ---------- сетки ---------- */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);align-items:start}
.cols.wide{grid-template-columns:1.1fr 1fr}

/* ---------- поверхности ---------- */
.panel{background:var(--paper);border:1px solid var(--border);border-radius:var(--r-lg);
       padding:var(--s5) var(--s5);box-shadow:var(--shadow-panel)}
.panel + .panel{margin-top:var(--s4)}
.panel.tint{background:var(--tint);border-color:#DCE8F2}
.cap{font-family:var(--mono);font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;
     color:var(--muted);margin-bottom:var(--s3)}
.cap b{color:var(--accent)}
.hr{height:1px;background:var(--hairline);margin:var(--s5) 0}

/* ---------- поля ---------- */
textarea,input[type=text],select{
  width:100%;border:1px solid var(--border);border-radius:var(--r-md);padding:11px 13px;
  font:400 14.5px/1.6 var(--mono);color:var(--ink);background:var(--inset);
  transition:border-color .12s ease,background .12s ease;
}
textarea:hover,input[type=text]:hover,select:hover{border-color:#C6C6C6}
textarea:focus,input[type=text]:focus,select:focus{
  outline:none;border-color:var(--accent);background:var(--paper);
  box-shadow:0 0 0 3px rgba(0,119,188,.14)
}
textarea{resize:vertical}
.row{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap}
.row + .row{margin-top:var(--s3)}
label.f{display:flex;flex-direction:column;gap:6px;font:500 12px/1.3 var(--text);
        color:var(--muted);flex:1;min-width:120px}
label.chk{display:flex;align-items:center;gap:var(--s2);font-size:13.5px;color:var(--text-ink);cursor:pointer}
input[type=checkbox],input[type=radio]{accent-color:var(--accent);width:15px;height:15px}

/* ---------- кнопки ---------- */
.btn{display:inline-flex;align-items:center;gap:var(--s2);background:var(--accent);color:#fff;
     border:none;border-radius:var(--r-md);padding:13px 22px;font:800 15px/1 var(--disp);
     cursor:pointer;transition:transform .1s ease,filter .12s ease}
.btn:hover{filter:brightness(.92)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:3px solid rgba(0,119,188,.45);outline-offset:2px}
.btn.ghost{background:var(--paper);color:var(--ink);border:1px solid var(--border);
           font:500 14px/1 var(--text);padding:12px 18px}
.btn.ghost:hover{background:var(--inset);filter:none;border-color:#C6C6C6}
.btn.green{background:var(--green)}
.btn:disabled{opacity:.42;cursor:not-allowed;filter:none}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{outline:3px solid rgba(0,112,178,.55);outline-offset:2px;border-radius:6px}
/* ссылка «к содержимому» — видна только при переходе с клавиатуры */
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:15px 20px;
      border-radius:0 0 var(--r-md) 0;z-index:100;font:600 14px/1 var(--text);text-decoration:none}
.skip:focus{left:0}
/* зона загрузки — теперь кнопка, сбрасываем кнопочное */
.drop{font:inherit;color:inherit;width:100%}
/* тем, кому анимация мешает */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ---------- числа ---------- */
.counts{display:flex;gap:var(--s6);align-items:flex-end;margin-bottom:var(--s5);flex-wrap:wrap}
.cnt b{font:900 50px/1 var(--disp);letter-spacing:-.04em;display:block;color:var(--ink);
       font-variant-numeric:tabular-nums}
.cnt span{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--muted)}
.cnt.now b{color:var(--accent)}
.cnt.gone b{color:var(--red)}

/* ---------- таблицы ---------- */
table{width:100%;border-collapse:collapse;font:400 13.5px/1.5 var(--mono)}
th{text-align:left;background:var(--deep);color:#fff;font-weight:600;font-size:11px;
   letter-spacing:.09em;padding:10px;white-space:nowrap}
td{padding:9px 10px;border-bottom:1px solid var(--hairline);vertical-align:top}
tbody tr:hover td{background:rgba(0,0,0,.015)}
.scroll{max-height:340px;overflow:auto;border:1px solid var(--border);border-radius:var(--r-md);background:var(--paper)}
.tag{display:inline-block;font-family:var(--mono);font-size:11px;border-radius:var(--r-pill);
     padding:3px 10px;white-space:nowrap}
.tag.k{background:var(--green);color:#fff}
.tag.d{background:rgba(197,48,48,.12);color:var(--red)}
.tag.u{background:var(--inset);color:var(--muted)}
tr.dup td{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--red);
          text-decoration-thickness:2px}
tr.keep td{background:var(--tint-green)}

/* ---------- сообщения ---------- */
.empty{color:var(--muted);font-size:14px;padding:var(--s5) var(--s1)}
.warn{font-size:14px;line-height:1.6;color:var(--red);background:#FDF3F3;border-radius:var(--r-sm);
      padding:var(--s3) var(--s4);margin-bottom:var(--s3)}
.ok{font-size:14px;line-height:1.6;color:var(--green-text);background:var(--tint-green);
    border-radius:var(--r-sm);padding:var(--s3) var(--s4);margin-bottom:var(--s3)}

/* ---------- граница автоматики ---------- */
.limit{margin-top:var(--s6);background:var(--paper);border:1px solid var(--border);
       border-left:4px solid var(--red);border-radius:var(--r-lg);padding:var(--s5) var(--s5);
       box-shadow:var(--shadow-panel)}
.limit .cap{color:var(--red)}
.limit p{font-size:15.5px;line-height:1.7;color:var(--text-ink)}
.limit p + p{margin-top:var(--s3)}
.limit b{color:var(--ink);font-weight:600}
.limit .ex{display:block;margin-top:var(--s3);padding:var(--s3) var(--s4);background:var(--inset);
           border-radius:var(--r-sm);font-size:14.5px;color:var(--muted)}
.limit .ex b{color:var(--ink)}

/* ---------- афиша внизу ---------- */
.cta{margin-top:var(--s6);background:var(--deep);color:#fff;border-radius:var(--r-lg);
     padding:var(--s6) var(--s6);display:flex;align-items:center;gap:var(--s6)}
.cta .t{font-family:var(--disp);font-weight:900;font-size:27px;line-height:1.12;
        text-transform:uppercase;letter-spacing:-.02em;max-width:660px}
.cta .s{color:#A8A8A8;font-size:14.5px;line-height:1.7;margin-top:var(--s3);max-width:660px}
.cta a{margin-left:auto;background:var(--blue);color:#fff;text-decoration:none;border-radius:var(--r-md);
       padding:15px 26px;font:800 15px/1 var(--disp);white-space:nowrap;transition:filter .12s ease}
.cta a:hover{filter:brightness(1.12)}

/* ---------- витрина ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);margin-top:var(--s3)}
.card{background:var(--paper);border:1px solid var(--border);border-radius:var(--r-lg);
      padding:var(--s5);text-decoration:none;color:var(--ink);display:flex;flex-direction:column;
      gap:var(--s3);box-shadow:var(--shadow-panel);transition:transform .14s ease,box-shadow .14s ease}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.card .nm{font-family:var(--disp);font-weight:900;font-size:21px;line-height:1.14;
          letter-spacing:-.03em;text-transform:uppercase}
.card .ds{font-size:14.5px;line-height:1.62;color:var(--muted);flex:1}
.card .go{font-size:13.5px;font-weight:600;color:var(--accent)}
.card .st{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em}
.card .st.on{color:var(--green-text)}
.card .st.soon{color:var(--muted)}
.card .st.ask{color:var(--blue)}
.card.off{border-style:dashed;box-shadow:none;background:transparent}
.card.off:hover{transform:none;box-shadow:none}

/* ---------- разделы ---------- */
.sec{display:flex;align-items:baseline;gap:var(--s4);margin:var(--s7) 0 var(--s1)}
.sec h2{margin:0}
.sec .n{font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.1em}
.sec .line{flex:1;height:1px;background:var(--border)}

/* ---------- прочее ---------- */
.fmt{display:inline-block;background:var(--deep);color:#fff;border-radius:var(--r-pill);
     padding:5px 14px;font-family:var(--mono);font-size:12px;letter-spacing:.06em}
mark{background:rgba(0,119,188,.22);color:var(--ink);border-radius:4px;padding:1px 3px}


/* рабочая раскладка инструмента: форма слева, результат справа.
   Задано классом, а не инлайн-стилем, иначе медиазапрос не сработает. */
.cols.side-l{grid-template-columns:420px 1fr}
.cols.side-r{grid-template-columns:1fr 700px}
.prev{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
@media (max-width:1240px){
  .cols.side-r{grid-template-columns:1fr 1fr}
}

/* Большой предпросмотр и переключатель размеров: одна картинка крупно вместо
   батареи разнокалиберных полотен, которые невозможно сравнить. */
.bigstage{background:var(--inset);border-radius:var(--r-md);padding:var(--s5);display:flex;
  align-items:center;justify-content:center;min-height:420px}
.bigstage canvas{max-width:100%;max-height:520px;width:auto;height:auto;display:block;
  box-shadow:0 8px 24px rgba(17,17,17,.14)}
.sizebar{display:flex;gap:var(--s2);flex-wrap:wrap}
.sizebar button{border:1px solid var(--border);background:var(--paper);border-radius:var(--r-pill);
  padding:10px 16px;font:600 13px/1 var(--mono);cursor:pointer;color:var(--ink)}
.sizebar button:hover{border-color:var(--accent)}
.sizebar button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.sizebar button:focus-visible{outline:3px solid rgba(0,112,178,.55);outline-offset:2px}

/* полотно схемы: вектор не сжимаем ниже читаемого, иначе подписи превращаются в пыль */
.stage{display:flex;align-items:center;justify-content:center;min-height:360px}
.stage svg{width:auto;height:auto;max-width:100%}
@media (max-width:1100px){
  .stage{justify-content:flex-start;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* ================= АРХЕТИП «ВЕРСТАК» =================
   Для страниц инструментов. Не две белые карточки на сером фоне, а одна рабочая
   поверхность во всю ширину: слева узкая полоса управления, справа результат.
   Результат — главное, поэтому он крупный и стоит первым по важности, а не внизу. */
.bench{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--paper);
  display:grid;grid-template-columns:340px 1fr;overflow:hidden;box-shadow:var(--shadow-panel)}
.bench-side{padding:var(--s5);border-right:1px solid var(--hairline);background:var(--inset);
  display:flex;flex-direction:column;gap:var(--s4)}
.bench-main{padding:var(--s5) var(--s5) var(--s5);min-width:0;display:flex;flex-direction:column;gap:var(--s4)}
.bench-title{display:flex;align-items:baseline;gap:var(--s4);flex-wrap:wrap}
.bench-title h1{margin:0;font-size:38px}
.bench-title .tagline{font-size:15px;color:var(--muted);max-width:620px;line-height:1.55}
.bench-stage{background:var(--inset);border-radius:var(--r-md);padding:var(--s4) var(--s5)}
.bench-stage .counts{margin-bottom:0}
.bench-stage .cnt b{font-size:64px}
.bench .cap{margin-bottom:0}
.bench .scroll{max-height:none;border:none;background:transparent}
.bench .scroll table th:first-child{position:static}
.bench-side textarea{min-height:150px;background:var(--paper)}
.bench-side .row .btn{align-self:stretch}
.bench-side label{display:flex;align-items:center;gap:var(--s2);font-size:14px;color:var(--text-ink);
  cursor:pointer;min-height:30px}
.bench-side label:has(> input[type=checkbox]),.bench-side label:has(> input[type=radio]){padding:2px 0}
/* зеркальный «верстак»: главное — не форма, а документ или картинка.
   Тогда рабочая поверхность слева и широкая, а управление уходит в узкую полосу справа. */
.bench.flip{grid-template-columns:1fr 340px}
.bench.flip .bench-side{order:2;border-right:none;border-left:1px solid var(--hairline)}
.bench.flip .bench-main{order:1}

@media (max-width:1100px){
  .bench,.bench.flip{grid-template-columns:1fr}
  .bench.flip .bench-side{order:2;border-left:none;border-top:1px solid var(--hairline)}
  .bench-side{border-right:none;border-bottom:1px solid var(--hairline)}
  .bench-title h1{font-size:30px}
  .bench-stage .cnt b{font-size:46px}
}
@media (max-width:720px){
  .bench-side,.bench-main{padding:var(--s4)}
  .bench-stage{padding:var(--s3) var(--s4)}
  .bench-stage .cnt b{font-size:38px}
}

@media (max-width:1100px){
  .cols.side-l,.cols.side-r{grid-template-columns:1fr}
  .prev{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .prev{grid-template-columns:1fr}
}

@media (max-width:1100px){
  .cols,.cols.wide{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr 1fr}
  h1{font-size:36px}
  .wrap{padding:var(--s5) var(--s5) 0}
  .top .in{padding:0 var(--s5);gap:var(--s4)}
  .cta{flex-direction:column;align-items:flex-start;gap:var(--s5)}
  .cta a{margin-left:0}
}
@media (max-width:720px){
  body{font-size:15.5px}
  .wrap{padding:var(--s4) var(--s4) 0}
  .top .in{padding:0 var(--s4);height:54px}
  /* пять пунктов в шапке на телефоне не помещаются: меню прокручивается само,
     а не растягивает страницу */
  .top nav{gap:var(--s3);overflow-x:auto;-webkit-overflow-scrolling:touch;
    white-space:nowrap;min-width:0;padding:6px 0}
  
  .top .mark span{display:none}
  .top .mark{min-width:44px;justify-content:center}
  .cards{grid-template-columns:1fr}
  h1{font-size:29px}
  .counts{gap:var(--s5)}
  .cnt b{font-size:38px}
  .cta{padding:var(--s5)}
  .cta .t{font-size:22px}
}
@media print{
  .top,.cta,.limit{display:none!important}
  body{background:#fff;padding:0}
}

/* ================= МОБИЛЬНАЯ ВЁРСТКА =================
   Планшет и телефон — не уменьшенный монитор. Здесь: палец вместо курсора,
   запрет автозума на полях, читаемые таблицы и листы А4, вырез экрана. */

*{-webkit-tap-highlight-color:transparent}
a,button,input,select,textarea,label,summary{touch-action:manipulation}
body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}

/* таблица шире экрана: шапка едет вместе с прокруткой, справа видно, что есть ещё */
.scroll{background:
  linear-gradient(to left,rgba(17,17,17,.07),rgba(17,17,17,0) 26px) right/26px 100% no-repeat,
  var(--paper)}
.scroll th:first-child{position:sticky;left:0;z-index:2;box-shadow:1px 0 0 rgba(255,255,255,.14)}
td,th{overflow-wrap:anywhere}

/* телефон */
@media (max-width:720px){
  /* iOS приближает страницу, если поле мельче 16px — держим ровно 16.
     !important здесь потому, что у каждого инструмента свои локальные стили,
     и они идут в документе позже общего файла. Исключение ограничено этим блоком. */
  textarea,input[type=text],select{font-size:16px!important;padding:13px 14px!important}
  .btn{padding:15px 20px;font-size:14.5px}
  .btn.ghost{padding:14px 16px;font-size:14.5px}
  .row{gap:var(--s2)}
  .row .btn,.row .btn.ghost{flex:1;justify-content:center}
  label.chk{padding:11px 0;font-size:14.5px;min-height:44px}
  /* флажок может быть в обычной подписи без класса — считаем областью всю подпись */
  label:has(> input[type=checkbox]),label:has(> input[type=radio]){min-height:44px;padding:11px 0;
    font-size:14.5px;display:flex;align-items:center;gap:var(--s2)}
  input[type=checkbox],input[type=radio]{width:20px;height:20px;flex:none}
  label.f{font-size:12.5px;min-width:100%}
  /* палец, а не курсор: цели не меньше 44 px */
  .top nav a{padding:15px 2px}
  .top .mark{padding:10px 0}
  .pv .dl{padding:15px 0!important;font-size:13px}
  .sizebar button{padding:13px 18px!important;font-size:13.5px!important;min-height:44px}
  .bigstage{min-height:300px;padding:var(--s4)}
  .sw{width:44px!important;height:44px!important}
  .node-row button{min-width:44px!important;min-height:44px!important}
  .drow button{padding:14px 16px!important;font-size:13px!important}
  .sim button{padding:14px 18px!important}
  .lib button{padding:13px 16px!important}
  .flags button{width:44px!important;height:44px!important}
  .add{padding:14px 0!important}
  .chips span,.flds span{padding:11px 16px}
  .fmt{padding:8px 14px}
  /* призыв: кнопка во всю ширину */
  .cta a{display:block;width:100%;text-align:center;padding:17px 20px}
  /* лист А4 не сжимаем в нечитаемое: показываем в натуральную величину с прокруткой */
  .sheet{min-width:580px}
  .sheetWrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-md)}
  .cap{font-size:11px}
  .cnt b{font-size:36px}
  .counts{gap:var(--s4)}
  h2{font-size:22px}
  .cta .t{font-size:20px}
  .card{padding:var(--s4)}
  .limit{padding:var(--s4)}
  .limit p{font-size:15px}
}

/* планшет */
@media (min-width:721px) and (max-width:1024px){
  textarea,input[type=text],select{font-size:15.5px}
  .cta a{margin-left:0}
  .cta{flex-direction:column;align-items:flex-start;gap:var(--s4)}
}

/* ландшафт телефона: мало высоты, много ширины — не тратим её на воздух */
@media (max-height:460px) and (orientation:landscape){
  h1{font-size:26px}
  .wrap{padding-top:var(--s3)}
  .top .in{height:48px}
}