:root {
  --paper: oklch(95.6% 0.014 82);
  --sheet: oklch(98.4% 0.008 88);
  --ink: oklch(23% 0.02 55);
  --ink-2: oklch(41% 0.02 55);
  --muted: oklch(49% 0.02 60);
  --line: oklch(84% 0.02 75);
  --accent: oklch(52.3% 0.169 36.1);
  --accent-soft: oklch(90% 0.05 48);
  --water: oklch(47% 0.07 235);
  --water-soft: oklch(95% 0.02 230);
  --lamp: #ffcf70;
  --bar: 3.25rem;
  --gut: clamp(1rem, 2.6vw, 2.5rem);
  --cond: "Sofia Sans Extra Condensed", "Arial Narrow", sans-serif;
  --serif: "Source Serif 4", Georgia, serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--bar); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.5 var(--serif);
  font-variant-numeric: lining-nums;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, p, ol, ul, dl, dd, figure, table { margin: 0; padding: 0; }
ol, ul { list-style: none; }
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.kicker {
  font: 600 1rem/1.1 var(--cond);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--accent);
}
h1, .h-big {
  font: 700 clamp(2.9rem, 5.6vw, 5.1rem)/.9 var(--cond);
  text-transform: uppercase;
  letter-spacing: .004em;
  text-wrap: balance;
}
.h-big { font-size: clamp(2.4rem, 4.6vw, 4.2rem); max-width: 21ch; }
h2 {
  font: 700 1.3rem/1.1 var(--cond);
  letter-spacing: .07em;
  text-transform: uppercase;
}
h3 { font: 700 1.9rem/1 var(--cond); text-transform: uppercase; letter-spacing: .02em; }
.lead { font-size: 1.14rem; line-height: 1.45; max-width: 38em; text-wrap: pretty; }
.fine { font-size: .9rem; line-height: 1.4; color: var(--muted); }

/* шапка */
.bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: stretch; justify-content: space-between; gap: 1rem;
  height: var(--bar);
  padding-inline: var(--gut);
  background: var(--paper);
  border-bottom: 1.5px solid var(--ink);
}
.bar__name {
  display: flex; align-items: center; gap: .6em; white-space: nowrap;
  font: 700 1.25rem/1 var(--cond); letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
}
.bar__name span { font-weight: 400; color: var(--muted); }
.tabs { display: flex; overflow-x: auto; scrollbar-width: none; margin-right: calc(var(--gut) * -1); padding-right: var(--gut); }
.tabs::-webkit-scrollbar { display: none; }
.tabs a {
  display: flex; align-items: center; gap: .4em; white-space: nowrap;
  padding-inline: .85rem;
  font: 600 1.12rem/1 var(--cond); letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  border-left: 1px solid var(--line);
}
.tabs a b { font-weight: 400; color: var(--accent); }
.tabs a:hover { background: var(--sheet); }
.tabs a[aria-current] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tabs a[aria-current] b { color: var(--accent-soft); }

/* листы */
.view { padding: clamp(1.25rem, 3vw, 2.75rem) var(--gut) clamp(2.5rem, 6vw, 5rem); border-bottom: 1.5px solid var(--ink); }
.js .view { border-bottom: 0; }
.js .view:not(.is-on) { display: none; }
.js .view.is-on > * { animation: lay .5s cubic-bezier(.2, .7, .2, 1) both; }
.js .view.is-on > :nth-child(2) { animation-delay: .06s; }
.js .view.is-on > :nth-child(3) { animation-delay: .12s; }
.js .view.is-on > :nth-child(n+4) { animation-delay: .18s; }
@keyframes lay { from { opacity: 0; transform: translateY(.6rem); } }

/* 01 план */
.view--plan.is-on, .view--plan { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.js .view--plan:not(.is-on) { display: none; }
.board { position: sticky; top: calc(var(--bar) + 1rem); }
.board__paper {
  position: relative;
  height: min(calc(100svh - var(--bar) - 3.5rem), 62rem);
  aspect-ratio: 810 / 1330;
  background: var(--sheet);
  outline: 1px solid var(--ink);
  outline-offset: -1px;
  box-shadow: .35rem .45rem 0 oklch(23% 0.02 55 / .09);
  transition: background-color .5s;
}
.board__paper[data-sheet="light"] {
  --sheet: oklch(24% 0.018 60);
  --ink: oklch(86% 0.02 80);
  --ink-2: oklch(64% 0.02 75);
  --accent: oklch(74% 0.14 55);
  --accent-soft: oklch(40% 0.08 50);
  --water: oklch(66% 0.05 235);
  --water-soft: oklch(30% 0.02 235);
  color: var(--ink);
}
.board__north, .board__south {
  position: absolute; left: 50%; translate: -50% 0;
  font: 400 .82rem/1 var(--cond); letter-spacing: .28em; text-transform: uppercase; color: var(--ink-2);
  pointer-events: none;
}
.board__north { top: .5rem; }
.board__south { bottom: .5rem; }
.tip {
  position: absolute; z-index: 3; left: 0; top: 0;
  max-width: 15rem; padding: .4rem .6rem;
  background: oklch(23% 0.02 55); color: oklch(96% 0.012 82);
  font-size: .85rem; line-height: 1.3;
  pointer-events: none;
}
.tip b { display: block; font: 600 .95rem/1.1 var(--cond); letter-spacing: .06em; text-transform: uppercase; color: oklch(84% 0.09 60); }

#plan-svg { width: 100%; height: 100%; -webkit-tap-highlight-color: transparent; user-select: none; }
#plan-svg * { vector-effect: non-scaling-stroke; }
#plan-svg rect, #plan-svg path, #plan-svg circle, #plan-svg line, #plan-svg ellipse, #plan-svg polyline, #plan-svg text { transition: fill .45s, stroke .45s; }
.L { transition: opacity .35s; }
.L.off { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .35s, visibility 0s .35s; }
.dimf .L-furn:not(.off), .dimf .L-plumb:not(.off) { opacity: .38; }
.dimf .L-furn, .dimf .L-plumb { pointer-events: none; }

.hit { fill: transparent; cursor: pointer; }
.zone { stroke: none; pointer-events: none; }
.zone[data-r="r5"] { fill: oklch(92.5% 0.04 86); }
.zone[data-r="r3"] { fill: oklch(93.5% 0.014 86); }
.zone[data-r="r4"] { fill: oklch(92.5% 0.028 225); }
.zone[data-r="r1"] { fill: oklch(91.5% 0.04 52); }
.zone[data-r="r2"] { fill: oklch(92.5% 0.035 150); }
.sel { fill: none; stroke: var(--accent); stroke-width: 2.5px; pointer-events: none; }

.wall { fill: var(--ink); }
.wall-new { fill: var(--accent); }
.win { fill: var(--sheet); stroke: var(--ink); stroke-width: 1px; }
.thin { fill: none; stroke: var(--ink-2); stroke-width: .8px; }
.dash { stroke-dasharray: 4 3; }
.leaf { fill: none; stroke: var(--ink); stroke-width: 1.8px; }
.porch { fill: none; stroke: var(--ink-2); stroke-width: 1px; }

.f { fill: var(--sheet); stroke: var(--ink-2); stroke-width: 1px; }
.ft { fill: color-mix(in oklch, var(--sheet) 86%, var(--ink)); stroke: var(--ink-2); stroke-width: 1px; }
.fd { fill: none; stroke: var(--ink-2); stroke-width: .8px; }
.fk { fill: var(--ink-2); stroke: none; }
.rug { fill: color-mix(in oklch, var(--sheet) 90%, var(--ink)); stroke: none; opacity: .55; }
.pl { fill: var(--water-soft); stroke: var(--water); stroke-width: 1px; }
.pd { fill: none; stroke: var(--water); stroke-width: .8px; }
.it[data-tip] { cursor: pointer; }
.it[data-tip]:hover .f, .it[data-tip]:hover .ft, .it[data-tip]:hover .pl, .it.is-sel .f, .it.is-sel .ft, .it.is-sel .pl { stroke: var(--accent); stroke-width: 2px; }

.t { font-family: var(--cond); fill: var(--ink); text-anchor: middle; pointer-events: none; }
.t-name { font-size: 21px; font-weight: 600; letter-spacing: 1.6px; }
.t-num { font-size: 21px; font-weight: 700; }
.t-area { font-size: 20px; fill: var(--ink-2); }
.t-dim { font-size: 20px; font-weight: 500; fill: var(--ink-2); }
.t-sm { font-size: 16px; letter-spacing: 1.4px; fill: var(--ink-2); }
.bub { fill: var(--sheet); stroke: var(--ink); stroke-width: 1px; }
[data-sheet="sock"] .t-area, [data-sheet="light"] .t-area, [data-sheet="sock"] .t-name, [data-sheet="light"] .t-name { opacity: 0; }
.dim { fill: none; stroke: var(--ink-2); stroke-width: .8px; }

.sk { cursor: pointer; }
.sk-h { fill: transparent; }
.sk-a { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.4px; }
.sk-b { fill: var(--accent); stroke: var(--accent); stroke-width: 1.4px; }
.sk-l { fill: none; stroke: var(--accent); stroke-width: 1.4px; }
.sk:hover .sk-a, .sk.is-sel .sk-a { fill: var(--accent); }
.sk.is-sel .sk-h, .sw.is-sel .sk-h { stroke: var(--accent); stroke-width: 1px; stroke-dasharray: 2 2; }

.glow { pointer-events: none; opacity: .3; transition: opacity .45s; mix-blend-mode: screen; }
.glow-l { fill: none; stroke: var(--lamp); stroke-width: 70; stroke-linecap: round; stroke-linejoin: round; opacity: .35; }
.picked .glow { opacity: .04; }
.picked .glow.on { opacity: 1; }
.lt { cursor: pointer; }
.lt-a { fill: var(--sheet); stroke: var(--ink); stroke-width: 1.2px; }
.lt-l { fill: none; stroke: var(--ink); stroke-width: 1.2px; }
.lt-s { fill: none; stroke: var(--lamp); stroke-width: 3px; stroke-linecap: round; }
.board__paper:not([data-sheet="light"]) .lt-s { stroke: var(--accent); }
.board__paper:not([data-sheet="light"]) .glow { mix-blend-mode: multiply; opacity: .5; }
.picked .lt { opacity: .35; }
.picked .lt.on { opacity: 1; }
.lt.on .lt-a { fill: var(--lamp); stroke: var(--lamp); }
.lt, .sw { transition: opacity .35s; }
.sw { cursor: pointer; }
.sw-a { fill: var(--sheet); stroke: var(--accent); stroke-width: 1.6px; }
.sw-l { fill: none; stroke: var(--accent); stroke-width: 1.6px; }
.sw:hover .sw-a, .sw.is-sel .sw-a { fill: var(--accent); }
.wire { fill: none; stroke: var(--accent); stroke-width: 1px; stroke-dasharray: 3 3; pointer-events: none; }

/* правая колонка плана */
.notes { display: grid; gap: 1.4rem; max-width: 46rem; padding-top: .4rem; }
.notes h1 { margin-top: -.6rem; }
.sheets { display: grid; grid-template-columns: repeat(4, 1fr); border: 1.5px solid var(--ink); margin-top: .4rem; }
.sheets button { display: grid; gap: .15rem; padding: .6rem .7rem .65rem; text-align: left; border-left: 1px solid var(--ink); background: var(--sheet); }
.sheets button:first-child { border-left: 0; }
.sheets b { font: 700 1.35rem/1 var(--cond); letter-spacing: .05em; text-transform: uppercase; }
.sheets span { font-size: .82rem; line-height: 1.15; color: var(--muted); }
.sheets button:hover { background: var(--accent-soft); }
.sheets button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.sheets button[aria-pressed="true"] span { color: oklch(80% 0.02 75); }
.layers { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; margin-top: -.6rem; font: 500 1.05rem/1.2 var(--cond); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); }
.layers label { display: inline-flex; align-items: center; gap: .4em; cursor: pointer; }
.layers input { accent-color: var(--ink); width: .95rem; height: .95rem; margin: 0; }

.card { min-height: 15.5rem; padding-top: 1rem; border-top: 2.5px solid var(--ink); }
.card__meta { font: 600 1rem/1.1 var(--cond); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.card h3 { margin: .3rem 0 .5rem; font-size: 2.3rem; }
.card__role { font-style: italic; font-size: 1.1rem; line-height: 1.4; max-width: 34em; }
.card__why { margin-top: .8rem; display: grid; gap: .45rem; max-width: 40em; }
.card__why li { padding-left: 1.3em; text-indent: -1.3em; line-height: 1.42; }
.card__why li::before { content: "—"; display: inline-block; width: 1.3em; text-indent: 0; color: var(--accent); }
.card__pick { display: inline-block; margin-bottom: .6rem; padding: .15rem .5rem; background: var(--accent-soft); font-size: .95rem; }
.card__stat { margin-top: .9rem; font: 500 1.05rem/1.2 var(--cond); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.card__stat button { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: .2em; text-transform: inherit; letter-spacing: inherit; }
.card__groups { margin-top: .8rem; display: grid; gap: .5rem; }
.card__groups li { display: grid; grid-template-columns: 1.1rem 1fr; gap: .5rem; align-items: baseline; }
.card__groups li::before { content: ""; width: .7rem; height: .7rem; border-radius: 50%; background: var(--lamp); outline: 1px solid var(--ink-2); translate: 0 .05rem; }
.card__groups small { display: block; color: var(--muted); font-size: .9rem; }

.under { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.under h2, .assume h2 { margin-bottom: .6rem; }
.expl table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums lining-nums; }
.expl td { padding: .28rem 0; border-bottom: 1px solid var(--line); line-height: 1.25; }
.expl td:first-child { width: 1.8rem; font: 700 1.15rem/1 var(--cond); }
.expl td:last-child { text-align: right; white-space: nowrap; }
.expl tbody tr { cursor: pointer; }
.expl tbody tr:hover td, .expl tbody tr.is-sel td { background: var(--accent-soft); }
.expl tfoot td { border-bottom: 0; border-top: 1.5px solid var(--ink); font-weight: 600; }
.expl .fine { margin-top: .5rem; }
.legend ul { display: grid; gap: .4rem; }
.legend li { display: grid; grid-template-columns: 2.4rem 1fr auto; gap: .6rem; align-items: center; line-height: 1.25; font-size: .98rem; }
.legend svg { width: 2.4rem; height: 1.5rem; overflow: visible; }
.legend li > span:last-child { font-variant-numeric: tabular-nums; color: var(--muted); }
.legend .sw-wall { fill: var(--ink); }

.assume { padding: 1.1rem 1.2rem 1.2rem; background: var(--sheet); border-left: 3px solid var(--accent); }
.assume ol { counter-reset: a; display: grid; gap: .55rem; }
.assume li { counter-increment: a; display: grid; grid-template-columns: 1.6rem 1fr; line-height: 1.42; }
.assume li::before { content: counter(a); font: 700 1.3rem/1.15 var(--cond); color: var(--accent); }

/* 02 3d */
.view--vid.is-on, .view--vid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.5rem clamp(1rem, 2vw, 2rem); }
.js .view--vid:not(.is-on) { display: none; }
.vid__head { grid-column: 1 / 10; display: grid; gap: .8rem; }
.model { grid-column: 1 / -1; }
.model__stage { position: relative; aspect-ratio: 16 / 9; max-height: calc(100svh - var(--bar) - 9rem); width: 100%; background: oklch(90.5% 0.018 80); outline: 1px solid var(--ink); overflow: hidden; }
.model__poster, .model__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.model__poster { object-fit: cover; }
.model__stage canvas { display: block; opacity: 0; cursor: grab; touch-action: pan-y; transition: opacity .5s; }
.model__stage canvas:active { cursor: grabbing; }
.is-live .model__stage canvas { opacity: 1; }
.is-live .model__poster { opacity: 0; transition: opacity .5s .3s; }
.model__bar { display: flex; justify-content: space-between; gap: 1rem; border: 1px solid var(--ink); border-top: 0; background: var(--sheet); }
.model__bar[hidden] { display: none; }
.model__views, .model__zoom { display: flex; }
.model__bar button { padding: .55rem .9rem .6rem; font: 600 1.15rem/1 var(--cond); letter-spacing: .04em; text-transform: uppercase; border-right: 1px solid var(--ink); }
.model__zoom button { min-width: 2.75rem; border-right: 0; border-left: 1px solid var(--ink); font-size: 1.4rem; }
.model__bar button:hover { background: var(--accent-soft); }
.model__bar button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.model figcaption { margin-top: .5rem; font-size: .92rem; line-height: 1.35; color: var(--ink-2); }
.model__state { color: var(--ink); }
.is-used .model__state { display: none; }
.vid__film { grid-column: 1 / 10; }
.vid__film video { width: 100%; background: var(--ink); outline: 1px solid var(--ink); }
.vid__film figcaption, .shot figcaption { margin-top: .5rem; font-size: .92rem; line-height: 1.35; color: var(--ink-2); }
.vid__text { grid-column: 10 / 13; display: grid; gap: .9rem; align-content: start; font-size: 1rem; line-height: 1.45; }
.shots { grid-column: 1 / -1; display: grid; grid-template-columns: 5fr 4fr 4fr; gap: clamp(1rem, 2vw, 2rem); margin-top: 1rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.shot img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; outline: 1px solid var(--ink); }
.shot--b, .shot--c { margin-top: 2.5rem; }
.shot b { font: 700 1.2rem/1 var(--cond); color: var(--accent); margin-right: .3em; }

/* 03 развёртка */
.view--wall.is-on, .view--wall { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 2rem clamp(1.5rem, 4vw, 4rem); align-items: start; }
.js .view--wall:not(.is-on) { display: none; }
.wall__head { grid-column: 1 / -1; display: grid; gap: .8rem; }
.wall__sheet { background: var(--sheet); outline: 1px solid var(--ink); padding: clamp(.5rem, 2vw, 1.5rem); box-shadow: .35rem .45rem 0 oklch(23% 0.02 55 / .09); }
#wall-svg { width: 100%; height: auto; }
#wall-svg * { vector-effect: non-scaling-stroke; }
.wall__note { margin-top: .6rem; min-height: 2.8em; font-size: .95rem; line-height: 1.4; color: var(--ink-2); }
.e-wall { fill: color-mix(in oklch, var(--sheet) 94%, var(--ink)); stroke: var(--ink); stroke-width: 1.5px; }
.e-f { fill: #46524a; stroke: var(--ink); stroke-width: 1px; }
.e-u { fill: #ece6da; stroke: var(--ink); stroke-width: 1px; }
.e-st { fill: #ded8cd; stroke: var(--ink); stroke-width: 1px; }
.e-ap { fill: #33302c; stroke: var(--ink); stroke-width: 1px; }
.e-gl { fill: #1f1d1b; stroke: #8a857c; stroke-width: 1px; }
.e-fl { stroke: #ffffff55; stroke-width: 1px; fill: none; }
.e-fd { stroke: #00000040; stroke-width: 1px; fill: none; }
.e-sk { fill: var(--sheet); stroke: var(--accent); stroke-width: 2px; cursor: pointer; }
.e-sk.hid { fill: none; stroke-dasharray: 3 2; }
.e-sk:hover { fill: var(--accent); }
.mats ul { display: grid; gap: .7rem; margin: .8rem 0 1rem; }
.mats li { display: grid; grid-template-columns: 3.4rem 1fr; gap: .9rem; align-items: center; line-height: 1.3; font-size: .98rem; }
.mats i { height: 2.4rem; background: var(--c); outline: 1px solid var(--ink); }
.mats i.tile { background-image: linear-gradient(#0000 calc(100% - 1px), #0002 0), linear-gradient(90deg, #0000 calc(100% - 1px), #0002 0); background-size: 100% .6rem, 1.7rem 100%; background-color: var(--c); }
.mats b { display: block; font: 700 1.1rem/1.1 var(--cond); letter-spacing: .06em; text-transform: uppercase; }

/* 04 устройство */
.how__head { display: grid; gap: .8rem; margin-bottom: 2rem; }
.flow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; border: 1.5px solid var(--ink); background: var(--sheet); }
.flow__steps { display: grid; grid-template-columns: repeat(6, 1fr); counter-reset: f; }
.flow__steps li { counter-increment: f; border-left: 1px solid var(--ink); }
.flow__steps li:first-child { border-left: 0; }
.flow__steps button { position: relative; display: grid; gap: .2rem; width: 100%; height: 100%; padding: .8rem .9rem 1rem; text-align: left; align-content: start; }
.flow__steps button::before { content: counter(f); font: 400 1rem/1 var(--cond); color: var(--accent); }
.flow__steps li:not(:last-child) button::after { content: ""; position: absolute; right: -.45rem; top: 50%; z-index: 1; width: .8rem; height: .8rem; background: var(--sheet); border-top: 1px solid var(--ink); border-right: 1px solid var(--ink); rotate: 45deg; translate: 0 -50%; }
.flow__steps b { font: 700 1.45rem/1 var(--cond); letter-spacing: .04em; text-transform: uppercase; }
.flow__steps span { font-size: .85rem; line-height: 1.2; color: var(--muted); }
.flow__steps button:hover, .flow__steps button:hover::after { background: var(--accent-soft); }
.flow__steps button[aria-pressed="true"], .flow__steps li:not(:last-child) button[aria-pressed="true"]::after { background: var(--ink); color: var(--paper); }
.flow__steps button[aria-pressed="true"] span { color: oklch(80% 0.02 75); }
.flow__steps button[aria-pressed="true"]::before { color: var(--accent-soft); }
.flow__text { padding: 1.3rem 1.4rem 1.5rem; border-top: 1.5px solid var(--ink); min-height: 10.5rem; }
.flow__text h3 { margin-bottom: .5rem; font-size: 1.7rem; }
.flow__text p { max-width: 46em; }
html:not(.js) .flow__text div[hidden] { display: block; margin-top: 1.2rem; }

.how__cols { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(1.5rem, 5vw, 5rem); margin-top: 3.2rem; }
.edit ol { margin-top: .9rem; border-top: 1.5px solid var(--ink); }
.edit li { display: grid; grid-template-columns: 6.4rem 1fr; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); line-height: 1.4; }
.edit time { font: 700 1.3rem/1.15 var(--cond); letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }
.edit .fine { margin-top: .4rem; font-style: italic; font-size: 1.05rem; color: var(--ink-2); }
.promise ul { margin-top: .9rem; display: grid; gap: .7rem; }
.promise li { padding-left: 1rem; border-left: 2px solid var(--ink); line-height: 1.4; }
.stages { margin-top: 3.5rem; }
.stages ol { display: grid; grid-template-columns: 1fr 2fr 1fr 2fr 1fr; margin-top: 1rem; border-top: 2.5px solid var(--ink); }
.stages li { padding: .8rem 1rem 0 0; margin-right: 1rem; border-right: 1px solid var(--line); font-size: .97rem; line-height: 1.4; }
.stages li:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.stages li b { display: block; margin-bottom: .35rem; font: 700 1.5rem/1 var(--cond); letter-spacing: .04em; text-transform: uppercase; }
.stages .fine { margin-top: 1rem; }
.limits { margin-top: 3rem; max-width: 46rem; margin-left: auto; padding: 1.1rem 1.2rem 1.2rem; background: var(--sheet); border-left: 3px solid var(--accent); }
.limits h2 { margin-bottom: .5rem; }

/* 05 стоимость */
.price__head { display: grid; gap: .8rem; margin-bottom: 2rem; }
.bill { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums lining-nums; }
.bill thead th { padding: .4rem .8rem .4rem 0; text-align: left; font: 600 1rem/1.1 var(--cond); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border-bottom: 2.5px solid var(--ink); }
.bill td, .bill tbody th { padding: .7rem 1.2rem .75rem 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); line-height: 1.4; }
.bill tbody th { width: 15rem; font: 700 1.45rem/1.05 var(--cond); letter-spacing: .03em; text-transform: uppercase; }
.bill td:nth-child(3) { white-space: nowrap; color: var(--ink-2); }
.bill td:last-child, .bill thead th:last-child { padding-right: 0; text-align: right; white-space: nowrap; }
.bill td:last-child { font: 700 1.6rem/1.05 var(--cond); letter-spacing: .02em; }
.bill td small { display: block; font: 400 .85rem/1.2 var(--serif); letter-spacing: 0; color: var(--muted); }
.bill .bill__sec th { width: auto; padding: 1.4rem 0 .35rem; font-size: 1rem; font-weight: 600; letter-spacing: .09em; color: var(--accent); border-bottom: 1.5px solid var(--ink); }
.packs { margin-top: 3.2rem; }
.packs dl { display: grid; grid-template-columns: 3fr 4fr 5fr; margin: 1rem 0; border: 1.5px solid var(--ink); background: var(--sheet); }
.packs dl > div { padding: 1rem 1.2rem 1.2rem; border-left: 1px solid var(--ink); }
.packs dl > div:first-child { border-left: 0; }
.packs dt { font: 600 1.15rem/1.1 var(--cond); letter-spacing: .07em; text-transform: uppercase; }
.packs .sum { margin: .25rem 0 .4rem; font: 700 3rem/.95 var(--cond); }
.packs dd { font-size: .97rem; line-height: 1.4; }
.packs .is-main { background: var(--ink); color: var(--paper); }
.packs .is-main dt { color: var(--accent-soft); }

/* основная надпись */
.stamp { display: flex; justify-content: flex-end; padding: 0 var(--gut) clamp(1.5rem, 4vw, 3rem); }
.stamp table { border-collapse: collapse; border: 1.5px solid var(--ink); background: var(--sheet); font-size: .9rem; line-height: 1.2; }
.stamp th, .stamp td { padding: .35rem .7rem; border: 1px solid var(--ink); text-align: left; }
.stamp th { font: 400 .88rem/1.1 var(--cond); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.stamp td:nth-child(2) { min-width: 15rem; }

@media (max-width: 1080px) {
  .vid__head, .vid__film { grid-column: 1 / -1; }
  .vid__text { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .stages ol { grid-template-columns: 1fr 1fr; }
  .stages li { padding-bottom: .9rem; border-bottom: 1px solid var(--line); }
  .stages li:nth-child(2n) { border-right: 0; margin-right: 0; }
  .flow__steps { grid-template-columns: repeat(3, 1fr); }
  .flow__steps li:nth-child(4) { border-left: 0; }
  .flow__steps li:nth-child(n+4) { border-top: 1px solid var(--ink); }
  .flow__steps li:nth-child(3) button::after { display: none; }
}

@media (max-width: 860px) {
  body { font-size: 1rem; }
  .bar__name span { display: none; }
  .view--plan.is-on, .view--plan { display: flex; flex-direction: column; gap: 1rem; }
  .notes { display: contents; }
  .notes > .kicker { order: 1; }
  .notes > h1 { order: 2; margin-top: -.5rem; }
  .notes > .lead { order: 3; font-size: 1.02rem; }
  .sheets { order: 4; position: sticky; top: var(--bar); z-index: 5; margin: 0 calc(var(--gut) * -1); border-inline: 0; }
  .sheets button { padding: .5rem .55rem .55rem; }
  .sheets b { font-size: 1.15rem; }
  .sheets span { font-size: .72rem; }
  .board { order: 5; position: static; }
  .board__paper { height: auto; width: 100%; box-shadow: none; }
  .layers { order: 6; margin-top: 0; }
  .card { order: 7; min-height: 0; }
  .under { order: 8; grid-template-columns: 1fr; gap: 1.5rem; }
  .assume { order: 9; }
  .t-name { font-size: 26px; }
  .t-num { font-size: 25px; }
  .t-area, .t-dim { font-size: 25px; }
  .t-sm { font-size: 21px; }
  .shots { grid-template-columns: 1fr; }
  .model__stage { aspect-ratio: 1; max-height: none; }
  .model__views { flex: 1; }
  .model__views button { flex: 1 1 auto; padding-inline: .45rem; font-size: 1rem; }
  .model__views button:last-child { border-right: 0; }
  .model__zoom { display: none; }
  .shot--b, .shot--c { margin-top: 0; }
  .vid__text { grid-template-columns: 1fr; gap: .9rem; }
  .view--wall.is-on, .view--wall { grid-template-columns: 1fr; }
  .how__cols { grid-template-columns: 1fr; gap: 2.5rem; }
  .edit li { grid-template-columns: 5rem 1fr; gap: .7rem; }
  .flow__steps { grid-template-columns: repeat(2, 1fr); }
  .flow__steps li { border-left: 1px solid var(--ink); border-top: 1px solid var(--ink); }
  .flow__steps li:nth-child(4) { border-left: 1px solid var(--ink); }
  .flow__steps li:nth-child(2n+1) { border-left: 0; }
  .flow__steps li:nth-child(-n+2) { border-top: 0; }
  .flow__steps button::after { display: none; }
  .flow__text { padding: 1rem; }
  .bill thead { display: none; }
  .bill, .bill tbody, .bill tr, .bill td, .bill tbody th { display: block; width: auto; }
  .bill tr { padding: .7rem 0; border-bottom: 1px solid var(--line); }
  .bill td, .bill tbody th { padding: 0; border: 0; }
  .bill td:nth-child(3) { margin-top: .3rem; font-size: .9rem; }
  .bill td:last-child { margin-top: .2rem; text-align: left; }
  .bill td small { display: inline; margin-left: .4em; }
  .bill .bill__sec { padding: 1.2rem 0 .3rem; border-bottom: 1.5px solid var(--ink); }
  .bill .bill__sec th { padding: 0; border: 0; }
  .packs dl { grid-template-columns: 1fr; }
  .packs dl > div { border-left: 0; border-top: 1px solid var(--ink); }
  .packs dl > div:first-child { border-top: 0; }
  .stages ol { grid-template-columns: 1fr; }
  .stages li { border-right: 0; margin-right: 0; padding-right: 0; }
  .stamp { justify-content: stretch; }
  .stamp table { width: 100%; }
  .stamp td:nth-child(2) { min-width: 0; }
  .stamp th { padding-inline: .45rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.np { pointer-events: none; }
[data-sheet="light"] .zone { opacity: .1; }
.legend .lt-s, #wall-svg .lt-s { stroke: var(--accent); }
.legend h2 { margin-bottom: .6rem; }
@media (max-width: 860px) {
  .sym { transform: scale(1.35); }
  .tip { max-width: 12rem; }
  .board__north { top: .05rem; font-size: .62rem; }
  .board__south { bottom: .05rem; font-size: .62rem; }
}