@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/manrope-400-normal-cyrillic.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/manrope-400-normal-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/fonts/manrope-600-normal-cyrillic.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/fonts/manrope-600-normal-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url(/fonts/manrope-800-normal-cyrillic.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url(/fonts/manrope-800-normal-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Диагональ телевизора. Идея: примерка на стене. Цифры в дюймах ничего не говорят, пока экран не увидишь рядом с привычной вещью.
Страница — светлая стена, экран — чёрное стекло, размерные линии — ультрамарин, как на строительном чертеже. Manrope. */
:root{
--wall:#e6e8ec; --wall-2:#eff1f4; --ink:#14161b; --muted:#565d6c; --line:#cdd1d8; --white:#fff;
--blue:#3b44f6; --blue-deep:#2a31c4;
--wrap:1200px; --pad:clamp(16px,4vw,48px);
--font:"Manrope",-apple-system,"Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--wall);color:var(--ink);font:400 17px/1.6 var(--font);font-variant-numeric:tabular-nums}
a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--blue);text-decoration-thickness:1.5px;text-underline-offset:3px}
a:hover{color:var(--blue-deep)}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.skip{position:absolute;left:-9999px;top:8px;background:var(--ink);color:#fff;padding:8px 12px;z-index:9}.skip:focus{left:8px}
.head,main,.foot{width:min(100% - 2 * var(--pad),var(--wrap));margin-left:auto;margin-right:auto}
.head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 28px;padding:20px 0}
.brand{display:inline-flex;align-items:center;gap:12px;font-weight:800;font-size:19px;text-decoration:none;letter-spacing:-.01em}
.brand-tv{width:30px;height:18px;background:linear-gradient(to top right,transparent calc(50% - 1px),var(--blue) calc(50% - 1px),var(--blue) calc(50% + 1px),transparent calc(50% + 1px)),var(--ink);border-radius:2px}
.nav{display:flex;flex-wrap:wrap;gap:4px 24px}
.nav a{text-decoration:none;font-weight:600;font-size:15.5px;padding:4px 0;border-bottom:2px solid transparent}
.nav a:hover{border-color:var(--line)}
.nav a[aria-current]{border-color:var(--blue)}
main{padding-bottom:16px}
main:focus{outline:0}
.crumbs{font-size:14.5px;color:var(--muted);padding-top:4px}
.crumbs a{color:var(--muted);text-decoration-color:var(--line)}
h1{font-weight:800;font-size:clamp(30px,4vw,48px);line-height:1.08;letter-spacing:-.03em;margin:.35em 0 .45em;text-wrap:balance}
h2{font-weight:800;font-size:clamp(22px,2.4vw,28px);line-height:1.2;letter-spacing:-.02em;margin:1.8em 0 .5em}
p{margin:0 0 1em;max-width:40em;text-wrap:pretty}
.lead{font-size:clamp(17px,1.6vw,19px);line-height:1.55}
.src{font-size:15px;color:var(--muted)}
/* Примерка */
.fit{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:28px clamp(28px,4vw,56px);align-items:start;padding-bottom:clamp(24px,3vw,40px);border-bottom:1px solid var(--line)}
.fit-pic{margin:0;position:sticky;top:16px}
.fit-pic figcaption{font-size:14.5px;color:var(--muted);margin-top:10px}
.wall{display:block;width:100%;height:auto;background:var(--wall-2);border-radius:4px}
.w-bg{fill:var(--wall-2)}
.w-floor{stroke:var(--ink);stroke-width:1.6}
.w-door rect{fill:var(--wall);stroke:#9aa1ad;stroke-width:1}
.w-door circle{fill:#9aa1ad}
.w-door text{fill:var(--muted);font:500 7.5px var(--font)}
.tv-body{fill:var(--ink)}
.tv-diag{stroke:var(--blue);stroke-width:.9;stroke-dasharray:3 2.5}
.tv-d{fill:#fff;font:800 13px var(--font)}
.dim line{stroke:var(--blue);stroke-width:.8}
.dim text{fill:var(--blue-deep);font:700 8.5px var(--font)}
.w-tv,.dim line,.dim text{transition:all .25s ease}
@media(prefers-reduced-motion:reduce){.w-tv,.dim line,.dim text{transition:none}}
.controls{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:flex-end;margin:22px 0 18px}
.ctl label,.ctl legend{display:block;font-size:14px;font-weight:600;color:var(--muted);margin-bottom:6px;padding:0}
.ctl input[type=number]{font:800 34px/1 var(--font);letter-spacing:-.02em;width:7ch;padding:8px 12px;min-height:58px;border:2px solid var(--ink);border-radius:4px;background:var(--white);color:var(--ink)}
.ctl input[type=number]:focus-visible{outline:3px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
.fmt{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.fmt legend{width:100%}
.fmt label{position:relative;cursor:pointer}
.fmt input{position:absolute;opacity:0;inset:0}
.fmt span{display:inline-block;padding:14px 14px;min-width:64px;text-align:center;font-weight:700;border:2px solid var(--line);border-radius:4px;background:var(--wall-2)}
.fmt input:checked+span{background:var(--ink);color:#fff;border-color:var(--ink)}
.fmt input:focus-visible+span{outline:3px solid var(--blue);outline-offset:2px}
.fmt label:hover span{border-color:var(--ink)}
.answer{font-weight:800;font-size:clamp(36px,5vw,60px);line-height:1.02;letter-spacing:-.035em;margin:0 0 .15em;max-width:none}
.answer-sub{font-size:16px;color:var(--muted);margin:0 0 1.2em;min-height:1.6em}
.steps{display:flex;gap:8px;flex-wrap:wrap}
.steps a{display:inline-block;padding:8px 16px;border:2px solid var(--ink);border-radius:4px;text-decoration:none;font-weight:800}
.steps a:hover{background:var(--ink);color:#fff}
.conv{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 18px;margin:20px 0 8px}
.conv .eq{font:800 34px/58px var(--font);color:var(--muted)}
.conv input[type=number]{width:8ch}
/* Наложение размеров */
.overlay{display:block;width:100%;height:auto;max-width:560px}
.ov rect{fill:none;stroke:#8b93a1;stroke-width:.6}
.ov text{fill:var(--muted);font:700 6px var(--font)}
.overlay a:hover rect,.ov.hl rect{stroke:var(--blue);stroke-width:1.4;fill:rgba(59,68,246,.07)}
.overlay a:hover text,.ov.hl text{fill:var(--blue-deep)}
.overlay a{text-decoration:none}
.formats{display:block;width:100%;height:auto}
.formats rect{fill:none;stroke-width:.8}
.f43 rect{stroke:var(--blue);stroke-dasharray:2 1.4;stroke-width:.45}.f219 rect{stroke:var(--blue);stroke-width:.45}.f169 rect{fill:var(--ink);stroke:var(--ink)}
.key{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-wrap:wrap;gap:4px 18px;font-size:14.5px;color:var(--muted)}
.key i{display:inline-block;width:22px;height:12px;margin-right:6px;vertical-align:-1px}
.k169{background:var(--ink)}.k219{border:1.5px solid var(--blue)}.k43{border:1.5px dashed var(--blue)}
.formats text{font:700 5px var(--font);fill:var(--ink)}
.f169 text{fill:#fff}
/* Таблицы */
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:0 56px;align-items:start}
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 1.4em;background:var(--wall-2);border-radius:4px;padding:4px 16px}
table{border-collapse:collapse;width:100%;font-size:16px}
table.narrow{max-width:420px}
thead th{font-size:13.5px;font-weight:700;color:var(--muted);text-align:left;padding:10px 16px 8px 0;border-bottom:2px solid var(--ink);white-space:nowrap}
td,tbody th{padding:8px 16px 8px 0;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
tbody tr:last-child td,tbody tr:last-child th{border-bottom:0}
tbody th{font-weight:700}
.num,th.num{text-align:right}
td:last-child,th:last-child{padding-right:0}
tr.hl th,tr.hl td{color:var(--blue-deep)}
tbody tr:hover th,tbody tr:hover td{background:var(--wall)}
.ov-sec p{font-size:15px;color:var(--muted)}
.next{list-style:none;padding:0;margin:1em 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.next li{background:var(--wall-2);border-radius:4px;padding:14px 16px}
.next a{font-weight:800;display:block}
.next span{font-size:14.5px;color:var(--muted)}
ul:not(.next){padding-left:1.2em;max-width:40em}
.foot{margin-top:64px;padding:24px 0 40px;border-top:2px solid var(--ink);font-size:15px;color:var(--muted)}
.foot nav{display:flex;flex-wrap:wrap;gap:4px 22px}
.foot nav a{color:var(--muted)}
.cookie{position:fixed;left:12px;right:12px;bottom:12px;max-width:560px;display:flex;gap:14px;align-items:center;background:var(--ink);color:#fff;padding:12px 14px 12px 18px;font-size:14.5px;border-radius:6px;z-index:5}
.cookie[hidden]{display:none}
.cookie p{margin:0}.cookie a{color:inherit}
.cookie button{flex:none;font:700 15px/1 var(--font);min-height:40px;padding:0 16px;border:0;border-radius:4px;background:#fff;color:var(--ink);cursor:pointer}
@media(max-width:900px){
.fit{grid-template-columns:minmax(0,1fr)}
.fit-pic{position:static;order:2}
}
@media(max-width:640px){
body{font-size:16.5px}
.head{display:block;padding:14px 0}
.nav{margin-top:8px}
.scroll{padding:2px 10px}
table{font-size:15px}
td,tbody th,thead th{padding-right:10px}
.controls{gap:14px}
.m-hide{display:none}
}