/* Дизайн-система «инженерный чертёж» — перенос из dc-макета.
   Токены: бумага #F7F6F2, графит #1C1E21, сурик #C8501E, чертёжный #1D4ED8 */
:root{
  --paper:#F7F6F2; --card:#FFFEFB; --ink:#1C1E21; --acc:#C8501E; --acc-h:#B3461A;
  --blue:#1D4ED8; --warn:#8A5A00; --warn-bg:#FFF6DF; --err:#9F1D1D;
  --ink55:rgba(28,30,33,.55); --ink45:rgba(28,30,33,.45); --ink35:rgba(28,30,33,.35);
  --ink25:rgba(28,30,33,.25); --ink6:rgba(28,30,33,.6); --ink7:rgba(28,30,33,.7);
  --mono:'IBM Plex Mono',ui-monospace,monospace; --sans:'Golos Text',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--paper)}
body{color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.5;min-height:100vh;position:relative}
a{color:var(--acc);text-decoration:none;border-bottom:1px solid rgba(200,80,30,.45)}
a:hover{color:var(--ink);border-bottom-color:var(--ink)}
input,button,textarea{font:inherit;color:inherit}
@keyframes draw{from{stroke-dashoffset:1400}to{stroke-dashoffset:0}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes flick{0%{opacity:.25}100%{opacity:1}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* миллиметровка */
.gridbg{position:fixed;inset:0;pointer-events:none;z-index:0;
 background-image:repeating-linear-gradient(0deg,rgba(28,30,33,.055) 0 1px,transparent 1px 8px),
 repeating-linear-gradient(90deg,rgba(28,30,33,.055) 0 1px,transparent 1px 8px),
 repeating-linear-gradient(0deg,rgba(28,30,33,.085) 0 1px,transparent 1px 40px),
 repeating-linear-gradient(90deg,rgba(28,30,33,.085) 0 1px,transparent 1px 40px)}
.page{position:relative;z-index:1}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}

/* типографика-утилиты */
.mono{font-family:var(--mono)}
.lbl{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink55)}
.lbl-sm{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink45)}
.sheet-title{font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink55)}
.tnum{font-variant-numeric:tabular-nums}

/* шапка */
header.dc{border-bottom:1px solid var(--ink)}
header.dc .in{max-width:1200px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.brand{display:flex;align-items:baseline;gap:10px;cursor:pointer}
.brand b{font-family:var(--mono);font-weight:600;font-size:15px;letter-spacing:.04em}
.brand span{font-family:var(--mono);font-size:11px;color:var(--ink55);letter-spacing:.18em;text-transform:uppercase}
.hdr-cells{display:flex;border:1px solid var(--ink35);font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.hdr-cells span{padding:6px 10px;border-right:1px solid var(--ink35);color:var(--ink55)}
.hdr-cells span:last-child{border-right:0;color:var(--ink)}

/* рамки и панели */
.frame{border:1px solid var(--ink);background:var(--card)}
.frame-thin{border:1px solid var(--ink35)}
.panel-hd{border-bottom:1px solid var(--ink35);padding:8px 14px;display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink55)}

/* кнопки */
.btn{border:1px solid var(--ink);background:transparent;padding:12px 24px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.btn:hover{background:repeating-linear-gradient(45deg,rgba(200,80,30,.14) 0 1px,transparent 1px 7px)}
.btn:active{background:var(--ink);color:var(--card)}
.btn.primary{background:var(--acc);color:var(--card)}
.btn.primary:hover{background:var(--acc-h)}
.btn.primary:active{background:var(--ink)}
.btn.ghost{border-color:var(--ink35);color:var(--ink7)}
.btn.ghost:hover{border-color:var(--ink);color:var(--ink);background:transparent}
.link-dotted{border:0;background:transparent;border-bottom:1px dotted rgba(28,30,33,.45);padding:2px 0;font-family:var(--mono);font-size:12px;color:rgba(28,30,33,.5);cursor:pointer}
.link-dotted:hover{color:var(--ink);border-bottom-color:var(--ink)}

/* размерная линия-разделитель (засечки суриком) */
.dimrule{display:flex;align-items:center;gap:0}
.dimrule .mid{flex:1;border-top:1px solid var(--ink35)}
.dimrule.dark .mid{border-top-color:rgba(28,30,33,.55)}

/* штамп-футер */
footer.dc{border-top:1px solid var(--ink);margin-top:40px}
footer.dc table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:11px}
footer.dc td{padding:10px 12px;border-right:1px solid var(--ink25);border-bottom:1px solid var(--ink25)}
footer.dc tr:last-child td{border-bottom:0}
footer.dc td:last-child{border-right:0}
footer.dc td.k{color:var(--ink55)}
footer.dc .disc{padding:14px 12px 26px;font-family:var(--mono);font-size:11px;color:var(--ink55);line-height:1.7}

/* поля-бланки */
.blank-input{width:100%;border:0;border-bottom:1px solid var(--ink);background:transparent;outline:none;padding:6px 2px;font-family:var(--mono);font-size:17px}
.blank-input:focus{border-bottom-width:2px}
.blank-input.err{border-bottom-color:var(--err)}

/* выноска-предупреждение */
.callout-warn{display:flex;max-width:460px}
.callout-warn .txt{border-top:1px solid var(--warn);background:var(--warn-bg);padding:8px 10px;margin-top:20px;font-family:var(--mono);font-size:12px;color:var(--warn);line-height:1.5}

/* таблица-спецификация */
.spec-table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:12px}
.spec-table td{padding:6px 10px;border-bottom:1px solid rgba(28,30,33,.14)}
.u-user{border-bottom:1px solid var(--ink)}
.u-inferred{border-bottom:1px dashed rgba(28,30,33,.6)}
.u-default{border-bottom:1px dotted rgba(28,30,33,.5)}

/* маркер оси */
.axmark{width:26px;height:26px;border-radius:50%;border:1px solid var(--ink35);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:12px;color:var(--ink45);background:transparent;flex:none}
.axmark.done{background:var(--ink);color:var(--card);border-color:var(--ink)}
.axmark.cur{background:var(--acc);color:var(--card);border-color:var(--acc)}

/* модал */
.modal-back{position:fixed;inset:0;z-index:10;background:rgba(28,30,33,.45);display:none;align-items:center;justify-content:center;padding:20px}
.modal-back.open{display:flex}
.modal{width:100%;max-width:520px;border:1px solid var(--ink);background:var(--paper);animation:fadein .2s ease-out}
.modal .hd{display:flex;align-items:center;border-bottom:1px solid var(--ink);padding:10px 14px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.field-err{display:flex;margin-top:6px}
.field-err .t{margin-top:12px;font-family:var(--mono);font-size:11px;color:var(--err);border-bottom:1px solid var(--err)}
.consent-box{width:18px;height:18px;flex:none;border:1px solid var(--ink);background:transparent;color:var(--card);cursor:pointer;font-family:var(--mono);font-size:12px;line-height:1;padding:0}
.consent-box.on{background:var(--acc)}

/* штриховки */
.hatch-hover:hover{background:repeating-linear-gradient(45deg,rgba(200,80,30,.12) 0 1px,transparent 1px 7px)}
.hatch-warn{background:repeating-linear-gradient(45deg,rgba(138,90,0,.13) 0 1px,transparent 1px 7px)}
.hatch-dim{background:repeating-linear-gradient(45deg,rgba(28,30,33,.055) 0 1px,transparent 1px 7px)}
.svggrid{background-image:repeating-linear-gradient(0deg,rgba(28,30,33,.06) 0 1px,transparent 1px 10px),repeating-linear-gradient(90deg,rgba(28,30,33,.06) 0 1px,transparent 1px 10px)}

/* карточка варианта */
.vcard{border:1px solid var(--ink);background:var(--card)}
.vcard.sel{border-color:var(--acc)}
.vcard .vh{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--ink35)}
.vcard .vh .name{font-family:var(--mono);font-size:16px;letter-spacing:.04em;text-transform:uppercase}
.vcard .vh .tag{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink45)}
.vmark{width:26px;height:26px;border:1px solid var(--ink);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:12px;flex:none}
.vcard.sel .vmark{background:var(--acc);color:var(--card);border-color:var(--acc)}
.viewer-tools{display:flex;align-items:center;border-bottom:1px solid var(--ink35);font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.viewer-tools button{flex:1;border:0;border-right:1px solid var(--ink25);background:transparent;padding:8px 4px;cursor:pointer}
.viewer-tools button.on{background:var(--acc);color:var(--card)}
.viewer-tools button.on.blue{background:var(--blue)}
.mini-table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:11px}
.mini-table td{padding:5px 8px;border-right:1px solid var(--ink25);border-bottom:1px solid var(--ink25)}
.mini-table td:last-child{border-right:0}
.mini-table td.k{color:rgba(28,30,33,.5)}

/* дифф */
.diff-table{width:100%;border-collapse:collapse;border:1px solid var(--ink);background:var(--card);font-family:var(--mono);font-size:13px}
.diff-table th{text-align:left;padding:9px 12px;border-bottom:1px solid var(--ink);border-right:1px solid var(--ink25);font-weight:500}
.diff-table th:last-child{border-right:0}
.diff-table td{padding:8px 12px;border-bottom:1px solid rgba(28,30,33,.16);border-right:1px solid var(--ink25)}
.diff-table td:last-child{border-right:0}
.diff-table td.k{color:var(--ink6)}

/* адаптив */
.cols-landing{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;align-items:start}
.cols-interview{display:grid;grid-template-columns:40px minmax(0,1fr) minmax(0,460px);gap:28px;align-items:start}
.cols-variants{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start}
.cols-ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.cols-facts{display:grid;grid-template-columns:repeat(4,1fr)}
.axis-rail{display:flex;flex-direction:column;gap:14px;padding-top:34px}
.draw-panel{position:sticky;top:20px}
h1.dc{margin:0 0 8px;font-size:44px;line-height:1.08;font-weight:500;letter-spacing:-.015em;max-width:15ch}
h2.dc{margin:0 0 10px;font-size:30px;font-weight:500;line-height:1.15;letter-spacing:-.01em}
@media (max-width:860px){
 .cols-landing{grid-template-columns:minmax(0,1fr);gap:32px}
 .cols-interview{grid-template-columns:minmax(0,1fr)}
 .cols-variants{grid-template-columns:minmax(0,1fr)}
 .cols-ways{grid-template-columns:minmax(0,1fr)}
 .cols-facts{grid-template-columns:repeat(2,1fr)}
 .axis-rail{flex-direction:row;padding-top:0;flex-wrap:wrap}
 .draw-panel{position:static;order:-1}
 h1.dc{font-size:32px}
 h2.dc{font-size:25px}
}