/* shared/fonts/inter.css */
/* Шрифт Inter (rsms.me/inter), лицензия SIL OFL 1.1: см. licenses/LICENSE-inter.txt.
   Четыре начертания: 400 текст, 500 кнопки и названия, 600 главная кнопка и цифры, 700 заголовки.
   Латиница, кириллица и вьетнамские буквы (три языка сайта): 148 КБ на все двенадцать файлов. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("/social/assets/landings/inter-cyrillic-400-normal.f0bb586459.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("/social/assets/landings/inter-latin-400-normal.8909904ab6.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: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("/social/assets/landings/inter-vietnamese-400-normal.547ad9fdae.woff2") format('woff2');
  unicode-range:
    U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309,
    U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url("/social/assets/landings/inter-cyrillic-500-normal.b77a86ec16.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url("/social/assets/landings/inter-latin-500-normal.f3779f1efc.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: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url("/social/assets/landings/inter-vietnamese-500-normal.44e36aa5a8.woff2") format('woff2');
  unicode-range:
    U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309,
    U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url("/social/assets/landings/inter-cyrillic-600-normal.6c2a37f82a.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url("/social/assets/landings/inter-latin-600-normal.f9a06e79cd.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: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url("/social/assets/landings/inter-vietnamese-600-normal.1aeb94ae9d.woff2") format('woff2');
  unicode-range:
    U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309,
    U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url("/social/assets/landings/inter-cyrillic-700-normal.5917871d3c.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url("/social/assets/landings/inter-latin-700-normal.6f56409fd3.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: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url("/social/assets/landings/inter-vietnamese-700-normal.5fafa3829a.woff2") format('woff2');
  unicode-range:
    U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309,
    U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* shared/landing.css */
/* Шаблон лендингов Tyrian: общие стили.
 *
 * Основа взята из разбора витринной страницы (../../okx-vip): холст 1440, чёрные панели в
 * шахматном порядке с нахлёстом, панели во всю ширину окна, светлый неподвижный фон,
 * «слоновая кость» на чёрном, одна фиолетовая кнопка. Здесь только то, что нужно любому
 * лендингу продукта: темы, шапка, сетка, панели, текст, кнопки, вопросы, финал и подвал.
 * Примеры интерфейса конкретного продукта живут в стилях его страницы.
 *
 * Темы: data-theme="light" (по умолчанию, светлый фон и чёрные панели) и "dark"
 * (чёрный фон, панели отделены тонкой линией). Все цвета берутся из переменных ниже.
 */

.lp-root {
  --gap: 24px;  /* промежуток между панелями (02.11: было 2 px, блоки стояли «в прилипку») */
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --spring: cubic-bezier(0.34, 1.45, 0.64, 1);

  /* На чёрных панелях: одинаково в обеих темах */
  --ivory: rgb(225 214 198);
  --ivory-2: rgb(225 214 198 / 0.72);
  --ivory-3: rgb(225 214 198 / 0.5);
  --ivory-4: rgb(225 214 198 / 0.32);
  --line: rgb(225 214 198 / 0.11);
  --line-2: rgb(225 214 198 / 0.2);
  --accent: #a06aff;
  --accent-soft: rgb(160 106 255 / 0.16);
  --accent-ink: #c4a3ff;
  --up: #63c99a;
  --down: #e9868a;
  --glow: rgb(160 106 255 / 0.3);

  /* Страница вокруг панелей: светлая тема */
  --page: #8e877d;
  --page-ink: #0d0d0d;
  --page-ink-2: rgb(13 13 13 / 0.66);
  --panel: #000;
  --panel-edge: transparent;
  --head: rgb(0 0 0 / 0.86);
  --head-line: rgb(255 255 255 / 0.06);
  --gutter: 69px;
}

html[data-theme='dark'] .lp-root {
  --page: #000;
  --page-ink: rgb(225 214 198);
  --page-ink-2: rgb(225 214 198 / 0.6);
  --panel: #040405;
  --panel-edge: rgb(255 255 255 / 0.075);
  --head: rgb(0 0 0 / 0.8);
}

.lp-root * { box-sizing: border-box; }
.lp-root { background: var(--page); color-scheme: light; scroll-padding-top: 72px; scroll-behavior: smooth; }
.lp-root.is-calm { scroll-behavior: auto; }  /* ?still=1 и «меньше движения»: класс ставит landing.js */
html[data-theme='dark'] .lp-root { color-scheme: dark; }
.lp-root { margin: 0; font: 400 14px/1.4 var(--font); color: var(--page-ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.lp-root button, .lp-root input { font: inherit; color: inherit; }
.lp-root button { cursor: pointer; }
.lp-root svg { display: block; }
.lp-root .lp-h1, .lp-root h2, .lp-root h3, .lp-root h4, .lp-root h5, .lp-root h6, .lp-root p, .lp-root ul, .lp-root ol, .lp-root dl, .lp-root dd, .lp-root figure { margin: 0; }
.lp-root ul, .lp-root ol { padding: 0; list-style: none; }
.lp-root a { color: inherit; }
.lp-root main { overflow-x: clip; }
.lp-root main[data-enter] { animation: lp-enter 0.7s var(--ease) both; }
@keyframes lp-enter { from { opacity: 0; transform: translateY(24px); } }
.lp-root .num { font-variant-numeric: tabular-nums; }
.lp-root .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Неподвижный фон ------------------------------------------------------------------ */
.lp-root .lp-bg { position: fixed; inset: 0; z-index: -1; transition: opacity 0.6s var(--ease); }
.lp-root .lp-bg::before, .lp-root .lp-bg::after { content: ''; position: absolute; inset: 0; transition: opacity 0.8s var(--ease); }
.lp-root .lp-bg::before {
  background:
    radial-gradient(60% 55% at 18% 10%, rgb(238 233 224 / 0.92), transparent 70%),
    radial-gradient(55% 60% at 90% 94%, rgb(88 82 75 / 0.78), transparent 72%),
    radial-gradient(45% 40% at 80% 16%, rgb(198 190 178 / 0.8), transparent 70%),
    linear-gradient(140deg, #bbb4a8, #8e877d 52%, #6b655d);
}
.lp-root .lp-bg::after {
  background:
    radial-gradient(70% 50% at 50% 118%, rgb(96 38 197 / 0.22), transparent 70%),
    radial-gradient(46% 42% at 16% 12%, rgb(225 214 198 / 0.075), transparent 70%),
    radial-gradient(36% 36% at 22% 40%, rgb(96 38 197 / 0.12), transparent 70%),
    #000;
  opacity: 0;
}
html[data-theme='dark'] .lp-root .lp-bg::before { opacity: 0; }
html[data-theme='dark'] .lp-root .lp-bg::after { opacity: 1; }
.lp-root .lp-grain { position: absolute; inset: 0; opacity: 0.22; mix-blend-mode: soft-light; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"); }
html[data-theme='dark'] .lp-root .lp-grain { opacity: 0.08; mix-blend-mode: screen; }

/* ---- Шапка: прилипает, под ней размытие ---------------------------------------------- */
.lp-root .lp-top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 24px; color: #fafafa; background: var(--head); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); box-shadow: inset 0 -1px 0 var(--head-line); white-space: nowrap; }
.lp-root .lp-brand { display: flex; align-items: center; gap: 9px; margin-right: 20px; font: 700 16px/1 var(--font); letter-spacing: -0.01em; text-decoration: none; }
.lp-root .lp-brand svg { width: 22px; height: 22px; }
.lp-root .lp-brand svg.tt-logo, .lp-root .lp-foot svg.tt-logo { width: 18px; height: 23px; }
.lp-root .lp-nav { display: flex; gap: 2px; margin-right: auto; overflow: hidden; }
.lp-root .lp-nav a { padding: 8px 10px; border-radius: 8px; font: 500 14px/16px var(--font); color: rgb(250 250 250 / 0.72); text-decoration: none; transition: color 0.16s, background 0.16s; }
.lp-root .lp-nav a:hover { color: #fff; background: rgb(255 255 255 / 0.06); }
.lp-root .lp-nav a { position: relative; }
.lp-root .lp-nav a::after { content: ''; position: absolute; right: 10px; bottom: 2px; left: 10px; height: 2px; border-radius: 1px; background: var(--accent); box-shadow: 0 0 8px var(--accent); opacity: 0; transform: scaleX(0.3); transition: opacity 0.3s, transform 0.4s var(--ease); }
.lp-root .lp-nav a[aria-current='true'] { color: #fff; }
.lp-root .lp-nav a[aria-current='true']::after { opacity: 1; transform: none; }
.lp-root .lp-mark { padding: 3px 7px; border: 1px solid rgb(255 255 255 / 0.22); border-radius: 4px; font: 600 10px/14px var(--font); letter-spacing: 0.1em; text-transform: uppercase; color: rgb(255 255 255 / 0.62); }
.lp-root .lp-seg { display: inline-flex; padding: 2px; border-radius: 999px; background: rgb(255 255 255 / 0.07); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06); }
.lp-root .lp-seg button { min-width: 34px; height: 28px; padding: 0 9px; border: 0; border-radius: 999px; background: none; font: 600 11px/1 var(--font); letter-spacing: 0.06em; color: rgb(255 255 255 / 0.56); transition: color 0.16s, background 0.2s var(--ease); }
.lp-root .lp-seg button:hover { color: #fff; }
.lp-root .lp-seg button[aria-pressed='true'] { color: #000; background: #f2ede6; }
.lp-root .lp-icon-btn { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; color: rgb(255 255 255 / 0.8); background: rgb(255 255 255 / 0.07); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06); transition: color 0.16s, background 0.16s; }
.lp-root .lp-icon-btn:hover { color: #fff; background: rgb(255 255 255 / 0.12); }
.lp-root .lp-icon-btn svg { width: 16px; height: 16px; }
.lp-root .lp-theme .i-sun { display: none; }
html[data-theme='dark'] .lp-root .lp-theme .i-sun { display: block; }
html[data-theme='dark'] .lp-root .lp-theme .i-moon { display: none; }
.lp-root .lp-top .cta { height: 36px; min-width: 0; padding: 0 16px; font-size: 14px; }
/* Меню разделов для окон у́же 1200: лист под шапкой */
.lp-root .lp-menu-btn { display: none; }
.lp-root .lp-menu-btn path { transition: d 0.3s var(--ease); }
.lp-root .lp-menu-btn[aria-expanded='true'] path { d: path('M6 6l12 12M18 6 6 18'); }
.lp-root .lp-sheet { position: absolute; top: 100%; right: 12px; left: 12px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 8px; border-radius: 18px; background: #050506; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08), 0 24px 48px rgb(0 0 0 / 0.5); animation: lp-sheet 0.3s var(--ease) both; }
.lp-root .lp-sheet[hidden] { display: none; }
@keyframes lp-sheet { from { opacity: 0; transform: translateY(-8px); } }
.lp-root .lp-sheet a { display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 0 14px; border-radius: 12px; font: 500 17px/1 var(--font); color: #fafafa; text-decoration: none; }
.lp-root .lp-sheet a:hover, .lp-root .lp-sheet a[aria-current='true'] { background: rgb(255 255 255 / 0.07); }
.lp-root .lp-sheet a::after { content: ''; width: 7px; height: 7px; border: solid rgb(255 255 255 / 0.4); border-width: 1.6px 1.6px 0 0; transform: rotate(45deg); }
.lp-root .lp-top .lp-sheet .cta { display: inline-flex; height: 48px; margin-top: 6px; width: 100%; font-size: 16px; }

/* ---- Холст 1440 и ряды --------------------------------------------------------------- */
.lp-root .canvas { position: relative; max-width: 1440px; margin: 0 auto; padding: 80px var(--gutter) 96px; }
.lp-root .row { position: relative; display: flex; gap: var(--gap); margin-top: var(--gap); }
/* Ряд с нахлёстом (pull-200/300) это прозрачная коробка поверх низа соседней панели: сам ряд не ловит нажатия,
   нажимаются только панели. Финал поднят на 200 и накрывает последний вопрос: мышь получают только его кнопки. */
.lp-root .canvas > .row, .lp-root .row { pointer-events: none; }
.lp-root .row > .pn { pointer-events: auto; }
.lp-root .row-right { justify-content: flex-end; }
.lp-root .row-gap { margin-top: calc(var(--gap) * 3); }
.lp-root .pull-200 { margin-top: -200px; }
.lp-root .pull-300 { margin-top: -300px; }
.lp-root .row-full { width: 100vw; margin-left: calc(50% - 50vw); }

/* Панель: чёрная, радиус 30. Прозрачность, подъём и размытие содержимого задаёт прокрутка.
   Обрезка clip, а не hidden: с hidden панель становится контейнером прокрутки, «прилипание» (sticky) внутри неё
   не работает, а фокус или прокрутка к кнопке сдвигали содержимое вбок на запас слоя света. */
.lp-root .pn { position: relative; flex: none; overflow: clip; width: calc(50% - var(--gap) / 2); border-radius: 30px; color: var(--ivory); background: var(--panel); box-shadow: inset 0 0 0 1px var(--panel-edge); will-change: transform, opacity; }
.lp-root .pn-in { position: relative; z-index: 2; padding: 56px; transition: filter 0.7s var(--ease); will-change: transform, filter; }
.lp-root .pn.is-soft .pn-in { filter: blur(10px) brightness(1.24); }
.lp-root .pn.span { width: 100%; }
.lp-root .pn.wide { width: 100%; border-radius: 30px; }
.lp-root .row-full { padding: 0 var(--gap); }
.lp-root .pn.wide > .pn-in { max-width: 1440px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

/* Свет под курсором: пятно идёт за указателем, ярче всего у самой точки. */
.lp-root .pn-glow { position: absolute; inset: -34%; z-index: 0; background: radial-gradient(circle at var(--gx, 36%) var(--gy, 28%), var(--glow), transparent 34%); opacity: 0; transform: scale(0.8); transition: opacity 0.6s var(--ease), transform 0.9s var(--ease); pointer-events: none; }
.lp-root .pn:hover .pn-glow { opacity: 1; transform: none; }
/* На сенсорных экранах «наведение» залипает после касания и заливает панель фиолетовым: свет только для мыши */
@media (hover: none) { .lp-root .pn-glow { display: none; } }

/* ---- Текст на панелях ----------------------------------------------------------------- */
.lp-root .eyebrow { display: flex; align-items: center; gap: 10px; font: 600 12px/16px var(--font); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ivory-2); }
.lp-root .eyebrow b { font-weight: 600; color: var(--ivory); }
.lp-root .eyebrow i { width: 18px; height: 1px; background: var(--ivory-3); }
.lp-root .pn h2 { font: 500 56px/1.06 var(--font); letter-spacing: -0.03em; text-wrap: balance; }
.lp-root .pn h2.big { font-size: 62px; }
.lp-root .pn h2.mid { font-size: 48px; }
.lp-root .pn p.lead, .lp-root .pn .lead { font: 400 20px/28px var(--font); color: var(--ivory-2); text-wrap: pretty; }
.lp-root .eyebrow + h2 { margin-top: 32px; }
.lp-root h2 + .lead { max-width: 520px; margin-top: 21px; }
.lp-root .fine { font: 400 13px/18px var(--font); color: rgb(225 214 198 / 0.56); }

/* Короткая надпись прописными над числом, число нежирное с единицей рядом (манера MONOLITH) */
.lp-root .stat { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.lp-root .stat small { font: 600 12px/15px var(--font); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ivory-3); }
.lp-root .stat strong { font: 400 30px/34px var(--font); letter-spacing: -0.03em; color: var(--ivory); font-variant-numeric: tabular-nums; }
.lp-root .stat strong em { margin-left: 4px; font-style: normal; font-size: 14px; letter-spacing: 0; color: var(--ivory-3); }
.lp-root .tag { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border: 1px solid var(--line-2); border-radius: 4px; font: 600 11px/1 var(--font); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ivory-2); white-space: nowrap; }

/* ---- Кнопки --------------------------------------------------------------------------- */
/* Главная: «пилюля» 56 с градиентом приложения (#8A2FFF → #0D0127) и бликом под пальцем */
.lp-root .cta {
  position: relative; overflow: hidden; display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 10px;
  min-width: 128px; height: 56px; padding: 0 26px; border: 0; border-radius: 60px; color: #fff; text-decoration: none;
  background: radial-gradient(ellipse 80% 80% at 50% 50%, #8a2fff 0%, #6026c5 25%, #4a21a7 37.5%, #351c8a 50%, #210f59 75%, #170840 87.5%, #0d0127 100%);
  box-shadow: inset 0 1px 1px rgb(255 255 255 / 0.34), inset 0 -1px 2px rgb(0 0 0 / 0.6), inset 0 0 0 1px rgb(255 255 255 / 0.12), 0 12px 28px -14px rgb(138 47 255 / 0.9);
  font: 500 17px/20px var(--font); white-space: nowrap; transition: transform 0.24s var(--spring), filter 0.16s;
}
.lp-root .cta::after { content: ''; position: absolute; inset: 0; background: radial-gradient(120px circle at var(--bx, 50%) var(--by, 0%), rgb(255 255 255 / 0.28), transparent 60%); opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.lp-root .cta:hover { filter: brightness(1.1); }
.lp-root .cta:hover::after { opacity: 1; }
.lp-root .cta:active { transform: scale(0.97); }
.lp-root .cta svg { width: 16px; height: 16px; }
.lp-root .cta.sm { height: 44px; min-width: 0; padding: 0 20px; font-size: 15px; }
/* Тихая: чёрная выпуклая, свет только по канту */
.lp-root .ghost { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border: 0; border-radius: 999px; color: var(--ivory); background: linear-gradient(#141416, #050506); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.1), inset 0 0 0 1px rgb(255 255 255 / 0.09), 0 6px 14px -8px #000; font: 500 14px/16px var(--font); white-space: nowrap; transition: transform 0.2s var(--spring), box-shadow 0.2s; }
.lp-root .ghost:hover { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14), inset 0 0 0 1px rgb(160 106 255 / 0.5), 0 6px 18px -8px rgb(138 47 255 / 0.7); }
.lp-root .ghost:active { transform: scale(0.97); }
.lp-root .ghost.lg { height: 56px; padding: 0 24px; font-size: 17px; }  /* рядом с главной кнопкой: одна высота */
.lp-root .ghost svg { width: 14px; height: 14px; }
.lp-root .chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 999px; background: none; color: var(--ivory-2); font: 500 13px/1 var(--font); white-space: nowrap; transition: color 0.16s, border-color 0.16s, background 0.16s; }
.lp-root .chip:hover { color: var(--ivory); border-color: rgb(225 214 198 / 0.36); }
.lp-root .chip[aria-pressed='true'], .lp-root .chip.is-on { color: var(--ivory); border-color: rgb(160 106 255 / 0.7); background: var(--accent-soft); }

/* ---- Строка-девиз рядом с панелью ---------------------------------------------------- */
.lp-root .side, .lp-root .intro, .lp-root .final h2, .lp-root .final-act p { transition: color 0.5s var(--ease); }
.lp-root .side { pointer-events: none; position: relative; z-index: 10; display: flex; flex: none; justify-content: center; width: calc(50% - var(--gap) / 2); font: 500 20px/28px var(--font); text-align: center; color: var(--page-ink); }
.lp-root .side p { max-width: 460px; text-wrap: balance; }
.lp-root .side small { display: block; margin-top: 10px; font: 400 15px/22px var(--font); color: var(--page-ink-2); }
.lp-root .side.mid { align-items: center; padding: 0 40px; }
.lp-root .side.low { align-items: flex-end; padding: 0 60px 200px; }
.lp-root .side.high { align-items: flex-start; padding: 140px 60px 0; }

/* ---- Вопросы ---------------------------------------------------------------------------- */
.lp-root .faq-list { border-bottom: 1px solid var(--line-2); }
.lp-root .faq-item { border-top: 1px solid var(--line-2); }
.lp-root .faq-item > summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; padding: 26px 0; border: 0; background: none; text-align: left; font: 500 18px/24px var(--font); color: var(--ivory); }
.lp-root .faq-item > summary i { position: relative; flex: none; width: 14px; height: 14px; margin-right: 6px; }
.lp-root .faq-item > summary i::before, .lp-root .faq-item > summary i::after { content: ''; position: absolute; top: 6px; left: 0; width: 14px; height: 1.6px; border-radius: 1px; background: currentColor; transition: transform 0.3s var(--ease); }
.lp-root .faq-item > summary i::after { transform: rotate(90deg); }
.lp-root .faq-item[open] > summary i::after { transform: rotate(0); }
.lp-root .faq-item > div { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 0fr; transition: grid-template-rows 0.4s var(--ease); }
.lp-root .faq-item[open] > summary + div { grid-template-rows: 1fr; }
.lp-root .faq-item > div > p { overflow: hidden; max-width: 760px; font: 400 16px/25px var(--font); color: var(--ivory-2); }
.lp-root .faq-item[open] > summary + div > p { padding-bottom: 26px; }

/* ---- Финал: экран «приклеен», надпись проявляется из размытия ------------------------ */
.lp-root .final { position: relative; height: calc(var(--vh, 100vh) + 240px); margin-top: -200px; }
.lp-root .final, .lp-root .final > section { pointer-events: none; }
.lp-root .final .final-act, .lp-root .final a, .lp-root .final button { pointer-events: auto; }
.lp-root .final > section { position: sticky; top: 0; display: flex; align-items: center; justify-content: center; height: var(--vh, 100vh); }
.lp-root .final-in { display: flex; flex-direction: column; align-items: center; width: 100%; padding: 0 16px; text-align: center; }
.lp-root .final h2 { margin-bottom: 44px; font: 500 clamp(40px, 6.6vw, 120px)/1.08 var(--font); letter-spacing: -0.04em; color: var(--page-ink); text-wrap: balance; }
.lp-root .final h2, .lp-root .final .final-act { transition: filter 0.7s var(--ease); will-change: transform, opacity, filter; }
.lp-root .final .is-soft { filter: blur(50px); }
.lp-root .final-act { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.lp-root .final-act p { font: 400 15px/22px var(--font); color: var(--page-ink-2); }

.lp-root .lp-foot { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 32px 48px; padding: 56px var(--gutter) 32px; color: rgb(255 255 255 / 0.56); background: #000; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06); font: 400 14px/20px var(--font); }
.lp-root .lp-foot svg { width: 22px; height: 22px; }
.lp-root .lp-foot b { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; color: #fafafa; }
.lp-root .lp-foot-brand p { max-width: 320px; margin-top: 14px; }
.lp-root .lp-foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.lp-root .lp-foot-cols div { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 10px; }
.lp-root .lp-foot h4 { margin: 0 0 4px; font: 600 12px/16px var(--font); letter-spacing: 0.14em; text-transform: uppercase; color: rgb(255 255 255 / 0.4); }
.lp-root .lp-foot a { color: rgb(255 255 255 / 0.72); text-decoration: none; transition: color 0.16s; }
.lp-root .lp-foot a:hover { color: #fff; }
/* Все лендинги: ряд ссылок над нижней строкой подвала, текущая страница отмечена */
.lp-root .lp-foot-sites { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid rgb(255 255 255 / 0.08); }
.lp-root .lp-foot-sites div { display: flex; flex-wrap: wrap; gap: 8px; }
.lp-root .lp-foot-sites a { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1); font-size: 13px; white-space: nowrap; transition: color 0.16s, box-shadow 0.16s, background 0.16s; }
.lp-root .lp-foot-sites a:hover { box-shadow: inset 0 0 0 1px rgb(160 106 255 / 0.55); }
.lp-root .lp-foot-sites a[aria-current='page'] { color: #fff; background: rgb(160 106 255 / 0.16); box-shadow: inset 0 0 0 1px rgb(160 106 255 / 0.7); }
.lp-root .lp-foot-sites .lp-foot-index { color: rgb(255 255 255 / 0.56); }
.lp-root .lp-foot-base { display: flex; flex-wrap: wrap; gap: 8px 24px; grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid rgb(255 255 255 / 0.08); font-size: 13px; }
.lp-root .lp-foot-base span:last-child { margin-left: auto; }

.lp-root :is(.cta, .ghost, .chip, .faq-item > summary, .lp-seg button, .lp-icon-btn, .lp-nav a):focus-visible { outline: 2px solid #b28aff; outline-offset: 3px; }
.lp-root .lp-nav a:focus-visible, .lp-root .lp-seg button:focus-visible { outline-offset: -2px; }  /* у меню обрезка по краю: рамка внутрь */
/* Остальные кнопки, ссылки и переключатели примеров: та же рамка. Вес как у одного класса: свои правила страницы важнее. */
.lp-root :where(main, .lp-foot, .lp-sheet) :where(button, a[href], select, summary, input:is([type='checkbox'], [type='radio'], [type='range']), [role='button'], [role='tab'], [tabindex]:not([tabindex='-1'])):focus-visible { outline: 2px solid #b28aff; outline-offset: 2px; }

.lp-root .lp-toast:not([hidden]) { animation: lp-toast 0.35s var(--spring) both; }
@keyframes lp-toast { from { opacity: 0; transform: translate(-50%, 12px) scale(0.96); } }
.lp-root .lp-toast { position: fixed; bottom: 24px; left: 50%; z-index: 41; display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 12px; color: var(--ivory); background: #000; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1), 0 12px 30px rgb(0 0 0 / 0.4); transform: translateX(-50%); font: 500 14px/20px var(--font); }
.lp-root .lp-toast[hidden] { display: none; }
.lp-root .lp-toast::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }

/* ---- Окно у́же 1440: та же сетка, текст мельче ----------------------------------------- */
@media (max-width: 1439.98px) {
  .lp-root .pn h2 { font-size: clamp(36px, 3.9vw, 56px); }
  .lp-root .pn h2.big { font-size: clamp(40px, 4.3vw, 62px); }
  .lp-root .pn h2.mid { font-size: clamp(32px, 3.4vw, 48px); }
}

/* Шапка на 1200–1380: метка «Макет» уходит, пункты меню плотнее, чтобы последний не обрезался */
@media (max-width: 1379.98px) {
  .lp-root .lp-top .lp-mark { display: none; }
}
@media (min-width: 1200px) and (max-width: 1379.98px) {
  .lp-root .lp-brand { margin-right: 12px; }
  .lp-root .lp-nav a { padding: 8px 8px; }
}

@media (max-width: 1199.98px) {
  .lp-root .lp-nav { display: none; }
  .lp-root .lp-menu-btn { display: grid; }
  .lp-root .lp-brand { margin-right: auto; }
}

@media (max-width: 1099.98px) {
  .lp-root { --gutter: 32px; }
  .lp-root .canvas { padding: 56px var(--gutter) 72px; }
  .lp-root .pn-in { padding: 40px; }
  .lp-root { --gap: 18px; }
  .lp-root .pn .lead { font-size: 18px; line-height: 26px; }
}

/* ---- Телефон и узкий планшет: один столбец ------------------------------------------- */
@media (max-width: 859.98px) {
  .lp-root { --gutter: 16px; }
  .lp-root .lp-top { gap: 8px; height: 52px; padding: 0 12px; }
  .lp-root .lp-mark { display: none; }
  .lp-root .lp-top .cta { display: none; }
  .lp-root .canvas { padding: 20px var(--gutter) 56px; }
  .lp-root { --gap: 14px; }
  .lp-root .row { display: block; margin-top: var(--gap); }
  .lp-root .pull-200, .lp-root .pull-300 { margin-top: var(--gap); }
  .lp-root .row-gap { margin-top: calc(var(--gap) * 2); }
  .lp-root .row-full { padding: 0; }
  .lp-root .row-full { width: auto; margin-left: 0; }
  .lp-root .pn, .lp-root .pn.wide { width: 100%; border-radius: 24px; }
  .lp-root .pn-in { padding: 28px 20px; }
  .lp-root .pn.wide > .pn-in { padding-left: 20px; padding-right: 20px; }
  .lp-root .pn h2, .lp-root .pn h2.big, .lp-root .pn h2.mid { font-size: 32px; line-height: 38px; letter-spacing: -0.025em; }
  .lp-root .pn .lead { font-size: 16px; line-height: 24px; }
  .lp-root .eyebrow + h2 { margin-top: 20px; }
  .lp-root h2 + .lead { margin-top: 14px; }
  .lp-root .side, .lp-root .side.mid, .lp-root .side.low, .lp-root .side.high { width: 100%; height: auto; padding: 22px 12px; font-size: 18px; line-height: 26px; }
  .lp-root .faq-item > summary { padding: 20px 0; font-size: 16px; }
  .lp-root .final { margin-top: -80px; }
  .lp-root .final h2 { margin-bottom: 32px; }
  .lp-root .lp-foot { grid-template-columns: minmax(0, 1fr); padding: 36px 16px 40px; }
  .lp-root .lp-foot-base span:last-child { margin-left: 0; }
}

@media (max-width: 379.98px) {
  .lp-root .lp-seg button { min-width: 30px; padding: 0 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-root { scroll-behavior: auto; }
  .lp-root main[data-enter] { animation: none; }
  .lp-root .pn-in, .lp-root .final h2, .lp-root .final .final-act { transition: none; }
}

/* shared/look.css */
/* Три направления вида лендинга: ?look=a «Обсидиан», b «Студия», c «Фарфор и титан».
 *
 * Принцип общий: фон страницы и панели сделаны из одного материала. В светлой теме панели
 * светлые, в тёмной всё глубокое чёрное; разделение держат свет, тонкие линии, глубина и тень,
 * а не чёрные коробки на сером. Объёмные предметы рисует look3d.js (Three.js, PBR).
 *
 * Все правила привязаны к :root[data-look]: страницы без этого атрибута (остальные девять
 * лендингов и ?look=0) выглядят как раньше.
 *
 * Переменные:
 *   --ink       тройка RGB «чернил» на панели: слоновая кость в тёмной теме, почти чёрный в светлой;
 *   --on-ink    цвет текста на сплошной заливке чернилами (выбранная вкладка, текущая цена);
 *   --solid     непрозрачный цвет панели (липкая шапка таблицы, подсказки, меню, подписи на графике);
 *   --shade     цвет падающей тени (с прозрачностью);
 *   --glint     цвет блика, бегущего по верхней кромке панели.
 */

/* ---- Общие переменные ----------------------------------------------------------------- */
.lp-root[data-look] {
  --ink: 225 214 198;
  --on-ink: #000;
  --solid: #050506;
  --shade: rgb(0 0 0 / 0.6);
  --glint: rgb(255 255 255 / 0.55);
}
html[data-theme='light'] .lp-root[data-look] {
  --ink: 16 15 20;
  --on-ink: #fff;
  --ivory: rgb(16 15 20);
  --ivory-2: rgb(16 15 20 / 0.68);
  --ivory-3: rgb(16 15 20 / 0.52);
  --ivory-4: rgb(16 15 20 / 0.34);
  --line: rgb(16 15 20 / 0.09);
  --line-2: rgb(16 15 20 / 0.16);
  --accent-ink: #7b3ff2;
  --accent-soft: rgb(160 106 255 / 0.12);
  --up: #13895c;
  --down: #cf3f4c;
  --page-ink: #101014;
  --page-ink-2: rgb(16 15 20 / 0.62);
  --solid: #fff;
  --shade: rgb(40 30 70 / 0.16);
  --glint: rgb(160 106 255 / 0.9);
}

/* Устройства (телефоны и iPhone) и окно Tyrian Pro с чёрной дырой остаются тёмными в любой теме:
   это настоящие экраны и ночное небо, внутри них прежние цвета. */
.lp-root[data-look] :is(.phone, .stage-phone, .iphone, .pn.pro:has(.pro-shade)) {
  --ink: 225 214 198;
  --on-ink: #000;
  --ivory: rgb(225 214 198);
  --ivory-2: rgb(225 214 198 / 0.72);
  --ivory-3: rgb(225 214 198 / 0.5);
  --ivory-4: rgb(225 214 198 / 0.32);
  --line: rgb(225 214 198 / 0.11);
  --line-2: rgb(225 214 198 / 0.2);
  --accent-ink: #c4a3ff;
  --accent-soft: rgb(160 106 255 / 0.16);
  --up: #63c99a;
  --down: #e9868a;
  --solid: #050506;
}

/* ---- Панель: один материал с фоном ----------------------------------------------------- */
.lp-root[data-look] .pn { background: var(--lk-panel); box-shadow: var(--lk-edge), var(--lk-lift); }
.lp-root[data-look] .pn.pro:has(.pro-shade) { background: #000; box-shadow: var(--lk-pro); }
.lp-root[data-look] .pn.app { background: var(--lk-panel); }
.lp-root[data-look] .pn-glow { background: radial-gradient(circle at var(--gx, 36%) var(--gy, 28%), var(--lk-glow), transparent 34%); }
/* Блик по верхней кромке: у первой панели всегда, у остальных под курсором */
.lp-root[data-look] .pn::after {
  content: ''; position: absolute; top: 0; right: 0; left: 0; z-index: 3; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--glint) 50%, transparent) -60% 0 / 36% 100% no-repeat;
  opacity: 0; transition: opacity 0.6s var(--ease);
}
.lp-root[data-look] .pn.hero::after, .lp-root[data-look] .pn:hover::after { opacity: 1; animation: lk-glint 6s var(--ease) infinite; }
@keyframes lk-glint { 0% { background-position: -60% 0; } 70%, 100% { background-position: 160% 0; } }
.lp-root[data-look].is-calm .pn::after { animation: none; background-position: 50% 0; }

/* ---- Шапка и подвал в светлой теме: светлые, как панели -------------------------------- */
html[data-theme='light'] .lp-root[data-look] .lp-top { color: var(--page-ink); background: var(--lk-head); box-shadow: inset 0 -1px 0 rgb(16 15 20 / 0.07); }
/* знак сайта цветной (фиолетовый градиент, как на tyriantrade.com) в обеих темах: перекраска убрана 02.11 */
html[data-theme='light'] .lp-root[data-look] .lp-nav a { color: rgb(16 15 20 / 0.66); }
html[data-theme='light'] .lp-root[data-look] .lp-nav a:hover { color: #101014; background: rgb(16 15 20 / 0.05); }
html[data-theme='light'] .lp-root[data-look] .lp-nav a[aria-current='true'] { color: #101014; }
html[data-theme='light'] .lp-root[data-look] .lp-mark { border-color: rgb(16 15 20 / 0.2); color: rgb(16 15 20 / 0.6); }
html[data-theme='light'] .lp-root[data-look] .lp-top .lp-seg { background: rgb(16 15 20 / 0.05); box-shadow: inset 0 0 0 1px rgb(16 15 20 / 0.06); }
html[data-theme='light'] .lp-root[data-look] .lp-top .lp-seg button { color: rgb(16 15 20 / 0.56); }
html[data-theme='light'] .lp-root[data-look] .lp-top .lp-seg button:hover { color: #101014; }
html[data-theme='light'] .lp-root[data-look] .lp-top .lp-seg button[aria-pressed='true'] { color: #fff; background: #101014; }
html[data-theme='light'] .lp-root[data-look] .lp-icon-btn { color: rgb(16 15 20 / 0.8); background: rgb(16 15 20 / 0.05); box-shadow: inset 0 0 0 1px rgb(16 15 20 / 0.06); }
html[data-theme='light'] .lp-root[data-look] .lp-icon-btn:hover { color: #101014; background: rgb(16 15 20 / 0.1); }
html[data-theme='light'] .lp-root[data-look] .lp-sheet { background: #fff; box-shadow: inset 0 0 0 1px rgb(16 15 20 / 0.08), 0 24px 48px rgb(40 30 70 / 0.18); }
html[data-theme='light'] .lp-root[data-look] .lp-sheet a { color: #101014; }
html[data-theme='light'] .lp-root[data-look] .lp-sheet a:hover, html[data-theme='light'] .lp-root[data-look] .lp-sheet a[aria-current='true'] { background: rgb(16 15 20 / 0.05); }
html[data-theme='light'] .lp-root[data-look] .lp-sheet a::after { border-color: rgb(16 15 20 / 0.4); }
html[data-theme='light'] .lp-root[data-look] .lp-foot { color: rgb(16 15 20 / 0.6); background: var(--lk-foot); box-shadow: inset 0 1px 0 rgb(16 15 20 / 0.07); }
html[data-theme='light'] .lp-root[data-look] .lp-foot b { color: #101014; }
html[data-theme='light'] .lp-root[data-look] .lp-foot h4 { color: rgb(16 15 20 / 0.42); }
html[data-theme='light'] .lp-root[data-look] .lp-foot a { color: rgb(16 15 20 / 0.72); }
html[data-theme='light'] .lp-root[data-look] .lp-foot a:hover { color: #101014; }
html[data-theme='light'] .lp-root[data-look] :is(.lp-foot-sites, .lp-foot-base) { border-top-color: rgb(16 15 20 / 0.08); }
html[data-theme='light'] .lp-root[data-look] .lp-foot-sites a { box-shadow: inset 0 0 0 1px rgb(16 15 20 / 0.12); }
html[data-theme='light'] .lp-root[data-look] .lp-foot-sites a[aria-current='page'] { color: #101014; background: rgb(160 106 255 / 0.1); box-shadow: inset 0 0 0 1px rgb(160 106 255 / 0.6); }
html[data-theme='light'] .lp-root[data-look] .lp-foot-sites .lp-foot-index { color: rgb(16 15 20 / 0.56); }
html[data-theme='light'] .lp-root[data-look] .lp-toast { color: #101014; background: #fff; box-shadow: inset 0 0 0 1px rgb(16 15 20 / 0.08), 0 12px 30px rgb(40 30 70 / 0.18); }
html[data-theme='dark'] .lp-root[data-look] .lp-top { background: var(--lk-head); }
html[data-theme='dark'] .lp-root[data-look] .lp-foot { background: var(--lk-foot); }

/* Переключатель вида: в шапке полной ширины четыре кнопки, у́же одна кнопка по кругу */
.lp-root .lk-cycle { display: none; }
.lp-root .lk-cycle-v { font: 700 12px/1 var(--font); letter-spacing: 0.02em; }
@media (max-width: 1379.98px) { .lp-root .lk-seg { display: none; } .lp-root .lk-cycle { display: grid; } }

/* ---- Кнопки и тексты на светлых панелях ------------------------------------------------ */
.lp-root[data-look] .fine { color: rgb(var(--ink) / 0.56); }
.lp-root[data-look] .chip:hover { border-color: rgb(var(--ink) / 0.36); }
.lp-root[data-look] .chip[aria-pressed='true'], .lp-root[data-look] .chip.is-on { border-color: rgb(160 106 255 / 0.7); }
html[data-theme='light'] .lp-root[data-look] .ghost { color: #101014; background: linear-gradient(#fff, #f3f2f6); box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgb(16 15 20 / 0.1), 0 6px 14px -10px rgb(40 30 70 / 0.45); }
html[data-theme='light'] .lp-root[data-look] .ghost:hover { box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgb(160 106 255 / 0.55), 0 6px 18px -10px rgb(138 47 255 / 0.45); }


/* ---- A. Обсидиан ------------------------------------------------------------------------
   Чёрная бесконечность, сценический фиолетовый свет из-за панелей, панели как чёрное стекло
   с волосяной линией по верхней кромке. Днём: тот же свет сквозь матовое светлое стекло. */
.lp-root[data-look='a'] {
  --page: #000;
  --lk-panel: linear-gradient(180deg, #0d0c12 0%, #060609 120px, #030304 100%);
  --lk-edge: inset 0 1px 0 rgb(255 255 255 / 0.13), inset 0 0 0 1px rgb(255 255 255 / 0.045);
  --lk-lift: 0 -24px 90px -46px rgb(150 90 255 / 0.55), 0 40px 120px -60px rgb(110 52 220 / 0.45);
  --lk-pro: inset 0 1px 0 rgb(255 255 255 / 0.13), 0 -24px 90px -46px rgb(150 90 255 / 0.55);
  --lk-glow: rgb(160 106 255 / 0.22);
  --lk-head: rgb(0 0 0 / 0.62);
  --lk-foot: #000;
  --lk-stage: radial-gradient(46% 38% at 50% 58%, rgb(130 70 255 / 0.32), transparent 72%), radial-gradient(30% 12% at 50% 86%, rgb(160 106 255 / 0.22), transparent 70%);
}
html[data-theme='light'] .lp-root[data-look='a'] {
  --page: #f3f2f7;
  --lk-panel: linear-gradient(180deg, rgb(255 255 255 / 0.86), rgb(255 255 255 / 0.62) 140px, rgb(250 249 253 / 0.58));
  --lk-edge: inset 0 1px 0 #fff, inset 0 0 0 1px rgb(255 255 255 / 0.75), 0 0 0 1px rgb(40 20 90 / 0.05);
  --lk-lift: 0 -24px 90px -50px rgb(150 90 255 / 0.45), 0 34px 80px -46px rgb(70 40 140 / 0.28);
  --lk-pro: 0 -24px 90px -50px rgb(150 90 255 / 0.5), 0 34px 80px -40px rgb(40 20 90 / 0.4);
  --lk-glow: rgb(255 255 255 / 0.85);
  --lk-head: rgb(255 255 255 / 0.68);
  --lk-foot: rgb(255 255 255 / 0.55);
  --lk-stage: radial-gradient(46% 38% at 50% 58%, rgb(160 106 255 / 0.22), transparent 72%), radial-gradient(30% 10% at 50% 86%, rgb(90 50 170 / 0.16), transparent 70%);
}
html[data-theme='light'] .lp-root[data-look='a'] .pn:not(.pro:has(.pro-shade)) { -webkit-backdrop-filter: blur(28px) saturate(1.5); backdrop-filter: blur(28px) saturate(1.5); }
.lp-root[data-look='a'] .lp-bg::before, .lp-root[data-look='a'] .lp-bg::after { transition: opacity 0.8s var(--ease); }
.lp-root[data-look='a'] .lp-bg::before {
  background:
    radial-gradient(42% 36% at 22% 18%, rgb(198 170 255 / 0.55), transparent 70%),
    radial-gradient(40% 40% at 82% 62%, rgb(206 186 255 / 0.5), transparent 72%),
    radial-gradient(60% 40% at 50% 112%, rgb(170 130 255 / 0.4), transparent 70%),
    linear-gradient(180deg, #f8f7fb, #eeecf4);
}
.lp-root[data-look='a'] .lp-bg::after {
  background:
    radial-gradient(38% 34% at 22% 16%, rgb(110 52 220 / 0.26), transparent 70%),
    radial-gradient(40% 40% at 82% 60%, rgb(96 38 197 / 0.22), transparent 72%),
    radial-gradient(70% 40% at 50% 118%, rgb(96 38 197 / 0.3), transparent 70%),
    #000;
}
.lp-root[data-look='a'] .lp-grain { opacity: 0.12; }
html[data-theme='dark'] .lp-root[data-look='a'] .lp-grain { opacity: 0.06; }

/* ---- B. Студия --------------------------------------------------------------------------
   Фотостудия с бесшовным фоном (циклорама): сверху падает мягкий ключевой свет, к низу экрана
   фон уходит в «пол». Панели из матового акрила стоят в этом пространстве и бросают длинную
   мягкую тень; предметы стоят на полу панели со своей настоящей тенью. */
.lp-root[data-look='b'] {
  --page: #0d0d0e;
  --lk-panel: linear-gradient(180deg, rgb(12 12 14 / 0.86), rgb(6 6 7 / 0.9));
  --lk-edge: inset 0 1px 0 rgb(255 255 255 / 0.11), inset 0 0 0 1px rgb(255 255 255 / 0.045);
  --lk-lift: 0 50px 90px -40px rgb(0 0 0 / 0.95), 0 12px 26px -12px rgb(0 0 0 / 0.85);
  --lk-pro: inset 0 1px 0 rgb(255 255 255 / 0.09), 0 60px 100px -50px rgb(0 0 0 / 0.95);
  --lk-glow: rgb(255 255 255 / 0.07);
  --lk-head: rgb(8 8 9 / 0.6);
  --lk-foot: #050505;
  --glint: rgb(255 255 255 / 0.4);
  --lk-stage: radial-gradient(54% 34% at 50% 0%, rgb(255 255 255 / 0.07), transparent 72%);
}
html[data-theme='light'] .lp-root[data-look='b'] {
  --page: #ededed;
  --lk-panel: linear-gradient(180deg, rgb(255 255 255 / 0.7), rgb(255 255 255 / 0.42));
  --lk-edge: inset 0 1px 0 #fff, inset 0 0 0 1px rgb(255 255 255 / 0.55);
  --lk-lift: 0 50px 90px -50px rgb(40 42 50 / 0.36), 0 10px 24px -14px rgb(40 42 50 / 0.14);
  --lk-pro: 0 50px 90px -46px rgb(30 24 16 / 0.55);
  --lk-glow: rgb(255 255 255 / 0.9);
  --lk-head: rgb(250 250 250 / 0.72);
  --lk-foot: rgb(255 255 255 / 0.4);
  --glint: rgb(255 255 255 / 1);
  --lk-stage: radial-gradient(54% 34% at 50% 0%, rgb(255 255 255 / 0.8), transparent 72%);
}
.lp-root[data-look='b'] .pn:not(.pro:has(.pro-shade)) { -webkit-backdrop-filter: blur(26px) saturate(1.25); backdrop-filter: blur(26px) saturate(1.25); }
.lp-root[data-look='b'] .lp-bg::before {
  background:
    radial-gradient(60% 50% at 28% -6%, #fff 0%, rgb(255 255 255 / 0.85) 25%, transparent 70%),
    linear-gradient(180deg, transparent 58%, rgb(60 62 70 / 0.05) 74%, rgb(60 62 70 / 0.11) 100%),
    radial-gradient(140% 100% at 40% 20%, #f8f8f8 0%, #eeeeee 55%, #e3e3e4 100%);
}
.lp-root[data-look='b'] .lp-bg::after {
  background:
    radial-gradient(48% 46% at 28% -8%, rgb(255 255 255 / 0.2) 0%, rgb(255 255 255 / 0.07) 38%, transparent 72%),
    linear-gradient(180deg, transparent 60%, rgb(255 255 255 / 0.035) 78%, rgb(255 255 255 / 0.015) 100%),
    radial-gradient(140% 100% at 40% 20%, #1a1a1c 0%, #111113 50%, #070708 100%);
}
.lp-root[data-look='b'] .lp-grain { opacity: 0.16; }
html[data-theme='dark'] .lp-root[data-look='b'] .lp-grain { opacity: 0.07; }


/* ---- C. Фарфор и титан ------------------------------------------------------------------
   Страница и панели из одного твёрдого материала: днём белый фарфор, ночью чёрная керамика.
   Панели не обведены и не залиты другим цветом, они приподняты над тем же материалом:
   мягкая многослойная тень снизу и светлая фаска по верхней кромке. Предметы: керамика и титан. */
.lp-root[data-look='c'] {
  --page: #060606;
  --lk-panel: linear-gradient(165deg, #121214 0%, #0a0a0b 38%, #080809 100%);
  --lk-edge: inset 0 1px 0 rgb(255 255 255 / 0.075), inset 0 0 0 1px rgb(255 255 255 / 0.028);
  --lk-lift: 0 1px 0 rgb(0 0 0 / 0.9), 0 24px 50px -24px rgb(0 0 0 / 0.95), 0 60px 120px -60px rgb(0 0 0 / 1);
  --lk-pro: inset 0 1px 0 rgb(255 255 255 / 0.075), 0 24px 50px -24px #000;
  --lk-glow: rgb(255 255 255 / 0.05);
  --lk-head: rgb(6 6 6 / 0.72);
  --lk-foot: #060606;
  --glint: rgb(232 224 210 / 0.55);
  --lk-stage: radial-gradient(40% 30% at 50% 50%, rgb(255 255 255 / 0.035), transparent 72%);
}
html[data-theme='light'] .lp-root[data-look='c'] {
  --page: #f3f2ef;
  --lk-panel: linear-gradient(180deg, #fdfdfc, #f9f8f6);
  --lk-edge: inset 0 1px 0 #fff, inset 0 -1px 0 rgb(60 50 36 / 0.04);
  --lk-lift: 0 1px 1px rgb(60 50 36 / 0.05), 0 12px 28px -14px rgb(60 50 36 / 0.16), 0 50px 90px -56px rgb(60 50 36 / 0.22);
  --lk-pro: 0 12px 28px -14px rgb(30 24 16 / 0.3), 0 50px 90px -46px rgb(30 24 16 / 0.4);
  --lk-glow: rgb(160 106 255 / 0.06);
  --lk-head: rgb(246 245 242 / 0.82);
  --lk-foot: #efeee9;
  --glint: rgb(150 146 138 / 0.9);
  --lk-stage: none;
}
.lp-root[data-look='c'] .lp-bg::before { background: radial-gradient(80% 60% at 50% -10%, #fbfaf8, transparent 70%), #f3f2ef; }
.lp-root[data-look='c'] .lp-bg::after { background: radial-gradient(80% 60% at 50% -10%, #0e0e10, transparent 70%), #050505; }
.lp-root[data-look='c'] .lp-grain { opacity: 0.05; }

/* ---- Узкий экран: тень и свет короче, стекло легче ------------------------------------- */
@media (max-width: 859.98px) {
  .lp-root[data-look='a'] { --lk-lift: 0 -16px 50px -30px rgb(150 90 255 / 0.5), 0 24px 60px -36px rgb(110 52 220 / 0.4); }
  html[data-theme='light'] .lp-root[data-look='a'] { --lk-lift: 0 -16px 50px -30px rgb(150 90 255 / 0.38), 0 20px 50px -32px rgb(70 40 140 / 0.24); }
  .lp-root[data-look='b'] { --lk-lift: 0 34px 60px -34px rgb(0 0 0 / 0.95); }
  html[data-theme='light'] .lp-root[data-look='b'] { --lk-lift: 0 30px 56px -34px rgb(40 42 50 / 0.34); }
}

@media (prefers-reduced-motion: reduce) {
  .lp-root[data-look] .pn::after { animation: none; }
}


/* «Студия», светлая тема: главная кнопка без фиолетового ореола, мягкая нейтральная тень */
html[data-theme='light'] .lp-root[data-look='b'] .cta { box-shadow: inset 0 1px 1px rgb(255 255 255 / 0.34), inset 0 -1px 2px rgb(0 0 0 / 0.6), inset 0 0 0 1px rgb(255 255 255 / 0.12), 0 10px 22px -14px rgb(30 24 60 / 0.55); }
/* «Студия», тёмная тема: глянец и блик остаются, свечения вокруг нет; только плотная тень под кнопкой */
html[data-theme='dark'] .lp-root[data-look='b'] .cta { box-shadow: inset 0 1px 1px rgb(255 255 255 / 0.34), inset 0 -1px 2px rgb(0 0 0 / 0.6), inset 0 0 0 1px rgb(255 255 255 / 0.12), 0 10px 20px -12px rgb(0 0 0 / 0.9); }

/* shared/open.css */
/* Переход «предмет раскрывается в продукт» и переходы между лендингами (shared/open.js). */
.lp-root { --op-x: 70%; --op-y: 50%; --op-r: 160px; --op-ease: cubic-bezier(0.4, 0, 0.2, 1); }

/* Экран продукта: тёмный круг из предмета → экран в цвете темы */
.lp-root .op-app { position: fixed; inset: 0; z-index: 60; display: grid; grid-template-rows: auto 1fr; color: var(--ivory); background: #0b0b0d; clip-path: circle(var(--op-r) at var(--op-x) var(--op-y)); transform: scale(0.985); opacity: 0; pointer-events: none; transition: clip-path 0.62s var(--op-ease), transform 0.62s var(--op-ease), opacity 0.12s, background-color 0.4s 0.22s; will-change: clip-path; }
.lp-root .op-app > * { opacity: 0; transition: opacity 0.25s 0.34s; }
.lp-root.op-opening .op-app, .lp-root.op-open .op-app { clip-path: circle(160% at var(--op-x) var(--op-y)); transform: none; opacity: 1; background: #000; }
html[data-theme='light'] .lp-root.op-opening .op-app, html[data-theme='light'] .lp-root.op-open .op-app { background: #fff; color: #101014; }
.lp-root.op-opening .op-app > *, .lp-root.op-open .op-app > * { opacity: 1; }
.lp-root.op-open .op-app { pointer-events: auto; }
.lp-root.op-open { overflow: hidden; }
/* Страница позади чуть отъезжает и темнеет; предмет-источник подаётся вперёд и гаснет под кругом */
.lp-root #page, .lp-root .lp-top { transition: transform 0.5s var(--op-ease), filter 0.5s; transform-origin: 50% 40%; }
.lp-root.op-opening #page, .lp-root.op-open #page, .lp-root.op-opening .lp-top, .lp-root.op-open .lp-top { transform: scale(0.965); filter: brightness(0.8); }
.lp-root .op-origin { transition: transform 0.5s var(--op-ease), opacity 0.15s 0.3s; }
.lp-root.op-opening .op-origin, .lp-root.op-open .op-origin { transform: scale(1.08); opacity: 0; }

.lp-root .op-bar { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 24px; border-bottom: 1px solid rgb(255 255 255 / 0.08); font: 500 14px/18px var(--font); }
html[data-theme='light'] .lp-root .op-bar { border-bottom-color: rgb(16 15 20 / 0.1); }
.lp-root .op-bar b { font-weight: 600; } .lp-root .op-bar span { opacity: 0.6; }
.lp-root .op-bar .op-back { margin-left: auto; height: 34px; padding: 0 14px; font-size: 13px; }
.lp-root .op-body { padding: 28px clamp(16px, 4vw, 48px); max-width: 1100px; width: 100%; margin: 0 auto; display: grid; gap: 18px; align-content: start; }
.lp-root .op-lens { display: flex; justify-content: space-between; align-items: center; height: 54px; padding: 0 18px; border-radius: 14px; background: rgb(255 255 255 / 0.06); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1); font: 500 17px/22px var(--font); }
html[data-theme='light'] .lp-root .op-lens { background: rgb(16 15 20 / 0.04); box-shadow: inset 0 0 0 1px rgb(16 15 20 / 0.1); }
.lp-root .op-lens em { font-style: normal; opacity: 0.7; }
.lp-root .op-rows { border-top: 1px solid rgb(255 255 255 / 0.08); }
.lp-root .op-rows > div { display: grid; grid-template-columns: 70px 1fr auto auto; gap: 18px; align-items: center; height: 52px; border-bottom: 1px solid rgb(255 255 255 / 0.08); font: 400 16px/20px var(--font); font-variant-numeric: tabular-nums; opacity: 0; transform: translateY(6px); }
html[data-theme='light'] .lp-root .op-rows, html[data-theme='light'] .lp-root .op-rows > div { border-color: rgb(16 15 20 / 0.08); }
.lp-root .op-rows b { font-weight: 500; } .lp-root .op-rows i { height: 1px; background: currentColor; opacity: 0.2; } .lp-root .op-rows span, .lp-root .op-rows u { text-decoration: none; opacity: 0.7; min-width: 70px; text-align: right; }
.lp-root.op-open .op-rows > div { animation: op-row 0.3s var(--op-ease) forwards; }
.lp-root.op-open .op-rows > div:nth-child(2) { animation-delay: 0.05s; } .lp-root.op-open .op-rows > div:nth-child(3) { animation-delay: 0.1s; } .lp-root.op-open .op-rows > div:nth-child(4) { animation-delay: 0.15s; } .lp-root.op-open .op-rows > div:nth-child(5) { animation-delay: 0.2s; }
@keyframes op-row { to { opacity: 1; transform: none; } }
.lp-root .op-feed > div { display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 16px 0; border-bottom: 1px solid rgb(255 255 255 / 0.08); }
html[data-theme='light'] .lp-root .op-feed > div { border-bottom-color: rgb(16 15 20 / 0.08); }
.lp-root .op-feed i { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #e8e5df, #8f8c86); }
.lp-root .op-feed b { display: block; font: 600 15px/20px var(--font); } .lp-root .op-feed p { margin: 4px 0 0; font: 400 16px/24px var(--font); opacity: 0.85; }
.lp-root .op-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.lp-root .op-grid > div { padding: 16px; border-radius: 16px; background: rgb(255 255 255 / 0.05); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1); display: grid; gap: 10px; }
html[data-theme='light'] .lp-root .op-grid > div { background: rgb(16 15 20 / 0.03); box-shadow: inset 0 0 0 1px rgb(16 15 20 / 0.1); }
.lp-root .op-grid i { height: 90px; border-radius: 10px; background: linear-gradient(160deg, #1a1a1e, #0a0a0c); } html[data-theme='light'] .lp-root .op-grid i { background: linear-gradient(160deg, #e8e7ec, #d8d6de); }
.lp-root .op-grid b { font: 500 15px/20px var(--font); } .lp-root .op-grid span { font: 400 13px/16px var(--font); opacity: 0.6; }
.lp-root .op-chat { display: grid; gap: 14px; max-width: 720px; }
.lp-root .op-chat p { margin: 0; padding: 12px 16px; border-radius: 18px; font: 400 16px/24px var(--font); }
.lp-root .op-chat .q { justify-self: end; background: var(--accent, #7b3ff2); color: #fff; border-bottom-right-radius: 6px; }
.lp-root .op-chat .a { justify-self: start; background: rgb(255 255 255 / 0.06); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1); border-bottom-left-radius: 6px; }
html[data-theme='light'] .lp-root .op-chat .a { background: rgb(16 15 20 / 0.04); box-shadow: inset 0 0 0 1px rgb(16 15 20 / 0.1); }

/* Шторка между лендингами и появление новой страницы */
.lp-root .op-wipe { position: fixed; inset: 0; z-index: 70; background: #0b0b0d; clip-path: circle(0 at var(--wx, 50%) var(--wy, 50%)); transition: clip-path 0.4s var(--op-ease); pointer-events: none; }
.lp-root .op-wipe.on { clip-path: circle(160% at var(--wx, 50%) var(--wy, 50%)); pointer-events: auto; }
.lp-root.op-enter body { animation: op-enter 0.6s var(--op-ease); }
@keyframes op-enter { from { opacity: 0; } to { opacity: 1; } }
.lp-root .op-all { display: none; font: 500 13px/16px var(--font); color: var(--ivory-2); text-decoration: none; padding: 0 10px; white-space: nowrap; }
@media (min-width: 1560px) { .lp-root .op-all { display: inline; } }
.lp-root .op-all:hover { color: var(--ivory); }

.lp-root.is-calm .op-app { clip-path: none !important; transform: none !important; transition: opacity 0.3s !important; }
.lp-root.is-calm #page, .lp-root.is-calm .lp-top { transform: none !important; filter: none !important; }
@media (max-width: 600px) { .lp-root .op-rows > div { grid-template-columns: 56px 1fr auto; } .lp-root .op-rows i { display: none; } .lp-root .op-bar { padding: 0 16px; } }

/* Живой макет продукта внутри круга (02.11): тот же адрес, модуль уже загружен фоном */
.lp-root .op-app { display: block; }
.lp-root .op-ui { display: grid; grid-template-rows: auto 1fr; height: 100%; }
.lp-root .op-app.has-frame .op-ui { display: none; }
.lp-root .op-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; display: none; }
html[data-theme='light'] .lp-root .op-frame { background: #fff; }
.lp-root .op-app.has-frame .op-frame { display: block; }
.lp-root .op-app > .op-frame { opacity: 0; transition: opacity 0.35s 0.3s; }
.lp-root.op-opening .op-app > .op-frame, .lp-root.op-open .op-app > .op-frame { opacity: 1; }
/* Возврат на лендинг: тихая пилюля внизу слева (в настоящем сайте её нет: вошедший лендинг не видит) */
.lp-root .op-float { position: absolute; left: 20px; bottom: 20px; z-index: 3; display: none; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 12px; border: 0; border-radius: 999px; color: #fafafa; background: rgb(12 12 14 / 0.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12), 0 12px 30px rgb(0 0 0 / 0.4); font: 500 14px/16px var(--font); cursor: pointer; transition: transform 0.2s var(--spring, ease), box-shadow 0.2s; }
.lp-root .op-float svg { width: 16px; height: 16px; }
.lp-root .op-float:hover { box-shadow: inset 0 0 0 1px rgb(160 106 255 / 0.6), 0 12px 30px rgb(0 0 0 / 0.4); }
.lp-root .op-app.has-frame .op-float { display: inline-flex; }
.lp-root.op-login .op-float { opacity: 0; pointer-events: none; }
/* Регистрация поверх продукта, где без аккаунта нельзя */
.lp-root .op-auth { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; padding: 3vh 3vw; background: rgb(0 0 0 / 0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); visibility: hidden; transition: background 0.5s var(--op-ease), backdrop-filter 0.5s var(--op-ease), visibility 0s 0.5s; }
.lp-root.op-login .op-auth { visibility: visible; background: rgb(0 0 0 / 0.5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background 0.5s var(--op-ease), backdrop-filter 0.5s var(--op-ease); }
.lp-root .op-auth-card { position: relative; width: min(1320px, 100%); height: min(860px, 100%); overflow: hidden; border-radius: 28px; background: #000; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1), 0 40px 120px rgb(0 0 0 / 0.7); transform: translateY(40px) scale(0.98); opacity: 0; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s; }
.lp-root.op-login .op-auth-card { transform: none; opacity: 1; }
.lp-root .op-auth-card iframe { display: block; width: 100%; height: 100%; border: 0; }
.lp-root .op-auth-x { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; color: #fafafa; background: rgb(255 255 255 / 0.08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12); cursor: pointer; }
.lp-root .op-auth-x svg { width: 16px; height: 16px; }
.lp-root.is-calm .op-auth, .lp-root.is-calm .op-auth-card { transition: none !important; }
@media (max-width: 767.98px) { .lp-root .op-auth { padding: 0; } .lp-root .op-auth-card { border-radius: 0; } .lp-root .op-float { left: 12px; bottom: 12px; } }
.lp-root .is-demo .lp-mark { display: none; }
/* iPhone: «Открыть» на компьютере = код для загрузки приложения */
.lp-root .op-ios { display: grid; justify-items: center; gap: 14px; max-width: 420px; margin: 6vh auto 0; text-align: center; }
.lp-root .op-ios img { width: 88px; height: 88px; border-radius: 22px; box-shadow: 0 12px 30px rgb(0 0 0 / 0.4); }
.lp-root .op-ios h3 { margin: 6px 0 0; font: 500 30px/1.1 var(--font); letter-spacing: -0.03em; }
.lp-root .op-ios p { margin: 0; font: 400 15px/22px var(--font); opacity: 0.7; }
.lp-root .op-qr { display: block; width: 200px; height: 200px; margin-top: 10px; padding: 0; border-radius: 18px; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.12); overflow: hidden; }
.lp-root .op-qr svg { width: 100%; height: 100%; }
.lp-root .op-store { display: inline-flex; align-items: center; gap: 10px; height: 48px; margin-top: 8px; padding: 0 22px; border-radius: 14px; color: #fff; background: #000; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.2); font: 500 15px/1 var(--font); }
.lp-root .op-store svg { width: 20px; height: 20px; }

/* object frames by theme (look3d.js stills) */
.lp-root canvas[data-lp-still]{background-position:center;background-repeat:no-repeat;background-size:90% 90%;background-size:contain}
.lp-root canvas[data-lp-still="mark"]{background-image:url("/social/assets/landings/b-light-mark.225531c5b2.webp")}
[data-theme="dark"] .lp-root canvas[data-lp-still="mark"],.lp-root canvas[data-lp-still="mark"][data-lp-night]{background-image:url("/social/assets/landings/b-dark-mark.91bc38a297.webp")}
.lp-root canvas[data-lp-still="coin"]{background-image:url("/social/assets/landings/b-light-coin.6eb08b3eb7.webp")}
[data-theme="dark"] .lp-root canvas[data-lp-still="coin"],.lp-root canvas[data-lp-still="coin"][data-lp-night]{background-image:url("/social/assets/landings/b-dark-coin.a118ca32a0.webp")}
.lp-root canvas[data-lp-still="one"]{background-image:url("/social/assets/landings/b-light-one.ec55757c13.webp")}
[data-theme="dark"] .lp-root canvas[data-lp-still="one"],.lp-root canvas[data-lp-still="one"][data-lp-night]{background-image:url("/social/assets/landings/b-dark-one.0e42cb0d62.webp")}
.lp-root canvas[data-lp-still="loop"]{background-image:url("/social/assets/landings/b-light-loop.8f5ccc375e.webp")}
[data-theme="dark"] .lp-root canvas[data-lp-still="loop"],.lp-root canvas[data-lp-still="loop"][data-lp-night]{background-image:url("/social/assets/landings/b-dark-loop.5b05c2ef1e.webp")}
.lp-root canvas[data-lp-still="shield"]{background-image:url("/social/assets/landings/b-light-shield.5716ef7d7c.webp")}
[data-theme="dark"] .lp-root canvas[data-lp-still="shield"],.lp-root canvas[data-lp-still="shield"][data-lp-night]{background-image:url("/social/assets/landings/b-dark-shield.c63f12f549.webp")}
.lp-root canvas[data-lp-still="ring"]{background-image:url("/social/assets/landings/b-light-ring.a030dd299c.webp")}
[data-theme="dark"] .lp-root canvas[data-lp-still="ring"],.lp-root canvas[data-lp-still="ring"][data-lp-night]{background-image:url("/social/assets/landings/b-dark-ring.bfd1617712.webp")}
.lp-root canvas[data-lp-still="lens"]{background-image:url("/social/assets/landings/b-light-lens.3341096b2c.webp")}
[data-theme="dark"] .lp-root canvas[data-lp-still="lens"],.lp-root canvas[data-lp-still="lens"][data-lp-night]{background-image:url("/social/assets/landings/b-dark-lens.e0fb656a92.webp")}
.lp-root canvas[data-lp-still="candles"]{background-image:url("/social/assets/landings/b-light-candles.809d183099.webp")}
[data-theme="dark"] .lp-root canvas[data-lp-still="candles"],.lp-root canvas[data-lp-still="candles"][data-lp-night]{background-image:url("/social/assets/landings/b-dark-candles.794ba54085.webp")}
/* server page additions */
/* Server page additions (scripts/landings/build-landings.mjs). The mock-up was a whole document; on the site it is a
   block inside the Shell document under the Shell header, after the Shell's own reset (Tailwind preflight) and the
   renderer's element rules. :where(*) keeps the restore at .lp-root specificity: every mock-up rule still wins, the
   browser default comes back only where the mock-up relied on it. */
.lp-root :where(*:not(svg, svg *)) { all: revert; }
.lp-root :where(*, *::before, *::after) { box-sizing: border-box; }
.lp-root {
  position: relative;
  isolation: isolate;
  display: block;
  min-height: 100%;
  overflow-x: clip;
  text-align: left;
}
/* the page background is the block's own, not the window's */
.lp-root > .lp-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.lp-root > .lp-main { display: block; position: relative; }
/* product name: the hero eyebrow text, now the page H1 */
.lp-root .lp-name { display: inline; margin: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; }
/* the slogan keeps the look of the mock-up's h1 */
.lp-root :where(.lp-h1) { display: block; font-size: 2em; font-weight: bold; margin-block: 0.67em; }
/* object canvases show their pre-shot frame (no WebGL on the server page) */
.lp-root canvas[data-lp-still] { display: block; }
/* FAQ as native <details> (the mock-up toggled buttons with JavaScript) */
.lp-root .faq-item > summary { list-style: none; cursor: pointer; }
.lp-root .faq-item > summary::-webkit-details-marker { display: none; }