@font-face {
font-family: 'Geologica';
font-style: oblique 0deg 12deg;
font-display: swap;
font-weight: 100 900;
src: url(/assets/geologica-cyrillic-standard-normal.370ccec1e4.woff2) format('woff2-variations'), url(/assets/geologica-cyrillic-standard-normal.370ccec1e4.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Geologica';
font-style: oblique 0deg 12deg;
font-display: swap;
font-weight: 100 900;
src: url(/assets/geologica-latin-standard-normal.744f86c502.woff2) format('woff2-variations'), url(/assets/geologica-latin-standard-normal.744f86c502.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: 'JetBrains Mono';
font-style: normal;
font-display: swap;
font-weight: 100 800;
src: url(/assets/jetbrains-mono-cyrillic-wght-normal.d274604c40.woff2) format('woff2-variations'), url(/assets/jetbrains-mono-cyrillic-wght-normal.d274604c40.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-display: swap;
font-weight: 100 800;
src: url(/assets/jetbrains-mono-latin-wght-normal.18be452724.woff2) format('woff2-variations'), url(/assets/jetbrains-mono-latin-wght-normal.18be452724.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;
}
:root {
color-scheme: light;
--bg: #f3efe6;
--bg-2: #e9e3d6;
--panel: #faf8f3;
--ink: #17150f;
--ink-2: #4a453c;
--ink-3: #635d52;
--line: #d5cdbd;
--line-2: #b3a992;
--accent: #0b7268;
--accent-ink: #ffffff;
--accent-soft: rgb(13 148 136 / 0.12);
--knob: #ffffff;
--head-wght: 620;
--shrp: 40;
--wrap: 1320px;
--gut: clamp(16px, 4vw, 48px);
--sans: 'Geologica', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
--mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
:root {
color-scheme: dark;
--bg: #14130f;
--bg-2: #1c1a15;
--panel: #1f1d18;
--ink: #eee8dc;
--ink-2: #bdb5a5;
--ink-3: #a39b8b;
--line: #322e27;
--line-2: #4d473d;
--accent: #4fd1c0;
--accent-ink: #0a1a17;
--accent-soft: rgb(79 209 192 / 0.14);
--knob: #14130f;
--head-wght: 560;
--shrp: 30;
}
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font: 400 17px/1.55 var(--sans);
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
overflow-x: clip;
}
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--accent); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 10; background: var(--ink); color: var(--bg); padding: 8px 14px; border-radius: 6px; text-decoration: none; }
.skip:focus { top: 8px; color: var(--bg); }
.head {
font-weight: var(--head-wght);
font-variation-settings: 'SHRP' var(--shrp);
letter-spacing: -0.035em;
line-height: 0.98;
text-wrap: balance;
}
.top { border-bottom: 1px solid var(--line); }
.top-in { display: flex; align-items: center; gap: 16px; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 640; letter-spacing: -0.01em; font-size: 17px; }
.brand img { border-radius: 7px; display: block; }
.top-note { color: var(--ink-3); margin-left: auto; }
.langs { display: flex; gap: 2px; margin-left: 20px; }
.langs a { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-decoration: none; padding: 8px 9px; border-radius: 6px; color: var(--ink-2); min-width: 36px; text-align: center; }
.langs a[aria-current] { color: var(--ink); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--line-2); }
.langs a:hover { color: var(--accent); }
.hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; padding-block: clamp(40px, 8vw, 104px) clamp(48px, 7vw, 96px); }
.kicker { display: flex; align-items: center; gap: 12px; color: var(--ink-3); margin-bottom: 28px; }
.kicker::before { content: ''; width: 28px; height: 1px; background: currentColor; }
.hero h1 { font-size: clamp(2.45rem, 1.2rem + 4.6vw, 4.9rem); max-width: 13.5em; }
.lead { margin-top: 26px; font-size: clamp(1.1rem, 1rem + 0.45vw, 1.35rem); color: var(--ink-2); max-width: 32em; line-height: 1.45; }
@media (min-width: 980px) {
.hero { grid-template-columns: minmax(0, 7.4fr) minmax(0, 4.6fr); gap: clamp(48px, 6vw, 96px); align-items: end; }
}
.po { margin-top: 40px; max-width: 580px; }
.po label { display: block; color: var(--ink-3); margin-bottom: 10px; }
.po-row { display: flex; border: 1.5px solid var(--ink); border-radius: 12px; background: var(--panel); padding: 4px; gap: 4px; }
.po-row:focus-within { box-shadow: 0 0 0 3px var(--accent-soft); }
.po input[type=email] {
flex: 1 1 auto; min-width: 0; border: 0; background: transparent; color: var(--ink);
font: 400 17px/1.2 var(--sans); padding: 13px 14px; border-radius: 8px;
}
.po input[type=email]::placeholder { color: var(--ink-3); opacity: 1; }
.po input[type=email]:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.po button {
flex: 0 0 auto; border: 0; border-radius: 8px; cursor: pointer;
background: var(--accent); color: var(--accent-ink);
font: 600 16px/1.2 var(--sans); padding: 13px 20px;
transition: filter 0.15s ease;
}
.po button:hover { filter: brightness(1.08); }
.po button:disabled { cursor: progress; filter: saturate(0.6); }
.po .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.consent { margin-top: 12px; font-size: 13px; color: var(--ink-3); }
.status { margin-top: 12px; min-height: 1.5em; font-size: 15px; color: var(--ink-2); }
.po.is-err .status { color: var(--ink); font-weight: 500; }
.po.is-err .status::before { content: '— '; color: var(--accent); }
.po.is-ok .po-row, .po.is-ok label, .po.is-ok .consent { display: none; }
.po.is-ok .status, .done p:first-child { font-size: 18px; color: var(--ink); font-weight: 500; }
.po.is-ok .status::before, .done p:first-child::before { content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); margin-right: 10px; vertical-align: 0.1em; }
.done { margin-top: 40px; max-width: 580px; border-top: 1px solid var(--line); padding-top: 20px; }
.done p + p { margin-top: 6px; color: var(--ink-2); }
.done a { display: inline-block; margin-top: 14px; font-size: 15px; }
@media (max-width: 559px) {
.po-row { flex-direction: column; border: 0; padding: 0; background: transparent; gap: 10px; }
.po-row:focus-within { box-shadow: none; }
.po input[type=email] { border: 1.5px solid var(--ink); background: var(--panel); border-radius: 10px; width: 100%; padding: 15px 14px; }
.po button { width: 100%; padding: 16px 20px; border-radius: 10px; }
}
.console { border: 1px solid var(--line-2); border-radius: 14px; background: var(--panel); overflow: hidden; }
.d1 { --delay: 0.05s; } .d2 { --delay: 0.1s; } .d3 { --delay: 0.15s; } .d4 { --delay: 0.22s; }
.con-head, .con-foot { display: flex; align-items: center; gap: 10px; padding: 12px 16px; color: var(--ink-3); }
.con-head { border-bottom: 1px solid var(--line); }
.con-head .live { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); }
.con-foot { border-top: 1px solid var(--line); justify-content: space-between; }
.ch { --i: 0; display: grid; grid-template-columns: 2.4em minmax(0, 1fr) auto 38px; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.ch:last-child { border-bottom: 0; }
.ch:nth-child(2) { --i: 1; } .ch:nth-child(3) { --i: 2; } .ch:nth-child(4) { --i: 3; }
.ch:nth-child(5) { --i: 4; } .ch:nth-child(6) { --i: 5; } .ch:nth-child(7) { --i: 6; }
.ch-code { color: var(--ink-3); }
.ch-name { font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-val { font-family: var(--mono); font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; text-align: right; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); display: inline-block; flex: 0 0 auto; }
.dot.idle { background: var(--line-2); }
.sw { position: relative; width: 36px; height: 20px; border-radius: 999px; background: var(--line-2); display: inline-block; flex: 0 0 auto; }
.sw i { position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--knob); transition: transform 0.25s ease; }
.sw.is-on { background: var(--accent); }
.sw.is-on i { transform: translateX(16px); }
@property --n { syntax: '<integer>'; inherits: false; initial-value: 0; }
.cnt { --n: var(--from); counter-reset: n var(--n); }
.c1 { --from: 9; --to: 16; --dur: 47s; }
.c2 { --from: 3; --to: 7; --dur: 31s; }
.c3 { --from: 5; --to: 11; --dur: 53s; }
.c4 { --from: 1; --to: 4; --dur: 41s; }
.clock { --from: 0; --to: 59; }
.cnt::after { content: counter(n); }
.cnt.pad::after { content: counter(n, decimal-leading-zero); }
@keyframes tick { from { --n: var(--from); } to { --n: var(--to); } }
.meter { display: inline-flex; align-items: end; gap: 2px; height: 14px; vertical-align: middle; }
.meter i { width: 3px; height: 100%; background: var(--accent); border-radius: 1px; transform-origin: bottom; transform: scaleY(var(--h)); opacity: 0.85; --s: 1.6s; }
.meter i:nth-child(1) { --h: 0.55; --dl: 0s; }
.meter i:nth-child(2) { --h: 0.3; --dl: -0.37s; --s: 1.95s; }
.meter i:nth-child(3) { --h: 0.8; --dl: -0.74s; --s: 2.3s; }
.meter i:nth-child(4) { --h: 0.45; --dl: -1.11s; }
.meter i:nth-child(5) { --h: 0.65; --dl: -1.48s; --s: 1.95s; }
.meter i:nth-child(6) { --h: 0.35; --dl: -1.85s; --s: 2.3s; }
.meter i:nth-child(7) { --h: 0.9; --dl: -2.22s; }
.meter i:nth-child(8) { --h: 0.5; --dl: -2.59s; --s: 1.95s; }
.inside { border-top: 1px solid var(--line); padding-block: clamp(56px, 8vw, 120px); display: grid; gap: 40px; }
.inside h2 { font-size: clamp(2rem, 1.2rem + 3vw, 3.6rem); max-width: 10em; }
.inside .intro > p:not(.kicker) { margin-top: 20px; color: var(--ink-2); max-width: 24em; font-size: 18px; }
.mods { counter-reset: none; border-top: 1px solid var(--ink); }
.mod { display: grid; grid-template-columns: 3.2em minmax(0, 1fr) auto; gap: 6px 16px; align-items: baseline; padding: 22px 0 24px; border-bottom: 1px solid var(--line); }
.mod .num { color: var(--accent); }
.mod h3 { font-size: clamp(1.3rem, 1.05rem + 0.9vw, 1.85rem); font-weight: var(--head-wght); font-variation-settings: 'SHRP' var(--shrp); letter-spacing: -0.025em; line-height: 1.1; }
.mod p { grid-column: 2 / 4; color: var(--ink-2); max-width: 36em; }
.mod .sw { grid-column: 3; grid-row: 1; align-self: center; }
@media (min-width: 980px) {
.inside { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(48px, 6vw, 96px); }
.inside .intro { position: sticky; top: 32px; align-self: start; }
.mod { grid-template-columns: 3.6em minmax(0, 0.9fr) minmax(0, 1.3fr) auto; align-items: center; }
.mod p { grid-column: 3; }
.mod .sw { grid-column: 4; }
}
.final { background: var(--bg-2); border-top: 1px solid var(--line); }
.final-in { padding-block: clamp(56px, 8vw, 112px); display: grid; gap: 8px; }
.final h2 { font-size: clamp(2rem, 1.1rem + 3.4vw, 3.9rem); max-width: 14em; }
.final .lead { max-width: 30em; }
@media (min-width: 980px) {
.final-in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(48px, 6vw, 96px); align-items: end; }
.final-in > .kicker, .final-in > h2, .final-in > .lead { grid-column: 1; }
.final-in > .po, .final-in > .done { grid-column: 2; grid-row: 1 / span 3; align-self: end; margin-top: 0; }
}
.final .po input[type=email], .final .po-row { background: var(--bg); }
@media (max-width: 559px) { .final .po-row { background: transparent; } }
.foot { background: var(--bg-2); }
.foot-in { border-top: 1px solid var(--line); padding-block: 22px 28px; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 12px; line-height: 1.6; color: var(--ink-3); }
.foot-in p { margin: 0; }
.foot-in nav { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.foot-in a { color: var(--ink-3); }
.foot-in a:hover { color: var(--accent); }
.foot-legal { flex: 1 1 520px; }
@media (max-width: 559px) {
.foot-in { flex-direction: column; }
.foot-legal { flex: 0 0 auto; }
.foot-in nav { flex-direction: column; gap: 6px; }
.top-note { display: none; }
.langs { margin-left: auto; }
}
.plain { padding-block: clamp(56px, 10vw, 140px); }
.plain h1 { font-size: clamp(2.2rem, 1.2rem + 3vw, 3.6rem); }
.plain .alt { margin-top: 28px; color: var(--ink-3); font-size: 15px; }
@media (prefers-reduced-motion: no-preference) {
.dot.pulse { animation: pulse 2.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.35; } }
.cnt.run { animation: tick var(--dur) linear infinite alternate; }
.cnt.clock { animation: tick 60s steps(59, end) infinite; }
.meter i { animation: level var(--s) ease-in-out var(--dl) infinite alternate; }
@keyframes level { from { transform: scaleY(var(--h)); } to { transform: scaleY(calc(1.05 - var(--h))); } }
.sw.flip { animation: flipTrack 11s step-end infinite; }
.sw.flip i { animation: flipKnob 11s ease infinite; }
@keyframes flipTrack { 0%, 100% { background: var(--accent); } 78% { background: var(--line-2); } 86% { background: var(--accent); } }
@keyframes flipKnob { 0%, 76%, 88%, 100% { transform: translateX(16px); } 79%, 85% { transform: translateX(0); } }
.rise { animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: var(--delay, 0s); }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
.console .ch { animation: rise 0.5s ease both; animation-delay: calc(0.25s + var(--i) * 0.06s); }
@supports (animation-timeline: view()) {
.mod { animation: modIn linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
@keyframes modIn { from { opacity: 0; transform: translateY(18px); } }
.mod .sw { animation: swTrack linear both; animation-timeline: view(); animation-range: entry 40% entry 100%; }
.mod .sw i { animation: swKnob linear both; animation-timeline: view(); animation-range: entry 40% entry 100%; }
@keyframes swTrack { 0%, 60% { background: var(--line-2); } 61%, 100% { background: var(--accent); } }
@keyframes swKnob { from { transform: translateX(0); } to { transform: translateX(16px); } }
}
}