/* Built from dev/layout.css by dev/release.js: edit it there and run `node dev/release.js` again. */
/* Three layouts of the Elusive home page in the white skin (dev/layout.html). Nothing here touches the real site.
   .lo-* is shared by all three, .v1-* / .v2-* / .v3-* belongs to one layout.

   The backdrop is one field of soft light behind the whole page (layout.js). Nothing on top of it is a solid colour
   block: sections are transparent, surfaces are translucent white on hairlines, so colour never changes at an edge. */

@font-face { font-family: 'Inter'; font-weight: 400; font-display: swap; src: url('../fonts/Inter-Regular.woff') format('woff'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-display: swap; src: url('../fonts/Inter-Medium.woff') format('woff'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-display: swap; src: url('../fonts/Inter-SemiBold.woff') format('woff'); }

/* ---------------------------------------------------------------- tokens and base */

:root {
  color-scheme: light;
  --bg: #fbfbfc;
  /* surfaces: white you can see the light through, a little more for what floats */
  --soft: rgb(255 255 255 / 0.52);
  --soft-2: rgb(255 255 255 / 0.72);
  --solid: rgb(255 255 255 / 0.86);
  --edge: inset 0 0 0 1px rgb(0 0 0 / 0.045);
  --text: #111214;
  --ink-2: #3b3e46;
  --muted: #62656d;
  --faint: #9a9ca3;
  --line: rgb(0 0 0 / 0.07);
  --line-strong: rgb(0 0 0 / 0.12);
  --r-card: 24px;
  --r-inner: 16px;
  --float: 0 1px 2px rgb(16 18 24 / 0.05), 0 14px 34px -22px rgb(16 18 24 / 0.28);
  --float-up: 0 1px 2px rgb(16 18 24 / 0.06), 0 22px 44px -24px rgb(16 18 24 / 0.34);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --nav-h: 60px;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; scrollbar-color: rgb(0 0 0 / 0.2) transparent; interpolate-size: allow-keywords; }
/* the script glides the page itself (assets/js/smooth.js); a smooth CSS scroll on top would fight every frame */
html.has-smooth { scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.55 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-feature-settings: 'cv11', 'ss03';
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.lo-bg { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; display: block; pointer-events: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
svg { display: block; }
svg:not(.blade) { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
::selection { background: rgb(17 18 20 / 0.12); }
:focus-visible { outline: 2px solid var(--ink-2); outline-offset: 3px; border-radius: 8px; }
kbd {
  display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 6px;
  background: #fff; box-shadow: inset 0 0 0 1px var(--line-strong), inset 0 -1px 0 rgb(0 0 0 / 0.06);
  font: 500 11px/1 'Inter', system-ui, sans-serif; color: var(--ink-2);
}
.blade { width: 20px; height: 20px; color: var(--text); }

h1 { font-size: clamp(48px, 7.4vw, 104px); line-height: 0.98; font-weight: 500; letter-spacing: -0.045em; }
h2 { font-size: clamp(32px, 3.9vw, 52px); line-height: 1.05; font-weight: 500; letter-spacing: -0.035em; }
h3 { font-size: 21px; line-height: 1.25; font-weight: 600; letter-spacing: -0.02em; }
h1 em, h2 em, h3 em { font-style: normal; color: #a2a4aa; }
/* «в тени.», and the second words of the headings with the lights: the same ink as the rest of the heading — one
   phrase, one colour */
h1 em, .lo-shine em { color: var(--text); }

/* The two big headings — the first screen's «Преимущество в тени.» and the finale's «Играйте в тени.» — and the
   section headings marked .lo-shine in layout.html («Длительность подписки», «Играть выгоднее вместе», «Если
   остались вопросы») stand in black ink with two white lights over them (layout.js marks the big two .lo-shine):
   - a sheen that sweeps across now and then, as light along a blade;
   - a soft light that follows the cursor over the letters and fades when it leaves.
   Each word is its own block (the words rise in one by one), so layout.js gives the heading's size (--hw, --hh)
   and each word's place in it (--wx, --wy): the lights cross the whole phrase as one. They stop while the heading
   is out of sight, and with reduced motion the heading simply stands in its ink. */
@property --sheen { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --hl { syntax: '<number>'; inherits: true; initial-value: 0; }
.lo-shine {
  --ink: #111214;
  --light: 255 255 255; /* the colour of both lights */
  animation: lo-sheen 7s ease-in-out 2s infinite backwards;
  transition: --hl 0.5s ease;
  position: relative; /* the words measure their place from the heading itself */
}
.lo-shine.is-lit { --hl: 1; }
.lo-shine.is-away, .is-still .lo-shine { animation-play-state: paused; }
@keyframes lo-sheen { 0% { --sheen: 0; } 45%, 100% { --sheen: 1; } }
.lo-shine .w {
  background-image:
    radial-gradient(circle calc(var(--hh, 110px) * 1.2) at var(--hx, -999px) var(--hy, -999px), rgb(var(--light) / calc(var(--hl) * 0.62)), transparent 70%),
    linear-gradient(100deg, transparent 44.5%, rgb(var(--light) / 0.5) 48%, rgb(var(--light) / 0.95) 50%, rgb(var(--light) / 0.5) 52%, transparent 55.5%),
    linear-gradient(var(--ink), var(--ink));
  background-size:
    var(--hw, 1000px) var(--hh, 110px),
    calc(var(--hw, 1000px) * 2.2) var(--hh, 110px),
    100% 100%;
  background-repeat: no-repeat;
  background-position:
    calc(var(--wx, 0px) * -1) calc(var(--wy, 0px) * -1),
    calc(var(--hw, 1000px) * (-1.45 + 1.7 * var(--sheen)) - var(--wx, 0px)) calc(var(--wy, 0px) * -1),
    0 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  padding-bottom: 0.08em; /* room for the descenders, so the light does not cut them */
}

.lo-wrap { width: min(100% - 48px, 1240px); margin-inline: auto; }
.lo-section { padding: 120px 0 0; }
.lo-section.is-tight { padding-top: 64px; }
.lo-head { margin-bottom: 40px; }
.lo-head.is-split { display: flex; align-items: end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.lo-head.is-center { text-align: center; }
.lo-eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; color: var(--muted); font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; }
.lo-eyebrow::before { content: ''; width: 18px; height: 1px; background: #c9cbd0; }
.is-center .lo-eyebrow { justify-content: center; }
.lo-sub { max-width: 440px; color: var(--muted); font-size: 15px; }
.lo-lead { color: #4a4e58; font-size: 18px; line-height: 1.5; }

/* a note from the mock-up itself, not site copy: why the block stands where it stands */
.lo-note {
  display: flex; gap: 10px; align-items: baseline; max-width: 720px; margin-top: 16px; padding: 10px 14px;
  border: 1px dashed rgb(0 0 0 / 0.14); border-radius: 12px; color: var(--muted); font-size: 13px; line-height: 1.45;
}
.lo-note::before { content: 'Заметка'; flex: none; padding: 2px 8px; border-radius: 999px; background: var(--soft-2); color: var(--ink-2); font-size: 11px; font-weight: 600; }
.is-bare .lo-note { display: none; }

/* ---------------------------------------------------------------- the layout switch (demo only) */

.lo-switch {
  display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap; padding: 8px 12px;
  color: var(--muted); font-size: 13px;
}
.lo-switch > span { margin-right: 8px; color: var(--faint); }
.lo-switch a { display: inline-flex; gap: 6px; align-items: center; padding: 5px 12px; border-radius: 999px; }
.lo-switch a b { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--soft-2); box-shadow: var(--edge); font-size: 11px; }
.lo-switch a:hover { color: var(--text); background: var(--soft); }
.lo-switch a[aria-current] { background: var(--solid); box-shadow: var(--edge); color: var(--text); }
.lo-switch a[aria-current] b { background: #111214; color: #fff; box-shadow: none; }
.lo-switch .is-now { margin-left: 8px; color: var(--faint); }
.is-bare .lo-switch { display: none; }

/* ---------------------------------------------------------------- buttons */

.lo-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 46px; padding: 0 22px;
  border: 0; border-radius: 999px; font-size: 15px; font-weight: 500; white-space: nowrap; cursor: pointer;
  transition: background 0.2s, box-shadow 0.25s, translate 0.25s var(--ease), scale 0.2s var(--ease);
}
.lo-btn svg { width: 17px; height: 17px; }
.lo-btn.is-sm { height: 38px; padding: 0 16px; font-size: 14px; }
.lo-btn.is-lg { height: 54px; padding: 0 26px; font-size: 16px; }
.lo-btn.is-block { width: 100%; }
.lo-btn.is-ink { background: #111214; color: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 0.18), 0 12px 26px -16px rgb(0 0 0 / 0.45); }
.lo-btn.is-ink:hover { background: #000; translate: 0 -1px; }
.lo-btn.is-soft { background: var(--soft-2); box-shadow: var(--edge); color: var(--text); }
.lo-btn.is-soft:hover { background: #fff; }
.lo-btn.is-glass { background: rgb(255 255 255 / 0.74); color: var(--text); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.05), var(--float); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.lo-btn.is-glass:hover { background: #fff; }
.lo-btn-note { padding-left: 10px; border-left: 1px solid rgb(255 255 255 / 0.22); color: rgb(255 255 255 / 0.62); font-weight: 400; }
.lo-link { padding: 8px 12px; border-radius: 999px; color: var(--muted); font-size: 14px; font-weight: 500; }
.lo-link:hover { color: var(--text); background: rgb(0 0 0 / 0.04); }
.lo-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.lo-chev { transition: rotate 0.3s var(--ease); }
[aria-expanded='true'] > .lo-chev { rotate: 180deg; }
.lo-round {
  display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgb(255 255 255 / 0.74); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.05), var(--float); color: var(--ink-2);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.lo-round:hover, .lo-round[aria-pressed='true'] { background: #fff; color: var(--text); }
.lo-round svg { width: 18px; height: 18px; }

/* the sound icon: waves when on, a cross when off */
[data-sound] .wave { display: none; }
[data-sound][aria-pressed='true'] .wave { display: inline; }
[data-sound][aria-pressed='true'] .mute { display: none; }

.lo-badge {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; border-radius: 999px;
  background: rgb(255 255 255 / 0.7); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.05), var(--float);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 13px; font-weight: 500;
}
.lo-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #2fa36b; box-shadow: 0 0 0 3px rgb(47 163 107 / 0.14); }

/* ---------------------------------------------------------------- navigation: one light glass pill */

.lo-nav { position: sticky; top: 12px; z-index: 50; height: 0; }
.lo-nav-in {
  /* a compact pill in the middle, not a bar across the page */
  display: flex; align-items: center; gap: 20px; width: min(100% - 24px, 860px); height: var(--nav-h); margin: 12px auto 0; padding: 0 10px 0 22px;
  border-radius: 999px; background: rgb(255 255 255 / 0.78); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.06), 0 12px 32px -18px rgb(16 18 24 / 0.3);
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
}
.lo-brand { display: inline-flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 600; letter-spacing: -0.03em; }
.lo-links { position: relative; display: flex; gap: 2px; margin: 0 auto; }
.lo-links a { padding: 8px 14px; border-radius: 999px; color: var(--muted); font-size: 14px; font-weight: 500; }
.lo-links a:hover, .lo-links a.is-current { color: var(--text); background: rgb(0 0 0 / 0.045); }
.lo-nav-end { display: flex; align-items: center; gap: 6px; }
.lo-nav .lo-btn-note { padding-left: 8px; }
/* how far down the page you are: a hairline along the bottom of the pill (--progress from dev/glide.js) */
.lo-nav-in { position: relative; }
.lo-nav-in::after {
  content: ''; position: absolute; left: 26px; right: 26px; bottom: 0; height: 2px; border-radius: 2px; pointer-events: none;
  background: linear-gradient(90deg, #111214, #6f8fe8 70%, #8fd6c4);
  transform: scaleX(var(--progress, 0)); transform-origin: left center; opacity: calc(0.15 + var(--progress, 0) * 4);
}

/* the menu's module list glides (dev/glide.js): cards fade softly at the edges instead of blinking out */
.sm-grid.is-glide {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade-top, 0px), #000 calc(100% - var(--fade-bottom, 0px)), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade-top, 0px), #000 calc(100% - var(--fade-bottom, 0px)), transparent 100%);
}
.sm-grid.is-glide .sm-card.is-offview { opacity: 1; pointer-events: auto; }
.is-shot .lo-nav { position: absolute; top: 0; left: 0; right: 0; }
.is-shot .v1-faq > header, .is-shot .v2-aside { position: static; }

/* ---------------------------------------------------------------- the first screen and the finale: open, no panels */

.lo-hero { position: relative; }
.lo-section { position: relative; }

/* the voxel landscape (layout.js), full width as on the dark site: it rises behind the buttons, the menu floats over
   it, and it dissolves into the page below — no sky and no edge of its own */
.lo-world {
  position: absolute; left: 0; z-index: -1; width: 100%; overflow: hidden; pointer-events: none; contain: layout paint;
  /* it dissolves into the page at both ends: above, so the sun's light has no edge where the box begins; below the
     hills, with a long eased fade, so the near ridge has no edge either */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 9%, #000 70%, rgb(0 0 0 / 0.55) 83.5%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 9%, #000 70%, rgb(0 0 0 / 0.55) 83.5%, transparent);
}
/* its layers (layout.js) are moved by the graphics card, never painted again while the page scrolls */
.lo-world > * { position: absolute; left: 0; top: 0; display: block; will-change: transform, opacity; }
.lo-world > .is-still { will-change: auto; }
.lo-world > i, .lo-world > .lo-sun, .lo-world > .lo-leaf { image-rendering: pixelated; }
/* the bees and the allay (layout.js): one canvas over the landscapes (z -1) and under every block of the page —
   those are positioned and come later, so they paint above it; for that the few top-level blocks that are not
   positioned yet become so */
.lo-critters { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; pointer-events: none; image-rendering: pixelated; }
.lo-switch, .lo-footer, .v2-body { position: relative; }
/* a fold opening in the first screen (--fold, from layout.js) makes the screen taller but not the world: it keeps its
   size, so it is never repainted or stretched while the fold moves */
.lo-world.is-hero { top: 140px; height: calc(100% - 140px + 180px - var(--fold, 0px)); }
.lo-world.is-finale { top: -60px; height: calc(100% + 60px); }
.lo-hero > :not(.lo-world), .lo-final > :not(.lo-world) { position: relative; z-index: 1; }

.lo-final { position: relative; margin-top: 140px; padding: 150px 24px 280px; text-align: center; }
.lo-final h2 { font-size: clamp(48px, 7vw, 96px); letter-spacing: -0.045em; }
.lo-final h2 em { color: var(--text); }
.lo-final .lo-actions { justify-content: center; margin-top: 36px; }
.lo-final .lo-channels { justify-content: center; margin-top: 28px; }

/* ---------------------------------------------------------------- the menu stage and full screen */

.lo-stage { position: relative; }
.lo-menu-host { width: 100%; min-height: 300px; }
.lo-stage-close {
  position: absolute; top: 14px; right: 14px; z-index: 5; display: none; width: 40px; height: 40px; place-items: center;
  border: 0; border-radius: 50%; background: rgb(255 255 255 / 0.85); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.08); cursor: pointer;
}
.lo-stage-close svg { width: 18px; height: 18px; }
.lo-stage.is-full { position: fixed; inset: 0; z-index: 200; margin: 0 !important; background: var(--bg); }
.lo-stage.is-full .lo-menu-host, .lo-stage.is-full .sm-stage { width: 100%; height: 100%; }
.lo-stage.is-full .lo-stage-close { display: grid; }
body.is-locked { overflow: hidden; }
body.is-locked .lo-nav, body.is-locked .v2-mbar { visibility: hidden; }

/* the menu in its light theme (as in dev/white.css) */
.sm-stage.is-light .sm-glass::before { background: linear-gradient(rgb(255 255 255 / 0.9), rgb(0 0 0 / 0.04)); }
.sm-stage.is-light .sm-plate { background: linear-gradient(rgb(255 255 255 / 0.94), rgb(255 255 255 / 0.82)) !important; }
.sm-stage.is-light .sm-card.is-hot .sm-plate { background: #fff !important; }
.sm-stage.is-light .sm-search, .sm-stage.is-light .sm-tool { background: linear-gradient(rgb(255 255 255 / 0.96), rgb(255 255 255 / 0.86)) !important; }
.sm-stage.is-light .sm-indicator { background: linear-gradient(rgb(229 235 252 / 0.96), rgb(220 228 250 / 0.92)) !important; }
.sm-stage.is-light .sm-glass { box-shadow: 0 1px 2px rgb(16 18 24 / 0.05), 0 8px 18px -12px rgb(16 18 24 / 0.22); }
.sm-stage.is-light.is-floating .sm-window-bg { box-shadow: 0 1px 2px rgb(16 18 24 / 0.06), 0 40px 90px -40px rgb(16 18 24 / 0.38), 0 0 0 1px rgb(255 255 255 / 0.7); }
.sm-stage.is-light .sm-press-shade { background: rgb(0 0 0 / 0.04); }
/* the window's glass is nearly opaque on the light page: the bright hills behind would otherwise show through it
   in blocks and muddy the menu */
.sm-stage.is-light .sm-window-bg::before { opacity: 0.98; }
/* full screen: the client dims the world behind its window; on the light page that veil is white, not black */
.sm-stage.is-light .sm-dim { background: rgb(255 255 255 / 0.3); }

/* menu controls, as text buttons with icons */
.v2-dock button {
  display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border: 0; border-radius: 999px;
  background: none; color: var(--muted); font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap;
}
.lo-sep { width: 1px; height: 20px; margin: 0 6px; background: rgb(0 0 0 / 0.1); }

/* ---------------------------------------------------------------- shared blocks */

.lo-card { position: relative; isolation: isolate; overflow: hidden; padding: 32px; border-radius: var(--r-card); background: var(--soft); box-shadow: var(--edge); }
.lo-card.is-white { background: var(--solid); box-shadow: var(--edge), var(--float-up); }
.lo-card h3 { margin-bottom: 10px; }
.lo-card p { color: var(--muted); font-size: 15px; }
.lo-card p b { color: var(--text); font-weight: 600; }
.lo-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 22px; border-radius: 13px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); }
.lo-icon svg { width: 20px; height: 20px; }

.lo-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
.lo-steps li { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: var(--r-inner); background: var(--soft); box-shadow: var(--edge); }
.lo-steps .lo-step-n { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); font-size: 12px; font-weight: 600; }
.lo-steps b { display: block; font-size: 15px; font-weight: 600; }
.lo-steps small { display: block; margin-top: 2px; color: var(--muted); font-size: 13.5px; line-height: 1.4; }
/* a step that leads somewhere: the whole card is the link; an arrow wakes up and slides on hover */
.lo-steps li:has(> .lo-step-go) { padding: 0; }
.lo-step-go { display: flex; gap: 14px; align-items: flex-start; width: 100%; height: 100%; padding: 18px 20px; border-radius: inherit; }
.lo-step-go:focus-visible { outline-offset: -2px; border-radius: var(--r-inner); }
.lo-step-arrow { flex: none; width: 18px; height: 18px; margin: 4px 0 0 auto; color: var(--faint); opacity: 0.55; transition: translate 0.35s var(--ease), color 0.25s, opacity 0.25s; }
.lo-step-go b { transition: color 0.25s; }
.lo-step-go:hover .lo-step-arrow, .lo-step-go:focus-visible .lo-step-arrow { translate: 4px 0; color: var(--text); opacity: 1; }
.lo-step-go:active { scale: 0.98; }
.lo-step-go { transition: scale 0.2s var(--ease); }
.lo-steps.is-small { grid-template-columns: 1fr; gap: 8px; }
.lo-steps.is-small li { padding: 12px 14px; background: var(--solid); }
.lo-steps.is-mini { grid-template-columns: 1fr; gap: 0; margin: 18px 0 0; }
.lo-steps.is-mini li { padding: 7px 0; background: none; gap: 12px; align-items: center; }
.lo-steps.is-mini .lo-step-n { width: 22px; height: 22px; font-size: 11px; }
.lo-steps.is-mini b { display: inline; font-size: 13.5px; }
.lo-steps.is-mini small { display: inline; margin: 0 0 0 4px; font-size: 13px; }

.lo-acc details { border-bottom: 1px solid var(--line); }
.lo-acc summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0; cursor: pointer; list-style: none;
  font-size: 17px; font-weight: 500; letter-spacing: -0.01em;
}
.lo-acc summary::-webkit-details-marker { display: none; }
.lo-acc summary::after { content: '+'; flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--soft); color: var(--ink-2); font-size: 18px; font-weight: 400; transition: rotate 0.3s var(--ease); }
.lo-acc details[open] summary::after { rotate: 45deg; }
.lo-acc details p { padding: 0 48px 22px 0; color: var(--muted); font-size: 15px; }
.lo-acc details a { color: var(--text); text-decoration: underline; text-decoration-color: rgb(0 0 0 / 0.25); text-underline-offset: 3px; }
.lo-acc.is-cols { column-count: 2; column-gap: 48px; }
.lo-acc.is-cols details { break-inside: avoid; }

.lo-channels { display: flex; flex-wrap: wrap; gap: 8px; }
.lo-channels.is-stack { flex-direction: column; align-items: flex-start; gap: 4px; }
.lo-chan {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 999px;
  background: #fff; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); font-size: 13.5px; font-weight: 500;
}
.lo-chan svg { width: 16px; height: 16px; }
.lo-chan small { color: var(--faint); font-size: 12px; font-weight: 400; }
.lo-chan.is-soon { cursor: default; }
.is-stack .lo-chan { height: auto; padding: 4px 0; background: none; box-shadow: none; color: var(--muted); }

.lo-ref { display: flex; align-items: center; gap: 10px; margin: 24px 0; padding: 16px 18px; border-radius: var(--r-inner); background: rgb(255 255 255 / 0.8); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.04), var(--float); }
.lo-ref-node { display: flex; flex-direction: column; }
.lo-ref-node i { font-style: normal; font-weight: 600; font-size: 15px; }
.lo-ref-node small { color: var(--muted); font-size: 12.5px; }
.lo-ref-node.is-bonus i { font-size: 17px; }
.lo-ref-line { flex: 1; min-width: 18px; height: 1px; background: linear-gradient(to right, rgb(0 0 0 / 0.08), rgb(0 0 0 / 0.22)); }
.lo-ref.is-column { flex-direction: column; align-items: stretch; margin: 0; padding: 22px; }
.lo-ref.is-column .lo-ref-line { flex: none; min-width: 0; width: 1px; height: 18px; margin-left: 12px; background: linear-gradient(rgb(0 0 0 / 0.08), rgb(0 0 0 / 0.22)); }

.lo-nums { display: flex; gap: 28px; }
.lo-nums li { display: flex; flex-direction: column; }
.lo-nums b { font-size: 26px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; }
.lo-nums span { max-width: 150px; margin-top: 4px; color: var(--muted); font-size: 13px; line-height: 1.35; }
.lo-nums.is-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 24px; margin: 22px 0 26px; }
.lo-nums.is-grid span { max-width: none; }

.lo-req { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.lo-req-card { padding: 18px 20px; border-radius: var(--r-inner); background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.lo-req-card h4 { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 14px; font-weight: 600; }
.lo-req-card h4 svg { width: 18px; height: 18px; }
.lo-req-card dl { margin: 0; }
.lo-req-card dl div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.lo-req-card dt { color: var(--muted); }
.lo-req-card dd { margin: 0; font-weight: 600; text-align: right; }

.lo-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--soft); box-shadow: var(--edge); }
.lo-tabs button { height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: none; color: var(--muted); font-size: 14px; font-weight: 500; cursor: pointer; }
.lo-tabs button small { margin-left: 4px; color: var(--faint); }
.lo-tabs button:hover { color: var(--text); }
.lo-tabs button[aria-selected='true'] { background: #fff; color: var(--text); box-shadow: var(--float); }
.lo-panel[hidden] { display: none; }
.lo-panel { animation: lo-in 0.4s var(--ease); }
@keyframes lo-in { from { opacity: 0; translate: 0 8px; } }

.lo-seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; max-width: 420px; padding: 4px; border-radius: 999px; background: rgb(255 255 255 / 0.62); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.05); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.lo-seg button { height: 40px; border: 0; border-radius: 999px; background: none; color: var(--muted); font-size: 14px; font-weight: 500; cursor: pointer; }
.lo-seg button:hover { color: var(--text); }
.lo-seg button[aria-checked='true'] { background: #111214; color: #fff; box-shadow: 0 6px 14px -8px rgb(0 0 0 / 0.5); }
.lo-tag { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; background: rgb(255 255 255 / 0.75); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.08); color: var(--ink-2); font-size: 12px; font-weight: 500; letter-spacing: 0; }
.lo-tag:empty { display: none; }

.lo-checks li { position: relative; padding: 9px 0 9px 30px; border-bottom: 1px solid var(--line); font-size: 15px; }
.lo-checks li::before { content: ''; position: absolute; left: 2px; top: 14px; width: 16px; height: 16px; border-radius: 50%; background: #111214 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 10px no-repeat; }

.lo-empty { display: flex; flex-direction: column; gap: 6px; align-items: center; padding: 64px 24px; border-radius: var(--r-card); border: 1px dashed var(--line-strong); text-align: center; }
.lo-empty span { color: var(--muted); font-size: 15px; }

/* ---------------------------------------------------------------- footer */

.lo-footer { margin-top: 24px; padding: 72px 0 40px; }
.lo-footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 40px; border-bottom: 1px solid var(--line); }
.lo-footer-about p { max-width: 320px; margin-top: 14px; color: var(--muted); font-size: 14px; }
.lo-footer-about a:not(.lo-brand) { color: var(--text); text-decoration: underline; text-decoration-color: rgb(0 0 0 / 0.2); text-underline-offset: 3px; }
.lo-footer nav { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.lo-footer h4 { margin-bottom: 6px; color: var(--faint); font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; }
.lo-footer nav > a { color: var(--muted); font-size: 14px; }
.lo-footer nav > a:hover { color: var(--text); }
.lo-footer-note { margin-top: 24px; color: var(--faint); font-size: 12.5px; }

/* ================================================================ 1 · Порядок */

/* the versions badge sits just under the navigation; the heading and everything below keep their place */
.v1-hero { padding: calc(var(--nav-h) + 32px) 0 24px; text-align: center; }
.v1-copy { display: flex; flex-direction: column; align-items: center; padding: 0 24px; }
.v1-copy h1 { margin-top: 88px; }
.v1-copy .lo-lead { max-width: 640px; margin-top: 22px; }
.v1-copy .lo-actions { justify-content: center; margin-top: 34px; }
/* «Как начать»: the three steps unfold under the buttons, as frosted glass over the landscape. The room opens
   smoothly, and the cards come in one after another — out of a blur, rising and growing to size with a little
   spring — then each number fills in black with a ring of light. Closing is quick and all at once. */
.v1-howto { width: min(100%, 860px); text-align: left; }
.v1-howto.lo-fold { transition: grid-template-rows 0.6s cubic-bezier(0.2, 0.9, 0.25, 1), opacity 0.25s; }
.v1-howto .lo-steps { margin: 0; padding: 18px 4px 8px; }
.v1-howto .lo-steps li {
  --d: calc(0.08s + var(--n, 0) * 0.09s);
  background: rgb(255 255 255 / 0.74); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.05), var(--float);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: opacity 0.5s var(--ease) var(--d), transform 0.7s cubic-bezier(0.2, 1.25, 0.3, 1) var(--d),
    filter 0.5s var(--ease) var(--d), translate 0.4s var(--ease), box-shadow 0.4s var(--ease), background 0.3s;
}
.v1-howto .lo-steps li:nth-child(2) { --n: 1; }
.v1-howto .lo-steps li:nth-child(3) { --n: 2; }
.v1-howto:not(.is-open) .lo-steps li {
  opacity: 0; transform: translateY(-12px) scale(0.94); filter: blur(8px);
  transition-duration: 0.2s; transition-delay: 0s;
}
.v1-howto .lo-steps .lo-step-n { transition: background 0.3s, color 0.3s, box-shadow 0.3s; }
.v1-howto.is-open .lo-steps .lo-step-n {
  background: #111214; color: #fff; box-shadow: none;
  transition-delay: calc(var(--d) + 0.25s);
  animation: lo-step-ring 0.9s var(--ease) calc(var(--d) + 0.25s) backwards;
}
@keyframes lo-step-ring {
  from { box-shadow: 0 0 0 0 rgb(var(--ring, 17 18 20) / 0.35); scale: 0.6; }
  40% { scale: 1.12; }
  to { box-shadow: 0 0 0 10px rgb(var(--ring, 17 18 20) / 0); scale: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .v1-howto .lo-steps li, .v1-howto .lo-steps .lo-step-n { transition: none; animation: none; }
}
/* the window: the menu alone, a little under the buttons */
.v1-window { width: min(100% - 24px, 1240px); margin: 4px auto 0; text-align: left; }
.v1-window .lo-stage { margin-top: calc(20px - var(--stage-my, 56px)); }
/* the menu's stage reaches up past its window (an empty margin round it); the buttons above stay in front of it,
   so that margin never catches their clicks */
.lo-hero > .v1-copy { z-index: 2; }

.v1-plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.v1-plan { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; padding: 24px; border-radius: var(--r-card); background: var(--soft); box-shadow: var(--edge); }
.v1-plan-term { font-size: 15px; font-weight: 600; }
.v1-plan-price { margin-top: 26px; font-size: 40px; font-weight: 500; letter-spacing: -0.04em; line-height: 1; }
.v1-plan-price small { font-size: 22px; color: var(--muted); }
.v1-plan-per { margin: 8px 0 26px; color: var(--muted); font-size: 14px; }
.v1-plan .lo-btn { margin-top: auto; }
.v1-plan .lo-tag { position: absolute; top: 20px; right: 20px; }
.v1-plan.is-best { background: var(--solid); box-shadow: var(--edge), var(--float-up); }

.v1-why { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.v1-why li { padding-top: 22px; border-top: 1px solid var(--line-strong); }
.v1-why svg { width: 22px; height: 22px; margin-bottom: 18px; color: var(--ink-2); }
.v1-why b { display: block; margin-bottom: 8px; font-size: 16px; font-weight: 600; }
.v1-why span { color: var(--muted); font-size: 14.5px; }

.v1-bonus { display: grid; grid-template-columns: 1.7fr 1fr; gap: 12px; }
.v1-bonus .lo-card { display: flex; flex-direction: column; align-items: flex-start; }
.v1-bonus .lo-card .lo-channels { margin-top: auto; padding-top: 24px; }
.v1-bonus .lo-ref { align-self: stretch; }

.v1-media-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.v1-media-copy h3 { font-size: 24px; letter-spacing: -0.025em; }
.v1-media-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line-strong); }
.v1-media-nums span { max-width: 220px; }
.v1-media-more { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; align-items: start; margin-top: 28px; }
.v1-media-more .lo-steps { margin: 0; }
.v1-media-more .lo-btn { grid-column: 2; justify-self: start; }

/* ---------------------------------------------------------------- the HUD section, five arrangements (dev/hudshow.js)

   The client's widgets (dev/hud) straight on the page, zoomed past their in-game size (they are drawn at the client's
   pixels for 1080p) so they read on a web page; zoom, not a transform, so their text is laid out sharp at that size. */
.hudv-switch { margin: -8px 0 18px; justify-content: flex-start; padding: 0; }
.hudv-lead { margin: -22px auto 0; text-align: center; }
.hudv-w { zoom: var(--z, 1.3); }
.hudv figcaption { color: var(--muted); font-size: 13.5px; }
.hudv figure { margin: 0; }

/* a screen of the game: the page's own voxel world under a sky of the theme (a day, or the blue hour) */
.v1-screen {
  --sky-top: #9fc4f6; --sky-bottom: #e6effc;
  position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-card);
  background: linear-gradient(var(--sky-top), var(--sky-bottom) 72%);
  box-shadow: var(--edge), var(--float-up);
}
[data-theme='dark'] .v1-screen { --sky-top: #060a16; --sky-bottom: #172140; }
.lo-world.is-screen { top: 0; height: 100%; z-index: 0; -webkit-mask-image: none; mask-image: none; }

/* 1 · Разлёт: free, each at its own place (still: a constant motion would repaint them all every frame). Upright and
   at their own size: a widget turned by a few degrees or scaled is drawn as a picture and then turned, and its text
   blurs until the browser draws it again — so the scatter is in the places alone (--r is no longer used). */
.hudv-1 { position: relative; height: 600px; margin-top: 40px; }
.hudv-float { position: absolute; left: var(--x); top: var(--y); display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.hudv-float figcaption { padding-left: 6px; }
.hudv-float.is-target { --z: 1.55; }
.hudv-float.is-notifications { flex-direction: column-reverse; } /* the toasts grow downward: the name stays above them */
/* under the cursor a widget lifts with monopo's long ease-out, its shadow deepening; while the cursor moves over it, it
   leans a few whole pixels after it (--px, --py from dev/hudshow.js, set on each move, so the lean trails like the
   cursor's dot). The others step back a little. */
.hudv-float { --ease-ref: cubic-bezier(0.19, 1, 0.22, 1); transition: opacity 0.6s var(--ease-ref), filter 0.6s var(--ease-ref); }
.hudv-float .hudv-w { transform: translate(var(--px, 0px), var(--py, 0px)); transition: transform 0.9s var(--ease-ref), filter 0.9s var(--ease-ref); }
.hudv-float figcaption { transition: color 0.4s, translate 0.9s var(--ease-ref); }
.hudv-float:hover { z-index: 3; animation-play-state: paused; }
.hudv-float:hover .hudv-w {
  transform: translate(var(--px, 0px), calc(var(--py, 0px) - 18px));
  filter: drop-shadow(0 26px 34px rgb(16 18 24 / 0.2));
}
[data-theme='dark'] .hudv-float:hover .hudv-w { filter: drop-shadow(0 26px 40px rgb(0 0 0 / 0.6)) drop-shadow(0 0 30px rgb(126 166 244 / 0.12)); }
.hudv-float:hover figcaption { color: var(--text); translate: 0 -6px; }
@media (hover: hover) and (pointer: fine) {
  .hudv-1:has(.hudv-float:hover) .hudv-float:not(:hover) { opacity: 0.45; filter: blur(1.5px); }
}

/* 2 · Витрина: a tile per widget; the widget big on a strip of sky over grass, its name and use underneath */
.hudv-2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.hudv-tile { display: flex; flex-direction: column; padding: 10px; }
.hudv-stage {
  --sky: #cfe0f7; --sky-2: #eef4fd; --grass: #8cc96a; --grass-2: #7ab85a;
  display: grid; place-items: center; height: 230px; border-radius: 16px; overflow: hidden;
  background:
    linear-gradient(transparent 82%, var(--grass) 82% 86%, var(--grass-2) 86%),
    linear-gradient(var(--sky), var(--sky-2));
}
[data-theme='dark'] .hudv-stage { --sky: #070b18; --sky-2: #182240; --grass: #20343a; --grass-2: #121d22; }
.hudv-tile .hudv-w { --z: 1.35; }
.hudv-tile.is-target .hudv-w { --z: 1.45; }
.hudv-tile figcaption { display: flex; flex-direction: column; gap: 2px; padding: 16px 12px 8px; }
.hudv-tile figcaption b { color: var(--text); font-size: 16px; font-weight: 600; }

/* 3 · Вокруг заголовка: the section is the screen — marks in its corners, the widgets pinned near them */
.hudv-3 { position: relative; display: grid; grid-template: auto 1fr auto / 1fr 1fr; min-height: 720px; padding: 34px; }
.hudv-mark { position: absolute; width: 34px; height: 34px; border: 0 solid var(--line-strong); pointer-events: none; }
.hudv-mark.is-tl { left: 0; top: 0; border-width: 2px 0 0 2px; border-top-left-radius: 14px; }
.hudv-mark.is-tr { right: 0; top: 0; border-width: 2px 2px 0 0; border-top-right-radius: 14px; }
.hudv-mark.is-bl { left: 0; bottom: 0; border-width: 0 0 2px 2px; border-bottom-left-radius: 14px; }
.hudv-mark.is-br { right: 0; bottom: 0; border-width: 0 2px 2px 0; border-bottom-right-radius: 14px; }
.hudv-pin { display: flex; gap: 12px; align-items: flex-start; }
.hudv-pin .hudv-w { --z: 1.2; }
.hudv-pin.is-tr, .hudv-pin.is-br { justify-content: flex-end; }
.hudv-pin.is-bl, .hudv-pin.is-br { align-self: end; align-items: flex-end; }
.hudv-mid { grid-column: 1 / -1; align-self: center; display: flex; flex-direction: column; align-items: center; padding: 40px 0; text-align: center; }
.hudv-mid .lo-head { margin-bottom: 14px; }
.hudv-cross { width: 22px; height: 22px; margin-top: 34px; opacity: 0.6;
  background: linear-gradient(var(--text) 0 0) center / 2px 22px no-repeat, linear-gradient(var(--text) 0 0) center / 22px 2px no-repeat; }

/* 4 · По шагам: the list steps through the widgets; the chosen one large on a screen of the game */
.hudv-4 { display: grid; grid-template-columns: 340px 1fr; gap: 20px; align-items: stretch; }
.hudv-tabs { display: flex; flex-direction: column; gap: 6px; }
.hudv-tabs button {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 14px 18px 16px; border: 0; border-radius: 16px;
  background: none; text-align: left; cursor: pointer; transition: background 0.25s, box-shadow 0.25s;
}
.hudv-tabs b { color: var(--ink-2); font-size: 15.5px; font-weight: 600; }
.hudv-tabs small { color: var(--muted); font-size: 13px; }
.hudv-tabs i { position: absolute; left: 18px; right: 18px; bottom: 7px; height: 2px; border-radius: 2px; background: var(--line); opacity: 0; }
.hudv-tabs i::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--text); transform-origin: left; transform: scaleX(var(--p, 0)); }
.hudv-tabs button:hover { background: var(--soft); }
.hudv-tabs button[aria-selected='true'] { background: var(--solid); box-shadow: var(--edge), var(--float); }
.hudv-tabs button[aria-selected='true'] b { color: var(--text); }
.hudv-tabs button[aria-selected='true'] i { opacity: 1; }
.hudv-screen { min-height: 470px; }
.hudv-slots { position: absolute; inset: 0; z-index: 1; display: grid; }
.hudv-slot { grid-area: 1 / 1; display: grid; place-items: center; opacity: 0; scale: 0.94; filter: blur(6px);
  transition: opacity 0.45s var(--ease), scale 0.6s var(--ease), filter 0.45s var(--ease); pointer-events: none; }
.hudv-slot.is-on { opacity: 1; scale: 1; filter: none; }
.hudv-slot .hudv-w { --z: 1.9; }
.hudv-slot.is-target .hudv-w { --z: 2.1; }

/* 5 · Лента: an endless band, the same widgets twice, drifting; it rests under the cursor */
.hudv-5 { overflow: hidden; margin: 40px calc(50% - 50vw) 0; padding: 20px 0 10px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.hudv-track { display: flex; align-items: flex-start; gap: 44px; width: max-content; animation: hudv-drift 60s linear infinite; }
.hudv-5:hover .hudv-track { animation-play-state: paused; }
@keyframes hudv-drift { to { translate: calc(-50% - 22px) 0; } }
.hudv-band { display: flex; flex-direction: column; gap: 12px; }
.hudv-band .hudv-w { --z: 1.3; }
.hudv-band.is-notifications { min-width: 330px; min-height: 150px; }
.hudv-band figcaption { max-width: 260px; }
.hudv-band figcaption b { color: var(--text); font-weight: 600; }
.is-still .hudv-float, .is-still .hudv-track { animation: none; }
@media (prefers-reduced-motion: reduce) { .hudv-float, .hudv-track { animation: none; } }

/* 6 · Подборка, after monopo saigon: big frames in two columns, the right one set lower; in each frame a widget on a
   flow of colour (dev/frames.js draws it under the frame, which stays a plain transparent box), the name and a line */
.hudg-lead { margin-top: -18px; }
.hudg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 7%; row-gap: 40px; margin-top: 48px; }
.hudg-item:nth-child(even) { translate: 0 72px; }
.hudg-item:last-child { margin-bottom: 72px; }
.hudg-frame { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; padding: 24px; border-radius: 18px; box-shadow: var(--edge); } /* no clipping: a tall widget grows its frame rather than being cut */
.hudg-item:nth-child(4n + 1) .hudg-frame, .hudg-item:nth-child(4n) .hudg-frame { aspect-ratio: 4 / 3; }
.hudg-frame .hudv-w { --z: 1.5; transition: scale 0.8s var(--ease); }
.hudg-item.is-target .hudv-w { --z: 1.7; }
.hudg-item:hover .hudv-w { scale: 1.04; }
.hudg-item figcaption { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: baseline; padding: 14px 2px 0; }
.hudg-n { grid-row: span 2; color: var(--faint); font-size: 13px; font-variant-numeric: tabular-nums; }
.hudg-item figcaption b { color: var(--text); font-size: 22px; font-weight: 500; letter-spacing: -0.02em; }
.hudg-item figcaption small { color: var(--muted); font-size: 13.5px; }

/* the menu, out of the first screen into a frame of its own right after it (?menu=hero keeps it where it was) */
.v1-menu-sec .hudg-frame.is-menu-frame { aspect-ratio: auto; display: block; padding: 8px 0 26px; }
.v1-menu-sec .v1-window { margin: 0 auto; }
.v1-menu-sec .v1-window .lo-stage { margin-top: calc(10px - var(--stage-my, 56px)); }
.v1-hero.is-solo { --hero-min: max(720px, 100svh); min-height: var(--hero-min); }
/* the screen is at least the window's height, so a fold opening inside that room («Как начать») leaves it as tall as
   it was: the world gives back only what the screen really grew by, or it would shrink and be painted again on every
   frame of the fold */
.v1-hero.is-solo .lo-world.is-hero { height: max(var(--hero-min) - 140px + 60px, 100% - 140px + 60px - var(--fold, 0px)); }

/* the cursor's dot (dev/cursor.js), as on monopo saigon: the element sits on the pointer's spot, moved by a long
   ease-out that restarts with every move — so it trails the pointer and settles late; inside it the disc changes size
   by the same ease. White and blended by difference, it reads on the day and the night alike. */
.cur {
  --ease-ref: cubic-bezier(0.19, 1, 0.22, 1);
  position: fixed; left: 0; top: 0; z-index: 650; width: 0; height: 0; pointer-events: none;
  transition: transform 0.8s var(--ease-ref);
}
.cur-in {
  position: absolute; left: -50px; top: -50px; display: grid; place-items: center; width: 100px; height: 100px; border-radius: 50%;
  background: #fff; mix-blend-mode: difference; opacity: 0; scale: 0.1;
  transition: scale 0.8s var(--ease-ref), opacity 0.4s linear, background 0.3s linear;
}
.cur.is-on .cur-in { opacity: 1; }
.cur[data-state='link'] .cur-in { scale: 0.26; }
.cur.is-down .cur-in { scale: 0.07; }
.cur[data-state='away'] .cur-in { scale: 0; opacity: 0; }
/* over a widget or a frame: a disc of the page's ink with a word or an arrow, no longer blended */
.cur[data-state='label'] .cur-in, .cur[data-state='view'] .cur-in { scale: 0.7; mix-blend-mode: normal; background: #111214; }
[data-theme='dark'] .cur[data-state='label'] .cur-in, [data-theme='dark'] .cur[data-state='view'] .cur-in { background: #f4f5f8; }
.cur-label, .cur-arrow { grid-area: 1 / 1; color: #fff; opacity: 0; scale: 0; transition: scale 0.8s var(--ease-ref) 0.15s, opacity 0.3s linear; }
.cur-label { font-size: 13px; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; }
.cur-arrow svg { width: 22px; height: 22px; stroke-width: 1.8; }
[data-theme='dark'] .cur-label, [data-theme='dark'] .cur-arrow { color: #111214; }
.cur[data-state='label'] .cur-label, .cur[data-state='view'] .cur-arrow { opacity: 1; scale: 1; }
.frames-gl { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; pointer-events: none; }

@media (max-width: 900px) {
  .hudg { grid-template-columns: 1fr; row-gap: 32px; }
  .hudg-item:nth-child(even) { translate: none; }
  .hudg-item:last-child { margin-bottom: 0; }
  .hudg-frame, .hudg-item:nth-child(4n + 1) .hudg-frame, .hudg-item:nth-child(4n) .hudg-frame { aspect-ratio: 16 / 10; }
  .hudg-frame .hudv-w { --z: 1.25; }
}
@media (max-width: 900px) {
  .hudv-1 { height: auto; display: flex; flex-wrap: wrap; gap: 28px 20px; justify-content: center; }
  .hudv-float { position: static; rotate: none; }
  .hudv-2 { grid-template-columns: 1fr 1fr; }
  .hudv-3 { display: flex; flex-direction: column; gap: 24px; min-height: 0; }
  .hudv-pin { flex-wrap: wrap; justify-content: center !important; }
  .hudv-mid { order: -1; padding: 10px 0; }
  .hudv-4 { grid-template-columns: 1fr; }
  .hudv-tabs { flex-direction: row; overflow-x: auto; }
  .hudv-tabs li { flex: none; width: 220px; }
}
@media (max-width: 560px) {
  .hudv-2 { grid-template-columns: 1fr; }
  .hudv-w { --z: 1.1; }
  .hudv-slot .hudv-w { --z: 1.3; }
}

.v1-faq { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
.v1-faq > header { position: sticky; top: 100px; }
.v1-faq .lo-sub { margin-top: 18px; }
.v1-help { display: flex; flex-direction: column; gap: 14px; margin-top: 32px; padding: 22px; border-radius: var(--r-card); background: var(--soft); box-shadow: var(--edge); }
.v1-help b { display: block; font-size: 15px; font-weight: 600; }
.v1-help span { color: var(--muted); font-size: 14px; }

/* ================================================================ 2 · Покупка рядом */

.v2-hero { padding: calc(var(--nav-h) + 84px) 0 40px; }
.v2-head { display: grid; grid-template-columns: 1.25fr 1fr; gap: 48px; align-items: end; }
.v2-head h1 { margin-top: 26px; }
.v2-side .lo-actions { margin-top: 26px; }
.v2-facts { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 18px; color: var(--muted); font-size: 13.5px; }
.v2-facts span::before { content: '✓'; margin-right: 6px; color: var(--ink-2); }
.v2-stage-wrap { position: relative; width: min(100% - 24px, 1240px); margin: 24px auto 0; }
/* the dock sits on the lower edge of the menu window */
.v2-dock {
  position: absolute; left: 50%; bottom: calc(var(--stage-my, 56px) - 30px); z-index: 3; translate: -50% 0;
  display: flex; align-items: center; gap: 2px; padding: 6px; border-radius: 22px;
  background: rgb(255 255 255 / 0.82); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.06), var(--float-up);
  backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
}
.v2-dock button { flex-direction: column; gap: 3px; height: 50px; min-width: 70px; padding: 0 10px; border-radius: 16px; font-size: 11.5px; }
.v2-dock button svg { width: 18px; height: 18px; }
.v2-dock button:hover, .v2-dock button[aria-pressed='true'] { background: rgb(0 0 0 / 0.05); color: var(--text); }

.v2-body { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 56px; align-items: start; padding-top: 112px; }
.v2-sec + .v2-sec { margin-top: 112px; }
.v2-aside { position: sticky; top: calc(var(--nav-h) + 32px); }
.v2-buy { position: relative; isolation: isolate; overflow: hidden; padding: 24px; border-radius: 28px; background: var(--solid); box-shadow: var(--edge), var(--float-up); }
.v2-buy-name { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; font-size: 17px; font-weight: 600; }
.v2-buy-name span { color: var(--faint); font-weight: 500; }
.v2-terms { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.v2-terms button {
  display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 12px; padding: 12px 14px; border: 0; border-radius: 14px; text-align: left;
  background: rgb(255 255 255 / 0.55); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.06); cursor: pointer; transition: box-shadow 0.2s, background 0.2s;
}
.v2-terms button::before { content: ''; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgb(0 0 0 / 0.2); }
.v2-terms button[aria-checked='true'] { background: #fff; box-shadow: inset 0 0 0 1.5px #111214, var(--float); }
.v2-terms button[aria-checked='true']::before { box-shadow: inset 0 0 0 5.5px #111214; }
.v2-terms b { display: block; font-size: 15px; font-weight: 600; }
.v2-terms small { display: block; color: var(--muted); font-size: 12.5px; }
.v2-terms strong { font-size: 16px; font-weight: 600; letter-spacing: -0.02em; }
.v2-terms .lo-tag { height: 20px; margin-left: 6px; padding: 0 7px; font-size: 10.5px; vertical-align: 1px; }
.v2-buy-foot { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13.5px; }
.v2-buy-foot a { color: var(--text); font-weight: 500; }
.v2-aside .lo-note { margin-top: 14px; }

.v2-cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.v2-cat { display: flex; flex-direction: column; padding: 24px; border-radius: var(--r-card); background: var(--soft); box-shadow: var(--edge); }
.v2-cat-head { display: flex; align-items: center; gap: 12px; }
.v2-cat-head .lo-icon { margin: 0; }
.v2-cat-head b { display: block; font-size: 17px; font-weight: 600; }
.v2-cat-head small { color: var(--muted); font-size: 13px; }
.v2-cat ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 20px 0; }
.v2-cat li { padding: 5px 10px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; }
.v2-cat button { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding: 0; border: 0; background: none; color: var(--ink-2); font-size: 14px; font-weight: 500; cursor: pointer; }
.v2-cat button svg { width: 16px; height: 16px; transition: translate 0.25s var(--ease); }
.v2-cat button:hover svg { translate: 3px 0; }

.v2-why { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 40px; }
.v2-why li { display: grid; grid-template-columns: 40px 1fr; gap: 16px; }
.v2-why svg { width: 40px; height: 40px; padding: 10px; border-radius: 12px; background: var(--soft); color: var(--ink-2); }
.v2-why b { display: block; margin-bottom: 4px; font-size: 16px; font-weight: 600; }
.v2-why span { color: var(--muted); font-size: 14.5px; }

.v2-ref { display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; align-items: center; }
.v2-ref .lo-btn { margin-top: 22px; }
.v2-row { display: flex; align-items: center; gap: 16px; margin-top: 12px; padding: 16px 18px; border-radius: var(--r-card); box-shadow: inset 0 0 0 1px var(--line); }
.v2-row .lo-icon { flex: none; margin: 0; }
.v2-row p { color: var(--muted); font-size: 14.5px; }
.v2-row p b { color: var(--text); font-weight: 600; }
.v2-row .lo-channels { flex: none; }
.v2-media .lo-btn { margin-top: 0; }
.v2-media .lo-nums.is-grid { grid-template-columns: repeat(4, 1fr); }

.v2-mbar { display: none; }

/* ================================================================ 3 · Экскурсия */

.v3-hero { padding: calc(var(--nav-h) + 92px) 0 24px; }
.v3-head { display: grid; grid-template-columns: auto 1fr; gap: 56px; align-items: end; }
.v3-head h1 { font-size: clamp(48px, 6.6vw, 96px); }
.v3-head-side { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 400px; justify-self: end; padding-bottom: 6px; }
.v3-head-side .lo-lead { font-size: 16.5px; }
.v3-tour { position: relative; z-index: 2; display: flex; align-items: stretch; gap: 10px; width: min(var(--win-w, 984px) + 54px, 100% - 24px); margin-top: 56px; }
.v3-steps { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 6px; border-radius: 22px; background: rgb(255 255 255 / 0.42); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.05), var(--float); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.v3-steps button {
  position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr; gap: 0 12px; align-items: baseline; padding: 14px 16px 16px;
  border: 0; border-radius: 16px; background: none; text-align: left; cursor: pointer; transition: background 0.25s, box-shadow 0.25s;
}
.v3-steps b { grid-row: span 2; color: var(--faint); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.v3-steps span { color: var(--ink-2); font-size: 15px; font-weight: 600; }
.v3-steps small { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 13px; }
.v3-steps small kbd { height: 18px; font-size: 10.5px; }
.v3-steps i { position: absolute; left: 16px; right: 16px; bottom: 7px; height: 2px; border-radius: 2px; background: rgb(0 0 0 / 0.06); opacity: 0; }
.v3-steps i::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: #111214; transform-origin: left; transform: scaleX(var(--p, 0)); }
.v3-steps button:hover { background: rgb(255 255 255 / 0.6); }
.v3-steps button[aria-selected='true'] { background: #fff; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.06), var(--float-up); }
.v3-steps button[aria-selected='true'] b, .v3-steps button[aria-selected='true'] span { color: var(--text); }
.v3-steps button[aria-selected='true'] i { opacity: 1; }
.v3-tour-end { display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.v3-hero > .lo-stage { width: min(100% - 24px, 1240px); margin: calc(12px - var(--stage-my, 56px)) auto 0; }
/* the four steps line up with the menu window; sound and full screen stand just past its right edge */
.v3-hero .v3-tour { margin-left: calc((100% - var(--win-w, 984px)) / 2); margin-right: auto; }

.v3-price { display: grid; grid-template-columns: 1.25fr 1fr; gap: 12px; }
.v3-price-main { position: relative; isolation: isolate; overflow: hidden; padding: 40px; border-radius: 28px; background: var(--solid); box-shadow: var(--edge), var(--float-up); }
.v3-price-main h2 { margin-bottom: 28px; }
.v3-amount { display: flex; align-items: baseline; gap: 10px; margin-top: 30px; }
.v3-amount b { font-size: 80px; font-weight: 500; letter-spacing: -0.05em; line-height: 1; }
.v3-amount small { color: var(--muted); font-size: 32px; }
.v3-amount .lo-tag { align-self: center; margin-left: 8px; }
.v3-per { margin: 10px 0 30px; color: var(--muted); }
.v3-price-side { padding: 32px; border-radius: 28px; background: var(--soft); box-shadow: var(--edge); }
.v3-side-title { margin-bottom: 8px; color: var(--muted); font-size: 13px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; }
.v3-price-side .lo-steps { margin-top: 24px; }

.v3-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding: 40px; }
.v3-panel h3 { font-size: 26px; letter-spacing: -0.03em; }
.v3-panel .lo-btn { margin-top: 24px; }
.v3-panel .lo-nums.is-grid + .lo-btn { margin-top: 0; }
.v3-panel .lo-ref { margin: 0; }
#bonus .v3-panel .lo-channels { justify-content: flex-end; }
.v3-help { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 40px; padding: 20px 24px; border-radius: var(--r-card); background: var(--soft); box-shadow: var(--edge); font-size: 15px; color: var(--muted); }
.v3-help b { color: var(--text); font-weight: 600; }

/* ---------------------------------------------------------------- motion (layout.js sets the classes)

   The first screen opens in order after the intro (--delay per element), blocks rise in as they come on screen,
   headings sharpen word by word. Entrances are animations with backwards fill, so once they end nothing holds the
   element and hover transitions work as usual. .is-still (?static, reduced motion) shows the finished page. */

[data-reveal]:not(.is-in) { opacity: 0; }
[data-reveal].is-in { animation: lo-rise 0.9s var(--ease) var(--delay, 0s) backwards; }
@keyframes lo-rise { from { opacity: 0; translate: 0 24px; } }
[data-words] .w { display: inline-block; }
[data-words]:not(.is-in) .w { opacity: 0; }
[data-words].is-in .w { animation: lo-word 0.9s var(--ease) calc(var(--delay, 0s) + var(--i) * 70ms) backwards; }
@keyframes lo-word { from { opacity: 0; filter: blur(12px); translate: 0 0.32em; } }
/* the short line before each eyebrow draws itself */
.lo-eyebrow.is-in::before { animation: lo-line 0.8s var(--ease) calc(var(--delay, 0s) + 0.15s) backwards; }
@keyframes lo-line { from { width: 0; } }
.is-still [data-reveal], .is-still [data-words] .w, .is-still .lo-eyebrow::before,
[data-reveal].is-done, [data-words].is-done .w, .lo-eyebrow.is-done::before { opacity: 1; animation: none !important; }

/* light inside the key cards (a shader from layout.js), under the content and the cursor's glow */
.lo-glow { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; display: block; border-radius: inherit; pointer-events: none; }
/* a glint runs across the black buttons now and then, each on its own beat */
.lo-btn.is-ink { position: relative; overflow: hidden; isolation: isolate; }
.lo-btn.is-ink::after {
  content: ''; position: absolute; inset: -20% -40%; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgb(255 255 255 / 0.2) 48%, rgb(170 200 255 / 0.28) 52%, transparent 62%);
  translate: -70% 0; animation: lo-glint 6s var(--ease) infinite; animation-delay: calc(var(--opening, 0s) + 1.5s);
}
.lo-btn.is-ink:hover::after { animation-duration: 1.6s; }
@keyframes lo-glint { 0%, 55% { translate: -70% 0; } 85%, 100% { translate: 70% 0; } }
/* the green «live» dot breathes */
.lo-dot { position: relative; }
.lo-dot::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: inherit; animation: lo-ping 2.4s ease-out infinite; }
@keyframes lo-ping { from { opacity: 0.6; scale: 1; } 70%, to { opacity: 0; scale: 3; } }
.is-still .lo-btn.is-ink::after, .is-still .lo-dot::after { animation: none; opacity: 0; }

/* the navigation drops in with the page and firms up once it moves; a pill slides to the section on screen */
.lo-nav-in { animation: lo-drop 0.8s var(--ease) var(--opening, 0s) backwards; transition: background 0.3s, box-shadow 0.3s; }
@keyframes lo-drop { from { opacity: 0; translate: 0 -16px; } }
.is-still .lo-nav-in { animation: none; }
.lo-nav.is-scrolled .lo-nav-in { background: rgb(255 255 255 / 0.9); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.06), 0 16px 40px -18px rgb(16 18 24 / 0.38); }
.lo-links a { position: relative; z-index: 1; transition: color 0.2s; }
.lo-links a.is-current, .lo-links a:hover { background: none; }
.lo-links a:hover:not(.is-current) { color: var(--ink-2); }
.lo-pill {
  position: absolute; left: 0; top: 50%; height: 34px; margin-top: -17px; width: 0; border-radius: 999px; opacity: 0; pointer-events: none;
  background: rgb(0 0 0 / 0.055); transition: translate 0.55s cubic-bezier(0.3, 1.25, 0.5, 1), width 0.55s cubic-bezier(0.3, 1.25, 0.5, 1), opacity 0.3s;
}

/* cards lift a little under the cursor, and a light follows it inside: a bright glow with a periwinkle haze round
   it, and along the card's edge a rim of the page's blue that lights up where the cursor is (layout.js sets
   --mx / --my) — the same hover as in the dark theme, in the day's colours */
[data-spot] { position: relative; isolation: isolate; overflow: hidden; transition: translate 0.4s var(--ease), box-shadow 0.4s var(--ease), background 0.3s; }
[data-spot]::before, [data-spot]::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0; pointer-events: none; transition: opacity 0.45s var(--ease); }
[data-spot]::before { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgb(255 255 255 / 0.95), rgb(206 216 252 / 0.5) 34%, transparent 68%); }
[data-spot]::after {
  padding: 1px;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgb(84 112 226 / 0.62), rgb(140 162 242 / 0.26) 45%, transparent 72%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
}
@media (hover: hover) and (pointer: fine) {
  [data-spot]:hover::before, [data-spot]:hover::after { opacity: 1; }
  .v1-plan:hover, .lo-steps > li:hover, .v2-cat:hover, .lo-card:not(.v1-media):hover { translate: 0 -3px; box-shadow: var(--edge), var(--float-up), 0 22px 46px -30px rgb(70 100 220 / 0.4); }
  [data-theme='dark'] :is(.v1-plan, .lo-steps > li, .v2-cat, .lo-card:not(.v1-media)):hover { box-shadow: var(--edge), var(--float-up); }
  .lo-btn.is-soft:hover, .lo-btn.is-glass:hover { translate: 0 -1px; }
}
.lo-btn:active { scale: 0.97; }
.lo-chips button:active, .v2-dock button:active, .lo-tabs button:active, .lo-seg button:active { scale: 0.95; }
.v2-dock button, .lo-tabs button, .lo-seg button, .lo-filter button { transition: background 0.2s, color 0.2s, box-shadow 0.25s, scale 0.2s var(--ease); }


/* folds open by height, FAQ answers too */
.lo-fold { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.5s var(--ease), opacity 0.35s; }
.lo-fold > * { min-height: 0; overflow: hidden; }
.lo-fold.is-open { grid-template-rows: 1fr; opacity: 1; }
.lo-acc details::details-content { block-size: 0; overflow: hidden; transition: block-size 0.45s var(--ease), content-visibility 0.45s allow-discrete; }
.lo-acc details[open]::details-content { block-size: auto; }
.lo-acc summary { transition: color 0.2s; }
.lo-acc summary:hover { color: var(--ink-2); }

/* the first visit: the blade appears out of a blur and a streak of light cuts across, then the page opens */
.lo-intro { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; overflow: hidden; background: var(--bg); cursor: pointer; animation: lo-intro-out 0.6s var(--ease) 1.05s forwards; }
.lo-intro.is-skipped { animation: lo-intro-out 0.25s ease-out forwards; }
.lo-intro-blade { position: relative; width: 76px; height: 76px; filter: drop-shadow(0 10px 30px rgb(90 120 220 / 0.35)); animation: lo-intro-blade 1.1s var(--ease) both; }
.lo-intro-slash {
  position: absolute; left: 50%; top: 50%; width: 170vmax; height: 2px; translate: -50% -50%; rotate: 45deg;
  background: linear-gradient(90deg, transparent, rgb(140 170 250 / 0.8) 40%, #fff 50%, rgb(140 170 250 / 0.8) 60%, transparent);
  box-shadow: 0 0 18px 2px rgb(140 170 250 / 0.45);
  animation: lo-intro-slash 0.7s cubic-bezier(0.65, 0, 0.35, 1) 0.35s both;
}
@keyframes lo-intro-blade { from { opacity: 0; scale: 0.6; filter: blur(10px); } 45% { opacity: 1; scale: 1; filter: blur(0) drop-shadow(0 10px 30px rgb(90 120 220 / 0.35)); } to { scale: 1.06; } }
@keyframes lo-intro-slash { from { opacity: 0; scale: 0 1; } 35% { opacity: 1; } to { opacity: 0; scale: 1 1; } }
@keyframes lo-intro-out { to { opacity: 0; visibility: hidden; scale: 1.03; } }

/* ---------------------------------------------------------------- smaller screens */

@media (max-width: 1100px) {
  .lo-links a { padding: 8px 10px; }
  .v1-plans { grid-template-columns: repeat(2, 1fr); }
  .v1-media-nums { grid-template-columns: repeat(2, 1fr); }
  .v2-body { grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; }
  .v2-media .lo-nums.is-grid { grid-template-columns: repeat(2, 1fr); }
  .v3-steps small { display: none; }
}
@media (max-width: 900px) {
  .lo-links { display: none; }
  .lo-nav-end { margin-left: auto; }
  .lo-section { padding-top: 88px; }
  .lo-head.is-split { flex-direction: column; align-items: flex-start; }
  .lo-steps, .lo-req { grid-template-columns: 1fr; }
  .lo-acc.is-cols { column-count: 1; }
  .lo-nums { flex-wrap: wrap; }
  .lo-footer-top { grid-template-columns: 1fr 1fr; }
  .lo-footer-about { grid-column: 1 / -1; }
  .v1-why { grid-template-columns: repeat(2, 1fr); }
  .v1-bonus, .v1-media-more, .v1-faq { grid-template-columns: 1fr; }
  .v1-media-more .lo-btn { grid-column: auto; }
  .v1-faq > header { position: static; }
  .v2-head, .v3-head, .v3-price, .v3-panel, .v2-ref { grid-template-columns: 1fr; }
  .v3-head-side { justify-self: start; }
  .v2-body { grid-template-columns: 1fr; padding-top: 72px; }
  .v2-aside { position: static; order: -1; }
  .v2-cats, .v2-why { grid-template-columns: 1fr; }
  .v2-row { flex-wrap: wrap; }
  .v2-dock button { min-width: 0; }
  .v2-dock button span { display: none; }
  .v2-mbar {
    position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 8px 8px 8px 18px; border-radius: 999px; background: rgb(255 255 255 / 0.86); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.06), var(--float-up);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); font-size: 14px;
    translate: 0 140%; transition: translate 0.4s var(--ease);
  }
  .v2-mbar.is-shown { translate: 0 0; }
  .v2-mbar b { display: block; font-weight: 600; }
  .v2-mbar span span { color: var(--muted); font-size: 13px; }
  .v3-hero .v3-tour { flex-direction: column; width: calc(100% - 24px); margin-inline: auto; }
  .v3-steps { grid-template-columns: repeat(2, 1fr); }
  .v3-tour-end { flex-direction: row; }
}
@media (max-width: 560px) {
  .lo-wrap { width: min(100% - 32px, 1240px); }
  .lo-nav-in { width: calc(100% - 16px); padding-left: 16px; }
  .lo-nav .lo-link { display: none; }
  .lo-card, .v3-price-main, .v3-price-side, .v3-panel { padding: 24px; }
  .v1-plans, .v1-why, .lo-nums.is-grid, .v2-media .lo-nums.is-grid { grid-template-columns: 1fr; }
  .lo-ref, .v1-media-row { flex-direction: column; align-items: flex-start; }
  .lo-ref-line { width: 1px; height: 14px; flex: none; margin-left: 10px; }
  .v3-amount b { font-size: 60px; }
  .lo-final { padding: 110px 20px 200px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lo-panel { animation: none; }
}

/* ================================================================ the dark theme

   The night of the live site (assets/css/site.css) in this layout: near-black page, the blue hour's navy in the
   light behind it, glass of smoked black on white hairlines, text in the site's off-white, and the primary button a
   white pill. Everything that draws (the light, the landscapes, the menu, the bees) turns with it in layout.js; the
   switch itself and its button are dev/themes.css. */

:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #050506;
  --soft: rgb(255 255 255 / 0.035);
  --soft-2: rgb(255 255 255 / 0.06);
  --solid: rgb(17 18 23 / 0.86);
  --edge: inset 0 0 0 1px rgb(255 255 255 / 0.08);
  --text: #eceef2;
  --ink-2: #c3c6ce;
  --muted: #8d9099;
  --faint: #5c5f68;
  --line: rgb(255 255 255 / 0.075);
  --line-strong: rgb(255 255 255 / 0.13);
  --float: 0 1px 2px rgb(0 0 0 / 0.4), 0 14px 34px -22px rgb(0 0 0 / 0.85);
  --float-up: 0 1px 2px rgb(0 0 0 / 0.45), 0 22px 44px -24px rgb(0 0 0 / 0.95);
  --glass: rgb(20 22 28 / 0.62);
  --glass-hover: rgb(34 37 46 / 0.86);
  --glass-edge: inset 0 0 0 1px rgb(255 255 255 / 0.09);
  --ring: 236 238 242;
  scrollbar-color: rgb(255 255 255 / 0.2) transparent;
}
[data-theme='dark'] ::selection { background: rgb(157 188 248 / 0.3); }
[data-theme='dark'] kbd { background: rgb(255 255 255 / 0.07); box-shadow: inset 0 0 0 1px var(--line-strong), inset 0 -1px 0 rgb(0 0 0 / 0.3); }

/* headings: off-white, the quiet second part a grey of the night; the lights over the big ones are white over a
   slightly softer ink, so they still show */
[data-theme='dark'] h1 em, [data-theme='dark'] h2 em, [data-theme='dark'] h3 em { color: #6b6e78; }
[data-theme='dark'] h1 em, [data-theme='dark'] .lo-shine em, [data-theme='dark'] .lo-final h2 em { color: var(--text); }
[data-theme='dark'] .lo-shine { --ink: #d3d6dd; }
[data-theme='dark'] .lo-eyebrow::before { background: rgb(255 255 255 / 0.22); }
[data-theme='dark'] .lo-lead { color: #a4a7b0; }
[data-theme='dark'] .lo-note { border-color: rgb(255 255 255 / 0.14); }

/* buttons: the primary one is a white pill, as on the live site */
[data-theme='dark'] .lo-btn.is-ink { background: #eceef2; color: #0b0b0e; box-shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 12px 26px -16px rgb(0 0 0 / 0.8); }
[data-theme='dark'] .lo-btn.is-ink:hover { background: #fff; }
[data-theme='dark'] .lo-btn.is-ink::after { background: linear-gradient(105deg, transparent 38%, rgb(157 188 248 / 0.28) 48%, rgb(157 188 248 / 0.4) 52%, transparent 62%); }
[data-theme='dark'] .lo-btn-note { border-left-color: rgb(0 0 0 / 0.16); color: rgb(0 0 0 / 0.5); }
[data-theme='dark'] .lo-btn.is-soft:hover { background: rgb(255 255 255 / 0.1); }
[data-theme='dark'] .lo-btn.is-glass, [data-theme='dark'] .lo-round, [data-theme='dark'] .lo-badge,
[data-theme='dark'] .v1-howto .lo-steps li, [data-theme='dark'] .lo-stage-close {
  background: var(--glass); box-shadow: var(--glass-edge), var(--float);
}
[data-theme='dark'] .lo-btn.is-glass:hover, [data-theme='dark'] .lo-round:hover, [data-theme='dark'] .lo-round[aria-pressed='true'] { background: var(--glass-hover); }
[data-theme='dark'] .lo-link:hover { background: rgb(255 255 255 / 0.06); }
[data-theme='dark'] .lo-dot { background: #66cc9f; box-shadow: 0 0 0 3px rgb(102 204 159 / 0.16); }

/* the navigation: smoked glass, the progress line drawn in light */
[data-theme='dark'] .lo-nav-in { background: rgb(12 13 17 / 0.7); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08), 0 12px 32px -18px rgb(0 0 0 / 0.9); }
[data-theme='dark'] .lo-nav.is-scrolled .lo-nav-in { background: rgb(12 13 17 / 0.84); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.09), 0 16px 40px -18px rgb(0 0 0 / 0.95); }
[data-theme='dark'] .lo-nav-in::after { background: linear-gradient(90deg, #eceef2, #7ea6f4 70%, #66cc9f); }
[data-theme='dark'] .lo-pill { background: rgb(255 255 255 / 0.07); }
/* the menu's own dark glass, a little denser than the client's: the hills' black trees would show through it as
   blocks */
[data-theme='dark'] .sm-stage:not(.is-light) .sm-window-bg::before { opacity: 0.86; }
[data-theme='dark'] .lo-sep { background: rgb(255 255 255 / 0.12); }

/* surfaces that are plain white in the light theme */
[data-theme='dark'] .lo-icon, [data-theme='dark'] .lo-steps .lo-step-n, [data-theme='dark'] .lo-chan,
[data-theme='dark'] .lo-req-card, [data-theme='dark'] .v2-cat li { background: rgb(255 255 255 / 0.05); }
[data-theme='dark'] .is-stack .lo-chan { background: none; }
[data-theme='dark'] .lo-ref { background: rgb(255 255 255 / 0.04); box-shadow: inset 0 0 0 1px var(--line), var(--float); }
[data-theme='dark'] .lo-ref-line { background: linear-gradient(to right, rgb(255 255 255 / 0.08), rgb(255 255 255 / 0.24)); }
[data-theme='dark'] .lo-ref.is-column .lo-ref-line { background: linear-gradient(rgb(255 255 255 / 0.08), rgb(255 255 255 / 0.24)); }
[data-theme='dark'] .lo-tabs button[aria-selected='true'] { background: rgb(255 255 255 / 0.1); }
[data-theme='dark'] .lo-seg, [data-theme='dark'] .lo-tag { background: rgb(255 255 255 / 0.06); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1); }
[data-theme='dark'] .lo-seg button[aria-checked='true'], [data-theme='dark'] .lo-switch a[aria-current] b { background: #eceef2; color: #0b0b0e; }
[data-theme='dark'] .lo-checks li::before { filter: invert(1); } /* a light disc with a dark tick */
[data-theme='dark'] .lo-acc details a, [data-theme='dark'] .lo-footer-about a:not(.lo-brand) { text-decoration-color: rgb(255 255 255 / 0.3); }
[data-theme='dark'] .v1-howto.is-open .lo-steps .lo-step-n { background: #eceef2; color: #0b0b0e; }

/* the cursor's light inside cards: a faint glow and a cool rim */
[data-theme='dark'] [data-spot]::before { background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgb(150 170 230 / 0.09), transparent 65%); }
[data-theme='dark'] [data-spot]::after { background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgb(170 190 240 / 0.4), transparent 70%); }
[data-theme='dark'] .lo-intro-blade { filter: drop-shadow(0 10px 30px rgb(120 150 240 / 0.45)); }

/* the friends and wardrobe plaques (dev/wearshow.js) use «Разлёт»'s scatter; a little taller, for the wardrobe's rows */
.wearv { height: 720px; }
@media (max-width: 900px) { .wearv { height: auto; } }

/* The HUD and the plaques on the page: their glass without the backdrop blur. The page's light behind them moves every
   frame, so a blur under each of a dozen panels would be computed again every frame — the main cost of the page. A
   denser fill gives the same look. A blur would also make each panel a layer of its own, drawn as a picture, and its
   text soft. The selectors outweigh hud.css's light theme (:root[data-theme='light'] .hud-w:not(…)), which is loaded
   after this file. The toasts are no layers either: they only slide now and then, and a layer would soften them. */
:root[data-theme] .hudv-w .hud-glass.hud-w { --hud-backdrop: none; --hud-glass-top: rgba(8, 9, 14, .9); --hud-glass-bottom: rgba(4, 5, 9, .9); }
:root[data-theme='light'] .hudv-w .hud-glass.hud-w:not([data-hud-theme='dark']) { --hud-glass-top: rgba(252, 252, 253, .95); --hud-glass-bottom: rgba(246, 247, 249, .95); }
.hudv-w .hud-note { will-change: auto; }

/* the menu's frame: the game behind the menu, blurred, as in the client — a still picture of the page's own world
   (layout.js paintMenuWorld) in the frame's rounded box; the theme's sky shows until it is painted */
.v1-menu-sec .is-menu-frame { isolation: isolate; background: linear-gradient(#9fc4f6, #e6effc 72%); }
[data-theme='dark'] .v1-menu-sec .is-menu-frame { background: linear-gradient(#060a16, #172140 72%); }
.lo-menu-world { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; }
/* the menu's window over its frame: no blur behind it either — its glass is near opaque and the wash behind is soft,
   so the blur showed nothing, yet it was redone over the whole window every frame the page's light moved */
.v1-menu-sec .sm-window-bg { -webkit-backdrop-filter: none; backdrop-filter: none; }