@font-face {
font-family: 'Fira Sans Condensed';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/fira-sans-condensed-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: 'Fira Sans Condensed';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/fira-sans-condensed-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: 'Fira Sans Condensed';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/fonts/fira-sans-condensed-500-normal-cyrillic.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Fira Sans Condensed';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/fonts/fira-sans-condensed-500-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: 'Fira Sans Condensed';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/fonts/fira-sans-condensed-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: 'Fira Sans Condensed';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/fonts/fira-sans-condensed-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;
}
/* Цены на бензин. Идея: ценовая стела АЗС — самый узнаваемый предмет темы.
Графитовая панель, таблички марок и красные семисегментные цифры с бледными погасшими сегментами.
Вокруг — белая страница и узкий «дорожный» Fira Sans Condensed: много чисел в строке, ничего лишнего. */
:root{
--paper:#fff; --ground:#eef0f2; --ink:#1e2227; --muted:#59616b; --line:#dde1e5;
--stela:#23272c; --stela-2:#2e333a; --led:#ff4b33; --led-off:#363b42;
--up:#b3261e; --down:#1b7a43; --up-on-dark:#ff9a8c; --down-on-dark:#74e3a3;
--wrap:1200px; --pad:clamp(16px,4vw,48px);
--font:"Fira Sans Condensed","Arial Narrow",-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 18px/1.55 var(--font);font-variant-numeric:tabular-nums lining-nums}
a{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(30,34,39,.35);text-decoration-thickness:1.5px;text-underline-offset:3px}
a:hover{text-decoration-color:var(--ink)}
:focus-visible{outline:3px solid var(--ink);outline-offset:2px;box-shadow:0 0 0 6px #fff}
.skip{position:absolute;left:-9999px;top:8px;background:var(--ink);color:#fff;padding:8px 12px;z-index:9}.skip:focus{left:8px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Шапка */
.head{border-bottom:1px solid var(--line)}
.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:14px 0}
.brand{display:inline-flex;align-items:center;gap:12px;font-weight:600;font-size:21px;text-decoration:none;letter-spacing:-.005em}
.brand-led{display:inline-flex;align-items:center;justify-content:center;width:44px;height:32px;background:var(--stela);border-radius:4px}
.brand-led .seg{height:16px;width:auto}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px}
.nav a{font-size:16.5px;text-decoration:none;padding:4px 0;border-bottom:2px solid transparent}
.nav a:hover{border-color:var(--line)}
.nav a[aria-current]{border-color:var(--led)}
.nav-grade{font-weight:500}
/* Семисегментные цифры */
.seg{display:block;height:clamp(38px,4.4vw,52px);width:auto;overflow:visible}
.seg .on{fill:var(--led)}
.seg .off{fill:var(--led-off)}
@media(prefers-reduced-motion:no-preference){
.stela .seg .on{animation:power .7s steps(1) both;animation-delay:calc(var(--i,0) * 70ms)}
}
@keyframes power{0%{fill:var(--led-off)}40%{fill:var(--led)}55%{fill:var(--led-off)}70%{fill:var(--led)}}
/* Стела */
.stela{margin:0;background:var(--stela);color:#f3f4f5;border-radius:6px;padding:20px 22px 16px;box-shadow:inset 0 0 0 1px #3b4047}
.st-head{font-weight:600;font-size:19px;line-height:1.2;margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid #3b4047}
.st-rows{margin:0}
.st-row{display:grid;grid-template-columns:minmax(104px,auto) 1fr;align-items:center;gap:16px;padding:10px 0;border-bottom:1px solid #31363d}
.st-row:last-child{border-bottom:0}
.st-row dt{margin:0}
.st-row dd{margin:0;display:grid;grid-template-columns:auto 4.6em;align-items:center;justify-content:end;gap:12px}
.st-row dd:not(:has(.dl)){grid-template-columns:auto!important}
.st-name{font-size:16px;font-weight:500;line-height:1.2}
.st-name small{display:block;font-size:14px;font-weight:400;color:#b9bec5}
.st-foot{margin:10px 0 0;font-size:14px;color:#b9bec5}
.plate{display:inline-block;min-width:76px;text-align:center;font-weight:600;font-size:17px;line-height:1;padding:9px 10px 8px;background:#fff;color:var(--stela);border-radius:3px;white-space:nowrap}
.plate-s{min-width:64px;font-size:15px;padding:6px 8px 5px;box-shadow:inset 0 0 0 1.5px var(--ink)}
.stela .dl{font-size:15px;min-width:4.4em;text-align:right}
.stela .dl-up{color:var(--up-on-dark)}.stela .dl-down{color:var(--down-on-dark)}.stela .dl-zero{color:#b9bec5}
/* Изменения: знак, стрелка и цвет */
.dl{white-space:nowrap;font-weight:500}
.dl::before{display:inline-block;font-size:.72em;margin-right:4px;transform:translateY(-.08em)}
.dl-up{color:var(--up)}.dl-up::before{content:"▲"}
.dl-down{color:var(--down)}.dl-down::before{content:"▼"}
.dl-zero{color:var(--muted)}
/* Первый экран */
main{padding-bottom:16px}
main:focus{outline:0}
.crumbs{font-size:15px;color:var(--muted);padding-top:16px}
.crumbs a{color:var(--muted)}
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,450px);gap:24px clamp(28px,5vw,72px);align-items:start;padding:clamp(18px,3vw,36px) 0 clamp(26px,4vw,44px);border-bottom:1px solid var(--line);margin-bottom:8px}
h1{font-weight:600;font-size:clamp(34px,4.8vw,56px);line-height:1.04;letter-spacing:-.02em;margin:0 0 .45em;text-wrap:balance}
main>h1{margin-top:.5em}
h2{font-weight:600;font-size:clamp(25px,2.8vw,32px);line-height:1.15;letter-spacing:-.01em;margin:1.9em 0 .55em;text-wrap:balance}
p{margin:0 0 1em;max-width:40em;text-wrap:pretty}
.lead{font-size:clamp(18px,1.8vw,21px);line-height:1.5}
.lead strong{font-weight:600;white-space:nowrap}
.rank{font-size:17px;color:var(--muted)}
.rank b{color:var(--ink);font-weight:600}
.src{font-size:15.5px;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0}
.chips a{display:inline-block;padding:6px 12px;font-size:15.5px;text-decoration:none;border:1.5px solid var(--line);border-radius:3px;background:#fff}
.chips a:hover{border-color:var(--ink)}
.chips .chip-all{background:var(--ground);border-color:var(--ground)}
/* Таблицы */
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 1.4em}
table{border-collapse:collapse;width:100%;font-size:17px}
thead th{font-size:14.5px;font-weight:500;color:var(--muted);text-align:left;padding:8px 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;white-space:nowrap}
tbody th{font-weight:500}
tbody th a{text-decoration-color:transparent}
tbody tr:hover th a{text-decoration-color:var(--ink)}
tbody tr:hover td,tbody tr:hover th{background:var(--ground)}
.num,th.num{text-align:right}
td:last-child,th:last-child{padding-right:0}
.strong{font-weight:600}
.na{color:var(--muted);font-size:14.5px}
.m-only{display:none}
.prices{max-width:980px}
.finder{display:flex;align-items:center;gap:12px;margin:.4em 0 .8em;max-width:480px}
.finder label{font-weight:500;white-space:nowrap}
.finder input{flex:1;min-width:0;font:inherit;font-size:17px;padding:9px 12px;min-height:46px;border:1.5px solid #9aa1a9;border-radius:3px;background:#fff;color:var(--ink)}
.finder input:hover{border-color:var(--ink)}
.empty{padding:12px 16px;background:var(--ground);border-left:4px solid var(--led)}
/* Точка на шкале цен */
.ranking .rk{color:var(--muted);width:3em}
.track-col{width:34%;min-width:140px}
.track{position:relative;display:block;height:16px}
.track::before{content:"";position:absolute;left:0;right:0;top:7px;height:2px;background:var(--line)}
.track::after{content:"";position:absolute;left:var(--m);top:0;bottom:0;border-left:1.5px dashed #9aa1a9}
.track i{position:absolute;top:3px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 2px #fff}
tbody tr:hover .track i{background:var(--led)}
.duel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,520px),1fr));gap:0 48px}
.duel h2,.hist h2{margin-top:1.4em}
.duel h2 .plate,.hist h2 .plate{font-size:22px;min-width:100px;padding:10px 14px 9px;box-shadow:inset 0 0 0 2px var(--ink)}
.more{font-size:16px}
/* График */
.chart-wrap{margin:0 0 1.2em}
.chart{width:100%;height:auto;display:block;max-width:820px}
.chart .grid{stroke:var(--line);stroke-width:1}
.chart .tick{fill:var(--muted);font:400 12px var(--font)}
.chart .line{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linejoin:round}
.chart .dot{fill:var(--led);stroke:#fff;stroke-width:2}
.chart-wrap figcaption{font-size:14.5px;color:var(--muted)}
ul{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)}
.foot-src{margin-bottom:10px}
.cookie{position:fixed;left:12px;right:12px;bottom:12px;max-width:560px;display:flex;gap:14px;align-items:center;background:var(--stela);color:#f3f4f5;padding:12px 14px 12px 18px;font-size:15px;border-radius:6px;z-index:5}
.cookie[hidden]{display:none}
.cookie p{margin:0}.cookie a{color:inherit}
.cookie button{flex:none;font:500 15px/1 var(--font);min-height:40px;padding:0 16px;border:0;border-radius:3px;background:#fff;color:var(--stela);cursor:pointer}
.hero-404 .stela{padding-top:18px}
@media(max-width:860px){
.hero{grid-template-columns:minmax(0,1fr)}
.stela{max-width:520px}
}
@media(max-width:640px){
body{font-size:17px}
.head-in{display:block;padding-bottom:0}
.nav{flex-wrap:nowrap;overflow-x:auto;gap:16px;margin:10px calc(var(--pad) * -1) 0;padding:0 var(--pad);border-top:1px solid var(--line);scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{white-space:nowrap;padding:10px 0}
.stela{margin:0 calc(var(--pad) * -1);border-radius:0;padding:12px var(--pad) 10px}
.st-head{font-size:16px;margin-bottom:4px;padding-bottom:8px}
.st-row{grid-template-columns:auto 1fr;gap:8px;padding:6px 0}
.st-row dd{grid-template-columns:auto 3.9em;gap:8px}
.stela .dl{font-size:13px;min-width:0}
.plate{min-width:58px;font-size:14px;padding:6px 6px 5px}
.st-name{font-size:14px}.st-name small{font-size:12.5px}
.seg{height:clamp(28px,8.6vw,34px)}
.st-foot{font-size:12.5px;margin-top:6px}
table{font-size:15.5px}
td,tbody th{padding-right:10px}
thead th{padding-right:10px;white-space:normal}
.m-hide{display:none}
.m-only{display:block;font-size:13px}
.prices tbody th{white-space:normal;min-width:110px}
.track-col{min-width:70px;width:28%}
.ranking .rk{width:2em}
.hero .chips{flex-wrap:nowrap;overflow-x:auto;margin-left:calc(var(--pad) * -1);margin-right:calc(var(--pad) * -1);padding:0 var(--pad) 4px;scrollbar-width:none}
.hero .chips a{white-space:nowrap}
.m-only .dl{font-weight:500}
.chart .tick{font-size:20px}
.finder{display:block}.finder label{display:block;margin-bottom:6px}
}