/*
  Главная сайта (концепт «Свет», D183) — светлая, живая, по мотивам
  Raycast и Resend. Другие страницы сайта живут на /styles.css.

  Основа — холодный фарфор и белые панели; цвет дают стеклянные 3D-объекты
  и бегущие огоньки по контурам. Фиолетовый — цвет самого продукта: главная
  кнопка, отметки, полоски. Всё, что движется само, показывает одну мысль:
  беспорядок чата становится порядком.

  Встроенных стилей в разметке нет: политика безопасности сайта их не
  пропускает, поэтому положения искр, задержки появления и стартовые
  ширины полосок заданы классами ниже.
*/

@font-face { font-family: "Golos Text"; font-weight: 400 900; font-display: swap; src: url("/fonts/golos-text-cyrillic.woff2") format("woff2"); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Golos Text"; font-weight: 400 900; font-display: swap; src: url("/fonts/golos-text-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20BD; }
/* Geologica — шрифт заголовков, с Google Fonts без изменений, по подмножествам (fonts/LICENSE.md). */
@font-face { font-family: "Geologica"; font-weight: 400 800; font-display: swap; src: url("/fonts/geologica-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Geologica"; font-weight: 400 800; font-display: swap; src: url("/fonts/geologica-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geologica"; font-weight: 400 800; font-display: swap; src: url("/fonts/geologica-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

@property --beam { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@property --glow { syntax: "<number>"; initial-value: 0; inherits: false; }

:root {
  --paper: #f5f5f9;
  --surface: #ffffff;
  --ink: #17151f;
  --ink-2: #3d394a;
  --muted: #6b6880;
  --faint: #9a97ab;
  --line: rgba(23, 21, 31, 0.08);
  --line-2: rgba(23, 21, 31, 0.14);
  --brand: #5b3ce0;
  --brand-2: #7b5cff;
  --brand-ink: #3a258f;
  --brand-soft: #efebff;
  --cyan: #38c6e8;
  --pink: #f27fc1;
  --ok: #0e7c4a;
  --ok-soft: #e7f6ee;
  --warn: #a85b00;
  --warn-soft: #fff2e0;
  --display: "Geologica", "Golos Text", system-ui, sans-serif;
  --text: "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r-xl: 32px;
  --r-lg: 24px;
  --r-md: 16px;
  --r-sm: 11px;
  --shadow-1: 0 1px 1px rgba(23, 21, 31, 0.04), 0 2px 6px rgba(23, 21, 31, 0.04);
  --shadow-2: 0 1px 2px rgba(23, 21, 31, 0.05), 0 10px 30px -8px rgba(40, 28, 110, 0.16);
  --shadow-3: 0 2px 4px rgba(23, 21, 31, 0.04), 0 30px 80px -20px rgba(40, 28, 110, 0.30);
  --wrap: min(1200px, calc(100% - 48px));
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.55 var(--text);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
  overflow-x: clip;
}
/* Зерно поверх всего: без него светлые переходы на больших экранах полосят. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 10px; }
.wrap { width: var(--wrap); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Бегущий огонёк по контуру ─────────────────────────────────────────
   Обводка из конического перехода, у которого крутится угол. Маска
   оставляет от него только рамку толщиной --bw; след — длинный хвост
   перехода. Работает на любом скруглении. */
.beam { position: relative; isolation: isolate; }
.beam::before {
  content: "";
  position: absolute;
  inset: calc(var(--bw, 1.5px) * -1);
  z-index: 1;
  border-radius: inherit;
  padding: var(--bw, 1.5px);
  background: conic-gradient(from var(--beam), transparent 0deg, transparent 260deg, rgba(123, 92, 255, 0.0) 270deg, rgba(123, 92, 255, 0.55) 315deg, rgba(56, 198, 232, 0.9) 345deg, #fff 358deg, transparent 360deg);
  -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;
  animation: beam var(--beam-speed, 5s) linear infinite;
  pointer-events: none;
}
.beam.slow::before { --beam-speed: 9s; }
.beam.hover-only::before { opacity: 0; transition: opacity 0.4s; }
.beam.hover-only:hover::before, .beam.hover-only:focus-within::before { opacity: 1; }
.paused .beam::before, .beam.paused::before { animation-play-state: paused; }
@keyframes beam { to { --beam: 360deg; } }

/* ── Кнопки ──────────────────────────────────────────────────────────── */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  font: 650 16px/1 var(--text);
  letter-spacing: -0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.25s cubic-bezier(.2, .8, .2, 1), box-shadow 0.25s, background 0.25s;
  will-change: transform;
}
.btn.primary {
  color: #fff;
  background: linear-gradient(180deg, #6c4cf0, #5133d8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 0 rgba(0, 0, 0, 0.18), 0 1px 2px rgba(40, 20, 120, 0.3), 0 12px 28px -10px rgba(91, 60, 224, 0.65);
}
.btn.primary:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.18), 0 1px 2px rgba(40, 20, 120, 0.3), 0 18px 40px -12px rgba(91, 60, 224, 0.8); }
/* Блик, проходящий по кнопке при наведении. */
.btn.primary::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.45) 50%, transparent 65%);
  background-size: 250% 100%;
  background-position: 120% 0;
  transition: background-position 0.8s ease;
  pointer-events: none;
}
.btn.primary:hover::after { background-position: -40% 0; }
.btn.glass {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(12px) saturate(1.4);
  box-shadow: inset 0 0 0 1px var(--line-2), 0 1px 2px rgba(23, 21, 31, 0.06);
}
.btn.glass:hover { background: #fff; box-shadow: inset 0 0 0 1px rgba(91, 60, 224, 0.35), 0 8px 24px -10px rgba(40, 28, 110, 0.3); }
.btn.small { min-height: 40px; padding: 0 18px; font-size: 14px; }
.btn.beam { --bw: 2px; }
.btn.primary.beam::before { background: conic-gradient(from var(--beam), transparent 0deg, transparent 250deg, rgba(255, 255, 255, 0) 260deg, rgba(160, 235, 255, 0.85) 330deg, #fff 356deg, transparent 360deg); }

/* ── Шапка ──────────────────────────────────────────────────────────── */
.top {
  position: fixed;
  inset: calc(14px + env(safe-area-inset-top, 0px)) 0 auto;
  z-index: 50;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.top-bar {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  width: min(1120px, calc(100% - 28px));
  padding: 8px 8px 8px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(18px) saturate(1.6);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 0 0 1px var(--line), 0 10px 30px -18px rgba(40, 28, 110, 0.35);
  transition: background 0.3s, box-shadow 0.3s;
}
.scrolled .top-bar { background: rgba(255, 255, 255, 0.82); }
.site-mark { display: flex; align-items: center; gap: 14px; font-weight: 700; font-size: 15px; letter-spacing: -0.01em; margin-right: auto; }
/*
  Знак: сначала картинка, затем объёмный знак с кольцами (scene3d.js,
  mountBrand). Холст шире знака, чтобы кольца и искры выходили за круг;
  по кольцам бегут огоньки со следом, как по рамкам кнопок.
*/
.mark3d { position: relative; flex: 0 0 auto; width: 36px; height: 36px; }
.mark3d::before { content: ""; position: absolute; inset: -12px; border-radius: 50%; background: radial-gradient(closest-side, rgba(123, 92, 255, 0.22), rgba(123, 92, 255, 0)); pointer-events: none; }
.mark3d img { position: relative; display: block; width: 100%; height: 100%; transition: opacity 0.35s; }
.brand3d { position: absolute; left: 50%; top: 50%; width: 92px; height: 70px; transform: translate(-50%, -50%); pointer-events: none; opacity: 0; transition: opacity 0.45s; }
.brand3d canvas { display: block; width: 100%; height: 100%; }
.mark3d.on img { opacity: 0; }
.mark3d.on .brand3d { opacity: 1; }
.top-bar nav { display: flex; gap: 2px; }
.top-bar nav a { padding: 9px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ink-2); transition: background 0.2s, color 0.2s; }
.top-bar nav a:hover { background: rgba(23, 21, 31, 0.05); color: var(--ink); }
.top-bar .enter { padding: 9px 14px; font-size: 14px; font-weight: 650; color: var(--brand-ink); }

/* ── Первый экран ───────────────────────────────────────────────────── */
.hero { position: relative; padding: 120px 0 0; text-align: center; }
.aurora {
  position: absolute;
  inset: -120px 0 auto;
  height: 1100px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38% 30% at 50% 22%, rgba(123, 92, 255, 0.20), transparent 70%),
    radial-gradient(26% 22% at 32% 30%, rgba(56, 198, 232, 0.16), transparent 70%),
    radial-gradient(24% 22% at 68% 28%, rgba(242, 127, 193, 0.14), transparent 70%),
    linear-gradient(180deg, #fbfbfe 0%, var(--paper) 70%);
}
/* Тонкая сетка точек, гаснущая книзу, — подложка под 3D. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 760px;
  z-index: -1;
  background-image: radial-gradient(rgba(23, 21, 31, 0.13) 1px, transparent 1.2px);
  background-size: 26px 26px;
  -webkit-mask: radial-gradient(60% 55% at 50% 32%, #000 30%, transparent 75%);
  mask: radial-gradient(60% 55% at 50% 32%, #000 30%, transparent 75%);
}
.stage3d { position: relative; width: min(940px, 100%); height: 420px; margin: -28px auto -30px; }
/* Подпись предмета на орбите под курсором. */
.sat-label { position: absolute; z-index: 3; left: 0; top: 0; padding: 7px 13px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(10px); box-shadow: 0 0 0 1px var(--line), var(--shadow-2); font: 650 13px/1 var(--text); color: var(--ink); white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, -110%) scale(0.9); transition: opacity 0.2s, transform 0.25s cubic-bezier(.2, .9, .25, 1.3); }
.sat-label.on { opacity: 1; transform: translate(-50%, -120%) scale(1); }
.stage3d canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; }
.stage3d .floor { position: absolute; left: 50%; bottom: 34px; width: 46%; height: 34px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(58, 37, 143, 0.22), transparent); filter: blur(6px); }
.stage3d .fallback { position: absolute; inset: 0; display: none; place-items: center; }
.stage3d .fallback img { width: 190px; filter: drop-shadow(0 30px 40px rgba(58, 37, 143, 0.35)); }
.no-webgl .stage3d .fallback { display: grid; }

/* Искры: четырёхлучевые звёздочки, вспыхивающие у бликов. */
.spark { position: absolute; z-index: 2; width: var(--s, 14px); height: var(--s, 14px); pointer-events: none; opacity: 0; animation: twinkle var(--d, 3.6s) ease-in-out infinite; animation-delay: var(--dl, 0s); }
.spark.s1 { left: 21%; top: 24%; --s: 16px; --dl: 1.8s; }
.spark.s2 { left: 74%; top: 18%; --s: 12px; --dl: 2.6s; --d: 4.2s; }
.spark.s3 { left: 66%; top: 62%; --s: 18px; --dl: 3.1s; --d: 3.2s; }
.spark.s4 { left: 30%; top: 68%; --s: 10px; --dl: 4s; }
.spark::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, #fff 0 18%, rgba(255, 255, 255, 0) 60%), conic-gradient(from 45deg, transparent 0 10%, #fff 12.5%, transparent 15% 35%, #fff 37.5%, transparent 40% 60%, #fff 62.5%, transparent 65% 85%, #fff 87.5%, transparent 90%); -webkit-mask: radial-gradient(circle, #000 0 30%, transparent 70%); mask: radial-gradient(circle, #000 0 30%, transparent 70%); filter: drop-shadow(0 0 4px rgba(123, 92, 255, 0.8)); }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); } 45% { opacity: 1; transform: scale(1) rotate(45deg); } 60% { opacity: 0.9; } }
.burst { position: fixed; z-index: 60; width: 6px; height: 6px; border-radius: 50%; pointer-events: none; }

h1 {
  margin: 0 auto;
  max-width: 13ch;
  font: 700 clamp(46px, 7.6vw, 104px)/0.94 var(--display);
  font-variation-settings: "SHRP" 0, "CRSV" 0;
  letter-spacing: -0.055em;
  color: var(--ink);
}
/* Однократный проход света по заголовку после сборки 3D. */
h1 .sweep {
  background: linear-gradient(100deg, var(--ink) 0%, var(--ink) 40%, #8a7dff 47%, #ffffff 50%, #6ad9f2 53%, var(--ink) 60%, var(--ink) 100%);
  background-size: 300% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lit h1 .sweep { animation: sweep 1.8s cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes sweep { to { background-position: 0% 0; } }
.lead { margin: 26px auto 0; max-width: 36ch; font-size: clamp(18px, 1.7vw, 21px); line-height: 1.5; color: var(--muted); }
.hero .cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 34px; }
.hero .note { margin: 16px auto 0; font-size: 14px; color: var(--faint); }

/* Появление первого экрана: один раз, по порядку. */
.js .rise { opacity: 0; transform: translateY(14px); filter: blur(6px); transition: opacity 0.9s cubic-bezier(.2, .8, .2, 1), transform 0.9s cubic-bezier(.2, .8, .2, 1), filter 0.9s; transition-delay: var(--dl, 0s); }
.js.ready .rise, .ready .rise { opacity: 1; transform: none; filter: none; }

/* ── Окно кабинета ──────────────────────────────────────────────────── */
.window-zone { position: relative; margin: 72px auto 0; width: min(1180px, calc(100% - 32px)); perspective: 1600px; }
.window {
  --tilt: 1;
  container-type: inline-size;
  position: relative;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9), 0 0 0 1px var(--line), var(--shadow-3);
  text-align: left;
  transform: rotateX(calc(var(--tilt) * 22deg + var(--px, 0) * 1deg)) rotateY(calc(var(--py, 0) * 1deg)) scale(calc(1 - var(--tilt) * 0.06)) translateY(calc(var(--tilt) * -10px));
  transition: transform 0.25s ease-out;
  transform-origin: 50% 0%;
  will-change: transform;
}
.window.beam { --bw: 1.5px; }
.window-glow { position: absolute; inset: 10% 4% -6%; z-index: -1; border-radius: 40px; background: radial-gradient(50% 50% at 50% 50%, rgba(123, 92, 255, 0.25), transparent 70%); filter: blur(30px); }
.win-bar { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 16px; border-bottom: 1px solid var(--line); }
.win-bar i { width: 11px; height: 11px; border-radius: 50%; background: #e3e1ea; }
.win-bar .url { margin: 0 auto; padding: 5px 16px; border-radius: 999px; background: rgba(23, 21, 31, 0.045); font-size: 12.5px; color: var(--muted); }
.win-bar .lock { font-size: 12px; font-weight: 650; color: var(--ok); }
.window-caption { margin: 18px 0 0; text-align: center; font-size: 13.5px; color: var(--faint); }

/* Внутри — стол классного руководителя, как в кабинете. */
.desk { display: grid; grid-template-columns: 210px minmax(0, 1fr); min-height: 560px; font-size: 13px; }
.desk-side { padding: 16px 12px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; }
.desk-side .logo { display: flex; align-items: center; gap: 8px; font-weight: 700; padding: 0 6px; }
.desk-side .logo img { width: 24px; }
.class-card { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--line), var(--shadow-1); }
.class-card b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--brand-soft); color: var(--brand-ink); font-size: 13px; }
.class-card span { display: grid; font-size: 11.5px; color: var(--muted); line-height: 1.25; }
.class-card span strong { color: var(--ink); font-size: 12.5px; }
.desk-nav { display: grid; gap: 2px; }
.desk-nav a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 11px; color: var(--ink-2); font-weight: 550; }
.desk-nav a.here { background: var(--brand-soft); color: var(--brand-ink); font-weight: 700; }
.desk-nav svg { width: 17px; height: 17px; }
.desk-main { padding: 18px 22px 22px; min-width: 0; }
.desk-top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.desk-top .crumbs { font-size: 12px; color: var(--muted); }
.desk-top .crumbs b { color: var(--ink); }
.desk-top .write { margin-left: auto; padding: 8px 14px; border-radius: 10px; background: var(--brand); color: #fff; font-weight: 650; font-size: 12px; box-shadow: 0 6px 14px -6px rgba(91, 60, 224, 0.7); }
.ava { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 10.5px; font-weight: 750; }
.desk-head small { color: var(--muted); font-size: 12px; }
.desk-head h3 { margin: 2px 0 4px; font: 750 26px/1.05 var(--display); letter-spacing: -0.04em; }
.desk-head p { margin: 0 0 14px; color: var(--muted); font-size: 12.5px; }
.focus { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.fcard { position: relative; padding: 13px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--line), var(--shadow-1); overflow: hidden; }
.fcard .ic { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--warn-soft); color: var(--warn); }
.fcard.brand .ic { background: var(--brand-soft); color: var(--brand); }
.fcard.info .ic { background: #e9f1ff; color: #2456c7; }
.fcard .ic svg { width: 15px; height: 15px; }
.fcard .chip { position: absolute; right: 12px; top: 13px; }
.fcard .num { margin-top: 10px; font: 750 30px/1 var(--display); letter-spacing: -0.04em; }
.fcard .num small { font: 600 12px var(--text); letter-spacing: 0; color: var(--ink-2); margin-left: 4px; }
.fcard .sub { margin-top: 4px; font-size: 11.5px; color: var(--muted); }
.fcard .bar { margin-top: 10px; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; background: var(--warn-soft); color: var(--warn); white-space: nowrap; }
.chip.brand { background: var(--brand-soft); color: var(--brand-ink); }
.chip.info { background: #e9f1ff; color: #2456c7; }
.chip.ok { background: var(--ok-soft); color: var(--ok); }
.chip.muted { background: rgba(23, 21, 31, 0.06); color: var(--muted); }
.bar { height: 5px; border-radius: 5px; background: rgba(23, 21, 31, 0.07); overflow: hidden; }
.bar span { display: block; height: 100%; width: var(--w, 0%); border-radius: inherit; background: linear-gradient(90deg, var(--brand), var(--brand-2)); transition: width 0.8s cubic-bezier(.2, .8, .2, 1); }
.bar.ok span { background: linear-gradient(90deg, #12955a, #2bc07d); }
.desk-grid { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 10px; margin-top: 10px; }
.panel { border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--line), var(--shadow-1); }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; padding: 12px 14px 6px; }
.panel-head b { font-size: 13px; }
.panel-head span { font-size: 11.5px; color: var(--muted); }
.rows { padding: 2px 6px 6px; }
.row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 11px; transition: background 0.2s; }
.row + .row { box-shadow: 0 -1px 0 rgba(23, 21, 31, 0.05); }
.row:hover { background: #faf9ff; }
.row .ri { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--warn-soft); color: var(--warn); }
.row .ri.brand { background: var(--brand-soft); color: var(--brand); }
.row .ri.info { background: #e9f1ff; color: #2456c7; }
.row .ri.ok { background: var(--ok-soft); color: var(--ok); }
.row .ri svg { width: 15px; height: 15px; }
.row b { display: block; font-size: 12.5px; }
.row small { display: block; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .act { padding: 6px 10px; border: 0; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 11px; font-weight: 650; cursor: pointer; }
.row .act.primary { background: var(--brand); color: #fff; box-shadow: 0 6px 14px -6px rgba(91, 60, 224, 0.7); }
.row .act:hover { box-shadow: inset 0 0 0 1px var(--brand); }
.row.done .ri { background: var(--ok-soft); color: var(--ok); }
.row.done b { color: var(--muted); }
.mini-cal { padding: 4px 12px 12px; }
.mini-cal .wk, .mini-cal .days { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 10.5px; }
.mini-cal .wk { color: var(--faint); margin-bottom: 4px; }
.mini-cal .days span { padding: 5px 0; border-radius: 8px; }
.mini-cal .days .mute { color: #c9c7d4; }
.mini-cal .days .today { background: var(--brand); color: #fff; font-weight: 700; }
.mini-cal .days .ev { position: relative; }
.mini-cal .days .ev::after { content: ""; position: absolute; left: 50%; bottom: 1px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--warn); }
.mini-cal .next { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 11px; color: var(--muted); }
.mini-cal .next b { color: var(--ink); }
.people { display: flex; padding: 0 14px 14px; }
.people span { display: grid; place-items: center; width: 26px; height: 26px; margin-left: -6px; border-radius: 50%; border: 2px solid #fff; background: var(--brand-soft); color: var(--brand-ink); font-size: 9px; font-weight: 800; }
.people span:first-child { margin-left: 0; }
@container (max-width: 760px) {
  .desk { grid-template-columns: 1fr; min-height: 0; }
  .desk-side { display: none; }
  .desk-main { padding: 14px; }
  .focus { grid-template-columns: 1fr; }
  .desk-grid { grid-template-columns: 1fr; }
  .desk-grid .rail { display: none; }
  .desk-top .write { display: none; }
  .row { grid-template-columns: 30px minmax(0, 1fr) auto; }
  .row .chip { display: none; }
}

/* ── Общие заголовки разделов ───────────────────────────────────────── */
section { position: relative; }
.s-head { max-width: 760px; }
.s-head.center { margin-inline: auto; text-align: center; }
h2 { margin: 0; font: 700 clamp(36px, 5vw, 68px)/0.98 var(--display); letter-spacing: -0.05em; color: var(--ink); }
.s-head p { margin: 20px 0 0; font-size: 19px; color: var(--muted); max-width: 46ch; }
.s-head.center p { margin-inline: auto; }

/* Появление при прокрутке — только заголовков разделов, один раз. */
.reveal.pre { opacity: 0; transform: translateY(24px); transition: opacity 0.9s cubic-bezier(.2, .8, .2, 1), transform 0.9s cubic-bezier(.2, .8, .2, 1); }
.reveal.pre.in { opacity: 1; transform: none; }

/* ── Беспорядок → порядок ───────────────────────────────────────────── */
.chaos { height: 260vh; margin-top: 140px; }
.chaos-pin { position: sticky; top: 0; height: 100vh; display: grid; align-items: center; }
.chaos h2, .story h2 { font-size: clamp(34px, 4.2vw, 58px); }
.chaos-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.counter { display: flex; align-items: center; gap: 14px; margin-top: 34px; }
.counter .big { font: 700 64px/1 var(--display); letter-spacing: -0.05em; min-width: 1.4ch; }
.counter .big.ok { background: linear-gradient(90deg, var(--brand), var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.counter .lbl { font-size: 16px; color: var(--muted); line-height: 1.3; }
.chaos-stage { position: relative; height: min(560px, 70vh); }
.bubble {
  position: absolute;
  left: 0;
  top: 0;
  max-width: 250px;
  padding: 10px 14px;
  border-radius: 18px 18px 18px 6px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--line), var(--shadow-2);
  font-size: 15px;
  line-height: 1.35;
  white-space: nowrap;
  will-change: transform, opacity;
}
.bubble small { display: block; font-size: 11.5px; font-weight: 650; color: var(--faint); margin-bottom: 1px; }
.bubble.plus { font-weight: 700; }
.order {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(460px, 100%);
  transform: translate(-50%, -50%) scale(calc(0.94 + var(--op, 0) * 0.06));
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9), 0 0 0 1px var(--line), var(--shadow-3);
  opacity: var(--op, 0);
  padding: 8px;
}
.order .panel-head { padding: 12px 14px 8px; }
.order .panel-head b { font-size: 15px; }
.orow { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px; border-radius: 16px; opacity: 0; transform: translateY(8px); transition: opacity 0.5s, transform 0.5s cubic-bezier(.2, .8, .2, 1); }
.orow.on { opacity: 1; transform: none; }
.orow + .orow { box-shadow: 0 -1px 0 rgba(23, 21, 31, 0.05); }
.orow .ri { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--brand-soft); color: var(--brand); }
.orow .ri svg { width: 19px; height: 19px; }
.orow b { display: block; font-size: 15px; letter-spacing: -0.01em; }
.orow .meta { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 13px; color: var(--muted); }
.orow .meta .bar { flex: 1 1 auto; }
.orow .meta em { font-style: normal; white-space: nowrap; }

/* ── Одна задача по шагам ───────────────────────────────────────────── */
.story { height: 400vh; margin-top: 60px; }
.story-pin { position: sticky; top: 0; height: 100vh; display: grid; align-items: center; }
.story-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 56px; align-items: center; }
.steps { position: relative; margin: 40px 0 0; padding: 0 0 0 28px; list-style: none; }
.steps::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: rgba(23, 21, 31, 0.08); }
.steps::after { content: ""; position: absolute; left: 6px; top: 8px; width: 2px; height: calc((100% - 16px) * var(--sp, 0)); border-radius: 2px; background: linear-gradient(180deg, var(--brand), var(--cyan)); box-shadow: 0 0 12px rgba(56, 198, 232, 0.8); }
.steps li { position: relative; padding: 14px 0 14px; opacity: 0.38; transition: opacity 0.4s; }
.steps li.on { opacity: 1; }
.steps li::before { content: attr(data-n); position: absolute; z-index: 1; left: -33px; top: 15px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 2px rgba(23, 21, 31, 0.15); font: 700 12px var(--text); color: var(--muted); transition: background 0.3s, color 0.3s, box-shadow 0.3s; }
.steps li.on::before { background: var(--brand); color: #fff; box-shadow: 0 0 0 4px rgba(91, 60, 224, 0.15); }
.steps b { display: block; font: 650 21px/1.2 var(--display); letter-spacing: -0.03em; }
.steps span { display: block; margin-top: 4px; color: var(--muted); font-size: 15.5px; }
.story-stage { position: relative; height: min(560px, 72vh); perspective: 1400px; }
.story-stage::before, .chaos-stage::before { content: ""; position: absolute; inset: 8% 6%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(123, 92, 255, 0.16), rgba(56, 198, 232, 0.08) 55%, transparent); filter: blur(10px); }
.scene { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: translateY(20px) rotateX(8deg) scale(0.97); transition: opacity 0.6s, transform 0.7s cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
.scene.on { opacity: 1; transform: none; pointer-events: auto; }
.card {
  position: relative;
  width: min(460px, 100%);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: 0 0 0 1px var(--line), var(--shadow-3);
  padding: 22px;
}
.card h4 { margin: 0 0 16px; font: 700 20px/1.2 var(--display); letter-spacing: -0.03em; }
.field { margin-top: 12px; }
.field label { display: block; font-size: 12.5px; font-weight: 650; color: var(--muted); margin-bottom: 6px; }
.field .in { display: flex; align-items: center; min-height: 46px; padding: 0 14px; border-radius: 13px; background: #faf9fd; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 15px; }
.field .in.focus { box-shadow: inset 0 0 0 2px var(--brand), 0 0 0 4px rgba(91, 60, 224, 0.12); background: #fff; }
.caret { display: inline-block; width: 1.5px; height: 18px; margin-left: 1px; background: var(--brand); animation: caret 1s steps(1) infinite; vertical-align: middle; }
@keyframes caret { 50% { opacity: 0; } }
.seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 13px; background: rgba(23, 21, 31, 0.05); }
.seg span { padding: 8px 12px; border-radius: 10px; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.seg span.on { background: #fff; color: var(--ink); box-shadow: var(--shadow-1); }
.card .send { margin-top: 18px; width: 100%; }
.phone {
  position: relative;
  width: 300px;
  height: 540px;
  border-radius: 46px;
  padding: 12px;
  background: linear-gradient(145deg, #fdfdff, #e7e5ef);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9), 0 0 0 1px var(--line-2), var(--shadow-3);
}
.phone-screen { position: relative; height: 100%; border-radius: 36px; overflow: hidden; background: #eef0f6; display: flex; flex-direction: column; }
.phone-top { display: flex; align-items: center; gap: 10px; padding: 34px 16px 12px; background: #fff; border-bottom: 1px solid var(--line); }
.phone-top img { width: 30px; }
.phone-top b { font-size: 14px; }
.phone-top small { display: block; font-size: 11px; color: var(--ok); font-weight: 600; }
.phone-feed { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 12px; }
.bot-msg { align-self: flex-start; max-width: 88%; padding: 11px 13px; border-radius: 16px 16px 16px 5px; background: #fff; box-shadow: var(--shadow-1); font-size: 13.5px; line-height: 1.4; opacity: 0; transform: translateY(14px) scale(0.96); transition: opacity 0.45s, transform 0.55s cubic-bezier(.2, .9, .25, 1.3); }
.bot-msg.on { opacity: 1; transform: none; }
.bot-msg b { display: block; margin-bottom: 2px; }
.bot-msg .kb { display: grid; gap: 6px; margin-top: 10px; }
.bot-msg .kb span { padding: 8px; border-radius: 10px; background: var(--brand-soft); color: var(--brand-ink); text-align: center; font-weight: 650; font-size: 12.5px; }
.push { position: absolute; left: 10px; right: 10px; top: 10px; z-index: 2; display: flex; gap: 10px; padding: 11px 12px; border-radius: 18px; background: rgba(255, 255, 255, 0.86); backdrop-filter: blur(12px); box-shadow: var(--shadow-2); font-size: 12.5px; line-height: 1.35; transform: translateY(-140%); transition: transform 0.6s cubic-bezier(.2, .9, .25, 1.2); }
.push.on { transform: none; }
.push img { width: 34px; height: 34px; }
.push b { display: block; font-size: 12.5px; }
.task-card .who { display: flex; align-items: center; gap: 10px; margin: -4px 0 14px; color: var(--muted); font-size: 14px; }
.task-card .task-note { margin: 0; color: var(--muted); font-size: 15px; }
.task-card .due { display: inline-flex; padding: 3px 10px; border-radius: 999px; background: var(--warn-soft); color: var(--warn); font-size: 12px; font-weight: 700; }
/*
  Ответ родителя. Кнопки и отметка занимают одно место, поэтому карточка не
  меняет высоту. Палец подводится к «Выполнено» (.aim), кнопка вдавливается,
  по ней расходится волна, и сама кнопка становится отметкой (.marked):
  «Не могу выполнить» сжимается, «Выполнено» растягивается на всю ширину и
  зеленеет, надпись сменяется галочкой. Обратно — сразу, без задержки.
*/
.task-card .answer { position: relative; display: flex; height: 52px; margin-top: 18px; }
.task-card .answer .btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 0 18px;
  border-radius: 26px;
  font-size: 15px;
  overflow: hidden;
  transition: flex-grow 0.62s cubic-bezier(.2, .8, .2, 1), margin 0.62s cubic-bezier(.2, .8, .2, 1), padding 0.62s cubic-bezier(.2, .8, .2, 1), border-radius 0.62s cubic-bezier(.2, .8, .2, 1), opacity 0.3s, box-shadow 0.45s, transform 0.22s cubic-bezier(.2, .8, .2, 1);
}
.task-card .b-cant { margin-left: 8px; }
.task-card .b-done > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; border-radius: inherit; }
/* Фиолетовая заливка и зелёная — два слоя, которые сменяют друг друга:
   у самой кнопки фона нет, и на скруглении не остаётся фиолетовой каймы. */
.task-card .b-done { background: none; }
.task-card .b-paint { background: linear-gradient(180deg, #6c4cf0, #5133d8); transition: opacity 0.45s; }
.task-card .b-cover { background: var(--ok-soft); opacity: 0; transition: opacity 0.45s; }
.task-card .b-label { transition: opacity 0.25s, transform 0.45s cubic-bezier(.2, .8, .2, 1); }
.task-card .b-done > .b-ok { justify-content: flex-start; padding: 0 16px; color: var(--ok); font-weight: 700; opacity: 0; transform: translateY(70%); transition: opacity 0.3s, transform 0.55s cubic-bezier(.2, .9, .25, 1.2); }
.task-card .ripple { position: absolute; left: 50%; top: 50%; z-index: 1; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: rgba(255, 255, 255, 0.6); opacity: 0; pointer-events: none; }
/* Палец: светлое кольцо, как отметка касания на записи экрана; надпись под ним читается. */
.task-card .tap {
  position: absolute;
  left: 33%;
  top: 62%;
  z-index: 2;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.34) 0 52%, rgba(255, 255, 255, 0) 70%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.92), 0 0 0 1px rgba(91, 60, 224, 0.16), 0 8px 18px -6px rgba(40, 28, 110, 0.5);
  opacity: 0;
  transform: translate(74px, 50px) scale(1.15);
  transition: opacity 0.35s, transform 0.75s cubic-bezier(.2, .8, .2, 1);
  pointer-events: none;
}
.task-card.aim .tap { opacity: 1; transform: none; }
.task-card.aim .b-done { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.18), 0 1px 2px rgba(40, 20, 120, 0.3), 0 18px 40px -12px rgba(91, 60, 224, 0.8); }
.task-card.marked .tap { animation: tap 0.6s cubic-bezier(.3, .7, .3, 1) forwards; }
.task-card.marked .b-done { animation: press 0.44s cubic-bezier(.3, .7, .3, 1); transform: none; border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(14, 124, 74, 0.1); }
.task-card.marked .b-done::after { opacity: 0; }
.task-card.marked .ripple { animation: ripple 0.8s cubic-bezier(.2, .8, .2, 1); }
.task-card.marked .b-cant { flex-grow: 0.0001; margin-left: 0; padding-inline: 0; opacity: 0; }
.task-card.marked .b-paint { opacity: 0; }
.task-card.marked .b-cover { opacity: 1; }
.task-card.marked .b-label { opacity: 0; transform: translateY(-70%); }
.task-card.marked .b-ok { opacity: 1; transform: none; }
/* Превращение начинается, когда кнопка уже отпущена. */
.task-card.marked .answer .btn { transition-delay: 0.24s, 0.24s, 0.24s, 0.24s, 0.24s, 0.24s, 0s; }
.task-card.marked .b-paint, .task-card.marked .b-cover, .task-card.marked .b-label, .task-card.marked .b-ok { transition-delay: 0.24s; }
@keyframes press { 0% { transform: scale(1); } 32% { transform: scale(0.95); } 66% { transform: scale(1.012); } 100% { transform: scale(1); } }
@keyframes ripple { from { transform: scale(0); opacity: 0.85; } to { transform: scale(36); opacity: 0; } }
@keyframes tap { 0% { opacity: 1; transform: scale(1); } 30% { opacity: 1; transform: scale(0.7); } 100% { opacity: 0; transform: scale(1.6); } }
.check-draw { flex: 0 0 auto; width: 22px; height: 22px; }
.check-draw path { stroke-dasharray: 30; stroke-dashoffset: 30; transition: stroke-dashoffset 0.6s 0.15s ease; }
.marked .check-draw path, .on .check-draw path { stroke-dashoffset: 0; }
.task-card.marked .check-draw path { transition-delay: 0.42s; }
.result .big { font: 750 54px/1 var(--display); letter-spacing: -0.05em; }
.result .big small { font: 600 18px var(--text); letter-spacing: 0; color: var(--muted); margin-left: 6px; }
.result .bar { margin: 14px 0 16px; height: 8px; }
/* Полоса идёт вместе с прокруткой, без запаздывания: числа меняются с ней в одном кадре. */
.result .bar span { transition: none; }
.result .late b { display: inline-block; min-width: 1ch; color: var(--ink); font-weight: 750; }
.result .late { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 14px; background: #faf9fd; box-shadow: inset 0 0 0 1px var(--line); }
.result .late > span:first-child { font-size: 14px; color: var(--ink-2); }

/* ── Живые блоки ────────────────────────────────────────────────────── */
.features { padding: 160px 0 40px; }
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin-top: 56px; }
.tile {
  --mx: 50%;
  --my: 50%;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 360px;
  padding: 26px;
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: 0 0 0 1px var(--line), var(--shadow-2);
  transition: transform 0.4s cubic-bezier(.2, .8, .2, 1), box-shadow 0.4s;
}
.tile:hover { box-shadow: 0 0 0 1px rgba(91, 60, 224, 0.18), var(--shadow-3); }
/* Пятно света за курсором. */
.tile::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(420px circle at var(--mx) var(--my), rgba(123, 92, 255, 0.10), transparent 45%); opacity: 0; transition: opacity 0.3s; }
.tile:hover::after { opacity: 1; }
.tile.w4 { grid-column: span 4; }
.tile.w3 { grid-column: span 3; }
.tile.w2 { grid-column: span 2; }
.tile h3 { margin: 0; font: 700 24px/1.1 var(--display); letter-spacing: -0.035em; }
.tile > p { margin: 8px 0 0; max-width: 40ch; color: var(--muted); font-size: 15px; }
.tile .demo { position: relative; z-index: 2; margin-top: auto; padding-top: 22px; }
.tile .fine { margin: 12px 0 0; font-size: 13px; color: var(--faint); }
.live { font-size: 13px; color: var(--muted); }

/* Сбор: монета и семьи. */
.pay { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 26px; align-items: center; }
.coin-zone { position: relative; height: 170px; perspective: 700px; }
.coin { position: absolute; left: 50%; top: 50%; width: 132px; height: 132px; margin: -66px 0 0 -66px; transform-style: preserve-3d; animation: coin-idle 6s ease-in-out infinite; }
.coin.flip { animation: coin-flip 1.1s cubic-bezier(.3, .7, .2, 1); }
.coin .face, .coin .back { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; backface-visibility: hidden; font: 800 58px/1 var(--display); color: rgba(255, 255, 255, 0.95); text-shadow: 0 2px 0 rgba(58, 37, 143, 0.35); }
.coin .face { background: radial-gradient(circle at 32% 28%, #fff 0 6%, transparent 22%), conic-gradient(from 210deg, #8f78ff, #5b3ce0, #38c6e8, #b5a6ff, #f27fc1, #8f78ff); box-shadow: inset 0 0 0 7px rgba(255, 255, 255, 0.35), inset 0 -10px 24px rgba(40, 20, 120, 0.45), 0 18px 40px -12px rgba(58, 37, 143, 0.6); }
.coin .back { transform: rotateY(180deg); background: conic-gradient(from 30deg, #38c6e8, #8f78ff, #5b3ce0, #f27fc1, #38c6e8); box-shadow: inset 0 0 0 7px rgba(255, 255, 255, 0.35), inset 0 -10px 24px rgba(40, 20, 120, 0.45); }
.coin .back svg { width: 54px; height: 54px; }
@keyframes coin-idle { 0%, 100% { transform: rotateY(-18deg) rotateX(8deg) translateY(0); } 50% { transform: rotateY(18deg) rotateX(-4deg) translateY(-6px); } }
@keyframes coin-flip { 0% { transform: rotateY(0) translateY(0); } 50% { transform: rotateY(540deg) translateY(-28px); } 100% { transform: rotateY(720deg) translateY(0); } }
.fam { display: grid; gap: 8px; }
.fam-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.fam-top b { font-size: 15px; }
.fam-top span { font-size: 13px; color: var(--muted); }
.sum { font: 750 30px/1 var(--display); letter-spacing: -0.04em; }
.sum small { font: 600 14px var(--text); color: var(--muted); letter-spacing: 0; margin-left: 6px; }
.pay-state { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.pay-state .btn { min-height: 46px; }
.status { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px; border-radius: 999px; font-size: 14px; font-weight: 650; background: rgba(23, 21, 31, 0.05); color: var(--muted); transition: background 0.3s, color 0.3s; }
.status.wait { background: var(--warn-soft); color: var(--warn); }
.status.ok { background: var(--ok-soft); color: var(--ok); }
.status .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.status.wait .dot { animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.3; } }

/* Анкета: настоящее поле ввода. */
.ask { display: grid; gap: 10px; }
.ask label { font-size: 13px; font-weight: 650; color: var(--muted); }
.ask .line { display: flex; gap: 8px; }
.ask input { flex: 1; min-width: 0; min-height: 48px; padding: 0 14px; border: 0; border-radius: 13px; background: #faf9fd; box-shadow: inset 0 0 0 1px var(--line-2); font: 16px var(--text); color: var(--ink); transition: box-shadow 0.2s, background 0.2s; }
.ask input:focus { outline: none; background: #fff; box-shadow: inset 0 0 0 2px var(--brand), 0 0 0 4px rgba(91, 60, 224, 0.12); }
.ask .send-ic { flex: 0 0 48px; display: grid; place-items: center; height: 48px; border: 0; border-radius: 13px; background: var(--brand); color: #fff; cursor: pointer; box-shadow: 0 8px 18px -8px rgba(91, 60, 224, 0.8); }
.ask .send-ic svg { width: 18px; height: 18px; }
.ask .sent { display: none; align-items: center; gap: 8px; min-height: 48px; padding: 0 14px; border-radius: 13px; background: var(--ok-soft); color: var(--ok); font-weight: 650; }
.ask.done .line { display: none; }
.ask.done .sent { display: flex; }
.ask-count { display: flex; align-items: center; gap: 10px; }
.ask-count .bar { flex: 1; }

.answers { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.answers span { padding: 6px 11px; border-radius: 999px; background: #f6f4ff; box-shadow: inset 0 0 0 1px rgba(91, 60, 224, 0.12); color: var(--brand-ink); font-size: 12.5px; font-weight: 600; animation: float-chip 6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -1.3s); }
.answers span:nth-child(2) { --i: 1; } .answers span:nth-child(3) { --i: 2; } .answers span:nth-child(4) { --i: 3; } .answers span:nth-child(5) { --i: 4; }
@keyframes float-chip { 50% { transform: translateY(-3px); } }
.buy { display: grid; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; }
.buy button { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: 12px; background: #faf9fd; box-shadow: inset 0 0 0 1px var(--line); font-size: 14.5px; text-align: left; cursor: pointer; transition: background 0.25s, color 0.25s; }
.buy button i { position: relative; flex: 0 0 20px; height: 20px; border-radius: 7px; box-shadow: inset 0 0 0 2px rgba(23, 21, 31, 0.2); transition: background 0.25s, box-shadow 0.25s; }
.buy button[aria-pressed="true"] { color: var(--muted); }
.buy button[aria-pressed="true"] i { background: var(--brand); box-shadow: 0 4px 10px -4px rgba(91, 60, 224, 0.8); }
.buy button[aria-pressed="true"] i::after { content: ""; position: absolute; left: 6px; top: 3px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* Событие. */
.event { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 16px; align-items: center; }
.date { position: relative; overflow: hidden; display: grid; place-items: center; height: 92px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--line), var(--shadow-2); text-align: center; }
.date::before { content: ""; position: absolute; inset: 0 0 auto; height: 26px; background: linear-gradient(90deg, var(--brand), #8a6cff); }
.date small { position: absolute; top: 5px; left: 0; right: 0; color: #fff; font-size: 11.5px; font-weight: 700; }
.date b { margin-top: 18px; font: 750 36px/1 var(--display); letter-spacing: -0.04em; }
.event-info b { display: block; font-size: 15px; }
.event-info span { font-size: 13px; color: var(--muted); }
.agree { margin-top: 16px; width: 100%; }
.agree.yes { background: var(--ok-soft); color: var(--ok); box-shadow: none; }

.going { display: flex; align-items: center; margin-top: 16px; }
.going span { display: grid; place-items: center; width: 32px; height: 32px; margin-left: -8px; border-radius: 50%; border: 2px solid #fff; background: var(--brand-soft); color: var(--brand-ink); font-size: 10.5px; font-weight: 800; }
.going span:first-child { margin-left: 0; }
.going .you { width: 0; margin-left: 0; border-width: 0; background: linear-gradient(135deg, #2bc07d, #12955a); color: #fff; opacity: 0; transform: scale(0.4); transition: width 0.4s, margin 0.4s, opacity 0.3s, transform 0.45s cubic-bezier(.2, .9, .25, 1.4), border-width 0.3s; overflow: hidden; }
.going.on .you { width: 32px; margin-left: -8px; border-width: 2px; opacity: 1; transform: none; }
#e-count { margin-top: 8px; }

/* «Ребёнка не будет». */
.absence .choice { display: flex; gap: 6px; padding: 5px; border-radius: 15px; background: rgba(23, 21, 31, 0.05); }
.absence .choice button { flex: 1; min-height: 44px; border: 0; border-radius: 11px; background: transparent; font-weight: 650; color: var(--muted); cursor: pointer; transition: background 0.25s, color 0.25s, box-shadow 0.25s; }
.absence .choice button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: var(--shadow-1); }
.absence .go { margin-top: 10px; width: 100%; }
.toast { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 12px 14px; border-radius: 14px; background: var(--ok-soft); color: var(--ok); font-size: 14px; font-weight: 600; opacity: 0; transform: translateY(6px); transition: opacity 0.35s, transform 0.4s cubic-bezier(.2, .9, .25, 1.2); }
.toast.on { opacity: 1; transform: none; }
.teacher-sees { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: #faf9fd; box-shadow: inset 0 0 0 1px var(--line); }
.teacher-sees small { display: block; font-size: 11.5px; color: var(--faint); }
.teacher-sees b { display: block; margin-top: 2px; font-size: 14px; }
.teacher-sees .names { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.teacher-sees .names span { padding: 4px 10px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 12.5px; font-weight: 600; }
.teacher-sees .names .mine { background: var(--ok-soft); box-shadow: none; color: var(--ok); opacity: 0; transform: translateY(6px) scale(0.9); transition: opacity 0.3s, transform 0.45s cubic-bezier(.2, .9, .25, 1.4); }
.teacher-sees.on .names .mine { opacity: 1; transform: none; }

/* Календарь в телефоне. */
.cal-phone { position: relative; min-height: 214px; border-radius: 22px; background: linear-gradient(180deg, #fff, #f7f6fb); box-shadow: 0 0 0 1px var(--line), var(--shadow-1); overflow: hidden; padding: 14px; }
.cal-phone .cp-head { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; }
.cal-phone .cp-head span { color: var(--pink); }
.cal-ev { display: flex; gap: 10px; align-items: center; margin-top: 10px; padding: 9px 10px; border-radius: 12px; background: var(--brand-soft); font-size: 13px; opacity: 0; transform: translateX(-16px); transition: opacity 0.4s, transform 0.5s cubic-bezier(.2, .9, .25, 1.2); }
.cal-ev i { width: 4px; align-self: stretch; border-radius: 4px; background: var(--brand); }
.cal-ev b { display: block; font-size: 13px; }
.cal-ev small { color: var(--muted); font-size: 11.5px; }
.cal-phone.on .cal-ev { opacity: 1; transform: none; }
.cal-phone.on .cal-ev:nth-child(3) { transition-delay: 0.12s; }
.cal-phone.on .cal-ev:nth-child(4) { transition-delay: 0.24s; }
.sub-btn { margin-top: 12px; width: 100%; }

/* Бот в MAX: лента сообщений. */
.bot { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 26px; align-items: end; }
.bot-feed { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; height: 230px; padding: 14px; border-radius: 22px; background: #eef0f6; overflow: hidden; -webkit-mask: linear-gradient(transparent, #000 25%); mask: linear-gradient(transparent, #000 25%); }
.bot-feed .bot-msg { opacity: 1; transform: none; max-width: 92%; }
.bot-feed .bot-msg.new { animation: msg-in 0.6s cubic-bezier(.2, .9, .25, 1.3) both; }
@keyframes msg-in { from { opacity: 0; transform: translateY(18px) scale(0.94); } }
.bot-side .who-left { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 14px; }
.bot-side .who-left span { padding: 5px 10px; border-radius: 999px; background: var(--warn-soft); color: var(--warn); font-size: 12.5px; font-weight: 650; }
.bot-side .who-left .who-more { background: rgba(23, 21, 31, 0.06); color: var(--muted); }
.bot-side .btn { width: 100%; }

/* ── Каждый видит своё ──────────────────────────────────────────────── */
.access { padding: 150px 0 40px; }
.lens { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 28px; margin-top: 52px; align-items: stretch; }
.tabs { position: relative; display: inline-flex; gap: 4px; padding: 5px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--line), var(--shadow-1); margin-top: 36px; }
.tabs button { position: relative; z-index: 1; min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: transparent; font-weight: 650; font-size: 15px; color: var(--muted); cursor: pointer; transition: color 0.3s; }
.tabs button[aria-selected="true"] { color: #fff; }
.tabs .pill { position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 0; width: 0; border-radius: 999px; background: linear-gradient(180deg, #6c4cf0, #5133d8); box-shadow: 0 8px 18px -8px rgba(91, 60, 224, 0.8); transition: transform 0.5s cubic-bezier(.3, .9, .3, 1.15), width 0.5s cubic-bezier(.3, .9, .3, 1.15); }
.lens-screen { position: relative; padding: 22px; border-radius: var(--r-xl); background: rgba(255, 255, 255, 0.86); box-shadow: inset 0 0 0 1px #fff, 0 0 0 1px var(--line), var(--shadow-3); }
.lens-screen .ls-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.lens-screen .ls-head b { font: 700 19px/1.2 var(--display); letter-spacing: -0.03em; view-transition-name: ls-title; }
.lens-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px 12px; border-radius: 16px; }
.lens-row + .lens-row { box-shadow: 0 -1px 0 rgba(23, 21, 31, 0.05); }
.lens-row .ri { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--brand-soft); color: var(--brand); }
.lens-row .ri svg { width: 18px; height: 18px; }
.lens-row b { display: block; font-size: 15px; }
.lens-row small { color: var(--muted); font-size: 13px; }
.lens-row.locked { background: repeating-linear-gradient(135deg, rgba(23, 21, 31, 0.025) 0 8px, transparent 8px 16px); }
.lens-row.locked .ri { background: rgba(23, 21, 31, 0.06); color: var(--faint); }
.lens-row.locked b { color: var(--muted); }
.vis { display: grid; align-content: start; gap: 22px; padding: 26px; border-radius: var(--r-xl); background: #fff; box-shadow: 0 0 0 1px var(--line), var(--shadow-2); }
.vis h4 { margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--muted); }
.vis ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.vis li { display: flex; gap: 10px; align-items: flex-start; font-size: 15.5px; line-height: 1.4; }
.vis li svg { flex: 0 0 20px; width: 20px; height: 20px; margin-top: 1px; }
.vis .yes svg { color: var(--ok); }
.vis .no svg { color: var(--faint); }
.vis .no li { color: var(--muted); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.35s; }
.limits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.limit { display: flex; gap: 14px; align-items: flex-start; padding: 22px; border-radius: var(--r-lg); background: rgba(255, 255, 255, 0.6); box-shadow: inset 0 0 0 1px var(--line); }
.limit .ri { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #fff; box-shadow: var(--shadow-1); color: var(--brand); }
.limit .ri svg { width: 19px; height: 19px; }
.limit b { display: block; font-size: 16px; }
.limit span { display: block; margin-top: 3px; font-size: 14.5px; color: var(--muted); }

/* ── Подключение ────────────────────────────────────────────────────── */
.connect { padding: 150px 0 40px; }
.track { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 56px; }
.track::before { content: ""; position: absolute; z-index: 2; left: 60px; right: calc(33.33% - 60px); top: 46px; height: 2px; background: rgba(23, 21, 31, 0.08); }
.track::after { content: ""; position: absolute; z-index: 2; left: 60px; top: 46px; height: 2px; width: calc((100% - 33.33%) * var(--tp, 0)); background: linear-gradient(90deg, var(--brand), var(--cyan)); box-shadow: 0 0 14px rgba(56, 198, 232, 0.9); transition: width 1.6s cubic-bezier(.3, .7, .2, 1); }
.track.in::after { --tp: 1; }
.stop { position: relative; padding: 0 22px 26px; border-radius: var(--r-lg); background: #fff; box-shadow: 0 0 0 1px var(--line), var(--shadow-2); }
.stop .n { position: relative; z-index: 3; display: grid; place-items: center; width: 60px; height: 60px; margin: 16px 0 18px; border-radius: 18px; background: linear-gradient(145deg, #fff, #f1eefc); box-shadow: inset 0 0 0 1px rgba(91, 60, 224, 0.2), var(--shadow-1); font: 750 26px/1 var(--display); color: var(--brand); }
.stop b { display: block; font: 700 20px/1.2 var(--display); letter-spacing: -0.03em; }
.stop span { display: block; margin-top: 8px; color: var(--muted); font-size: 15px; }
.connect .cta { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }

/* ── Последний экран ────────────────────────────────────────────────── */
.final { padding: 150px 0 120px; }
.final-card { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); align-items: center; gap: 20px; padding: 60px; border-radius: 40px; background: linear-gradient(160deg, #ffffff 0%, #f4f1ff 55%, #eaf8fc 100%); box-shadow: inset 0 0 0 1px #fff, 0 0 0 1px var(--line), var(--shadow-3); }
.final-card.beam { --bw: 1.5px; }
.final-card .cta { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.final-card p { margin: 18px 0 0; max-width: 40ch; color: var(--muted); font-size: 18px; }
.final-3d { position: relative; height: 380px; }
.final-3d canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
/* Без WebGL и при экономии трафика — знак картинкой и здесь, а не пустое место. */
.no-webgl .final-3d { background: url("/logo.svg") center / 150px no-repeat; }

footer { padding: 40px 0 60px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.foot .foot-name { color: var(--ink); }

/* Служебное: набор значков без размера и счётчик посещений вне экрана (D82). */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.px { position: absolute; left: -9999px; width: 1px; height: 1px; }

/* Задержки появления первого экрана и стартовые ширины полосок — вместо встроенных стилей. */
.rise.r1 { --dl: 0.15s; }
.rise.r2 { --dl: 0.3s; }
.rise.r3 { --dl: 0.45s; }
.rise.r4 { --dl: 0.55s; }
.rise.r5 { --dl: 0.7s; }
.w-25 { --w: 25%; }
.w-375 { --w: 37.5%; }
.w-708 { --w: 70.8%; }
.w-75 { --w: 75%; }
.w-833 { --w: 83.3%; }
.foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 40px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot nav a:hover { color: var(--ink); }
.foot .org { grid-column: 1 / -1; font-size: 13px; color: var(--faint); }

/* ── Телефон и узкие экраны ─────────────────────────────────────────── */
@media (max-width: 1020px) {
  .top-bar nav { display: none; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile.w4, .tile.w3 { grid-column: span 2; }
  .tile.w2 { grid-column: span 1; }
  .lens { grid-template-columns: 1fr; }
  .final-card { grid-template-columns: 1fr; padding: 40px; }
}
@media (max-width: 820px) {
  /* Сцены при прокрутке без закрепления: каждая играет, когда попадает на экран. */
  .chaos, .story { height: auto; margin-top: 90px; }
  .chaos-pin, .story-pin { position: static; height: auto; display: block; }
  .chaos-grid, .story-grid { grid-template-columns: 1fr; gap: 28px; }
  .chaos-stage { height: 440px; }
  .story-stage { height: 560px; }
  .steps li { opacity: 1; }
  .features, .access, .connect { padding-top: 100px; }
  .track { grid-template-columns: 1fr; }
  .track::before, .track::after { display: none; }
  .limits { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  :root { --wrap: calc(100% - 32px); }
  body { font-size: 16px; }
  .top { inset: calc(10px + env(safe-area-inset-top, 0px)) 0 auto; }
  .top-bar { padding: 6px 6px 6px 18px; }
  /* На телефоне виден только знак; название остаётся для чтения с экрана. */
  .site-mark .site-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .hero { padding-top: 96px; }
  .stage3d { height: 320px; margin-bottom: -18px; }
  .hero .cta .btn { width: 100%; }
  .window-zone { margin-top: 48px; width: calc(100% - 24px); }
  .bento { grid-template-columns: 1fr; }
  .tile.w4, .tile.w3, .tile.w2 { grid-column: auto; }
  .tile { min-height: 0; padding: 22px; }
  .pay { grid-template-columns: 1fr; }
  .coin-zone { height: 150px; }
  .bot { grid-template-columns: 1fr; }
  .tabs { display: flex; width: 100%; overflow-x: auto; scrollbar-width: none; }
  .tabs button { flex: 1 0 auto; padding: 0 14px; font-size: 14px; }
  .final-card { padding: 28px 22px; border-radius: 30px; }
  .final-3d { height: 260px; order: -1; margin: -10px 0 -20px; }
  .foot { grid-template-columns: 1fr; }
  .counter .big { font-size: 52px; }
  .phone { width: 270px; height: 500px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .beam::before { display: none; }
}