/* ---- base.css */ /* ========================================================================== База сайта TOM — порядок слоёв, сброс, шрифты, фокус, появления, слоты, переходы между страницами, уменьшенное движение. Этот файл — часть контракта: правь осторожно. Внешний вид компонентов — в components.css и sections.css, они твои целиком. ========================================================================== */ @layer reset, tokens, base, components, sections, utilities; /* ---- Шрифты: свои woff2, без внешних сервисов --------------------------- */ @font-face { font-family: "Inter"; src: url("../fonts/InterVariable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("../fonts/JetBrainsMono-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("../fonts/JetBrainsMono-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; } /* ---- Сброс: не трогает iframe, video и canvas (контракт, раздел 11, п. 8) -- */ @layer reset { *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; } :where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ol, ul) { margin: 0; } :where(ol, ul)[role="list"] { list-style: none; padding: 0; } :where(img, picture, svg):not(.ts-slot__live *) { display: block; max-width: 100%; height: auto; } :where(button, input, select, textarea) { font: inherit; color: inherit; letter-spacing: inherit; } :where(button) { cursor: pointer; } :where(a) { color: inherit; } :where(table) { border-collapse: collapse; } } @layer base { html { background: var(--ts-canvas); color: var(--ts-ink); font-family: var(--ts-font-sans); scroll-behavior: auto; /* скорость прокрутки не меняем (контракт 6.4) */ } body { font-size: var(--ts-body); line-height: var(--ts-body-lh); letter-spacing: var(--ts-tracking-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; /* overflow-x на body не ставим: горизонтальную прокрутку не прячут, а устраняют — иначе она спрячет настоящую ошибку вёрстки, которую проверка на 360 px должна поймать */ } /* Числа — Inter табличными цифрами; моноширинный — только адреса и хэши */ .ts-num { font-variant-numeric: var(--ts-numeric); } .ts-code { font-family: var(--ts-font-mono); font-size: .92em; } /* Фокус виден всегда: графит на светлом, белый на тёмном */ :focus-visible { outline: 2px solid var(--ts-focus); outline-offset: 3px; border-radius: 2px; } :where(.ts-dark, [data-ts-theme="dark"]) :focus-visible { outline-color: var(--ts-focus-on-dark); } ::selection { background: var(--ts-lime); color: var(--ts-on-lime); } .ts-skip { position: absolute; left: var(--ts-space-4); top: -100px; z-index: 100; padding: var(--ts-space-2) var(--ts-space-4); background: var(--ts-ink); color: var(--ts-on-graphite); border-radius: var(--ts-radius-control); } .ts-skip:focus { top: var(--ts-space-4); } .ts-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* ---- Появления (motion.js ставит .ts-js на и .is-in на элемент) -- Без JS всё видно сразу: информация не зависит от движения. */ .ts-js [data-ts-reveal] { transition-property: opacity, transform, clip-path; transition-duration: var(--ts-dur-5); transition-timing-function: var(--ts-ease-out); transition-delay: var(--ts-delay, 0ms); } .ts-js [data-ts-reveal="up"]:not(.is-in) { opacity: 0; transform: translate3d(0, var(--ts-reveal-shift), 0); } .ts-js [data-ts-reveal="fade"]:not(.is-in) { opacity: 0; } .ts-js [data-ts-reveal="mask"]:not(.is-in) { clip-path: inset(0 0 100% 0); } /* раскрытие сверху вниз */ .ts-js [data-ts-reveal="mask"].is-in { clip-path: inset(0 0 0 0); } /* split — строки заголовка из-под маски, по строкам, не по буквам */ .ts-line { display: block; overflow: clip; padding-block-end: .09em; margin-block-end: -.09em; } .ts-line__inner { display: block; transition: transform var(--ts-dur-6) var(--ts-ease-out); transition-delay: calc(var(--ts-delay, 0ms) + var(--ts-line-i, 0) * var(--ts-motion-line-stagger)); } .ts-js [data-ts-reveal="split"]:not(.is-in) .ts-line__inner { transform: translate3d(0, 108%, 0); } /* trace — прочерчивание линии слева направо (подчёркивание, зачёркивание отказов) */ [data-ts-reveal="trace"] { position: relative; } [data-ts-reveal="trace"]::after { content: ""; position: absolute; left: 0; right: 0; top: var(--ts-trace-top, 55%); height: var(--ts-trace-weight, 2px); background: var(--ts-trace-color, currentColor); transform-origin: 0 50%; transition: transform var(--ts-dur-5) var(--ts-ease-out) var(--ts-delay, 0ms); } .ts-js [data-ts-reveal="trace"]:not(.is-in)::after { transform: scaleX(0); } /* ---- Слоты: граница между твоей вёрсткой и живым продуктом ------------- */ .ts-slot { position: relative; display: block; inline-size: 100%; background: var(--ts-slot-bg); border-radius: var(--ts-slot-radius); overflow: hidden; /* единственный предок с overflow+radius — сам слот */ isolation: isolate; contain: layout paint; } /* размер задаётся снаружи: ширина колонки + пропорция (слот не растёт от содержимого) */ .ts-slot[data-ts-ratio="16/10"] { aspect-ratio: 16 / 10; } .ts-slot[data-ts-ratio="16/9"] { aspect-ratio: 16 / 9; } .ts-slot[data-ts-ratio="390/844"]{ aspect-ratio: 390 / 844; } .ts-slot[data-ts-ratio="1/1"] { aspect-ratio: 1 / 1; } .ts-slot[data-ts-ratio="4/5"] { aspect-ratio: 4 / 5; } .ts-slot:is([data-ts-slot="status"], [data-ts-slot="academy-clips"], [data-ts-slot="form"]) { background: none; overflow: visible; contain: none; border-radius: 0; } .ts-slot__poster { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: top left; } .ts-slot__open { position: absolute; inset-inline-end: var(--ts-space-3); inset-block-end: var(--ts-space-3); z-index: 2; } .ts-slot.is-live > .ts-slot__poster { visibility: hidden; } .ts-slot.is-live > .ts-slot__open { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .ts-slot.is-live > .ts-slot__open:focus-visible { width: auto; height: auto; clip-path: none; } /* всё внутри .ts-slot__live принадлежит FACE LAB — не стилизовать */ .ts-slot__live { position: absolute; inset: 0; } .ts-slot:is([data-ts-slot="status"], [data-ts-slot="academy-clips"], [data-ts-slot="form"]) > .ts-slot__live { position: static; } /* ---- Переходы между страницами: View Transitions, где браузер умеет ---- */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--ts-dur-4); animation-timing-function: var(--ts-ease-out); } ::view-transition-old(root) { animation-name: ts-vt-out; } ::view-transition-new(root) { animation-name: ts-vt-in; } .ts-header { view-transition-name: ts-header; } /* шапка и знак остаются на месте */ .ts-page-title { view-transition-name: ts-page-title; } @keyframes ts-vt-out { to { opacity: 0; transform: translate3d(0, calc(-1 * var(--ts-motion-page-shift)), 0); } } @keyframes ts-vt-in { from { opacity: 0; transform: translate3d(0, var(--ts-motion-page-shift), 0); } } } /* ---- Уменьшенное движение: системная настройка или html[data-ts-motion="reduced"] Сцены — статичные кадры, появлений нет, парения и параллакса нет, переходы страниц мгновенные. Единственное место, где разрешён !important (контракт 3). */ @media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } html.ts-js [data-ts-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; } html.ts-js [data-ts-reveal] .ts-line__inner { transform: none !important; transition: none !important; } html.ts-js [data-ts-reveal="trace"]::after { transform: none !important; transition: none !important; } *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; } } html[data-ts-motion="reduced"] [data-ts-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; } html[data-ts-motion="reduced"] [data-ts-reveal] .ts-line__inner { transform: none !important; transition: none !important; } html[data-ts-motion="reduced"] [data-ts-reveal="trace"]::after { transform: none !important; transition: none !important; } html[data-ts-motion="reduced"] *, html[data-ts-motion="reduced"] *::before, html[data-ts-motion="reduced"] *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; } html[data-ts-motion="reduced"]::view-transition-group(*), html[data-ts-motion="reduced"]::view-transition-old(*), html[data-ts-motion="reduced"]::view-transition-new(*) {animation:none !important;} /* ---- tokens.css */ /* ========================================================================== Токены сайта TOM Источник цвета, шрифтов, радиусов и отступов — brand/tokens.json (Tom Signature), тот же, что у продукта: сайт и терминал — один продукт, шва быть не должно. Правило контракта (раздел 3): любое значение в правилах — через эти переменные. Нужного значения нет — добавь переменную сюда с комментарием, зачем она. ========================================================================== */ @layer tokens { :root { /* ---- Цвет: Tom Signature ------------------------------------------- */ --ts-canvas: #F5F5F2; /* основной фон сайта (светлый — главный, графит — якорями) */ --ts-surface: #FFFFFF; --ts-inset: #EFEFEB; --ts-ink: #171918; /* текст и графит */ --ts-muted: #666B66; /* вторичный текст на светлом — светлее для текста нельзя */ --ts-subtle: #747A74; /* только линии и иконки: как текст даёт 3.8–4.4 */ --ts-line: #E3E6DF; --ts-graphite: #171918; /* тёмные блоки, первый экран */ --ts-on-graphite: #FFFFFF; --ts-dark-line: #3A3E38; --ts-dark-muted: #B9BDB5; /* вторичный текст на графите (9.26); --ts-muted там даёт 3.25 */ --ts-dark-positive: #8CC152; --ts-dark-warning: #E0A23C; --ts-dark-negative: #E0625F; --ts-lime: #B7F500; /* главное действие, активное состояние, текущая стадия */ --ts-lime-hover: #A9E300; /* лайма ≤ 3 % площади в среднем, ≤ 8 % на витринном экране */ --ts-on-lime: #171918; /* текст на лайме — только графит (13.52) */ --ts-positive: #3E7117; --ts-positive-bg: #EDF5E5; /* успех — спокойный зелёный, не лайм */ --ts-warning: #926000; --ts-warning-bg: #FFF6DF; --ts-negative: #B6323E; --ts-negative-bg: #FFF0F1; --ts-disabled-ink: #5E645C; --ts-disabled-bg: #EBEEE7; --ts-focus: var(--ts-ink); /* кольцо фокуса на светлом */ --ts-focus-on-dark: var(--ts-on-graphite); /* ---- Шрифты ------------------------------------------------------------ */ --ts-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --ts-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* адреса и хэши */ --ts-numeric: tabular-nums lining-nums; /* числа — Inter */ /* Шкала продукта (12/14/18/28/32/36) — для подписей, чипов, таблиц, чека */ --ts-text-12: 12px; --ts-lh-12: 17px; --ts-text-14: 14px; --ts-lh-14: 20px; --ts-text-18: 18px; --ts-lh-18: 24px; --ts-text-28: 28px; --ts-lh-28: 33px; --ts-text-32: 32px; --ts-lh-32: 36px; --ts-text-36: 36px; --ts-lh-36: 41px; /* Шкала сайта — крупная типографика витрины. Значения — черновик FACE LAB: ступени твои, переопредели и допиши, но оставь их переменными. */ --ts-body: 17px; --ts-body-lh: 1.55; --ts-lead: clamp(18px, 1.35vw, 22px); --ts-lead-lh: 1.5; --ts-h3: clamp(20px, 1.6vw, 24px); --ts-h3-lh: 1.25; --ts-h2: clamp(32px, 3.6vw, 56px); --ts-h2-lh: 1.06; --ts-h1: clamp(44px, 6.2vw, 96px); --ts-h1-lh: 1.0; --ts-tracking-tight: -0.025em; /* крупные заголовки */ --ts-tracking-body: -0.006em; /* ---- Радиусы, линии, тени ------------------------------------------- */ --ts-radius-panel: 14px; --ts-radius-control: 8px; --ts-radius-pill: 999px; --ts-radius-device: 44px; /* рамка телефона для слота mini-app — поменяй под своё устройство */ --ts-border: 1px solid var(--ts-line); --ts-border-dark: 1px solid var(--ts-dark-line); --ts-shadow-sheet: 0 30px 80px rgba(23, 25, 24, .35); --ts-shadow-lift: 0 1px 2px rgba(23, 25, 24, .06), 0 8px 24px rgba(23, 25, 24, .08); /* ---- Отступы: шкала продукта + крупные шаги сайта ------------------- */ --ts-space-1: 4px; --ts-space-2: 8px; --ts-space-3: 12px; --ts-space-4: 16px; --ts-space-5: 20px; --ts-space-6: 24px; --ts-space-7: 32px; --ts-space-8: 48px; --ts-space-9: 64px; --ts-space-10: 96px; --ts-space-11: 128px; --ts-space-12: 176px; /* между главами на широком экране */ --ts-section-gap: clamp(96px, 12vw, 176px); /* ---- Сетка ----------------------------------------------------------- */ --ts-page-max: 1440px; --ts-page-margin: clamp(16px, 4.4vw, 64px); /* 16 px на телефоне — как в продукте */ --ts-gutter: clamp(12px, 1.7vw, 24px); --ts-columns: 12; --ts-measure: 62ch; /* длина строки текста */ /* ---- Движение: физика продукта (02_MOTION.md) -------------------------- */ --ts-ease-out: cubic-bezier(.23, 1, .32, 1); /* появления, всё входящее */ --ts-ease-in-out: cubic-bezier(.77, 0, .175, 1); /* перемещения, морфинг устройства */ --ts-ease-drawer: cubic-bezier(.32, .72, 0, 1); /* раскрытия, плеер */ --ts-ease-sine: cubic-bezier(.37, 0, .63, 1); /* только фоновое парение */ --ts-dur-1: 120ms; /* нажатие */ --ts-dur-2: 180ms; /* микро */ --ts-dur-3: 240ms; /* UI */ --ts-dur-4: 360ms; /* раскрытия, переход страниц */ --ts-dur-5: 600ms; /* сцены, появления */ --ts-dur-6: 900ms; /* заголовки из-под маски */ --ts-reveal-shift: 20px; /* подъём при появлении: 16–24 px */ --ts-stagger: 70ms; /* лесенка: 60–80 мс, не больше шести в ряд */ --ts-float-dur: 5s; /* парение сцен знакомства — как в продукте */ --ts-float-amp: 3px; /* 2–3 px, не больше */ --ts-press-scale: .97; /* ---- Размеры элементов управления ----------------------------------- */ --ts-control-h: 48px; /* кнопки и поля сайта: палец, не курсор */ --ts-control-h-sm: 44px; /* минимум для касания */ --ts-header-h: 64px; --ts-form-max: 480px; /* ширина формы */ --ts-dot: 6px; /* точка в чипе */ /* ---- Слоты ----------------------------------------------------------- */ --ts-slot-bg: var(--ts-graphite); /* что видно, пока живое не загрузилось */ --ts-slot-radius: var(--ts-radius-panel); } } /* Phase 1 extensions. Brand colors, product fonts and motion curves are unchanged. */ @layer tokens { :root { --ts-static-mini-width: 300px; --ts-study-title-measure: 12ch; --ts-path-mini-width: 236px; /* Full source phone frame fits beside narrative. */ --ts-hero-type: clamp(44px, 5.4vw, 82px); /* Approved shorter H1, fluid 390–1440. */ --ts-hero-line-height: 1.02; --ts-hero-tracking: -.055em; --ts-hero-copy-columns: 1 / 6; --ts-hero-art-columns: 9 / 13; --ts-hero-product-columns: 6 / 13; --ts-art-reserve-min: 184px; /* Reserved for the founder-supplied cat render. */ --ts-art-reserve-width: 260px; --ts-art-reserve-mobile: 104px; --ts-art-reserve-line: 1px dashed var(--ts-dark-line); --ts-hero-product-min: 0; --ts-hero-copy-measure: 40ch; --ts-frame-ratio-wide: 16 / 10; --ts-frame-ratio-mini: 390 / 844; --ts-path-stage-grid: minmax(220px, 3fr) minmax(0, 8fr); --ts-path-pin-distance: 240vh; /* Under the contract's 250vh maximum. */ --ts-path-stage-min: 540px; --ts-path-stage-inset: 40px; --ts-path-step-type: clamp(20px, 2.1vw, 30px); --ts-path-step-height: 44px; --ts-path-dot: 8px; --ts-path-rule: 1px; --ts-receipt-measure: 600px; --ts-receipt-mobile-value: 45%; --ts-motion-slot-shift: 40px; --ts-motion-stage-shift: 24px; --ts-motion-line-stagger: 90ms; --ts-motion-receipt-stagger: 50ms; --ts-motion-receipt-delay: 160ms; --ts-motion-hero-actions-delay: 900ms; --ts-motion-hero-frame-delay: 320ms; --ts-motion-press-shift: -2px; --ts-mechanism-type: clamp(36px, 5vw, 72px); --ts-frame-header-height: 40px; --ts-button-border: 1px; --ts-header-brand-type: 23px; --ts-icon-size: 28px; --ts-stage-mobile-height: auto; --ts-reading-measure: 780px; --ts-header-h: 72px; --ts-h2: clamp(32px, 3.4vw, 52px); --ts-section-gap: clamp(72px, 8vw, 128px); --ts-page-max: 1312px; --ts-stage-screenshot-height: min(55vh, 580px); --ts-layer-top: 20; --ts-hairline: 1px; --ts-review-swatch: 56px; } } /* v2 — editorial scale and visible architecture. No new brand hue. */ @layer tokens { :root { --ts-hero-type:clamp(52px,7.55vw,110px); --ts-hero-line-height:.99; --ts-hero-tracking:-.06em; --ts-hero-weight:480; --ts-hero-top:72px; --ts-hero-title-measure:20ch; --ts-hero-gap:56px; --ts-hero-copy-measure:34ch; --ts-hero-product-columns:5 / 13; --ts-hero-note:13px; --ts-hero-note-lh:1.5; --ts-architecture-line:#C5CCC0; --ts-architecture-stroke:.8px; --ts-architecture-route:1.5px; --ts-architecture-top:-290px; --ts-architecture-left:-90px; --ts-architecture-extra:180px; --ts-architecture-band-top:172px; --ts-architecture-band-inset:48px; --ts-stage-border:1px solid var(--ts-ink); --ts-stage-shell:10px; --ts-stage-stand:40px; --ts-stage-control-height:60px; --ts-stage-trace-width:1.5px; --ts-pipeline-gap:80px; --ts-pipeline-node:7px; --ts-path-stage-min:560px; --ts-path-pin-distance:240vh; --ts-path-title:clamp(52px,5.9vw,88px); --ts-path-number:15px; --ts-path-description:clamp(17px,1.35vw,20px); --ts-path-device-width:250px; --ts-path-device-border:5px solid var(--ts-dark-line); --ts-path-device-radius:30px; --ts-path-stage-grid:minmax(0,4fr) minmax(0,7fr); --ts-path-rail:1px; --ts-path-rail-progress:2px; --ts-evidence-width:560px; --ts-evidence-rule-gap:56px; --ts-evidence-rule-inset:12%; --ts-evidence-rule-radius:124px; --ts-stage-glyph-width:92px; --ts-stage-glyph-height:8px; --ts-stage-glyph-cut:48px; --ts-receipt-measure:620px; --ts-receipt-font:14px; --ts-bridge-title:clamp(46px,6.4vw,92px); --ts-bridge-gap:140px; --ts-bridge-border:1px solid var(--ts-dark-line); --ts-stage-signal-size:5px; --ts-try-columns:repeat(3,minmax(0,1fr)); --ts-motion-machine-delay:180ms; --ts-motion-route-stagger:90ms; --ts-motion-gate-delay:360ms; --ts-motion-aperture-delay:320ms; --ts-motion-meta-delay:700ms; --ts-motion-copy-shift:12px; --ts-motion-try-inset:16px; --ts-sticky-available:calc(100svh - var(--ts-header-h)); --ts-hero-reserve-width:220px; --ts-hero-reserve-height:190px; --ts-trace-top-layer:4; } @media(max-width:1023px){:root{--ts-hero-type:clamp(52px,8vw,90px);--ts-hero-gap:40px;--ts-path-device-width:300px;--ts-path-stage-grid:minmax(0,1fr);--ts-architecture-top:-200px;--ts-hero-top:56px;--ts-hero-copy-measure:54ch}} @media(max-width:767px){:root{--ts-page-margin:24px;--ts-hero-type:clamp(46px,12vw,60px);--ts-hero-top:40px;--ts-hero-gap:32px;--ts-architecture-top:-64px;--ts-architecture-left:-24px;--ts-architecture-extra:48px;--ts-architecture-band-top:88px;--ts-architecture-band-inset:24px;--ts-path-title:52px;--ts-path-device-width:270px;--ts-stage-shell:5px;--ts-stage-stand:24px;--ts-path-device-radius:24px;--ts-path-device-border:4px solid var(--ts-dark-line);--ts-try-columns:minmax(0,1fr)}} } @layer tokens { :root { --ts-receipt-padding: 24px; --ts-receipt-row-padding: 10px; } } /* Full site: shared page rhythm, device stages and the requested ambient life. */ @layer tokens { :root { --ts-page-hero-type:clamp(48px,6.4vw,96px); --ts-page-title-measure:19ch; --ts-editorial-columns:minmax(0,4fr) minmax(0,7fr); --ts-editorial-gap:clamp(40px,7vw,104px); --ts-section-title-measure:18ch; --ts-rule-type:clamp(24px,2.5vw,36px); --ts-device-width:320px; --ts-device-border:8px solid var(--ts-dark-line); --ts-device-inner-radius:32px; --ts-interface-height:760px; --ts-tabs-border:1px solid var(--ts-dark-line); --ts-scene-width:520px; --ts-ambient-duration:16000ms; --ts-ambient-phase:4200ms; --ts-ambient-amplitude:10px; --ts-ambient-opacity:.62; --ts-ambient-stroke:1px; --ts-ambient-line:var(--ts-architecture-line); --ts-ambient-line-dark:var(--ts-dark-line); --ts-ambient-signal:var(--ts-muted); --ts-ambient-signal-dark:var(--ts-dark-muted); --ts-ambient-react:900ms; --ts-ambient-backdrop-opacity:.72; --ts-ambient-player-duration:360ms; --ts-nav-gap:18px; --ts-nav-type:13px; --ts-header-menu-width:380px; --ts-menu-layer:30; --ts-muted-opacity:.55; --ts-showcase-min:260px; --ts-swatch-height:96px; --ts-academy-poster-height:300px; --ts-footer-wordmark-size:32px; } @media(max-width:1023px){:root{--ts-editorial-columns:minmax(0,1fr);--ts-editorial-gap:40px;--ts-interface-height:auto;--ts-page-hero-type:clamp(46px,7.2vw,80px)}} @media(max-width:767px){:root{--ts-device-width:280px;--ts-device-border:5px solid var(--ts-dark-line);--ts-device-inner-radius:38px;--ts-page-hero-type:clamp(42px,10.8vw,60px);--ts-academy-poster-height:280px;--ts-editorial-gap:32px}} } /* Founder motion refinement: gentle deceleration, shorter travel, slower scenery. */ @layer tokens { :root { --ts-ease-out:cubic-bezier(.22,.61,.36,1); --ts-ease-in-out:cubic-bezier(.45,0,.2,1); --ts-ease-drawer:cubic-bezier(.22,.61,.36,1); --ts-dur-1:140ms; --ts-dur-2:220ms; --ts-dur-3:260ms; --ts-dur-4:520ms; --ts-dur-5:780ms; --ts-dur-6:1050ms; --ts-reveal-shift:10px; --ts-motion-stage-shift:10px; --ts-motion-copy-shift:8px; --ts-motion-line-stagger:100ms; --ts-motion-page-shift:6px; --ts-motion-cover-duration:220ms; --ts-motion-exit-duration:240ms; --ts-press-scale:.99; --ts-ambient-duration:22000ms; --ts-ambient-phase:5800ms; --ts-ambient-amplitude:6px; --ts-ambient-opacity:.56; --ts-ambient-react:1100ms; --ts-ambient-player-duration:520ms; } } /* SIGNATURE INTEGRATION — generated token fragments below. */ /* Signature scenes: editorial scale, architectural contours and persistent evidence. */ @layer tokens { :root { --ts-signature-hero-type:clamp(52px,7.55vw,110px); --ts-signature-hero-leading:.99; --ts-signature-hero-tracking:-.06em; --ts-signature-hero-top:72px; --ts-signature-hero-columns:minmax(0,7fr) minmax(0,5fr); --ts-signature-hero-gap:56px; --ts-signature-contour-ratio:1120 / 720; --ts-signature-text-clearance:6px; --ts-signature-content-layer:1; --ts-signature-frame-shell:6px; --ts-signature-title-weight:460; --ts-signature-section-title:clamp(48px,6.45vw,94px); --ts-signature-section-measure:13ch; --ts-signature-copy-measure:38ch; --ts-signature-story-measure:34ch; --ts-signature-phone-width:clamp(220px,25.5svh,266px); --ts-signature-phone-border:5px solid var(--ts-dark-line); --ts-signature-phone-radius:30px; --ts-signature-phone-inset-radius:24px; --ts-signature-path-columns:minmax(0,1.1fr) minmax(0,1fr); --ts-signature-path-short-height:calc(100svh - 200px); /* Fit a full phone and controls on 657px laptop viewports. */ --ts-signature-phone-short-width:min(var(--ts-signature-phone-width),calc((100svh - 230px) * 390 / 844)); --ts-signature-path-short-type:60px; --ts-signature-trade-bottom:56px; --ts-signature-trade-compact-width:42%; --ts-signature-path-height:clamp(500px,60svh,560px); --ts-signature-path-type:clamp(60px,6.9vw,98px); --ts-signature-path-rail:1px; --ts-signature-trade-columns:minmax(0,1fr) auto auto; --ts-signature-trade-width:340px; --ts-signature-route-opacity:.48; --ts-signature-proof-columns:minmax(0,1fr) minmax(0,1fr); --ts-signature-proof-gap:clamp(40px,8vw,120px); --ts-signature-guard-type:clamp(46px,5.4vw,78px); --ts-signature-guard-device:276px; --ts-signature-guard-stage:148px; --ts-signature-guard-object:176px; --ts-signature-guard-bar:5px; --ts-signature-guard-bar-height:116px; --ts-signature-guard-bar-inset:59%; --ts-signature-guard-stop-inset:68%; --ts-signature-guard-route-inset:28px; --ts-signature-guard-object-start:0px; --ts-signature-guard-object-end:110px; --ts-signature-focus-offset:5px; --ts-signature-proof-border:1px solid var(--ts-dark-line); } @media(max-width:1023px) { :root {--ts-signature-hero-type:clamp(52px,8vw,90px);--ts-signature-hero-top:56px;--ts-architecture-top:-64px;--ts-signature-hero-gap:40px;--ts-signature-guard-type:clamp(46px,6vw,64px);--ts-signature-phone-width:280px;--ts-signature-proof-gap:48px;--ts-signature-guard-object-end:60px;--ts-signature-guard-object:150px;} } @media(max-width:767px) { :root {--ts-signature-hero-type:clamp(43px,11.5vw,70px);--ts-signature-hero-top:32px;--ts-signature-hero-gap:32px;--ts-signature-text-clearance:3px;--ts-signature-section-title:clamp(46px,12vw,68px);--ts-signature-section-measure:14ch;--ts-signature-hero-columns:minmax(0,1fr);--ts-signature-path-columns:minmax(0,1fr);--ts-signature-phone-width:270px;--ts-signature-path-type:clamp(48px,12.8vw,66px);--ts-signature-proof-columns:minmax(0,1fr);--ts-signature-proof-gap:40px;--ts-signature-guard-device:270px;--ts-signature-guard-type:clamp(43px,11.5vw,64px);--ts-signature-guard-object:130px;--ts-signature-guard-object-end:36px;--ts-signature-guard-bar-inset:57%;--ts-signature-guard-stop-inset:66%;--ts-signature-trade-width:100%;} } } /* Signature experience: geometry and editorial detail sizes. Merge into tokens.css. */ @layer tokens { :root { --ts-network-columns:minmax(0,7fr) minmax(0,4fr); --ts-network-ratio:700 / 550; --ts-network-rule:1px; --ts-network-trace:2px; --ts-network-choice-width:36%; --ts-network-node-width:21%; --ts-network-choice-left:20.57143%; --ts-network-node-left:78%; --ts-network-limits-top:10.90909%; --ts-network-guard-top:31.63636%; --ts-network-simulation-top:52.36364%; --ts-network-ledger-top:73.09091%; --ts-network-receipt-top:91.27273%; --ts-network-node-shift:-50%; --ts-network-type:14px; --ts-network-label-type:12px; --ts-network-weight:500; --ts-network-radius:8px; --ts-network-choice-padding:16px; --ts-network-grid-inset:32px; --ts-network-detail-min:400px; --ts-network-detail-measure:44ch; --ts-story-columns:minmax(0,1fr); --ts-story-row-columns:minmax(0,4fr) minmax(0,8fr); /* Wide editorial text/screen row. */ --ts-story-row-gap:32px; --ts-story-card-padding:40px; --ts-story-card-title:clamp(32px,3.1vw,44px); --ts-story-card-copy:18px; --ts-story-copy-measure:28ch; --ts-story-image-padding:24px; /* Preserve the complete original screen, with breathing room. */ --ts-story-doc-columns:repeat(3,minmax(0,1fr)); --ts-detail-width:1000px; --ts-detail-max-height:88svh; --ts-detail-backdrop:rgba(23,25,24,.66); --ts-detail-padding:48px; --ts-detail-title-measure:20ch; --ts-detail-copy-measure:64ch; --ts-detail-close-gap:32px; --ts-detail-shadow:0 24px 80px rgba(23,25,24,.22); } @media(max-width:1023px){:root{ --ts-network-columns:minmax(0,1fr); --ts-network-detail-min:0px; --ts-network-detail-measure:64ch; --ts-story-card-padding:24px; --ts-story-card-title:32px; --ts-story-image-padding:16px; }} @media(max-width:767px){:root{ --ts-network-ratio:700 / 620; --ts-network-type:12px; --ts-network-label-type:12px; --ts-network-choice-padding:8px; --ts-network-grid-inset:0px; --ts-story-row-columns:minmax(0,1fr); --ts-story-row-gap:24px; --ts-story-card-title:32px; --ts-story-card-copy:17px; --ts-story-image-padding:12px; --ts-story-doc-columns:minmax(0,1fr); --ts-detail-padding:24px; --ts-detail-max-height:calc(100svh - 32px); --ts-detail-close-gap:16px; }} } /* Academy screenshot presentation; full source frames retain their own ratios. */ @layer tokens { :root{ --ts-academy-preview-inset:64px; --ts-academy-title-measure:20ch; --ts-academy-gallery-columns:repeat(2,minmax(0,1fr)); --ts-academy-gallery-gap:48px; --ts-academy-screen-inset:16px; --ts-academy-screen-title:clamp(20px,1.8vw,26px); --ts-academy-detail-width:1320px; --ts-academy-detail-inset:24px; } @media(max-width:767px){:root{ --ts-academy-preview-inset:40px; --ts-academy-gallery-columns:minmax(0,1fr); --ts-academy-gallery-gap:32px; --ts-academy-screen-inset:6px; --ts-academy-detail-inset:12px; }} } /* Merge into tokens.css: authored movement distances, tempos and SVG precision. */ @layer tokens { :root { --ts-motion-hero-duration:1200ms; --ts-motion-eyes-shift:12px; --ts-motion-path-duration:640ms; /* Continuous shared-device chapter handoff. */ --ts-motion-path-copy-travel:16px; --ts-motion-path-exit:180ms; --ts-motion-trade-x:10px; --ts-motion-trade-y:24px; --ts-motion-guard-duration:960ms; /* Decisive arrival at the Guard boundary. */ --ts-motion-guard-travel:100px; --ts-ease-guard-stop:cubic-bezier(.24,.7,.35,1); --ts-motion-detail-duration:680ms; --ts-motion-route-duration:860ms; --ts-motion-control-lift:-1px; --ts-motion-chapter-shift:5px; --ts-motion-route-padding:4px; --ts-motion-line-rise:108%; --ts-motion-line-delay:80ms; --ts-motion-page-scale:.985; /* R6: legible technical motion, with the same understated palette. */ --ts-ambient-duration:14000ms; --ts-ambient-phase:3600ms; --ts-ambient-amplitude:8px; --ts-ambient-opacity:.64; --ts-motion-signal-duration:7400ms; --ts-motion-signal-phase:3200ms; --ts-motion-signal-span:160px; --ts-motion-signal-breadth:44px; --ts-motion-signal-samples:96; --ts-motion-signal-opacity:.86; } @media(max-width:767px) { :root { --ts-motion-guard-travel:48px; --ts-motion-guard-duration:720ms; --ts-motion-detail-duration:460ms; --ts-motion-eyes-shift:6px; --ts-ambient-amplitude:5px; --ts-motion-signal-span:120px; } } } /* ---- components.css */ /* ========================================================================== Компоненты — ЧЕРНОВИК FACE LAB, чтобы каркас был читаемым. Всё в этом файле твоё: переписывай внешний вид целиком. Сохраняй только имена классов из блока «Разметка, которую вставляет FACE LAB» (статусы, формы, ролики, плеер) — эту разметку slots.js вставит на сайте как есть. ========================================================================== */ @layer components { /* ---- Контейнер и текст ------------------------------------------------ */ .ts-container { inline-size: min(100% - 2 * var(--ts-page-margin), var(--ts-page-max)); margin-inline: auto; } .ts-h1 { font-size: var(--ts-h1); line-height: var(--ts-h1-lh); letter-spacing: var(--ts-tracking-tight); font-weight: 650; text-wrap: balance; } .ts-h2 { font-size: var(--ts-h2); line-height: var(--ts-h2-lh); letter-spacing: var(--ts-tracking-tight); font-weight: 650; text-wrap: balance; } .ts-h3 { font-size: var(--ts-h3); line-height: var(--ts-h3-lh); font-weight: 600; } .ts-lead { font-size: var(--ts-lead); line-height: var(--ts-lead-lh); color: var(--ts-muted); max-inline-size: var(--ts-measure); text-wrap: pretty; } .ts-dark .ts-lead { color: var(--ts-dark-muted); } .ts-note { font-size: var(--ts-text-14); line-height: var(--ts-lh-14); color: var(--ts-muted); } .ts-dark .ts-note { color: var(--ts-dark-muted); } .ts-caption { font-size: var(--ts-text-14); line-height: var(--ts-lh-14); color: var(--ts-muted); margin-block-start: var(--ts-space-3); } .ts-dark .ts-caption { color: var(--ts-dark-muted); } /* ---- Шапка ---------------------------------------------------------------- */ .ts-header { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--ts-canvas) 88%, transparent); backdrop-filter: blur(12px); border-block-end: var(--ts-border); } .ts-header__row { display: flex; align-items: center; gap: var(--ts-space-6); min-block-size: var(--ts-header-h); } .ts-header__brand { display: inline-flex; align-items: center; gap: var(--ts-space-2); font-weight: 700; letter-spacing: .02em; text-decoration: none; } .ts-header__brand img { inline-size: 28px; block-size: 28px; } .ts-nav { display: flex; gap: var(--ts-space-5); margin-inline-start: auto; } .ts-nav a { text-decoration: none; font-size: var(--ts-text-14); color: var(--ts-muted); } .ts-nav a:hover { color: var(--ts-ink); } @media (max-width: 1023px) { .ts-nav { display: none; } .ts-header__row { justify-content: space-between; } } /* ---- Кнопки и ссылки --------------------------------------------------------- */ .ts-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--ts-space-2); min-block-size: var(--ts-control-h); padding: 0 var(--ts-space-6); border-radius: var(--ts-radius-pill); border: 1px solid var(--ts-ink); background: transparent; color: var(--ts-ink); font-weight: 600; font-size: var(--ts-text-14); text-decoration: none; white-space: nowrap; transition: transform var(--ts-dur-1) var(--ts-ease-out), background-color var(--ts-dur-2) var(--ts-ease-out); } .ts-button:active { transform: scale(var(--ts-press-scale)); } .ts-button--primary { background: var(--ts-lime); border-color: var(--ts-lime); color: var(--ts-on-lime); } @media (hover: hover) { .ts-button--primary:hover { background: var(--ts-lime-hover); } } .ts-dark .ts-button:not(.ts-button--primary) { color: var(--ts-on-graphite); border-color: var(--ts-dark-line); } .ts-link { color: inherit; text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; } /* ---- Чипы состояний — одна формулировка везде (04_COPY_EN.md, «Статусы») ---- */ .ts-chip { display: inline-flex; align-items: center; gap: var(--ts-space-2); padding: var(--ts-space-1) var(--ts-space-3); border-radius: var(--ts-radius-pill); font-size: var(--ts-text-12); line-height: var(--ts-lh-12); font-weight: 600; white-space: nowrap; background: var(--ts-inset); color: var(--ts-ink); } .ts-chip::before { content: ""; inline-size: var(--ts-dot); block-size: var(--ts-dot); border-radius: 50%; background: currentColor; } .ts-chip--running { background: var(--ts-positive-bg); color: var(--ts-positive); } .ts-chip--building { background: var(--ts-warning-bg); color: var(--ts-warning); } .ts-chip--planned { background: var(--ts-inset); color: var(--ts-muted); } .ts-chip--paused { background: var(--ts-disabled-bg); color: var(--ts-disabled-ink); } .ts-chip--prototype { background: var(--ts-inset); color: var(--ts-ink); } .ts-chip--demo { background: var(--ts-inset); color: var(--ts-ink); } .ts-chip--partners { background: var(--ts-inset); color: var(--ts-ink); } /* ---- Карточки ------------------------------------------------------------------ */ .ts-card { background: var(--ts-surface); border: var(--ts-border); border-radius: var(--ts-radius-panel); padding: var(--ts-space-6); } @media (hover: hover) and (pointer: fine) { .ts-card--link { transition: transform var(--ts-dur-3) var(--ts-ease-out), border-color var(--ts-dur-3) var(--ts-ease-out); } .ts-card--link:hover { transform: translate3d(0, -2px, 0); border-color: var(--ts-ink); } } /* ---- «Попробуй сам» --------------------------------------------------------------- */ .ts-try { display: inline-flex; align-items: center; min-block-size: var(--ts-control-h); padding: 0 var(--ts-space-5); border-radius: var(--ts-radius-pill); border: 1px solid var(--ts-line); background: var(--ts-surface); font-weight: 600; font-size: var(--ts-text-14); } .ts-try:active { transform: scale(var(--ts-press-scale)); } .ts-try.is-active { border-color: var(--ts-ink); box-shadow: inset 0 0 0 1px var(--ts-ink); } .ts-try.is-active::before { content: ""; inline-size: var(--ts-space-2); block-size: var(--ts-space-2); border-radius: 50%; background: var(--ts-lime); margin-inline-end: var(--ts-space-2); } /* ---- Чек (сцена «Путь одной сделки») --------------------------------------------- */ .ts-receipt { background: var(--ts-surface); border: var(--ts-border); border-radius: var(--ts-radius-panel); padding: var(--ts-space-6); font-size: var(--ts-text-14); line-height: var(--ts-lh-14); } .ts-receipt__head { display: flex; justify-content: space-between; gap: var(--ts-space-4); font-weight: 600; } .ts-receipt__row { display: flex; justify-content: space-between; gap: var(--ts-space-4); padding-block: var(--ts-space-2); border-block-end: var(--ts-border); } .ts-receipt__row b { font-weight: 600; font-variant-numeric: var(--ts-numeric); } .ts-receipt__row--total { border: 0; font-size: var(--ts-text-18); line-height: var(--ts-lh-18); } /* ================================================================================ Разметка, которую вставляет FACE LAB (slots.js) — оформляй, классы сохраняй ================================================================================ */ /* статусы */ .ts-status { inline-size: 100%; font-size: var(--ts-text-14); line-height: var(--ts-lh-14); } .ts-status th, .ts-status td { text-align: start; padding: var(--ts-space-4) var(--ts-space-3); border-block-end: var(--ts-border); vertical-align: top; } .ts-status thead th { font-size: var(--ts-text-12); color: var(--ts-muted); font-weight: 600; } .ts-status__part { font-weight: 600; } .ts-status__note { color: var(--ts-muted); } .ts-status__legend { margin-block-start: var(--ts-space-4); font-size: var(--ts-text-14); color: var(--ts-muted); } @media (max-width: 767px) { .ts-status thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .ts-status tr { display: grid; grid-template-columns: 1fr auto; gap: var(--ts-space-1) var(--ts-space-3); padding-block: var(--ts-space-3); border-block-end: var(--ts-border); } .ts-status th, .ts-status td { padding: 0; border: 0; } .ts-status__note { grid-column: 1 / -1; } } /* формы */ .ts-form { display: grid; gap: var(--ts-space-4); max-inline-size: var(--ts-form-max); } .ts-form__title { font-size: var(--ts-h3); line-height: var(--ts-h3-lh); font-weight: 600; } .ts-form__lead { color: var(--ts-muted); } .ts-field { display: grid; gap: var(--ts-space-2); } .ts-field__label { font-size: var(--ts-text-14); font-weight: 600; } .ts-input, .ts-textarea { inline-size: 100%; min-block-size: var(--ts-control-h); padding: var(--ts-space-3) var(--ts-space-4); border-radius: var(--ts-radius-control); border: 1px solid var(--ts-line); background: var(--ts-surface); } .ts-textarea { resize: vertical; min-block-size: 120px; } .ts-input:focus-visible, .ts-textarea:focus-visible { outline-offset: 0; border-color: var(--ts-ink); } .ts-field__hint { font-size: var(--ts-text-12); color: var(--ts-muted); } .ts-field__error { font-size: var(--ts-text-12); color: var(--ts-negative); } .ts-field.is-invalid .ts-input, .ts-field.is-invalid .ts-textarea { border-color: var(--ts-negative); } .ts-form.is-sending .ts-button { opacity: .6; pointer-events: none; } .ts-form__status { min-block-size: 1.4em; font-size: var(--ts-text-14); } .ts-form.is-sent .ts-form__status { color: var(--ts-positive); } /* ролики Академии и плеер */ .ts-clips { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--ts-gutter); } .ts-clip-card__open { display: grid; gap: var(--ts-space-2); inline-size: 100%; padding: 0; border: 0; background: none; text-align: start; } .ts-clip-card__poster { inline-size: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; border-radius: var(--ts-radius-panel); background: var(--ts-graphite); } .ts-clip-card__title { font-weight: 600; } .ts-clip-card__meta { font-size: var(--ts-text-12); color: var(--ts-muted); } .ts-player { border: 0; padding: var(--ts-space-4); border-radius: var(--ts-radius-panel); background: var(--ts-graphite); color: var(--ts-on-graphite); max-inline-size: min(92vw, 520px); } .ts-player::backdrop { background: rgba(23, 25, 24, .72); } .ts-player__video { inline-size: 100%; max-block-size: 76vh; border-radius: var(--ts-radius-control); background: #000; } .ts-player__title { margin-block-end: var(--ts-space-3); font-weight: 600; } .ts-player__close { margin-block-start: var(--ts-space-3); min-block-size: var(--ts-control-h-sm); padding: 0 var(--ts-space-5); border-radius: var(--ts-radius-pill); border: 1px solid var(--ts-dark-line); background: none; color: inherit; } } /* ---- sections.css */ @layer sections { .ts-dark{background:var(--ts-graphite);color:var(--ts-on-graphite)} .ts-header{background:var(--ts-canvas);backdrop-filter:none;border-bottom:var(--ts-border)} .ts-header__row{justify-content:space-between} .ts-header__brand{font-size:var(--ts-header-brand-type);font-weight:650;letter-spacing:var(--ts-tracking-tight)} .ts-header__brand img{width:var(--ts-icon-size);height:var(--ts-icon-size)} .ts-nav{margin-left:auto;gap:var(--ts-space-7)} .ts-header__cta{margin-left:var(--ts-space-5)} .ts-button{border-radius:var(--ts-radius-control);font-weight:550;gap:var(--ts-space-6);transition:none} .ts-button:active,.ts-try:active{transform:none} .ts-link{text-decoration-thickness:var(--ts-hairline);text-underline-offset:var(--ts-space-1)} .ts-h1{font-size:var(--ts-hero-type);font-weight:var(--ts-hero-weight);line-height:var(--ts-hero-line-height);letter-spacing:var(--ts-hero-tracking);text-wrap:initial} .ts-h2{font-weight:var(--ts-hero-weight);letter-spacing:var(--ts-hero-tracking)} .ts-hero{padding-top:var(--ts-hero-top);position:relative;overflow:clip} .ts-hero__field{position:absolute;inset:0 var(--ts-page-margin);border-inline:var(--ts-border);pointer-events:none;opacity:.65} .ts-hero__grid{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--ts-hero-gap) var(--ts-gutter);padding-bottom:var(--ts-space-10)} .ts-hero__eyebrow{grid-column:1/-1;display:flex;align-items:center;gap:var(--ts-space-3);font-size:var(--ts-text-14);color:var(--ts-muted)} .ts-hero__eyebrow-dot{width:var(--ts-stage-signal-size);height:var(--ts-stage-signal-size);border-radius:var(--ts-radius-pill);background:var(--ts-ink)} .ts-hero__eyebrow-separator{color:var(--ts-architecture-line)} .ts-hero .ts-h1{grid-column:1/-1;max-width:var(--ts-hero-title-measure);position:relative;z-index:1;margin-top:calc(-1 * var(--ts-space-5));pointer-events:none} .ts-hero__copy{grid-column:1/5;min-width:0;padding-top:var(--ts-space-5);padding-right:var(--ts-space-7);position:relative;z-index:1} .ts-hero__copy .ts-lead{font-size:var(--ts-text-18);line-height:var(--ts-lead-lh);max-width:var(--ts-hero-copy-measure)} .ts-hero__actions{display:flex;align-items:center;gap:var(--ts-space-5);flex-wrap:wrap;margin-top:var(--ts-space-7)} .ts-hero__secondary{font-size:var(--ts-text-14);display:inline-flex;gap:var(--ts-space-4);align-items:center;min-height:var(--ts-control-h-sm)} .ts-hero__phase{margin-top:var(--ts-space-7);font-size:var(--ts-hero-note);line-height:var(--ts-hero-note-lh);max-width:var(--ts-hero-copy-measure)} .ts-hero__edition{display:flex;align-items:center;gap:var(--ts-space-3);font-size:var(--ts-text-12);color:var(--ts-muted);margin-top:var(--ts-space-10)} .ts-hero__edition-line{height:var(--ts-hairline);flex:1;background:var(--ts-line)} .ts-hero__art-reserve{position:absolute;right:0;top:var(--ts-space-7);width:var(--ts-hero-reserve-width);height:var(--ts-hero-reserve-height);pointer-events:none} .ts-product-stage{scroll-margin-top:calc(var(--ts-header-h) + var(--ts-space-5));grid-column:var(--ts-hero-product-columns);position:relative;min-width:0;padding-top:var(--ts-space-5);padding-bottom:var(--ts-space-8)} .ts-product-stage::before{content:"";position:absolute;top:var(--ts-architecture-band-top);bottom:calc(-1 * var(--ts-space-10));left:calc(-1 * var(--ts-architecture-band-inset));right:calc(-1 * var(--ts-page-margin));background:var(--ts-graphite);z-index:0;pointer-events:none} .ts-architecture__lines{position:absolute;left:var(--ts-architecture-left);top:var(--ts-architecture-top);width:calc(100% + var(--ts-architecture-extra));max-width:none;height:auto;stroke:var(--ts-architecture-line);stroke-width:var(--ts-architecture-stroke);pointer-events:none} .ts-architecture__route{stroke:var(--ts-ink);stroke-width:var(--ts-architecture-route)} .ts-product-stage__meta{position:relative;display:flex;align-items:center;justify-content:space-between;min-height:var(--ts-stage-stand);font-size:var(--ts-text-12);margin-bottom:var(--ts-space-3)} .ts-product-stage__meta .ts-chip{background:var(--ts-canvas);border:var(--ts-border)} .ts-hero__product{position:relative;min-width:0} .ts-product-stage__frame{position:relative;padding:var(--ts-stage-shell);background:var(--ts-canvas);border:var(--ts-stage-border);border-radius:var(--ts-radius-panel)} .ts-product-stage__frame .ts-slot{border-radius:var(--ts-radius-control)} .ts-slot__poster img{width:100%;height:100%;object-fit:cover;object-position:top left} .ts-product-stage__aperture{position:absolute;inset:0;background:var(--ts-graphite);border-radius:var(--ts-radius-panel);opacity:0;pointer-events:none;z-index:2} .ts-product-stage__caption{color:var(--ts-dark-muted);margin-top:var(--ts-space-5);font-size:var(--ts-text-12)} .ts-try-section{position:relative;color:var(--ts-on-graphite);margin-top:var(--ts-space-7)} .ts-try-section__label{display:flex;align-items:center;justify-content:space-between;padding-bottom:var(--ts-space-4)} .ts-try-section__label h2{font-size:var(--ts-text-18);font-weight:500;letter-spacing:var(--ts-tracking-tight)} .ts-try-section__paths{display:grid;grid-template-columns:var(--ts-try-columns);border-top:var(--ts-border-dark);border-bottom:var(--ts-border-dark)} .ts-try{display:flex;align-items:center;justify-content:space-between;gap:var(--ts-space-4);border:0;border-radius:0;background:none;padding:var(--ts-space-4);min-height:var(--ts-stage-control-height);text-align:left;white-space:normal;color:inherit;font-size:var(--ts-text-14);line-height:var(--ts-lh-14);transition:none} .ts-try+.ts-try{border-left:var(--ts-border-dark)} .ts-try.is-active{background:var(--ts-lime);color:var(--ts-on-lime);box-shadow:none} .ts-try-mobile{display:none} .ts-try-description p{display:none;font-size:var(--ts-text-14);line-height:var(--ts-lead-lh);color:var(--ts-dark-muted);margin-top:var(--ts-space-5)} .ts-try-description p.is-active{display:block} .ts-try-section__demo{color:var(--ts-dark-muted);font-size:var(--ts-text-12);margin-top:var(--ts-space-4)} .ts-try-trace{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;pointer-events:none;z-index:var(--ts-trace-top-layer);opacity:0;overflow:visible} .ts-try-trace path{stroke:var(--ts-lime);stroke-width:var(--ts-stage-trace-width)} .ts-try-trace circle{fill:var(--ts-lime)} .ts-bridge{padding-block:var(--ts-space-9) var(--ts-space-10)} .ts-bridge__top{display:flex;justify-content:space-between;align-items:center;border-top:var(--ts-border-dark);padding-top:var(--ts-space-4);font-size:var(--ts-text-14);color:var(--ts-dark-muted)} .ts-bridge__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--ts-space-10);align-items:end;margin-top:var(--ts-space-9)} .ts-bridge .ts-h2{font-size:var(--ts-bridge-title);line-height:var(--ts-hero-line-height)} .ts-bridge__body .ts-lead{font-size:var(--ts-lead);max-width:var(--ts-hero-copy-measure);color:var(--ts-dark-muted)} .ts-bridge__body .ts-button{margin-top:var(--ts-space-7)} .ts-pipeline{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;text-decoration:none;margin-top:var(--ts-pipeline-gap);position:relative} .ts-pipeline::after{content:"";position:absolute;left:0;right:0;bottom:var(--ts-space-3);height:var(--ts-hairline);background:var(--ts-dark-line)} .ts-pipeline__item{display:flex;flex-direction:column;gap:var(--ts-space-3);position:relative;font-size:var(--ts-text-18)} .ts-pipeline__index{color:var(--ts-dark-muted);font-size:var(--ts-text-12);font-variant-numeric:var(--ts-numeric)} .ts-pipeline__node{width:var(--ts-pipeline-node);height:var(--ts-pipeline-node);background:var(--ts-on-graphite);border-radius:var(--ts-radius-pill);margin-block:var(--ts-space-3) var(--ts-space-2);z-index:1} .ts-pipeline__item:last-child .ts-pipeline__node{background:var(--ts-lime)} .ts-contact{scroll-margin-top:var(--ts-header-h);padding-block:var(--ts-section-gap);border-bottom:var(--ts-border)} .ts-contact__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--ts-space-10)} .ts-contact .ts-h2{font-size:var(--ts-h2)} .ts-study-head{padding-block:var(--ts-space-9) var(--ts-space-10)} .ts-study-head__meta{display:flex;justify-content:space-between;align-items:center;font-size:var(--ts-text-14);margin-bottom:var(--ts-space-8)} .ts-study-head__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:var(--ts-space-9);align-items:end} .ts-study-head .ts-h1{font-size:var(--ts-bridge-title)} .ts-study-head .ts-lead{font-size:var(--ts-lead)} .ts-path{position:relative;min-height:var(--ts-path-pin-distance)} .ts-path__sticky{position:sticky;top:var(--ts-header-h);min-height:var(--ts-sticky-available);padding-block:var(--ts-space-5);display:grid;align-items:center} .ts-path__heading{display:flex;align-items:center;justify-content:space-between;gap:var(--ts-space-5);padding-bottom:var(--ts-space-5)} .ts-path__heading h2{font-size:var(--ts-text-14);font-weight:500;color:var(--ts-dark-muted)} .ts-motion-toggle{background:none;border:0;color:var(--ts-dark-muted);font-size:var(--ts-text-12);min-height:var(--ts-control-h-sm);padding:0} .ts-path__navigation{position:relative;margin-bottom:var(--ts-space-6)} .ts-path__steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--ts-space-4)} .ts-path__select{display:flex;align-items:center;gap:var(--ts-space-3);width:100%;border:0;background:none;color:var(--ts-dark-muted);font-size:var(--ts-text-14);min-height:var(--ts-control-h-sm);padding:0;text-align:left} .ts-path__index{font-size:var(--ts-text-12);font-variant-numeric:var(--ts-numeric);color:var(--ts-dark-muted)} .ts-path__dot{width:var(--ts-stage-signal-size);height:var(--ts-stage-signal-size);border-radius:var(--ts-radius-pill);background:var(--ts-dark-line);margin-left:auto;margin-right:var(--ts-space-4)} .ts-path__step.is-current .ts-path__select{color:var(--ts-on-graphite)} .ts-path__step.is-current .ts-path__dot{background:var(--ts-lime)} .ts-path__step.is-done .ts-path__dot{background:var(--ts-dark-muted)} .ts-path__rail{height:var(--ts-path-rail);background:var(--ts-dark-line);position:relative} .ts-path__rail span{position:absolute;inset:0;height:var(--ts-path-rail-progress);background:var(--ts-lime);clip-path:inset(0 80% 0 0)} .ts-path__stage{position:relative;min-height:var(--ts-path-stage-min);display:grid;align-items:center} .ts-path__frame{display:grid;grid-template-columns:var(--ts-path-stage-grid);gap:var(--ts-space-10);align-items:center;position:relative;min-width:0} .ts-js .ts-path__frame{grid-area:1/1;visibility:hidden;opacity:0;pointer-events:none} .ts-js .ts-path__frame.is-active{visibility:visible;opacity:1;pointer-events:auto} .ts-path__editorial{max-width:var(--ts-hero-copy-measure)} .ts-path__stage-number{font-size:var(--ts-path-number);font-variant-numeric:var(--ts-numeric);color:var(--ts-on-graphite);margin-bottom:var(--ts-space-6)} .ts-path__stage-number span{color:var(--ts-dark-muted)} .ts-path__editorial h3{font-size:var(--ts-path-title);line-height:var(--ts-hero-line-height);font-weight:var(--ts-hero-weight);letter-spacing:var(--ts-hero-tracking);margin-bottom:var(--ts-space-7)} .ts-path__editorial .ts-lead{font-size:var(--ts-path-description);line-height:var(--ts-lead-lh);color:var(--ts-dark-muted)} .ts-stage-glyph{display:flex;align-items:center;gap:var(--ts-space-2);margin-top:var(--ts-space-9);width:var(--ts-stage-glyph-width);height:var(--ts-stage-glyph-height)} .ts-stage-glyph span{display:block;width:var(--ts-stage-glyph-cut);height:var(--ts-hairline);background:var(--ts-dark-line)} .ts-stage-glyph span:first-child{background:var(--ts-lime)} .ts-path__product{min-width:0;position:relative;display:grid;place-items:center} .ts-evidence{width:100%;max-width:var(--ts-evidence-width);position:relative;display:grid;place-items:center;padding-block:var(--ts-space-3);} .ts-evidence__device{width:var(--ts-path-device-width);max-width:100%;border:var(--ts-path-device-border);border-radius:var(--ts-path-device-radius);overflow:clip;position:relative;z-index:1;} .ts-evidence__device img{width:100%;height:auto} .ts-evidence__ruler{position:absolute;inset:0;pointer-events:none;display:flex;justify-content:space-between;gap:var(--ts-evidence-rule-gap)} .ts-evidence__ruler span{display:block;border-left:var(--ts-border-dark);width:var(--ts-hairline);height:100%} .ts-evidence::before,.ts-evidence::after{content:"";position:absolute;inset:var(--ts-evidence-rule-inset) 0;border:var(--ts-border-dark);border-radius:var(--ts-evidence-rule-radius);pointer-events:none} .ts-evidence::after{inset:0 var(--ts-evidence-rule-inset);border-radius:var(--ts-radius-pill)} .ts-evidence__label{font-size:var(--ts-text-12);color:var(--ts-dark-muted);margin-top:var(--ts-space-3)} .ts-receipt{color:var(--ts-ink);background:var(--ts-surface);width:100%;max-width:var(--ts-receipt-measure);padding:var(--ts-receipt-padding);box-shadow:none;position:relative;border-radius:var(--ts-radius-panel)} .ts-receipt__title{font-size:var(--ts-text-28);font-weight:550;line-height:var(--ts-lh-28);letter-spacing:var(--ts-tracking-tight);margin-block:var(--ts-space-5)} .ts-receipt__row{padding-block:var(--ts-receipt-row-padding);font-size:var(--ts-receipt-font);gap:var(--ts-space-4)} .ts-receipt__row span{color:var(--ts-muted)} .ts-receipt__row b{text-align:right} .ts-receipt__row--total{margin-top:var(--ts-space-4);padding-top:var(--ts-space-5);border-top:var(--ts-border);border-bottom:none;align-items:baseline} .ts-receipt__row--total b{font-size:var(--ts-text-36);line-height:var(--ts-lh-36);font-weight:500;color:var(--ts-ink)} .ts-receipt__result{color:var(--ts-positive);text-align:right;font-weight:550;font-size:var(--ts-text-14)} .ts-receipt .ts-caption{margin-top:var(--ts-space-5);color:var(--ts-muted)} .ts-path__bottom{display:flex;align-items:center;justify-content:space-between;gap:var(--ts-space-6);border-top:var(--ts-border-dark);padding-top:var(--ts-space-4);margin-top:var(--ts-space-5)} .ts-path__bottom-mark{font-size:var(--ts-header-brand-type);font-weight:650;letter-spacing:var(--ts-tracking-tight)} .ts-path__bottom .ts-caption{margin:0;color:var(--ts-dark-muted);font-size:var(--ts-text-12)} .ts-footer{padding-block:var(--ts-space-8);border-top:var(--ts-border)} .ts-footer__row{display:grid;grid-template-columns:auto 1fr auto;gap:var(--ts-space-9);align-items:start} .ts-footer .ts-note+.ts-note{margin-top:var(--ts-space-2)} .ts-footer .ts-link{font-size:var(--ts-text-14)} .ts-path.is-static,html:not(.ts-js) .ts-path{min-height:0} .ts-path.is-static .ts-path__sticky,html:not(.ts-js) .ts-path__sticky{position:static;min-height:0;padding-block:var(--ts-space-8)} .ts-path.is-static .ts-path__stage,html:not(.ts-js) .ts-path__stage{display:grid;gap:var(--ts-space-10)} .ts-path.is-static .ts-path__frame,html:not(.ts-js) .ts-path__frame{grid-area:auto;visibility:visible;opacity:1;pointer-events:auto;transform:none;clip-path:none;padding-block:var(--ts-space-7);border-top:var(--ts-border-dark)} .ts-path.is-static .ts-path__navigation,html:not(.ts-js) .ts-path__navigation{display:none} @media(max-width:1023px){ .ts-hero__grid{grid-template-columns:repeat(2,minmax(0,1fr));} .ts-hero .ts-h1{grid-column:1/-1} .ts-hero__copy{grid-column:1/-1;padding:0;max-width:var(--ts-reading-measure)} .ts-hero__actions{margin-top:var(--ts-space-6)} .ts-hero__edition{display:none} .ts-hero__phase{margin-top:var(--ts-space-5)} .ts-product-stage{scroll-margin-top:calc(var(--ts-header-h) + var(--ts-space-5));grid-column:1/-1;margin-top:var(--ts-space-6)} .ts-hero__art-reserve{width:var(--ts-art-reserve-min)} .ts-architecture__lines{z-index:0;opacity:.65} .ts-bridge__grid,.ts-study-head__grid,.ts-contact__grid{grid-template-columns:minmax(0,1fr);gap:var(--ts-space-7)} .ts-bridge__body .ts-lead{max-width:var(--ts-reading-measure)} .ts-path__frame{grid-template-columns:minmax(0,1fr);gap:var(--ts-space-7)} .ts-path__editorial{max-width:var(--ts-reading-measure)} .ts-stage-glyph{display:none} .ts-evidence{margin-inline:auto} .ts-path__product{margin-top:var(--ts-space-5)} .ts-path__editorial h3{margin-bottom:var(--ts-space-5)} } @media(max-width:768px){.ts-try-section__paths.ts-try-desktop,.ts-try-desktop{display:none}.ts-try-mobile{display:inline-flex;background:var(--ts-canvas);color:var(--ts-ink)}} @media(max-width:767px){ .ts-hero__grid{padding-bottom:var(--ts-space-9)} .ts-hero .ts-h1 br{display:none} .ts-hero__copy .ts-lead{font-size:var(--ts-body)} .ts-hero__eyebrow{font-size:var(--ts-text-12)} .ts-hero__actions{gap:var(--ts-space-4)} .ts-hero__phase{font-size:var(--ts-text-12);max-width:none} .ts-hero__art-reserve{display:none} .ts-product-stage{padding-bottom:var(--ts-space-6);margin-top:var(--ts-space-5)} .ts-product-stage::before{bottom:calc(-1 * var(--ts-space-9))} .ts-architecture__lines{opacity:.6} .ts-header__cta{font-size:var(--ts-text-12);padding-inline:var(--ts-space-4);min-height:var(--ts-control-h-sm);margin-left:0} .ts-product-stage__frame{border-radius:var(--ts-radius-control)} .ts-slot__open{font-size:var(--ts-text-12);min-height:var(--ts-control-h-sm)} .ts-bridge{padding-block:var(--ts-space-8) var(--ts-space-9)} .ts-bridge__grid{margin-top:var(--ts-space-8)} .ts-pipeline{grid-template-columns:minmax(0,1fr);margin-top:var(--ts-space-8);gap:var(--ts-space-5)} .ts-pipeline::after{display:none} .ts-pipeline__item{flex-direction:row;align-items:center;gap:var(--ts-space-5);padding-bottom:var(--ts-space-4);border-bottom:var(--ts-border-dark);font-size:var(--ts-text-18)} .ts-pipeline__node{margin:0 0 0 auto} .ts-study-head{padding-block:var(--ts-space-8) var(--ts-space-9)} .ts-study-head__meta{margin-bottom:var(--ts-space-7)} .ts-path__bottom{align-items:start} .ts-path__bottom-mark{display:none} .ts-path__heading{gap:var(--ts-space-3)} .ts-path__heading h2{font-size:var(--ts-text-12)} .ts-motion-toggle{white-space:nowrap} .ts-receipt{padding:var(--ts-space-5)} .ts-receipt__title{font-size:var(--ts-text-28)} .ts-receipt__row{font-size:var(--ts-text-12);gap:var(--ts-space-3)} .ts-receipt__row b{max-width:var(--ts-receipt-mobile-value);overflow-wrap:anywhere} .ts-receipt__row--total b{font-size:var(--ts-text-28)} .ts-evidence__ruler{display:none} .ts-footer__row{grid-template-columns:minmax(0,1fr);gap:var(--ts-space-6)} } } /* ---- site.css */ @layer sections { .ts-v3 .ts-nav{gap:var(--ts-nav-gap)} .ts-v3 .ts-nav a{font-size:var(--ts-nav-type);white-space:nowrap} .ts-v3 .ts-nav a[aria-current=page]{color:var(--ts-ink);text-decoration:underline;text-underline-offset:var(--ts-space-2)} .ts-v3 .ts-header__row{gap:var(--ts-space-5)} .ts-v3 .ts-header__cta{margin:0;padding-inline:var(--ts-space-5)} .ts-header__motion{margin-left:auto;white-space:nowrap;color:var(--ts-muted);min-height:var(--ts-control-h-sm)} .ts-menu{display:none;position:relative} .ts-menu summary{display:flex;align-items:center;justify-content:space-between;gap:var(--ts-space-3);min-height:var(--ts-control-h-sm);cursor:pointer;list-style:none;font-size:var(--ts-text-14)} .ts-menu summary::-webkit-details-marker{display:none} .ts-menu nav{position:absolute;z-index:var(--ts-menu-layer);top:calc(100% + var(--ts-space-4));right:0;width:min(var(--ts-header-menu-width),calc(100vw - 2 * var(--ts-page-margin)));display:grid;background:var(--ts-canvas);border:var(--ts-border);padding:var(--ts-space-5)} .ts-menu nav a{display:block;padding-block:var(--ts-space-3);text-decoration:none;border-bottom:var(--ts-border);min-height:var(--ts-control-h-sm);font-size:var(--ts-text-18)} .ts-menu nav a:last-child{border-bottom:0} .ts-page-hero{position:relative;isolation:isolate;padding-block:var(--ts-space-10);border-bottom:var(--ts-border)} .ts-page-hero>.ts-container{position:relative;z-index:1} .ts-page-hero .ts-h1{font-size:var(--ts-page-hero-type);max-width:var(--ts-page-title-measure)} .ts-page-hero .ts-lead{margin-top:var(--ts-space-8);max-width:var(--ts-reading-measure)} .ts-eyebrow{display:flex;align-items:center;flex-wrap:wrap;gap:var(--ts-space-4);font-size:var(--ts-text-14);line-height:var(--ts-lh-14);color:var(--ts-muted);margin-bottom:var(--ts-space-7)} .ts-dark .ts-eyebrow{color:var(--ts-dark-muted)} .ts-section{position:relative;isolation:isolate;padding-block:var(--ts-section-gap);scroll-margin-top:var(--ts-header-h);border-bottom:var(--ts-border)} .ts-section>.ts-container{position:relative;z-index:1} .ts-section--graphite,.ts-section.ts-dark{border-color:var(--ts-dark-line)} .ts-editorial-grid{display:grid;grid-template-columns:var(--ts-editorial-columns);gap:var(--ts-editorial-gap);align-items:start} .ts-two-up{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ts-editorial-gap);align-items:center} .ts-three-up{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--ts-gutter)} .ts-section-header{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--ts-editorial-gap);margin-bottom:var(--ts-space-9);align-items:end} .ts-section-header .ts-chip{margin-bottom:var(--ts-space-6)} .ts-section-heading .ts-h2{max-width:var(--ts-section-title-measure)} .ts-section-heading .ts-lead,.ts-section-heading .ts-chip{margin-top:var(--ts-space-6)} .ts-section-heading .ts-button{margin-top:var(--ts-space-7)} .ts-copy{font-size:var(--ts-body);line-height:var(--ts-body-lh);color:var(--ts-muted)} .ts-copy>p+p,.ts-copy+.ts-copy,.ts-lead+.ts-copy{margin-top:var(--ts-space-6)} .ts-copy .ts-link{display:inline-block;margin-top:var(--ts-space-6);color:var(--ts-ink)} .ts-dark .ts-copy{color:var(--ts-dark-muted)} .ts-dark .ts-copy .ts-link{color:var(--ts-on-graphite)} .ts-feature-list{display:grid;gap:0;min-width:0} .ts-feature{padding-block:var(--ts-space-7);border-top:var(--ts-border)} .ts-feature:has(>.ts-feature__number){display:grid;grid-template-columns:var(--ts-space-8) minmax(0,1fr);gap:var(--ts-space-5)} .ts-feature p{margin-top:var(--ts-space-4);color:var(--ts-muted)} .ts-dark .ts-feature{border-color:var(--ts-dark-line)} .ts-dark .ts-feature p{color:var(--ts-dark-muted)} .ts-feature__number{font-size:var(--ts-text-14);font-variant-numeric:var(--ts-numeric);color:var(--ts-muted)} .ts-dark .ts-feature__number{color:var(--ts-dark-muted)} .ts-feature__head{display:flex;justify-content:space-between;align-items:start;gap:var(--ts-space-5)} .ts-feature__head .ts-h3{min-width:0} .ts-proof{margin-block:var(--ts-space-8)} .ts-product-proof picture{border:var(--ts-border);border-radius:var(--ts-radius-panel);overflow:clip;background:var(--ts-canvas)} .ts-product-proof img{width:100%;height:auto} .ts-scene-frame{width:100%;max-width:var(--ts-scene-width);margin-inline:auto} .ts-scene-frame .ts-slot{border-radius:var(--ts-radius-panel)} .ts-rule{border-top:var(--ts-border);padding-top:var(--ts-space-7);margin-top:var(--ts-space-8)} .ts-dark .ts-rule{border-color:var(--ts-dark-line)} .ts-rules{list-style:none;padding:0} .ts-rules .ts-rule{font-size:var(--ts-rule-type);font-weight:480;line-height:var(--ts-h3-lh);letter-spacing:var(--ts-tracking-tight);margin:0;border:0;padding-block:var(--ts-space-6);--ts-trace-top:100%;--ts-trace-weight:var(--ts-hairline);--ts-trace-color:var(--ts-line)} .ts-rules .ts-rule:first-child{padding-top:0} .ts-home-mechanism-intro{padding-block:var(--ts-space-10) var(--ts-space-8)} .ts-home-mechanism-intro .ts-h2{max-width:var(--ts-section-title-measure);font-size:var(--ts-bridge-title)} .ts-home-mechanism-intro .ts-lead{max-width:var(--ts-reading-measure);margin-top:var(--ts-space-7)} .ts-home-mechanism-intro .ts-link{display:inline-block;margin-top:var(--ts-space-6)} .ts-home-mechanism-intro .ts-eyebrow{color:var(--ts-dark-muted)} .ts-try-section__lead{font-size:var(--ts-text-14);color:var(--ts-dark-muted);margin-bottom:var(--ts-space-5)} .ts-mobile-note{display:none} .ts-tabs{display:inline-flex;gap:var(--ts-space-1);padding:var(--ts-space-1);border:var(--ts-tabs-border);border-radius:var(--ts-radius-pill);margin-bottom:var(--ts-space-8)} .ts-tab{background:none;border:0;border-radius:var(--ts-radius-pill);color:var(--ts-dark-muted);min-height:var(--ts-control-h-sm);padding-inline:var(--ts-space-6);font-size:var(--ts-text-14)} .ts-tab.is-active{background:var(--ts-canvas);color:var(--ts-ink)} .ts-interface-stage{position:relative;min-height:var(--ts-interface-height)} .ts-interface-panel{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);gap:var(--ts-editorial-gap);align-items:start} .ts-interface-panel[hidden]{display:none} .ts-interface-panel__copy{color:var(--ts-dark-muted);font-size:var(--ts-body)} .ts-interface-panel__copy .ts-link{display:inline-block;color:var(--ts-on-graphite);margin-top:var(--ts-space-7)} .ts-interface-panel__media{min-width:0} .ts-device{width:var(--ts-device-width);max-width:100%;border:var(--ts-device-border);border-radius:var(--ts-radius-device);margin-inline:auto;background:var(--ts-graphite)} .ts-device>.ts-slot{border-radius:var(--ts-device-inner-radius)} .ts-phone-stage{min-width:0;text-align:center} .ts-phone-stage>.ts-caption{max-width:var(--ts-device-width);margin-inline:auto} .ts-media-frame{padding:var(--ts-stage-shell);border:var(--ts-stage-border);border-radius:var(--ts-radius-panel);background:var(--ts-canvas)} .ts-interface-panel__media .ts-caption{margin-top:var(--ts-space-5)} .ts-interface-curtain{position:absolute;inset:0;z-index:2;background:var(--ts-graphite);opacity:0;pointer-events:none} .ts-audiences{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--ts-space-7)} .ts-audience{border-top:var(--ts-border);padding-top:var(--ts-space-6);display:flex;flex-direction:column;align-items:start;gap:var(--ts-space-6)} .ts-audience h3{font-size:var(--ts-h3);font-weight:500;line-height:var(--ts-h3-lh);letter-spacing:var(--ts-tracking-tight)} .ts-audience p{font-size:var(--ts-text-14);line-height:var(--ts-lead-lh);color:var(--ts-muted);flex:1} .ts-audience .ts-link{font-size:var(--ts-text-14)} .ts-status-section{background:var(--ts-inset)} .ts-status-section .ts-status th,.ts-status-section .ts-status td{border-color:var(--ts-line)} .ts-clip-card__poster{aspect-ratio:auto;height:var(--ts-academy-poster-height);object-fit:contain;background:var(--ts-graphite)} .ts-contact--full .ts-h2{font-size:var(--ts-bridge-title);max-width:var(--ts-section-title-measure);margin-bottom:var(--ts-space-9)} .ts-contact--full .ts-two-up{align-items:start} .ts-dark .ts-form__lead,.ts-dark .ts-field__hint{color:var(--ts-dark-muted)} .ts-dark .ts-input,.ts-dark .ts-textarea{color:var(--ts-ink)} .ts-dark .ts-field__error{color:var(--ts-dark-negative)} .ts-dark .ts-form.is-sent .ts-form__status{color:var(--ts-dark-positive)} .ts-next-links{display:flex;justify-content:space-between;align-items:center;gap:var(--ts-space-8)} .ts-next-links .ts-h2{max-width:var(--ts-section-title-measure)} .ts-next-links .ts-link{text-decoration:none} .ts-technology-intro{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:var(--ts-space-7) var(--ts-editorial-gap);align-items:center;padding-block:var(--ts-space-9)} .ts-technology-intro>.ts-note{grid-column:1/-1} .ts-side-nav{display:grid;gap:var(--ts-space-4)} .ts-side-nav a{padding-block:var(--ts-space-3);border-bottom:var(--ts-border);text-decoration:none;min-height:var(--ts-control-h-sm);font-size:var(--ts-text-18)} .ts-faq-list{max-width:var(--ts-reading-measure);margin-inline:auto} .ts-faq{border-bottom:var(--ts-border);padding-block:var(--ts-space-6)} .ts-faq summary{font-size:var(--ts-h3);line-height:var(--ts-h3-lh);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:var(--ts-space-6);min-height:var(--ts-control-h-sm);align-items:center} .ts-faq summary::-webkit-details-marker{display:none} .ts-faq summary::after{content:'+';flex-shrink:0;font-size:var(--ts-text-28);font-weight:400} .ts-faq[open] summary::after{content:'−'} .ts-faq__answer{padding-top:var(--ts-space-5);color:var(--ts-muted);max-width:var(--ts-measure)} .ts-footer--full{padding-block:var(--ts-space-9);background:var(--ts-canvas)} .ts-footer__grid{display:grid;grid-template-columns:2fr repeat(4,minmax(0,1fr));gap:var(--ts-space-7)} .ts-footer__grid>.ts-header__brand{align-self:start} .ts-footer__group{display:grid;gap:var(--ts-space-3);align-content:start} .ts-footer__group h2{font-size:var(--ts-text-12);font-weight:500;color:var(--ts-muted);margin-bottom:var(--ts-space-3)} .ts-footer__group a{font-size:var(--ts-text-14);text-decoration:none;min-height:var(--ts-space-6)} .ts-footer__legal{border-top:var(--ts-border);margin-top:var(--ts-space-9);padding-top:var(--ts-space-6);display:grid;grid-template-columns:minmax(0,8fr) minmax(0,3fr) auto;gap:var(--ts-space-8)} .ts-footer__legal .ts-note{font-size:var(--ts-text-12)} .ts-footer__legal .ts-note+.ts-note{margin-top:0} .ts-styleguide-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--ts-showcase-min)),1fr));gap:var(--ts-space-6)} .ts-styleguide-panel{padding:var(--ts-space-6);border:var(--ts-border);border-radius:var(--ts-radius-panel);min-width:0} .ts-styleguide-panel h3{margin-bottom:var(--ts-space-6)} .ts-styleguide-row{display:flex;gap:var(--ts-space-4);flex-wrap:wrap;align-items:center;margin-block:var(--ts-space-5)} .ts-styleguide-swatch{height:var(--ts-swatch-height);border:var(--ts-border);border-radius:var(--ts-radius-control);margin-bottom:var(--ts-space-3)} .ts-styleguide-swatch--canvas{background:var(--ts-canvas)}.ts-styleguide-swatch--surface{background:var(--ts-surface)}.ts-styleguide-swatch--inset{background:var(--ts-inset)}.ts-styleguide-swatch--ink{background:var(--ts-ink)}.ts-styleguide-swatch--muted{background:var(--ts-muted)}.ts-styleguide-swatch--lime{background:var(--ts-lime)}.ts-styleguide-swatch--positive{background:var(--ts-positive)}.ts-styleguide-swatch--warning{background:var(--ts-warning)}.ts-styleguide-swatch--negative{background:var(--ts-negative)}.ts-styleguide-swatch--dark-muted{background:var(--ts-dark-muted)} .ts-styleguide-type--12{font-size:var(--ts-text-12)}.ts-styleguide-type--14{font-size:var(--ts-text-14)}.ts-styleguide-type--18{font-size:var(--ts-text-18)}.ts-styleguide-type--28{font-size:var(--ts-text-28)}.ts-styleguide-type--32{font-size:var(--ts-text-32)}.ts-styleguide-type--36{font-size:var(--ts-text-36)} .ts-styleguide-device{max-width:var(--ts-device-width);margin-inline:auto} .ts-button--danger{background:var(--ts-surface);border-color:var(--ts-line);color:var(--ts-negative)} .ts-button:disabled{opacity:var(--ts-muted-opacity);cursor:default} .ts-button.is-active{border-color:var(--ts-ink);background:var(--ts-inset)} .ts-no-script{display:block;padding:var(--ts-space-6);border:var(--ts-border)} @media(max-width:1279px){.ts-v3 .ts-nav{display:none}.ts-menu{display:block}.ts-header__motion{margin-left:auto}} @media(max-width:1023px){ .ts-section-header,.ts-two-up,.ts-three-up{grid-template-columns:minmax(0,1fr);gap:var(--ts-space-8)} .ts-audiences{grid-template-columns:repeat(2,minmax(0,1fr))} .ts-section-header{align-items:start}.ts-section-header .ts-lead{max-width:var(--ts-reading-measure)} .ts-interface-panel{grid-template-columns:minmax(0,1fr);gap:var(--ts-space-8)} .ts-interface-panel__copy{max-width:var(--ts-measure)} .ts-footer__grid{grid-template-columns:repeat(4,minmax(0,1fr))} .ts-footer__grid>.ts-header__brand{grid-column:1/-1;margin-bottom:var(--ts-space-6)} .ts-footer__legal{grid-template-columns:minmax(0,1fr);gap:var(--ts-space-3)} .ts-next-links{align-items:start;flex-direction:column} .ts-technology-intro{grid-template-columns:minmax(0,1fr)} } @media(max-width:768px){.ts-mobile-note{display:block}.ts-product-stage>.ts-hero__product .ts-mobile-note{color:var(--ts-dark-muted)}} @media(max-width:767px){ .ts-v3 .ts-header__cta{display:none}.ts-v3 .ts-header__row{gap:var(--ts-space-4)} .ts-header__motion{font-size:var(--ts-text-12)} .ts-page-hero{padding-block:var(--ts-space-9)} .ts-page-hero .ts-lead{margin-top:var(--ts-space-7)} .ts-eyebrow{font-size:var(--ts-text-12);margin-bottom:var(--ts-space-6)} .ts-section-header{margin-bottom:var(--ts-space-8)} .ts-section-heading .ts-h2{max-width:none} .ts-section-heading .ts-lead{margin-top:var(--ts-space-5)} .ts-home-mechanism-intro{padding-block:var(--ts-space-9) var(--ts-space-7)} .ts-audiences{grid-template-columns:minmax(0,1fr);gap:var(--ts-space-8)} .ts-footer__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ts-space-7)} .ts-footer__group a{min-height:var(--ts-control-h-sm)} .ts-footer__legal{margin-top:var(--ts-space-8)} .ts-feature:has(>.ts-feature__number){grid-template-columns:var(--ts-space-6) minmax(0,1fr);gap:var(--ts-space-4)} .ts-feature__head{flex-wrap:wrap;gap:var(--ts-space-3)} .ts-tabs{display:flex}.ts-tab{flex:1;padding-inline:var(--ts-space-4)} } } @layer sections { .ts-styleguide-poster { aspect-ratio:16 / 10; } .ts-styleguide-poster--mini { aspect-ratio:390 / 844; } } @layer sections { .ts-clips{grid-template-columns:repeat(3,minmax(0,1fr))} .ts-clip-card__poster{object-position:center} .ts-dark .ts-clip-card__meta{color:var(--ts-dark-muted)} @media(max-width:767px){.ts-clips{grid-template-columns:minmax(0,1fr)}} } /* ---- ambient.css */ /* Decorative architecture only. Content and mounted product slots never move. */ @layer sections { [data-ts-ambient] { position: relative; isolation: isolate; } .ts-ambient { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; z-index: -1; overflow: hidden; pointer-events: none; user-select: none; color: var(--ts-ambient-line); opacity: var(--ts-ambient-opacity); contain: strict; } .ts-ambient__line, .ts-ambient__signal, .ts-ambient__register { fill: none; stroke: currentColor; stroke-width: var(--ts-ambient-stroke); vector-effect: non-scaling-stroke; } .ts-ambient__group { transform-box: fill-box; transform-origin: center; } .ts-ambient__signal { color: var(--ts-ambient-signal); } .ts-ambient__flow { opacity: 0; } .ts-dark > .ts-ambient, [data-ts-ambient-tone="dark"] > .ts-ambient { color: var(--ts-ambient-line-dark); } .ts-dark > .ts-ambient .ts-ambient__signal, [data-ts-ambient-tone="dark"] > .ts-ambient .ts-ambient__signal { color: var(--ts-ambient-signal-dark); } .ts-player-transition { position: fixed; inset: 0; z-index: var(--ts-layer-top); background: var(--ts-graphite); opacity: 0; pointer-events: none; contain: strict; } /* Shared button styles also reach FACE LAB's mounted forms. Preserve their focus/active colors, but never inherit the site's scale/transition effect. */ [data-ts-slot].is-live .ts-button, [data-ts-slot].is-live .ts-button:active, [data-ts-slot].is-live .ts-try, [data-ts-slot].is-live .ts-try:active { transform: none; transition: none; } html[data-ts-motion="reduced"] .ts-ambient__flow { opacity: 0; } @media (prefers-reduced-motion: reduce) { .ts-ambient__flow { opacity: 0; } } } /* ---- signature.css */ /* Three signature scenes. Original brand and product assets remain intact. */ @layer sections { .ts-signature .ts-hero {padding-top:var(--ts-signature-hero-top);overflow:visible;} .ts-signature .ts-hero__field {display:none;} .ts-signature .ts-hero__grid {grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--ts-signature-hero-gap) var(--ts-gutter);padding-bottom:var(--ts-space-10);} .ts-signature .ts-hero__eyebrow {grid-column:1/-1;padding-bottom:var(--ts-space-4);border-bottom:var(--ts-border);margin:0;} .ts-signature .ts-hero .ts-h1 {grid-column:1/-1;grid-row:2;align-self:center;font-size:var(--ts-signature-hero-type);line-height:var(--ts-signature-hero-leading);letter-spacing:var(--ts-signature-hero-tracking);font-weight:var(--ts-hero-weight);max-width:var(--ts-hero-title-measure);margin:0;-webkit-text-stroke:var(--ts-signature-text-clearance) var(--ts-canvas);paint-order:stroke fill;} .ts-signature .ts-hero .ts-h1 br {display:block;} .ts-hero-architecture {position:absolute;left:var(--ts-architecture-left);right:calc(-1 * var(--ts-page-margin));top:var(--ts-architecture-top);aspect-ratio:var(--ts-signature-contour-ratio);isolation:isolate;overflow:clip;pointer-events:none;} .ts-hero-architecture .ts-architecture__lines {display:block;left:0;top:0;width:100%;height:100%;opacity:1;} .ts-hero-architecture path {vector-effect:non-scaling-stroke;} .ts-signature .ts-hero__copy {grid-column:1/5;grid-row:3;padding-top:var(--ts-space-4);padding-right:var(--ts-space-7);} .ts-signature .ts-hero__copy .ts-lead {font-size:var(--ts-text-18);max-width:var(--ts-signature-copy-measure);} .ts-signature .ts-hero__actions {gap:var(--ts-space-3) var(--ts-space-5);margin-top:var(--ts-space-7);} .ts-signature .ts-hero__edition {margin-top:var(--ts-space-8);} .ts-signature .ts-product-stage {grid-column:5/13;grid-row:3;padding-top:var(--ts-space-4);padding-bottom:0;} .ts-signature .ts-product-stage::before {inset:var(--ts-architecture-band-top) calc(-1 * var(--ts-page-margin)) calc(-1 * var(--ts-space-10)) calc(-1 * var(--ts-architecture-band-inset));} .ts-signature .ts-product-stage__frame {padding:var(--ts-signature-frame-shell);border-radius:var(--ts-radius-control);} .ts-signature .ts-product-stage__meta {min-height:var(--ts-space-7);z-index:var(--ts-signature-content-layer);} .ts-signature .ts-product-stage__meta > span:first-child {background:var(--ts-canvas);padding:var(--ts-space-1) var(--ts-space-3);margin-left:calc(-1 * var(--ts-space-3));} .ts-signature .ts-product-stage__caption {max-width:var(--ts-measure);} .ts-signature .ts-try-section {margin-top:var(--ts-space-6);} .ts-signature .ts-home-mechanism-intro {display:grid;grid-template-columns:var(--ts-signature-hero-columns);gap:var(--ts-space-6) var(--ts-space-9);padding-block:var(--ts-space-11) var(--ts-space-9);} .ts-signature .ts-home-mechanism-intro .ts-eyebrow {grid-column:1/-1;margin:0;} .ts-signature .ts-home-mechanism-intro .ts-h2 {grid-column:1;font-size:var(--ts-signature-section-title);line-height:var(--ts-signature-hero-leading);max-width:var(--ts-signature-section-measure);} .ts-signature .ts-home-mechanism-intro .ts-lead {grid-column:2;align-self:end;margin:0;max-width:var(--ts-signature-copy-measure);color:var(--ts-dark-muted);} .ts-signature .ts-home-mechanism-intro .ts-link {grid-column:2;justify-self:start;margin:0;} /* Static first: every narrative/source pair survives without JS or motion. */ .ts-signature .ts-path {min-height:0;} .ts-signature .ts-path__sticky {position:relative;top:auto;min-height:0;padding-block:var(--ts-space-5) var(--ts-space-8);} .ts-signature .ts-path__heading {border-top:var(--ts-border-dark);padding-top:var(--ts-space-3);} .ts-signature .ts-path__heading h2 {color:var(--ts-on-graphite);} .ts-signature .ts-path__steps {gap:var(--ts-space-5);} .ts-signature .ts-path__dot {margin-right:0;} .ts-signature .ts-path__navigation {margin-bottom:var(--ts-space-4);} .ts-signature .ts-path__select:disabled {cursor:default;} .ts-path__trade {display:flex;align-items:center;justify-content:space-between;gap:var(--ts-space-5);padding-block:var(--ts-space-3);border-bottom:var(--ts-border-dark);font-size:var(--ts-text-12);color:var(--ts-dark-muted);} .ts-path__trade-object {display:grid;grid-template-columns:var(--ts-signature-trade-columns);width:var(--ts-signature-trade-width);gap:var(--ts-space-5);align-items:baseline;color:var(--ts-on-graphite);font-size:var(--ts-text-14);} .ts-path__trade-demo {color:var(--ts-dark-muted);font-size:var(--ts-text-12);} .ts-signature .ts-path__stage {display:grid;grid-template-columns:var(--ts-signature-path-columns);align-items:center;column-gap:var(--ts-space-9);row-gap:var(--ts-space-10);padding-block:var(--ts-space-8);min-height:0;} .ts-path__story,.ts-path__device,.ts-path__screen {display:contents;} .ts-signature .ts-path .ts-path__frame {display:block;grid-column:1;position:relative;grid-area:auto;visibility:visible;opacity:1;pointer-events:auto;} .ts-signature .ts-path__frame:nth-child(1),.ts-path__capture:nth-child(1){grid-row:1;} .ts-signature .ts-path__frame:nth-child(2),.ts-path__capture:nth-child(2){grid-row:2;} .ts-signature .ts-path__frame:nth-child(3),.ts-path__capture:nth-child(3){grid-row:3;} .ts-signature .ts-path__frame:nth-child(4),.ts-path__capture:nth-child(4){grid-row:4;} .ts-signature .ts-path__frame:nth-child(5),.ts-path__capture:nth-child(5){grid-row:5;} .ts-path__capture {grid-column:2;justify-self:center;width:var(--ts-signature-phone-width);max-width:100%;position:relative;} .ts-path__capture picture {overflow:hidden;border:var(--ts-signature-phone-border);border-radius:var(--ts-signature-phone-radius);} .ts-path__capture img {width:100%;height:auto;} .ts-path__capture-label,.ts-path__device-label {display:flex;align-items:center;justify-content:space-between;gap:var(--ts-space-3);font-size:var(--ts-text-12);line-height:var(--ts-lh-12);margin-top:var(--ts-space-3);color:var(--ts-dark-muted);} .ts-path__device-label {display:none;} .ts-signature .ts-path__editorial {max-width:var(--ts-signature-story-measure);} .ts-signature .ts-path__editorial h3 {font-size:var(--ts-signature-path-type);line-height:var(--ts-signature-hero-leading);font-weight:var(--ts-signature-title-weight);margin-bottom:var(--ts-space-6);} .ts-signature .ts-path__stage-number {margin-bottom:var(--ts-space-5);} .ts-path__continuity {display:none;position:absolute;inset:0;max-width:none;width:100%;height:100%;stroke:var(--ts-dark-line);stroke-width:var(--ts-signature-architecture-stroke);opacity:var(--ts-signature-route-opacity);pointer-events:none;} .ts-signature .ts-path__bottom {margin-top:var(--ts-space-3);} .ts-path-proof {padding-block:var(--ts-space-10);border-top:var(--ts-border-dark);} .ts-path-proof__grid {display:grid;grid-template-columns:var(--ts-signature-proof-columns);gap:var(--ts-signature-proof-gap);align-items:start;} .ts-path-proof__grid .ts-h2 {font-size:var(--ts-signature-guard-type);line-height:var(--ts-signature-hero-leading);} .ts-path-proof__grid .ts-lead {margin-top:var(--ts-space-7);max-width:var(--ts-signature-story-measure);color:var(--ts-dark-muted);font-size:var(--ts-text-18);} .ts-path-proof__source {color:var(--ts-dark-muted);margin-block:var(--ts-space-6);font-size:var(--ts-text-12);} .ts-path-proof .ts-receipt {border-radius:var(--ts-radius-control);} .ts-path-proof .ts-receipt .ts-caption {display:none;} .ts-guard-stop {padding-block:var(--ts-space-10) var(--ts-space-11);border-top:var(--ts-border-dark);} .ts-guard-stop__heading {display:flex;align-items:center;justify-content:space-between;gap:var(--ts-space-5);margin-bottom:var(--ts-space-8);} .ts-guard-stop__heading .ts-eyebrow {margin:0;} .ts-guard-stop__grid {display:grid;grid-template-columns:var(--ts-signature-hero-columns);gap:var(--ts-space-9);align-items:center;} .ts-guard-stop__copy h3 {font-size:var(--ts-signature-guard-type);font-weight:var(--ts-signature-title-weight);line-height:var(--ts-signature-hero-leading);letter-spacing:var(--ts-signature-hero-tracking);} .ts-guard-stop__copy .ts-lead {font-size:var(--ts-text-18);color:var(--ts-dark-muted);max-width:var(--ts-signature-story-measure);margin-top:var(--ts-space-7);} .ts-guard-stop__mechanism {position:relative;min-height:var(--ts-signature-guard-stage);margin-block:var(--ts-space-8);} .ts-guard-stop__route {position:absolute;inset:0;width:100%;height:100%;max-width:none;stroke:var(--ts-dark-line);stroke-width:var(--ts-signature-architecture-stroke);} .ts-guard-stop__object {position:absolute;left:0;top:var(--ts-space-8);width:var(--ts-signature-guard-object);display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--ts-space-2);padding:var(--ts-space-3);background:var(--ts-graphite);border:var(--ts-border-dark);font-size:var(--ts-text-12);line-height:var(--ts-lh-12);} .ts-guard-stop__bar {position:absolute;left:var(--ts-signature-guard-bar-inset);top:var(--ts-space-4);height:var(--ts-signature-guard-bar-height);width:var(--ts-signature-guard-bar);background:var(--ts-dark-negative);} .ts-guard-stop__decision {position:absolute;left:var(--ts-signature-guard-stop-inset);top:var(--ts-space-8);font-size:var(--ts-text-12);line-height:var(--ts-lead-lh);color:var(--ts-dark-negative);} .ts-guard-stop__actions {display:flex;flex-wrap:wrap;align-items:center;gap:var(--ts-space-6);font-size:var(--ts-text-14);} .ts-guard-stop__replay {background:transparent;color:var(--ts-on-graphite);border:var(--ts-border-dark);font-size:var(--ts-text-14);} .ts-guard-stop__replay:focus-visible {outline-offset:var(--ts-signature-focus-offset);} .ts-guard-stop__replay:disabled {cursor:default;opacity:var(--ts-muted-opacity);} .ts-guard-stop__evidence {justify-self:center;max-width:100%;width:var(--ts-signature-guard-device);} .ts-guard-stop__device {border:var(--ts-signature-phone-border);border-radius:var(--ts-signature-phone-radius);overflow:hidden;} .ts-guard-stop__device img {width:100%;height:auto;} .ts-guard-stop__evidence figcaption {display:flex;justify-content:space-between;gap:var(--ts-space-3);font-size:var(--ts-text-12);line-height:var(--ts-lh-12);color:var(--ts-dark-muted);margin-top:var(--ts-space-3);} .ts-guard-stop__caption {color:var(--ts-dark-muted);font-size:var(--ts-text-12);border-top:var(--ts-border-dark);padding-top:var(--ts-space-5);margin-top:var(--ts-space-8);} html:not(.ts-js) .ts-guard-stop__replay {display:none;} @media(min-width:1024px) and (min-height:621px) { .ts-js .ts-signature .ts-path:not(.is-static) {min-height:var(--ts-path-pin-distance);} .ts-js .ts-signature .ts-path:not(.is-static) .ts-path__sticky {position:sticky;top:var(--ts-header-h);min-height:var(--ts-sticky-available);padding-block:var(--ts-space-3);} .ts-js .ts-signature .ts-path:not(.is-static) .ts-path__stage {min-height:var(--ts-signature-path-height);padding-block:var(--ts-space-2);} .ts-js .ts-signature .ts-path:not(.is-static) .ts-path__story {display:grid;grid-column:1;grid-row:1;position:relative;z-index:1;align-self:center;} .ts-js .ts-signature .ts-path:not(.is-static) .ts-path__frame {grid-area:1/1;visibility:hidden;opacity:0;pointer-events:none;} .ts-js .ts-signature .ts-path:not(.is-static) .ts-path__frame.is-active {visibility:visible;opacity:1;pointer-events:auto;} .ts-js .ts-signature .ts-path:not(.is-static) .ts-path__device {display:block;grid-column:2;grid-row:1;justify-self:center;position:relative;z-index:1;width:var(--ts-signature-phone-width);} .ts-js .ts-signature .ts-path:not(.is-static) .ts-path__screen {display:grid;aspect-ratio:var(--ts-frame-ratio-mini);border:var(--ts-signature-phone-border);border-radius:var(--ts-signature-phone-radius);overflow:hidden;position:relative;} .ts-js .ts-signature .ts-path:not(.is-static) .ts-path__capture {grid-area:1/1;position:absolute;inset:0;width:100%;max-width:none;visibility:hidden;opacity:0;} .ts-js .ts-signature .ts-path:not(.is-static) .ts-path__capture.is-active {visibility:visible;opacity:1;} .ts-js .ts-signature .ts-path:not(.is-static) .ts-path__capture picture {border:0;border-radius:0;overflow:visible;} .ts-js .ts-signature .ts-path:not(.is-static) .ts-path__capture-label {display:none;} .ts-js .ts-signature .ts-path:not(.is-static) .ts-path__device-label {display:flex;} .ts-js .ts-signature .ts-path:not(.is-static) .ts-path__continuity {display:block;} } @media(min-width:1024px) and (min-height:621px) and (max-height:879px) { .ts-js .ts-signature .ts-path:not(.is-static) .ts-path__sticky {padding-block:var(--ts-space-2);} .ts-js .ts-signature .ts-path:not(.is-static) .ts-path__sticky > .ts-container {position:relative;} .ts-js .ts-signature .ts-path:not(.is-static) .ts-path__heading {padding-block:0;border:0;} .ts-js .ts-signature .ts-path:not(.is-static) .ts-path__heading .ts-motion-toggle {display:none;} .ts-js .ts-signature .ts-path:not(.is-static) .ts-path__navigation {margin-bottom:0;} .ts-js .ts-signature .ts-path:not(.is-static) .ts-path__trade {position:absolute;left:0;bottom:var(--ts-signature-trade-bottom);width:var(--ts-signature-trade-compact-width);display:block;border:0;z-index:2;} .ts-js .ts-signature .ts-path:not(.is-static) .ts-path__trade-label {display:block;margin-bottom:var(--ts-space-2);} .ts-js .ts-signature .ts-path:not(.is-static) .ts-path__trade-object {width:100%;} .ts-js .ts-signature .ts-path:not(.is-static) .ts-path__stage {min-height:var(--ts-signature-path-short-height);padding-block:var(--ts-space-2);} .ts-js .ts-signature .ts-path:not(.is-static) .ts-path__device {width:var(--ts-signature-phone-short-width);} .ts-js .ts-signature .ts-path:not(.is-static) .ts-path__editorial h3 {font-size:var(--ts-signature-path-short-type);margin-bottom:var(--ts-space-5);} .ts-js .ts-signature .ts-path:not(.is-static) .ts-path__stage-number {margin-bottom:var(--ts-space-3);} .ts-js .ts-signature .ts-path:not(.is-static) .ts-path__bottom {margin-top:0;padding-top:var(--ts-space-2);} .ts-js .ts-signature .ts-path:not(.is-static) .ts-path__bottom-mark {display:none;} } @media(max-width:1023px) { .ts-signature .ts-hero .ts-h1 {grid-column:1/-1;grid-row:2;} .ts-hero-architecture {left:calc(-1 * var(--ts-page-margin));} .ts-signature .ts-hero__copy {grid-column:1/-1;grid-row:3;padding-right:0;} .ts-signature .ts-product-stage {grid-column:1/-1;grid-row:4;} .ts-signature .ts-product-stage::before {left:calc(-1 * var(--ts-space-5));} .ts-signature .ts-try-section__paths {grid-template-columns:minmax(0,1fr);} .ts-signature .ts-try+.ts-try {border-left:0;border-top:var(--ts-border-dark);} .ts-signature .ts-path .ts-path__stage {grid-template-columns:var(--ts-signature-path-columns);} .ts-signature .ts-path .ts-path__frame {grid-column:1;display:block;} .ts-signature .ts-path__editorial h3 {font-size:var(--ts-signature-guard-type);} .ts-signature .ts-home-mechanism-intro {column-gap:var(--ts-space-7);} .ts-guard-stop__grid {gap:var(--ts-space-7);} } @media(max-width:767px) { .ts-signature .ts-hero__grid {padding-bottom:var(--ts-space-9);} .ts-signature .ts-hero .ts-h1 {grid-column:1/-1;grid-row:2;} .ts-signature .ts-hero .ts-h1 br {display:none;} .ts-signature .ts-hero__copy {grid-column:1/-1;grid-row:3;padding:0;} .ts-signature .ts-hero__copy .ts-lead {font-size:var(--ts-text-18);} .ts-signature .ts-hero__edition {display:none;} .ts-signature .ts-product-stage {grid-column:1/-1;grid-row:4;padding-top:var(--ts-space-4);} .ts-signature .ts-product-stage::before {inset:var(--ts-architecture-band-top) calc(-1 * var(--ts-page-margin)) calc(-1 * var(--ts-space-9));} .ts-signature .ts-home-mechanism-intro {grid-template-columns:minmax(0,1fr);padding-block:var(--ts-space-9) var(--ts-space-8);gap:var(--ts-space-6);} .ts-signature .ts-home-mechanism-intro .ts-eyebrow,.ts-signature .ts-home-mechanism-intro .ts-h2,.ts-signature .ts-home-mechanism-intro .ts-lead,.ts-signature .ts-home-mechanism-intro .ts-link {grid-column:1;} .ts-signature .ts-home-mechanism-intro .ts-h2 {max-width:var(--ts-signature-section-measure);} .ts-signature .ts-path__steps {grid-template-columns:minmax(0,1fr);gap:0;} .ts-signature .ts-path__select {border-bottom:var(--ts-border-dark);justify-content:space-between;} .ts-signature .ts-path__index {margin-right:auto;} .ts-signature .ts-path__dot {margin-left:var(--ts-space-5);} .ts-path__trade {display:block;} .ts-path__trade-label {display:block;margin-bottom:var(--ts-space-3);} .ts-path__trade-object {width:100%;} .ts-signature .ts-path .ts-path__stage {grid-template-columns:minmax(0,1fr);gap:var(--ts-space-7);padding-block:var(--ts-space-8);} .ts-signature .ts-path .ts-path__frame {grid-column:1;margin-top:var(--ts-space-8);} .ts-signature .ts-path .ts-path__frame:first-child {margin-top:0;} .ts-path__capture {grid-column:1;} .ts-signature .ts-path__frame:nth-child(1){grid-row:1;}.ts-path__capture:nth-child(1){grid-row:2;} .ts-signature .ts-path__frame:nth-child(2){grid-row:3;}.ts-path__capture:nth-child(2){grid-row:4;} .ts-signature .ts-path__frame:nth-child(3){grid-row:5;}.ts-path__capture:nth-child(3){grid-row:6;} .ts-signature .ts-path__frame:nth-child(4){grid-row:7;}.ts-path__capture:nth-child(4){grid-row:8;} .ts-signature .ts-path__frame:nth-child(5){grid-row:9;}.ts-path__capture:nth-child(5){grid-row:10;} .ts-signature .ts-path__editorial h3 {font-size:var(--ts-signature-path-type);} .ts-signature .ts-path__bottom {align-items:flex-start;gap:var(--ts-space-5);} .ts-path-proof,.ts-guard-stop {padding-block:var(--ts-space-9);} .ts-path-proof__grid {grid-template-columns:minmax(0,1fr);} .ts-path-proof__grid .ts-h2 {font-size:var(--ts-signature-guard-type);} .ts-guard-stop__grid {grid-template-columns:minmax(0,1fr);gap:var(--ts-space-8);} .ts-guard-stop__mechanism {margin-block:var(--ts-space-7);} .ts-guard-stop__actions {gap:var(--ts-space-5);} .ts-guard-stop__heading {margin-bottom:var(--ts-space-7);} .ts-guard-stop__copy h3 {font-size:var(--ts-signature-guard-type);} .ts-guard-stop__caption {margin-top:var(--ts-space-7);} } } /* ---- experience.css */ /* Interactive architecture and static editorial details. Motion lives in motion.js. */ @layer components { .ts-network{display:grid;grid-template-columns:var(--ts-network-columns);gap:var(--ts-editorial-gap);align-items:center;border-top:var(--ts-border);border-bottom:var(--ts-border);padding-block:var(--ts-space-7)} .ts-network__map{position:relative;aspect-ratio:var(--ts-network-ratio);min-width:0} .ts-network__svg{position:absolute;inset:0;inline-size:100%;block-size:100%;overflow:visible;pointer-events:none} .ts-network__base,.ts-network__spine,.ts-network__trace{fill:none;stroke:var(--ts-architecture-line);stroke-width:var(--ts-network-rule);vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round} .ts-network__trace{stroke:var(--ts-ink);stroke-width:var(--ts-network-trace);opacity:0} .ts-network__route.is-active .ts-network__trace{opacity:1} .ts-network__choice,.ts-network__node{position:absolute;display:flex;align-items:center;justify-content:center;min-height:var(--ts-control-h);padding:var(--ts-space-2) var(--ts-network-choice-padding);transform:translate(var(--ts-network-node-shift),var(--ts-network-node-shift));border:var(--ts-border);border-radius:var(--ts-network-radius);background:var(--ts-canvas);font-size:var(--ts-network-type);line-height:var(--ts-lead-lh);font-weight:var(--ts-network-weight);text-decoration:none} .ts-network__choice{left:var(--ts-network-choice-left);width:var(--ts-network-choice-width);justify-content:flex-start;gap:var(--ts-space-3);text-align:left} .ts-network__choice--limits{top:var(--ts-network-limits-top)} .ts-network__choice--guard{top:var(--ts-network-guard-top)} .ts-network__choice--simulation{top:var(--ts-network-simulation-top)} .ts-network__choice--ledger{top:var(--ts-network-ledger-top)} .ts-network__choice--receipt{left:var(--ts-network-node-left);top:var(--ts-network-receipt-top)} .ts-network__node{left:var(--ts-network-node-left);width:var(--ts-network-node-width);font-size:var(--ts-network-label-type)} .ts-network__node--signature{top:var(--ts-network-guard-top)} .ts-network__node--trade{top:var(--ts-network-ledger-top)} .ts-network__choice.is-active,.ts-network__node.is-active{border-color:var(--ts-ink);background:var(--ts-surface)} .ts-network__index{font-variant-numeric:var(--ts-numeric);font-size:var(--ts-text-12);color:var(--ts-muted)} .ts-network__indicator{flex-shrink:0;width:var(--ts-dot);height:var(--ts-dot);border-radius:var(--ts-radius-pill);margin-left:auto;background:var(--ts-line)} .ts-network__choice.is-active .ts-network__indicator{background:var(--ts-lime);outline:var(--ts-network-rule) solid var(--ts-ink)} .ts-network__details{min-width:0;max-width:var(--ts-network-detail-measure);padding-block:var(--ts-network-grid-inset);min-height:var(--ts-network-detail-min)} .ts-network__instruction{font-size:var(--ts-text-12);line-height:var(--ts-lh-12);color:var(--ts-muted);margin-bottom:var(--ts-space-7)} .ts-network__panel[hidden]{display:none} .ts-network__panel+.ts-network__panel{margin-top:var(--ts-space-8)} .ts-network.is-enhanced .ts-network__panel{margin-top:0} .ts-network__relation{font-size:var(--ts-text-14);line-height:var(--ts-lh-14);color:var(--ts-muted);margin-bottom:var(--ts-space-4)} .ts-network__panel .ts-chip{margin-block:var(--ts-space-4) var(--ts-space-6)} .ts-network__panel .ts-link{display:inline-flex;gap:var(--ts-space-4);align-items:center;min-height:var(--ts-control-h);margin-top:var(--ts-space-6)} .ts-network__legend{font-size:var(--ts-text-12);color:var(--ts-muted);margin-block:var(--ts-space-5) var(--ts-space-3)} .ts-story-grid{display:grid;grid-template-columns:var(--ts-story-columns);gap:var(--ts-story-row-gap);min-width:0} .ts-story-card{display:grid;grid-template-columns:var(--ts-story-row-columns);align-items:stretch;min-width:0;width:100%;border:var(--ts-border);border-radius:var(--ts-radius-panel);background:var(--ts-surface)} .ts-story-card__body{grid-column:1;grid-row:1;display:flex;flex-direction:column;min-width:0;padding:var(--ts-story-card-padding)} .ts-story-card__image{grid-column:2;grid-row:1;display:flex;align-items:center;min-width:0;padding:var(--ts-story-image-padding);border-inline-start:var(--ts-border);border-start-end-radius:var(--ts-radius-panel);border-end-end-radius:var(--ts-radius-panel);background:var(--ts-inset)} .ts-story-card__image picture{display:block;width:100%;min-width:0;border:var(--ts-border);background:var(--ts-surface)} .ts-story-card__image img{display:block;width:100%;max-width:100%;height:auto;object-fit:contain} .ts-story-card__body .ts-eyebrow{font-size:var(--ts-text-12);margin-bottom:var(--ts-space-7)} .ts-story-card__body .ts-h3{font-size:var(--ts-story-card-title);line-height:var(--ts-h2-lh);letter-spacing:var(--ts-tracking-tight);margin-bottom:var(--ts-space-5);overflow-wrap:normal} .ts-story-card__body .ts-copy{max-width:var(--ts-story-copy-measure);font-size:var(--ts-story-card-copy);line-height:var(--ts-lead-lh);margin-bottom:var(--ts-space-8)} .ts-story-card__meta{margin-top:auto;color:var(--ts-muted);font-size:var(--ts-text-12);line-height:var(--ts-lh-12);padding-bottom:var(--ts-space-5)} .ts-story-card__open{display:flex;justify-content:space-between;align-items:center;gap:var(--ts-space-6);border-top:var(--ts-border);padding-top:var(--ts-space-4);min-height:var(--ts-control-h);font-size:var(--ts-text-14);text-decoration:none} .ts-story-card__arrow{font-size:var(--ts-text-18)} .ts-detail-showcase{display:grid;gap:var(--ts-space-8)} .ts-detail-showcase>.ts-feature-list{grid-template-columns:var(--ts-story-doc-columns);gap:var(--ts-space-7);align-items:start} .ts-detail{width:min(var(--ts-detail-width),calc(100% - var(--ts-space-7)));max-width:none;max-height:none;margin:auto;padding:0;border:0;border-radius:var(--ts-radius-panel);color:var(--ts-ink);background:transparent;box-shadow:none;overflow:visible} .ts-detail:not([open]){display:none} .ts-detail::backdrop{background:var(--ts-detail-backdrop)} .ts-detail__visual{max-height:var(--ts-detail-max-height);overflow:auto;overscroll-behavior:contain;background:var(--ts-canvas);border-radius:inherit;box-shadow:var(--ts-detail-shadow);transform-origin:center} .ts-detail__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--ts-detail-close-gap);padding:var(--ts-space-5) var(--ts-detail-padding);border-bottom:var(--ts-border)} .ts-detail__bar .ts-eyebrow{margin:0;font-size:var(--ts-text-12)} .ts-detail__close{display:inline-flex;align-items:center;justify-content:space-between;gap:var(--ts-space-5);min-height:var(--ts-control-h-sm);padding:var(--ts-space-2) var(--ts-space-3);border:var(--ts-border);border-radius:var(--ts-radius-control);background:var(--ts-surface);font-size:var(--ts-text-14)} .ts-detail__copy{padding:var(--ts-space-8) var(--ts-detail-padding);max-width:calc(var(--ts-detail-copy-measure) + var(--ts-detail-padding) * 2)} .ts-detail__copy .ts-h2{max-width:var(--ts-detail-title-measure)} .ts-detail__copy .ts-chip{margin-top:var(--ts-space-5)} .ts-detail__copy .ts-lead{margin-top:var(--ts-space-6)} .ts-detail__figure{padding-inline:var(--ts-detail-padding)} .ts-detail__figure picture{overflow:clip;border:var(--ts-border);border-radius:var(--ts-radius-control)} .ts-detail__figure img{width:100%;height:auto} .ts-detail__note{padding:var(--ts-space-7) var(--ts-detail-padding) var(--ts-space-8)} .is-detail-open{overflow:hidden} @media(hover:hover) and (pointer:fine){ .ts-network__choice:hover{border-color:var(--ts-ink)} .ts-story-card:has(.ts-story-card__open:hover){border-color:var(--ts-ink)} .ts-detail__close:hover{background:var(--ts-inset);border-color:var(--ts-ink)} } @media(max-width:1023px){ .ts-network{gap:var(--ts-space-7)} .ts-network__details{border-top:var(--ts-border);padding-top:var(--ts-space-7);max-width:none} .ts-network__panel .ts-copy{max-width:var(--ts-network-detail-measure)} } @media(max-width:767px){ .ts-network__index{display:none} .ts-network__choice{gap:var(--ts-space-2);min-height:var(--ts-control-h-sm)} .ts-network__node{min-height:var(--ts-control-h-sm);padding-inline:var(--ts-space-1)} .ts-network__instruction{margin-bottom:var(--ts-space-5)} .ts-network__panel .ts-link{margin-top:var(--ts-space-4)} .ts-story-card__body{grid-column:1;grid-row:1} .ts-story-card__image{grid-column:1;grid-row:2;border-inline-start:0;border-top:var(--ts-border);border-start-end-radius:0;border-end-start-radius:var(--ts-radius-panel)} .ts-story-card__body .ts-eyebrow{margin-bottom:var(--ts-space-5)} .ts-story-card__body .ts-copy{margin-bottom:var(--ts-space-7)} .ts-detail__copy{padding-block:var(--ts-space-7)} } } @layer sections { .ts-architecture .ts-section-header{margin-bottom:var(--ts-space-7)} /* Dedicated section name: .ts-evidence belongs to the Path phone wrapper. */ .ts-editorial-stories{background:var(--ts-canvas)} } /* Academy: supplied product screens, with full-resolution accessible details. */ @layer sections { .ts-academy-hero .ts-button{margin-top:var(--ts-space-7)} .ts-academy-preview{padding-block:var(--ts-academy-preview-inset) var(--ts-space-10)} .ts-academy-preview__heading{margin-bottom:var(--ts-space-8)} .ts-academy-preview__heading .ts-eyebrow{margin-bottom:var(--ts-space-5)} .ts-academy-preview__heading .ts-h2{max-width:var(--ts-academy-title-measure)} .ts-academy-gallery{display:grid;grid-template-columns:var(--ts-academy-gallery-columns);gap:var(--ts-academy-gallery-gap);margin-top:var(--ts-academy-gallery-gap)} } @layer components { .ts-academy-screen{min-width:0;scroll-margin-top:calc(var(--ts-header-h) + var(--ts-space-6))} .ts-academy-screen__heading{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--ts-space-3) var(--ts-space-6);padding-block:var(--ts-space-5);border-top:var(--ts-border)} .ts-academy-screen__heading .ts-eyebrow{margin:0;font-size:var(--ts-text-12)} .ts-academy-screen__heading .ts-h3{font-size:var(--ts-academy-screen-title);line-height:var(--ts-h3-lh)} .ts-academy-screen__figure{padding:var(--ts-academy-screen-inset);border:var(--ts-border);border-radius:var(--ts-radius-panel);background:var(--ts-inset)} .ts-academy-screen__figure picture{display:block;overflow:clip;border:var(--ts-border);border-radius:var(--ts-radius-control);background:var(--ts-surface)} .ts-academy-screen__figure img{display:block;width:100%;height:auto;object-fit:contain} .ts-academy-screen__footer,.ts-academy-detail__footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--ts-space-3) var(--ts-space-5)} .ts-academy-screen__footer{padding-block:var(--ts-space-3)} .ts-academy-screen__footer .ts-caption,.ts-academy-detail__footer .ts-caption{margin:0} .ts-academy-screen__open{display:inline-flex;align-items:center;gap:var(--ts-space-6);min-height:var(--ts-control-h-sm);font-size:var(--ts-text-14);text-decoration:none} .ts-academy-screen__open span:last-child{font-size:var(--ts-text-18)} .ts-academy-detail{width:min(var(--ts-academy-detail-width),calc(100% - var(--ts-space-7)))} .ts-academy-detail__figure{padding:var(--ts-academy-detail-inset) var(--ts-academy-detail-inset) 0} .ts-academy-detail__figure picture{display:block;overflow:clip;border:var(--ts-border);border-radius:var(--ts-radius-control)} .ts-academy-detail__figure img{display:block;width:100%;height:auto;object-fit:contain} .ts-academy-detail__footer{padding:var(--ts-space-4) var(--ts-academy-detail-inset) var(--ts-academy-detail-inset)} .ts-academy-detail__footer .ts-link{display:inline-flex;align-items:center;gap:var(--ts-space-4);min-height:var(--ts-control-h-sm);font-size:var(--ts-text-14)} @media(hover:hover) and (pointer:fine){.ts-academy-screen__open:hover{text-decoration:underline;text-underline-offset:var(--ts-space-1)}} } /* ---- motion-signature.css */ /* Native animation owns only editorial layers, never mounted product ancestry. */ @layer utilities { .ts-js [data-ts-reveal], .ts-js [data-ts-reveal] .ts-line__inner { transition:none; } .ts-js [data-ts-reveal="trace"]::after { transition:none; } .ts-js [data-ts-hero-eyes] { transform-origin:center; } [data-ts-guard-bar] { transform-origin:center; } [data-ts-guard-object] { transform:translateX(var(--ts-signature-guard-object-end)); } [data-ts-detail-visual] { transform-origin:0 0; } [data-ts-trade-object], [data-ts-path-image], [data-ts-frame-copy] { backface-visibility:hidden; } [data-ts-route-mask] { transform-box:fill-box; transform-origin:0 50%; } .ts-js :is(.ts-button,.ts-try,.ts-tab,[data-ts-stage-select],[data-ts-route-select],[data-ts-detail-open]) { transition-property:opacity,clip-path; } .ts-js :is(.ts-button,.ts-try,.ts-tab):active { transform:none; } .ts-js .ts-page-title { view-transition-name:none; } html:has([data-ts-slot].is-live) .ts-header { view-transition-name:none; } html[data-ts-page-transition="editorial"]::view-transition-old(root) { animation-name:ts-editorial-exit; animation-duration:var(--ts-dur-4); } html[data-ts-page-transition="editorial"]::view-transition-new(root) { animation-name:ts-editorial-enter; animation-duration:var(--ts-dur-5); } ::view-transition-group(ts-mechanism) { animation:none; } ::view-transition-old(ts-mechanism),::view-transition-new(ts-mechanism) { transform-origin:0 0; animation-duration:var(--ts-motion-detail-duration); animation-timing-function:var(--ts-ease-drawer); } ::view-transition-old(ts-mechanism) { animation-name:ts-mechanism-exit; } ::view-transition-new(ts-mechanism) { animation-name:ts-mechanism-enter; } ::view-transition-old(ts-mechanism),::view-transition-new(ts-mechanism) { height:100%;mix-blend-mode:normal; } ::view-transition-old(ts-header),::view-transition-new(ts-header) { animation:none; } @keyframes ts-mechanism-enter { from { opacity:0;transform:translate(var(--ts-shared-x,0px),var(--ts-shared-y,0px)) scale(var(--ts-shared-scale-x,1),var(--ts-shared-scale-y,1)); } to { opacity:1;transform:translate(0,0) scale(1); } } @keyframes ts-mechanism-exit { from { opacity:1;transform:translate(var(--ts-shared-x,0px),var(--ts-shared-y,0px)) scale(var(--ts-shared-scale-x,1),var(--ts-shared-scale-y,1)); } to { opacity:0;transform:translate(0,0) scale(1); } } @keyframes ts-editorial-exit { to { opacity:0;transform:translateY(calc(-1 * var(--ts-motion-page-shift))); } } @keyframes ts-editorial-enter { from { opacity:0;transform:translateY(var(--ts-motion-page-shift)); } } } @media(prefers-reduced-motion:reduce) { [data-ts-trade-object],[data-ts-guard-bar],[data-ts-detail-visual],[data-ts-hero-eyes] { transform:none !important; } } html[data-ts-motion="reduced"] :is([data-ts-trade-object],[data-ts-guard-bar],[data-ts-detail-visual],[data-ts-hero-eyes]) { transform:none !important; }