/* /markirovka/ — разбор строки по частям */
.h1-m{font-size:clamp(36px,4.6vw,64px);margin-bottom:12px}
.vvod{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;margin:6px 0 16px}
.vvod-pole{position:relative}
.vvod input{width:100%;font:500 22px var(--f);letter-spacing:-.01em;padding:16px 52px 16px 20px;border:1.5px solid #CFD1D5;border-radius:6px;background:#fff;color:var(--ink);transition:border-color .2s,box-shadow .2s}
.vvod input:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 4px rgba(28,29,31,.06)}
.ochist{position:absolute;right:10px;top:50%;transform:translateY(-50%);border:0;background:none;font-size:24px;color:var(--mute);padding:4px 10px}
.vvod-go{display:flex;align-items:center;gap:12px;background:var(--red);color:#fff;border:0;border-radius:6px;padding:0 26px;font-weight:600;font-size:16px;transition:filter .2s}
.vvod-go:hover{filter:brightness(1.08)}
.primery{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:14px;color:var(--mute);padding-bottom:26px;border-bottom:1px solid var(--line)}
.primery span{margin-right:6px}
.primery button{border:1px solid var(--line);background:var(--soft);border-radius:999px;padding:7px 16px;font-size:13.5px;color:var(--ink);font-family:var(--m);transition:border-color .2s,background .2s}
.primery button:hover{border-color:var(--ink)}
.primery button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}

.rezultat{position:relative;padding:22px 0 10px;max-width:1120px}
h2.mal{font-size:15px;letter-spacing:0;font-weight:600;color:var(--ink2);margin:0 0 4px;display:inline-block;padding-bottom:10px;border-bottom:2px solid var(--red)}
.stroka-vid{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:flex-end;margin:22px 0 0;max-width:calc(100% - 280px);min-height:70px}
.stroka-vid span{font-size:clamp(30px,4vw,54px);font-weight:800;letter-spacing:-.035em;line-height:1.05;position:relative;padding-bottom:12px;white-space:nowrap}
.stroka-vid span.ch{cursor:pointer}
.stroka-vid span.ch::after{content:"";position:absolute;left:2px;right:2px;bottom:0;height:9px;border:1.6px solid var(--red);border-top:0;transform-origin:left;animation:skoba .5s cubic-bezier(.2,.7,.2,1) both}
.stroka-vid span.ch:hover,.stroka-vid span.ch.akt{color:var(--red)}
.stroka-vid span.sl{color:var(--mute2)}
@keyframes skoba{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.vynoski{position:relative;height:46px;max-width:100%}
.vynoski svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.vynoski path{fill:none;stroke:var(--red);stroke-width:1.4;stroke-dasharray:400;stroke-dashoffset:400;animation:liniya .8s .15s ease forwards}
.vynoski circle{fill:var(--red)}
@keyframes liniya{to{stroke-dashoffset:0}}
.kartochki{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;max-width:calc(100% - 270px)}
.kt{border:1px solid var(--line);border-radius:6px;padding:20px 18px 18px;background:#fff;display:flex;flex-direction:column;gap:10px;animation:vyezd .45s ease both;transition:border-color .25s,box-shadow .25s}
.kt.akt{border-color:var(--ink);box-shadow:0 10px 30px rgba(0,0,0,.06)}
.kt .kod{font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1}
.kt .chto{font-size:14px;color:var(--ink2);line-height:1.35}
.kt p{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink2)}
.kt .smotr{background:var(--red-soft);border-radius:4px;padding:12px 12px 12px 40px;position:relative;font-size:13.5px;line-height:1.45;color:var(--ink2);margin-top:auto}
.kt .smotr svg{position:absolute;left:12px;top:12px;width:18px;height:18px;color:var(--red)}
.kt .smotr b{display:block;color:var(--red);font-size:13.5px;margin-bottom:3px}
.kt .gost{font:500 11.5px var(--m);color:var(--mute)}
.r-obr{position:absolute;right:0;top:58px;width:250px;filter:drop-shadow(0 18px 18px rgba(0,0,0,.14));transition:opacity .4s,transform .6s cubic-bezier(.2,.7,.2,1)}
.r-obr.sm{opacity:0;transform:translateY(10px) rotate(-4deg)}
.ne-uznali{font-size:14px;color:var(--mute);margin:14px 0 0;border-left:3px solid var(--line);padding-left:12px}
.ne-uznali code{font-family:var(--m);color:var(--ink)}

.bukvy{border:1px solid var(--line);border-radius:6px;overflow:hidden}
.bk{display:grid;grid-template-columns:170px minmax(0,1.3fr) minmax(0,1.1fr) minmax(0,1.1fr);border-bottom:1px solid var(--line2);align-items:center;transition:background .2s}
.bk:last-child{border-bottom:0}
.bk:not(.bk-sh):hover{background:#FAFAFB}
.bk>*{padding:12px 16px;font-size:14px;line-height:1.4;color:var(--ink2)}
.bk>:first-child{font-size:24px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.bk-sh>*{font-size:12px!important;font-weight:600!important;color:var(--ink2)!important;background:#FCFCFC;padding-top:12px;padding-bottom:12px;letter-spacing:0!important}
.bk button{border:0;background:none;padding:0;font:inherit;color:inherit;text-align:left;border-bottom:1px dashed var(--mute2)}
.bk button:hover{color:var(--red);border-color:var(--red)}

.cement{display:grid;grid-template-columns:1fr 60px 1fr;align-items:stretch;gap:10px}
.cm-ar{align-self:center}
.cm{border:1px solid var(--line);border-radius:6px;padding:20px 22px;display:grid;grid-template-columns:auto 1fr;gap:6px 26px;align-items:center}
.cm-z{grid-column:1/-1;font-size:14px;color:var(--ink2)}
.cm>b{font-size:30px;font-weight:800;letter-spacing:-.03em;white-space:nowrap}
.cm dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:4px 8px;font-size:13px;color:var(--mute)}
.cm dt{font-weight:600;color:var(--ink)}
.cm dd{margin:0}
.cm-ar{color:var(--red);justify-self:center}

.kirpich{display:grid;grid-template-columns:minmax(0,1fr) 170px;gap:24px;align-items:center}
.kr-stroka{border:1px solid var(--line);border-radius:6px;padding:20px 22px 22px;display:flex;flex-wrap:wrap;gap:4px 0;font-weight:800;font-size:clamp(18px,1.95vw,28px);letter-spacing:-.03em}
.kr-stroka span{padding:0 0 12px;position:relative;cursor:default;transition:color .2s}
.kr-stroka span[data-k]::after{content:"";position:absolute;left:3px;right:3px;bottom:0;height:8px;border:1.5px solid var(--red);border-top:0}
.kr-stroka span.akt,.kr-stroka span[data-k]:hover{color:var(--red)}
.kirpich img{filter:drop-shadow(0 14px 16px rgba(0,0,0,.14))}
.kr-linii{position:relative;height:44px;margin-right:194px}
.kr-linii svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.kr-linii path{fill:none;stroke:var(--red);stroke-width:1.3}
.kr-linii circle{fill:var(--red)}
.kr-chasti{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:8px}
.kc{border:1px solid var(--line);border-radius:6px;padding:12px 10px 14px;position:relative;transition:border-color .2s}
.kc b{display:block;font-size:13px;line-height:1.25;margin-bottom:4px;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:anywhere}
.kc code{font:600 13px var(--m);color:var(--red)}
.kc span{display:block;font-size:12.5px;line-height:1.4;color:var(--mute);margin-top:4px}
.kc.akt{border-color:var(--ink)}

@media (max-width:960px){
  .vvod{grid-template-columns:1fr}
  .vvod input{font-size:18px}
  .vvod-go{justify-content:center;padding:14px}
  .primery{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px;padding:0 16px 20px;scrollbar-width:none}
  .primery button{flex:none}
  .stroka-vid{max-width:calc(100% - 96px)}
  .kartochki{max-width:100%;grid-template-columns:1fr}
  .r-obr{top:6px;width:92px}
  h2.mal{margin-right:100px}
  .vynoski{display:none}
  .stroka-vid{margin-bottom:16px}
  .bk{grid-template-columns:64px minmax(0,1fr);grid-template-areas:"b c" "b g" "b v"}
  .bk>*{padding:4px 12px}
  .bk>:first-child{grid-area:b;font-size:17px;padding-top:12px;align-self:start}
  .bk{grid-template-columns:78px minmax(0,1fr)!important}
  .bk>:nth-child(2){grid-area:c;padding-top:12px;color:var(--ink)}
  .bk>:nth-child(3){grid-area:g}
  .bk>:nth-child(4){grid-area:v;padding-bottom:12px}
  .bk-sh{display:none}
  .cement{grid-template-columns:1fr}
  .cm-ar{transform:rotate(90deg)}
  .cm{grid-template-columns:1fr}
  .kirpich{grid-template-columns:1fr}
  .kirpich img{width:150px}
  .kr-chasti{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kr-linii{display:none}
  .kr-chasti{margin-top:12px}
}
.stroka-vid span.raz{margin:0 -12px}