/* assets/scenes/model.css: the main scene «Одна модель» (step 3). Everything is scoped by the mdl- prefix. */
.mdl-wrap { position: absolute; inset: 0; --mdl-caph: 0px; }
.mdl-wrap > svg.mdl-sv { position: absolute; left: 0; top: 0; width: 100%; height: calc(100% - var(--mdl-caph)); display: block; max-width: none; }
.mdl-sv text { font-kerning: none; }

/* step caption: desktop = drawing tag top left under the site header (its text on the left edge of the section text),
   phone = band under the scene */
.mdl-cap { position: absolute; left: calc(max(var(--gutter, 40px), (100% - var(--wrap, 1240px)) / 2) - 16px); top: calc(var(--header, 0px) + 10px); z-index: 3; pointer-events: none; width: 552px; max-width: calc(100% - 2 * var(--gutter, 16px) + 32px); padding: 10px 16px 13px; background: rgba(241, 237, 227, .92); }
.mdl-cap-top { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; font: 600 22px/1 var(--mono); letter-spacing: .08em; color: var(--ink); }
.mdl-cap-n { color: var(--blue); font-weight: 600; }
.mdl-cap-of { font-size: 13px; color: var(--soft); letter-spacing: .06em; margin-left: -4px; }
.mdl-cap-l { margin-left: 6px; }
.mdl-cap-bar { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; margin: 12px 0 9px; height: 3px; }
.mdl-cap-bar i { display: block; background: rgba(38, 41, 47, .14); position: relative; overflow: hidden; }
.mdl-cap-bar i::after { content: ''; position: absolute; inset: 0; background: var(--blue); transform-origin: 0 50%; transform: scaleX(var(--f, 0)); }
/* the approved sentence of the step: plain text, up to three lines */
.mdl-cap-p { margin: 0; font: 500 17px/1.42 var(--sans); letter-spacing: 0; color: var(--ink); text-wrap: pretty; }
.mdl-cap-p.mdl-cap-caps { font: 500 12px/1.35 var(--mono); letter-spacing: .08em; color: var(--soft); }

/* phone: the band under the scene; its height is set by the scene to fit the longest sentence */
.mdl-wrap.mdl-m { --mdl-caph: 168px; }
.mdl-m .mdl-cap { left: 0; right: 0; top: auto; bottom: 0; width: auto; max-width: none; height: var(--mdl-caph); padding: 12px 16px 16px; background: var(--paper2); border-top: 1px solid var(--ink); }
.mdl-m .mdl-cap-p { font-size: 16px; line-height: 1.4; }
.mdl-m .mdl-cap-top { font-size: 17px; gap: 8px; }
.mdl-m .mdl-cap-of { font-size: 12px; }
.mdl-m .mdl-cap-bar { margin: 10px 0 9px; }
.mdl-m .mdl-cap-p.mdl-cap-caps { font-size: 12px; }

/* stroke widths of drawings placed on a plane by a matrix: --u = 1 / scale keeps them in stage units */
.mdl-uw06 { stroke-width: calc(var(--u, 1) * .6px); } .mdl-uw09 { stroke-width: calc(var(--u, 1) * .9px); } .mdl-uw10 { stroke-width: calc(var(--u, 1) * 1px); }
.mdl-uw12 { stroke-width: calc(var(--u, 1) * 1.2px); } .mdl-uw14 { stroke-width: calc(var(--u, 1) * 1.4px); } .mdl-uw16 { stroke-width: calc(var(--u, 1) * 1.6px); }
.mdl-uw20 { stroke-width: calc(var(--u, 1) * 2px); } .mdl-uw22 { stroke-width: calc(var(--u, 1) * 2.2px); }