@font-face {
font-family: 'Exo 2';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/exo-2-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: 'Exo 2';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/exo-2-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: 'Exo 2';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/fonts/exo-2-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: 'Exo 2';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/fonts/exo-2-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: 'Russo One';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/russo-one-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: 'Russo One';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/russo-one-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;
}
/* Вес арматуры. Идея: стройплощадка — бетонная страница, стальная бирка с пачки арматуры и торец прутка в натуральную величину.
Выбор диаметра — сами торцы прутков, от тонкого к толстому. Russo One — как штамп на бирке, Exo 2 — текст. */
:root{
--concrete:#e7e6e1; --paper:#f4f3ef; --ink:#1f2328; --muted:#585f67; --line:#cfcdc5;
--steel:#2b3036; --tag:#c3c8cd; --tag-dark:#8f969d; --rust:#8f4a22; --rust-2:#b5622d;
--wrap:1200px; --pad:clamp(16px,4vw,48px);
--stamp:"Russo One",Impact,sans-serif; --text:"Exo 2",-apple-system,"Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);font:400 17.5px/1.6 var(--text);font-variant-numeric:tabular-nums lining-nums;
background:var(--concrete) radial-gradient(circle at 20% 30%,rgba(0,0,0,.035) 0 1px,transparent 1.5px) 0 0/7px 7px}
a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--rust-2);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{color:var(--rust)}
:focus-visible{outline:3px solid var(--rust-2);outline-offset:2px}
.skip{position:absolute;left:-9999px;top:8px;background:#fff;color:var(--ink);padding:8px 12px;z-index:9}.skip:focus{left:8px}
.head{background:var(--steel);color:#fff}
.head-in,main,.foot{width:min(100% - 2 * var(--pad),var(--wrap));margin-left:auto;margin-right:auto}
.head-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 28px;padding:16px 0}
.brand{display:inline-flex;align-items:center;gap:12px;color:#fff;text-decoration:none;font:400 19px var(--stamp);letter-spacing:.01em}
.brand-bar{width:22px;height:22px;border-radius:50%;background:var(--rust);box-shadow:-9px 0 0 -6px var(--rust),9px 0 0 -6px var(--rust)}
.nav{display:flex;flex-wrap:wrap;gap:4px 22px}
.nav a{color:#d9dde1;text-decoration:none;font-size:16px;padding:4px 0;border-bottom:2px solid transparent}
.nav a:hover{color:#fff;border-color:rgba(255,255,255,.35)}
.nav a[aria-current]{color:#fff;border-color:var(--rust-2)}
main{padding-bottom:16px}
main:focus{outline:0}
.crumbs{font-size:14.5px;color:var(--muted);padding-top:16px}
.crumbs a{color:var(--muted);text-decoration-color:var(--line)}
h1{font:400 clamp(32px,4.4vw,52px)/1.05 var(--stamp);letter-spacing:-.01em;margin:.5em 0 .4em;text-wrap:balance}
h2{font:400 clamp(22px,2.4vw,28px)/1.2 var(--stamp);margin:1.9em 0 .55em}
p{margin:0 0 1em;max-width:40em;text-wrap:pretty}
.lead{font-size:clamp(17.5px,1.6vw,19.5px);line-height:1.55}
.src{font-size:15px;color:var(--muted)}
/* Первый экран */
.hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:28px clamp(28px,5vw,64px);align-items:start;padding-bottom:clamp(24px,3vw,40px);border-bottom:2px solid var(--line)}
.picker{border:0;margin:20px 0 6px;padding:0;display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 8px}
.picker legend{font-size:14px;font-weight:600;color:var(--muted);margin-bottom:10px;padding:0}
.picker label{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;min-width:30px}
.picker input{position:absolute;opacity:0;inset:0}
.pc{display:block;width:calc(var(--d) * 1.3px + 8px);height:calc(var(--d) * 1.3px + 8px);border-radius:50%;background:var(--rust);box-shadow:inset 0 0 0 1px rgba(0,0,0,.25),inset -4px -4px 0 rgba(0,0,0,.14);transition:transform .15s}
.pl{font-size:13.5px;color:var(--muted)}
.pl::before{content:attr(data-l)}
.picker label:hover .pc{transform:scale(1.08)}
.picker input:checked~.pc{background:var(--ink);box-shadow:0 0 0 3px var(--concrete),0 0 0 5px var(--rust-2)}
.picker input:checked~.pl{color:var(--ink);font-weight:600}
.picker input:focus-visible~.pc{outline:3px solid var(--rust-2);outline-offset:4px}
.row{display:flex;flex-wrap:wrap;gap:14px 18px;margin-top:16px}
.ctl label,.tool label{display:block;font-size:14px;font-weight:600;color:var(--muted);margin-bottom:6px}
select,input[type=number]{font:600 19px var(--text);padding:10px 12px;min-height:52px;border:2px solid var(--ink);border-radius:0;background:#fff;color:var(--ink)}
input[type=number]{width:11ch}
select:focus-visible,input:focus-visible{outline:3px solid var(--rust-2);outline-offset:1px}
/* Бирка */
.hero-r{margin:0;display:grid;gap:22px;justify-items:start}
.tag{position:relative;width:100%;max-width:420px;padding:26px 26px 22px 64px;border-radius:6px 22px 22px 6px;
background:linear-gradient(135deg,#d7dbdf 0%,var(--tag) 45%,#aeb4ba 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -2px 0 rgba(0,0,0,.12),0 8px 22px -12px rgba(0,0,0,.5);color:#1b1f23}
.tag-hole{position:absolute;left:22px;top:50%;width:20px;height:20px;margin-top:-10px;border-radius:50%;background:var(--concrete);box-shadow:inset 0 2px 3px rgba(0,0,0,.35)}
.tag::before{content:"";position:absolute;left:-36px;top:50%;width:58px;height:2px;background:#6f767d;transform:rotate(-8deg)}
.tag p{margin:0;max-width:none}
.tag-d{font:400 22px var(--stamp);letter-spacing:.04em}
.tag-m{font-size:16px;color:#3a4047;margin-top:2px}
.tag-total,.result{font:400 clamp(40px,5vw,60px)/1.05 var(--stamp);letter-spacing:-.01em;margin:10px 0 2px;color:#121417}
.tag-note{font-size:13.5px;color:#454b52}
.real{margin:0}
.real figcaption,.real-big figcaption{font-size:14px;color:var(--muted);margin-top:8px;max-width:28em}
.end{display:block;overflow:visible}
.end .core{fill:var(--rust)}
.end .rib{fill:var(--rust)}
.end .ring{fill:none;stroke:var(--rust);stroke-opacity:.35;stroke-dasharray:.6 .6;stroke-width:.25}
.real-big{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:220px;padding:20px;background:var(--paper);border:2px solid var(--line)}
.hero-d .tag{margin-top:10px}
.steps{display:flex;gap:8px;margin-top:16px}
.steps a{display:inline-block;padding:8px 14px;border:2px solid var(--ink);text-decoration:none;font-weight:600}
.steps a:hover{background:var(--ink);color:#fff}
.tool{background:var(--paper);border:2px solid var(--ink);padding:18px;margin:0 0 1.6em;max-width:640px}
.tool .grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.tool select,.tool input{width:100%}
/* Таблицы */
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 1.4em;background:var(--paper);border:2px solid var(--line);padding:4px 16px}
table{border-collapse:collapse;width:100%;font-size:16.5px}
table.narrow{max-width:560px}
thead th{font-size:13.5px;font-weight:600;color:var(--muted);text-align:left;padding:10px 16px 8px 0;border-bottom:2px solid var(--ink);vertical-align:bottom}
td,tbody th{padding:8px 16px 8px 0;border-bottom:1px solid var(--line);text-align:left}
tbody tr:last-child td,tbody tr:last-child th{border-bottom:0}
tbody th{font-weight:600;white-space:nowrap}
.num,th.num{text-align:right;white-space:nowrap}
td:last-child,th:last-child{padding-right:0}
.strong{font-weight:700}
tr.hl th,tr.hl td{background:#efe2d6}
tbody tr:hover th,tbody tr:hover td{background:var(--concrete)}
.dot{display:inline-block;width:calc(var(--d) * .7px + 4px);height:calc(var(--d) * .7px + 4px);border-radius:50%;background:var(--rust);margin-right:10px;vertical-align:middle}
.next{list-style:none;padding:0;margin:1.4em 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.next li{background:var(--paper);border:2px solid var(--line);padding:14px 16px}
.next a{font:400 18px var(--stamp);display:block;text-decoration:none}
.next a:hover{color:var(--rust)}
.next span{font-size:14.5px;color:var(--muted)}
.chips{list-style:none;padding:0;margin:0 0 1em;display:flex;flex-wrap:wrap;gap:8px}
.chips a{display:inline-block;padding:6px 12px;border:2px solid var(--line);background:var(--paper);text-decoration:none;font-weight:600}
.chips a:hover{border-color:var(--ink)}
ul.links{padding-left:1.2em}
.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);text-decoration-color:var(--line)}
.cookie{position:fixed;left:12px;right:12px;bottom:12px;max-width:560px;display:flex;gap:14px;align-items:center;background:var(--steel);color:#fff;padding:12px 14px 12px 18px;font-size:14.5px;z-index:5;border-left:6px solid var(--rust-2)}
.cookie[hidden]{display:none}
.cookie p{margin:0}.cookie a{color:inherit}
.cookie button{flex:none;font:600 15px/1 var(--text);min-height:40px;padding:0 16px;border:0;background:#fff;color:var(--ink);cursor:pointer}
@media(max-width:900px){.hero{grid-template-columns:minmax(0,1fr)}}
@media(max-width:640px){
body{font-size:16.5px}
.head-in{display:block}
.nav{margin-top:8px}
.pc{width:calc(var(--d) * 1.1px + 8px);height:calc(var(--d) * 1.1px + 8px)}
.picker{gap:10px 6px}
.tag{padding-left:56px}
.m-hide{display:none}
.scroll{padding:2px 10px}
table{font-size:15px}
td,tbody th,thead th{padding-right:10px}
}