/* «Веер меди» — оформление. Тема управляется атрибутом data-theme на (ставит theme-boot.js): с 20:00 до 07:00 тёмная принудительно, иначе — выбранная, а если выбора не было — системная. Про цвет. Медь на светлом фоне ведёт себя как золото: чтобы текстовый контраст дотянул до 4,5, краску приходится затемнять, и она уходит в кирпич. Поэтому меди здесь ДВЕ. --cu — материал: линии, полосы графиков, свечение; ему достаточно 3:1. --cu-ink — краска для текста, темнее и глубже. Полосы строятся от --band (тот же оттенок, что --cu), а не от текстовой краски: смешение этих двух ролей и даёт грязь. Второй акцент — патина (--pos): позеленевшая медь, ей отданы «низ раньше» и положительные величины. */ :root { color-scheme: dark; --void: #0a0705; --surface: #16100b; --surface-2: #1c150f; --surface-tip: #191209; --cu: #e08a55; --cu-ink: #ef9f6e; --cu-hot: #ffc59d; --chip-ink: #14100c; --chip-bg: #e08a55; --band: 224, 138, 85; --patina: 108, 192, 164; --ink: #f4ece3; --ink-2: #c0af9d; --muted: #94836f; --hist-rgb: 192, 175, 157; --edge: rgba(224, 138, 85, .17); --edge-soft: rgba(224, 138, 85, .09); --neg: #e6907a; --pos: #6cc0a4; --warn: #e5b25a; --glow-text: 0 0 16px rgba(224, 138, 85, .24); --glow-rule: 0 0 12px rgba(224, 138, 85, .45); --glow-dot: 0 0 10px rgba(224, 138, 85, .85); --median-shadow: drop-shadow(0 0 5px rgba(224, 138, 85, .65)); --dot-shadow: drop-shadow(0 0 7px rgba(224, 138, 85, .9)); } html[data-theme="light"] { color-scheme: light; --void: #f3efe9; --surface: #ffffff; --surface-2: #fbf8f4; --surface-tip: #ffffff; --cu: #b4642c; --cu-ink: #8c4718; --cu-hot: #a0521c; --chip-ink: #ffffff; /* Плашка медианы на графике: белым по светлой меди контраст падал до 4,38. Подложка плашки в светлой теме темнее материала — 8,4:1. */ --chip-bg: #8c4718; --band: 180, 100, 44; --patina: 26, 100, 80; --ink: #1c1410; --ink-2: #53483e; --muted: #6e6154; --hist-rgb: 83, 72, 62; --edge: rgba(28, 20, 16, .14); --edge-soft: rgba(28, 20, 16, .07); --neg: #9c3b2c; --pos: #1a6450; --warn: #8a5c07; /* Свечение на белом читается как грязное пятно. Вместо него — мягкая тень: та же роль «объекта над поверхностью», но чистыми средствами. */ --glow-text: none; --glow-rule: none; --glow-dot: 0 1px 3px rgba(28, 20, 16, .28); --median-shadow: drop-shadow(0 1px 1.5px rgba(28, 20, 16, .22)); --dot-shadow: drop-shadow(0 1px 2px rgba(28, 20, 16, .3)); } * { box-sizing: border-box; } html { background: var(--void); scroll-behavior: smooth; } body { margin: 0; min-width: 320px; background: var(--void); color: var(--ink); font-family: Onest, "Segoe UI", system-ui, sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; position: relative; isolation: isolate; } /* Фон тёмной темы: два тёплых пятна и вертикальный градиент. */ body::before { content: ""; position: fixed; z-index: -3; inset: 0; pointer-events: none; background: radial-gradient(circle at 80% 1%, rgba(224, 138, 85, .11), transparent 36%), radial-gradient(circle at 3% 46%, rgba(108, 192, 164, .05), transparent 28%), linear-gradient(180deg, #0a0705 0%, #120c08 55%, #0a0705 100%); } /* В светлой теме фон — бумага. Никаких пятен и сеток: они и превращают светлую тему в мутную. */ html[data-theme="light"] body::before { background: linear-gradient(180deg, #f6f2ec 0%, #f3efe9 46%, #efebe4 100%); } /* Сетка в перспективе — только в тёмной теме, где она даёт глубину. */ body::after { content: ""; position: fixed; z-index: -2; left: -30%; right: -30%; top: 48vh; height: 60vh; pointer-events: none; opacity: .13; transform: perspective(430px) rotateX(64deg); transform-origin: center top; background-image: linear-gradient(rgba(224, 138, 85, .26) 1px, transparent 1px), linear-gradient(90deg, rgba(224, 138, 85, .26) 1px, transparent 1px); background-size: 76px 54px; mask-image: linear-gradient(to bottom, transparent, black 14%, black 60%, transparent 100%); } html[data-theme="light"] body::after { display: none; } .wrap { max-width: 1220px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 34px) 96px; } h1, h2, h3 { margin: 0; text-wrap: balance; } h1 { font-size: clamp(2.1rem, 5.4vw, 3.3rem); font-weight: 300; letter-spacing: -.045em; line-height: 1.04; } h1 b { font-weight: 500; color: var(--cu-ink); text-shadow: var(--glow-text); } h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 300; letter-spacing: -.035em; } h3 { font-size: .98rem; font-weight: 600; letter-spacing: -.01em; } p { margin: 0; } .mono, .n, .kick, .eyebrow, thead th, .chip { font-family: "JetBrains Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; } /* ---------------------------------------------------------------- шапка */ .topbar { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--edge); position: relative; } .topbar::after { content: ""; position: absolute; bottom: -1px; left: 0; width: 148px; height: 2px; background: var(--cu); box-shadow: var(--glow-rule); } .brand { display: flex; align-items: baseline; gap: 13px; min-width: 0; } .brand-word { font-family: "JetBrains Mono", monospace; font-size: clamp(13px, 2.2vw, 18px); letter-spacing: .26em; font-weight: 500; text-transform: uppercase; text-shadow: var(--glow-text); white-space: nowrap; } .brand-caption { padding-left: 12px; border-left: 1px solid var(--edge); color: var(--muted); font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: .17em; line-height: 1.35; white-space: nowrap; } .topbar-meta { display: flex; align-items: center; gap: clamp(10px, 2vw, 22px); color: var(--muted); font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .12em; } /* Точка состояния. Пока данные не получены — серая и неподвижная: молчание честнее зелёного, которое нечем подтвердить. Медным цветом она не горит никогда, иначе цвет оформления читался бы как цвет состояния. */ .live-dot { display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--muted); } .live-dot.ok { background: var(--pos); box-shadow: 0 0 9px color-mix(in srgb, var(--pos) 75%, transparent); animation: live 2.4s ease-in-out infinite; } .live-dot.stale { background: var(--warn); box-shadow: 0 0 9px color-mix(in srgb, var(--warn) 75%, transparent); animation: live 1.1s ease-in-out infinite; } .live-dot.down { background: var(--neg); box-shadow: 0 0 9px color-mix(in srgb, var(--neg) 75%, transparent); animation: live 1.1s ease-in-out infinite; } @keyframes live { 0%, 100% { opacity: 1 } 50% { opacity: .38 } } .theme-toggle { min-height: 32px; padding: 0 11px; display: inline-flex; align-items: center; gap: 9px; color: var(--muted); background: var(--surface); border: 1px solid var(--edge); font: 500 9px/1 "JetBrains Mono", monospace; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: color .2s, border-color .2s; } .theme-toggle:hover, .theme-toggle:focus-visible { color: var(--cu-ink); border-color: color-mix(in srgb, var(--cu) 55%, transparent); outline: none; } .theme-toggle-track { width: 30px; height: 14px; padding: 2px; border: 1px solid var(--edge); display: block; flex: none; } .theme-toggle-track i { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--cu); box-shadow: var(--glow-dot); transition: transform .3s cubic-bezier(.2, .8, .2, 1); } html[data-theme="light"] .theme-toggle-track i { transform: translateX(16px); } .theme-toggle[data-locked="1"] { border-style: dashed; } /* ---------------------------------------------------------------- баннер */ .banner { margin-top: 20px; padding: 14px 18px; border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); border-left: 2px solid var(--warn); background: color-mix(in srgb, var(--warn) 7%, var(--surface)); font-size: .92rem; color: var(--ink-2); } .banner b { color: var(--warn); } /* ---------------------------------------------------------------- герой */ header.pg { padding: 60px 0 34px; display: flex; flex-direction: column; gap: 20px; } .eyebrow { font-size: 9px; letter-spacing: .19em; text-transform: uppercase; color: var(--cu-ink); } .lede { font-size: 1.06rem; color: var(--ink-2); } /* -------------------------------------------------------------- плитки */ .state { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 10px; margin-top: 30px; } .cell { position: relative; padding: 16px 16px 15px; background: var(--surface); border: 1px solid var(--edge-soft); display: flex; flex-direction: column; gap: 4px; clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 11px 100%, 0 calc(100% - 11px)); transition: border-color .3s; } .cell::before { content: ""; position: absolute; left: 0; top: 0; height: 1px; width: 44%; background: linear-gradient(90deg, var(--cu), transparent); opacity: .75; } .cell:hover { border-color: color-mix(in srgb, var(--cu) 42%, transparent); } .cell .v { font-family: "JetBrains Mono", monospace; font-size: 1.42rem; line-height: 1.15; font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .cell .v.big { color: var(--cu-ink); text-shadow: var(--glow-text); } .cell .l { font-size: .75rem; color: var(--muted); line-height: 1.35; } /* Полоса дат приземления: семь горизонтов движка одной строкой. */ .horizons { margin-top: 12px; display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 1px; background: var(--edge-soft); border: 1px solid var(--edge-soft); } .horizons .hz { background: var(--surface); padding: 11px 12px; display: flex; flex-direction: column; gap: 3px; } .horizons .hz b { font: 500 10px/1 "JetBrains Mono", monospace; letter-spacing: .12em; color: var(--cu-ink); text-transform: uppercase; } .horizons .hz span { font-family: "JetBrains Mono", monospace; font-variant-numeric: tabular-nums; font-size: .8rem; color: var(--ink-2); } .horizons .hz.dim b { color: var(--muted); } /* ------------------------------------------------------------- секции */ section { padding-top: 76px; display: flex; flex-direction: column; gap: 18px; } .shead { position: relative; padding-top: 18px; display: flex; flex-direction: column; gap: 9px; } .shead::before { content: ""; position: absolute; top: 0; left: 0; width: 56px; height: 2px; background: var(--cu); box-shadow: var(--glow-rule); } .kick { font-size: 9px; letter-spacing: .19em; text-transform: uppercase; color: var(--muted); } .note { font-size: .95rem; color: var(--ink-2); } .note.sm { font-size: .85rem; margin-top: 12px; } .note b, .lede b { color: var(--ink); font-weight: 600; } .sub-h { font: 500 10px/1 "JetBrains Mono", monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 6px; } /* -------------------------------------------------------------- панели */ .card { position: relative; background: var(--surface); border: 1px solid var(--edge-soft); padding: 22px; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); } .card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--cu), transparent 58%); opacity: .7; } /* -------------------------------------------------------------- график */ .chart { position: relative; width: 100%; overflow-x: auto; overflow-y: hidden; } svg { display: block; width: 100%; height: auto; min-width: 660px; } #fan { min-width: 720px; } /* Градиенты полос: цвет приходит из CSS, прозрачность — из атрибутов в разметке. Это принципиально: тема переключается без перерисовки графика, а значит цвет не имеет права жить в атрибутах SVG. */ svg .gs { stop-color: var(--cu); } svg .gh { stop-color: rgb(var(--hist-rgb)); } svg .grid { stroke: var(--edge-soft); stroke-width: 1; } svg .base { stroke: var(--edge); stroke-width: 1; } svg .spotline { stroke: rgba(var(--band), .34); stroke-width: 1; stroke-dasharray: 1 5; stroke-linecap: round; } svg .today { stroke: rgba(var(--band), .5); stroke-width: 1; stroke-dasharray: 3 4; } svg .vrule { stroke: rgba(var(--band), .28); stroke-width: 1; stroke-dasharray: 2 6; } svg .axlbl { fill: var(--muted); font: 11.5px "JetBrains Mono", monospace; } svg .axlbl.strong { fill: var(--ink-2); } svg .mark { fill: var(--muted); font: 400 11.5px "JetBrains Mono", monospace; } svg .chip-bg { fill: var(--chip-bg); } svg .chip-tx { fill: var(--chip-ink); font: 500 12px "JetBrains Mono", monospace; } svg .histfill { stroke: none; } svg .hist { fill: none; stroke: rgb(var(--hist-rgb)); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; } svg .median { fill: none; stroke: var(--cu); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; filter: var(--median-shadow); } svg .dot { fill: var(--cu); filter: var(--dot-shadow); } svg .dot-ring { fill: none; stroke: rgba(var(--band), .45); stroke-width: 1; } /* Узлы веера — горизонты, на которых движок реально считал; между ними кривая интерполирована по √h, и это должно быть видно глазом. */ svg .knot { fill: var(--surface); stroke: var(--cu); stroke-width: 1.4; } /* Тилт — отдельная точка, не полоса: в основной веер он не заложен. */ svg .tilt-mark { fill: none; stroke: var(--cu-hot); stroke-width: 1.6; } svg .tilt-link { stroke: var(--cu-hot); stroke-width: 1; stroke-dasharray: 2 3; opacity: .8; } svg .b90, svg .b90c { stroke: none; } svg .b80, svg .b80c { stroke: none; } svg .b50, svg .b50c { stroke: none; } svg .edge { fill: none; stroke: rgba(var(--band), .34); stroke-width: 1; } /* Проявление при загрузке: полосы растворяются из ничего, медиана прочерчивается. Ровно один раз и только если пользователь не просил покоя. */ svg .fade-in { animation: fadeIn .55s ease both; } svg .fade-in.d1 { animation-delay: .04s; } svg .fade-in.d2 { animation-delay: .11s; } svg .fade-in.d3 { animation-delay: .18s; } svg .median { animation: drawIn .9s cubic-bezier(.4, 0, .2, 1) both; } @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } } @keyframes drawIn { from { stroke-dasharray: 1; stroke-dashoffset: 1 } to { stroke-dasharray: 1; stroke-dashoffset: 0 } } @media (prefers-reduced-motion: reduce) { .live-dot { animation: none } svg .fade-in, svg .median { animation: none } } /* Слой наведения */ svg .hit { fill: transparent; cursor: crosshair; } svg .hover-line { stroke: var(--cu); stroke-width: 1; opacity: .55; } svg .hover-dot { fill: var(--surface); stroke: var(--cu); stroke-width: 1.5; } svg .hover-dot.mid { fill: var(--cu); filter: var(--dot-shadow); } .tip { position: absolute; z-index: 6; pointer-events: none; left: 0; top: 0; min-width: 186px; padding: 12px 14px; background: var(--surface-tip); border: 1px solid color-mix(in srgb, var(--cu) 40%, transparent); clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px)); font-family: "JetBrains Mono", monospace; font-size: 11.5px; line-height: 1.6; color: var(--ink-2); opacity: 0; transition: opacity .12s ease; } .tip.on { opacity: 1; } .tip .tip-head { color: var(--cu-ink); font-size: 9px; letter-spacing: .15em; text-transform: uppercase; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--edge-soft); } .tip .row { display: flex; justify-content: space-between; gap: 18px; } .tip .row.mid { color: var(--ink); font-weight: 500; } .tip .row span:first-child { color: var(--muted); } .tip .row.mid span:first-child { color: var(--cu-ink); } .legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; color: var(--muted); font-family: "JetBrains Mono", monospace; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; } .sw { display: inline-block; width: 20px; height: 8px; margin-right: 7px; vertical-align: middle; } .sw-b90, .sw-b90c { background: rgba(var(--band), .10); border: 1px solid rgba(var(--band), .32); } .sw-b80, .sw-b80c { background: rgba(var(--band), .22); border: 1px solid rgba(var(--band), .32); } .sw-b50, .sw-b50c { background: rgba(var(--band), .38); border: 1px solid rgba(var(--band), .4); } .sw-med { background: var(--cu); height: 2px; } .sw-hist { background: rgb(var(--hist-rgb)); height: 2px; } .sw-knot { width: 8px; height: 8px; border-radius: 50%; background: var(--surface); border: 1.4px solid var(--cu); } .sw-tilt { width: 9px; height: 9px; background: none; border: 1.5px solid var(--cu-hot); transform: rotate(45deg); } .legend-hint { margin-left: auto; } /* -------------------------------------------------------------- таблицы */ .scroll { overflow-x: auto; border: 1px solid var(--edge-soft); background: var(--surface); } .scroll:focus-visible, .chart:focus-visible { outline: 1px solid var(--cu); outline-offset: -2px; } table { width: 100%; border-collapse: collapse; font-size: .87rem; min-width: 660px; } table.narrow { min-width: 440px; } thead th { /* Иерархию держат размер, капитель и трекинг, а не бледность: приглушённый цвет на тёплой подложке шапки не добирал 4,5 в светлой теме. */ text-align: left; padding: 13px 15px; color: var(--ink-2); font: 500 9px/1 "JetBrains Mono", monospace; letter-spacing: .13em; text-transform: uppercase; white-space: nowrap; background: color-mix(in srgb, var(--cu) 5%, transparent); border-bottom: 1px solid var(--edge); } thead th.r, td.n { text-align: right; } tbody td { padding: 13px 15px; border-bottom: 1px solid var(--edge-soft); vertical-align: top; } tbody tr:last-child td { border-bottom: 0; } tbody tr:hover td { background: color-mix(in srgb, var(--cu) 4%, transparent); } td.k { font-weight: 500; white-space: nowrap; } td.k .sub { display: block; margin-top: 4px; font-family: "JetBrains Mono", monospace; font-size: .7rem; color: var(--muted); font-weight: 400; } td.n { font-family: "JetBrains Mono", monospace; font-variant-numeric: tabular-nums; white-space: nowrap; } td.n .sub { display: block; margin-top: 3px; font-size: .7rem; color: var(--muted); } /* Медиана — главное число строки. Выделяем её тёплой подложкой и весом, а не медной краской: краска на светлом фоне обязана быть тёмной, и весь смысл акцента пропадал. */ td.em { color: var(--ink); font-weight: 600; background: color-mix(in srgb, var(--cu) 9%, transparent); } tbody tr:hover td.em { background: color-mix(in srgb, var(--cu) 13%, transparent); } td.dim { color: var(--muted); } td.neg { color: var(--neg); } td.pos { color: var(--pos); } td.warn { color: var(--warn); } tr.sep td { border-top: 1px solid var(--edge); } tr.anchor td { background: color-mix(in srgb, var(--cu) 5%, transparent); } tr.anchor td.em { background: color-mix(in srgb, var(--cu) 13%, transparent); } tr.anchor td.k { font-weight: 400; } tr.anchor td.k::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 8px; background: var(--cu); transform: rotate(45deg); vertical-align: middle; } /* Заливка ячейки долей вероятности: число остаётся числом, а фон подсказывает масштаб. Ширина приходит из JS через --w. */ td.pb { background-image: linear-gradient(90deg, color-mix(in srgb, var(--cu) 20%, transparent) 0 var(--w, 0%), transparent var(--w, 0%)); background-repeat: no-repeat; } td.pb.down { background-image: linear-gradient(90deg, color-mix(in srgb, rgb(var(--patina)) 22%, transparent) 0 var(--w, 0%), transparent var(--w, 0%)); } tbody tr:hover td.pb { background-color: transparent; } /* Стопка «верх / низ / ни один» одной полосой. */ .stack { display: flex; height: 9px; width: 130px; background: var(--edge-soft); } .stack i { display: block; height: 100%; } .stack i.up { background: var(--cu); } .stack i.dn { background: rgb(var(--patina)); } .stack i.ne { background: color-mix(in srgb, var(--muted) 45%, transparent); } /* ------------------------------------------------------------ карточки */ .grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 14px; } .kv { display: flex; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--edge-soft); font-size: .88rem; } .kv:last-child { border-bottom: 0; } .kv .kk { color: var(--muted); flex: 1 1 40%; min-width: 0; } /* Значение переносится, а не выпирает: составные строки вроде «78 648 контрактов · +27,9% открытого интереса» на 375px растягивали страницу на 172 пикселя вправо. */ .kv .vv { font-family: "JetBrains Mono", monospace; font-variant-numeric: tabular-nums; text-align: right; color: var(--ink); flex: 0 1 auto; min-width: 0; max-width: 100%; overflow-wrap: anywhere; } .card > h3 { margin-bottom: 12px; } .chip { display: inline-block; padding: 3px 8px; margin-right: 6px; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--edge); background: color-mix(in srgb, var(--cu) 5%, transparent); } .chip.w { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 50%, transparent); } .chip.z { color: var(--ink-2); } .callout { position: relative; padding: 17px 19px; border: 1px solid var(--edge-soft); border-left: 2px solid var(--warn); background: color-mix(in srgb, var(--warn) 4%, var(--surface)); display: flex; flex-direction: column; gap: 8px; } .callout h3 { color: var(--warn); font-size: .92rem; font-weight: 600; } .callout p { font-size: .89rem; color: var(--ink-2); } .callout.cu { border-left-color: var(--cu); background: color-mix(in srgb, var(--cu) 4%, var(--surface)); } .callout.cu h3 { color: var(--cu-ink); } .callout .quote { padding-left: 12px; border-left: 2px solid var(--edge); font-style: italic; color: var(--ink-2); } /* Счётчик леджера: сколько накоплено из нужного. */ .prog { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; } .prog .pl { display: flex; justify-content: space-between; gap: 12px; font-size: .82rem; color: var(--muted); } .prog .pl b { font-family: "JetBrains Mono", monospace; font-variant-numeric: tabular-nums; color: var(--ink-2); font-weight: 500; } .prog .track { height: 6px; background: var(--edge-soft); } .prog .track i { display: block; height: 100%; background: var(--cu); min-width: 2px; } /* ------------------------------------------------- сворачиваемые блоки */ .fold { background: var(--surface); border: 1px solid var(--edge-soft); clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); } .fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 15px 19px; font: 500 10px/1.4 "JetBrains Mono", monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); transition: color .2s; } .fold > summary::-webkit-details-marker { display: none; } .fold > summary::marker { content: ""; } .fold > summary:hover, .fold > summary:focus-visible { color: var(--cu-ink); outline: none; } .fold > summary:focus-visible { box-shadow: inset 0 0 0 1px var(--cu); } .fold-arrow { width: 8px; height: 8px; flex: none; margin: 0 1px 2px 0; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .25s ease; } .fold[open] .fold-arrow { transform: rotate(45deg) translate(-1px, -1px); } .fold-meta { margin-left: auto; color: var(--muted); text-align: right; } .fold-body { padding: 2px 19px 20px; display: flex; flex-direction: column; gap: 14px; } .fold-lg > summary { font-size: 12px; letter-spacing: .16em; padding: 19px; color: var(--ink); } /* Плавное раскрытие там, где браузер это уже умеет; где нет — просто мгновенно. */ @supports (interpolate-size: allow-keywords) { :root { interpolate-size: allow-keywords; } .fold::details-content { block-size: 0; overflow: clip; transition: block-size .3s ease, content-visibility .3s ease allow-discrete; } .fold[open]::details-content { block-size: auto; } } ul.plain { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; font-size: .91rem; color: var(--ink-2); } ul.plain li { position: relative; padding-left: 20px; } ul.plain li::before { content: ""; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; background: var(--cu); transform: rotate(45deg); } ul.plain b { color: var(--ink); font-weight: 600; } footer.pg { margin-top: 78px; padding-top: 24px; border-top: 1px solid var(--edge); font-size: .78rem; color: var(--muted); line-height: 1.7; display: flex; flex-direction: column; gap: 8px; } .footer-mark { display: flex; gap: 4px; margin-top: 10px; } .footer-mark i { width: 20px; height: 2px; background: var(--cu); box-shadow: var(--glow-rule); } .footer-mark i:nth-child(2) { opacity: .55; } .footer-mark i:nth-child(3) { opacity: .25; } a { color: var(--cu-ink); text-decoration: none; border-bottom: 1px solid transparent; } a:hover { border-color: var(--cu-ink); } a:focus-visible { outline: 1px solid var(--cu); outline-offset: 2px; } @media (max-width: 700px) { .topbar { min-height: 0; padding: 14px 0; flex-wrap: wrap; gap: 10px; } .brand-caption { display: none; } header.pg { padding: 36px 0 26px; } section { padding-top: 52px; } .card { padding: 15px; } .fold > summary { padding: 14px; font-size: 9.5px; } .fold-body { padding: 2px 14px 16px; } .fold-meta { display: none; } .tip { min-width: 150px; font-size: 10.5px; padding: 9px 11px; } .horizons { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); } .stack { width: 96px; } /* На узком экране пара «ключ — значение» встаёт в две строки: значение прижимается влево под ключом, а не жмётся в 40 пикселей справа. */ .kv { flex-direction: column; gap: 3px; } .kv .vv { text-align: left; } }