/* Figures for Viktor Bondarenko's four articles. No changes to other posts. */
.research-page .article .vv { max-width: 1000px; margin-block: 44px; --vv-accent: #226446; --vv-tint: #edf5ef; }
.research-page .article .vv-cyan { --vv-accent: #156579; --vv-tint: #edf7fa; }
.research-page .article .vv-amber { --vv-accent: #79531b; --vv-tint: #faf4e8; }
.research-page .article .vv-purple { --vv-accent: #7045a0; --vv-tint: #f5effb; }
.vv .vv-panel { padding: 32px; border: 1px solid #dfe5e4; border-radius: 22px; background: var(--vv-tint); }
.vv .vv-dark { background: #142923; color: #fff; border-color: #142923; }
.vv .vv-dark.vv-blue { background: #152936; border-color: #152936; }
.research-page .article .vv p { margin: 0; }
.vv .vv-eyebrow { display: block; margin-bottom: 10px; color: var(--vv-accent); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.vv .vv-dark .vv-eyebrow { color: #a6d9bb; }
.vv .vv-blue .vv-eyebrow { color: #9dd9ed; }
.vv .vv-title { display: block; max-width: 700px; margin-bottom: 26px; font-size: clamp(23px, 2.5vw, 29px); font-weight: 700; line-height: 1.25; letter-spacing: -.025em; text-wrap: balance; }
.vv .vv-subtitle { display: block; margin: -12px 0 24px; color: #535e69; font-size: 15px; line-height: 1.55; }
.research-page .article .vv .vv-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.research-page .article .vv .vv-flow > li { position: relative; min-width: 0; margin: 0; padding: 20px 16px; background: #fff; border: 1px solid #dce4df; border-radius: 12px; }
.vv .vv-flow > li:not(:last-child)::after { content: '→'; position: absolute; top: 50%; right: -24px; width: 24px; text-align: center; transform: translateY(-50%); color: var(--vv-accent); font-size: 20px; }
.research-page .article .vv .vv-dark .vv-flow > li { background: #ffffff0a; border-color: #ffffff2e; }
.vv .vv-dark .vv-flow > li:not(:last-child)::after { color: #a6d9bb; }
.vv .vv-step { display: block; margin-bottom: 14px; color: var(--vv-accent); font: 600 13px/1.2 ui-monospace, monospace; }
.vv .vv-dark .vv-step { color: #a6d9bb; }
.vv .vv-flow strong { display: block; margin-bottom: 8px; font-size: 17px; line-height: 1.3; }
.vv .vv-flow small { display: block; color: #535e69; font-size: 14px; line-height: 1.5; }
.vv .vv-dark .vv-flow small { color: #c5d8ce; }
.research-page .article .vv .vv-after { margin-top: 22px; padding-top: 18px; border-top: 1px solid #cddbd4; font-size: 15px; line-height: 1.55; }
.research-page .article .vv .vv-dark .vv-after { border-color: #ffffff30; color: #c5d8ce; }
.vv .vv-after strong { color: inherit; }
.vv .vv-arrow { color: var(--vv-accent); font-size: 23px; line-height: 1; }
.research-page .vv figcaption { max-width: 800px; margin: 12px auto 0; text-align: left; }
.research-page .vv .table-wrap { border-color: #dbe0e4; }
.research-page .vv table { min-width: 650px; }
.research-page .vv thead th { background: var(--vv-tint); color: var(--vv-accent); white-space: normal; }
.research-page .vv tbody th { width: 25%; font-size: 15px; font-weight: 600; }
.research-page .vv tbody tr + tr th { border-top: 1px solid var(--article-table); }
.research-page .vv td { width: 37.5%; font-size: 15px; line-height: 1.55; }
.vv .vv-table-title { display: block; margin-bottom: 16px; font-size: 21px; line-height: 1.3; }
.vv .vv-scroll-hint { display: none; }
.vv .vv-launch { display: grid; grid-template-columns: 1fr 1.2fr; gap: 38px; align-items: center; }
.vv .vv-brief { padding-left: 18px; border-left: 3px solid #72c4e0; }
.vv .vv-brief strong { display: block; margin-bottom: 12px; font-size: 21px; line-height: 1.4; }
.research-page .article .vv .vv-brief p { color: #c6dae5; font-size: 15px; }
.vv .vv-browser { border-radius: 12px; background: #fff; color: #152936; overflow: hidden; box-shadow: 0 12px 36px #0002; }
.vv .vv-browser-bar { display: flex; align-items: center; gap: 5px; padding: 12px 16px; background: #eef2f5; }
.vv .vv-browser-bar i { width: 6px; height: 6px; border-radius: 50%; background: #b7c5ce; }
.vv .vv-browser-bar span { margin-left: 10px; font-size: 10px; color: #62707d; }
.vv .vv-page-body { padding: 25px; }
.vv .vv-page-body > strong { display: block; margin: 8px 0 12px; font-size: 24px; line-height: 1.2; letter-spacing: -.025em; }
.research-page .article .vv .vv-page-body p { font-size: 13px; line-height: 1.55; color: #526472; }
.vv .vv-blue .vv-page-body .vv-eyebrow { color: var(--vv-accent); }
.vv .vv-mock-cta { display: inline-block; margin-top: 20px; padding: 11px 15px; border-radius: 7px; background: #155d73; color: #fff; font-size: 12px; font-weight: 600; }
.vv .vv-tools { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.research-page .article .vv .vv-tool { display: flex; align-items: center; gap: 14px; padding: 22px; border: 1px solid #dce3e6; border-radius: 12px; background: #fff; color: #172a34; text-decoration: none; }
.vv .vv-tool img { width: 32px; height: 32px; object-fit: contain; flex: 0 0 32px; }
.vv .vv-tool strong { display: block; font-size: 19px; font-weight: 600; }
.vv .vv-tool small { display: block; color: #586773; font-size: 12px; }
.research-page .article .vv .vv-tool:hover { border-color: var(--vv-accent); }
.vv .vv-tool:focus-visible, .vv .table-wrap:focus-visible { outline: 3px solid var(--vv-accent); outline-offset: 4px; }
.vv .vv-tools-extra { display: flex; align-items: center; gap: 20px; margin-top: 18px; padding-top: 18px; border-top: 1px solid #d2e0e5; }
.vv .vv-tools-extra .vv-tool { flex: 0 0 auto; padding: 12px 20px; }
.vv .vv-tools-extra > span { font-size: 14px; color: #536672; }
.vv .vv-time-head { display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: center; margin-bottom: 24px; }
.vv .vv-time-number { font-size: clamp(44px,6vw,66px); font-weight: 700; line-height: 1; letter-spacing: -.06em; color: var(--vv-accent); white-space: nowrap; }
.vv .vv-time-number small { font-size: 22px; letter-spacing: -.025em; }
.vv .vv-time-head strong { display: block; font-size: 20px; line-height: 1.4; }
.vv .vv-time-head span { display: block; margin-top: 5px; color: #535e69; font-size: 14px; }
.vv .vv-integration { display: grid; grid-template-columns: minmax(0,1fr) 30px minmax(0,1fr) 30px minmax(0,1fr); gap: 10px; align-items: center; }
.vv .vv-system { display: flex; flex-direction: column; justify-content: center; min-height: 170px; padding: 22px; border-radius: 12px; border: 1px solid #e1ddd3; background: #fff; }
.vv .vv-system > strong { font-size: 21px; line-height: 1.3; }
.vv .vv-system > small { display: block; margin-top: 10px; color: #655f53; font-size: 14px; line-height: 1.5; }
.vv .vv-system img { width: 150px; max-width: 100%; height: 32px; object-fit: contain; object-position: left center; }
.vv .vv-missing { border: 2px dashed #ae802e; background: #fffaf0; }
.vv .vv-status { display: inline-block; align-self: flex-start; margin-top: 16px; padding: 4px 9px; background: #edf5ed; border-radius: 5px; color: #315d3f; font-size: 12px; font-weight: 600; }
.vv .vv-missing .vv-status { background: #f9e8bf; color: #785516; }
.vv .vv-goal { max-width: 610px; margin: 0 auto; padding: 22px 26px; border-radius: 12px; background: #fff; border: 1px solid #dfd7c6; }
.vv .vv-goal > strong { display: block; font-size: 21px; line-height: 1.35; }
.vv .vv-goal > span { display: block; margin-top: 9px; color: #645c4c; font-size: 14px; }
.vv .vv-branches { position: relative; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; padding-top: 34px; }
.vv .vv-branches::before { content: ''; position: absolute; height: 17px; top: 0; left: 50%; border-left: 1px solid #b8a685; }
.vv .vv-task { position: relative; padding: 19px; background: #fff; border: 1px solid #e1ddd3; border-radius: 10px; }
.vv .vv-task::before { content: ''; position: absolute; height: 18px; top: -18px; left: 50%; border-left: 1px solid #b8a685; }
.vv .vv-branches::after { content: ''; position: absolute; top: 17px; left: calc(16.666% - 3px); right: calc(16.666% - 3px); border-top: 1px solid #b8a685; }
.vv .vv-task strong { display: block; font-size: 17px; line-height: 1.3; }
.vv .vv-task span { display: block; margin-top: 9px; color: #645c4c; font-size: 14px; line-height: 1.5; }
.vv .vv-task small { display: block; margin-top: 17px; padding-top: 10px; border-top: 1px solid #ece7dd; color: #806a42; font-size: 11px; }
.vv .vv-docs { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.vv .vv-doc { padding: 25px; border: 1px solid #ded3eb; border-radius: 3px 16px 3px 3px; background: #fff; box-shadow: 0 9px 20px #5d337408; }
.vv .vv-doc-head { display: block; margin-bottom: 22px; color: #62516f; font-size: 13px; font-weight: 600; }
.vv .vv-doc-line { height: 5px; margin: 9px 0; border-radius: 3px; background: #ece9ef; }
.vv .vv-doc-line.vv-short { width: 65%; }
.vv .vv-clause { min-height: 74px; margin: 17px 0; padding: 12px 14px; border-left: 3px solid #c7bacf; background: #f7f5f9; font-size: 15px; line-height: 1.45; }
.vv .vv-clause strong { display: block; margin-bottom: 3px; font-size: 11px; font-weight: 500; color: #71607e; }
.vv .vv-changed { background: #f1e8fb; border-color: #9565c4; }
.vv .vv-absent { background: #fff5e5; border-color: #c69432; }
.vv .vv-review { margin-top: 22px; padding: 18px 22px; border: 1px solid #d8c9e6; border-radius: 10px; background: #fff; }
.vv .vv-review strong { display: block; color: #7045a0; font-size: 14px; margin-bottom: 5px; }
.vv .vv-review span { font-size: 16px; line-height: 1.5; }
@media (max-width: 760px) {
 .vv .vv-scroll-hint { display: block; margin-bottom: 10px; font-size: 12px; color: #697184; }
 .vv .vv-panel { padding: 24px; }
 .research-page .article .vv .vv-flow { grid-template-columns: 1fr 1fr; gap: 14px; }
 .vv .vv-flow > li:not(:last-child)::after { display: none; }
 .vv .vv-launch { grid-template-columns: 1fr; gap: 24px; }
 .vv .vv-tools { grid-template-columns: 1fr; gap: 9px; }
 .research-page .article .vv .vv-tool { padding: 14px 18px; }
 .vv .vv-integration { grid-template-columns: 1fr; gap: 12px; }
 .vv .vv-integration > .vv-arrow { transform: rotate(90deg); justify-self: center; }
 .vv .vv-system { min-height: 0; padding: 20px; }
 .vv .vv-branches { grid-template-columns: 1fr; gap: 12px; padding-top: 24px; padding-left: 22px; }
 .vv .vv-branches::before { left: 9px; top: 0; height: auto; bottom: 24px; }
 .vv .vv-branches::after { display: none; }
 .vv .vv-task::before { top: 24px; left: -14px; width: 13px; height: 0; border: 0; border-top: 1px solid #b8a685; }
 .vv .vv-docs { gap: 12px; }
 .vv .vv-doc { padding: 18px; }
}
@media (max-width: 540px) {
 .research-page .article .vv { margin-block: 32px; }
 .vv .vv-panel { padding: 22px 18px; border-radius: 16px; }
 .vv .vv-title { font-size: 23px; margin-bottom: 22px; }
 .research-page .article .vv .vv-flow { grid-template-columns: 1fr; gap: 0; }
 .research-page .article .vv .vv-flow > li { padding: 17px 16px 17px 50px; }
 .research-page .article .vv .vv-flow > li + li { margin-top: 22px; }
 .vv .vv-step { position: absolute; top: 21px; left: 17px; }
 .vv .vv-flow > li:not(:last-child)::after { display: block; top: auto; right: auto; bottom: -23px; left: 16px; transform: rotate(90deg); }
 .vv .vv-tools-extra { align-items: flex-start; flex-direction: column; gap: 12px; }
 .vv .vv-tools-extra .vv-tool { width: 100%; }
 .vv .vv-time-head { grid-template-columns: 1fr; gap: 15px; }
 .vv .vv-docs { grid-template-columns: 1fr; gap: 20px; }
 .vv .vv-doc { padding: 22px; }
 .vv .vv-review { padding: 16px; }
 .vv .vv-goal { padding: 20px; }
 .vv .vv-brief strong { font-size: 19px; }
}