:root{
    --paper:#f4f3ee;
    --card:#fcfbf8;
    --ink:#181b1f;
    --blue:#28518f;
    --blue-soft:#e8eef7;
    --muted:#5d6470;
    --line:#d8d5cc;
    --grid:rgba(40,81,143,.10);
    --grid-bold:rgba(40,81,143,.18);
    --err:#9c1f15;
    --mono:ui-monospace,'Cascadia Mono','JetBrains Mono',Consolas,'Liberation Mono',monospace;
    --sans:'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:var(--sans);
    font-size:15px;
    line-height:1.5;
  }
  ::selection{background:var(--blue);color:#fff}

  /* ── шапка ─────────────────────────────── */
  header{
    border-bottom:1.5px solid var(--ink);
    background:var(--card);
  }
  .head-in{
    max-width:1460px;margin:0 auto;padding:18px 24px 16px;
    display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;
  }
  .brand{
    font-weight:700;font-size:21px;letter-spacing:.14em;text-transform:uppercase;
    white-space:nowrap;
  }
  .brand .tick{color:var(--blue)}
  .eyebrow{
    font-family:var(--mono);font-size:11.5px;color:var(--muted);
    letter-spacing:.08em;text-transform:uppercase;
  }

  /* ── сетка страницы ─────────────────────── */
  main{
    max-width:1460px;margin:0 auto;padding:22px 24px 48px;
    display:grid;grid-template-columns:minmax(340px,460px) 1fr;gap:22px;
    align-items:start;
  }
  @media(max-width:980px){main{grid-template-columns:1fr}}
  /* На узких экранах .editor-bar висит ровно на границе переноса строк —
     органический flex-wrap «перескакивает» между раскладками из-за микро-
     различий в готовности шрифта на момент рендера (Cumulative Layout
     Shift). Явно фиксируем: select — своя строка, кнопки — своя, всегда
     одинаково, без зависимости от точной ширины текста. */
  @media(max-width:560px){
    #example{flex:1 0 100%}
  }

  .panel-label{
    font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
    color:var(--muted);margin-bottom:8px;display:flex;align-items:center;gap:10px;
  }
  .panel-label::after{content:'';flex:1;height:1px;background:var(--line)}

  /* ── редактор ───────────────────────────── */
  .editor-card{border:1.5px solid var(--ink);background:var(--card)}
  .editor-bar{
    display:flex;gap:8px;align-items:center;padding:8px 10px;
    border-bottom:1px solid var(--line);flex-wrap:wrap;
  }
  select,button{
    font-family:var(--sans);font-size:11.5px;font-weight:600;
    letter-spacing:.07em;text-transform:uppercase;
    border:1.5px solid var(--ink);background:var(--card);color:var(--ink);
    padding:6px 11px;cursor:pointer;border-radius:0;
  }
  /* фиксированная ширина (не max-width): без неё select расширяется, когда
     JS дозагружает варианты примеров (id="example") — это двигает всю форму
     вниз (Cumulative Layout Shift), см. Lighthouse */
  select{width:230px}
  #example{width:170px}
  #pagesel{width:190px}
  button:hover{background:var(--ink);color:var(--card)}
  button.primary{background:var(--blue);border-color:var(--blue);color:#fff}
  button.primary:hover{background:#1c3c6c;border-color:#1c3c6c}
  button:focus-visible,select:focus-visible,textarea:focus-visible,input:focus-visible{
    outline:2px solid var(--blue);outline-offset:2px;
  }
  textarea{
    width:100%;min-height:430px;resize:vertical;border:0;display:block;
    background:var(--card);color:var(--ink);
    font-family:var(--mono);font-size:13.5px;line-height:1.6;
    padding:14px 16px;caret-color:var(--blue);
  }
  textarea:focus{outline:none;box-shadow:inset 3px 0 0 var(--blue)}

  /* справка по синтаксису */
  details.syntax{margin-top:14px;border:1px solid var(--line);background:var(--card)}
  details.syntax summary{
    cursor:pointer;padding:10px 14px;font-size:12px;font-weight:700;
    letter-spacing:.12em;text-transform:uppercase;color:var(--blue);
    list-style:none;
  }
  details.syntax summary::before{content:'+ '}
  details.syntax[open] summary::before{content:'− '}
  .syntax-body{padding:4px 14px 14px;font-size:13px}
  .syntax-body table{width:100%;border-collapse:collapse}
  .syntax-body td{
    padding:6px 8px 6px 0;vertical-align:top;border-top:1px solid var(--line);
  }
  .syntax-body td:first-child{font-family:var(--mono);font-size:12px;white-space:pre;color:var(--ink)}
  .syntax-body td:last-child{color:var(--muted)}
  .syntax-body .note{margin-top:10px;color:var(--muted);font-size:12.5px}

  /* ── чертёжный лист ─────────────────────── */
  .sheet-tools{
    display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px;
  }
  .sheet-tools .sp{flex:1}
  .zoom-val{
    font-family:var(--mono);font-size:12px;min-width:52px;text-align:center;
    border:1px solid var(--line);padding:6px 4px;background:var(--card)
  }
  label.chk{
    display:inline-flex;gap:7px;align-items:center;font-size:12px;font-weight:600;
    letter-spacing:.05em;text-transform:uppercase;cursor:pointer;
    border:1px solid var(--line);padding:6px 10px;background:var(--card)
  }
  label.chk input{accent-color:var(--blue)}

  .err{
    display:none;border:1.5px solid var(--err);color:var(--err);
    background:#fbeeec;padding:9px 13px;font-family:var(--mono);font-size:12.5px;
    margin-bottom:10px;white-space:pre-wrap;
  }
  .err.show{display:block}

  .lint{
    border:1.5px solid #8a6d1a;color:#6b5410;background:#fdf6e3;
    padding:9px 13px;font-size:12.5px;margin-bottom:10px;
  }
  .lint-head{font-weight:700;display:flex;align-items:center;gap:12px;justify-content:space-between}
  .lint ul{margin:6px 0 0;padding-left:18px;font-family:var(--mono);font-size:12px}
  .lint button{border-color:#8a6d1a;color:#6b5410;background:transparent}
  .lint button:hover{background:#8a6d1a;color:#fff}

  .sheet{
    border:1.5px solid var(--ink);
    background:
      linear-gradient(var(--grid-bold) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid-bold) 1px, transparent 1px),
      linear-gradient(var(--grid) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid) 1px, transparent 1px),
      #fdfdfb;
    background-size:50px 50px,50px 50px,10px 10px,10px 10px;
    position:relative;
  }
  .sheet::after{ /* внутренняя рамка поля чертежа */
    content:'';position:absolute;inset:6px;border:1px solid var(--ink);
    pointer-events:none;
  }
  .sheet-scroll{
    overflow:auto;max-height:78vh;min-height:420px;
    padding:26px;display:flex;justify-content:flex-start;
  }
  .sheet-scroll svg{display:block;background:transparent}

  /* основная надпись (штамп) */
  .stamp{
    border-top:1.5px solid var(--ink);
    display:grid;grid-template-columns:1fr auto auto;
    background:var(--card);position:relative;z-index:1;
  }
  .stamp>div{
    padding:7px 14px;font-family:var(--mono);font-size:11px;
    letter-spacing:.06em;text-transform:uppercase;
  }
  .stamp>div+div{border-left:1px solid var(--ink)}
  .stamp .t{color:var(--muted);font-size:9px;display:block;letter-spacing:.14em}
  .stamp .v{font-size:12px;color:var(--ink)}

  footer{
    max-width:1460px;margin:0 auto;padding:0 24px 28px;
    font-size:12px;color:var(--muted)
  }
  footer p{margin-bottom:8px}
  footer p:last-child{margin-bottom:0}
  .footer-links a{color:var(--blue)}
  @media(prefers-reduced-motion:no-preference){
    .sheet-scroll svg{transition:width .12s ease}
  }

  /* ── баннер «бесплатно временно» ─────────── */
  .banner{background:var(--blue-soft);border-bottom:1.5px solid var(--blue);font-size:13px}
  .banner-in{
    max-width:1460px;margin:0 auto;padding:9px 24px;
    display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  }
  .banner-in a{color:var(--blue);font-weight:700}
  .banner #banner-close{
    margin-left:auto;border:0;background:transparent;font-size:18px;
    line-height:1;padding:2px 8px;cursor:pointer;color:var(--muted);
    text-transform:none;letter-spacing:0;
  }
  .banner #banner-close:hover{background:transparent;color:var(--ink)}
  .banner.collapsed{display:none}

  /* ── обратная связь: плавающая кнопка + выезжающая панель ── */
  .fb-open-btn{
    position:fixed;right:22px;bottom:22px;z-index:40;
    background:var(--ink);color:var(--card);
    box-shadow:0 2px 12px rgba(0,0,0,.2);
  }
  .fb-open-btn:hover{background:var(--blue);border-color:var(--blue)}
  .fb-overlay{
    position:fixed;inset:0;background:rgba(24,27,31,.35);
    display:flex;justify-content:flex-end;z-index:50;
  }
  .fb-overlay[hidden]{display:none}
  .fb-panel{
    width:min(420px,92vw);height:100%;background:var(--card);
    border-left:1.5px solid var(--ink);display:flex;flex-direction:column;
    box-shadow:-8px 0 24px rgba(0,0,0,.18);
  }
  .fb-head,.modal-head{
    display:flex;align-items:center;justify-content:space-between;
    padding:16px 20px;border-bottom:1px solid var(--line);
  }
  .fb-head h2,.modal-head h2{font-size:14px;letter-spacing:.08em;text-transform:uppercase}
  .fb-head button,.modal-head button{
    border:0;background:transparent;font-size:20px;line-height:1;
    padding:2px 6px;cursor:pointer;color:var(--muted);
  }
  .fb-head button:hover,.modal-head button:hover{background:transparent;color:var(--ink)}
  .fb-body{padding:16px 20px;display:flex;flex-direction:column;gap:14px;overflow:auto}
  .fb-field{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--muted)}
  .fb-field textarea,.fb-field input{
    font-family:var(--sans);font-size:13.5px;color:var(--ink);
    border:1px solid var(--line);padding:8px 10px;background:#fff;resize:vertical;
  }
  .fb-field textarea:focus,.fb-field input:focus{outline:none;box-shadow:inset 2px 0 0 var(--blue)}
  .fb-honeypot{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
  .fb-status{font-size:12.5px;min-height:1.2em}
  .fb-status.ok{color:#1a6b2f}
  .fb-status.err{color:var(--err)}

  /* ── модальное окно (промт для ИИ) ─────────── */
  .modal-overlay{
    position:fixed;inset:0;background:rgba(24,27,31,.45);
    display:flex;align-items:center;justify-content:center;z-index:60;padding:24px;
  }
  .modal-overlay[hidden]{display:none}
  .modal{
    width:min(720px,100%);max-height:85vh;display:flex;flex-direction:column;
    background:var(--card);border:1.5px solid var(--ink);box-shadow:0 12px 40px rgba(0,0,0,.28);
  }
  .modal-hint{padding:14px 20px 0;font-size:12.5px;color:var(--muted)}
  .modal-pre{
    margin:14px 20px;padding:14px 16px;background:#fff;border:1px solid var(--line);
    font-family:var(--mono);font-size:12px;line-height:1.55;white-space:pre-wrap;
    overflow:auto;flex:1;
  }
  .modal-actions{display:flex;align-items:center;gap:12px;padding:0 20px 18px}
  #ai-copy-status{font-size:12px;color:#1a6b2f}

  /* ── контентные SEO-страницы (/gost/, /sintaksis/, /primery/, /faq/) ── */
  .brand-link{text-decoration:none;color:inherit}
  .content-nav{
    background:var(--card);border-bottom:1px solid var(--line);
    font-family:var(--mono);font-size:11.5px;color:var(--muted);
  }
  .content-nav-in{max-width:1460px;margin:0 auto;padding:9px 24px}
  .content-nav a{color:var(--muted);text-decoration:none}
  .content-nav a:hover{color:var(--blue)}
  .content-page{
    display:block;max-width:760px;margin:0 auto;padding:32px 24px 56px;
  }
  .content-page h1{font-size:26px;margin-bottom:14px;letter-spacing:-.01em}
  .content-page h2{font-size:17px;margin:32px 0 12px;letter-spacing:-.005em}
  .content-page p{margin-bottom:12px}
  .content-page .lead{color:var(--muted);font-size:16px}
  .content-page code{
    font-family:var(--mono);font-size:.92em;background:var(--blue-soft);
    padding:1px 5px;
  }
  .content-page a{color:var(--blue)}
  .ref-table{width:100%;border-collapse:collapse;margin-bottom:16px;font-size:14px}
  .ref-table th,.ref-table td{
    text-align:left;padding:8px 10px;border-top:1px solid var(--line);vertical-align:top;
  }
  .ref-table th{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
  .ref-list{margin:0 0 16px 20px}
  .ref-list li{margin-bottom:8px}
  .symbol-code,.example-fig+.symbol-code{
    background:var(--card);border:1px solid var(--line);padding:12px 14px;
    font-family:var(--mono);font-size:12.5px;white-space:pre-wrap;overflow:auto;
  }
  .symbol-grid{display:grid;grid-template-columns:1fr;gap:22px;margin:20px 0}
  .symbol-card{border:1.5px solid var(--ink);background:var(--card);padding:18px}
  .symbol-card h2{margin-top:0;font-size:16px}
  .symbol-ref{font-family:var(--mono);font-size:11px;color:var(--muted);text-transform:uppercase}
  .symbol-fig,.example-fig,.example-thumb{
    background:#fdfdfb;border:1px solid var(--line);padding:10px;margin:10px 0;
    overflow:auto;text-align:center;
  }
  .symbol-fig svg,.example-fig svg{max-width:100%;height:auto}
  .example-thumb svg{max-width:100%;height:120px;width:auto}
  .example-grid{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
    gap:16px;margin:20px 0;
  }
  .example-card{
    display:block;border:1.5px solid var(--ink);background:var(--card);
    padding:14px;text-decoration:none;color:var(--ink);
  }
  .example-card:hover{border-color:var(--blue)}
  .example-card h2{font-size:14px;margin:4px 0}
  .example-card p{font-size:12.5px;color:var(--muted);margin-bottom:0}
  .breadcrumb{font-size:12.5px}
  .btn-open{
    display:inline-block;border:1.5px solid var(--blue);color:var(--blue);
    padding:8px 14px;text-decoration:none;font-weight:600;font-size:13px;
    text-transform:uppercase;letter-spacing:.05em;
  }
  .btn-open:hover{background:var(--blue);color:#fff}
  .faq-list{margin:20px 0}
  .faq-item{
    border:1px solid var(--line);background:var(--card);padding:12px 16px;margin-bottom:10px;
  }
  .faq-item summary{cursor:pointer;font-weight:600}
  .faq-item p{margin:10px 0 0;color:var(--muted)}