@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800;900&family=Open+Sans:wght@400;600;700&display=swap');
.figma-make-app-wrapper{isolation:isolate}
/* tokens/fonts.css */
/* TPM Article Design System — Webfonts
 * Montserrat (headings) + Open Sans (body), loaded from Google Fonts — the
 * exact families the live article repos use (src/index.css). Montserrat
 * weights 400-800; Open Sans 400-700. */


/* tokens/colors.css */
/* TPM Article Design System — Palette
 * Exactly SEVEN semantic colour pairs (draw.io / Miro sticky scheme).
 * Light = fill, dark = border / icon / accent / heading-in-block.
 * The HEX values are the source of truth. HSL mirrors are derived from them.
 * Icons are ALWAYS coloured, never grayscale. One semantic hue per category —
 * colour encodes meaning, never decoration. NO inline hex in components other
 * than these exact values. */

.figma-make-app-root {
  /* ---- Solid (border / heading / icon / accent) ---- */
  --p-gray: #666666;
  --p-blue: #6c8ebf;
  --p-green: #82b366;
  --p-red: #b85450;
  --p-yellow: #d79b00;
  --p-purple: #9673a6;
  --p-darkblue: #23445d;

  /* ---- Light (fill / tinted container background) ---- */
  --p-gray-light: #f5f5f5;
  --p-blue-light: #ddeaff;
  --p-green-light: #d5e8d4;
  --p-red-light: #f8cecc;
  --p-yellow-light: #fff2cc;
  --p-purple-light: #e1d5e7;
  --p-darkblue-light: #bac8d3;

  /* ---- HSL mirrors (for shadcn-style hsl(var(--x)) consumers) ---- */
  --palette-gray: 0 0% 40%;
  --palette-gray-light: 0 0% 96%;
  --palette-blue: 210 33% 59%;
  --palette-blue-light: 217 100% 93%;
  --palette-green: 100 33% 55%;
  --palette-green-light: 100 38% 87%;
  --palette-red: 0 38% 52%;
  --palette-red-light: 0 65% 89%;
  --palette-yellow: 40 100% 42%;
  --palette-yellow-light: 45 100% 90%;
  --palette-purple: 273 22% 55%;
  --palette-purple-light: 273 30% 87%;
  --palette-darkblue: 207 44% 25%;
  --palette-darkblue-light: 207 22% 77%;

  /* ---- Semantic aliases ---- */
  --background: #ffffff;       /* page + card surface */
  --foreground: #334155;       /* body text (slate-700-ish) */
  --heading: var(--p-darkblue);/* all headings & titles */
  --border-default: var(--p-gray); /* default 2px border colour */
  --muted-foreground: #666666;
  --accent: var(--p-blue);     /* primary concept / interactive */
}

/* tokens/typography.css */
/* TPM Article Design System — Typography
 * Headings: Montserrat (font-heading). Titles font-extrabold, p-darkblue,
 *   with a single accent <u> underline on ONE key word.
 * Body: Open Sans (font-body / font-sans), 16px / leading-relaxed. */

.figma-make-app-root {
  --font-heading: 'Montserrat', system-ui, sans-serif;
  --font-body: 'Open Sans', system-ui, sans-serif;

  /* Type scale (px) — editorial long-form */
  --text-h1: 36px;   /* article title  (text-4xl, extrabold) */
  --text-h2: 24px;   /* section title  (text-2xl, bold) */
  --text-h3: 18px;   /* diagram / block title (text-lg, bold) */
  --text-h4: 16px;   /* card title (text-base, bold) */
  --text-body: 16px; /* body copy (text-base) */
  --text-sm: 14px;   /* secondary / card body / captions */
  --text-xs: 12px;   /* diagram labels */

  /* Weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* Line heights */
  --leading-tight: 1.2;
  --leading-relaxed: 1.65;
}

/* tokens/spacing.css */
/* TPM Article Design System — Layout, spacing, surfaces (HARD rules)
 * Single centred column, fixed 893px. Flat design: NO shadows, NO decorative
 * gradients. 2px borders. Outer containers rounded-2xl, inner blocks rounded-xl.
 * NO internal scroll anywhere. */

.figma-make-app-root {
  /* Container */
  --article-max-width: 893px;   /* HARD — never 4xl, never 1400px */
  --article-padding-x: 16px;    /* px-4 */
  --article-padding-y: 40px;    /* py-10 */
  --section-gap: 32px;          /* gap-8 between sections */
  --block-gap: 16px;            /* gap-4 within a section */

  /* Spacing scale (Tailwind-aligned, px) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* Borders & radii */
  --border-width: 2px;          /* HARD — all borders 2px */
  --radius-outer: 16px;         /* rounded-2xl — outer containers */
  --radius-inner: 12px;         /* rounded-xl — inner blocks */
  --radius-sm: 8px;             /* rounded-lg — icon squares, chips */

  /* Flat — no shadow tokens by design. The only sanctioned depth is a subtle
   * lift on a floating/overlay element inside a diagram (see DESIGN_SYSTEM §3.4). */
  --lens-shadow: 0 8px 24px rgba(35, 68, 93, 0.12);
}

/* Article shell helper — single centred column, natural page scroll only. */
.figma-make-app-root .tpm-article {
  width: 100%;
  max-width: var(--article-max-width);
  margin-inline: auto;
  padding-inline: var(--article-padding-x);
  padding-block: var(--article-padding-y);
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
  font-family: var(--font-body);
  color: var(--foreground);
}

/* tokens/base.css */
/* TPM Article Design System — base element defaults.
 * Minimal resets so specimen cards and components paint correctly. */

.figma-make-app-root * {
  box-sizing: border-box;
}

.figma-make-app-root .body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
  -webkit-font-smoothing: antialiased;
}

.figma-make-app-root h1, .figma-make-app-root h2, .figma-make-app-root h3, .figma-make-app-root h4, .figma-make-app-root h5, .figma-make-app-root h6 {
  font-family: var(--font-heading);
  color: var(--heading);
  margin: 0;
}

.figma-make-app-root p {
  margin: 0;
}

/* Article titles carry a single accent underline on one key word. */
.figma-make-app-root h1 u, .figma-make-app-root h2 u {
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}

.figma-make-app-root a {
  color: var(--accent);
}

/* ---- article <style> block ---- */

  @keyframes breathe { 0%, 100%{transform:scale(1)} 50%{transform:scale(1.08)} }
  @keyframes land { 0%{ opacity:0; transform:translateY(-14px) scale(.85) } 60%{ opacity:1 } 100%{ opacity:1; transform:none } }
  @keyframes floatIcon { 0%{transform:translateY(0) rotate(0deg) scale(1)} 25%{transform:translateY(-12px) rotate(5deg) scale(1.1)} 50%{transform:translateY(0) rotate(-5deg) scale(1)} 75%{transform:translateY(8px) rotate(3deg) scale(.95)} 100%{transform:translateY(0) rotate(0deg) scale(1)} }
  @keyframes pulseBorder { 0%{transform:scale(1);opacity:.6} 50%{transform:scale(1.1);opacity:0} 100%{transform:scale(1);opacity:.6} }
  @keyframes rocketFloat { 0%{transform:translateY(0) rotate(0deg)} 33%{transform:translateY(-6px) rotate(3deg)} 66%{transform:translateY(-2px) rotate(-3deg)} 100%{transform:translateY(0) rotate(0deg)} }
  @keyframes stripSlideIn { from{opacity:0;transform:translateX(-20px)} to{opacity:1;transform:translateX(0)} }
  @keyframes gatePop { from{opacity:0;transform:rotate(-15deg) scale(.85)} to{opacity:1;transform:rotate(0deg) scale(1)} }
  @keyframes rowFadeUp { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
  @keyframes checkDraw { from{stroke-dashoffset:var(--dash,20)} to{stroke-dashoffset:0} }
  @keyframes nodeSlideIn { from{opacity:0;transform:translateX(-20px)} to{opacity:1;transform:none} }
  @keyframes gateDraw { from{opacity:0;transform:rotate(45deg) scale(.2)} to{opacity:1;transform:rotate(45deg) scale(1)} }
  @keyframes lineDraw { from{opacity:0;transform:scaleX(0)} to{opacity:1;transform:scaleX(1)} }
  @keyframes layerRise { from{opacity:0;transform:translateY(40px)} to{opacity:1;transform:none} }
  @keyframes chipPop { from{opacity:0;transform:scale(.8)} to{opacity:1;transform:scale(1)} }
  @keyframes barRise { from{opacity:0;transform:translateY(32px)} to{opacity:1;transform:none} }
  @keyframes fadeUp16 { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} }
  @keyframes diagIn { from{opacity:0;transform:translate(-24px,-8px)} to{opacity:1;transform:none} }
  @keyframes growX { from{transform:scaleX(0)} to{transform:scaleX(1)} }
  @keyframes growY { from{transform:scaleY(0)} to{transform:scaleY(1)} }
  @keyframes unfoldX { from{opacity:0;transform:scaleX(.15)} to{opacity:1;transform:scaleX(1)} }
  @keyframes labelIn { from{opacity:0;transform:translateX(-16px)} to{opacity:1;transform:none} }
  @keyframes drawStroke { from{stroke-dashoffset:var(--sd,40)} to{stroke-dashoffset:0} }
  @keyframes softIn { from{opacity:0} to{opacity:1} }
  @keyframes accReveal { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:none} }
  @keyframes tailPop { from{opacity:0;transform:scale(.95)} to{opacity:1;transform:none} }
  @keyframes cardUp24 { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:none} }
  @keyframes fadeUp10 { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
  @keyframes cardUp32 { from{opacity:0;transform:translateY(32px) scale(.97)} to{opacity:1;transform:none} }
  @keyframes popIn90Up { from{opacity:0;transform:translateY(16px) scale(.9)} to{opacity:1;transform:none} }
  @keyframes tailPopUp { from{opacity:0;transform:translateY(20px) scale(.95)} to{opacity:1;transform:none} }
  @keyframes tailBadgePulse { 0%, 100%{box-shadow:0 0 0 0 rgba(130,179,102,0)} 50%{box-shadow:0 0 0 6px rgba(130,179,102,.14)} }
  .figma-make-app-root h2 u{ text-decoration-color:#D79B00; text-decoration-thickness:.12em; text-underline-offset:.15em; text-decoration-skip-ink:none }
  /* ===== Карточка ключевого термина (frozen §2) — иконка-плитка + термин + EN-пилюля + определение + нижняя полоса ===== */
  .figma-make-app-root .term-card{position:relative;overflow:hidden;border:2px solid var(--tc-solid);background:color-mix(in srgb,var(--tc-light) 55%,#fff);border-radius:12px;padding:18px 20px;display:flex;align-items:flex-start;gap:20px}
  .figma-make-app-root .term-card .tc-tile{flex:0 0 auto;width:104px;height:104px;background:#fff;border:2px solid var(--tc-solid);border-radius:16px;display:flex;align-items:center;justify-content:center;color:var(--tc-solid);position:relative;z-index:1}
  .figma-make-app-root .term-card .tc-body{flex:1;min-width:0;position:relative;z-index:1;display:flex;flex-direction:column;gap:9px}
  .figma-make-app-root .term-card .tc-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .figma-make-app-root .term-card .tc-term{font-family:'Montserrat',sans-serif;font-weight:800;font-size:19px;line-height:1.2;color:var(--p-darkblue)}
  .figma-make-app-root .term-card .tc-pill{font-family:'Montserrat',sans-serif;font-weight:800;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--tc-solid);background:var(--tc-light);border:1.5px solid var(--tc-solid);border-radius:6px;padding:3px 8px}
  .figma-make-app-root .term-card .tc-def{margin:0;font-size:14.5px;line-height:1.6;color:#2b3a48}
  .figma-make-app-root .term-card .tc-foot{display:flex;align-items:flex-start;gap:8px;border-top:1.5px solid var(--tc-solid);padding-top:10px;margin-top:2px;font-size:13.5px;line-height:1.5;color:#2b3a48}
  .figma-make-app-root .term-card .tc-foot svg{flex:0 0 auto;color:var(--tc-solid);margin-top:1px}
  .figma-make-app-root .term-card .tc-foot b{font-family:'Montserrat',sans-serif;font-weight:700;color:var(--p-darkblue)}
  .figma-make-app-root .term-card .tc-wm{position:absolute;right:-14px;bottom:-24px;color:var(--tc-solid);opacity:.05;z-index:0;pointer-events:none}
  .figma-make-app-root .term-card.tc-darkblue{--tc-solid:var(--p-darkblue);--tc-light:var(--p-darkblue-light)}
  .figma-make-app-root .term-card.tc-purple{--tc-solid:var(--p-purple);--tc-light:var(--p-purple-light)}
  .figma-make-app-root .term-card.tc-green{--tc-solid:var(--p-green);--tc-light:var(--p-green-light)}
  .figma-make-app-root .term-card.tc-blue{--tc-solid:var(--p-blue);--tc-light:var(--p-blue-light)}
  .figma-make-app-root .term-card.tc-red{--tc-solid:var(--p-red);--tc-light:var(--p-red-light)}
  .figma-make-app-root .term-card.tc-yellow{--tc-solid:var(--p-yellow);--tc-light:var(--p-yellow-light)}
  @media (max-width: 599px){
    .figma-make-app-root .term-card{flex-direction:column;align-items:stretch;gap:14px;padding:16px}
    .figma-make-app-root .term-card .tc-tile{width:88px;height:88px;margin:0 auto}
  }
  /* ===== Изобр.20.1 — Где стоит этот шаг (лента шагов 19→28) ===== */
  @keyframes f201drawFw{from{stroke-dashoffset:64}to{stroke-dashoffset:0}}
  @keyframes f201wipeR{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 -2% 0 0)}}
  @keyframes f201pulse{0%, 100%{box-shadow:0 0 0 0 rgba(184,84,80,.45)}55%{box-shadow:0 0 0 7px rgba(184,84,80,0)}}
  .figma-make-app-root [data-fig201="node"][data-active]::after{content:"";position:absolute;inset:-2px;border-radius:12px;pointer-events:none;animation:f201pulse 2.2s ease-out 1.6s infinite}
  .figma-make-app-root [data-fig201="node"]{transition:transform .18s ease}
  .figma-make-app-root [data-fig201="node"]:hover{transform:translateY(-4px);z-index:9}
  .figma-make-app-root [data-screen-label="Изобр.20.1"].f201-go [data-fig201="node"]{animation-name:fadeUp16;animation-duration:.42s;animation-timing-function:cubic-bezier(.22,1,.36,1);animation-fill-mode:backwards}
  .figma-make-app-root [data-screen-label="Изобр.20.1"].f201-go [data-fig201="here"]{animation-name:chipPop;animation-duration:.4s;animation-timing-function:cubic-bezier(.34,1.56,.64,1);animation-fill-mode:backwards}
  .figma-make-app-root [data-screen-label="Изобр.20.1"].f201-go [data-fig201="fw"]{animation-name:f201drawFw;animation-duration:.4s;animation-timing-function:ease-out;animation-fill-mode:backwards}
  .figma-make-app-root [data-screen-label="Изобр.20.1"].f201-go [data-fig201="ylg"]{animation-name:f201wipeR;animation-duration:.7s;animation-timing-function:ease-out;animation-fill-mode:backwards}
  /* ===== Изобр.20.4 — Бюджетные рамки: коридор с двумя границами (безразмерная шкала) ===== */
  @keyframes bcAxis{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  @keyframes bcBound{from{opacity:0;transform:translateX(-50%) scaleY(.2)}to{opacity:1;transform:translateX(-50%) scaleY(1)}}
  @keyframes bcFill{from{opacity:0}to{opacity:1}}
  @keyframes bcLbl{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  @keyframes bcSpan{from{opacity:0;transform:scaleX(.15)}to{opacity:1;transform:scaleX(1)}}
  @keyframes bcMark{from{opacity:0;transform:translateX(-50%) translateY(-7px) scale(.6)}to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}
  .figma-make-app-root [data-fig="budcor"] .bc-frame{border:2px solid var(--p-darkblue);border-radius:16px;background:#fff;padding:30px 24px 20px}
  .figma-make-app-root [data-fig="budcor"] .bc-plot{position:relative;max-width:100%}
  .figma-make-app-root [data-fig="budcor"] .bc-spanrow{position:relative;height:22px;margin-bottom:4px}
  .figma-make-app-root [data-fig="budcor"] .bc-span{position:absolute;bottom:0;height:12px;border:2px solid var(--p-darkblue);border-bottom:none;border-radius:8px 8px 0 0;transform-origin:center bottom}
  .figma-make-app-root [data-fig="budcor"] .bc-spanlbl{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);background:#fff;padding:0 10px;font-family:'Montserrat',sans-serif;font-weight:800;font-size:14px;color:var(--p-darkblue);white-space:nowrap}
  .figma-make-app-root [data-fig="budcor"] .bc-barwrap{position:relative}
  .figma-make-app-root [data-fig="budcor"] .bc-bar{position:relative;display:flex;height:96px;border:2px solid var(--p-darkblue);border-radius:12px;overflow:hidden}
  .figma-make-app-root [data-fig="budcor"] .bc-seg{display:flex;align-items:center;justify-content:center;text-align:center;padding:8px 12px;font-family:'Montserrat',sans-serif;font-weight:700;font-size:12.5px;line-height:1.3;text-wrap:balance}
  .figma-make-app-root [data-fig="budcor"] .bc-seg.lo, .figma-make-app-root [data-fig="budcor"] .bc-seg.hi{background:var(--p-red-light);color:var(--p-red)}
  .figma-make-app-root [data-fig="budcor"] .bc-seg.corr{background:var(--p-blue-light);color:var(--p-darkblue);font-weight:800;font-size:14px}
  .figma-make-app-root [data-fig="budcor"] .bc-bound{position:absolute;top:-8px;bottom:0;width:3px;background:var(--p-darkblue);transform:translateX(-50%);transform-origin:center bottom;z-index:4}
  .figma-make-app-root [data-fig="budcor"] .bc-boundcap{position:absolute;top:-13px;left:50%;transform:translateX(-50%);width:11px;height:11px;border-radius:50%;background:var(--p-darkblue)}
  .figma-make-app-root [data-fig="budcor"] .bc-axis{position:absolute;left:0;right:0;bottom:-2px;height:0;border-top:3px solid var(--p-darkblue);transform-origin:left center;z-index:3}
  .figma-make-app-root [data-fig="budcor"] .bc-axarrow{position:absolute;right:-9px;bottom:-8px;color:var(--p-darkblue);z-index:3}
  .figma-make-app-root [data-fig="budcor"] .bc-axcap{text-align:right;font-family:'Montserrat',sans-serif;font-weight:600;font-size:12px;color:#5b6b7a;margin-top:8px}
  .figma-make-app-root [data-fig="budcor"] .bc-boundlblrow{position:relative;height:20px;margin-top:8px}
  .figma-make-app-root [data-fig="budcor"] .bc-boundlbl{position:absolute;top:0;transform:translateX(-50%);font-family:'Montserrat',sans-serif;font-weight:700;font-size:12.5px;color:var(--p-darkblue);white-space:nowrap}
  .figma-make-app-root [data-fig="budcor"] .bc-threshrow{position:relative;height:52px;margin-top:14px;border-top:1.5px dashed var(--p-gray);padding-top:12px}
  .figma-make-app-root [data-fig="budcor"] .bc-mark{position:absolute;top:12px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:3px}
  .figma-make-app-root [data-fig="budcor"] .bc-marklbl{font-family:'Montserrat',sans-serif;font-weight:700;font-size:11.5px;color:var(--p-darkblue);white-space:nowrap}
  .figma-make-app-root [data-fig="budcor"] .bc-thnote{position:absolute;right:0;top:14px;font-size:11.5px;font-style:italic;color:#7f8b99}
  .figma-make-app-root [data-fig="budcor"] .bc-thoff{font-size:12.5px;font-style:italic;color:#7f8b99;text-align:center;padding-top:4px}
  .figma-make-app-root [data-fig="budcor"][data-thresholds="on"] .bc-thresh-off{display:none}
  .figma-make-app-root [data-fig="budcor"][data-thresholds="off"] .bc-thresh-on{display:none}
  .figma-make-app-root [data-fig="budcor"].bc-go .bc-axis{animation:bcAxis .6s cubic-bezier(.4,0,.2,1) both}
  .figma-make-app-root [data-fig="budcor"].bc-go .bc-axarrow{animation:bcFill .2s ease-out .55s both}
  .figma-make-app-root [data-fig="budcor"].bc-go .bc-bound{animation:bcBound .3s cubic-bezier(.34,1.56,.64,1) .62s both}
  .figma-make-app-root [data-fig="budcor"].bc-go .bc-boundcap{animation:bcFill .3s ease-out .62s both}
  .figma-make-app-root [data-fig="budcor"].bc-go .bc-seg.corr{animation:bcFill .25s ease-out .94s both}
  .figma-make-app-root [data-fig="budcor"].bc-go .bc-span{animation:bcSpan .3s ease-out .94s both}
  .figma-make-app-root [data-fig="budcor"].bc-go .bc-spanlbl, .figma-make-app-root [data-fig="budcor"].bc-go .bc-seg.lo, .figma-make-app-root [data-fig="budcor"].bc-go .bc-seg.hi, .figma-make-app-root [data-fig="budcor"].bc-go .bc-boundlbl, .figma-make-app-root [data-fig="budcor"].bc-go .bc-axcap{animation:bcLbl .3s ease-out 1.2s both}
  .figma-make-app-root [data-fig="budcor"].bc-go .bc-mark{animation:bcMark .3s cubic-bezier(.34,1.56,.64,1) 1.5s both}
  .figma-make-app-root [data-fig="budcor"].bc-go .bc-thnote{animation:bcLbl .3s ease-out 1.55s both}
  @media (max-width: 599px){
    .figma-make-app-root [data-fig="budcor"] .bc-frame{padding:26px 12px 18px}
    .figma-make-app-root [data-fig="budcor"] .bc-seg{font-size:11px;padding:6px 5px}
    .figma-make-app-root [data-fig="budcor"] .bc-seg.corr{font-size:11.5px}
    .figma-make-app-root [data-fig="budcor"] .bc-bar{height:120px}
    .figma-make-app-root [data-fig="budcor"] .bc-spanlbl, .figma-make-app-root [data-fig="budcor"] .bc-boundlbl{font-size:11px}
    .figma-make-app-root [data-fig="budcor"] .bc-marklbl{font-size:10.5px}
    .figma-make-app-root [data-fig="budcor"] .bc-threshrow{height:auto}
    .figma-make-app-root [data-fig="budcor"] .bc-thresh-on{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
    .figma-make-app-root [data-fig="budcor"] .bc-mark{position:static;top:auto;left:auto!important;transform:none;flex-direction:row;gap:7px;align-items:center}
    .figma-make-app-root [data-fig="budcor"] .bc-mark svg{transform:rotate(-90deg);flex:0 0 auto}
    .figma-make-app-root [data-fig="budcor"] .bc-marklbl{white-space:normal}
    .figma-make-app-root [data-fig="budcor"] .bc-thnote{position:static;display:block;text-align:left;margin-top:0}
    .figma-make-app-root [data-fig="budcor"].bc-go .bc-mark{animation:bcLbl .3s ease-out 1.5s both}
  }
  /* ===== Теоретические блоки разделов 3,5,6,7,8,9,10 ===== */
  @keyframes tbUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  @keyframes tbDown{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
  @keyframes tbLeft{from{opacity:0;transform:translateX(-22px)}to{opacity:1;transform:none}}
  @keyframes tbLay{from{opacity:0;transform:translateY(-50%) scale(.86)}to{opacity:1;transform:translateY(-50%) scale(1)}}
  .figma-make-app-root [data-tblk] .tb-lift{transition:transform .18s ease, box-shadow .18s ease}
  .figma-make-app-root [data-tblk] .tb-lift:hover{transform:translateY(-4px);box-shadow:0 8px 20px rgba(35,68,93,.12)}
  .figma-make-app-root [data-tblk].tb-in .tb-item{animation-name:tbUp;animation-duration:.45s;animation-timing-function:cubic-bezier(.22,1,.36,1);animation-fill-mode:both}
  .figma-make-app-root [data-tblk].tb-in .tb-row{animation-name:tbDown;animation-duration:.45s;animation-timing-function:cubic-bezier(.22,1,.36,1);animation-fill-mode:both}
  .figma-make-app-root [data-tblk].tb-in .tb-band{animation-name:tbLeft;animation-duration:.5s;animation-timing-function:cubic-bezier(.22,1,.36,1);animation-fill-mode:both}
  .figma-make-app-root [data-tblk].tb-in .tb-cross{animation-name:tbLay;animation-duration:.42s;animation-timing-function:cubic-bezier(.34,1.56,.64,1);animation-fill-mode:both}
  .figma-make-app-root [data-blk="b2"]{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
  .figma-make-app-root [data-blk="b3"]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .figma-make-app-root [data-blk="b1"], .figma-make-app-root [data-blk="b4"]{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:stretch}
  .figma-make-app-root [data-blk="b5"]{display:grid;grid-template-columns:1.35fr 1fr;gap:14px;align-items:stretch}
  .figma-make-app-root [data-blk="b6"]{display:flex;flex-direction:column;gap:8px}
  .figma-make-app-root [data-blk="b6"] .rg-head, .figma-make-app-root [data-blk="b6"] .rg-row{display:grid;grid-template-columns:130px 1fr 168px 108px;gap:12px;align-items:center}
  .figma-make-app-root [data-blk="b6"] .rg-lbl{display:none}
  .figma-make-app-root [data-blk="b7"] .b7-wrap{position:relative;display:flex;flex-direction:column;gap:24px;min-height:168px}
  .figma-make-app-root [data-blk="b7"] .tb-band{flex:1;display:flex;align-items:center;gap:14px;border-radius:12px;border:2px solid;padding:14px 208px 14px 16px}
  .figma-make-app-root [data-blk="b7"] .b7-cross{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:170px;transition:transform .18s ease, box-shadow .18s ease}
  .figma-make-app-root [data-blk="b7"] .b7-cross:hover{transform:translateY(calc(-50% - 4px));box-shadow:0 12px 26px rgba(35,68,93,.18)}
  @media (max-width: 1023px){
    .figma-make-app-root [data-blk="b2"]{grid-template-columns:repeat(3,1fr)}
  }
  @media (max-width: 599px){
    .figma-make-app-root [data-blk="b1"], .figma-make-app-root [data-blk="b2"], .figma-make-app-root [data-blk="b3"], .figma-make-app-root [data-blk="b4"], .figma-make-app-root [data-blk="b5"]{grid-template-columns:1fr}
    .figma-make-app-root [data-blk="b6"] .rg-head{display:none}
    .figma-make-app-root [data-blk="b6"] .rg-row{grid-template-columns:1fr;gap:6px}
    .figma-make-app-root [data-blk="b6"] .rg-lbl{display:block;font-size:10.5px;font-weight:800;color:#8a97a8;text-transform:uppercase;letter-spacing:.04em}
    .figma-make-app-root [data-blk="b7"] .b7-wrap{gap:0}
    .figma-make-app-root [data-blk="b7"] .tb-band{padding-right:16px}
    .figma-make-app-root [data-blk="b7"] .b7-top{order:1}
    .figma-make-app-root [data-blk="b7"] .b7-bot{order:3}
    .figma-make-app-root [data-blk="b7"] .b7-cross{order:2;position:static;left:auto;top:auto;transform:none;width:auto;margin:-14px 14px;z-index:6}
    .figma-make-app-root [data-blk="b7"] .b7-cross:hover{transform:none}
  }
  @media (prefers-reduced-motion: reduce){ .figma-make-app-root *{animation:none !important;transition:none !important} }
  /* ===== Раздел 13 «Адаптация под ваш проект» ===== */
  .figma-make-app-root [data-tailoring="root"] .tail-tlabel{font-family:'Montserrat',sans-serif;font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--p-darkblue);opacity:.7}
  .figma-make-app-root [data-tailoring="root"] .tail-note{background:var(--tone-light);border-radius:9px;padding:8px 11px;font-size:12.5px;line-height:1.5;color:#334155;transition:background .3s ease;animation:softIn .3s ease both}
  .figma-make-app-root [data-tailoring="root"].tail-armed [data-tail="panel"], .figma-make-app-root [data-tailoring="root"].tail-armed [data-tail="summary"], .figma-make-app-root [data-tailoring="root"].tail-armed [data-tailcard]{opacity:0}
  .figma-make-app-root [data-tailoring="root"].tail-in [data-tail="panel"]{animation:fadeUp16 .5s cubic-bezier(.22,1,.36,1) both}
  .figma-make-app-root [data-tailoring="root"].tail-in [data-tail="summary"]{animation:softIn .4s ease .15s both}
  .figma-make-app-root [data-tailoring="root"].tail-in [data-tailcard]{animation:cardUp24 .5s cubic-bezier(.22,1,.36,1) both}
  .figma-make-app-root [data-tailoring="root"].tail-in [data-tailcard]:nth-child(1){animation-delay:.18s}
  .figma-make-app-root [data-tailoring="root"].tail-in [data-tailcard]:nth-child(2){animation-delay:.26s}
  .figma-make-app-root [data-tailoring="root"].tail-in [data-tailcard]:nth-child(3){animation-delay:.34s}
  .figma-make-app-root [data-tailoring="root"].tail-in [data-tailcard]:nth-child(4){animation-delay:.42s}
  .figma-make-app-root [data-tailoring="root"].tail-in [data-tailcard]:nth-child(5){animation-delay:.50s}
  @media (prefers-reduced-motion: reduce){ .figma-make-app-root [data-tailoring="root"] [data-tail="panel"], .figma-make-app-root [data-tailoring="root"] [data-tail="summary"], .figma-make-app-root [data-tailoring="root"] [data-tailcard]{opacity:1 !important} }
  /* ===== Адаптив-канон: ≤1023 (планшет), ≤599 (телефон); десктоп ≥1024 — эталон ===== */
  @media (max-width: 1023px){
    .figma-make-app-root [data-screen-label]{max-width:100%}
    .figma-make-app-root figure img{max-width:100%;height:auto}
    .figma-make-app-root [data-watermark]{display:none !important}
  }
  @media (max-width: 599px){
    .figma-make-app-root [data-m="scrollhint"]{display:block !important;font-size:11px;color:#8a97a8;text-align:center;padding:6px 0 0}
    /* Полоса «Путь проекта» сохраняет натуральную ширину и прокручивается внутри рамки */
    .figma-make-app-root [data-strip="intro"]{overflow-x:auto !important;-webkit-overflow-scrolling:touch;flex-wrap:nowrap !important;justify-content:flex-start !important}
    .figma-make-app-root [data-strip="intro"] > div{flex-shrink:0 !important}
    .figma-make-app-root [data-strip="intro"] > div:nth-child(even){flex-basis:auto !important;min-width:60px !important}
    /* Раскрытая строка ключевого термина: иконка по центру сверху, текст на всю ширину */
    .figma-make-app-root [style*="gap: 18px"][style*="align-items: flex-start"]{flex-direction:column !important;align-items:stretch !important}
    .figma-make-app-root [style*="width: 84px"][style*="height: 84px"]{margin-left:auto !important;margin-right:auto !important}
    /* Callout'ы с левой цветной полосой: левый padding 5px, полоса 4px остаётся */
    .figma-make-app-root [style*="border-left: 4px solid"][style*="border-radius: 0px 12px 12px 0px"]{padding-left:5px !important}
    .figma-make-app-root [data-m="scrollhint2"]{font-size:11px;color:#8a97a8;text-align:center;padding:6px 0 0}
    /* Телефон: убираем плашку «Вы здесь» и лишний зазор под полосой */
    .figma-make-app-root [data-m="herebadge"]{display:none !important}
    .figma-make-app-root [data-m="hererule"]{margin:18px 0 18px !important}
  }
  /* ===== Раздел «Как это сделать» — шесть поверхностей одного составного кадра ===== */
  .figma-make-app-root [data-fig="howto"]{font-family:'Open Sans',sans-serif}
  .figma-make-app-root [data-fig="howto"] .hw-frame{border:none;background:none;padding:0;display:flex;flex-direction:column;gap:0}
  .figma-make-app-root [data-fig="howto"] .hw-card{border:2px solid;border-radius:16px;padding:18px 16px;display:flex;flex-direction:column;gap:14px}
  .figma-make-app-root [data-fig="howto"] .hw-card.c-darkblue{border-color:var(--p-darkblue);background:var(--p-darkblue-light)}
  .figma-make-app-root [data-fig="howto"] .hw-card.c-red{border-color:var(--p-red);background:var(--p-red-light)}
  .figma-make-app-root [data-fig="howto"] .hw-card.c-blue{border-color:var(--p-blue);background:var(--p-blue-light)}
  .figma-make-app-root [data-fig="howto"] .hw-card.c-gray{border-color:var(--p-gray);background:var(--p-gray-light)}
  .figma-make-app-root [data-fig="howto"] .hw-card.c-purple{border-color:var(--p-purple);background:var(--p-purple-light)}
  .figma-make-app-root [data-fig="howto"] .hw-arrow{display:flex;justify-content:center;padding:9px 0}
  .figma-make-app-root [data-fig="howto"] .hw-fhead{display:flex;align-items:flex-start;gap:12px}
  .figma-make-app-root [data-fig="howto"] .hw-ficon{flex:0 0 auto;width:40px;height:40px;border-radius:10px;background:var(--p-darkblue);color:#fff;display:flex;align-items:center;justify-content:center}
  .figma-make-app-root [data-fig="howto"] .hw-h3{font-family:'Montserrat',sans-serif;font-weight:800;font-size:17px;line-height:1.25;color:var(--p-darkblue);margin:0}
  .figma-make-app-root [data-fig="howto"] .hw-intro{font-size:13.5px;line-height:1.5;color:#5b6b7a;margin:3px 0 0}
  .figma-make-app-root [data-fig="howto"] .hw-sub{display:flex;flex-direction:column;gap:9px}
  .figma-make-app-root [data-fig="howto"] .hw-subhead{display:flex;align-items:center;gap:9px}
  .figma-make-app-root [data-fig="howto"] .hw-subicon{flex:0 0 auto;width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;border:2px solid}
  .figma-make-app-root [data-fig="howto"] .hw-h3s{font-family:'Montserrat',sans-serif;font-weight:800;font-size:15px;line-height:1.2;color:var(--p-darkblue);margin:0}
  .figma-make-app-root [data-fig="howto"] .hw-ro{display:inline-flex;align-items:center;gap:4px;font-family:'Montserrat',sans-serif;font-size:11px;font-weight:800;color:var(--p-purple);background:var(--p-purple-light);border:1.5px solid var(--p-purple);border-radius:20px;padding:2px 9px;white-space:nowrap}
  .figma-make-app-root [data-fig="howto"] .hw-roq{display:inline-flex;align-items:center;gap:4px;font-family:'Montserrat',sans-serif;font-size:11px;font-weight:800;color:var(--p-gray);background:var(--p-gray-light);border:1.5px solid #cfcfcf;border-radius:20px;padding:2px 9px;white-space:nowrap;margin-left:auto}
  .figma-make-app-root [data-fig="howto"] .fld-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
  .figma-make-app-root [data-fig="howto"] .fld{border:1.5px solid var(--p-darkblue-light);border-radius:11px;background:#fff;padding:10px 12px;display:flex;flex-direction:column;gap:5px;transition:transform .18s ease,box-shadow .18s ease}
  .figma-make-app-root [data-fig="howto"] .fld:hover{transform:translateY(-3px);box-shadow:0 8px 18px rgba(35,68,93,.1)}
  .figma-make-app-root [data-fig="howto"] .fld-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .figma-make-app-root [data-fig="howto"] .fld-name{font-family:'Montserrat',sans-serif;font-weight:700;font-size:13.5px;color:var(--p-darkblue);line-height:1.2}
  .figma-make-app-root [data-fig="howto"] .fld-hint{font-size:12px;line-height:1.45;color:#5b6b7a}
  .figma-make-app-root [data-fig="howto"] .fld-hint code, .figma-make-app-root [data-fig="howto"] .hw-note code{font-family:ui-monospace,SFMono-Regular,monospace;font-size:11px;background:var(--p-gray-light);border:1px solid #e2e2e2;border-radius:4px;padding:0 4px;color:var(--p-darkblue);white-space:nowrap}
  .figma-make-app-root [data-fig="howto"] .chip{display:inline-flex;align-items:center;font-family:'Montserrat',sans-serif;font-size:10px;font-weight:800;border-radius:20px;padding:2px 8px;white-space:nowrap;border:1.5px solid;letter-spacing:.01em}
  .figma-make-app-root [data-fig="howto"] .chip.req{color:var(--p-red);background:var(--p-red-light);border-color:var(--p-red)}
  .figma-make-app-root [data-fig="howto"] .chip.opt{color:var(--p-gray);background:var(--p-gray-light);border-color:#cfcfcf}
  .figma-make-app-root [data-fig="howto"] .fld.wide{grid-column:1 / -1}
  .figma-make-app-root [data-fig="howto"] .fld-corridor{display:flex;align-items:center;gap:11px;margin-top:5px}
  .figma-make-app-root [data-fig="howto"] .fld-corbar{position:relative;flex:1;height:6px;border-radius:4px;background:var(--p-blue-light);border:1.5px solid var(--p-blue)}
  .figma-make-app-root [data-fig="howto"] .fld-corend{position:absolute;top:50%;width:13px;height:13px;border-radius:50%;background:#fff;border:2.5px solid var(--p-darkblue);transform:translate(-50%,-50%)}
  .figma-make-app-root [data-fig="howto"] .fld-corlab{font-family:'Montserrat',sans-serif;font-weight:700;font-size:11px;color:var(--p-darkblue);white-space:nowrap}
  .figma-make-app-root [data-fig="howto"] .hw-note{display:flex;gap:9px;align-items:flex-start;border-radius:10px;padding:10px 12px;font-size:12.5px;line-height:1.5}
  .figma-make-app-root [data-fig="howto"] .hw-note svg{flex:0 0 auto;margin-top:1px}
  .figma-make-app-root [data-fig="howto"] .hw-note.warn{border:1.5px solid var(--p-red);background:var(--p-red-light);color:#7a2f2c}
  .figma-make-app-root [data-fig="howto"] .hw-note.info{border:1.5px solid var(--p-blue);background:var(--p-blue-light);color:var(--p-darkblue)}
  .figma-make-app-root [data-fig="howto"] .hw-note.lock{border:1.5px solid var(--p-purple);background:var(--p-purple-light);color:#4a3a56}
  .figma-make-app-root [data-fig="howto"] .hw-dircard{display:flex;flex-direction:column;gap:9px;border:2px solid var(--p-purple);border-radius:12px;background:var(--p-purple-light);padding:12px 14px}
  .figma-make-app-root [data-fig="howto"] .hw-dirline{font-size:13px;line-height:1.55;color:#4a3a56}
  .figma-make-app-root [data-fig="howto"] .hw-dirrow{display:flex;gap:8px;flex-wrap:wrap}
  .figma-make-app-root [data-fig="howto"] .hw-dirsel{display:inline-flex;align-items:center;gap:6px;font-family:ui-monospace,SFMono-Regular,monospace;font-size:11px;font-weight:700;border-radius:7px;padding:4px 10px;border:1.5px solid var(--p-purple);background:#fff;color:var(--p-purple);white-space:nowrap}
  .figma-make-app-root [data-fig="howto"].hw-armed .hw-h3, .figma-make-app-root [data-fig="howto"].hw-armed .hw-intro, .figma-make-app-root [data-fig="howto"].hw-armed .hw-subhead, .figma-make-app-root [data-fig="howto"].hw-armed .fld, .figma-make-app-root [data-fig="howto"].hw-armed .hw-note, .figma-make-app-root [data-fig="howto"].hw-armed .hw-dircard{opacity:0}
  .figma-make-app-root [data-fig="howto"].hw-go .hw-h3, .figma-make-app-root [data-fig="howto"].hw-go .hw-intro, .figma-make-app-root [data-fig="howto"].hw-go .hw-subhead, .figma-make-app-root [data-fig="howto"].hw-go .hw-note, .figma-make-app-root [data-fig="howto"].hw-go .hw-dircard{animation:fadeUp16 .5s cubic-bezier(.22,1,.36,1) both}
  .figma-make-app-root [data-fig="howto"].hw-go .fld{animation:fadeUp16 .45s cubic-bezier(.22,1,.36,1) both}
  .figma-make-app-root [data-fig="howto"].hw-go .fld-grid .fld:nth-child(1){animation-delay:0s}
  .figma-make-app-root [data-fig="howto"].hw-go .fld-grid .fld:nth-child(2){animation-delay:.08s}
  .figma-make-app-root [data-fig="howto"].hw-go .fld-grid .fld:nth-child(3){animation-delay:.16s}
  .figma-make-app-root [data-fig="howto"].hw-go .fld-grid .fld:nth-child(4){animation-delay:.24s}
  .figma-make-app-root [data-fig="howto"].hw-go .fld-grid .fld:nth-child(5){animation-delay:.32s}
  .figma-make-app-root [data-fig="howto"].hw-go .fld-grid .fld:nth-child(6){animation-delay:.4s}
  @media (max-width:599px){
    .figma-make-app-root [data-fig="howto"] .fld-grid{grid-template-columns:1fr}
    .figma-make-app-root [data-fig="howto"] .hw-card{padding:16px 12px}
    .figma-make-app-root [data-fig="howto"] .hw-subhead{flex-wrap:wrap}
    .figma-make-app-root [data-fig="howto"] .hw-ro, .figma-make-app-root [data-fig="howto"] .hw-roq{white-space:normal;margin-left:0;max-width:100%}
  }
  /* ===== Изобр.20.3 — Передача из портфеля в проект ===== */
  .figma-make-app-root [data-fig="handoff"] .hf-outer{position:relative;width:100%}
  .figma-make-app-root [data-fig="handoff"] .hf-wrap{position:relative;overflow:hidden}
  .figma-make-app-root [data-fig="handoff"] .hf-canvas{position:relative;width:845px;height:380px;transform-origin:top left;font-family:'Open Sans',sans-serif}
  .figma-make-app-root [data-fig="handoff"] .hf-zone{position:absolute;top:14px;height:352px;border-radius:16px;border:2px solid;z-index:1}
  .figma-make-app-root [data-fig="handoff"] .hf-ztitle{position:absolute;top:24px;font-family:'Montserrat',sans-serif;font-weight:800;font-size:12px;letter-spacing:.05em;text-transform:uppercase;transform:translateX(-50%);z-index:2}
  .figma-make-app-root [data-fig="handoff"] .hf-src{position:absolute;display:flex;align-items:center;gap:8px;background:#fff;border:2px solid var(--p-blue);border-radius:10px;padding:0 10px;box-sizing:border-box;z-index:6;transition:border-color .3s,box-shadow .3s}
  .figma-make-app-root [data-fig="handoff"] .hf-src .hf-dot{flex:0 0 auto;width:10px;height:10px;border-radius:3px;background:var(--p-blue)}
  .figma-make-app-root [data-fig="handoff"] .hf-src span{font-size:12px;font-weight:600;color:#2b3a48;line-height:1.2}
  .figma-make-app-root [data-fig="handoff"] .hf-cont{position:absolute;background:#fff;border:2px solid var(--p-darkblue);border-radius:14px;box-sizing:border-box;display:flex;flex-direction:column;padding:10px;gap:6px;z-index:2}
  .figma-make-app-root [data-fig="handoff"] .hf-cont-t{font-family:'Montserrat',sans-serif;font-weight:800;font-size:12px;color:var(--p-darkblue);line-height:1.2;text-align:center}
  .figma-make-app-root [data-fig="handoff"] .hf-stamp{border:1.5px solid var(--p-darkblue-light);background:var(--p-gray-light);border-radius:8px;padding:5px 8px;display:flex;flex-direction:column;gap:4px}
  .figma-make-app-root [data-fig="handoff"] .hf-slab{font-family:'Montserrat',sans-serif;font-weight:800;font-size:8px;letter-spacing:.06em;text-transform:uppercase;color:var(--p-gray);text-align:center}
  .figma-make-app-root [data-fig="handoff"] .hf-prov{display:flex;align-items:center;gap:7px}
  .figma-make-app-root [data-fig="handoff"] .hf-prov .k{font-size:9px;font-weight:700;color:#5b6b7a;white-space:nowrap;flex:0 0 auto}
  .figma-make-app-root [data-fig="handoff"] .hf-prov .v{flex:1;min-width:18px;height:9px;border-radius:3px;background:repeating-linear-gradient(90deg,var(--p-darkblue) 0,var(--p-darkblue) 5px,transparent 5px,transparent 9px);opacity:.5}
  .figma-make-app-root [data-fig="handoff"] .hf-slots{display:flex;flex-direction:column;gap:5px;margin-top:1px}
  .figma-make-app-root [data-fig="handoff"] .hf-slot{display:flex;align-items:center;gap:7px;border:1.5px solid var(--p-darkblue-light);background:#fff;border-radius:7px;padding:0 7px;height:24px;box-sizing:border-box;transition:background .3s,border-color .3s}
  .figma-make-app-root [data-fig="handoff"] .hf-slot .hf-sdot{flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:var(--p-darkblue-light);transition:background .3s}
  .figma-make-app-root [data-fig="handoff"] .hf-slot span{font-size:9.5px;font-weight:600;color:#5b6b7a;line-height:1.1}
  .figma-make-app-root [data-fig="handoff"] .hf-out{position:absolute;display:flex;flex-direction:column;justify-content:center;gap:2px;background:#fff;border:2px solid var(--p-green);border-radius:11px;padding:0 12px;box-sizing:border-box;z-index:6;transition:border-color .3s,box-shadow .3s,background .3s}
  .figma-make-app-root [data-fig="handoff"] .hf-out b{font-family:'Montserrat',sans-serif;font-weight:800;font-size:11.5px;color:var(--p-green);white-space:nowrap}
  .figma-make-app-root [data-fig="handoff"] .hf-out em{font-style:normal;font-size:10px;color:#5b6b7a;line-height:1.3}
  .figma-make-app-root [data-fig="handoff"] .hf-bd{position:absolute;top:42px;bottom:30px;width:0;border-left:2px dashed var(--p-darkblue-light);z-index:2}
  .figma-make-app-root [data-fig="handoff"] .hf-bd span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);writing-mode:vertical-rl;text-orientation:mixed;font-size:10px;font-weight:700;color:var(--p-gray);white-space:nowrap;background:#fff;padding:8px 1px;letter-spacing:.02em}
  .figma-make-app-root [data-fig="handoff"] svg.hf-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:5}
  .figma-make-app-root [data-fig="handoff"] .hf-path{transition:stroke-width .3s,opacity .3s}
  .figma-make-app-root [data-fig="handoff"] .hf-path.dim{opacity:.2}
  .figma-make-app-root [data-fig="handoff"] .hf-path.act{opacity:1;stroke-width:3.6}
  .figma-make-app-root [data-fig="handoff"] .hf-src.act{border-color:var(--p-blue);box-shadow:0 0 0 3px rgba(108,142,191,.32)}
  .figma-make-app-root [data-fig="handoff"] .hf-slot.act{background:var(--p-blue-light);border-color:var(--p-blue)}
  .figma-make-app-root [data-fig="handoff"] .hf-slot.act .hf-sdot{background:var(--p-blue)}
  .figma-make-app-root [data-fig="handoff"] .hf-out.act{box-shadow:0 0 0 3px rgba(130,179,102,.32);background:var(--p-green-light)}
  .figma-make-app-root [data-fig="handoff"] [data-m="hfhint"]{display:none;font-size:11px;color:#8a97a8;text-align:center;padding:6px 0 0}
  /* ===== Изобр.20.2 — Карта контекста проекта (концентрические кольца) ===== */
  .figma-make-app-root [data-fig="ctxmap"] .ctx-row{display:flex;gap:26px;align-items:center;justify-content:center}
  .figma-make-app-root [data-fig="ctxmap"] .ctx-map{flex:0 1 540px;min-width:0}
  .figma-make-app-root [data-fig="ctxmap"] .ctx-cards{flex:0 0 300px;display:flex;flex-direction:column;gap:12px}
  .figma-make-app-root [data-fig="ctxmap"] .ctx-lead{display:flex;gap:10px;align-items:flex-start;background:var(--p-red-light);border:2px solid var(--p-red);border-radius:12px;padding:11px 13px}
  .figma-make-app-root [data-fig="ctxmap"] .ctx-lead svg{flex:0 0 auto;margin-top:1px}
  .figma-make-app-root [data-fig="ctxmap"] .ctx-lead .cl-t{display:flex;flex-direction:column;gap:3px}
  .figma-make-app-root [data-fig="ctxmap"] .ctx-lead .cl-t strong{font-family:'Montserrat',sans-serif;font-weight:800;font-size:13px;color:var(--p-red)}
  .figma-make-app-root [data-fig="ctxmap"] .ctx-lead .cl-t span{font-size:12.5px;line-height:1.45;color:#7a2f2c;font-weight:600}
  .figma-make-app-root [data-fig="ctxmap"] .ctx-card{box-sizing:border-box;background:#fff;border:2px solid var(--p-darkblue-light);border-radius:12px;padding:11px 14px;display:flex;flex-direction:column;gap:5px}
  .figma-make-app-root [data-fig="ctxmap"] .ctx-card .cc-h{display:flex;align-items:center;gap:8px;font-family:'Montserrat',sans-serif;font-weight:800;font-size:12.5px;letter-spacing:.02em;color:var(--p-darkblue)}
  .figma-make-app-root [data-fig="ctxmap"] .ctx-card .cc-sw{width:14px;height:14px;border-radius:4px;flex:0 0 auto;border:1.5px solid rgba(35,68,93,.35)}
  .figma-make-app-root [data-fig="ctxmap"] .ctx-card .cc-b{font-size:12.5px;line-height:1.45;color:#2b3a48;font-weight:600}
  @media (max-width:1023px){
    .figma-make-app-root [data-fig="ctxmap"] .ctx-row{flex-direction:column;gap:20px}
    .figma-make-app-root [data-fig="ctxmap"] .ctx-cards{flex:0 0 auto;width:100%;max-width:560px}
    .figma-make-app-root [data-fig="ctxmap"] .ctx-map{flex:0 0 auto;width:100%;max-width:560px}
  }
  /* ===== Практика — итоговый баннер-призыв (статичный фон + горный силуэт, floating-иконки) ===== */
  @keyframes p14float{0%, 100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
  @keyframes p14spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
  .figma-make-app-root [data-p14="banner"]{position:relative;border:2px solid var(--p-blue);border-radius:16px;overflow:hidden;background:linear-gradient(135deg,#F8FBFF 0%,#DDEAFF 40%,#E1D5E7 70%,#D5E8D4 100%)}
  .figma-make-app-root [data-p14="mtn"]{position:absolute;left:0;right:0;bottom:0;width:100%;height:150px;opacity:.5;pointer-events:none;z-index:0}
  .figma-make-app-root .p14-wm{position:absolute;padding:8px;border-radius:12px;opacity:.32;animation:p14float 6s ease-in-out infinite;pointer-events:none;z-index:0}
  .figma-make-app-root .p14-compass{display:inline-flex;align-items:center;color:#8a97a8;animation:p14spin 16s linear infinite}
  @media (prefers-reduced-motion: reduce){.figma-make-app-root .p14-wm, .figma-make-app-root .p14-compass{animation:none}}
  .figma-make-app-root [data-p14="grid"]{position:absolute;inset:0;background-image:radial-gradient(circle,#6C8EBF 1px,transparent 1px);background-size:30px 30px;opacity:.07;pointer-events:none}
  .figma-make-app-root [data-p14="cols"]{position:relative;z-index:1;display:flex;gap:20px;flex-wrap:wrap;padding:22px}
  .figma-make-app-root [data-p14="live"]{flex:1 1 344px;min-width:296px;display:flex;flex-direction:column;gap:11px;background:rgba(255,255,255,.95);border:2px solid var(--p-green);border-radius:14px;padding:14px}
  .figma-make-app-root [data-p14="pitch"]{flex:1 1 244px;display:flex;flex-direction:column;gap:12px;justify-content:center}
  .figma-make-app-root .p14-cap{display:flex;align-items:center;justify-content:space-between;gap:8px}
  .figma-make-app-root .p14-cap-t{font-family:'Montserrat',sans-serif;font-weight:800;font-size:11px;color:var(--p-darkblue);text-transform:uppercase;letter-spacing:.04em}
  .figma-make-app-root .p14-lock{display:inline-flex;align-items:center;gap:4px;font-size:9px;font-weight:800;color:var(--p-darkblue);background:var(--p-darkblue-light);border:1px solid var(--p-darkblue);border-radius:999px;padding:2px 8px;white-space:nowrap}
  .figma-make-app-root .p14-cor{border:1.5px solid var(--p-blue);border-radius:11px;background:linear-gradient(180deg,#fff,var(--p-blue-light));padding:11px 13px 10px;display:flex;flex-direction:column;gap:8px}
  .figma-make-app-root .p14-track{position:relative;height:34px;margin:19px 6px 4px}
  .figma-make-app-root .p14-bar{position:absolute;inset:0;display:flex;border:1.5px solid var(--p-darkblue);border-radius:8px;overflow:hidden;transform-origin:center;box-sizing:border-box}
  .figma-make-app-root .p14-seg{display:flex;align-items:center;justify-content:center;text-align:center;font-family:'Montserrat',sans-serif;font-weight:800;font-size:8.5px;line-height:1.1;text-transform:uppercase;letter-spacing:.02em;padding:0 4px;transition:flex-basis .55s cubic-bezier(.4,0,.2,1)}
  .figma-make-app-root .p14-seg.lo, .figma-make-app-root .p14-seg.hi{background:var(--p-red-light);color:var(--p-red)}
  .figma-make-app-root .p14-seg.corr{position:relative;flex:1 1 auto;background:var(--p-blue-light);color:var(--p-blue);font-size:9.5px;border-left:1.5px solid var(--p-darkblue);border-right:1.5px solid var(--p-darkblue)}
  .figma-make-app-root .p14-bound{position:absolute;top:50%;width:4px;height:44px;transform:translate(-50%,-50%);border-radius:3px;background:var(--p-darkblue);z-index:2;transition:left .55s cubic-bezier(.4,0,.2,1)}
  .figma-make-app-root .p14-blbl{position:absolute;top:-16px;transform:translateX(-50%);white-space:nowrap;font-family:'Montserrat',sans-serif;font-weight:800;font-size:9px;color:var(--p-darkblue);z-index:3;transition:left .55s cubic-bezier(.4,0,.2,1)}
  /* Живая «оценка», непрерывно зондирующая коридор внутри допустимых границ */
  @keyframes p14scan{0%{left:6%}50%{left:94%}100%{left:6%}}
  .figma-make-app-root .p14-scan{position:absolute;top:-5px;bottom:-5px;width:2px;left:6%;background:var(--p-green);box-shadow:0 0 6px rgba(130,179,102,.9);z-index:4;pointer-events:none;animation:p14scan 3.6s ease-in-out infinite}
  .figma-make-app-root .p14-scan::before{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;transform:translate(-50%,-50%) rotate(45deg);background:var(--p-green);border:1.5px solid #fff;border-radius:2px}
  .figma-make-app-root .p14-scan::after{content:"оценка";position:absolute;left:50%;top:-13px;transform:translateX(-50%);font-family:'Montserrat',sans-serif;font-weight:800;font-size:7.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--p-green);white-space:nowrap}
  @media (prefers-reduced-motion: reduce){.figma-make-app-root .p14-scan{animation:none;left:50%}}
  .figma-make-app-root .p14-corlg{text-align:center;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--p-blue)}
  @keyframes p14barGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  @keyframes p14boundIn{from{opacity:0;transform:translate(-50%,-50%) scaleY(.15)}to{opacity:1;transform:translate(-50%,-50%) scaleY(1)}}
  @keyframes p14fade{from{opacity:0}to{opacity:1}}
  .figma-make-app-root .p14-anim .p14-bar{animation:p14barGrow .6s cubic-bezier(.4,0,.2,1) both}
  .figma-make-app-root .p14-anim .p14-bound{animation:p14boundIn .32s cubic-bezier(.34,1.56,.64,1) both}
  .figma-make-app-root .p14-anim .p14-bound.b2{animation-delay:.62s}
  .figma-make-app-root .p14-anim .p14-bound.b1{animation-delay:.5s}
  .figma-make-app-root .p14-anim .p14-blbl{animation:p14fade .3s ease-out .72s both}
  .figma-make-app-root .p14-anim .p14-corlg{animation:p14fade .3s ease-out .85s both}
  @media (prefers-reduced-motion: reduce){.figma-make-app-root .p14-anim .p14-bar, .figma-make-app-root .p14-anim .p14-bound, .figma-make-app-root .p14-anim .p14-blbl, .figma-make-app-root .p14-anim .p14-corlg{animation:none}}
  .figma-make-app-root .p14-reg{display:flex;flex-direction:column;gap:7px}
  .figma-make-app-root .p14-colcap{display:flex;gap:7px;padding:0 0 0 17px;font-family:'Montserrat',sans-serif;font-weight:800;font-size:8.5px;text-transform:uppercase;letter-spacing:.04em;color:#8a97a8}
  .figma-make-app-root .p14-colcap span{flex:1 1 0}
  .figma-make-app-root .p14-rows{display:flex;flex-direction:column;gap:6px}
  .figma-make-app-root .p14-row{display:flex;align-items:center;gap:7px;border:1.5px solid var(--p-darkblue-light);border-radius:9px;background:#fff;padding:6px 7px}
  .figma-make-app-root .p14-dot{flex:0 0 auto;width:10px;height:10px;border-radius:3px}
  .figma-make-app-root .p14-sel{flex:1 1 0;min-width:0;font-family:ui-monospace,SFMono-Regular,monospace;font-weight:700;font-size:12px;color:var(--p-darkblue);border:1.5px solid var(--p-darkblue-light);border-radius:7px;padding:5px 6px;background:var(--p-gray-light);cursor:pointer}
  .figma-make-app-root .p14-sel:focus{outline:none;border-color:var(--p-blue)}
  .figma-make-app-root .p14-stamp{border:1.5px solid var(--p-darkblue-light);background:var(--p-gray-light);border-radius:9px;padding:7px 10px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
  .figma-make-app-root .p14-stamp .slab{font-family:'Montserrat',sans-serif;font-weight:800;font-size:8px;letter-spacing:.06em;text-transform:uppercase;color:var(--p-gray)}
  .figma-make-app-root .p14-stamp .who{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--p-darkblue)}
  .figma-make-app-root .p14-stamp .who svg{color:var(--p-green)}
  .figma-make-app-root .p14-kicker{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--p-blue)}
  .figma-make-app-root .p14-title{font-family:'Montserrat',sans-serif;font-weight:800;font-size:23px;line-height:1.18;letter-spacing:-.02em;color:var(--p-darkblue)}
  .figma-make-app-root .p14-sub{margin:0;font-size:13.5px;line-height:1.55;color:#45535f}
  .figma-make-app-root .p14-btn{position:relative;background:linear-gradient(135deg,var(--p-green),var(--p-blue));color:#fff;border:none;border-radius:12px;padding:13px 30px;font-family:'Montserrat',sans-serif;font-weight:800;letter-spacing:.04em;font-size:15px;cursor:pointer;display:inline-flex;align-items:center;gap:9px;box-shadow:0 4px 18px rgba(130,179,102,.4);transition:transform .2s ease,box-shadow .2s ease}
  .figma-make-app-root .p14-ring{position:absolute;inset:-4px;border-radius:14px;border:2px solid var(--p-green);pointer-events:none;animation:pulseBorder 2s ease-in-out infinite}
  .figma-make-app-root .p14-badge{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;background:rgba(255,255,255,.92);border:1.5px solid var(--p-green-light);border-radius:999px;padding:5px 12px;font-size:11.5px;font-weight:700;color:var(--p-darkblue)}
  .figma-make-app-root .p14-badge svg{color:var(--p-green);flex:0 0 auto}
  .figma-make-app-root .p14-badge.blue{border-color:var(--p-blue-light)}
  .figma-make-app-root .p14-badge.blue svg{color:var(--p-blue)}
  .figma-make-app-root .p14-ico{align-self:flex-start;width:56px;height:56px;border-radius:15px;background:linear-gradient(135deg,var(--p-green),var(--p-blue));border:1.5px solid rgba(130,179,102,.45);box-shadow:0 10px 28px rgba(108,142,191,.30);display:flex;align-items:center;justify-content:center;color:#fff;animation:rocketFloat 4s ease-in-out infinite}
  @media (prefers-reduced-motion: reduce){.figma-make-app-root .p14-ico{animation:none}}
  @media (prefers-reduced-motion: reduce){.figma-make-app-root [data-p14="banner"]{animation:none}.figma-make-app-root .p14-ring{animation:none}}
  @media (max-width:599px){.figma-make-app-root [data-p14="cols"]{padding:15px}.figma-make-app-root [data-p14="live"]{min-width:0;flex-basis:100%}.figma-make-app-root .p14-title{font-size:20px}}

/* ===== s117/s121 mobile laws (hooks present on this page only) ===== */
@media (max-width: 599px){
  .figma-make-app-root .figma-make-app-root [data-macc]{flex-direction:column !important}
  .figma-make-app-root .figma-make-app-root [data-macc] > [data-m84]{margin:auto !important}
  .figma-make-app-root .figma-make-app-root [data-mcal]{padding-left:5px !important}
}