:root {
  --paper: oklch(94.2% 0.012 88);
  --paper-2: oklch(90.4% 0.017 86);
  --ink: oklch(19.5% 0.008 70);
  --ink-2: oklch(35% 0.012 72);
  --muted: oklch(49% 0.015 76);
  --line: oklch(80% 0.018 84);
  --accent: oklch(66.5% 0.224 36.5);
  --accent-deep: oklch(50% 0.185 36);
  --accent-ink: oklch(17% 0.02 40);

  --font-display: "Geologica", "Helvetica Neue", Arial, sans-serif;
  --font-text: "Geologica", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Martian Mono", ui-monospace, Menlo, monospace;

  --measure: 62ch;
  --bar-h: 3.6rem;
  --grain: 0.05;
  --cursor-fill: var(--accent);
  --cursor-ink: var(--accent-ink);
  --cursor-font: var(--font-mono);
  --progress: var(--accent);
  --vt-dur: 520ms;
}

html { scroll-padding-top: calc(var(--bar-h) + 1rem); }
body { font-weight: 350; overflow-x: clip; }
h1, h2, h3 { font-weight: 300; }
b, strong { font-weight: 600; }
ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.mono { font-size: 0.74em; letter-spacing: 0; font-weight: 400; }

.arr { width: 0.9em; height: 0.9em; flex: none; transition: transform var(--dur-hover) var(--ease-out-quart); }
.arr--down { rotate: 90deg; }
.arr--left { rotate: 180deg; }
a:hover > .arr--right, .btn:hover > .arr--right { transform: translateX(0.22em); }
.btn:hover > .arr--down { transform: translateX(0.18em); }
.back:hover > .arr--left { transform: translateX(0.22em); }

.btn {
  display: inline-flex; align-items: center; gap: 0.6em;
  padding: 0.72em 1.15em 0.76em;
  border: 1px solid currentColor; border-radius: 2px;
  font-size: var(--step--1); font-weight: 500; line-height: 1; text-decoration: none; white-space: nowrap;
  transition: background var(--dur-hover) linear, color var(--dur-hover) linear, border-color var(--dur-hover) linear;
}
.btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--ink { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--ink:hover { background: transparent; color: var(--ink); }
.btn--sig { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn--sig:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.label {
  font: 500 var(--step--1) / 1.2 var(--font-mono);
  letter-spacing: 0;
  color: var(--muted);
  padding-bottom: var(--s-xs); margin-bottom: var(--s-s);
  border-bottom: var(--hair);
}
.label--gap { margin-top: var(--s-xl); }
.display { font-size: var(--step-6); line-height: 0.94; letter-spacing: -0.035em; }

.rows > div { display: grid; grid-template-columns: 7.2rem 1fr; gap: var(--s-xs); padding-block: 0.62rem; border-bottom: var(--hair); }
.rows dt { color: var(--muted); padding-top: 0.32em; }
.copy { text-align: left; }

/* шапка */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--bar-h);
  display: flex; align-items: center; gap: var(--s-s);
  padding-inline: var(--gutter);
  background: color-mix(in oklch, var(--paper) 92%, transparent);
  border-bottom: var(--hair);
}
.bar__mark { font-weight: 700; font-size: var(--step-1); letter-spacing: -0.04em; text-decoration: none; margin-right: auto; }
.bar__nav { display: flex; gap: var(--s-s); font-size: var(--step--1); }
.bar__nav a { text-decoration: none; }
.bar__lang { display: flex; gap: 0.7em; }
.bar__lang a { color: var(--muted); text-decoration: none; }
.bar__lang a:hover { color: var(--ink); }
.bar .btn { padding: 0.55em 0.9em 0.6em; }

/* первый экран */
.hero { padding: calc(var(--bar-h) + var(--s-l)) var(--gutter) var(--s-xl); }
.hero__meta { display: flex; justify-content: space-between; gap: var(--s-s); color: var(--muted); margin: 0; max-width: none; }
.hero__name {
  font-size: clamp(3.3rem, 19vw, 23rem);
  font-weight: 230; line-height: 0.86; letter-spacing: -0.055em;
  margin: var(--s-m) 0 var(--s-xl) -0.045em;
  white-space: nowrap; text-wrap: nowrap;
  font-kerning: none;
}
.hero__name--handle { font-size: clamp(6rem, 33.5vw, 40rem); line-height: 0.74; letter-spacing: -0.065em; margin-bottom: var(--s-l); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: var(--s-s) 0 var(--s-m); max-width: none; }
.golinks { display: flex; flex-wrap: wrap; gap: 0.7rem var(--s-m); margin: var(--s-m) 0 0; max-width: none; }
.golinks a { display: inline-flex; gap: 0.5em; align-items: center; text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 0.25em; }
.golinks a:hover { border-color: var(--accent-deep); color: var(--accent-deep); }
.golinks--end { margin: var(--s-m) var(--gutter) 0; justify-content: flex-end; }
.is-card .projects { padding-bottom: var(--s-xl); }
.hero__foot { display: grid; gap: var(--s-xl) var(--gutter); }
.hero__role { font-size: var(--step-3); line-height: 1.08; letter-spacing: -0.025em; margin-bottom: var(--s-s); }
.hero__role span { display: block; color: var(--muted); }
.hero__status { display: flex; gap: 0.7em; align-items: baseline; font-weight: 500; margin-bottom: var(--s-xs); }
.dot { flex: none; width: 0.62em; height: 0.62em; border-radius: 50%; background: var(--accent); translate: 0 -0.04em; }
.hero__note { color: var(--ink-2); max-width: 46ch; }
.rows--hero { margin-top: var(--s-m); border-top: var(--hair); max-width: 34rem; }

.live { align-self: end; }
.live__title { font: 500 var(--step--1) / 1.2 var(--font-mono); color: var(--muted); padding-bottom: var(--s-xs); border-bottom: 1px solid var(--ink); }
.live__rows a {
  display: grid; grid-template-columns: 1fr auto; gap: 0.1rem var(--s-s); align-items: baseline;
  padding-block: 0.8rem 0.85rem; border-bottom: var(--hair); text-decoration: none;
  transition: padding var(--dur-ui) var(--ease-out-quart), background var(--dur-hover) linear;
}
.live__rows a:hover { background: var(--paper-2); padding-inline: 0.7rem; }
.live__rows b { font-size: var(--step-1); font-weight: 400; letter-spacing: -0.02em; }
.live__host { color: var(--muted); justify-self: end; }
.live__what { color: var(--ink-2); font-size: var(--step--1); }
.live__note { color: var(--muted); margin: var(--s-xs) 0 0; max-width: none; }
.ping { justify-self: end; color: var(--muted); white-space: nowrap; min-height: 1.4em; }
.ping::before { content: ""; display: inline-block; width: 0.6em; height: 0.6em; border-radius: 50%; margin-right: 0.6em; background: var(--line); }
.ping.is-ok { color: var(--ink); }
.ping.is-ok::before { background: var(--accent); animation: beat 2.4s var(--ease-out-quart) infinite; }
.ping.is-wait::before { animation: blink 0.9s linear infinite; }
.ping:empty { display: none; }
@keyframes beat { 0% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--accent) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 0.55em transparent; } }
@keyframes blink { 50% { opacity: 0.25; } }

/* полоса с главным числом */
.band { background: var(--paper-2); padding: var(--s-l) var(--gutter) var(--s-xl); display: grid; gap: var(--s-m) var(--gutter); border-block: var(--hair); }
.band__num {
  margin: 0; max-width: none;
  font-size: clamp(4.4rem, 24vw, 27rem); font-weight: 200; line-height: 0.8; letter-spacing: -0.07em;
  color: var(--accent); font-variant-numeric: tabular-nums; white-space: nowrap;
  margin-left: -0.05em;
}
.band__text p { font-size: var(--step-1); line-height: 1.32; letter-spacing: -0.012em; max-width: 34ch; margin-bottom: var(--s-s); }
.band__facts { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: var(--s-s) var(--s-m); align-content: end; }
.band__facts dt { font-size: var(--step-3); font-weight: 300; letter-spacing: -0.03em; line-height: 1; white-space: nowrap; }
.band__facts dd { font-size: var(--step--1); color: var(--ink-2); margin-top: 0.5rem; max-width: 18ch; }

/* список проектов с превью */
.projects { padding: var(--s-2xl) 0 var(--s-xl); }
.projects__head, .events__head { display: grid; gap: var(--s-s) var(--gutter); padding-inline: var(--gutter); margin-bottom: var(--s-l); }
.projects__head p, .events__head p { color: var(--ink-2); align-self: end; margin: 0; max-width: 44ch; }
.plist li, .more__list li, .events__list li, .tl li { max-width: none; }
.plist { border-top: 1px solid var(--ink); margin-inline: var(--gutter); }
.prow {
  display: grid; grid-template-columns: 2.4rem 1fr; gap: 0.2rem var(--s-xs); align-items: baseline;
  padding-block: var(--s-s); border-bottom: var(--hair); text-decoration: none;
}
.prow__n { color: var(--muted); }
.prow__name { font-size: var(--step-5); font-weight: 300; line-height: 0.98; letter-spacing: -0.04em; transition: translate var(--dur-ui) var(--ease-out-quart), font-variation-settings var(--dur-ui) var(--ease-out-quart); }
.prow__meta, .prow__fact { grid-column: 2; color: var(--ink-2); }
.prow__fact { font-size: var(--step--1); }
.prow__thumb { grid-column: 1 / -1; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; margin-top: var(--s-xs); border: var(--hair); }
.u-preview { --preview-w: clamp(17rem, 30vw, 31rem); --preview-ratio: 16 / 10; box-shadow: 0 1.2rem 2.6rem -1.4rem color-mix(in oklch, var(--ink) 55%, transparent); }
.u-preview > img { object-position: top left; }

/* о себе */
.about, .study { display: grid; gap: var(--s-xl) var(--gutter); padding: var(--s-xl) var(--gutter); }
.about__lead { font-size: var(--step-3); font-weight: 300; line-height: 1.12; letter-spacing: -0.028em; max-width: 24ch; margin-bottom: var(--s-m); }
.about__main p:not(.about__lead) { color: var(--ink-2); }
.job h3 { font-size: var(--step-2); letter-spacing: -0.025em; }
.job__meta { color: var(--muted); margin: 0.5rem 0 0.9rem; }
.job__sub { font-weight: 500; margin-bottom: 0.6rem; }
.job li { position: relative; padding-left: 1.3em; margin-bottom: 0.5em; color: var(--ink-2); }
.job li::before, .points li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 0.7em; border-top: 1px solid var(--accent-deep); }

.stack { padding: var(--s-m) var(--gutter) var(--s-2xl); }
.matrix { width: 100%; border-collapse: collapse; }
.matrix tr { border-bottom: var(--hair); }
.matrix th, .matrix td { text-align: left; vertical-align: baseline; padding: 0.85rem var(--s-s) 0.9rem 0; font-weight: inherit; }
.matrix th { color: var(--muted); white-space: nowrap; width: 9rem; }
.matrix td:nth-child(2) { font-size: var(--step-1); letter-spacing: -0.015em; line-height: 1.25; }
.matrix td:last-child { color: var(--ink-2); font-size: var(--step--1); width: 30%; padding-right: 0; }

/* ещё проекты */
.more { padding: var(--s-l) var(--gutter) var(--s-2xl); }
.more .display { margin-bottom: var(--s-l); }
.more__list { display: grid; gap: 0 var(--gutter); border-top: 1px solid var(--ink); }
.more__list li { padding-block: var(--s-s) var(--s-m); border-bottom: var(--hair); }
.more__stack { color: var(--muted); margin-bottom: 0.7rem; }
.more h3 { font-size: var(--step-2); line-height: 1.08; letter-spacing: -0.028em; margin-bottom: 0.7rem; }
.more h3 a { text-decoration: none; }
.more h3 a:hover { color: var(--accent-deep); }
.more li > p:not(.mono) { color: var(--ink-2); font-size: 0.94em; }
.more__go { display: flex; gap: var(--s-s); margin: 0; }
.more__go a { display: inline-flex; gap: 0.5em; align-items: center; text-decoration: none; }
.demos { padding: var(--s-l) var(--gutter) var(--s-2xl); }
.demos .display { margin-bottom: var(--s-s); }
.demos__lead { max-width: 52ch; color: var(--ink-2); margin-bottom: var(--s-l); }
.demos__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: var(--s-l) var(--gutter); border-top: 1px solid var(--ink); padding-top: var(--s-m); }
.demos__grid li { display: flex; flex-direction: column; min-width: 0; }
.demos__shot { display: block; margin-bottom: var(--s-xs); border: var(--hair); overflow: hidden; }
.demos__shot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; transition: transform 0.4s ease; }
.demos__shot:hover img { transform: scale(1.02); }
.demos__stack { color: var(--muted); margin-bottom: 0.5rem; }
.demos h3 { font-size: var(--step-1); line-height: 1.12; letter-spacing: -0.02em; margin-bottom: 0.5rem; }
.demos h3 a { text-decoration: none; }
.demos h3 a:hover { color: var(--accent-deep); }
.demos li > p:not(.mono) { color: var(--ink-2); font-size: 0.94em; margin-bottom: var(--s-xs); }
.demos__go { display: flex; flex-wrap: wrap; gap: 0.4rem var(--s-s); margin: auto 0 0; }
.demos__go a { display: inline-flex; gap: 0.5em; align-items: center; text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .demos__shot img { transition: none; } }

/* хакатоны */
.events { padding: var(--s-xl) 0 var(--s-2xl); background: var(--paper-2); border-block: var(--hair); }
.events__list { margin-inline: var(--gutter); border-top: 1px solid var(--ink); }
.events__list li { display: grid; grid-template-columns: 3.4rem 1fr; gap: 0.25rem var(--s-xs); padding-block: 0.95rem; border-bottom: var(--hair); align-items: baseline; }
.ev__y { color: var(--muted); }
.ev__who b { display: block; font-size: var(--step-1); font-weight: 400; letter-spacing: -0.02em; line-height: 1.15; }
.ev__who em { font-style: normal; font-size: var(--step--1); color: var(--muted); }
.ev__what, .ev__res { grid-column: 2; }
.ev__what { color: var(--ink-2); font-size: 0.94em; }
.is-win .ev__res { color: var(--accent-ink); background: var(--accent); padding: 0.25em 0.6em; justify-self: start; }

/* обучение */
.tl li { display: grid; grid-template-columns: 6.4rem 1fr; gap: 0.2rem var(--s-xs); padding-block: 0.8rem; border-bottom: var(--hair); align-items: baseline; }
.tl__y { color: var(--muted); }
.tl__name { font-size: var(--step-1); letter-spacing: -0.02em; line-height: 1.2; }
.tl__track { grid-column: 1 / -1; position: relative; height: 0.5rem; margin-top: 0.45rem; }
.tl__track::after { content: ""; position: absolute; left: var(--now); top: -0.35rem; bottom: -0.35rem; border-left: 1px solid var(--accent-deep); }
.tl__track i { position: absolute; left: var(--a); width: var(--w); top: 0; bottom: 0; background: linear-gradient(90deg, var(--ink) 0 calc((var(--now) - var(--a)) / var(--w) * 100%), var(--line) 0); transform-origin: left; }
.tl__axis { color: var(--muted); border-bottom: 0 !important; }
.tl__axis .tl__track { height: 1.4rem; margin-top: 0; }
.tl__axis b { position: absolute; left: var(--a); font-weight: 400; }
.tl__axis u { position: absolute; left: calc(var(--now) + 0.5em); top: 0; text-decoration: none; color: var(--accent-deep); background: var(--paper); padding-inline: 0.3em; }
.tl__axis .tl__track::after { bottom: 0.2rem; }
.langs { display: flex; gap: var(--s-m); }
.langs li { color: var(--ink-2); font-size: var(--step--1); }
.langs b { display: block; font-size: var(--step-4); font-weight: 300; letter-spacing: -0.04em; line-height: 1; color: var(--ink); margin-bottom: 0.3rem; }

/* подвал */
.foot { background: var(--accent); color: var(--accent-ink); padding: var(--s-2xl) var(--gutter) var(--s-s); --line: color-mix(in oklch, var(--accent-ink) 35%, transparent); --muted: color-mix(in oklch, var(--accent-ink) 78%, transparent); --ink: var(--accent-ink); --paper: var(--accent); }
.foot ::selection { background: var(--accent-ink); color: var(--accent); }
.foot :focus-visible { outline-color: var(--accent-ink); }
.foot__say { font-size: clamp(2.7rem, 10.6vw, 12rem); font-weight: 250; line-height: 0.9; letter-spacing: -0.05em; margin: 0 0 var(--s-xl) -0.04em; max-width: none; }
.foot__grid { display: grid; gap: var(--s-m) var(--gutter); align-items: end; }
.rows--foot { border-top: var(--hair); }
.rows--foot dd { font-size: var(--step-1); letter-spacing: -0.02em; }
.foot__dl { display: flex; flex-wrap: wrap; gap: var(--s-xs); }
.foot__fine { display: flex; justify-content: space-between; margin: var(--s-xl) 0 0; max-width: none; }

/* страница кейса */
.case__head { padding: calc(var(--bar-h) + var(--s-l)) var(--gutter) var(--s-l); }
.back { display: inline-flex; gap: 0.6em; align-items: center; text-decoration: none; margin-bottom: var(--s-l); }
.case__meta { color: var(--muted); margin-bottom: var(--s-s); max-width: none; }
.case__title { font-size: clamp(3rem, 13.2vw, 15rem); font-weight: 250; line-height: 0.88; letter-spacing: -0.055em; margin-left: -0.04em; text-wrap: balance; }
.case__lead { font-size: var(--step-2); line-height: 1.2; letter-spacing: -0.02em; max-width: 32ch; margin: var(--s-m) 0; }
.case__links { display: flex; flex-wrap: wrap; gap: var(--s-2xs); align-items: center; }
.case__ping { margin-left: var(--s-xs); color: var(--muted); }
.case__cover { margin: 0 var(--gutter); border: var(--hair); background: var(--paper-2); }
.case__cover img { width: 100%; }
.case__body { display: grid; gap: var(--s-xl) var(--gutter); padding: var(--s-xl) var(--gutter) var(--s-2xl); }
.case__text > p { font-size: var(--step-1); line-height: 1.38; letter-spacing: -0.012em; max-width: 40ch; margin-bottom: var(--s-l); }
.points li { position: relative; padding: 0.7rem 0 0.75rem 1.5em; border-bottom: var(--hair); max-width: 60ch; }
.points li::before { top: 1.42em; }
.fine { color: var(--muted); margin-top: var(--s-s); }
.fine--wide { padding: var(--s-xs) var(--gutter) 0; max-width: none; margin: 0; }

.flow { border-left: 1px solid var(--ink); margin: 0 0 var(--s-l) 0.3rem; }
.flow li { position: relative; padding: 0.55rem 0 0.55rem 1.4rem; font-weight: 500; line-height: 1.25; }
.flow li::before { content: ""; position: absolute; left: -0.3rem; top: 1.05rem; width: 0.55rem; height: 0.55rem; background: var(--paper); border: 1px solid var(--ink); border-radius: 50%; }
.flow li.is-hot::before { background: var(--accent); border-color: var(--accent); }
.flow em { display: block; font: 400 0.74em / 1.5 var(--font-mono); color: var(--muted); }
.nums div { padding-block: var(--s-xs); border-top: var(--hair); display: grid; grid-template-columns: minmax(7rem, auto) 1fr; gap: var(--s-s); align-items: baseline; }
.nums dt { font-size: var(--step-4); font-weight: 250; letter-spacing: -0.045em; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nums dd { color: var(--ink-2); font-size: var(--step--1); }
.nums:not(.nums--row) { display: grid; grid-template-columns: auto 1fr; column-gap: var(--s-s); }
.nums:not(.nums--row) div { grid-column: 1 / -1; grid-template-columns: subgrid; }
.nums--row { margin-top: var(--s-s); }

.pair { display: grid; gap: var(--s-xl) var(--gutter); padding: var(--s-xl) var(--gutter); }
.pair__title { font-size: var(--step-4); letter-spacing: -0.04em; margin-bottom: var(--s-s); }
.pair p { color: var(--ink-2); }

.games { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-m) var(--gutter); padding: var(--s-xl) var(--gutter) 0; }
.phone { max-width: 22rem; }
.phone__screen { position: relative; aspect-ratio: 9 / 16; background: var(--ink); border-radius: 1.4rem; overflow: hidden; border: 0.4rem solid var(--ink); margin-bottom: var(--s-xs); }
.phone__screen video, .phone__screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.phone__play { position: absolute; left: 50%; bottom: 1.2rem; translate: -50% 0; z-index: 2; }
.phone.is-on .phone__play { display: none; }
.phone p { font-size: 0.94em; color: var(--ink-2); }
.phone p b { color: var(--ink); }

.shots { background: var(--ink); color: var(--paper); padding-block: var(--s-l); overflow: clip; --line: color-mix(in oklch, var(--paper) 22%, transparent); }
.shots .track {
  display: flex; align-items: flex-end; gap: var(--s-m); padding-inline: var(--gutter);
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
}
.shots__title { flex: none; align-self: center; font-size: var(--step-6); font-weight: 250; letter-spacing: -0.05em; padding-right: var(--s-m); }
.shots__title span { display: block; color: color-mix(in oklch, var(--paper) 60%, transparent); margin-top: 0.8rem; letter-spacing: 0; font-size: 0.11em; }
.shots figure { flex: none; scroll-snap-align: center; }
.shots button { display: block; cursor: zoom-in; }
.shots img { height: min(58svh, 62vw); width: auto; max-width: none; border: var(--hair); }
.shots figcaption { margin-top: 0.7rem; color: color-mix(in oklch, var(--paper) 72%, transparent); }
.has-pin .shots { min-height: 100svh; display: flex; align-items: center; padding-block: 0; }
.has-pin .shots .track { overflow: visible; width: max-content; padding-right: 12vw; }

.video { padding: var(--s-xl) var(--gutter) 0; }
.video video { width: 100%; max-width: 70rem; aspect-ratio: 16 / 9; background: var(--ink); }
.video p { color: var(--muted); margin-top: 0.7rem; }

.next { display: grid; gap: var(--s-xs) var(--gutter); align-items: end; padding: var(--s-2xl) var(--gutter) var(--s-xl); text-decoration: none; border-top: var(--hair); margin-top: var(--s-2xl); }
.next__label { color: var(--muted); }
.next__name { font-size: var(--step-6); font-weight: 250; line-height: 0.92; letter-spacing: -0.05em; }
.next img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; border: var(--hair); }
.is-case .foot__say { font-size: clamp(2.2rem, 6.4vw, 7rem); }
.is-case .foot { padding-top: var(--s-xl); }

/* скриншот во весь экран, уведомление */
.zoom { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 94vh; overflow: visible; }
.zoom::backdrop { background: color-mix(in oklch, var(--ink) 88%, transparent); }
.zoom img { max-width: 96vw; max-height: 88vh; width: auto; }
.zoom__close { position: absolute; right: 0; top: -2.2rem; color: var(--paper); }
.toast { position: fixed; left: 50%; bottom: 1.6rem; z-index: 70; translate: -50% 1rem; opacity: 0; pointer-events: none; background: var(--ink); color: var(--paper); padding: 0.7em 1.1em; transition: opacity var(--dur-ui) linear, translate var(--dur-ui) var(--ease-out-quart); }
.toast.is-on { opacity: 1; translate: -50% 0; }

@media (max-width: 759px) {
  .bar__nav { display: none; }
  .matrix, .matrix tbody, .matrix tr, .matrix th, .matrix td { display: block; width: auto; }
  .matrix th { padding-bottom: 0; }
  .matrix td { padding-top: 0.3rem; }
  .matrix td:last-child { width: auto; padding-top: 0; }
  .band__facts { grid-template-columns: 1fr 1fr; }
  .tl__axis b:nth-of-type(n+4) { display: none; }
  .rows > div { grid-template-columns: 5.6rem 1fr; }
  .games { grid-template-columns: 1fr; }
  .hero__meta span:last-child { display: none; }
}

@media (min-width: 760px) {
  .hero__foot { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .band { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); padding-top: var(--s-m); }
  .band__num { grid-column: 1 / -1; }
  .projects__head, .events__head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .prow { grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 15rem) minmax(0, 13rem); padding-block: var(--s-m); }
  .prow__meta, .prow__fact { grid-column: auto; }
  .prow__fact { text-align: right; font-size: inherit; }
  .about, .study { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .more__list { grid-template-columns: 1fr 1fr; }
  .more__list li.is-wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) minmax(0, 2fr); gap: 0 var(--gutter); padding-block: var(--s-m) var(--s-l); }
  .more__list li.is-wide > :is(.more__stack, h3) { grid-column: 1; }
  .more__list li.is-wide > p:not(.mono) { grid-column: 2; grid-row: 1 / span 2; }
  .more__list li.is-wide > .more__go { grid-column: 3; grid-row: 1 / span 2; flex-direction: column; align-items: flex-end; gap: 0.6rem; }
  .more__list li.is-wide h3 { font-size: var(--step-3); }
  .more__list li.is-wide { grid-template-rows: auto 1fr; }
  .events__list li { grid-template-columns: 4.6rem minmax(0, 5fr) minmax(0, 6fr) 8.5rem; }
  .ev__what, .ev__res { grid-column: auto; }
  .ev__res { justify-self: end; text-align: right; }
  .is-win .ev__res { justify-self: end; }
  .tl li { grid-template-columns: 6.4rem minmax(0, 14rem) 1fr; align-items: center; }
  .tl__track { grid-column: auto; margin-top: 0; }
  .tl__axis .tl__track { grid-column: 3; }
  .foot__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .foot__dl { justify-content: flex-end; }
  .case__body { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .case__body--solo { grid-template-columns: minmax(0, 8fr); }
  .case__side { position: sticky; top: calc(var(--bar-h) + var(--s-s)); align-self: start; }
  .pair { grid-template-columns: 1fr 1fr; }
  .games { grid-template-columns: repeat(2, minmax(0, 20rem)); }
  .next { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .next__label { grid-column: 1 / -1; }
}

@media (hover: hover) and (pointer: fine) {
  .prow__thumb { display: none; }
  .prow:hover .prow__name { translate: 0.35em 0; font-variation-settings: "wght" 520; }
  .next img { transition: clip-path var(--dur-reveal) var(--ease-out-expo); clip-path: inset(0 0 0 18%); }
  .next:hover img { clip-path: inset(0); }
}

@media (prefers-reduced-motion: reduce) {
  .ping.is-ok::before, .ping.is-wait::before { animation: none; }
}

@media print {
  .bar, .u-cursor, .u-preview, .toast, .shots, .video, .games { display: none !important; }
  .hero { padding-top: 0; }
  .foot { background: none; color: #000; }
}

/* тёмная тема и тёмные секции */
:root { color-scheme: light; --deep: oklch(19.5% 0.008 70); --on-deep: oklch(94.2% 0.012 88); }
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: oklch(17.5% 0.007 70);
  --paper-2: oklch(21.5% 0.009 72);
  --ink: oklch(93.5% 0.012 88);
  --ink-2: oklch(81% 0.014 86);
  --muted: oklch(67% 0.015 82);
  --line: oklch(32% 0.012 76);
  --accent-deep: oklch(73% 0.19 40);
  --deep: oklch(12.5% 0.006 70);
  --grain: 0.07;
}
.shots, .events {
  background: var(--deep); color: var(--on-deep); border: 0;
  --ink: var(--on-deep);
  --ink-2: color-mix(in oklch, var(--on-deep) 84%, transparent);
  --muted: color-mix(in oklch, var(--on-deep) 62%, transparent);
  --line: color-mix(in oklch, var(--on-deep) 22%, transparent);
  --hair: 1px solid var(--line);
  --accent-deep: var(--accent);
}
.shots__title span { color: var(--muted); }
.shots figcaption { color: var(--ink-2); }
.video video { background: var(--deep); }
.zoom::backdrop { background: color-mix(in oklch, var(--deep) 90%, transparent); }
html.is-quiet::view-transition-old(root), html.is-quiet::view-transition-new(root),
html.is-theming::view-transition-old(root), html.is-theming::view-transition-new(root) { animation: none; }
html.is-quiet::view-transition-group(*) { animation-duration: 380ms; }

/* шапка: поиск, тема, переход к содержанию */
.skip { position: fixed; left: var(--gutter); top: 0.5rem; z-index: 120; background: var(--ink); color: var(--paper); padding: 0.6em 1em; text-decoration: none; translate: 0 -300%; }
.skip:focus { translate: 0; }
.bar__k { display: none; align-items: center; border: var(--hair); border-radius: 2px; padding: 0.55em 0.75em; color: var(--ink-2); transition: border-color var(--dur-hover) linear, color var(--dur-hover) linear; }
.bar__k:hover { border-color: var(--ink); color: var(--ink); }
.bar__k kbd { font: inherit; color: var(--muted); margin-left: 0.7em; }
.bar__k-narrow { display: none; }
.bar__theme { display: none; width: 2rem; height: 2rem; place-items: center; }
.bar__theme svg { width: 1.05rem; height: 1.05rem; transition: rotate var(--dur-ui) var(--ease-out-quart); }
[data-theme="dark"] .bar__theme svg { rotate: 180deg; }
html[data-theme] .bar__k { display: inline-flex; }
html[data-theme] .bar__theme { display: grid; }

/* палитра команд */
.pal { border: 0; padding: 0; background: transparent; color: var(--ink); width: min(42rem, 100vw - 2rem); max-width: none; max-height: none; margin: 12vh auto auto; overflow: visible; }
.pal::backdrop { background: color-mix(in oklch, var(--deep) 64%, transparent); }
.pal[open] { animation: pal-in 0.28s var(--ease-out-expo); }
@keyframes pal-in { from { opacity: 0; translate: 0 0.8rem; } }
.pal__box { background: var(--paper); border: 1px solid var(--ink); box-shadow: 0 2rem 4rem -2rem color-mix(in oklch, var(--deep) 75%, transparent); }
.pal__top { display: flex; align-items: center; border-bottom: var(--hair); }
.pal__in { flex: 1; min-width: 0; font: 300 var(--step-1) / 1.2 var(--font-text); letter-spacing: -0.02em; padding: 1.1rem 1.2rem; border: 0; background: none; color: inherit; outline: none; }
.pal__in::placeholder { color: var(--muted); }
.pal__x { margin-right: 1rem; padding: 0.4em 0.6em; border: var(--hair); border-radius: 2px; color: var(--muted); }
.pal__x:hover { color: var(--ink); border-color: var(--ink); }
.pal__list { max-height: min(56vh, 30rem); overflow-y: auto; overscroll-behavior: contain; }
.pal__list li { max-width: none; }
.pal__g { color: var(--muted); padding: 0.9rem 1.2rem 0.35rem; }
.pal__it { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.6rem 1.2rem; cursor: pointer; }
.pal__it small { flex: none; max-width: 52%; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal__it[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.pal__it[aria-selected="true"] small { color: inherit; opacity: 0.72; }
.pal__none { padding: 1.2rem; color: var(--muted); }
.pal__hint { display: flex; justify-content: space-between; gap: 1rem; margin: 0; max-width: none; padding: 0.7rem 1.2rem; border-top: var(--hair); color: var(--muted); }

/* заставка первого визита */
.u-preloader { --preloader-bg: var(--deep); --preloader-ink: var(--on-deep); }
.pre { width: min(34rem, 100vw - 2 * var(--gutter)); display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 1.1rem 1rem; }
.pre__name { font-size: clamp(4rem, 15vw, 9.5rem); font-weight: 230; letter-spacing: -0.06em; line-height: 0.78; }
.pre__count { color: var(--accent); font-variant-numeric: tabular-nums; }
.pre__bar { grid-column: 1 / -1; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; }

/* стенды: сводка и график ответа */
.live__title { display: flex; justify-content: space-between; gap: var(--s-s); }
.live__sum { color: var(--ink); text-align: right; }
.ping { display: inline-flex; align-items: center; gap: 0.6em; }
.ping::before { order: 1; margin-right: 0; flex: none; }
.ping > span { order: 2; }
.spark { order: 0; width: 3rem; height: 0.85rem; color: var(--muted); overflow: visible; }

/* лента стека, линза на числе */
.ticker { margin: 0; max-width: none; padding-block: var(--s-s); border-bottom: var(--hair); overflow: hidden; white-space: nowrap; font-size: var(--step-4); font-weight: 250; letter-spacing: -0.04em; --line-gap: 0; }
.ticker span::after { content: "/"; color: var(--accent); margin-inline: 0.42em; font-weight: 200; }
.band__lens { color: var(--ink); --spot-r: 8.5rem; pointer-events: none; }
@media (hover: none), (pointer: coarse) { .band__lens { display: none; } }

/* фильтр проектов */
.more .display { margin-bottom: var(--s-m); }
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: var(--s-m); }
html:not([data-theme]) .chips { display: none; }
.chip { border: var(--hair); border-radius: 2px; padding: 0.55em 0.8em; color: var(--ink-2); transition: border-color var(--dur-hover) linear, background var(--dur-hover) linear, color var(--dur-hover) linear; }
.chip i { font-style: normal; color: var(--muted); margin-left: 0.3em; }
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip[aria-pressed="true"] i { color: inherit; opacity: 0.7; }
.more__list li[hidden] { display: none; }

/* схема: линия дорисовывается по прокрутке */
.flow { border-left-color: var(--line); position: relative; }
.flow li.flow__line { position: absolute; left: -1.5px; top: 0; bottom: 0; width: 2px; padding: 0; }
.flow li.flow__line::before { display: none; }
.flow__line svg { display: block; width: 2px; height: 100%; color: var(--accent); }

/* подвал */
.foot { --gl-a: oklch(66.5% 0.224 36.5); --gl-b: oklch(62.5% 0.218 35); --gl-c: oklch(72% 0.2 48); }
.foot__qr { display: none; }
.foot__fine { flex-wrap: wrap; gap: 0.4rem var(--s-m); }
@media (hover: none), (pointer: coarse) { .foot__keys { display: none; } }
@media (min-width: 760px) and (hover: hover) {
  .foot__qr { display: flex; align-items: flex-end; gap: 0.9rem; margin: var(--s-l) 0 0; max-width: none; }
  .foot__qr svg { width: 5.4rem; height: 5.4rem; }
  .foot__fine { margin-top: var(--s-m); }
}

@media (max-width: 1019px) { .bar__nav { display: none; } }
@media (max-width: 759px) {
  .bar__k-wide { display: none; }
  .bar__k-narrow { display: inline; }
  html[data-theme] .bar__theme { display: none; }
  .pal { width: 100vw; margin-top: 0; }
  .pal__box { border-width: 0 0 1px; }
  .pal__list { max-height: calc(100dvh - 4.2rem); }
  .pal__hint { display: none; }
  .pal__it > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pal__it small { max-width: 42%; }
}
@media print { .pal, .u-preloader, .u-progress, .chips, .ticker, .skip, .foot__qr { display: none !important; } }

/* главная z1nex.ru: кто я и четыре двери дальше */
.hero--home { padding-bottom: var(--s-l); }
.hero__name--home { font-size: clamp(3rem, 10.4vw, 11.5rem); line-height: 0.9; white-space: normal; text-wrap: balance; margin-bottom: var(--s-m); }
.hero--home .hero__role .mono { display: inline; font-size: var(--step--1); color: var(--muted); letter-spacing: 0; vertical-align: 0.4em; margin-left: 0.5em; }
.hero__lead { font-size: var(--step-1); line-height: 1.38; letter-spacing: -0.012em; color: var(--ink-2); max-width: 44ch; margin-bottom: var(--s-s); }

.shine { display: flex; gap: 0.75em; align-items: baseline; margin: var(--s-m) 0 0; max-width: none; font-size: var(--step--1); color: var(--ink-2); }
.shine__spin { flex: none; width: 1em; text-align: center; color: var(--accent); }
.shine__t { color: var(--ink-2); }

.doors { padding: var(--s-m) 0 var(--s-2xl); }
.doors > .label { margin: 0 var(--gutter) var(--s-s); border: 0; }
.doors__grid { list-style: none; display: grid; margin: 0 var(--gutter); border-top: 1px solid var(--ink); }
.door {
  position: relative; display: grid; align-content: start; gap: var(--s-xs);
  padding: var(--s-m) 0; border-bottom: var(--hair);
  transition: background var(--dur-hover) linear, padding var(--dur-ui) var(--ease-out-quart);
}
.door__main { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; align-items: baseline; text-decoration: none; }
.door__main::after { content: ""; position: absolute; inset: 0; }
.door__n { color: var(--muted); font-size: var(--step--1); }
.door__name { font-size: var(--step-4); font-weight: 300; line-height: 1; letter-spacing: -0.035em; transition: color var(--dur-hover) linear, translate var(--dur-ui) var(--ease-out-quart); }
.door__arr { color: var(--muted); }
.door:hover { background: var(--paper-2); }
.door:hover .door__name { color: var(--accent-deep); translate: 0.1em 0; }
.door:hover .door__arr { color: var(--accent-deep); }
.door__text { color: var(--ink-2); max-width: 40ch; margin: 0; }
.door__stat { display: flex; flex-wrap: wrap; gap: 0.2em 0.6em; align-items: baseline; margin: var(--s-xs) 0 0; max-width: none; }
.door__stat b { font-size: var(--step-3); font-weight: 300; letter-spacing: -0.03em; line-height: 1; }
.door__stat > span { color: var(--muted); font-size: var(--step--1); }
.door__links { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 0.4rem 1.3rem; margin: var(--s-xs) 0 0; font-size: var(--step--1); max-width: none; }
.door__links a { display: inline-flex; gap: 0.45em; align-items: center; }
@media (hover: hover) { .door:hover { padding-inline: 0.9rem; } }
@media (min-width: 760px) {
  .doors__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); }
}
@media (min-width: 1100px) {
  .doors__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 0; }
  .door { grid-template-rows: auto auto 1fr auto; min-height: 25rem; padding: var(--s-m) var(--s-m) var(--s-l); border-bottom: 0; border-left: var(--hair); }
  .door:first-child { border-left: 0; padding-left: 0; }
  .door__main { grid-template-columns: minmax(0, 1fr) auto; }
  .door__n { grid-column: 1 / -1; margin-bottom: var(--s-xl); }
  .door__name { font-size: var(--step-3); }
  .door__stat { align-self: end; flex-direction: column; }
  .door:hover, .door:first-child:hover { padding-inline: var(--s-m); }
}

/* цифры теплеют под курсором */
span.dg.dg {
  display: inline; font: inherit; letter-spacing: inherit;
  color: color-mix(in oklab, currentColor, var(--glow) calc(var(--g, 0) * 100%));
  text-shadow: 0 0 calc(var(--g, 0) * 1.1em) color-mix(in oklab, var(--glow) calc(var(--g, 0) * 60%), transparent);
  transition: color 0.18s linear, text-shadow 0.18s linear;
}

/* /demo/: все демо под заказы */
.hero--demo { padding-bottom: var(--s-m); }
.hero__name--demo { font-size: clamp(2.6rem, 7.4vw, 8rem); line-height: 0.95; letter-spacing: -0.04em; white-space: normal; text-wrap: balance; margin-bottom: var(--s-m); }
.demos--page { padding-top: var(--s-s); }
.demos--page h2 { font-size: var(--step-1); font-weight: 400; line-height: 1.12; letter-spacing: -0.02em; margin-bottom: 0.5rem; }
.demos--page h2 a { text-decoration: none; }
.demos--page h2 a:hover { color: var(--accent-deep); }
.demos__stack span { color: var(--ink); margin-right: 0.6em; }
.demos__links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin: auto 0 0; padding-top: var(--s-xs); font-size: var(--step--1); }
.demos__links a { display: inline-flex; gap: 0.45em; align-items: center; }
@media (min-width: 760px) and (max-width: 1099px) { .demos--page .demos__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .demos--page .demos__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

@media (prefers-reduced-motion: reduce) {
  .door, .door__name, span.dg.dg { transition: none; }
}

/* фон из символов (glyphs.js) */
:root { --glow: oklch(55% 0.15 260); }
:root[data-theme="dark"] { --glow: oklch(68% 0.13 262); }
.glyphs { position: fixed; top: 0; left: 0; z-index: -1; pointer-events: none; }
@media print { .glyphs { display: none; } }