@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-400-normal-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-400-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-500-normal-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-500-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/golos-text-normal-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/golos-text-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-400-normal-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-400-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --accent:  #cdf23c;
  --ink:     #16171a;
  --deep:    #1b1d19;
  --green:   #4f6600;
  --green-d: #3f5200;
  --ground:  #f7f8f4;
  --surface: #ffffff;
  --sunken:  #eceeea;
  --line:    #d6d8d1;
  --line-2:  #c3c6bd;
  --muted:   #5c5f57;

  --mp-wb:    #cb11ab;
  --mp-ozon:  #005bff;
  --mp-mskld: #036ce5;

  --polosa: 1040px;
  --pole:    24px;

  --pole-lenty: max(var(--pole), (100% - var(--polosa)) / 2 + var(--pole));

  --ritm-svyazka: 10px;
  --ritm-blok:    22px;
  --ritm-razdel:  32px;

  --warn:      #8a5b08;
  --warn-soft: #f7ead4;
  --bad:       #a33227;
  --bad-soft:  #f7e1de;
  --ok-soft:   #eef6d8;

  --head: "Golos Text", "IBM Plex Sans", -apple-system, "Segoe UI",
          Roboto, Arial, sans-serif;
  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.top {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; flex-wrap: wrap;

  gap: 10px 14px;

  padding: 14px var(--pole-lenty);
  background: var(--deep);
  color: var(--ground);
}

.brand { display: flex; align-items: center; flex-shrink: 0;
         color: var(--accent); text-decoration: none; }

.brand3d { display: block; width: 99px; height: 24px; perspective: 420px; }
.brand3d__box {
  position: relative; display: block; width: 100%; height: 100%;
  transform-style: preserve-3d;
  animation: brandSpin 24s cubic-bezier(.62,.02,.3,1) infinite;
}

.brand3d__f {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: flex-start; gap: 3.5px; color: var(--ground);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}

.brand3d__f.f0 { transform: rotateX(0deg)    translateZ(12px); }
.brand3d__f.f1 { transform: rotateX(-180deg) translateZ(12px); }
.brand3d__svg { height: 20px; width: auto; display: block; overflow: visible; }

.brand-sep { display: block; flex-shrink: 0; width: 1px; height: 16px;
             margin: 0 10px; background: rgba(247, 248, 244, .28); }

.sup3d { display: block; flex-shrink: 0; width: 86px; height: 14px;
         perspective: 420px; color: rgba(247, 248, 244, .66); }
.sup3d__box {
  position: relative; display: block; width: 100%; height: 100%;
  transform-style: preserve-3d;
  animation: supSpin 24s cubic-bezier(.62,.02,.3,1) infinite;
}
.sup3d__f {
  position: absolute; inset: 0; display: flex; align-items: center;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  font-family: var(--mono); font-size: 9.5px; line-height: 1;
  letter-spacing: .01em; white-space: nowrap;
}
.sup3d__f.s0 { transform: rotateX(0deg)    translateZ(7px); }
.sup3d__f.s1 { transform: rotateX(-180deg) translateZ(7px); }

.brand:hover .brand3d__box,
.brand:hover .sup3d__box { animation-play-state: paused; }

@keyframes brandSpin {
  0%      { transform: rotateX(0deg); }
  45.833% { transform: rotateX(0deg); }
  50%     { transform: rotateX(180deg); }
  95.833% { transform: rotateX(180deg); }
  100%    { transform: rotateX(360deg); }
}
@keyframes supSpin {
  0%      { transform: rotateX(0deg); }
  45.833% { transform: rotateX(0deg); }
  50%     { transform: rotateX(180deg); }
  95.833% { transform: rotateX(180deg); }
  100%    { transform: rotateX(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .brand3d__box, .sup3d__box { animation: none !important; }
}
@media (max-width: 400px) {
  .sup3d { width: 74px; }
  .sup3d__f { font-size: 8.5px; }
  .brand-sep { margin: 0 8px; }
}

.mtoggle, .burger { display: none; }

.menu { display: flex; gap: 12px; flex-wrap: wrap; flex: 1 1 auto; }
.menu a, .menu .soon {
  font-size: 13.5px; text-decoration: none; color: #c3c6bd;
  padding: 3px 0; border-bottom: 2px solid transparent;
}
.menu a:hover { color: var(--ground); }
.menu a.on { color: var(--accent); border-bottom-color: var(--accent); }

.menu a.punkt-mall { display: inline-flex; align-items: center; gap: 5px; }
.znak-mall { display: block; width: 15px; height: 15px; flex: none; }
.znak-mall .sumka { fill: none; stroke: currentColor; stroke-width: 1.3;
                    stroke-linejoin: round; stroke-linecap: round; }
.znak-mall .iskra { fill: var(--accent); }

@media (max-width: 1080px) {
  .menu { order: 3; flex-basis: 100%; }
  .who  { order: 2; }
}

.menu .soon { color: #5c5f57; cursor: default; }
.who { display: flex; align-items: center; gap: 12px; font-size: 13px;
       margin-left: auto; flex-shrink: 0; }

.who .org { color: var(--line-2); max-width: 18ch;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who form { margin: 0; }

.who a {
  color: var(--line-2); text-decoration: underline;
  text-underline-offset: 2px;
}
.who a:hover { color: var(--accent); }
.who a.on { color: var(--accent); text-decoration: none; }
.linkish {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--line-2); text-decoration: underline;
}
.linkish:hover { color: var(--accent); }

.top .tg {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex: none; border-radius: 50%;
  background: #2aabee; color: #fff; text-decoration: none;
  animation: tg-puls 2.8s ease-out infinite;
}
.top .tg svg { width: 15px; height: 15px; fill: currentColor;
               margin-left: -1px; }
.top .tg:hover, .top .tg:focus-visible {
  background: #229ed9; color: #fff; animation-play-state: paused; }
.top .tg:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@keyframes tg-puls {
  0%   { box-shadow: 0 0 0 0 rgba(42, 171, 238, .55); }
  70%  { box-shadow: 0 0 0 9px rgba(42, 171, 238, 0); }
  100% { box-shadow: 0 0 0 0 rgba(42, 171, 238, 0); }
}
@media (prefers-reduced-motion: reduce) { .top .tg { animation: none; } }

.top .tg--telefon { display: none; }

.wrap { max-width: var(--polosa); margin: 0 auto;
        padding: 32px var(--pole) 80px; }
.narrow { max-width: 420px; margin: 60px auto; padding: 0 var(--pole); }

main.wrap > * { margin: 0 0 var(--ritm-blok); }

main.wrap > h1,
main.wrap > h2,
main.wrap > .crumbs { margin-bottom: var(--ritm-svyazka); }
main.wrap > h2 { margin-top: var(--ritm-razdel); }
main.wrap > h2:first-child { margin-top: 0; }

main.wrap > .flow-hint { margin-bottom: var(--ritm-svyazka); }

main.wrap > .pager,
main.wrap > .devbox,
main.wrap > .footnotes { margin-top: var(--ritm-razdel); }

main.wrap > .narrow { margin: 60px auto; }

h1 { font-family: var(--head); font-size: 25px; letter-spacing: -.032em;
     margin: 0 0 6px; font-weight: 600; }
h2 { font-size: 15px; margin: 32px 0 12px; font-weight: 640;
     text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
     font-family: var(--mono); }
.sub { color: var(--muted); margin: 0 0 24px; max-width: 62ch; }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; padding: 20px;
}

.card > h2:first-child { margin-top: 0; }

.form { display: flex; flex-direction: column; gap: 16px; }
.form label { display: flex; flex-direction: column; gap: 6px;
              font-size: 13px; color: var(--muted); }
.form input {
  font: inherit; font-size: 15px; padding: 10px 12px;
  border: 1px solid var(--line-2); border-radius: 8px;
  background: var(--surface); color: var(--ink);
}
.form input:focus { outline: 2px solid var(--green); outline-offset: 1px; }

.btn {
  font: inherit; font-size: 14px; font-weight: 640; cursor: pointer;
  padding: 11px 20px; border-radius: 8px; border: 1px solid var(--green-d);
  background: var(--accent); color: var(--ink);
  text-decoration: none; display: inline-block; text-align: center;
}
.btn:hover { background: #d7f75f; }

.btn[aria-busy="true"] { cursor: progress; opacity: .7; }
.btn[aria-busy="true"]:hover { background: var(--accent); }

.btn.ghost { background: var(--surface); color: var(--ink);
             border-color: var(--line-2); }
.btn.ghost:hover { border-color: var(--green); background: var(--surface); }

.btn.pale { background: transparent; color: var(--muted);
            border-color: var(--line); opacity: .8; font-weight: 500; }
.btn.pale:hover { opacity: 1; background: var(--sunken);
                  border-color: var(--line-2); color: var(--ink); }

.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
           margin: 14px 0 0; }

.actions.stack { flex-direction: column; align-items: stretch; }
.actions.stack .btn { width: 100%; text-align: center; }

label.soglasie, .form label.soglasie {
  display: flex; flex-direction: row; gap: 10px; align-items: start;
  font-size: 14px; line-height: 1.45; margin: 4px 0 2px;
}
label.soglasie input { margin: 2px 0 0; width: 17px; height: 17px;
                       flex: none; }
label.soglasie a { text-decoration: underline; }

.btn.yabtn { display: flex; align-items: center; justify-content: center;
             gap: 9px; }
.ya-znak { width: 18px; height: 18px; flex: none; }

.ili { display: flex; align-items: center; gap: 12px; margin: 4px 0 2px;
       color: var(--muted); font-size: 13px; }
.ili::before, .ili::after { content: ""; flex: 1;
                            border-top: 1px solid var(--line); }

.applybar {
  display: flex; gap: 16px; align-items: center; justify-content: space-between;
  flex-wrap: wrap; background: var(--surface); border: 1px solid var(--green);
  border-radius: 10px; padding: 14px 18px;
}
.applybar .txt { font-size: 14.5px; flex: 1 1 320px; }
.applybar .acts { display: flex; gap: 8px; flex-wrap: wrap; }

.callout {
  border-left: 3px solid var(--green); background: var(--sunken);
  padding: 14px 18px; border-radius: 0 8px 8px 0; margin: 18px 0;
}
.callout.ok  { border-left-color: var(--green); background: var(--ok-soft); }
.callout.bad { border-left-color: var(--bad);   background: var(--bad-soft); }

.callout.warn { border-left-color: var(--warn); background: var(--warn-soft); }
.callout p { margin: 0 0 8px; } .callout p:last-child { margin: 0; }

.aside { margin-top: 18px; font-size: 13.5px; color: var(--muted); }
.aside a { color: var(--green-d); }
code { font-family: var(--mono); font-size: .88em; background: var(--sunken);
       padding: 1px 5px; border-radius: 3px; }
.smart-captcha { min-height: 102px; }

.steps { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 22px;
         margin: 0; padding: 0; font-size: 13px; color: var(--line-2); }
.steps li { display: flex; align-items: center; gap: 8px; }
.steps .n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 21px; height: 21px; border-radius: 50%; font-size: 11px;
  font-family: var(--mono); border: 1px solid var(--line-2); color: var(--muted);
}
.steps .done { color: var(--muted); }
.steps .done .n { background: var(--sunken); border-color: var(--line); }

.steps .now { color: var(--ink); font-weight: 640; }
.steps .now .n { background: var(--accent); border-color: var(--green-d);
                 color: var(--ink); font-weight: 700; }

.flow {
  position: relative; padding: 24px 20px 22px;
  display: flex; flex-direction: column; align-items: stretch;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px;
}

.tier { display: flex; align-items: flex-start; justify-content: center; gap: 0; }
.tier-2 { align-items: stretch; }

.rtn { position: relative; height: 54px; margin: 14px 30.2% 2px 95px; }
.rtn-line {
  position: absolute; inset: 0; border-top: 1.5px dashed var(--line-2);
  border-left: 1.5px dashed var(--line-2); border-top-left-radius: 20px;
  border-right: 0; border-bottom: 0;
}

.rtn-up { position: absolute; right: 0; top: -12px; width: 0; height: 12px;
          border-left: 1.5px dashed var(--line-2); }
.rtn-head { position: absolute; left: -6px; bottom: 0; width: 12px; }
.rtn-cap {
  position: absolute; left: 22px; bottom: 4px; font-family: var(--mono);
  font-size: 10px; color: var(--muted); background: var(--surface);
  padding: 0 6px;
}
.flow-defs { position: absolute; width: 0; height: 0; }

.node {
  flex: 1 1 0; min-width: 0; text-align: center; position: relative;
  border-radius: 10px; border: 1px solid transparent;
}
.nbody { display: block; padding: 6px 6px 8px; cursor: pointer; }
.node:hover, .node:focus-within {
  background: var(--sunken); border-color: var(--line);
}

.ntoggle { position: absolute; opacity: 0; width: 1px; height: 1px;
           margin: 0; pointer-events: none; }
.sk { width: 100%; max-width: 104px; height: auto; }
.ink { fill: none; stroke: var(--ink); stroke-width: 1.9;
       stroke-linecap: round; stroke-linejoin: round; }
.node b { display: block; font-size: 13.5px; margin-top: 2px; }
.node-sub { display: block; font-family: var(--mono); font-size: 10.5px;
            color: var(--muted); margin-top: 2px; }

.tip {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  z-index: 46; width: 300px; max-width: 78vw; margin-top: 8px;
  padding: 14px 34px 14px 15px; text-align: left;

  background: var(--ink); color: var(--ground);
  border: 1px solid #000; border-radius: 10px;
  font-size: 13px; line-height: 1.5;
  box-shadow: 0 10px 28px rgba(22, 23, 26, .35);
  opacity: 0; visibility: hidden; transition: opacity .14s ease;
}
.tip b { color: var(--accent); }
.node:hover .tip, .out:hover .tip,
.ntoggle:checked ~ .tip, .ntoggle:focus-visible ~ .tip {
  opacity: 1; visibility: visible;
}

.tipscrim { display: none; position: fixed; inset: 0; z-index: 45;
            cursor: default; }
#fnone:not(:checked) ~ .tipscrim { display: block; }

.tipx {
  position: absolute; top: 6px; right: 6px; width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; border-radius: 6px; font-size: 13px;
  color: var(--line-2);
}
.tipx:hover { background: rgba(255,255,255,.12); color: var(--ground); }

.tier > .node:first-child .tip,
.ours > .node:first-child .tip { left: 0; transform: none; }
.tier > .node:last-child .tip,
.ours > .node:last-child .tip { left: auto; right: 0; transform: none; }

.link { flex: 1 1 auto; min-width: 54px; display: flex; align-items: center;
        gap: 0; padding-top: 26px; position: relative; }

.ours .link { min-width: 44px; }

.tier-1 > .link { padding-right: 6px; }

.lin { flex: 1 1 auto; height: 0; margin: 0 2px;
       border-top: 1.5px dashed var(--line-2);
       animation: reveal .7s ease both; }
.tipm { flex: 0 0 10px; width: 10px; height: 10px; margin-right: 2px; }
.fill-tip { fill: var(--line-2); animation: tipin .3s ease .5s both; }

@keyframes reveal {
  from { clip-path: inset(0 100% 0 0) }
  to   { clip-path: inset(0 0 0 0) }
}
@keyframes tipin { from { opacity: 0 } to { opacity: 1 } }

.link-cap { position: absolute; left: 0; right: 0; top: 46px;
            font-family: var(--mono); font-size: 10px; color: var(--muted);
            text-align: center; }

.tier-1 > .link .link-cap { line-height: 1.5; padding-inline: 4px; }

.ours {
  position: relative; flex: 3 1 0; min-width: 0;
  display: flex; align-items: flex-start; gap: 2px;
  border: 1.5px dashed var(--line-2); border-radius: 12px;
  padding: 14px 10px 10px;
}
.ours-cap {
  position: absolute; top: -8px; left: 18px; padding: 0 8px;
  background: var(--surface); font-family: var(--mono); font-size: 10px;
  color: var(--muted); letter-spacing: .04em;
}

.node.chat { flex: 0 0 190px; align-self: flex-start; }
.outs {
  position: relative; flex: 1 1 auto;
  display: grid; align-content: center; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin-left: 0; padding: 16px 12px 12px;
  border: 1.5px dashed var(--line-2); border-radius: 12px;
}
.outs-cap {
  position: absolute; top: -8px; left: 16px; padding: 0 8px;
  background: var(--surface); font-family: var(--mono); font-size: 10px;
  color: var(--muted); letter-spacing: .04em;
}
.out { position: relative; }

.out .nbody {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); font-size: 13px;
}
.out:hover .nbody, .out:focus-within .nbody { border-color: var(--green);
                                              background: var(--ok-soft); }
.out b { font-weight: 600; }

.out .tip { left: auto; right: 0; transform: none; }

.oico {
  flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--ok-soft); display: flex; align-items: center;
  justify-content: center;
}
.oico svg { width: 17px; height: 17px; }
.oink { fill: none; stroke: var(--green-d); stroke-width: 1.7;
        stroke-linecap: round; stroke-linejoin: round; }
.olime { fill: none; stroke: var(--accent); stroke-width: 2.4;
         stroke-linecap: round; stroke-linejoin: round; }
circle.olime { fill: var(--accent); stroke: none; }

.o-type   { stroke-dasharray: 9; animation: otype 2.6s ease-in-out infinite }
.o-grow   { transform-origin: 18px 20px; animation: ogrow 2.6s ease-in-out infinite }
.o-drop   { animation: odrop 2.4s ease-in-out infinite }
.o-branch { stroke-dasharray: 16; animation: obranch 2.8s ease-in-out infinite }
.o-pulse  { animation: opulse 2.2s ease-in-out infinite }

@keyframes otype { 0%,15% { stroke-dashoffset: 9 } 55%,100% { stroke-dashoffset: 0 } }
@keyframes ogrow { 0%,100% { transform: scaleY(.35) } 45%,65% { transform: scaleY(1) } }
@keyframes odrop { 0%,100% { transform: translateY(-2px); opacity: .5 }
                   50% { transform: translateY(1px); opacity: 1 } }
@keyframes obranch { 0%,15% { stroke-dashoffset: 16 } 60%,100% { stroke-dashoffset: 0 } }
@keyframes opulse { 0%,100% { transform: scale(.75); opacity: .55 }
                    50% { transform: scale(1.15); opacity: 1 } }

.ink path, .ink ellipse, .ink circle {
  stroke-dasharray: 320; stroke-dashoffset: 320;
  animation: draw .8s ease forwards;
}
.d1 { animation-delay: .10s } .d2 { animation-delay: .40s }
.d3 { animation-delay: .70s }
.link .d2 { animation-delay: 1.05s } .link .d3 { animation-delay: 1.3s }
.said { animation-delay: 1.7s }

@keyframes draw { to { stroke-dashoffset: 0 } }

@media (prefers-reduced-motion: reduce) {
  .ink path, .ink ellipse, .ink circle { stroke-dashoffset: 0; animation: none }
    .o-type, .o-grow, .o-drop, .o-branch, .o-pulse {
    animation: none; stroke-dashoffset: 0; transform: none; opacity: 1;
  }
  .tip { transition: none }
}

.picks { display: grid; gap: 12px;
         grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.pick {
  display: flex; flex-direction: column; text-decoration: none;
  color: inherit;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; padding: 18px 20px;
}
.pick:hover { border-color: var(--green); box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.pick-name { font-weight: 640; font-size: 16px; margin-bottom: 4px; }
.pick-note { color: var(--muted); font-size: 13.5px; margin-bottom: 14px; }

.pick-go { margin-top: auto; align-self: flex-start; }

.pick:hover .pick-go { background: #d7f75f; color: var(--ink); }

.pick.soon { background: var(--sunken); border-style: dashed; }
.pick.soon .pick-name,
.pick.soon .pick-note { color: var(--muted); }
.pick-soon {
  margin-top: auto; align-self: flex-start;
  font-size: 13px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .06em;
}

.stavki { list-style: none; margin: 2px 0 0; padding: 0;
          font-size: 13px; color: var(--muted); line-height: 1.5; }
.stavki li { margin: 0; }

.stavki-s { margin: 2px 0 0; font-size: 13px; color: var(--muted); }

[data-mp="wb"]    { color: var(--mp-wb); }
[data-mp="ozon"]  { color: var(--mp-ozon); }
[data-mp="mskld"] { color: var(--mp-mskld); }

.hod-ryad { display: flex; justify-content: space-between;
            align-items: center; gap: 12px; flex-wrap: wrap; }
.hod-ryad .crumbs { margin: 0; }

.crumbs { font-size: 13.5px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }

.pager {
  display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: stretch;
  padding: 12px 14px 14px;
  border: 2px dashed var(--bad); border-radius: 10px;
  background: var(--bad-soft);
}
.pager-title {
  flex-basis: 100%;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em; color: var(--bad);
}
.pager-i {
  display: flex; flex-direction: column; gap: 1px; max-width: 47%;
  padding: 8px 14px; border: 1px dashed var(--bad); border-radius: 8px;
  background: var(--surface); color: var(--ink); text-decoration: none;
}
.pager-i:hover { border-style: solid; }
.pager-i.fwd { margin-left: auto; text-align: right; }
.pager-cap { font-family: var(--mono); font-size: 11px; color: var(--bad); }
.pager-name { font-size: 14px; font-weight: 640; }
.pager-note { flex-basis: 100%; margin: 0; font-size: 12.5px;
              color: var(--muted); }
.pager-reset { flex-basis: 100%; }
.pager-reset .btn { font-size: 13px; padding: 7px 14px; }

.fhint { font-size: 12.5px; color: var(--muted); font-weight: 400; }

.taxes { border: 1px solid var(--line); border-radius: 10px;
         padding: 14px 16px 16px; margin: 0 0 4px; }

.taxes legend { font-size: 14.5px; font-weight: 640; padding: 0 6px; }

.taxgroup { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.taxgroup:first-of-type { margin-top: 6px; padding-top: 0; border-top: 0; }

.taxgroup-head {
  font-size: 13.5px; font-weight: 640; color: var(--ink);
  font-family: var(--mono); text-transform: uppercase;
  letter-spacing: .07em;
}
.taxgroup .fhint { display: block; margin: 4px 0 10px; }

.form .taxopt {
  display: grid; align-items: center; gap: 2px 10px; margin: 0 0 8px;

  grid-template-columns: 18px minmax(150px, 260px) 108px 1fr;
  padding: 8px 10px; border: 1px solid transparent; border-radius: 8px;
  cursor: pointer;
}
.form .taxopt:hover { background: var(--ground); }
.taxopt input[type="radio"] { margin: 0; accent-color: var(--green); }
.taxopt-name { font-weight: 640; font-size: 14.5px; }
.taxopt-hint, .taxopt-formula { grid-column: 2 / -1; }

.taxopt-formula { font-family: var(--mono); font-size: 11.5px;
                  color: var(--muted); opacity: .75; margin-top: 2px; }

.form .taxopt:has(input:checked) { border-color: var(--green);
                                   background: var(--surface); }

.form .taxflag {
  margin: -2px 0 12px 28px; padding: 10px 12px;
  border: 1px dashed var(--line); border-radius: 8px;
}
.taxflag-name { font-weight: 640; font-size: 14px; }
.taxflag-hint { display: block; margin: 2px 0 8px; }
.form .taxflag-otvet { display: flex; gap: 8px; flex-wrap: wrap; }
.form .taxflag-otvet label {

  display: flex; flex-direction: row; align-items: center;
  gap: 7px; cursor: pointer;
  padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px;
  font-size: 14px; margin: 0;
}
.taxflag-otvet input[type="radio"] { margin: 0; accent-color: var(--green); }

.form .taxflag-otvet label:has(input:checked) {
  border-color: var(--green); background: var(--surface);
}

.taxgroup .taxopt:has(input[type="radio"]:not(:checked)) + .taxflag {
  opacity: .4; pointer-events: none;
}

@media (max-width: 560px) {
  .form .taxflag { margin-left: 12px; }
}

.taxopt-why { grid-column: 2 / -1; display: none; margin-top: 4px;
              font-size: 12.5px; color: var(--bad); }

.taxes:has(input[name="tax_system"][value="osno"]:checked) .usn-only {
  opacity: .5; pointer-events: none;
}
.taxes:has(input[name="tax_system"][value="osno"]:checked)
  .usn-only .taxopt-why { display: block; opacity: 1; }

.form .taxes:has(input[name="tax_system"][value="osno"]:checked)
  .usn-only:has(input:checked) { border-color: var(--bad); }

.taxes:has(input[name="tax_system"][value="osno"]:checked)
  .usn-only input::placeholder { color: transparent; }

.taxgroup:has(input[type="radio"]:checked:not([value=""]))
  .taxopt input[type="radio"]:not(:checked) ~ .pct input::placeholder {
  color: transparent;
}

.pct input:focus::placeholder { color: transparent; }

.taxopt input[type="radio"]:not(:checked) ~ .pct { opacity: .38; pointer-events: none; }
.taxopt input[type="radio"]:not(:checked) ~ .taxopt-hint,
.taxopt input[type="radio"]:not(:checked) ~ .taxopt-formula { opacity: .72; }

@media (max-width: 560px) {
  .form .taxopt { grid-template-columns: 18px 1fr; }
  .form .taxopt .pct { grid-column: 2; width: 108px; }
}

.pct-cap { font-size: 12.5px; color: var(--muted); }
@media (max-width: 560px) {

  .form .taxopt .pct-cap { grid-column: 2; margin-top: -2px; }
}

.pct { position: relative; display: block; }

.pct.wide { max-width: 200px; }
.pct input { width: 100%; padding-right: 30px; }
.pct i { position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
         font-style: normal; color: var(--muted); font-family: var(--mono);
         font-size: 13px; }
.opt { font-size: 11px; font-family: var(--mono); color: var(--faint, #8a8d85); }

.scopes { list-style: none; margin: 8px 0 0; padding: 0; font-size: 14px; }
.scopes li { padding-left: 22px; position: relative; margin-bottom: 3px; }
.scopes li::before { position: absolute; left: 0; font-family: var(--mono); }
.scopes .yes::before { content: "✓"; color: var(--green); }
.scopes .no { color: var(--muted); }
.scopes .no::before { content: "✕"; color: var(--line-2); }

.fieldhelp { margin: -6px 0 4px; border-left: 2px solid var(--line);
             padding-left: 14px; }
.fieldhelp summary { cursor: pointer; font-size: 13px; color: var(--green-d);
                     list-style: none; }
.fieldhelp summary::before { content: "▸ "; }
.fieldhelp[open] summary::before { content: "▾ "; }
.fieldhelp-body { padding: 10px 0 4px; font-size: 14px; }
.fieldhelp-body p:first-child { margin-top: 0; }

.shot { position: relative; margin: 10px 0 14px; }
.ztoggle { position: absolute; opacity: 0; width: 1px; height: 1px;
           margin: 0; pointer-events: none; }

.shot .zopen { display: block; cursor: zoom-in; }
.shot .zback { display: none; position: fixed; inset: 0; z-index: 100;
         background: rgba(22, 23, 26, .82); cursor: zoom-out; }
.shot .ztoggle:checked ~ .zback { display: block; }
.shot .ztoggle:checked ~ .zopen { cursor: zoom-out; }
.shot .ztoggle:checked ~ .zopen img {
  position: fixed; inset: 4vh 4vw; margin: auto; z-index: 101;
  width: auto; height: auto; max-width: 92vw; max-height: 92vh;
  border-color: transparent; background: var(--surface);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .45);

  pointer-events: none;
}
.zoom { color: var(--green-d); }

.facts.vstavka {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px 16px; margin: 14px 0 6px;
}
.facts.vstavka dd {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 4px 0 0;
}
.facts.vstavka code { font-size: 15px; word-break: break-all; }

.facts.vstavka .json-tekst {
  margin: 0; flex: 1 1 360px; min-width: 0; max-width: 100%;
  overflow-x: auto; padding: 10px 12px; border-radius: 8px;
  background: var(--sunken); border: 1px solid var(--line);
}
.facts.vstavka .json-tekst code {
  font-size: 13px; white-space: pre; word-break: normal;
}

.cards.servisy .podklyuchit .btn { width: 100%; margin-top: 2px; }
.cards.servisy .podklyuchit > .btn,
.cards.servisy .podklyuchit summary.btn {
  display: flex; align-items: center; justify-content: center;
  position: relative; height: 84px; padding: 11px 10px;
}
.cards.servisy .card.servis { padding-bottom: 14px; }
.cards.servisy .znak-ryad { min-height: 44px; }
.cards.servisy .podklyuchit { padding-top: 14px; }
.cards.servisy .podklyuchit .btn:disabled {
  opacity: .45; cursor: not-allowed;
}
.cards.servisy .podklyuchit .btn:disabled:hover { background: var(--accent); }
.cards.servisy { align-items: start; }
.pered-podklyucheniem > summary { display: block; list-style: none; text-align: center; }
.pered-podklyucheniem > summary::-webkit-details-marker { display: none; }
.card.servis .pered-podklyucheniem p { margin: 26px 0 12px; }
.pered-podklyucheniem[open] > summary.btn,
.pered-podklyucheniem[open] > summary.btn:hover,
.pered-podklyucheniem .otlozhit,
.pered-podklyucheniem .otlozhit:hover {
  background: var(--sunken); color: var(--muted); border-color: var(--line);
}
.status-klyuchey { margin: 10px 0 0; }
.chaty-yandex {
  display: flex; gap: 24px; position: absolute;
  right: 0; top: -13px;
}
.chat-yandex { display: flex; position: relative; }
.chaty-yandex .metka-chata {
  position: absolute; top: -9px; left: 14px; z-index: 1;
  margin: 0; padding: 1px 5px; border-radius: 999px;
  font-size: 8px; line-height: 12px; letter-spacing: .04em; font-weight: 600;
  box-shadow: 0 0 0 2px var(--ground);
}
.chaty-yandex .new-badge { color: var(--ink); background: var(--accent); }
.chaty-yandex .soon-badge { color: var(--muted); background: var(--sunken); border: 1px solid var(--line); }
.chaty-yandex .chat-skoro .znak-servisa svg { fill: #aeb2aa; }
.chaty-yandex .chat-skoro .metka-chata { left: auto; right: 0; }

.moduli { border-top: 1px solid var(--line); margin: 6px 0 var(--ritm-blok); }
.moduli > .modul { border-bottom: 1px solid var(--line); }
.modul > summary, .podmodul > summary {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  list-style: none;
}
.modul > summary::-webkit-details-marker,
.podmodul > summary::-webkit-details-marker { display: none; }
.modul > summary { padding: 12px 0; font-size: 15px; font-weight: 600; }
.modul .plus, .podmodul .plus {
  margin-left: auto; font-size: 20px; line-height: 1; font-weight: 400;
  color: var(--green); flex-shrink: 0;
}
.modul[open] > summary > .plus,
.podmodul[open] > summary > .plus { transform: rotate(45deg); }
.modul[open] {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; margin: 6px -15px; padding: 0 14px 12px;
}
.modul > .shagi, .modul > .callout { margin-top: 10px; }
.podmodul {
  margin: 14px 0 4px; background: var(--ground);
  border: 1px solid var(--line); border-radius: 10px; padding: 0 14px 8px;
}
.podmodul > summary {
  padding: 10px 0; font-size: 14px; font-weight: 500; color: var(--green-d);
}
.podmodul > summary:hover { color: var(--green); }
.podmodul > summary > .plus { font-size: 17px; }
.podmodul .new-badge {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 12px; letter-spacing: .06em; font-weight: 560;
  color: var(--ink); background: var(--accent);
}
.podmodul .soon-badge { margin-left: 0; }
.podmodul[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 8px; }

.modul-yakor { display: block; height: 0; scroll-margin-top: 84px; }
@media (max-width: 620px) {
  .modul[open] { margin-inline: -9px; padding-inline: 8px; }
}

.potolok {
  font-weight: 700; color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--warn);
  text-decoration-thickness: 2px; text-underline-offset: 3px;
}

#pochemu-net-klyucha, #vydannye-klyuchi, #tekst-cursor {
  scroll-margin-top: 84px;
}

.adres-mcp {
  word-break: break-all;
  -webkit-user-select: all;
  user-select: all;
}

.cards.servisy { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.card.servis { padding: 14px 16px; }
.card.servis p { margin: 0; }

.znak-ryad { display: flex; align-items: center; gap: 10px;
             margin-bottom: 8px; }
.znak-ryad .cab-name { margin: 0; }

.znak-servisa { width: 26px; height: 26px; flex: none; border-radius: 50%;
                display: flex; align-items: center; justify-content: center; }

.znak-servisa.sam { background: none; }
.znak-servisa.bukva {
  color: #fff; font-weight: 700;

  font-size: 13px; letter-spacing: -.3px;
}

ol.shagi { list-style: none; counter-reset: shag; padding: 0; margin: 0; }
ol.shagi > li {
  counter-increment: shag; position: relative;
  padding: 0 0 18px 38px; margin: 0;
}
ol.shagi > li::before {
  content: counter(shag);
  position: absolute; left: 0; top: 0;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--green); color: #fff;
  font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

ol.shagi > li:not(:last-child)::after {
  content: ""; position: absolute; left: 12px; top: 30px; bottom: 4px;
  width: 2px; background: var(--line);
}
ol.shagi > li > b { display: block; margin: 3px 0 6px; }
ol.shagi p { margin: 4px 0; font-size: 14px; }

ol.shagi .shot img { max-width: min(620px, 100%); max-height: 420px; }

@media (max-width: 760px) {
  ol.shagi > li { padding-left: 30px; }
  ol.shagi > li::before { width: 22px; height: 22px; font-size: 12px; }
  ol.shagi > li:not(:last-child)::after { left: 10px; top: 26px; }
}

.fieldhelp figure { margin: 10px 0 14px; }
.fieldhelp img {
  display: block; width: 100%; max-width: 460px; height: auto;
  max-height: 340px; object-fit: contain; object-position: left top;
  border: 1px solid var(--line); border-radius: 6px; background: var(--surface);
}
.fieldhelp figcaption { font-size: 12px; color: var(--muted); margin-top: 5px; }

.fieldhelp .zoom { font-size: 12px; }
.steps-num { margin: 0; padding-left: 22px; font-size: 14.5px; }
.steps-num li { margin-bottom: 8px; }

.howto figure { margin: 10px 0 14px; }
.howto img { display: block; max-width: 100%; height: auto;
             border: 1px solid var(--line); border-radius: 8px; }
.howto figcaption { font-size: 12.5px; color: var(--muted); margin-top: 6px; }

.devbox {
  margin-top: 26px; padding: 16px 18px;
  border: 2px dashed var(--bad); border-radius: 10px;
  background: var(--bad-soft);
}
.devbox-title {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em; color: var(--bad);
  margin-bottom: 10px;
}
.devbox p { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.btn.danger { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn.danger:hover { background: #8f2b21; }
.btn.wide { display: block; width: 100%; }
.devrow {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-bottom: 10px; padding: 14px 18px;
}
.devrow-org { font-weight: 640; }
.devrow-meta { font-family: var(--mono); font-size: 12px; color: var(--muted); }

.uploader { display: flex; flex-wrap: wrap; align-items: end; gap: 12px;
            margin-top: 16px; padding-top: 14px;
            border-top: 1px solid var(--line); }
.uploader label { display: flex; flex-direction: column; gap: 6px;
                  font-size: 13.5px; font-weight: 640; }
.uploader input[type="file"] { font: inherit; font-size: 13px;
                               font-weight: 400; }
.uploader .fhint { flex-basis: 100%; }

.waiting { background: var(--surface); border: 1px solid var(--line);
           border-radius: 10px; padding: 16px 18px; margin-top: 14px; }
.waiting-head { font-weight: 640; margin-bottom: 10px; }
.waiting .actions { margin: 10px 0 6px; display: flex; align-items: center;
                    gap: 12px; flex-wrap: wrap; }
.btn.cooldown { animation: cooldown 30s step-end; }
@keyframes cooldown {
  from { pointer-events: none; opacity: .45; }
  to   { pointer-events: auto; opacity: 1; }
}

.salute { position: relative; height: 58px; pointer-events: none; }
.salute b { position: absolute; top: 82%; }
.salute b:nth-child(1) { left: 18%; }
.salute b:nth-child(2) { left: 50%; }
.salute b:nth-child(3) { left: 82%; }
.salute s { position: absolute; width: 6px; height: 6px;
            border-radius: 50%; background: var(--accent);
            opacity: 0; animation: salvo 1.5s ease-out forwards;
            transform: rotate(calc(var(--r) * 45deg)); }
.salute s:nth-child(3n)   { background: #e3b95c; }
.salute s:nth-child(4n)   { background: #8fce7d; width: 4px; height: 4px; }
.salute s:nth-child(1) { --r: 0; } .salute s:nth-child(2) { --r: 1; }
.salute s:nth-child(3) { --r: 2; } .salute s:nth-child(4) { --r: 3; }
.salute s:nth-child(5) { --r: 4; } .salute s:nth-child(6) { --r: 5; }
.salute s:nth-child(7) { --r: 6; } .salute s:nth-child(8) { --r: 7; }
.salute b:nth-child(2) s { animation-delay: .3s; }
.salute b:nth-child(3) s { animation-delay: .55s; }
@keyframes salvo {
  0%   { opacity: 0; transform: rotate(calc(var(--r) * 45deg)) translateY(0) scale(.4); }
  12%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(calc(var(--r) * 45deg)) translateY(-46px) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .salute { display: none; } }

.soon-h { color: var(--line-2); }
.soon-badge { display: inline-block; vertical-align: middle;
              margin-left: 8px; padding: 2px 9px; border-radius: 999px;
              font-size: 12px; letter-spacing: .06em; font-weight: 560;
              color: #5c5f57; background: var(--sunken);
              border: 1px solid var(--line); text-transform: uppercase; }
.card.soon { color: var(--line-2); background: var(--sunken);
             border-style: dashed; }

.bar { height: 6px; border-radius: 3px; background: var(--sunken);
       overflow: hidden; }
.bar span { display: block; height: 100%; width: 0;
            background: var(--accent);
            animation: barfill 120s cubic-bezier(.2,.7,.35,1) forwards; }
@keyframes barfill { to { width: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .bar span { animation: none; width: 35%; }
}

.attention .item {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--line-2);
  border-radius: 0 8px 8px 0; padding: 12px 16px; margin-bottom: 8px;
}
.attention .item.bad  { border-left-color: var(--bad); }
.attention .item.warn { border-left-color: var(--warn); }

.attention .item.wait { border-left-color: var(--line-2); }
.attention .what { font-weight: 600; }
.attention .where {
  font-family: var(--mono); font-size: 12px; color: var(--muted);
  background: var(--sunken); padding: 1px 7px; border-radius: 4px;
  margin-right: 8px; font-weight: 400;
}
.attention .why { color: var(--muted); font-size: 14px; }

.cards { display: grid; gap: 14px;
         grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.cab-head { display: flex; justify-content: space-between; gap: 10px;
            align-items: flex-start; margin-bottom: 14px; }

.card.pending { background: var(--sunken); border-style: dashed;
                color: var(--muted); }
.card.pending .cab-name { opacity: .7; }

.cab-name { font-weight: 640; }
.cab-meta { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.tag { font-size: 11px; font-family: var(--mono); color: var(--muted);
       border: 1px solid var(--line); border-radius: 4px; padding: 2px 6px; }

.big { font-size: 27px; font-weight: 640; font-variant-numeric: tabular-nums;
       letter-spacing: -.02em; }
.big.muted { color: var(--line-2); }
.hint { color: var(--muted); font-size: 13.5px; }

.facts { margin: 16px 0 0; font-size: 13.5px; }
.facts dt { color: var(--muted); font-size: 12px; font-family: var(--mono); }
.facts dd { margin: 0 0 8px; }
.run { font-size: 12px; padding: 1px 7px; border-radius: 4px;
       font-family: var(--mono); }
.run.succeeded { background: var(--ok-soft);  color: var(--green-d); }
.run.failed    { background: var(--bad-soft); color: var(--bad); }
.run.running   { background: var(--sunken);   color: var(--muted); }

.reports { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.reports summary { cursor: pointer; font-size: 13px; color: var(--muted);
                   font-family: var(--mono); }
.reports table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.reports td { padding: 4px 0; border-bottom: 1px solid var(--sunken);
              font-size: 13px; }
.code { font-family: var(--mono); font-size: 12.5px; }
.num  { font-family: var(--mono); text-align: right;
        font-variant-numeric: tabular-nums; }

.reports .whyempty {
  margin: 8px 0 0; padding-left: 16px;
  font-size: 12.5px; color: var(--muted);
}
.reports .whyempty li { margin: 5px 0; }

.reports .lim {
  margin: 8px 0 0; padding-left: 10px;
  border-left: 2px solid var(--line);
}

.footnotes {
  padding-top: 14px; border-top: 1px solid var(--line);
  display: flex; gap: 20px; flex-wrap: wrap;
  font-size: 13px; color: var(--muted); font-family: var(--mono);
}

@media (max-width: 820px) {
  .flow { padding: 18px 14px; }

  .tier { flex-direction: column; align-items: stretch; gap: 2px; }
  .ours { flex-direction: column; align-items: stretch; padding: 16px 10px 10px; }
  .node.chat { flex: none; }

  .link { flex: 0 0 auto; width: auto; height: 34px; padding: 0;
          margin-left: 27px; flex-direction: column; align-items: flex-start;
          position: relative; }
  .lin { width: 0; height: auto; margin: 2px 0;
         border-top: 0; border-left: 1.5px dashed var(--line-2);
         animation-name: reveal-v; }
  .tipm { transform: rotate(90deg); margin: 0 0 2px; }

  .link-cap { position: absolute; left: 16px; top: 50%; right: auto;
              transform: translateY(-50%); white-space: normal;
              text-align: left; }
  .to-outs { flex: 0 0 auto; }

  .rtn { height: 30px; margin: 4px 0 4px 27px; }
  .rtn-line { border-top: 0; border-top-left-radius: 0; }
  .rtn-up { display: none; }
  .rtn-head { left: -6px; bottom: -2px; }
  .rtn-cap { left: 14px; bottom: 6px; }

  .nbody { display: grid; grid-template-columns: 56px 1fr; gap: 12px;
           text-align: left; align-items: center; }
  .sk { max-width: 56px; }
  .nbody b, .node-sub { grid-column: 2; }
  .nbody b { margin-top: 0; }

  .outs { grid-template-columns: 1fr; margin-left: 0; padding: 16px 10px 10px; }
  .out .nbody { display: flex; }

  .tip { position: relative; top: auto; left: auto;
         width: auto; max-width: none; transform: none;
         margin: 10px 0 4px; display: none; opacity: 1; visibility: visible; }
  .node:hover .tip, .out:hover .tip { display: none; }
  .ntoggle:checked ~ .tip { display: block; }
}

@keyframes reveal-v {
  from { clip-path: inset(0 0 100% 0) }
  to   { clip-path: inset(0 0 0 0) }
}

@media (max-width: 620px) {

  :root { --pole: 16px; }
  .wrap { padding-block: 22px 60px; }
  .top { padding-block: 12px; gap: 12px; }
  .menu { order: 3; width: 100%; gap: 14px; }

  .top .mtoggle { position: absolute; opacity: 0; width: 1px; height: 1px;
                  margin: 0; pointer-events: none; }
  .top .burger {
    display: inline-flex; align-items: center; justify-content: center;
    margin-left: auto; width: 34px; height: 34px; flex: none;
    border: 1px solid var(--line-2); border-radius: 8px;
    color: var(--line-2); font-size: 15px; line-height: 1; cursor: pointer;
  }

  .top .burger::before { content: "☰"; }
  .top .mtoggle:checked ~ .burger::before { content: "✕"; }
  .top .mtoggle:checked ~ .burger { color: var(--ground);
                                    border-color: var(--ground); }

  .top .mtoggle:focus-visible ~ .burger {
    outline: 2px solid var(--accent); outline-offset: 2px; }

  .top .mtoggle ~ .menu, .top .mtoggle ~ .who { display: none; }
  .top .mtoggle:checked ~ .menu,
  .top .mtoggle:checked ~ .who { display: flex; width: 100%; }

  .top .mtoggle:checked ~ .who { order: 4; margin-left: 0;
                                 padding-top: 10px;
                                 border-top: 1px solid #2b2e29; }

  .top .tg--shapka { display: none; }
  .top .tg--telefon { display: inline-flex; margin-left: auto; }
  .top .tg--telefon ~ .burger { margin-left: 0; }
  .cards { grid-template-columns: 1fr; }
  h1 { font-size: 22px; }
}

.calc { margin: 12px 0 0; font-variant-numeric: tabular-nums; }
.calc-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 14px; align-items: start; padding: 8px 0;
  border-top: 1px solid var(--line);
}
.calc-row:first-child { border-top: 0; }
.calc-row .who { font-weight: 600; }
.calc-row .how { color: var(--muted); font-size: 12.5px; font-family: var(--mono); }
.calc-row .sum { font-weight: 600; white-space: nowrap; }
.calc-total {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 10px 0 0; margin-top: 4px; border-top: 2px solid var(--ink);
  font-size: 17px; font-weight: 640;
}
.strip {
  position: relative; height: 8px; border-radius: 4px;
  background: var(--sunken); overflow: hidden; margin: 6px 0 3px;
}
.strip.bad { background: var(--bad-soft); box-shadow: inset 0 0 0 1px var(--bad); }
.strip-fill { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: var(--green); }
.strip-fill.trial { background: var(--accent); }
.strip-cap {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 11.5px; color: var(--muted); font-family: var(--mono);
}
.strip-cap .bad { color: var(--bad); }

body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; width: 100%; }

.foot {
  border-top: 1px solid var(--line);
  padding: 20px var(--pole-lenty) 24px;
  display: flex; align-items: center; gap: 28px;
  font-size: 12px; line-height: 1.5; color: var(--muted);
}
.foot p { margin: 0; }
.foot a { color: inherit; }

.foot-mark { display: block; height: 74px; width: auto; flex: none; }
.foot nav { margin-left: auto; display: flex; flex-direction: column;
            text-align: right; gap: 4px; }

@media (max-width: 900px) {
  .foot { flex-direction: column; align-items: flex-start; gap: 12px; }
  .foot nav { text-align: left; margin-left: 0; }
  .foot-mark { height: 56px; }
}

.shot-wide .shot { margin: 16px 0 4px; }
.shot-wide .shot img {
  display: block; width: 100%; max-width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: 6px; background: var(--surface);
}
.shot-wide figcaption { font-size: 12.5px; color: var(--muted); margin-top: 6px; }

.katalog { display: grid; gap: var(--ritm-blok); }

.skoro { opacity: .38; filter: grayscale(1); pointer-events: none;
         user-select: none; }
.metka-skoro {
  display: inline-block; vertical-align: middle; margin-left: 8px;
  padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--sunken); color: var(--muted);
  font-family: var(--mono); font-size: 12px; font-weight: 400;
  letter-spacing: .04em;
}

.prompt-skelet { display: grid; gap: 9px; }
.prompt-skelet span { display: block; height: 7px; border-radius: 4px;
                      background: var(--line-2); }
.prompt-skelet span:nth-child(1) { width: 92%; }
.prompt-skelet span:nth-child(2) { width: 100%; }
.prompt-skelet span:nth-child(3) { width: 84%; }
.prompt-skelet span:nth-child(4) { width: 96%; }
.prompt-skelet span:nth-child(5) { width: 58%; }

.mall-filtry { display: grid; gap: 10px; }
.filtr { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.filtr-imya {
  flex: 0 0 132px; font-family: var(--mono); font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
}
.filtr-k {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--ink);
  font-size: 13.5px; line-height: 1.3; text-decoration: none;
}
.filtr-k:hover { border-color: var(--green); }

.filtr-k.on { background: var(--ink); border-color: var(--ink);
              color: var(--surface); }
.filtr-k.on:hover { border-color: var(--ink); }
.filtr-n { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.filtr-k.on .filtr-n { color: var(--line-2); }

.filtr-k.pusto { color: var(--line-2); background: transparent;
                 border-style: dashed; }
.filtr-k.pusto .filtr-n { color: var(--line-2); }

.mall { display: grid; gap: 14px;
        grid-template-columns: repeat(2, minmax(0, 1fr)); }
.karta {
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; padding: 18px;
}
.karta-metki { display: flex; flex-wrap: wrap; gap: 6px; }

.tag.napr { background: var(--sunken); }
.karta h3 {
  margin: 0; font-family: var(--head); font-size: 17px; font-weight: 600;
  letter-spacing: -.02em; line-height: 1.3;
}
.karta > .hint { margin: 0; }

.lenta {
  display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: thin;
  scroll-marker-group: after;
}
.lenta::scroll-marker-group { display: flex; justify-content: center; gap: 8px; }
.lenta > .kadr::scroll-marker {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--line-2);
}
.lenta > .kadr::scroll-marker:target-current { background: var(--green); }

@supports selector(::scroll-marker) {
  .lenta { scrollbar-width: none; }
}

@supports selector(::scroll-button(left)) {
  .karta { position: relative; anchor-scope: --lenta; }
  .lenta { anchor-name: --lenta; }
  .lenta::scroll-button(left),
  .lenta::scroll-button(right) {
    position: absolute; position-anchor: --lenta;
    top: calc(anchor(center) - 30px);
    width: 32px; height: 32px; border-radius: 50%;
    border: 1px solid var(--line); background: var(--surface);
    color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer;
    box-shadow: 0 2px 6px rgba(22, 23, 26, .12);
  }
  .lenta::scroll-button(left) { content: "‹" / "Предыдущий скриншот";
                                left: calc(anchor(left) + 8px); }
  .lenta::scroll-button(right) { content: "›" / "Следующий скриншот";
                                 left: calc(anchor(right) - 40px); }
  .lenta::scroll-button(left):hover,
  .lenta::scroll-button(right):hover { border-color: var(--green); }
  .lenta::scroll-button(left):disabled,
  .lenta::scroll-button(right):disabled { opacity: 0; cursor: default; }
}
.kadr { flex: 0 0 100%; margin: 0; position: relative;
        scroll-snap-align: start; }
.kadr figcaption { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.kadr-metka, .kadr-nomer {
  position: absolute; top: 8px; padding: 1px 6px;
  font-family: var(--mono); font-size: 11px; color: var(--muted);
  background: var(--surface); border: 1px solid var(--line); border-radius: 4px;
}
.kadr-metka { left: 8px; }
.kadr-nomer { right: 8px; }
.kadr .shot { margin: 0; }
.kadr .shot img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
}

.eskiz {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 10;
  background: var(--ground); border: 1px solid var(--line); border-radius: 8px;
}
.eskiz-plashka { fill: var(--sunken); }
.eskiz-ramka   { fill: var(--surface); stroke: var(--line); }
.eskiz-tekst   { fill: var(--line); }
.eskiz-tekst-t { fill: var(--line-2); }
.eskiz-setka   { stroke: var(--line); stroke-width: 1; }
.eskiz-liniya  { fill: none; stroke: var(--green); stroke-width: 2;
                 stroke-linejoin: round; stroke-linecap: round; }
.eskiz-stolbik { fill: var(--line-2); }

.karta-niz { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.karta .prompt {
  margin: 0; padding: 12px 14px; border-radius: 8px;
  background: var(--sunken); border: 1px solid var(--line);
  font-family: var(--mono); font-size: 12.5px; line-height: 1.55;
  white-space: pre-wrap; overflow-wrap: anywhere;

  max-height: 16em; overflow-y: auto;
}
.karta-niz .btn { width: 100%; }
.mall-file-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.mall-file-actions[hidden], .mall-file-actions .btn[hidden] { display: none; }
.karta-niz .mall-file-actions .btn {
  flex: 1 1 0; min-width: 0; width: auto; justify-content: center;
  padding: 6px 12px; font-size: 12.5px; font-weight: 500;
  min-height: 36px;
}
.mall-file-actions .btn:focus-visible {
  outline: 2px solid var(--green); outline-offset: 2px;
}
.mall-file-status { margin: 0; font-size: 12.5px; color: var(--muted); }
.mall-file-status:empty { display: none; }

.proveren { display: grid; gap: 2px; }
.proveren-gde {
  margin: 0; display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px 10px; font-size: 13px; color: var(--muted);
}
.proveren-ii { display: inline-flex; align-items: center; gap: 6px;
               color: var(--ink); font-weight: 500; }
.proveren-ii .znak-servisa { width: 20px; height: 20px; }
.proveren-ii .znak-servisa svg { width: 12px; height: 12px; }

.proveren-model { font-weight: 400; color: var(--muted); }

.klyuchevoe {
  color: inherit; background-color: transparent;
  background-image: linear-gradient(transparent, #f0f8d8 22%, #f0f8d8 80%, transparent),
                    linear-gradient(transparent, #f0f8d8 8%, #f0f8d8 92%, transparent);
  background-size: 100% 1.1em, calc(100% - .5em) 1.24em;
  background-position: 0 70%, .25em 78%; background-repeat: no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.proveren-hint { margin: 0; font-size: 12.5px; color: var(--muted); }

@media (max-width: 820px) {
  .mall { grid-template-columns: minmax(0, 1fr); }
  .filtr-imya { flex-basis: 100%; }
}