/* ==========================================================================
   Life OS — веб-интерфейс
   Изящный минимализм, симметрия, системные шрифты, умная адаптация.

   Cascade: reset → tokens → layout → components → routes → overrides.
   Container queries (`adaptive-surface`) и fluid tokens — основной responsive-слой;
   viewport media queries остаются только для shell/safe-area и coarse-pointer.
   ========================================================================== */

@layer lifeos.reset, lifeos.tokens, lifeos.layout, lifeos.components, lifeos.routes, lifeos.overrides;

@layer lifeos.tokens {
  :root {
    color-scheme: dark;

    --page: #000;
    --surface-canvas: var(--page);
    --mask-ink: #000;
    --viewport-small-height: 100vh;
    --home-viewport-height: var(--viewport-small-height);
    --browse-viewport-height: var(--home-viewport-height);
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
    --safe-area-zero: 0px;
    --fluid-inline: 1vw;
    --fluid-block: 1svh;
    --fluid-min: 1vmin;
    --fluid-max: 1vmax;
    --fluid-container-inline: var(--fluid-inline);
    --fluid-container-block: var(--fluid-block);
    --fluid-container-min: var(--fluid-min);
    --fluid-container-max: var(--fluid-max);
    --cqi-unit: 1%;
    --container-cqw: 100%;
    --container-cqi: 100%;
    --container-cqb: 100%;
    --container-cqmin: min(var(--container-cqi), var(--container-cqb));
    --container-cqmax: max(var(--container-cqi), var(--container-cqb));
    --container-cqi-compact: 32%;
    --container-cqi-control: 38%;
    --container-cqi-popover: 52%;
    --container-cqi-media-wide: 54%;
    --container-cqi-readable-compact: 68%;
    --container-cqi-readable-narrow: 68.8%;
    --container-cqi-media: 72%;
    --container-cqi-action-wide: 78%;
    --container-cqi-media-compact: 82%;
    --container-cqi-visual-small: 24%;
    --container-safe-inline: calc(var(--container-cqw) - var(--shell-gutter) * var(--scale-double));
    --container-stage-safe-inline: calc(
      var(--container-cqw) - var(--stage-inline-gutter) * var(--scale-double)
    );
    --container-space-safe-inline: calc(
      var(--container-cqw) - var(--space-4) * var(--scale-double)
    );
    --container-query-safe-inline: calc(
      var(--container-cqi) - var(--shell-gutter) * var(--scale-double)
    );
    --container-query-space-safe-inline: calc(
      var(--container-cqi) - var(--space-4) * var(--scale-double)
    );
    --container-safe-block: max(
      0px,
      calc(var(--container-cqb) - var(--safe-area-top) - var(--safe-area-bottom))
    );
    --adaptive-fluid-inline: calc(var(--fluid-container-inline) * var(--scale-hit));
    --adaptive-fluid-block: calc(var(--fluid-container-block) * var(--scale-loose));
    --adaptive-fluid-min: min(var(--adaptive-fluid-inline), var(--adaptive-fluid-block));

    /* shared numeric scales */
    --scale-micro: 0.35;
    --scale-compact: 0.42;
    --scale-dense: 0.45;
    --scale-chip: 0.52;
    --scale-tight: 0.55;
    --scale-snug: 0.65;
    --scale-roomy: 0.72;
    --scale-comfort: 0.75;
    --scale-soft: 0.82;
    --scale-meta: 0.86;
    --scale-spacious: 0.9;
    --scale-copy-subtle: 0.8;
    --scale-control-subtle: 0.75;
    --scale-emphasis: 0.95;
    --scale-button-block: 0.85;
    --scale-button-delete: 0.72;
    --scale-bubble-block: 0.95;
    --scale-bubble-inline: 1.15;
    --scale-bubble-bottom: 0.72;
    --scale-composer-block: 0.75;
    --scale-composer-textarea-block: 0.92;
    --scale-composer-textarea-inline: 0.45;
    --scale-minimal: 0.3;
    --scale-half: 0.5;
    --scale-fine: 0.25;
    --scale-stack-micro: 0.32;
    --scale-control-gap: 0.76;
    --scale-meta-loose: 0.85;
    --scale-hit: 0.78;
    --scale-side: 0.6;
    --scale-thread: 1.55;
    --scale-edit-block: 2.2;
    --scale-inset-inline: 0.62;
    --scale-row: 0.7;
    --scale-loose: 1.05;
    --scale-profile-form: 0.7;
    --scale-caption-inset: 0.65;
    --scale-caption-trail: 0.88;
    --scale-detail-compact: 0.94;
    --scale-minor: 0.12;
    --scale-micro-gap: 0.18;
    --scale-inset-edge: 0.4;
    --scale-action-compact: 0.74;
    --scale-action-block: 0.88;
    --scale-split-rail: 4;
    --scale-double: 2;
    --scale-action-stack: 4;
    --scale-offer-headline: 2.1;
    --scale-group-offer-top-copy-lift: -1.5;
    --scale-accordion-body: 1.078;
    --scale-prominent-control: 1.3;
    --scale-login-field: 1.15;
    --scale-offer-button-inline: 1.4;
    --scale-meta-loosen: 1.15;
    --scale-ribbon-gap: 0.22;
    --scale-media-chrome-inset: 0.24;
    --scale-interactive-compact: 0.58;
    --scale-type-control-fluid: 0.56;
    --scale-type-detail-fluid: 0.58;
    --scale-emphasis-lg: 1.35;
    --scale-hit-lg: 1.45;
    --scale-inset-loose: 1.25;
    --scale-photo-max: 1.88;
    --scale-photo-min-compact: 1.22;
    --scale-photo-max-compact: 1.62;
    --scale-composer-inline-wide: 1.5;
    --scale-action-hit-max: 2.75;
    --scale-bubble-rail: 5;
    --scale-bubble-rail-compact: 3.2;
    --scale-meta-tight: 1.1;
    --scale-dialog-inline: 1.2;
    --scale-login-display: 1.92;
    --scale-fluid-inline-boost: 1.18;
    --scale-fluid-container-block: 1.42;
    --scale-button-font-multiplier: 1.12;
    --scale-button-font-multiplier-landscape: 1.08;
    --scale-layout-stack: 3.2;
    --scale-layout-stack-tight: 1.8;
    --scale-layout-section: 3.1;
    --scale-layout-hero: 8;
    --scale-accordion-row: 2.05;
    --scale-accordion-body-gap: 2.4;
    --scale-accordion-body-pad: 2.7;
    --scale-sheet-section: 2.45;
    --scale-adaptive-pad: 2.35;
    --scale-offer-faq: 2.8;
    --scale-offer-faq-current: 1.9;
    --scale-offer-summary: 2.3;
    --scale-offer-scroll-compact: 4.8;
    --scale-gift-zone: 10;
    --scale-panel-fluid: 5;
    --scale-surface-fluid: 6;
    --scale-route-fluid-end: 9;
    --scale-route-fluid-row: 4;
    --scale-route-fluid-end-compact: 2.5;
    --scale-profile-column: 5;
    --scale-profile-tag-inline: 12;
    --scale-profile-confirm-inline: 14;
    --scale-profile-divider: 11;
    --scale-choice-options: 1.92;
    --scale-choice-wide: 1.68;
    --scale-choice-card-pad: 3.12;
    --scale-choice-card-inline: 1.44;
    --scale-action-gap: 1.6;
    --scale-form-offset: 2.1;
    --scale-messages-fluid: 2;
    --scale-messages-item: 2.3;
    --scale-messages-feed-compact: 1.85;
    --scale-sheet-inline: 7;
    --scale-shell-gutter-fluid: 4;
    --scale-back-zone: 13;
    --scale-back-zone-min: 12;
    --scale-back-zone-landscape: 14;
    --scale-back-control: 7;
    --scale-back-control-landscape: 6;
    --scale-back-arrow: 3;
    --scale-watch-fluid: 72;
    --scale-offer-block-tall: 42;
    --scale-offer-block-max: 70;
    --scale-offer-control-tall: 4.25;
    --scale-profile-actions: 18;
    --scale-messages-composer-stack: 2.2;
    --scale-fluid-block-62: 62;
    --scale-fluid-block-52: 52;
    --scale-fluid-block-18: 18;
    --scale-fluid-block-14: 14;
    --scale-type-fluid-sm: 2.4;
    --scale-type-fluid-md: 3;
    --scale-type-fluid-lg: 4;
    --scale-type-fluid-xl: 4.6;
    --scale-type-fluid-display: 5;
    --scale-type-fluid-hero: 9;
    --scale-type-fluid-hero-tight: 5.2;
    --scale-type-gift-fluid: 5.75;
    --scale-type-caption-boost: 1.21;
    --scale-chip-gap-fluid: 1.72;
    --scale-unity: 1;
    --scale-media-envelope-square: 0.84;
    --scale-feed-caption-inline-cqi: 1.55;
    --scale-feed-caption-inline-compact-cqi: 1.7;
    --scale-feed-stack-gap-compact-cqi: 1.28;
    --scale-gift-greeting-cap-cqi: 6;
    --scale-gift-greeting-fit-cqi: 5.8;
    --scale-profile-goals-stage: 18.8;
    --scale-profile-goals-stage-compact: 15.6;
    --scale-profile-stack-divider: 11.4;
    --scale-profile-stack-divider-wide: 10.5;
    --scale-profile-stack-divider-gap: 9.5;
    --scale-profile-stack-divider-tight: 8.4;
    --scale-login-grid-column: 7.2;
    --scale-profile-loading-min: 6.8;
    --scale-profile-loading-max: 6.5;
    --scale-profile-loading-mid: 6.4;
    --scale-offer-viewport-reserve: 5.6;
    --scale-offer-panel-pad: 4.5;
    --scale-type-fluid-display-wide: 4.32;
    --scale-type-fluid-display-tight: 4.2;
    --scale-type-fluid-md-loose: 3.7;
    --scale-profile-header-pad: 3.6;
    --scale-type-fluid-md-wide: 3.5;
    --scale-type-fluid-md-tight: 3.4;
    --scale-login-grid-max: 2.65;
    --scale-offer-margin-top: 2.6;
    --scale-type-fluid-lg-tight: 2.025;
    --scale-type-fluid-lg-mid: 1.98;
    --scale-type-fluid-md-mid: 1.84;
    --scale-type-fluid-sm-loose: 1.75;
    --scale-type-fluid-hero-loose: 4.7;
    --scale-type-fluid-hero-wide: 22;
    --scale-type-fluid-hero-wide-tight: 21;
    --scale-login-missing-denom: 16;
    --scale-layout-strip-reserve-gift: 4.35;
    --scale-layout-strip-reserve-messages: 4.75;
    --radius-circle: 50%;

    --text: rgba(255, 255, 255, 0.96);
    --text-strong: rgba(255, 255, 255, 1);
    --text-soft: rgba(255, 255, 255, 0.78);
    --text-muted: rgba(255, 255, 255, 0.52);
    --text-faint: rgba(255, 255, 255, 0.34);

    --accent: rgb(245, 229, 204);
    --accent-ink: rgba(0, 0, 0, 0.84);
    --goal-accent: #bd4d76;
    --feedback-error-color: #e46c5d;
    --status-error-text-size: calc(var(--form-card-meta-size) * var(--scale-copy-subtle));
    --surface-soft: rgba(255, 255, 255, 0.035);

    --hairline: rgba(255, 255, 255, 0.08);
    --hairline-strong: rgba(255, 255, 255, 0.26);

    --line-width-hair: 1px;
    --line-width-thin: 0.5px;
    --divider-width: var(--line-width-hair);
    --divider-width-double: calc(var(--divider-width) * var(--scale-double));
    --divider-offset: calc(var(--divider-width) * -0.5);
    --decoration-line-width: var(--line-width-hair);
    --text-decoration-line-width: var(--line-width-hair);
    --visually-hidden-size: var(--line-width-hair);
    --visually-hidden-offset: calc(var(--visually-hidden-size) * -1);
    --radius-none: 0;
    --focus-ring-width: 2px;
    --focus-ring-offset: 3px;
    --focus-ring-offset-loose: 4px;
    --press-shift: 1px;
    --dialog-safe-gap: var(--space-3);
    --overlay-full-inset: 0;
    --overlay-full-inline: 100%;
    --overlay-full-block: 100dvh;
    --overlay-panel-radius: var(--radius-md);
    --overlay-fullscreen-radius: var(--radius-none);
    --overlay-scrollbar-size: 0;
    --overlay-border-width: var(--divider-width);
    --overlay-border: var(--overlay-border-width) solid var(--hairline);
    --overlay-header-padding-block-start: max(var(--safe-area-top), var(--space-4));
    --overlay-content-padding-block-end: calc(var(--space-5) + var(--safe-area-bottom));
    --sheet-full-inset: var(--overlay-full-inset);
    --sheet-full-inline: var(--overlay-full-inline);
    --sheet-block-size: var(--plus-route-height);
    --sheet-safe-area-bottom: var(--safe-area-bottom);
    --sheet-scroll-padding-bottom: calc(var(--sheet-safe-area-bottom) + var(--back-control-size));
    --shadow-dialog: 0 1rem 3rem rgba(0, 0, 0, 0.32);
    --shadow-floating-notice: 0 18px 50px rgba(0, 0, 0, 0.28);
    --shadow-legal-notice: 0 1px 5px rgba(0, 0, 0, 0.45);
    --shadow-stage-copy: 0 1px 18px rgba(0, 0, 0, 0.32);
    --shadow-stage-copy-soft: 0 1px 18px rgba(0, 0, 0, 0.35);
    --shadow-stage-copy-medium: 0 1px 18px rgba(0, 0, 0, 0.36);
    --shadow-stage-copy-firm: 0 1px 18px rgba(0, 0, 0, 0.42);
    --shadow-stage-copy-strong: 0 1px 18px rgba(0, 0, 0, 0.44);
    --shadow-stage-meta: 0 1px 12px rgba(0, 0, 0, 0.52);
    --shadow-gift-template-note: 0 1px 14px rgba(0, 0, 0, 0.34);
    --shadow-gift-template-arrow: drop-shadow(0 1px 7px rgba(0, 0, 0, 0.34));
    --shadow-gift-template-dot: 0 1px 12px rgba(0, 0, 0, 0.24);
    --shadow-browser-autofill-clear: 0 0 0 1000px transparent inset;
    --shadow-shimmer-ring: inset 0 0 0 var(--line-width-thin) rgba(255, 255, 255, 0.12);
    --shadow-control-selected-ring: inset 0 0 0 var(--divider-width) rgba(255, 255, 255, 0.5);
    --shadow-control-focus-soft: 0 0 0 0.18rem rgba(255, 255, 255, 0.24);
    --shadow-segment-focus: 0 0 0 2px rgba(232, 225, 204, 0.45);
    --shadow-telegram-banner-ring: 0 0 0 var(--divider-width) rgba(42, 171, 238, 0.12);

    --ornament-gap-xs: 0.06em;
    --ornament-gap-sm: 0.1em;
    --ornament-gap-md: 0.18em;
    --ornament-gap-lg: 0.32em;
    --ornament-gap-legal: 0.36em;
    --ornament-offset-xs: 0.25em;
    --text-underline-offset-tight: 0.12em;
    --text-underline-offset-sm: 0.18em;
    --text-underline-offset-md: 0.22em;
    --text-underline-offset-lg: 0.24em;
    --text-underline-offset-link: 0.4em;
    --text-stroke-heading: 0.045em currentColor;
    --text-inline-baseline-lift: -0.12em;
    --line-height-adaptive-copy: calc(1em + var(--adaptive-base-gap));
    --line-height-adaptive-copy-comfort: calc(
      1em + var(--adaptive-base-gap) * var(--scale-comfort)
    );
    --motion-text-shimmer-duration: 3s;
    --motion-spokes-duration: 0.8s;
    --motion-grid-panel-duration: 260ms;
    --motion-grid-panel-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --motion-emphasis-duration: 560ms;
    --motion-emphasis-ease: cubic-bezier(0.18, 1.18, 0.22, 1);
    --motion-media-loader-out-duration: 600ms;
    --motion-media-reveal-duration: 480ms;
    --motion-media-reduced-duration: 1ms;
    --motion-delay-none: 0ms;
    --motion-shimmer-wave-rest-transform: translateY(0) rotate(0deg);
    --motion-shimmer-wave-crest-transform: translateY(-0.08em) rotate(-1.4deg);
    --motion-shimmer-wave-tail-transform: translateY(0.02em) rotate(0.8deg);
    --motion-reduced-duration: 0.01ms;
    --motion-autofill-duration: 999999s;
    --layout-bottom-safe-offset: max(var(--shell-gutter), var(--safe-area-bottom));
    --layout-autofill-transition:
      background-color var(--motion-autofill-duration) ease-out,
      color var(--motion-autofill-duration) ease-out;
    --form-autofill-transition:
      background-color var(--motion-autofill-duration) ease-out, border-color var(--dur) var(--ease);

    --layout-base-gap: clamp(
      0.36rem,
      min(
        calc(var(--fluid-inline) * var(--scale-fluid-inline-boost)),
        calc(var(--fluid-block) * var(--scale-loose))
      ),
      0.58rem
    );
    --layout-stack-gap: clamp(
      1.35rem,
      calc(var(--adaptive-base-gap) * var(--scale-layout-stack)),
      2.05rem
    );
    --layout-stack-gap-tight: clamp(
      0.72rem,
      calc(var(--adaptive-base-gap) * var(--scale-layout-stack-tight)),
      1.15rem
    );
    --layout-control-gap: clamp(
      0.24rem,
      calc(var(--adaptive-base-gap) * var(--scale-control-gap)),
      0.5rem
    );
    --layout-micro-gap: calc(var(--adaptive-base-gap) * var(--scale-stack-micro));
    --layout-album-gap: calc(var(--line-width-hair) * var(--scale-double));
    --layout-feed-attachment-stack-gap: clamp(
      0.1rem,
      calc(var(--adaptive-base-gap) * var(--scale-ribbon-gap)),
      0.14rem
    );
    --layout-feed-media-chrome-gap: clamp(
      0.14rem,
      calc(var(--adaptive-base-gap) * var(--scale-stack-micro)),
      0.2rem
    );
    --layout-feed-media-chrome-padding: clamp(
      0.1rem,
      calc(var(--adaptive-base-gap) * var(--scale-media-chrome-inset)),
      0.14rem
    );
    --layout-feed-media-chrome-min-height: clamp(
      1.45rem,
      calc(var(--adaptive-button-min-height) * var(--scale-soft)),
      1.65rem
    );
    --layout-feed-media-glass-filter: blur(0.65rem) saturate(1.18);
    --layout-feed-media-action-size: clamp(
      1.28rem,
      calc(var(--interactive-min-size) * var(--scale-interactive-compact)),
      1.42rem
    );
    --layout-feed-media-action-icon-size: clamp(
      0.72rem,
      calc(var(--adaptive-detail-size) * var(--scale-soft)),
      0.82rem
    );
    --layout-feed-media-action-outline-offset: var(--focus-ring-width);
    --layout-feed-media-footer-padding-inline: clamp(
      0.26rem,
      calc(var(--adaptive-base-gap) * var(--scale-roomy)),
      0.34rem
    );
    --layout-feed-media-radius-boost: clamp(
      0.16rem,
      calc(var(--adaptive-base-gap) * var(--scale-compact)),
      0.22rem
    );
    --layout-chip-gap: clamp(
      0.42rem,
      calc(var(--adaptive-base-gap) * var(--scale-photo-min-compact)),
      0.62rem
    );
    --layout-section-gap: clamp(
      1.15rem,
      calc(var(--adaptive-base-gap) * var(--scale-layout-section)),
      1.8rem
    );
    --layout-hero-gap: clamp(
      2.6rem,
      calc(var(--adaptive-base-gap) * var(--scale-layout-hero)),
      4.8rem
    );
    --layout-route-row-start: clamp(
      1.25rem,
      calc(var(--fluid-block) * var(--scale-route-fluid-row)),
      2rem
    );
    --layout-route-row-end: clamp(
      3.75rem,
      calc(var(--fluid-block) * var(--scale-route-fluid-end)),
      5rem
    );
    --layout-route-row-end-compact: clamp(
      0.9rem,
      calc(var(--fluid-block) * var(--scale-route-fluid-end-compact)),
      1.35rem
    );
    --layout-route-panel-gap: clamp(
      1.1rem,
      calc(var(--fluid-min) * var(--scale-back-arrow)),
      1.6rem
    );
    --layout-route-panel-padding-block: clamp(
      1rem,
      calc(var(--fluid-min) * var(--scale-offer-faq)),
      1.5rem
    );
    --layout-panel-padding-block: clamp(
      2rem,
      calc(var(--fluid-min) * var(--scale-panel-fluid)),
      3rem
    );
    --layout-surface-padding-block: clamp(
      2rem,
      calc(var(--fluid-min) * var(--scale-surface-fluid)),
      3rem
    );
    --layout-copy-gap: clamp(0.78rem, calc(var(--fluid-min) * var(--scale-form-offset)), 1.05rem);
    --layout-copy-section-gap: clamp(
      0.22rem,
      calc(var(--fluid-min) * var(--scale-copy-subtle)),
      0.38rem
    );
    --layout-form-gap: clamp(0.34rem, calc(var(--fluid-min) * var(--scale-unity)), 0.52rem);
    --layout-form-offset: clamp(
      0.72rem,
      calc(var(--fluid-min) * var(--scale-form-offset)),
      1.15rem
    );
    --layout-action-gap: clamp(0.55rem, calc(var(--fluid-min) * var(--scale-action-gap)), 0.85rem);
    --layout-login-panel-offset: clamp(
      0rem,
      calc(var(--fluid-block) * var(--scale-layout-stack-tight)),
      1.2rem
    );
    --legacy-course-tab-min-height-compact: clamp(
      1.7rem,
      calc(var(--fluid-block) * var(--scale-route-fluid-row)),
      2.05rem
    );
    --legacy-course-tab-padding-inline-compact: clamp(
      0.42rem,
      calc(var(--fluid-inline) * var(--scale-bubble-inline)),
      0.68rem
    );
    --legacy-course-tab-padding-block-compact: clamp(
      0.36rem,
      calc(var(--fluid-block) * var(--scale-emphasis)),
      0.48rem
    );
    --layout-profile-split-column-gap: clamp(
      2rem,
      calc(var(--fluid-inline) * var(--scale-panel-fluid)),
      4.5rem
    );
    --layout-block-stage-min: 50svh;
    --layout-block-split-stage-compact: 44svh;
    --layout-block-watch-panel-compact: 56svh;
    --layout-block-stage-tablet: 52svh;
    --layout-block-payment-overlay-offset: 62svh;
    --layout-block-profile-split-divider: 26svh;
    --layout-block-choice-panel-gap-landscape: 2.6svh;
    --layout-block-choice-card-padding-landscape: 2.28svh;
    --layout-block-choice-card-min-landscape: 18svh;
    --layout-block-stage-rotator-compact: 12svh;
    --layout-block-centered-actions: 48svh;
    --layout-block-centered-actions-compact: 46svh;
    --layout-block-status-error-slot: 7.2svh;
    --layout-block-status-error-offset: 1.1svh;
    --layout-block-back-zone: 15svh;
    --layout-block-profile-footer-compact: 7svh;
    --layout-block-plus-sheet-copy-landscape: 52svh;
    --layout-block-plus-sheet-gap-compact: 1.9svh;
    --layout-profile-split-divider-min-block: clamp(
      10rem,
      var(--layout-block-profile-split-divider),
      17rem
    );
    --layout-choice-panel-gap-landscape: clamp(
      0.55rem,
      var(--layout-block-choice-panel-gap-landscape),
      0.85rem
    );
    --layout-choice-card-padding-block-landscape: clamp(
      0.504rem,
      var(--layout-block-choice-card-padding-landscape),
      0.792rem
    );
    --choice-card-min-height-landscape: clamp(
      3.6rem,
      var(--layout-block-choice-card-min-landscape),
      4.38rem
    );
    --stage-rotator-min-height-compact: clamp(
      2.5rem,
      var(--layout-block-stage-rotator-compact),
      3.4rem
    );
    --layout-offer-status-gap: clamp(
      0.32rem,
      calc(var(--fluid-min) * var(--scale-spacious)),
      0.5rem
    );
    --layout-offer-faq-gap: clamp(1.15rem, calc(var(--fluid-min) * var(--scale-offer-faq)), 1.7rem);
    --layout-offer-faq-current-gap: clamp(
      0.72rem,
      calc(var(--fluid-min) * var(--scale-offer-faq-current)),
      1rem
    );
    --layout-offer-faq-tag-gap: clamp(
      0.46rem,
      calc(var(--fluid-min) * var(--scale-meta-tight)),
      0.82rem
    );
    --layout-offer-hint-offset-gap: clamp(
      0.38rem,
      calc(var(--fluid-min) * var(--scale-meta-tight)),
      0.58rem
    );
    --layout-offer-faq-heading-gap: clamp(
      0.75rem,
      calc(var(--fluid-min) * var(--scale-double)),
      1.2rem
    );
    --layout-offer-faq-heading-gap-compact: clamp(
      0.36rem,
      calc(var(--fluid-min) * var(--scale-meta-loose)),
      0.42rem
    );
    --layout-accordion-max-inline: min(28rem, 100%);
    --accordion-inline: min(
      var(--layout-accordion-max-inline),
      calc(100vw - var(--shell-gutter) * var(--scale-double))
    );
    --accordion-body-inline: var(--container-form-local);
    --accordion-copy-measure: 38ch;
    --accordion-title-size: var(--type-body-large);
    --accordion-title-size-compact: max(1.125rem, var(--accordion-title-size));
    --accordion-title-weight: 700;
    --accordion-title-line-height: var(--leading-caption);
    --accordion-body-size: var(--type-body);
    --accordion-body-size-compact: max(1rem, var(--accordion-body-size));
    --accordion-body-line-height: var(--leading-comfort);
    --accordion-paragraph-gap: var(--layout-copy-gap);
    --accordion-row-padding-block: clamp(
      0.72rem,
      calc(var(--adaptive-base-gap) * var(--scale-accordion-row)),
      1.08rem
    );
    --accordion-row-padding-factor: 1.1;
    --accordion-row-padding-inline: var(--space-2);
    --accordion-body-gap: clamp(
      0.9rem,
      calc(var(--adaptive-base-gap) * var(--scale-accordion-body-gap)),
      1.25rem
    );
    --accordion-body-padding-block-end: clamp(
      1.05rem,
      calc(var(--adaptive-base-gap) * var(--scale-accordion-body-pad)),
      1.45rem
    );
    --accordion-stack-gap: var(--split-content-actions-gap, var(--accordion-body-gap));
    --accordion-border-color: var(--hairline);
    --accordion-border-color-open: rgba(255, 255, 255, 0.2);
    --accordion-indicator-color: var(--text-muted);
    --accordion-indicator-size: var(--type-body);
    --accordion-indicator-inline-size: 1em;
    --layout-offer-panel-scroll-padding-block: clamp(
      1.25rem,
      calc(var(--fluid-min) * var(--scale-route-fluid-row)),
      2.5rem
    );
    --layout-offer-panel-scroll-padding-block-compact: clamp(
        1.55rem,
        calc(var(--fluid-min) * var(--scale-offer-scroll-compact)),
        2rem
      )
      clamp(0.85rem, calc(var(--fluid-min) * var(--scale-offer-faq)), 1.15rem);
    --layout-offer-summary-offset: clamp(
      0.95rem,
      calc(var(--fluid-min) * var(--scale-offer-summary)),
      1.35rem
    );
    --layout-offer-actions-margin-top: clamp(
      0.28rem,
      calc(var(--fluid-min) * var(--scale-dialog-inline)),
      0.45rem
    );
    --layout-offer-floating-reserve-block: 8rem;
    --layout-offer-viewport-edge-inset: 9%;
    --layout-gift-greeting-zone-min-height: clamp(
      5.5rem,
      calc(var(--fluid-block) * var(--scale-gift-zone)),
      6rem
    );
    --layout-gift-greeting-shell-inline: min(100%, 34rem);
    --layout-gift-certificate-caption-gap: var(--ornament-gap-sm);
    --layout-gift-certificate-message-gap: var(--ornament-gap-xs);
    --layout-gift-template-rail-reserve: 0rem;
    --layout-gift-offer-form-gap: clamp(
      0.56rem,
      calc(var(--fluid-min) * var(--scale-hit-lg)),
      0.82rem
    );
    --layout-gift-template-rail-reserve-side: calc(1rem * var(--scale-layout-strip-reserve-gift));
    --layout-gift-template-selector-gap: clamp(
      0.18rem,
      calc(var(--fluid-min) * var(--scale-half)),
      0.32rem
    );
    --layout-gift-template-dot-gap: clamp(
      0.42rem,
      calc(var(--fluid-min) * var(--scale-unity)),
      0.58rem
    );
    --layout-gift-template-side-dot-gap: clamp(
      0.18rem,
      calc(var(--fluid-min) * var(--scale-chip)),
      0.34rem
    );
    --layout-tariff-summary-gap: clamp(
      0.45rem,
      calc(var(--fluid-min) * var(--scale-meta-tight)),
      0.55rem
    );
    --layout-watch-video-max-block: min(calc(var(--fluid-block) * var(--scale-watch-fluid)), 34rem);
    --layout-otp-grid-columns: repeat(
      6,
      clamp(2rem, calc(var(--fluid-inline) * var(--scale-login-grid-column)), 2.65rem)
    );
    --layout-support-bottom-offset: var(--layout-bottom-safe-offset);
    --layout-profile-inline-form-gap: calc(var(--adaptive-base-gap) * var(--scale-row));
    --layout-profile-inline-form-padding-block: calc(
      var(--adaptive-base-gap) * var(--scale-inset-edge)
    );
    --layout-profile-inline-form-padding-inline: clamp(
      0.9rem,
      calc(var(--fluid-min) * var(--scale-double)),
      1.2rem
    );
    --layout-profile-schedule-padding-block: clamp(
      0.62rem,
      calc(var(--fluid-block) * var(--scale-action-gap)),
      0.85rem
    );
    --layout-profile-schedule-padding-inline: clamp(
      0.9rem,
      calc(var(--fluid-inline) * var(--scale-edit-block)),
      1.15rem
    );
    --layout-fullscreen-placeholder-inline: min(72vw, var(--container-feed-edit));
    --container-group-offer-copy: 34rem;
    --layout-fullscreen-nav-chevron-border-width: calc(var(--divider-width) * var(--scale-double));
    --layout-fullscreen-nav-chevron-border: var(--layout-fullscreen-nav-chevron-border-width) solid
      rgba(255, 255, 255, 0.82);
    --layout-forward-accent-inline: calc(var(--divider-width) * var(--scale-back-arrow));
    --layout-feed-edit-media-preview-inline: min(100%, 8rem);
    --layout-panel-back-padding-block-start: clamp(
      0.55rem,
      calc(var(--fluid-min) * var(--scale-form-offset)),
      0.9rem
    );
    --layout-panel-back-padding-inline-start: clamp(
      0.65rem,
      calc(var(--fluid-min) * var(--scale-sheet-section)),
      1.05rem
    );
    --layout-panel-back-icon-size: clamp(
      1rem,
      calc(var(--back-arrow-size) * var(--scale-hit-lg)),
      1.2rem
    );
    --layout-focus-inset-block: clamp(
      0.32rem,
      calc(var(--fluid-block) * var(--scale-comfort)),
      0.58rem
    );
    --layout-focus-inset-inline: clamp(
      0.34rem,
      calc(var(--fluid-inline) * var(--scale-emphasis)),
      0.62rem
    );
    --layout-plus-sheet-copy-gap-compact: clamp(
      0.7rem,
      var(--layout-block-plus-sheet-gap-compact),
      1rem
    );
    --layout-plus-sheet-copy-max-block-landscape: min(
      var(--layout-block-plus-sheet-copy-landscape),
      10rem
    );
    --layout-profile-form-flex-basis: 11rem;
    --layout-offer-details-margin-top: clamp(
      0.85rem,
      calc(var(--fluid-min) * var(--scale-offer-margin-top)),
      1.15rem
    );
    --layout-offer-gift-panel-padding-block: clamp(
      1.75rem,
      calc(var(--fluid-block) * var(--scale-offer-panel-pad)),
      3.25rem
    );
    --layout-offer-gift-panel-scroll-padding-top: clamp(
      2.1rem,
      calc(var(--fluid-block) * var(--scale-offer-scroll-compact)),
      3rem
    );
    --container-stage-number-min-inline: min(
      17rem,
      calc(100% - var(--stage-inline-gutter) * var(--scale-double))
    );
    --container-choice-heading-inline: min(12.8ch, 100%);
    --container-window-panel-summary-inline: min(100%, 17.5rem);
    --container-offer-scroll-safe-inline: calc(100vw - var(--shell-gutter) * var(--scale-double));
    --container-message-attachment-file-min-inline: min(100%, 12rem);
    --layout-attachment-loader-spokes-ring: 30%;
    --group-offer-copy-size-base: clamp(
      0.855rem,
      min(
        calc(var(--fluid-inline) * var(--scale-type-fluid-lg)),
        calc(var(--fluid-block) * var(--scale-layout-stack-tight))
      ),
      1.206rem
    );
    --line-height-group-offer-copy: calc(1em + var(--layout-base-gap) * var(--scale-caption-inset));
    --group-offer-heading-size-base: clamp(
      0.9rem,
      min(
        calc(var(--fluid-inline) * var(--scale-type-fluid-display)),
        calc(var(--fluid-block) * var(--scale-type-fluid-lg-tight))
      ),
      1.35rem
    );
    --group-offer-copy-size-compact: clamp(
      0.9rem,
      min(
        calc(var(--fluid-inline) * var(--scale-type-fluid-display)),
        calc(var(--fluid-block) * var(--scale-type-fluid-lg))
      ),
      1.17rem
    );
    --group-offer-heading-size-compact: clamp(
      0.918rem,
      min(
        calc(var(--fluid-inline) * var(--scale-type-fluid-display-wide)),
        calc(var(--fluid-block) * var(--scale-type-fluid-lg-mid))
      ),
      1.35rem
    );
    --layout-modal-loading-padding: clamp(
      1.25rem,
      calc(var(--fluid-min) * var(--scale-back-arrow)),
      1.5rem
    );
    --layout-list-gap: clamp(0.32rem, calc(var(--fluid-block) * var(--scale-copy-subtle)), 0.4rem);
    --layout-chip-padding-block: clamp(
      0.43rem,
      calc(var(--fluid-min) * var(--scale-emphasis)),
      0.58rem
    );
    --layout-chip-padding-inline: clamp(
      0.76rem,
      calc(var(--fluid-min) * var(--scale-hit-lg)),
      1rem
    );
    --layout-chip-padding-block-sm: clamp(
      0.34rem,
      calc(var(--adaptive-base-gap) * var(--scale-hit)),
      0.42rem
    );
    --layout-chip-padding-inline-sm: clamp(
      0.68rem,
      calc(var(--adaptive-base-gap) * var(--scale-chip-gap-fluid)),
      0.92rem
    );
    --layout-chip-padding-block-compact: clamp(
      0.3rem,
      calc(var(--adaptive-base-gap) * var(--scale-roomy)),
      0.36rem
    );
    --layout-chip-padding-inline-compact: clamp(
      0.58rem,
      calc(var(--fluid-inline) * var(--scale-offer-summary)),
      0.78rem
    );
    --layout-chip-padding-inline-dense: clamp(
      0.52rem,
      calc(var(--fluid-inline) * var(--scale-edit-block)),
      0.72rem
    );
    --layout-profile-main-gap-compact: clamp(
      2.4rem,
      calc(var(--fluid-block) * var(--scale-login-grid-column)),
      4.2rem
    );
    --layout-profile-main-gap-phone: clamp(
      2.9rem,
      calc(var(--fluid-block) * var(--scale-layout-hero)),
      4.5rem
    );
    --profile-stack-divider-gap-narrow: clamp(
      5.4rem,
      calc(var(--fluid-block) * var(--scale-profile-divider)),
      7.25rem
    );
    --profile-stack-divider-inline-narrow: min(
      20rem,
      calc(100% - var(--shell-gutter) * var(--scale-type-fluid-md-wide))
    );
    --layout-profile-main-gap-wide: clamp(
      2.6rem,
      calc(var(--adaptive-base-gap) * var(--scale-layout-hero)),
      4.8rem
    );
    --layout-profile-section-gap-compact: clamp(
      0.9rem,
      calc(var(--adaptive-base-gap) * var(--scale-route-fluid-end-compact)),
      1.35rem
    );
    --layout-profile-section-gap-phone: clamp(
      0.9rem,
      calc(var(--fluid-block) * var(--scale-edit-block)),
      1.2rem
    );
    --layout-profile-section-gap-wide: clamp(
      1.15rem,
      calc(var(--adaptive-base-gap) * var(--scale-layout-section)),
      1.8rem
    );
    --layout-profile-cluster-gap-compact: clamp(
      0.32rem,
      calc(var(--adaptive-base-gap) * var(--scale-meta-tight)),
      0.5rem
    );
    --layout-profile-cluster-gap-phone: clamp(
      0.32rem,
      calc(var(--fluid-inline) * var(--scale-emphasis-lg)),
      0.5rem
    );
    --profile-loading-tag-inline-base: clamp(
      4.8rem,
      calc(var(--fluid-min) * var(--scale-profile-tag-inline)),
      6.8rem
    );
    --profile-confirm-action-inline-base: clamp(
      5.25rem,
      calc(var(--fluid-inline) * var(--scale-profile-confirm-inline)),
      6.5rem
    );
    --layout-goal-gap: clamp(0.46rem, calc(var(--fluid-min) * var(--scale-meta-tight)), 0.82rem);
    --layout-goal-gap-compact: clamp(
      0.22rem,
      calc(var(--fluid-inline) * var(--scale-meta-tight)),
      0.38rem
    );
    --layout-goal-cloud-inset-block-compact: clamp(
      0.5rem,
      calc(var(--fluid-block) * var(--scale-dialog-inline)),
      0.82rem
    );
    --layout-goal-cloud-inset-inline-compact: clamp(
      0.38rem,
      calc(var(--fluid-inline) * var(--scale-loose)),
      0.72rem
    );
    --layout-choice-panel-gap: clamp(
      1.35rem,
      calc(var(--fluid-block) * var(--scale-offer-panel-pad)),
      2.75rem
    );
    --layout-choice-panel-gap-wide: clamp(
      1.65rem,
      calc(var(--fluid-block) * var(--scale-type-fluid-display-tight)),
      2.7rem
    );
    --layout-choice-options-gap: clamp(
      0.78rem,
      calc(var(--fluid-block) * var(--scale-choice-options)),
      1.152rem
    );
    --layout-choice-options-gap-narrow: clamp(
      1.35rem,
      calc(var(--fluid-block) * var(--scale-offer-faq)),
      1.85rem
    );
    --layout-choice-options-gap-wide: clamp(
      0.84rem,
      calc(var(--fluid-inline) * var(--scale-choice-wide)),
      1.38rem
    );
    --layout-choice-card-padding-block: clamp(
      1.2rem,
      calc(var(--fluid-min) * var(--scale-choice-card-pad)),
      1.74rem
    );
    --layout-choice-card-padding-inline: clamp(
      0.96rem,
      calc(var(--fluid-min) * var(--scale-accordion-body-gap)),
      1.38rem
    );
    --layout-choice-card-padding-inline-wide: clamp(
      0.84rem,
      calc(var(--fluid-inline) * var(--scale-choice-card-inline)),
      1.44rem
    );
    --layout-choice-card-gap: clamp(
      0.384rem,
      calc(var(--fluid-min) * var(--scale-meta-tight)),
      0.66rem
    );
    --choice-title-fluid-size: var(--type-title-small);
    --choice-title-narrow-fluid-size: calc(
      var(--choice-title-fluid-size) * var(--scale-meta-tight)
    );
    --choice-title-wide-fluid-size: var(--type-title-medium);
    --choice-title-landscape-fluid-size: var(--type-title-small);
    --choice-title-max-size: var(--type-title-medium);
    --choice-subtitle-narrow-size: calc(var(--type-caption) * var(--scale-meta-tight));
    --choice-separator-inline-narrow: min(8rem, 34%);
    --choice-separator-color-narrow: rgba(255, 255, 255, 0.12);
    --layout-registration-control-gap: clamp(
      1.05rem,
      calc(var(--fluid-min) * var(--scale-route-fluid-end-compact)),
      1.45rem
    );
    --layout-registration-control-gap-compact: clamp(
      0.8rem,
      calc(var(--fluid-min) * var(--scale-double)),
      1.05rem
    );
    --layout-registration-identity-stack-gap: var(--space-5);
    --layout-rules-consent-gap: clamp(
      0.32rem,
      calc(var(--fluid-min) * var(--scale-meta-tight)),
      0.62rem
    );
    --layout-readiness-gap: clamp(1rem, calc(var(--fluid-min) * var(--scale-edit-block)), 1.35rem);
    --layout-readiness-actions-offset: clamp(
      0.35rem,
      calc(var(--fluid-min) * var(--scale-dialog-inline)),
      0.7rem
    );
    --layout-join-auth-edge-inset-y: 12%;
    --layout-join-auth-edge-inset-block: 12svh;
    --layout-rules-consent-stack-gap: clamp(2rem, 8svh, 4.5rem);
    --layout-join-auth-otp-block: clamp(9rem, 22svh, 11rem);
    --layout-join-auth-otp-anchor: 50%;
    --layout-join-auth-back-anchor: 100%;
    --layout-login-action-min-height-floor: 2.65rem;
    --layout-login-email-padding-block-end: 0.08em;
    --layout-login-access-caption-panel-gap: var(--space-3);
    --layout-watch-series-nav-gap: clamp(
      0.1rem,
      calc(var(--fluid-min) * var(--scale-side)),
      0.2rem
    );
    --layout-watch-series-button-padding-block: clamp(
      0.08rem,
      calc(var(--fluid-min) * var(--scale-ribbon-gap)),
      0.1rem
    );
    --layout-watch-series-button-padding-inline: clamp(
      0.16rem,
      calc(var(--fluid-min) * var(--scale-compact)),
      0.2rem
    );
    --layout-messages-header-gap: clamp(
      0.7rem,
      calc(var(--fluid-inline) * var(--scale-double)),
      1rem
    );
    --layout-messages-header-gap-compact: clamp(
      0.55rem,
      calc(var(--fluid-inline) * var(--scale-form-offset)),
      0.82rem
    );
    --layout-messages-header-padding-block: clamp(
      0.75rem,
      calc(var(--fluid-block) * var(--scale-layout-stack-tight)),
      1rem
    );
    --layout-messages-feed-padding-block: clamp(
      0.9rem,
      calc(var(--fluid-block) * var(--scale-edit-block)),
      1.35rem
    );
    --layout-messages-feed-padding-block-compact: clamp(
      0.72rem,
      calc(var(--fluid-block) * var(--scale-messages-feed-compact)),
      1.05rem
    );
    --layout-messages-feed-gap: clamp(
      0.28rem,
      calc(var(--fluid-block) * var(--scale-spacious)),
      0.56rem
    );
    --layout-messages-feed-gap-compact: clamp(
      0.22rem,
      calc(var(--fluid-block) * var(--scale-roomy)),
      0.44rem
    );
    --layout-messages-item-gap: clamp(
      0.84rem,
      calc(var(--fluid-block) * var(--scale-offer-summary)),
      1.24rem
    );
    --layout-messages-item-gap-compact: clamp(
      0.68rem,
      calc(var(--fluid-block) * var(--scale-offer-faq-current)),
      1rem
    );
    --layout-messages-bubble-padding-block: calc(
      var(--adaptive-base-gap) * var(--scale-bubble-block)
    );
    --layout-messages-bubble-padding-inline: calc(
      var(--adaptive-base-gap) * var(--scale-bubble-inline)
    );
    --layout-messages-bubble-padding-bottom: calc(
      var(--adaptive-base-gap) * var(--scale-bubble-bottom)
    );
    --layout-messages-caption-gap: calc(var(--adaptive-base-gap) * var(--scale-tight));
    --layout-messages-caption-padding-block: calc(var(--adaptive-base-gap) * var(--scale-loose));
    --layout-messages-caption-padding-inline: calc(
      var(--adaptive-base-gap) * var(--scale-inset-loose)
    );
    --layout-messages-meta-gap: calc(var(--adaptive-base-gap) * var(--scale-compact));
    --layout-messages-composer-padding: calc(var(--layout-base-gap) * var(--scale-composer-block));
    --layout-messages-composer-textarea-padding-block: calc(
      var(--adaptive-base-gap) * var(--scale-composer-textarea-block)
    );
    --layout-messages-composer-textarea-padding-inline: calc(
      var(--adaptive-base-gap) * var(--scale-composer-textarea-inline)
    );
    --shadow-messages-composer-glass: 0 -0.5rem 1.8rem rgba(0, 0, 0, 0.18);
    --filter-messages-composer-glass: blur(1.35rem) saturate(1.28);
    --layout-messages-delete-panel-gap: calc(var(--layout-control-gap) * var(--scale-roomy));
    --layout-messages-delete-button-padding-block: calc(
      var(--button-padding-block) * var(--scale-button-delete)
    );
    --layout-messages-day-chip-text-scale: var(--scale-chip);
    --layout-messages-day-chip-padding-block-scale: var(--scale-compact);
    --layout-messages-day-chip-padding-inline-scale: var(--scale-chip);
    --layout-messages-bubble-side-reserve: calc(
      var(--adaptive-base-gap) * var(--scale-bubble-rail)
    );
    --layout-messages-bubble-side-reserve-compact: calc(
      var(--adaptive-base-gap) * var(--scale-bubble-rail-compact)
    );
    --layout-messages-action-outside-strip-reserve: calc(
      1rem * var(--scale-layout-strip-reserve-messages)
    );
    --layout-messages-album-overflow-size: calc(
      var(--adaptive-copy-size) * var(--scale-emphasis-lg)
    );
    --layout-feed-post-meta-gap: calc(var(--adaptive-base-gap) * var(--scale-dense));
    --layout-feed-post-footer-gap: calc(var(--adaptive-base-gap) * var(--scale-minimal));
    --layout-feed-post-actions-gap: calc(var(--adaptive-base-gap) * var(--scale-micro));
    --layout-feed-edit-min-height: calc(var(--button-min-height) * var(--scale-edit-block));
    --layout-messages-media-single-width: min(23rem, var(--container-cqi-media));
    --layout-messages-media-single-width-square: min(
      19.32rem,
      calc(var(--container-cqi-media) * var(--scale-media-envelope-square))
    );
    --layout-messages-media-single-width-narrow: min(
      14.26rem,
      calc(var(--container-cqi-media) * var(--scale-inset-inline))
    );
    --layout-messages-media-single-width-compact: min(20rem, var(--container-cqi-media-compact));
    --layout-messages-media-single-width-square-compact: min(
      16.8rem,
      calc(var(--container-cqi-media-compact) * var(--scale-media-envelope-square))
    );
    --layout-messages-media-single-width-narrow-compact: min(
      12.4rem,
      calc(var(--container-cqi-media-compact) * var(--scale-inset-inline))
    );
    --layout-messages-media-single-width-wide: min(25rem, var(--container-cqi-media-wide));
    --layout-messages-media-single-width-square-wide: min(
      21rem,
      calc(var(--container-cqi-media-wide) * var(--scale-media-envelope-square))
    );
    --layout-messages-media-single-width-narrow-wide: min(
      15.5rem,
      calc(var(--container-cqi-media-wide) * var(--scale-inset-inline))
    );
    --layout-messages-media-feed-inline: 100%;
    --layout-media-collage-count-5-columns: repeat(6, minmax(0, 1fr));
    --layout-media-collage-count-5-rows: repeat(2, minmax(0, 1fr));
    --layout-feed-post-item-gap-fluid: calc(var(--scale-messages-feed-compact) * var(--cqi-unit));
    --layout-feed-post-stack-gap-fluid: calc(var(--scale-meta-loosen) * var(--cqi-unit));
    --layout-feed-caption-size-fluid: calc(var(--scale-login-grid-max) * var(--cqi-unit));
    --layout-feed-caption-padding-inline-fluid: calc(
      var(--scale-feed-caption-inline-cqi) * var(--cqi-unit)
    );
    --layout-feed-caption-padding-block-fluid: calc(var(--scale-loose) * var(--cqi-unit));
    --layout-feed-comments-stack-gap-fluid: calc(var(--scale-emphasis) * var(--cqi-unit));
    --layout-feed-post-item-gap: clamp(
      1rem,
      calc(0.72rem + var(--layout-feed-post-item-gap-fluid)),
      1.4rem
    );
    --layout-feed-post-stack-gap: clamp(
      0.62rem,
      calc(0.42rem + var(--layout-feed-post-stack-gap-fluid)),
      0.92rem
    );
    --layout-feed-caption-size: clamp(
      0.94rem,
      calc(0.7rem + var(--layout-feed-caption-size-fluid)),
      1.04rem
    );
    --layout-feed-caption-padding-inline: clamp(
      0.72rem,
      calc(0.5rem + var(--layout-feed-caption-padding-inline-fluid)),
      1rem
    );
    --layout-feed-caption-padding-block: clamp(
      0.58rem,
      calc(0.38rem + var(--layout-feed-caption-padding-block-fluid)),
      0.78rem
    );
    --layout-feed-comments-stack-gap: clamp(
      0.5rem,
      calc(0.34rem + var(--layout-feed-comments-stack-gap-fluid)),
      0.78rem
    );
    --layout-feed-comments-header-inset: 9svh;
    --layout-profile-goals-stage-min-block: clamp(
      8.2rem,
      calc(var(--fluid-block) * var(--scale-profile-goals-stage)),
      9rem
    );
    --layout-profile-actions-min-block: clamp(
      7.75rem,
      calc(var(--fluid-block) * var(--scale-profile-actions)),
      8.35rem
    );
    --layout-profile-stack-divider-gap: clamp(
      4.5rem,
      calc(var(--fluid-block) * var(--scale-profile-stack-divider-gap)),
      6.75rem
    );
    --layout-feed-post-item-gap-compact: clamp(
      0.92rem,
      calc(0.66rem + calc(var(--scale-accordion-row) * var(--cqi-unit))),
      1.18rem
    );
    --layout-feed-post-stack-gap-compact: clamp(
      0.56rem,
      calc(0.38rem + calc(var(--scale-feed-stack-gap-compact-cqi) * var(--cqi-unit))),
      0.82rem
    );
    --layout-feed-caption-size-compact: clamp(
      0.9rem,
      calc(0.66rem + calc(var(--scale-layout-section) * var(--cqi-unit))),
      0.98rem
    );
    --layout-feed-caption-padding-inline-compact: clamp(
      0.66rem,
      calc(0.44rem + calc(var(--scale-feed-caption-inline-compact-cqi) * var(--cqi-unit))),
      0.9rem
    );
    --layout-feed-caption-padding-block-compact: clamp(
      0.52rem,
      calc(0.34rem + calc(var(--scale-meta-loosen) * var(--cqi-unit))),
      0.68rem
    );
    --layout-feed-post-item-gap-wide: clamp(
      1.05rem,
      calc(0.78rem + calc(var(--scale-hit-lg) * var(--cqi-unit))),
      1.48rem
    );
    --layout-feed-post-stack-gap-wide: clamp(
      0.68rem,
      calc(0.46rem + var(--layout-feed-comments-stack-gap-fluid)),
      0.98rem
    );
    --layout-feed-caption-size-wide: clamp(
      0.96rem,
      calc(0.74rem + calc(var(--scale-form-offset) * var(--cqi-unit))),
      1.06rem
    );
    --layout-feed-caption-padding-inline-wide: clamp(
      0.78rem,
      calc(0.54rem + calc(var(--scale-dialog-inline) * var(--cqi-unit))),
      1.05rem
    );
    --layout-feed-caption-padding-block-wide: clamp(
      0.62rem,
      calc(0.4rem + calc(var(--scale-soft) * var(--cqi-unit))),
      0.82rem
    );
    --layout-panel-summary-stack-gap: calc(var(--adaptive-base-gap) * var(--scale-tight));
    --layout-button-group-gap-compact: calc(var(--layout-base-gap) * var(--scale-comfort));
    --layout-sheet-dock-offset: clamp(
      0.75rem,
      calc(var(--fluid-block) * var(--scale-edit-block)),
      1.4rem
    );
    --layout-sheet-dock-gap: clamp(0.7rem, calc(var(--fluid-block) * var(--scale-double)), 1.1rem);
    --layout-sheet-padding-block-start: clamp(
      0.5rem,
      calc(var(--fluid-block) * var(--scale-layout-stack-tight)),
      1.1rem
    );
    --layout-sheet-padding-inline: clamp(
      1.15rem,
      calc(var(--fluid-inline) * var(--scale-sheet-inline)),
      4.5rem
    );
    --layout-sheet-switch-gap: clamp(
      0.35rem,
      calc(var(--fluid-block) * var(--scale-meta-tight)),
      0.7rem
    );
    --layout-sheet-section-gap: clamp(
      0.9rem,
      calc(var(--fluid-block) * var(--scale-sheet-section)),
      1.55rem
    );
    --layout-sheet-frame-padding-block: clamp(
      0.18rem,
      calc(var(--fluid-block) * var(--scale-copy-subtle)),
      0.5rem
    );
    --layout-sheet-copy-gap: clamp(
      0.45rem,
      calc(var(--fluid-block) * var(--scale-dialog-inline)),
      0.78rem
    );
    --layout-sheet-format-gap: clamp(
      0.65rem,
      calc(var(--fluid-block) * var(--scale-form-offset)),
      1.2rem
    );
    --layout-sheet-control-padding-block: clamp(
      0.58rem,
      calc(var(--fluid-block) * var(--scale-composer-inline-wide)),
      0.86rem
    );
    --layout-sheet-tab-padding-block: clamp(
      0.34rem,
      calc(var(--fluid-block) * var(--scale-emphasis)),
      0.42rem
    );
    --layout-sheet-tab-padding-inline: clamp(
      0.12rem,
      calc(var(--fluid-inline) * var(--scale-bubble-inline)),
      0.85rem
    );
    --layout-notice-offset: max(var(--safe-area-top), var(--space-2));
    --layout-bottom-offset: max(var(--safe-area-bottom), var(--space-1));
    --safe-shell-gutter-start: max(var(--shell-gutter), var(--safe-area-left));
    --safe-shell-gutter-end: max(var(--shell-gutter), var(--safe-area-right));
    --safe-stage-gutter-start: max(var(--stage-gutter), var(--safe-area-left));
    --safe-stage-gutter-end: max(var(--stage-gutter), var(--safe-area-right));
    --layout-shell-gutter-base: clamp(
      1.25rem,
      calc(var(--fluid-inline) * var(--scale-route-fluid-row)),
      2.75rem
    );
    --layout-shell-gutter-compact: clamp(
      0.92rem,
      calc(var(--fluid-inline) * var(--scale-layout-stack)),
      1rem
    );
    --layout-shell-gutter-min: clamp(
      0.5rem,
      calc(var(--fluid-inline) * var(--scale-route-fluid-end-compact)),
      0.7rem
    );
    --layout-stage-gutter-base: clamp(
      1.25rem,
      calc(var(--fluid-min) * var(--scale-offer-panel-pad)),
      2.25rem
    );
    --layout-stage-gutter-compact: clamp(
      0.82rem,
      calc(var(--fluid-inline) * var(--scale-layout-stack)),
      0.95rem
    );
    --layout-stage-gutter-min: clamp(
      0.5rem,
      calc(var(--fluid-inline) * var(--scale-route-fluid-end-compact)),
      0.7rem
    );
    --layout-panel-gutter-max-ratio: 6%;
    --layout-stage-gutter-max-ratio: 5%;
    --layout-back-zone-compact: clamp(
      3.6rem,
      calc(var(--fluid-block) * var(--scale-back-zone)),
      5.25rem
    );
    --layout-back-zone-min: clamp(
      3rem,
      calc(var(--fluid-block) * var(--scale-profile-tag-inline)),
      4.25rem
    );
    --layout-back-zone-landscape: clamp(
      3rem,
      calc(var(--fluid-block) * var(--scale-profile-confirm-inline)),
      4.5rem
    );
    --layout-back-control-min: clamp(
      1.55rem,
      calc(var(--fluid-inline) * var(--scale-sheet-inline)),
      1.9rem
    );
    --layout-back-control-landscape: clamp(
      1.55rem,
      calc(var(--fluid-block) * var(--scale-surface-fluid)),
      1.95rem
    );
    --layout-back-arrow-min: clamp(
      0.5rem,
      calc(var(--fluid-inline) * var(--scale-layout-stack)),
      0.72rem
    );
    --layout-back-arrow-landscape: clamp(
      0.5rem,
      calc(var(--fluid-block) * var(--scale-back-arrow)),
      0.78rem
    );
    --panel-inline-gutter: min(var(--shell-gutter), var(--layout-panel-gutter-max-ratio));
    --panel-safe-gutter-start: max(var(--panel-inline-gutter), var(--safe-area-left));
    --panel-safe-gutter-end: max(var(--panel-inline-gutter), var(--safe-area-right));
    --stage-inline-gutter: min(var(--stage-gutter), var(--layout-stage-gutter-max-ratio));
    --stage-safe-gutter-start: max(var(--stage-inline-gutter), var(--safe-area-left));
    --stage-safe-gutter-end: max(var(--stage-inline-gutter), var(--safe-area-right));

    /* типографика — единый центр: шкала, роли, leading и tracking */
    --type-min: 0.374rem; /* 5.984px = прежний минимум 5.44px + 10% */
    --type-micro: clamp(
      var(--type-min),
      min(
        calc(var(--fluid-inline) * var(--scale-composer-inline-wide)),
        calc(var(--fluid-block) * var(--scale-offer-faq-current))
      ),
      0.72rem
    );
    --type-tiny: clamp(
      0.62rem,
      min(
        calc(var(--fluid-inline) * var(--scale-offer-faq-current)),
        calc(var(--fluid-block) * var(--scale-accordion-body-gap))
      ),
      0.82rem
    );
    --type-fine: clamp(
      0.78rem,
      min(
        calc(var(--fluid-inline) * var(--scale-edit-block)),
        calc(var(--fluid-block) * var(--scale-offer-faq))
      ),
      0.95rem
    );
    --type-caption: clamp(
      0.85rem,
      min(
        calc(var(--fluid-inline) * var(--scale-accordion-body-gap)),
        calc(var(--fluid-block) * var(--scale-back-arrow))
      ),
      1rem
    );
    --type-small: clamp(
      0.95rem,
      min(
        calc(var(--fluid-inline) * var(--scale-offer-margin-top)),
        calc(var(--fluid-block) * var(--scale-layout-stack))
      ),
      1.12rem
    );
    --type-body: clamp(
      1.05rem,
      min(
        calc(var(--fluid-inline) * var(--scale-back-arrow)),
        calc(var(--fluid-block) * var(--scale-type-fluid-md-loose))
      ),
      1.32rem
    );
    --type-body-large: clamp(
      1.2rem,
      min(
        calc(var(--fluid-inline) * var(--scale-type-fluid-md-tight)),
        calc(var(--fluid-block) * var(--scale-type-fluid-display-tight))
      ),
      1.55rem
    );
    --type-title-small: clamp(
      1.35rem,
      min(
        calc(var(--fluid-inline) * var(--scale-route-fluid-row)),
        calc(var(--fluid-block) * var(--scale-type-fluid-xl))
      ),
      2.05rem
    );
    --type-title-medium: clamp(
      1.55rem,
      min(
        calc(var(--fluid-inline) * var(--scale-panel-fluid)),
        calc(var(--fluid-block) * var(--scale-type-fluid-hero-tight))
      ),
      2.4rem
    );
    --type-title-large: clamp(
      2rem,
      min(
        calc(var(--fluid-inline) * var(--scale-profile-loading-max)),
        calc(var(--fluid-block) * var(--scale-profile-loading-min))
      ),
      3.5rem
    );
    --type-display: clamp(
      2.6rem,
      min(
        calc(var(--fluid-inline) * var(--scale-route-fluid-end)),
        calc(var(--fluid-block) * var(--scale-profile-tag-inline))
      ),
      4.8rem
    );
    --type-display-large: clamp(
      3rem,
      min(
        calc(var(--fluid-inline) * var(--scale-route-fluid-end)),
        calc(var(--fluid-block) * var(--scale-profile-tag-inline))
      ),
      5.4rem
    );

    --type-legal: var(--type-tiny);
    --type-code-size: 0.92em;
    --type-meta: var(--type-caption);
    --type-overline: var(--type-fine);
    --type-control: clamp(
      0.78rem,
      calc(0.62rem + var(--adaptive-fluid) * var(--scale-tight)),
      1rem
    );
    --type-control-compact: var(--type-fine);
    --type-control-container: clamp(
      0.78rem,
      calc(0.62rem + var(--adaptive-fluid) * var(--scale-type-control-fluid)),
      1.02rem
    );
    --type-control-narrow: clamp(
      0.78rem,
      calc(0.62rem + var(--adaptive-fluid) * var(--scale-type-control-fluid)),
      0.9rem
    );
    --type-control-phone: clamp(
      0.72rem,
      calc(0.58rem + var(--adaptive-fluid) * var(--scale-chip)),
      0.82rem
    );
    --type-control-landscape: clamp(
      0.66rem,
      calc(0.5rem + var(--adaptive-fluid) * var(--scale-caption-trail)),
      0.78rem
    );
    --type-panel-heading: clamp(
      1.2rem,
      calc(0.92rem + var(--adaptive-fluid) * var(--scale-meta-tight)),
      2.1rem
    );
    --type-panel-copy: clamp(
      1.02rem,
      calc(0.78rem + var(--adaptive-fluid) * var(--scale-soft)),
      1.42rem
    );
    --type-panel-copy-container: clamp(
      1.02rem,
      calc(0.78rem + var(--adaptive-fluid) * var(--scale-meta-loose)),
      1.46rem
    );
    --type-panel-copy-narrow: clamp(
      1.02rem,
      calc(0.78rem + var(--adaptive-fluid) * var(--scale-meta-loose)),
      1.12rem
    );
    --type-panel-copy-phone: clamp(
      0.94rem,
      calc(0.72rem + var(--adaptive-fluid) * var(--scale-hit)),
      1.02rem
    );
    --type-panel-copy-landscape: clamp(
      0.78rem,
      calc(0.58rem + var(--adaptive-fluid) * var(--scale-dialog-inline)),
      0.98rem
    );
    --type-panel-copy-compact: clamp(
      1.05rem,
      min(
        calc(var(--fluid-inline) * var(--scale-type-fluid-lg)),
        calc(var(--fluid-block) * var(--scale-login-grid-max))
      ),
      1.12rem
    );
    --type-panel-detail: clamp(
      0.86rem,
      calc(0.68rem + var(--adaptive-fluid) * var(--scale-interactive-compact)),
      1.1rem
    );
    --type-panel-detail-container: clamp(
      0.86rem,
      calc(0.68rem + var(--adaptive-fluid) * var(--scale-side)),
      1.12rem
    );
    --type-panel-detail-narrow: clamp(
      0.86rem,
      calc(0.68rem + var(--adaptive-fluid) * var(--scale-side)),
      0.98rem
    );
    --type-panel-detail-phone: clamp(
      0.78rem,
      calc(0.62rem + var(--adaptive-fluid) * var(--scale-interactive-compact)),
      0.9rem
    );
    --type-panel-detail-landscape: clamp(
      0.72rem,
      calc(0.52rem + var(--adaptive-fluid) * var(--scale-loose)),
      0.88rem
    );
    --type-panel-meta: calc(var(--adaptive-detail-size) * var(--scale-meta));
    --type-panel-label: calc(var(--adaptive-detail-size) * var(--scale-soft));
    --type-registration-note: var(--type-panel-label);
    --type-control-subtle: calc(var(--adaptive-detail-size) * var(--scale-control-subtle));
    --type-login-footnote: calc(var(--type-body) * var(--scale-hit));
    --type-panel-count: var(--type-panel-label);
    --type-panel-control-small: calc(var(--adaptive-detail-size) * var(--scale-spacious));
    --surface-action-font-size: var(--type-panel-control-small);
    --surface-action-font-size-compact: var(--adaptive-compact-control-size);
    --type-panel-relative-emphasis: 1.05em;
    --type-login-small: clamp(0.82rem, calc(var(--type-body) * var(--scale-hit)), 1rem);
    --type-login-control: clamp(0.9rem, calc(var(--type-body) * var(--scale-spacious)), 1.08rem);
    --type-stage-phrase: clamp(
      0.95rem,
      min(
        calc(var(--fluid-block) * var(--scale-route-fluid-row)),
        calc(var(--fluid-inline) * var(--scale-type-fluid-hero-tight))
      ),
      2.1rem
    );
    --type-stage-anchor: calc(var(--type-stage-phrase) / 2);
    --stage-edge-caption-size-mobile-min: 0.75rem;
    --stage-edge-caption-size-narrow: max(
      var(--stage-edge-caption-size-mobile-min),
      calc(var(--type-stage-anchor) * var(--scale-hit))
    );
    --type-stage-phrase-emphasis: calc(var(--type-stage-phrase) * var(--scale-dialog-inline));
    --type-stage-phrase-split: clamp(
      1.05rem,
      min(
        calc(var(--fluid-block) * var(--scale-type-fluid-display)),
        calc(var(--fluid-inline) * var(--scale-type-fluid-hero-tight))
      ),
      2.1rem
    );
    --type-stage-phrase-container: clamp(
      1.05rem,
      min(
        calc(var(--fluid-inline) * var(--scale-type-fluid-hero-tight)),
        calc(var(--fluid-block) * var(--scale-profile-loading-mid))
      ),
      2.3rem
    );
    --type-gift-caption: var(--type-micro);
    --type-gift-message-min: 1.28rem;
    --type-gift-message-fluid-block: calc(var(--fluid-block) * var(--scale-type-gift-fluid));
    --type-gift-message-fluid-inline: calc(var(--fluid-inline) * var(--scale-login-grid-column));
    --type-gift-message-max: 3.25rem;
    --type-gift-message: clamp(
      var(--type-gift-message-min),
      min(var(--type-gift-message-fluid-block), var(--type-gift-message-fluid-inline)),
      var(--type-gift-message-max)
    );
    --type-gift-certificate-caption-base: calc(var(--type-gift-caption) * var(--scale-meta-tight));
    --type-gift-certificate-caption-compact: calc(
      var(--type-gift-caption) * var(--scale-type-caption-boost)
    );
    --type-gift-certificate-caption-mobile-min: var(--stage-edge-caption-size-mobile-min);
    --type-gift-certificate-message: clamp(
      calc(var(--type-gift-message-min) * var(--gift-certificate-message-scale)),
      min(
        calc(var(--type-gift-message-fluid-block) * var(--gift-certificate-message-scale)),
        calc(var(--type-gift-message-fluid-inline) * var(--gift-certificate-message-scale))
      ),
      calc(var(--type-gift-message-max) * var(--gift-certificate-message-scale))
    );
    --type-gift-greeting-message: clamp(
      calc(
        var(--type-gift-message-min) * var(--gift-greeting-fit-scale) *
          var(--gift-greeting-mobile-scale)
      ),
      min(
        calc(
          var(--type-gift-message-fluid-block) * var(--gift-greeting-fit-scale) *
            var(--gift-greeting-mobile-scale)
        ),
        calc(
          var(--type-gift-message-fluid-inline) * var(--gift-greeting-fit-scale) *
            var(--gift-greeting-mobile-scale)
        )
      ),
      calc(
        var(--type-gift-message-max) * var(--gift-greeting-fit-scale) *
          var(--gift-greeting-mobile-scale)
      )
    );
    --type-gift-greeting-message-container: clamp(
      calc(0.96rem * var(--gift-greeting-fit-scale) * var(--gift-greeting-mobile-scale)),
      min(
        calc(
          var(--scale-gift-greeting-fit-cqi) * var(--cqi-unit) * var(--gift-greeting-fit-scale) *
            var(--gift-greeting-mobile-scale)
        ),
        calc(6cqh * var(--gift-greeting-fit-scale) * var(--gift-greeting-mobile-scale))
      ),
      calc(2.6rem * var(--gift-greeting-fit-scale) * var(--gift-greeting-mobile-scale))
    );
    --type-gift-greeting-landscape: clamp(
      1.08rem,
      calc(var(--fluid-block) * var(--scale-profile-stack-divider-tight)),
      1.72rem
    );
    --type-course-tab: var(--type-tiny);
    --type-course-tab-compact: var(--type-micro);
    --type-solo-offer-copy: clamp(
      0.875rem,
      calc(var(--fluid-inline) * var(--scale-action-gap)),
      1rem
    );
    --type-solo-offer-copy-compact: clamp(
      0.68rem,
      calc(var(--fluid-inline) * var(--scale-hit-lg)),
      0.86rem
    );
    --type-solo-offer-top-copy: calc(var(--type-small) * var(--scale-spacious));
    --type-solo-offer-title: clamp(
      2.6rem,
      min(
        calc(var(--fluid-block) * var(--scale-route-fluid-end)),
        calc(var(--fluid-inline) * var(--scale-profile-tag-inline))
      ),
      4.85rem
    );
    --type-offer-landscape-copy: clamp(
      0.78rem,
      calc(var(--fluid-block) * var(--scale-offer-scroll-compact)),
      0.94rem
    );
    --type-solo-offer-landscape-copy: clamp(
      0.68rem,
      calc(var(--fluid-block) * var(--scale-type-fluid-md-loose)),
      0.78rem
    );
    --type-solo-offer-landscape-title: clamp(
      1.45rem,
      calc(var(--fluid-block) * var(--scale-profile-stack-divider-wide)),
      2rem
    );

    /* legacy aliases: components consume semantic tokens while older selectors keep stable names */
    --fs-xxs: var(--type-fine);
    --fs-xs: var(--type-caption);
    --fs-sm: var(--type-small);
    --fs-md: var(--type-body);
    --fs-lg: var(--type-body-large);
    --fs-xl: var(--type-title-medium);
    --fs-2xl: var(--type-title-large);
    --fs-3xl: var(--type-display);

    --leading-display-tight: 0.9;
    --leading-display: 0.94;
    --leading-display-snug: 0.98;
    --leading-solid: 1;
    --leading-tight: 1.05;
    --leading-control: 1.15;
    --leading-snug: 1.2;
    --leading-caption: 1.25;
    --leading-comfort: 1.35;
    --leading-readable: 1.48;
    --leading-base: 1.5;
    --leading-relaxed: 1.62;

    --lh-tight: var(--leading-tight);
    --lh-snug: var(--leading-snug);
    --lh-base: var(--leading-base);
    --lh-relaxed: var(--leading-relaxed);

    --tracking-none: 0;
    --tracking-body: 0;
    --tracking-soft-tight: 0;
    --tracking-ui-tight: 0;
    --tracking-tight: 0;
    --tracking-display: 0;
    --tracking-wide-soft: 0.01em;
    --tracking-label: 0.1em;
    --tracking-label-wide: 0.12em;

    --tr-tight: var(--tracking-tight);
    --tr-display: var(--tracking-display);

    /* отступы — одна шкала на весь интерфейс */
    --space-1: clamp(0.25rem, calc(var(--fluid-min) * var(--scale-half)), 0.4rem);
    --space-2: clamp(0.4rem, calc(var(--fluid-min) * var(--scale-unity)), 0.65rem);
    --space-3: clamp(0.65rem, calc(var(--fluid-min) * var(--scale-composer-inline-wide)), 0.95rem);
    --space-4: clamp(1rem, calc(var(--fluid-min) * var(--scale-double)), 1.35rem);
    --space-5: clamp(1.4rem, calc(var(--fluid-min) * var(--scale-back-arrow)), 2rem);
    --space-6: clamp(2rem, calc(var(--fluid-min) * var(--scale-offer-panel-pad)), 3rem);

    /* адаптивная система — один источник размеров для текста, действий и controls */
    --adaptive-fluid: var(--adaptive-fluid-min);
    --adaptive-base-gap: clamp(0.36rem, var(--adaptive-fluid), 0.86rem);
    --adaptive-action-gap: calc(var(--adaptive-base-gap) * var(--scale-route-fluid-row));
    --adaptive-content-width: min(
      42ch,
      calc(100% - var(--panel-inline-gutter) * var(--scale-double))
    );
    --adaptive-heading-size: var(--type-panel-heading);
    --adaptive-copy-size: var(--type-panel-copy);
    --adaptive-detail-size: var(--type-panel-detail);
    --adaptive-surface-fluid: var(--adaptive-fluid);
    --adaptive-surface-base-gap: clamp(0.36rem, var(--adaptive-surface-fluid), 0.92rem);
    --adaptive-surface-content-width: min(44ch, var(--container-safe-inline));
    --adaptive-surface-content-width-wide: min(46ch, var(--container-safe-inline));
    --adaptive-surface-copy-size: var(--type-panel-copy-container);
    --adaptive-surface-detail-size: var(--type-panel-detail-container);
    --adaptive-surface-control-size: var(--type-control-container);
    --adaptive-surface-button-padding-block: clamp(
      0.36rem,
      calc(var(--adaptive-base-gap) * var(--scale-button-block)),
      0.64rem
    );
    --adaptive-surface-button-padding-inline: clamp(
      0.72rem,
      calc(var(--adaptive-base-gap) * var(--scale-sheet-section)),
      1.4rem
    );
    --adaptive-surface-button-max-block-size: var(--interactive-min-size-coarse);
    --adaptive-surface-control-max-size: 2.9rem;
    --adaptive-wide-button-max-block-size: 2.85rem;
    --adaptive-wide-control-max-size: 3rem;
    --adaptive-compact-base-gap: clamp(0.32rem, var(--adaptive-fluid), 0.58rem);
    --adaptive-compact-copy-size: var(--type-panel-copy-phone);
    --adaptive-compact-detail-size: var(--type-panel-detail-phone);
    --adaptive-compact-control-size: var(--type-control-phone);
    --adaptive-compact-button-padding-block: clamp(
      0.32rem,
      calc(var(--adaptive-base-gap) * var(--scale-button-block)),
      0.48rem
    );
    --adaptive-compact-button-padding-inline: clamp(
      0.62rem,
      calc(var(--adaptive-base-gap) * var(--scale-adaptive-pad)),
      0.92rem
    );
    --adaptive-compact-button-min-block-size: 1.78rem;
    --adaptive-compact-button-max-block-size: 2.24rem;
    --adaptive-compact-control-max-size: 2.34rem;
    --adaptive-compact-icon-min-size: 0.68rem;
    --adaptive-compact-icon-max-size: 0.92rem;
    --adaptive-phone-fluid: min(
      calc(var(--fluid-inline) * var(--scale-fluid-inline-boost)),
      calc(var(--fluid-block) * var(--scale-emphasis))
    );
    --adaptive-phone-base-gap: clamp(0.32rem, var(--adaptive-fluid), 0.54rem);
    --adaptive-phone-button-padding-block: clamp(
      0.32rem,
      calc(var(--adaptive-base-gap) * var(--scale-button-block)),
      0.46rem
    );
    --adaptive-phone-button-padding-inline: clamp(
      0.62rem,
      calc(var(--adaptive-base-gap) * var(--scale-adaptive-pad)),
      0.84rem
    );
    --adaptive-phone-button-max-block-size: 2.18rem;
    --adaptive-phone-control-max-size: 2.3rem;
    --adaptive-phone-icon-max-size: 0.9rem;
    --adaptive-landscape-base-gap: clamp(0.24rem, var(--adaptive-fluid), 0.42rem);
    --adaptive-landscape-copy-size: var(--type-panel-copy-landscape);
    --adaptive-landscape-detail-size: var(--type-panel-detail-landscape);
    --adaptive-landscape-control-size: var(--type-control-landscape);
    --adaptive-landscape-button-padding-block: clamp(
      0.3rem,
      calc(var(--adaptive-base-gap) * var(--scale-button-block)),
      0.4rem
    );
    --adaptive-landscape-button-padding-inline: clamp(
      0.5rem,
      calc(var(--adaptive-base-gap) * var(--scale-sheet-section)),
      0.8rem
    );
    --adaptive-landscape-button-min-block-size: 1.55rem;
    --adaptive-landscape-button-max-block-size: 2rem;
    --adaptive-landscape-control-max-size: 2rem;
    --adaptive-narrow-fluid: min(
      calc(var(--fluid-inline) * var(--scale-fluid-inline-boost)),
      calc(var(--fluid-block) * var(--scale-loose))
    );
    --adaptive-short-base-gap: var(--adaptive-landscape-base-gap);
    --adaptive-short-copy-size: var(--adaptive-landscape-copy-size);
    --adaptive-short-detail-size: var(--adaptive-landscape-detail-size);
    --adaptive-short-control-size: var(--adaptive-landscape-control-size);
    --adaptive-short-button-padding-block: var(--adaptive-landscape-button-padding-block);
    --adaptive-short-button-padding-inline: var(--adaptive-landscape-button-padding-inline);
    --adaptive-short-button-min-block-size: var(--adaptive-landscape-button-min-block-size);
    --adaptive-short-button-max-block-size: var(--adaptive-landscape-button-max-block-size);
    --adaptive-short-control-max-size: var(--adaptive-landscape-control-max-size);
    --adaptive-short-icon-max-size: var(--adaptive-phone-icon-max-size);
    --adaptive-button-font-size: var(--type-control);
    --adaptive-button-min-block-size: 1.9rem;
    --adaptive-button-max-block-size: 2.7rem;
    --adaptive-button-font-multiplier: var(--scale-button-font-multiplier);
    --adaptive-button-padding-block: clamp(
      0.36rem,
      calc(var(--adaptive-base-gap) * var(--scale-button-block)),
      0.62rem
    );
    --adaptive-button-padding-inline: clamp(
      0.72rem,
      calc(var(--adaptive-base-gap) * var(--scale-sheet-section)),
      1.35rem
    );
    --adaptive-button-min-height: clamp(
      var(--adaptive-button-min-block-size),
      calc(
        var(--adaptive-button-font-size) * var(--adaptive-button-font-multiplier) +
          var(--adaptive-button-padding-block) * var(--scale-double)
      ),
      var(--adaptive-button-max-block-size)
    );
    --button-min-height-prominent: calc(
      max(var(--button-min-height), 2.7rem) * var(--scale-prominent-control)
    );
    --button-min-height-compact: max(var(--button-min-height), 2.35rem);
    --adaptive-button-radius: calc(var(--adaptive-button-min-height) / 2);
    --adaptive-control-min-size: var(--interactive-min-size);
    --adaptive-control-max-size: 2.85rem;
    --adaptive-control-size: clamp(
      var(--adaptive-control-min-size),
      calc(var(--adaptive-button-min-height) + var(--adaptive-base-gap) * var(--scale-emphasis-lg)),
      var(--adaptive-control-max-size)
    );
    --adaptive-icon-min-size: 0.72rem;
    --adaptive-icon-max-size: 1.1rem;
    --adaptive-icon-size: clamp(
      var(--adaptive-icon-min-size),
      calc(var(--adaptive-button-font-size) * var(--scale-loose)),
      var(--adaptive-icon-max-size)
    );
    --chip-min-height: max(
      var(--button-min-height),
      clamp(1.9rem, calc(var(--fluid-min) * var(--scale-type-fluid-display)), 2.35rem)
    );
    --chip-min-height-compact: max(
      var(--button-min-height),
      clamp(1.72rem, calc(var(--fluid-block) * var(--scale-type-fluid-hero-loose)), 2rem)
    );
    --chip-padding-block: var(--layout-chip-padding-block-sm);
    --chip-padding-inline: var(--layout-chip-padding-inline-sm);
    --chip-padding-block-compact: var(--layout-chip-padding-block-compact);
    --chip-padding-inline-compact: var(--layout-chip-padding-inline-compact);
    --chip-padding-inline-dense: var(--layout-chip-padding-inline-dense);
    --chip-font-size: var(--type-fine);
    --chip-icon-size: var(--control-icon-size-sm);
    --goal-chip-min-height-base: max(
      var(--button-min-height),
      clamp(2rem, calc(var(--fluid-min) * var(--scale-offer-scroll-compact)), 2.58rem)
    );
    --goal-chip-min-height-compact: max(
      var(--button-min-height),
      clamp(1.95rem, calc(var(--fluid-block) * var(--scale-type-fluid-lg)), 2.28rem)
    );
    --goal-chip-padding-block-base: var(--layout-chip-padding-block);
    --goal-chip-padding-inline-base: var(--layout-chip-padding-inline);
    --goal-chip-padding-block-compact: var(--layout-chip-padding-block-compact);
    --goal-chip-padding-inline-compact: clamp(
      0.5rem,
      calc(var(--fluid-inline) * var(--scale-offer-faq-current)),
      0.68rem
    );
    --goal-chip-font-size-base: var(--type-fine);
    --goal-chip-mobile-scale: var(--scale-prominent-control);
    --choice-card-min-height-base: max(
      var(--button-min-height),
      clamp(5.34rem, calc(var(--fluid-block) * var(--scale-profile-stack-divider)), 7.02rem)
    );
    --choice-card-min-height-wide: max(
      var(--button-min-height),
      clamp(6.96rem, calc(var(--fluid-block) * var(--scale-profile-goals-stage-compact)), 8.88rem)
    );
    --icon-xs: clamp(0.68rem, calc(var(--adaptive-icon-size) * var(--scale-hit)), 0.86rem);
    --icon-sm: clamp(0.9rem, calc(var(--adaptive-icon-size) * var(--scale-meta-tight)), 1.1rem);
    --icon-md: clamp(
      1.16rem,
      calc(var(--adaptive-icon-size) * var(--scale-offer-button-inline)),
      1.54rem
    );
    --icon-lg: clamp(
      2.25rem,
      calc(var(--adaptive-icon-size) * var(--scale-layout-section)),
      2.75rem
    );
    --icon-watch-chat-size: clamp(
      1.2rem,
      calc(var(--fluid-min) * var(--scale-accordion-body-gap)),
      1.3rem
    );
    --control-icon-size: var(--adaptive-icon-size);
    --control-icon-size-sm: var(--icon-xs);
    --control-icon-size-md: var(--icon-sm);
    --control-gift-template-hit-size: max(var(--control-visual-size-lg), var(--button-min-height));
    --control-gift-template-dot-size: clamp(
      0.5rem,
      calc(var(--fluid-min) * var(--scale-inset-loose)),
      0.68rem
    );
    --control-gift-template-arrow-inline: clamp(
      0.54rem,
      calc(var(--fluid-min) * var(--scale-meta-tight)),
      0.68rem
    );
    --control-gift-template-arrow-block: clamp(
      0.45rem,
      calc(var(--fluid-min) * var(--scale-composer-textarea-block)),
      0.56rem
    );
    --readiness-action-inline: clamp(
      4.5rem,
      calc(var(--fluid-inline) * var(--scale-profile-tag-inline)),
      6rem
    );
    --readiness-action-padding-block: clamp(
      0.4rem,
      calc(var(--fluid-min) * var(--scale-spacious)),
      0.45rem
    );
    --interactive-min-size-fine: 2.25rem;
    --interactive-min-size-coarse: 2.75rem;
    --touch-target-min-size: var(--interactive-min-size-coarse);
    --interactive-target-size: var(--interactive-min-size);
    --interactive-target-size-compact: max(
      var(--button-compact-min-height),
      var(--interactive-min-size)
    );
    --interactive-icon-hit-size: max(var(--control-sm), var(--interactive-target-size));
    --interactive-icon-hit-size-compact: max(
      var(--button-compact-min-height),
      var(--interactive-target-size)
    );
    --interactive-inline-hit-outset-block: max(
      var(--space-2),
      calc((var(--interactive-target-size) - 1em * var(--leading-caption)) / 2)
    );
    --interactive-inline-hit-outset-inline: max(
      var(--space-1),
      calc(var(--space-2) * var(--scale-copy-subtle))
    );
    --control-hit-size: var(--interactive-target-size);
    --control-visual-size-sm: clamp(
      1.16rem,
      calc(var(--adaptive-control-size) * var(--scale-type-control-fluid)),
      1.35rem
    );
    --control-visual-size-md: clamp(
      1.35rem,
      calc(var(--adaptive-control-size) * var(--scale-roomy)),
      1.72rem
    );
    --control-visual-size-lg: var(--adaptive-control-size);
    --field-min-height: max(var(--button-min-height), var(--touch-target-min-size));
    --field-padding-block: var(--space-3);
    --field-control-min-height: max(
      var(--button-min-height),
      clamp(
        var(--touch-target-min-size),
        calc(var(--fluid-min) * var(--scale-panel-fluid)),
        3.15rem
      )
    );
    --field-control-padding-block: clamp(
      0.62rem,
      calc(var(--fluid-min) * var(--scale-hit-lg)),
      0.82rem
    );
    --field-registration-control-min-height: max(
      var(--button-min-height),
      clamp(3.25rem, calc(var(--fluid-min) * var(--scale-surface-fluid)), 4rem)
    );
    --field-registration-control-padding-block: clamp(
      0.82rem,
      calc(var(--fluid-min) * var(--scale-layout-stack-tight)),
      1.08rem
    );
    --field-rules-input-min-height: max(
      var(--button-min-height),
      clamp(2.45rem, calc(var(--fluid-min) * var(--scale-panel-fluid)), 3rem)
    );
    --field-rules-input-padding-block-start: clamp(
      0.42rem,
      calc(var(--fluid-min) * var(--scale-emphasis)),
      0.48rem
    );
    --field-rules-input-padding-block-end: clamp(
      0.38rem,
      calc(var(--fluid-min) * var(--scale-meta-loose)),
      0.42rem
    );
    --form-field-font-weight: 320;
    --form-field-text-color: rgba(255, 255, 255, 0.7);
    --form-field-border-color: rgba(255, 255, 255, 0.7);
    --form-field-border-color-focus: rgba(255, 255, 255, 0.85);
    --form-field-border-width: var(--line-width-thin);
    --form-placeholder-color: var(--form-field-text-color);
    --form-placeholder-muted-color: rgba(255, 255, 255, 0.42);
    --form-action-border: rgba(255, 255, 255, 0.72);
    --form-action-border-hover: rgba(255, 255, 255, 1);
    --form-action-bg-hover: rgba(255, 255, 255, 0.94);
    --form-action-color: rgba(255, 255, 255, 0.92);
    --form-quiet-link-color: rgba(255, 255, 255, 0.5);
    --form-quiet-link-hover-color: rgba(255, 255, 255, 0.64);
    --segmented-inset: 0.25rem;
    --segmented-inset-compact: 0.125rem;

    --auth-top-link-padding-scale: 1.3225;
    --auth-top-link-padding-scale-compact: 0.991875;
    --auth-top-link-icon-scale: 0.6;
    --auth-top-link-icon-scale-compact: 0.45;
    --auth-top-link-gap-scale: 3;
    --auth-top-link-gap-scale-compact: 2.025;
    --auth-top-link-compact-panel-scale: 1.2;

    --panel-notice-size: var(--adaptive-detail-size);
    --panel-notice-emphasis-size: var(--adaptive-detail-size);

    --goal-option-label-size: var(--adaptive-copy-size);
    --goal-custom-label-size: var(--type-panel-label);

    --form-legend-size: var(--type-panel-label);
    --form-label-size: var(--adaptive-detail-size);
    --form-field-size: var(--type-body);
    --form-hint-size: var(--adaptive-detail-size);
    --form-section-heading-size: var(--type-body-large);
    --form-card-copy-size: var(--adaptive-copy-size);
    --form-card-heading-size: var(--type-body);
    --form-card-detail-size: var(--adaptive-detail-size);
    --form-card-meta-size: var(--type-caption);
    --form-list-copy-size: var(--adaptive-copy-size);
    --form-status-heading-size: var(--type-body);
    --offer-access-summary-size: calc(var(--adaptive-detail-size) * var(--scale-soft));
    --login-form-text-size: var(--type-login-control);
    --login-contact-title-size: var(--type-login-small);
    --login-subtitle-size: var(--type-body);
    --payment-inline-copy-size: var(--adaptive-copy-size);
    --payment-waiting-label-size: var(--adaptive-copy-size);
    --payment-success-heading-size: var(--type-display);
    --payment-success-copy-size: var(--type-body);
    --registration-identity-title-size: var(--type-body);

    /* button engine — one sizing system, two visual modes: quiet and shimmer */
    --interactive-min-size: var(--interactive-min-size-fine);
    --button-font-size: var(--adaptive-button-font-size);
    --button-line-height: var(--leading-control);
    --button-min-height: max(var(--adaptive-button-min-height), var(--interactive-min-size));
    --button-width: max-content;
    --button-min-width: max-content;
    --button-max-width: 100%;
    --button-white-space: nowrap;
    --button-text-wrap: nowrap;
    --button-overflow-wrap: normal;
    --display-word-break: normal;
    --display-overflow-wrap: normal;
    --display-hyphens: none;
    --button-padding-block: var(--adaptive-button-padding-block);
    --button-padding-inline: var(--adaptive-button-padding-inline);
    --button-gap: var(--layout-control-gap);
    --button-group-gap: var(--layout-base-gap);
    --button-radius: var(--adaptive-button-radius);
    --button-icon-size: var(--adaptive-icon-size);
    --button-border: var(--line-width-thin) solid rgba(255, 255, 255, 0.22);
    --button-border-hover: var(--line-width-thin) solid rgba(255, 255, 255, 0.34);
    --button-bg: transparent;
    --button-bg-hover: rgba(255, 255, 255, 0.08);
    --button-bg-active: rgba(255, 255, 255, 0.13);
    --button-color: rgba(255, 255, 255, 0.72);
    --button-color-hover: var(--text);
    --button-compact-min-height: max(
      calc(var(--adaptive-button-min-height) * var(--scale-soft)),
      var(--interactive-min-size)
    );
    --button-compact-padding-inline: calc(
      var(--adaptive-button-padding-inline) * var(--scale-soft)
    );
    --button-compact-font-size: var(--type-panel-control-small);
    --rules-action-padding-block-base: clamp(
      0.44rem,
      calc(var(--fluid-min) * var(--scale-spacious)),
      0.5rem
    );
    --rules-action-padding-inline-base: clamp(
      0.96rem,
      calc(var(--fluid-min) * var(--scale-accordion-body-gap)),
      1.2rem
    );
    --rules-action-min-height-base: max(
      var(--button-min-height),
      clamp(2.7rem, calc(var(--fluid-min) * var(--scale-panel-fluid)), 3.05rem)
    );
    --rules-start-padding-block-base: clamp(
      0.3rem,
      calc(var(--fluid-min) * var(--scale-roomy)),
      0.34rem
    );
    --rules-start-padding-inline-base: clamp(
      0.78rem,
      calc(var(--fluid-min) * var(--scale-type-fluid-md-mid)),
      0.92rem
    );
    --rules-start-min-height-base: max(
      var(--button-min-height),
      clamp(2.1rem, calc(var(--fluid-min) * var(--scale-offer-scroll-compact)), 2.38rem)
    );
    --button-transition:
      opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out),
      color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out),
      border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);

    --shell-gutter: var(--layout-shell-gutter-base);
    --stage-gutter: var(--layout-stage-gutter-base);

    --container-readable: min(34rem, var(--container-cqw));
    --container-readable-stage: min(34rem, var(--container-stage-safe-inline));
    --container-offer-message: min(38rem, var(--container-stage-safe-inline));
    --container-query-wide: 64rem;
    --container-query-split-panel: 48rem;
    --container-query-compact: 30rem;
    --container-query-narrow: 26rem;
    --container-query-tight: 24rem;
    --container-query-low: 28rem;
    --container-query-short: 30rem;
    --container-query-dialog: 46rem;
    --container-query-feed: 40rem;
    --container-query-readable-compact: 34rem;
    --container-query-stage: 58rem;
    --container-query-offer-inline: 38rem;
    --container-query-wide-below: 63.999rem;
    --viewport-query-split-wide: 64rem;
    --viewport-query-split-wide-max: 63.999rem;
    --viewport-query-split-wide-fallback: 63.99rem;
    --viewport-query-tablet: 48rem;
    --viewport-query-tablet-max: 46rem;
    --viewport-query-medium: 40rem;
    --viewport-query-compact: 30rem;
    --viewport-query-phone-tight: 22.5rem;
    --viewport-query-laptop: 80rem;
    --viewport-query-2k: 112rem;
    --viewport-query-ultrawide: 140rem;
    --viewport-query-landscape-low: 32rem;
    --viewport-query-offer-short: 42rem;
    --container-login-contact-inline: min(23rem, 100%);
    --container-join-auth-panel-inline: min(
      21rem,
      calc(100vw - var(--shell-gutter) * var(--scale-double))
    );
    --container-join-auth-field-inline: min(
      20rem,
      calc(100vw - var(--shell-gutter) * var(--scale-double))
    );
    --container-offer-control-inline: min(27rem, var(--container-safe-inline));
    --container-note-focus: min(52rem, 100%);
    --container-legal-modal: min(50rem, var(--container-safe-inline));
    --container-telegram-prompt: var(--container-legal);
    --container-telegram-prompt-wide: var(--container-feed-post);
    --container-login-missing-action-inline: min(
      16.5rem,
      calc((100vw - var(--shell-gutter) * var(--scale-back-arrow)) / 2)
    );
    --container-rules-input-inline: min(9.5rem, 100%);
    --container-rules-input-min-inline: min(8rem, 100%);
    --container-login-field-min-inline: min(13.5rem, 100%);
    --container-login-email-min-inline: min(13.5rem, 100%);
    --container-profile-telegram-loading-min: min(12rem, var(--container-cqi-readable-compact));
    --container-window-panel-copy-inline: min(
      22rem,
      calc(100% - var(--shell-gutter) * var(--scale-double))
    );
    --container-gift-registration-note-inline: min(21rem, var(--container-stage-safe-inline));
    --container-renewal-error-inline: min(
      26rem,
      calc(100vw - var(--shell-gutter) * var(--scale-double))
    );
    --container-stage-copy-inline: min(22rem, var(--container-stage-safe-inline));
    --container-offer-top-copy-inline: min(26rem, var(--container-stage-safe-inline));
    --container-grid-card-min: 18rem;
    --layout-messages-empty-min-block: min(
      16rem,
      calc(var(--fluid-block) * var(--scale-offer-block-tall))
    );
    --layout-message-attachment-placeholder-min-block: min(
      7rem,
      calc(var(--fluid-block) * var(--scale-profile-actions))
    );
    --layout-message-confirm-min-block: min(
      5rem,
      calc(var(--fluid-block) * var(--scale-profile-confirm-inline))
    );
    --type-composer-copy-floor: 1rem;
    --app-press-scale-soft: 0.985;
    --app-press-scale-medium: 0.95;
    --app-press-scale-strong: 0.94;
    --container-readable-roomy: min(36rem, var(--container-cqw));
    --container-readable-wide: min(44rem, var(--container-cqw));
    --container-panel: min(48rem, var(--container-cqw));
    --container-stage: min(58rem, var(--container-safe-inline));
    --container-stage-wide: min(82rem, var(--container-safe-inline));
    --container-form: min(42rem, var(--container-cqw));
    --container-form-narrow: min(30rem, var(--container-cqw));
    --container-dialog: min(42rem, var(--container-query-space-safe-inline));
    --container-review-controls: min(30rem, var(--container-cqw));
    --container-review-video: min(58rem, var(--container-cqw));
    --container-dialog-list: min(48rem, var(--container-safe-inline));
    --container-feed-post: min(38rem, var(--container-space-safe-inline));
    --container-feed-post-compact: min(100%, var(--container-query-safe-inline));
    --container-feed-edit: min(28rem, var(--container-cqw));
    --container-choice-options: min(31rem, var(--container-cqi));
    --container-choice-options-wide: min(82rem, var(--container-cqi));
    --container-registration-rules: var(--accordion-inline);
    --container-readiness-panel: min(30rem, var(--container-safe-inline));
    --container-offer-scroll: min(34rem, var(--container-safe-inline));
    --container-stage-status: min(28rem, var(--container-stage-safe-inline));
    --container-notice: min(28rem, var(--container-space-safe-inline));
    --container-legal: min(31rem, var(--container-space-safe-inline));
    --container-stage-local: min(58rem, 100%);
    --container-form-local: min(42rem, 100%);
    --container-form-medium-local: min(36rem, 100%);
    --container-form-narrow-local: min(30rem, 100%);
    --container-result-local: min(27rem, 100%);
    --container-form-compact-local: min(24rem, 100%);
    --container-feedback-local: min(22rem, 100%);
    --container-nav-compact-local: min(20rem, 100%);
    --container-profile-fallback: min(32rem, 100%);
    --container-profile-settings: min(36rem, 100%);
    --container-profile-actions: min(31rem, 100%);
    --container-profile-actions-centered: min(27rem, 100%);
    --container-profile-tags-many: min(48rem, 100%);
    --container-profile-tags-phone: min(18rem, 100%);
    --container-profile-tags-split: min(25rem, 100%);
    --container-profile-tags-split-many: min(28rem, 100%);
    --container-profile-inline-form: min(20rem, 100%);
    --container-profile-loading-email: min(15rem, var(--container-cqi-action-wide));
    --container-profile-loading-access: min(11rem, var(--container-cqi-readable-compact));
    --container-profile-split-inset: clamp(
      3rem,
      calc(var(--fluid-inline) * var(--scale-gift-zone)),
      10rem
    );
    --container-profile-split-safe-inline: calc(
      var(--container-cqw) - var(--container-profile-split-inset)
    );
    --container-profile-split: min(62rem, var(--container-profile-split-safe-inline));
    --container-profile-split-centered: min(36rem, var(--container-profile-split-safe-inline));
    --container-stage-browse: 60rem;
    --container-stage-copy: 44rem;
    --container-panel-summary: 42rem;
    --container-stage-row: min(42rem, 100%);
    --container-watch: min(36rem, var(--container-cqi-media-compact));
    --container-watch-video: min(58rem, 100%);
    --container-deadline-pill: min(15rem, var(--container-cqi-control));
    --container-deadline-pill-compact: min(100%, var(--container-cqi-compact));
    --container-messages-system: min(34rem, 92%);
    --container-messages-media: min(22rem, var(--container-cqi-media));
    --container-messages-media-single: min(23rem, var(--container-cqi-media));
    --container-messages-media-compact: min(19rem, var(--container-cqi-media-compact));
    --container-messages-media-single-compact: min(20rem, var(--container-cqi-media-compact));
    --container-messages-media-wide: min(24rem, var(--container-cqi-media-wide));
    --container-messages-media-single-wide: min(25rem, var(--container-cqi-media-wide));
    --container-messages-delete-panel: min(8rem, var(--container-cqi-popover));
    --container-messages-edit: min(24rem, var(--container-cqi-media));
    --messages-media-max-block-base: min(
      30rem,
      calc(var(--fluid-block) * var(--scale-fluid-block-62))
    );
    --messages-composer-textarea-max-block-base: clamp(
      7rem,
      calc(var(--fluid-block) * var(--scale-type-fluid-hero-wide)),
      11rem
    );
    --measure-prose: min(38ch, 100%);
    --measure-summary: min(36ch, 100%);
    --measure-hint: min(30ch, 100%);
    --copy-width: min(34rem, 100%);
    --copy-wide: min(44rem, 100%);
    --centered-actions-min-block: min(22rem, var(--layout-block-centered-actions));
    --centered-actions-min-block-compact: min(18rem, var(--layout-block-centered-actions-compact));
    --system-notice-width: min(21rem, 100%);
    --system-notice-padding-block: clamp(
      0.6rem,
      calc(var(--fluid-min) * var(--scale-inset-loose)),
      0.82rem
    );
    --system-notice-padding-inline: clamp(
      0.78rem,
      calc(var(--fluid-inline) * var(--scale-double)),
      1.05rem
    );
    --system-notice-gap: clamp(0.2rem, calc(var(--fluid-min) * var(--scale-snug)), 0.38rem);
    --status-error-slot-min-height: clamp(3.1rem, var(--layout-block-status-error-slot), 4.35rem);
    --status-error-slot-offset: clamp(0.45rem, var(--layout-block-status-error-offset), 0.7rem);
    --status-error-gap: clamp(0.14rem, calc(var(--fluid-min) * var(--scale-micro)), 0.18rem);

    --anchor-offset: clamp(2rem, calc(var(--fluid-block) * var(--scale-profile-divider)), 4.5rem);

    --radius-xs: 0.48rem;
    --radius-sm: 0.65rem;
    --radius-md: 0.9rem;
    --radius-field: 1.05rem;
    --radius-lg: 1.25rem;
    --radius-xl: 1.4rem;
    --radius-offer-control: clamp(0.42rem, calc(var(--fluid-inline) * var(--scale-unity)), 0.62rem);
    --radius-profile-schedule: clamp(
      1rem,
      calc(var(--fluid-min) * var(--scale-edit-block)),
      1.35rem
    );
    --radius-pill: 999px;
    --list-indent: clamp(1rem, calc(var(--fluid-inline) * var(--scale-offer-summary)), 1.15rem);

    /* hairlines — единая шкала непрозрачности линий */
    --line-1: rgba(255, 255, 255, 0.06);
    --line-2: rgba(255, 255, 255, 0.12);
    --line-3: rgba(255, 255, 255, 0.18);
    --line-4: rgba(255, 255, 255, 0.28);

    /* системные размеры круглых control-кнопок */
    --control-sm: max(
      var(--interactive-min-size),
      clamp(
        2.25rem,
        calc(var(--adaptive-control-size) * var(--scale-composer-textarea-block)),
        2.4rem
      )
    );
    --control-md: max(
      var(--interactive-min-size),
      clamp(2.4rem, calc(var(--adaptive-control-size) * var(--scale-meta-tight)), 2.6rem)
    );
    --control-lg: max(
      var(--interactive-min-size),
      clamp(2.55rem, calc(var(--adaptive-control-size) * var(--scale-fluid-inline-boost)), 2.75rem)
    );
    --back-control-size: clamp(
      1.8rem,
      min(
        calc(var(--fluid-inline) * var(--scale-surface-fluid)),
        calc(var(--fluid-block) * var(--scale-offer-panel-pad))
      ),
      2.35rem
    );
    --back-arrow-size: clamp(
      0.64rem,
      min(
        calc(var(--fluid-inline) * var(--scale-route-fluid-end-compact)),
        calc(var(--fluid-block) * var(--scale-offer-faq-current))
      ),
      1rem
    );
    --back-control-opacity: 0.45;
    --back-control-hover-opacity: 0.75;
    --back-zone-height: clamp(4.5rem, var(--layout-block-back-zone), 8rem);
    --stage-row-gap: clamp(0.45rem, calc(var(--fluid-min) * var(--scale-double)), 1rem);
    --stage-control-size: max(
      var(--interactive-min-size),
      clamp(2.3rem, calc(var(--fluid-min) * var(--scale-panel-fluid)), 3rem)
    );
    --stage-play-size: max(
      var(--interactive-min-size),
      clamp(4.4rem, calc(var(--fluid-min) * var(--scale-profile-divider)), 5.8rem)
    );
    --stage-rotator-min-height: clamp(
      5.5rem,
      calc(var(--fluid-min) * var(--scale-login-missing-denom)),
      8rem
    );
    --stage-rotator-min-height-compact: clamp(
      3.2rem,
      calc(var(--fluid-block) * var(--scale-layout-hero)),
      4rem
    );
    --spinner-page-size: clamp(3rem, calc(var(--fluid-min) * var(--scale-layout-hero)), 4.4rem);
    --spinner-block-min-height: clamp(
      5.5rem,
      calc(var(--fluid-min) * var(--scale-login-missing-denom)),
      8rem
    );

    /* z-index — одна шкала, без литералов */
    --z-base: 0;
    --z-overlay: 1;
    --z-fixed: 3;
    --z-sticky: 4;
    --z-float: 12;
    --z-legal: 24;
    --z-modal: 40;
    --z-stage-play: 50;
    --z-payment-provider-frame: 6000;

    --focus-backdrop-blur: 6px;
    --focus-backdrop-scrim: rgba(4, 10, 16, 0.44);
    --focus-backdrop-scrim-fallback: rgba(4, 10, 16, 0.58);
    --focus-backdrop-duration: 400ms;
    --focus-backdrop-ease: var(--ease);
    --focus-backdrop-blur-delay: 72ms;

    --split-panel-duration: 400ms;
    --split-panel-ease: var(--ease-out);
    --split-panel-travel: 100%;
    --split-panel-surface: var(--page);

    --backdrop-blur-sm: 10px;
    --media-frame-backdrop-blur: blur(14px);

    --font-sans:
      ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
      "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --dur: 180ms;
    --dur-slow: 360ms;
  }
}

@layer lifeos.reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html,
  body {
    margin: 0;
    min-height: 100%;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
    background: var(--page);
    color: var(--text-soft);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-optical-sizing: auto;
    font-stretch: normal;
    font-synthesis: none;
    font-feature-settings: "kern" 1;
    -webkit-tap-highlight-color: transparent;
  }

  body {
    min-height: 100dvh;
    font-size: var(--fs-md);
    line-height: var(--lh-base);
    letter-spacing: var(--tracking-body);
  }

  #root {
    min-height: 100dvh;
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    background: transparent;
  }

  @keyframes flow-step-reveal-in {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  .flow-step-reveal {
    animation: flow-step-reveal-in var(--dur) var(--ease-out) both;
    min-width: 0;
  }

  @media (prefers-reduced-motion: reduce) {
    .flow-step-reveal {
      animation: none;
    }
  }

  body.page-home {
    height: var(--home-viewport-height);
    min-height: var(--home-viewport-height);
    overflow: hidden;
    overscroll-behavior: none;
  }

  body.page-home #root {
    height: var(--home-viewport-height);
    min-height: var(--home-viewport-height);
    overflow: hidden;
  }

  body.page-messages,
  body.page-profile {
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
  }

  body.page-messages #root,
  body.page-profile #root {
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
  }

  @supports selector(html:has(body.page-home)) {
    html:has(body.page-home) {
      height: var(--home-viewport-height);
      min-height: var(--home-viewport-height);
      overflow: hidden;
      overscroll-behavior: none;
    }
  }

  @supports selector(html:has(body.page-messages)) {
    html:has(body.page-messages),
    html:has(body.page-profile) {
      height: 100dvh;
      min-height: 100dvh;
      overflow: hidden;
      overscroll-behavior: none;
    }
  }

  h1,
  h2,
  h3,
  p,
  ul,
  ol,
  dl,
  figure,
  blockquote {
    margin: 0;
  }
  ul,
  ol {
    padding: 0;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  code {
    font-family: var(--font-mono);
    font-size: var(--type-code-size, 0.92em);
    font-variant-numeric: tabular-nums;
  }

  input,
  textarea,
  button,
  select {
    font: inherit;
    color: inherit;
  }

  button {
    cursor: pointer;
  }

  :focus-visible {
    outline: var(--focus-ring-width) solid var(--text);
    outline-offset: var(--focus-ring-offset);
  }

  ::selection {
    background: var(--accent);
    color: var(--accent-ink);
  }
  @supports (height: 100svh) {
    :root {
      --viewport-small-height: 100svh;
    }
  }

  @supports (width: 1cqw) {
    :root {
      --fluid-container-inline: 1cqw;
      --container-cqw: 100cqw;
    }
  }

  @supports (width: 1cqi) {
    :root {
      --cqi-unit: 1cqi;
      --fluid-inline: 1cqi;
      --fluid-container-inline: 1cqi;
      --container-cqi: 100cqi;
      --container-cqi-compact: 32cqi;
      --container-cqi-control: 38cqi;
      --container-cqi-popover: 52cqi;
      --container-cqi-media-wide: 54cqi;
      --container-cqi-readable-compact: 68cqi;
      --container-cqi-readable-narrow: 68.8cqi;
      --container-cqi-media: 72cqi;
      --container-cqi-action-wide: 78cqi;
      --container-cqi-media-compact: 82cqi;
      --container-cqi-visual-small: 24cqi;
    }
  }

  @supports (height: 1cqb) {
    :root {
      --fluid-container-block: 1cqb;
      --container-cqb: 100cqb;
      --layout-block-stage-min: 50cqb;
      --layout-block-split-stage-compact: 44cqb;
      --layout-block-watch-panel-compact: 56cqb;
      --layout-block-stage-tablet: 52cqb;
      --layout-block-payment-overlay-offset: 62cqb;
      --layout-block-profile-split-divider: 26cqb;
      --layout-block-choice-panel-gap-landscape: 2.6cqb;
      --layout-block-choice-card-padding-landscape: 2.28cqb;
      --layout-block-choice-card-min-landscape: 18cqb;
      --layout-block-stage-rotator-compact: 12cqb;
      --layout-block-centered-actions: 48cqb;
      --layout-block-centered-actions-compact: 46cqb;
      --layout-block-status-error-slot: 7.2cqb;
      --layout-block-status-error-offset: 1.1cqb;
      --layout-block-back-zone: 15cqb;
      --layout-block-profile-footer-compact: 7cqb;
      --layout-block-plus-sheet-copy-landscape: 52cqb;
      --layout-block-plus-sheet-gap-compact: 1.9cqb;
    }
  }

  @supports (width: 1cqmin) and (width: 1cqmax) {
    :root {
      --fluid-min: 1cqmin;
      --fluid-max: 1cqmax;
      --fluid-container-min: 1cqmin;
      --fluid-container-max: 1cqmax;
      --container-cqmin: 100cqmin;
      --container-cqmax: 100cqmax;
    }
  }

  @supports (height: 1cqh) {
    .home-stage,
    .split-stage,
    .lesson-stage,
    .simple-stage,
    .panel,
    .form-panel,
    .watch-panel,
    .plus-sheet,
    .profile-panel,
    .messages-shell,
    .feed-shell,
    .feed-comments-dialog,
    [data-e2e="feed-comments-dialog"],
    .choice-panel,
    .legacy-course-archive,
    .registration-section,
    .legal-modal,
    .payment-card,
    .payment-inline-overlay,
    .message-attachment-fullscreen-viewer {
      --fluid-block: 1cqh;
      --fluid-container-block: 1cqh;
    }
  }

  @media (hover: none), (pointer: coarse) {
    :root {
      --interactive-min-size: var(--interactive-min-size-coarse);
      --focus-backdrop-blur: 4px;
    }
  }
}

@layer lifeos.layout {
  /* ==========================================================================
   Shells
   ========================================================================== */

  .home-shell {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: var(--home-viewport-height);
    min-height: var(--home-viewport-height);
    max-height: var(--home-viewport-height);
    overflow-x: hidden;
    overflow-x: clip;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: y mandatory;
    scrollbar-gutter: stable both-edges;
    background: transparent;
  }

  .split-stage:not(.gift-template-video-stage),
  .split-stage:not(.gift-template-video-stage) .stage-media-shell {
    background: transparent;
  }

  .home-shell[data-telegram-prompt="true"] {
    overflow: hidden;
    scroll-snap-type: none;
  }

  .home-shell[data-telegram-prompt="true"] .home-top-links,
  .home-shell[data-telegram-prompt="true"] .home-overlay {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }

  .auth-top-links {
    --auth-top-link-edge-offset: var(--space-2);
    --auth-top-link-gap: calc(var(--layout-control-gap) * var(--auth-top-link-gap-scale));
    --auth-top-link-padding-block: calc(var(--space-1) * var(--auth-top-link-padding-scale));
    --auth-top-link-padding-inline: calc(var(--space-2) * var(--auth-top-link-padding-scale));
    --auth-top-link-icon-size: calc(var(--icon-lg) * var(--auth-top-link-icon-scale));

    position: fixed;
    top: max(var(--safe-area-top), var(--auth-top-link-edge-offset));
    right: max(var(--safe-area-right), var(--auth-top-link-edge-offset));
    display: inline-grid;
    grid-auto-flow: row;
    grid-auto-rows: var(--auth-top-link-icon-size);
    align-items: center;
    justify-items: center;
    justify-content: center;
    gap: var(--auth-top-link-gap);
    padding: var(--auth-top-link-padding-block) var(--auth-top-link-padding-inline);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.05);
    border: var(--divider-width) solid var(--line-2);
    backdrop-filter: blur(var(--backdrop-blur-sm));
    -webkit-backdrop-filter: blur(var(--backdrop-blur-sm));
    z-index: var(--z-float);
  }

  @media (width <= var(--viewport-query-compact)) {
    .auth-top-links {
      --auth-top-link-gap: calc(
        var(--layout-control-gap) * var(--auth-top-link-gap-scale-compact) *
          var(--auth-top-link-compact-panel-scale)
      );
      --auth-top-link-padding-block: calc(
        var(--space-1) * var(--auth-top-link-padding-scale-compact) *
          var(--auth-top-link-compact-panel-scale)
      );
      --auth-top-link-padding-inline: calc(
        var(--space-2) * var(--auth-top-link-padding-scale-compact) *
          var(--auth-top-link-compact-panel-scale)
      );
      --auth-top-link-icon-size: calc(
        var(--icon-lg) * var(--auth-top-link-icon-scale-compact) *
          var(--auth-top-link-compact-panel-scale)
      );
    }
  }

  @media (max-width: 63.999rem) {
    .auth-top-links {
      top: max(var(--safe-area-top), var(--auth-top-link-edge-offset));
      right: max(var(--safe-area-right), var(--auth-top-link-edge-offset));
    }

    .top-route-notice {
      top: calc(var(--safe-area-top) + var(--space-2));
    }

    .legal-notice {
      bottom: calc(var(--safe-area-bottom) + var(--space-1));
    }
  }

  .home-stage,
  .split-stage,
  .lesson-stage,
  .simple-stage {
    position: relative;
    container-type: size;
    container-name: adaptive-surface;
    overflow: hidden;
    background: transparent;
    isolation: isolate;
  }

  .home-stage {
    height: var(--home-viewport-height);
    min-height: var(--home-viewport-height);
    max-height: var(--home-viewport-height);
    inline-size: 100%;
    max-inline-size: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .home-stage[data-window-active="false"] {
    content-visibility: auto;
    contain-intrinsic-size: auto var(--home-viewport-height);
  }

  .home-stage::before,
  .split-stage::before {
    content: none;
    background: none;
    background-color: rgba(0, 0, 0, 0);
    background-image: none;
  }

  .split-stage,
  .lesson-stage {
    min-height: var(--layout-block-stage-min);
  }

  .simple-stage {
    padding: var(--layout-surface-padding-block) var(--shell-gutter);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    text-align: center;
  }

  .simple-stage > * {
    width: 100%;
    max-width: var(--copy-width);
  }

  .simple-stage h1 {
    font-size: var(--fs-2xl);
    line-height: var(--lh-tight);
    letter-spacing: var(--tr-tight);
    font-weight: 700;
    color: var(--text);
    text-wrap: balance;
  }

  .simple-stage p {
    font-size: var(--fs-md);
    color: var(--text-soft);
    line-height: var(--lh-relaxed);
    text-wrap: pretty;
  }

  /* ==========================================================================
   Legal notice
   ========================================================================== */

  .top-route-notice {
    position: fixed;
    top: calc(var(--safe-area-top) + var(--space-2));
    left: 50%;
    z-index: var(--z-modal);
    max-width: var(--container-notice);
    padding: var(--system-notice-padding-block) var(--system-notice-padding-inline);
    color: var(--text);
    font-size: var(--fs-xs);
    font-weight: 500;
    line-height: var(--leading-comfort);
    letter-spacing: var(--tracking-none);
    text-align: center;
    background: rgba(10, 10, 10, 0.88);
    border: var(--divider-width) solid var(--hairline-strong);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-floating-notice);
    transform: translateX(-50%);
    pointer-events: none;
  }

  .legal-notice {
    position: fixed;
    left: 50%;
    bottom: calc(var(--safe-area-bottom) + var(--space-1));
    z-index: var(--z-legal);
    display: grid;
    justify-items: center;
    gap: var(--system-notice-gap);
    max-width: var(--container-legal);
    color: rgba(255, 255, 255, 0.46);
    font-size: var(--type-legal);
    line-height: var(--leading-caption);
    letter-spacing: var(--tracking-none);
    text-align: center;
    text-shadow: var(--shadow-legal-notice);
    transform: translateX(-50%);
    pointer-events: none;
  }

  .legal-notice-signature {
    margin: 0;
  }

  .legal-notice[data-mode="offerOnly"] {
    bottom: calc(var(--safe-area-bottom) + var(--space-1));
  }

  .legal-notice-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--ornament-gap-legal);
  }

  .legal-notice-link {
    position: relative;
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.1);
    text-decoration-thickness: var(--text-decoration-line-width);
    text-underline-offset: var(--text-underline-offset-link);
    pointer-events: auto;
  }

  .legal-notice-link::before {
    content: "";
    position: absolute;
    inset: calc(var(--interactive-inline-hit-outset-block) * -1)
      calc(var(--interactive-inline-hit-outset-inline) * -1);
    border-radius: var(--radius-xs);
  }

  .legal-notice-link:hover,
  .legal-notice-link:focus-visible {
    color: rgba(255, 255, 255, 0.86);
    text-decoration-color: rgba(255, 255, 255, 0.1);
  }

  .home-stage .legal-notice {
    position: absolute;
  }

  .home-stage:has(.legal-notice) {
    --home-legal-notice-stack-size: calc(
      var(--type-legal) * var(--leading-caption) * 2 + var(--ornament-gap-legal)
    );
  }

  .home-stage:has(.legal-notice) .stage-browse-bottom {
    bottom: max(
      12%,
      calc(
        var(--safe-area-bottom) + var(--space-1) + var(--home-legal-notice-stack-size) +
          var(--space-3)
      )
    );
  }

  .home-shell[data-telegram-prompt="true"] .legal-notice {
    display: none;
  }

  .page-join-group:not(:has(.participant-shell--registration)) .legal-notice {
    display: none;
  }

  #root:has(.participant-shell--offer) .legal-notice {
    display: none;
  }

  #root:has(.participant-shell--goal-composition) .legal-notice {
    display: none;
  }

  #root:has(.registration-rules-section) .legal-notice {
    display: none;
  }

  .legal-modal-backdrop {
    position: fixed;
    inset: var(--overlay-full-inset);
    z-index: var(--z-modal);
    display: block;
    padding: 0;
    overflow: hidden;
    background: transparent;
    isolation: isolate;
  }

  .legal-modal-backdrop .focus-backdrop__content {
    width: 100%;
    min-height: 100%;
  }

  @media (max-width: 63.999rem) {
    :is(.legal-modal-backdrop, .reviews-modal) {
      inset: 0;
      width: 100%;
      max-width: 100%;
      height: auto;
      min-height: 0;
      max-height: none;
      overflow-x: hidden;
      overflow-x: clip;
    }

    .legal-modal-backdrop .focus-backdrop__content,
    .legal-modal {
      min-height: 0;
      height: 100%;
      max-height: 100%;
    }

    .reviews-page-heading {
      left: max(var(--safe-area-left), var(--space-3));
      bottom: max(var(--safe-area-bottom), var(--space-3));
      max-width: min(24rem, calc(100% - var(--shell-gutter) * 2));
    }

    .reviews-page-back {
      top: max(var(--safe-area-top), var(--space-3));
      left: max(var(--safe-area-left), var(--space-3));
    }

    .reviews-counter {
      top: calc(var(--safe-area-top) + 9svh);
    }
  }

  body:has(.reviews-modal) .home-shell {
    overflow: hidden;
    scroll-snap-type: none;
  }

  body:has(.reviews-modal)
    .home-shell
    :is(.home-top-links, .home-overlay, .stage-overlay, .legal-notice, .stage-video-play-button) {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  body:has(.reviews-modal) .home-shell video.stage-media {
    filter: blur(var(--focus-backdrop-blur));
    transform: scale(1.018);
  }

  .participant-shell--reviews {
    position: fixed;
    inset: 0;
    isolation: isolate;
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
    background: transparent;
  }

  .participant-shell--reviews > .split-stage {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    max-height: 100dvh;
  }

  .participant-shell--reviews > .split-stage > .focus-backdrop {
    --focus-backdrop-scrim: rgba(4, 8, 12, 0.52);
  }

  .reviews-page-heading {
    position: fixed;
    left: max(var(--safe-area-left), var(--space-3));
    bottom: max(var(--safe-area-bottom), var(--space-3));
    z-index: calc(var(--z-modal) + 4);
    max-width: min(24rem, calc(100vw - var(--shell-gutter) * 2));
    margin: 0;
    color: rgba(255, 255, 255, 0.42);
    font-size: var(--fs-xs);
    font-weight: 560;
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-none);
  }

  .reviews-page-back {
    position: fixed;
    top: max(var(--safe-area-top), var(--space-3));
    left: max(var(--safe-area-left), var(--space-3));
    z-index: calc(var(--z-modal) + 4);
    display: grid;
    place-items: center;
    width: max(var(--touch-target-min-size), 2.9rem);
    height: max(var(--touch-target-min-size), 2.9rem);
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.45rem;
    line-height: 1;
    text-decoration: none;
    border: var(--divider-width) solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-pill);
    background: rgba(8, 10, 14, 0.48);
    box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(var(--backdrop-blur-sm)) saturate(1.16);
    -webkit-backdrop-filter: blur(var(--backdrop-blur-sm)) saturate(1.16);
  }

  .reviews-page-pager {
    display: grid;
    place-items: center;
    gap: var(--space-2);
    min-height: var(--reviews-item-height);
    padding: 0 var(--shell-gutter);
    color: rgba(255, 255, 255, 0.72);
    font-size: var(--fs-xs);
    line-height: var(--leading-tight);
    text-align: center;
    scroll-snap-align: center;
  }

  .reviews-page-pager a {
    padding: var(--space-2) var(--space-3);
    color: inherit;
    text-decoration: none;
    border: var(--divider-width) solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-pill);
    background: rgba(8, 10, 14, 0.48);
    backdrop-filter: blur(var(--backdrop-blur-sm)) saturate(1.16);
    -webkit-backdrop-filter: blur(var(--backdrop-blur-sm)) saturate(1.16);
  }

  .reviews-modal {
    --reviews-item-height: min(calc(100svh * 0.3), 15rem);
    --reviews-text-size: clamp(1.42rem, calc(var(--fluid-min) * 5.2), 3.2rem);
    --reviews-time-size: calc(var(--reviews-text-size) / 2);

    position: fixed;
    inset: 0;
    z-index: calc(var(--z-modal) + 1);
    display: grid;
    grid-template-rows: 1fr;
    min-height: 100dvh;
    color: var(--text);
    container-type: size;
    container-name: adaptive-surface;
  }

  .reviews-counter {
    position: fixed;
    top: calc(var(--safe-area-top) + 9svh);
    left: 50%;
    z-index: calc(var(--z-modal) + 4);
    transform: translateX(-50%);
    padding: clamp(0.24rem, calc(var(--fluid-min) * 0.82), 0.42rem)
      clamp(0.72rem, calc(var(--fluid-min) * 1.42), 1rem);
    color: rgba(255, 255, 255, 0.68);
    font-size: clamp(0.68rem, calc(var(--fluid-min) * 1.6), 0.84rem);
    font-weight: 640;
    line-height: 1;
    border: var(--divider-width) solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-pill);
    background: rgba(8, 10, 14, 0.54);
    box-shadow: 0 0.5rem 1.75rem rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(var(--backdrop-blur-sm)) saturate(1.16);
    -webkit-backdrop-filter: blur(var(--backdrop-blur-sm)) saturate(1.16);
    pointer-events: none;
  }

  .reviews-track {
    align-self: stretch;
    width: min(100%, var(--container-stage-safe-inline));
    height: 100dvh;
    margin: 0 auto;
    padding-block: calc(100dvh * 0.5 - var(--reviews-item-height) * 0.5);
    overflow-x: hidden;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
    overscroll-behavior: contain;
  }

  .reviews-track::-webkit-scrollbar {
    display: none;
  }

  .reviews-item {
    display: grid;
    align-content: center;
    justify-items: center;
    min-height: var(--reviews-item-height);
    padding: 0 var(--shell-gutter);
    text-align: center;
    scroll-snap-align: center;
    opacity: 0;
    transition:
      opacity 260ms var(--ease),
      transform 260ms var(--ease);
    transform: scale(0.96);
  }

  .reviews-item[data-active="true"] {
    opacity: 1;
    transform: scale(1);
  }

  .reviews-item[data-adjacent="true"] {
    opacity: 0.3;
  }

  .reviews-item-text {
    max-width: min(44rem, 100%);
    margin: 0;
    font-size: var(--reviews-text-size);
    font-weight: 560;
    line-height: 1.16;
    letter-spacing: var(--tracking-none);
    text-wrap: balance;
  }

  .reviews-item-time {
    display: block;
    margin-top: clamp(0.62rem, calc(var(--fluid-min) * 1.7), 1.12rem);
    color: rgba(255, 255, 255, 0.5);
    font-size: var(--reviews-time-size);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: var(--tracking-none);
  }

  .reviews-state {
    align-self: center;
    justify-self: center;
    max-width: min(24rem, var(--container-stage-safe-inline));
    padding: var(--space-3);
    color: rgba(255, 255, 255, 0.72);
    font-size: var(--fs-sm);
    line-height: var(--leading-comfort);
    text-align: center;
  }

  .reviews-state[data-state="error"],
  .reviews-composer-error {
    color: var(--feedback-error-color);
  }

  .reviews-tail-loader {
    height: 30svh;
  }

  .reviews-composer {
    position: fixed;
    left: max(var(--safe-area-left), var(--space-3));
    right: max(var(--safe-area-right), var(--space-3));
    bottom: calc(max(var(--safe-area-bottom), var(--space-3)) + 4rem);
    z-index: calc(var(--z-modal) + 5);
    box-sizing: border-box;
    display: grid;
    gap: var(--space-2);
    width: auto;
    max-width: 24rem;
    margin-inline: auto;
    padding: var(--space-3);
    border: var(--divider-width) solid rgba(255, 255, 255, 0.16);
    border-radius: var(--radius-md);
    background: #000;
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.28);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .reviews-composer textarea {
    width: 100%;
    min-height: 7rem;
    max-height: min(calc(100svh * 0.42), 22rem);
    field-sizing: content;
    overflow-y: auto;
    resize: vertical;
    color: var(--text);
    font: inherit;
    font-size: var(--fs-sm);
    line-height: var(--leading-comfort);
    border: var(--divider-width) solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-sm);
    background: #000;
  }

  .reviews-composer textarea::placeholder {
    color: rgba(255, 255, 255, 0.42);
  }

  .reviews-composer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: flex-end;
  }

  .legal-modal {
    display: grid;
    container-type: size;
    container-name: adaptive-surface;
    grid-template-rows: minmax(0, 1fr);
    justify-items: center;
    max-height: none;
    overflow: hidden;
    border: 0;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 13rem), rgba(7, 6, 5, 0.96);
    color: var(--text-soft);
    box-shadow: none;
  }

  .legal-modal[data-variant="fullscreen"] {
    --legal-modal-grid: var(--container-legal-modal);
    --legal-modal-block: var(--overlay-full-block);
    --legal-modal-radius: var(--overlay-fullscreen-radius);
    --legal-modal-header-padding-block-start: var(--overlay-header-padding-block-start);
    --legal-modal-content-padding-block-end: var(--overlay-content-padding-block-end);
    --legal-modal-loading-padding: var(--layout-modal-loading-padding);

    width: var(--overlay-full-inline);
    height: var(--legal-modal-block);
    border-radius: var(--legal-modal-radius);
  }

  .legal-modal[data-loading="true"] {
    grid-template-rows: 1fr;
    place-items: center;
    padding: var(--legal-modal-loading-padding);
    text-align: center;
  }

  .legal-modal-content {
    min-height: 0;
    width: min(var(--legal-modal-grid), 100%);
    max-width: 100%;
    justify-self: center;
    box-sizing: border-box;
    overflow: auto;
    padding: var(--legal-modal-header-padding-block-start) 0
      var(--legal-modal-content-padding-block-end);
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
    text-align: left;
    scrollbar-width: none;
  }

  .legal-modal-content > .lesson-accordion {
    width: min(var(--accordion-inline), 100%);
    max-width: var(--accordion-inline);
    margin-inline: auto;
  }

  .legal-modal-content::-webkit-scrollbar {
    width: var(--overlay-scrollbar-size);
    height: var(--overlay-scrollbar-size);
  }

  .legal-modal-inline-link {
    position: relative;
    color: var(--text);
    text-decoration: underline;
    text-decoration-color: var(--hairline-strong);
    text-decoration-thickness: var(--text-decoration-line-width);
    text-underline-offset: var(--text-underline-offset-md);
  }

  .legal-modal-inline-link::before {
    content: "";
    position: absolute;
    inset: calc(var(--interactive-inline-hit-outset-block) * -1)
      calc(var(--interactive-inline-hit-outset-inline) * -1);
    border-radius: var(--radius-xs);
  }

  .legal-modal-inline-link:hover,
  .legal-modal-inline-link:focus-visible {
    color: var(--text);
    text-decoration-color: var(--text-soft);
  }

  @media (min-width: var(--viewport-query-tablet)) {
    .legal-notice {
      font-size: var(--type-legal);
    }
  }

  /* ==========================================================================
   Stage media
   ========================================================================== */

  .stage-media-shell {
    position: absolute;
    inset: 0;
    z-index: -3;
    pointer-events: none;
    overflow: hidden;
    background: transparent;
  }

  .stage-video-render-host {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
  }

  .stage-video-render-host[data-video-interactive="true"] {
    z-index: var(--z-modal);
  }

  #life-stage-video-parking-root[data-route-handoff="true"],
  .stage-video-parking-root[data-route-handoff="true"] {
    z-index: 0;
    opacity: 1;
    visibility: visible;
  }

  #life-stage-video-parking-root[data-route-handoff="true"] > video.stage-media,
  .stage-video-parking-root[data-route-handoff="true"] > video.stage-media {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    opacity: 1;
  }

  #root > :not(.stage-video-render-host) {
    position: relative;
    z-index: 1;
  }

  .stage-video-render-root {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--stage-video-render-width, 100vw);
    height: var(--stage-video-render-height, 100dvh);
    min-height: 0;
    transform: translate3d(var(--stage-video-render-x, 0), var(--stage-video-render-y, 0), 0);
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    background: transparent;
    contain: layout size paint;
    will-change: transform;
  }

  .stage-video-render-root[data-video-interactive="true"] {
    pointer-events: auto;
  }

  .stage-video-render-root[data-video-presenting="true"][data-video-mode="active"][data-geometry-ready="true"],
  .stage-video-render-root[data-video-presenting="true"][data-video-mode="ready-paused"][data-ready="true"][data-geometry-ready="true"],
  .stage-video-render-root[data-video-presenting="true"][data-video-mode="paused-buffered"][data-ready="true"][data-geometry-ready="true"] {
    opacity: 1;
  }

  .stage-video-render-root > .stage-media {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    max-width: none;
    max-height: none;
    opacity: 1;
    object-fit: cover;
  }

  .stage-video-render-root > .stage-video-frame-cover {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    opacity: 0;
    pointer-events: none;
  }

  .stage-video-render-root > .stage-video-frame-cover[data-visible="true"] {
    opacity: 1;
  }

  .stage-video-render-root[data-video-interactive="true"] > .stage-media {
    pointer-events: auto;
  }

  .stage-video-render-root > .message-attachment-hls-video {
    object-fit: contain;
  }

  .stage-media {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: none;
  }

  /* Manual play fallback keeps interaction on the shared shell button. */
  video.stage-media:is(:not([controls]), [data-video-play-blocked="true"]) {
    pointer-events: none;
  }

  /* Keep shell-owned interactive videos governed by the shell box, not old inline media geometry. */
  .stage-media-shell > video.stage-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    max-width: none;
    max-height: none;
    opacity: 1;
  }

  .stage-media-shell[data-stage-video-paused-background="true"] > video.stage-media {
    filter: blur(var(--focus-backdrop-blur));
    transform: scale(1.018);
  }

  .stage-media-prewarm-shell {
    position: absolute;
    inset: var(--overlay-full-inset);
    z-index: -4;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
  }

  .kinescope-iframe-parking-root {
    position: fixed;
    inset: var(--overlay-full-inset);
    z-index: -1;
    width: var(--overlay-full-inline);
    height: var(--overlay-full-block);
    max-width: none;
    max-height: none;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
  }

  .kinescope-embed-frame > iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    max-width: none;
    max-height: none;
    border: 0;
  }

  /* Manual play: shell[data-video-play-blocked] + .stage-video-play-button (stageVideoPlayFallback.ts). */
  .stage-video-play-button {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: var(--z-stage-play);
    display: none;
    min-width: var(--stage-play-size);
    min-height: var(--stage-play-size);
    padding: 0 var(--space-4);
    transform: translate(-50%, -50%);
    border: var(--divider-width) solid rgba(255, 255, 255, 0.34);
    border-radius: var(--radius-pill);
    background: rgba(0, 0, 0, 0.62);
    color: var(--text);
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: var(--tracking-none);
    pointer-events: auto;
    -webkit-backdrop-filter: var(--media-frame-backdrop-blur);
    backdrop-filter: var(--media-frame-backdrop-blur);
  }

  .stage-video-play-icon {
    display: block;
    width: var(--icon-lg);
    height: var(--icon-lg);
  }

  .stage-media-shell[data-video-play-blocked="true"] + .stage-video-play-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
  }

  .stage-media-shell[data-video-play-blocked="true"] ~ :is(.home-overlay, .stage-overlay) {
    pointer-events: none;
    z-index: var(--z-overlay);
  }

  .stage-media-shell[data-video-play-blocked="true"]
    ~ :is(.home-overlay, .stage-overlay)
    :is(
      .stage-title,
      .stage-subtitle,
      .stage-phrase,
      .stage-number,
      .stage-browse-top,
      .stage-browse-center,
      .stage-browse-bottom,
      .stage-bottom-anchor,
      .stage-profile-link,
      .stage-rotator,
      .gift-certificate-caption,
      .gift-certificate-message
    ) {
    visibility: hidden;
    pointer-events: none;
  }

  :is(.home-stage, .window-browse-stage)
    .stage-media-shell[data-video-play-blocked="true"]
    + .stage-video-play-button {
    top: auto;
    bottom: 12%;
    width: calc(100% - var(--stage-inline-gutter) * var(--scale-double));
    min-width: 0;
    min-height: var(--control-md);
    padding: 0;
    transform: translateX(-50%);
    border: 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  :is(.home-stage, .window-browse-stage)
    .stage-media-shell[data-video-play-blocked="true"]
    ~ :is(.home-overlay, .stage-overlay)
    :is(.stage-browse-bottom, .stage-bottom-anchor) {
    display: none;
  }

  /* ==========================================================================
   Overlay and anchors on stage
   ========================================================================== */

  .home-overlay,
  .stage-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    padding-inline: var(--stage-safe-gutter-start) var(--stage-safe-gutter-end);
    --stage-phrase-size: var(--type-stage-phrase);
  }

  .home-overlay {
    min-height: 100%;
  }

  .home-stage-hitbox {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .home-overlay :is(.stage-browse-top, .stage-browse-center, .stage-browse-bottom) {
    z-index: 1;
  }

  .home-overlay :is(.stage-browse-top, .stage-browse-center) {
    pointer-events: none;
  }

  /* ==========================================================================
   Focus backdrop — unified blur + dim for stage and modal overlays
   ========================================================================== */

  .focus-backdrop {
    isolation: isolate;
  }

  .focus-backdrop__scrim,
  .focus-backdrop__blur {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition-property: opacity;
    transition-duration: var(--focus-backdrop-duration);
    transition-timing-function: var(--focus-backdrop-ease);
    transition-delay: var(--motion-delay-none);
  }

  .focus-backdrop__scrim {
    background: var(--focus-backdrop-scrim);
  }

  .focus-backdrop__blur {
    background: transparent;
    -webkit-backdrop-filter: blur(var(--focus-backdrop-blur));
    backdrop-filter: blur(var(--focus-backdrop-blur));
  }

  .focus-backdrop[data-focus-backdrop-visible="true"] .focus-backdrop__scrim {
    opacity: 1;
  }

  .focus-backdrop[data-focus-backdrop-visible="true"] .focus-backdrop__blur {
    opacity: 1;
    transition-delay: var(--focus-backdrop-blur-delay);
  }

  .focus-backdrop[data-focus-backdrop-instant="true"] .focus-backdrop__scrim,
  .focus-backdrop[data-focus-backdrop-instant="true"] .focus-backdrop__blur {
    transition-duration: 0ms;
    transition-delay: var(--motion-delay-none);
  }

  .focus-backdrop[data-focus-backdrop-visible="false"] .focus-backdrop__scrim,
  .focus-backdrop[data-focus-backdrop-visible="false"] .focus-backdrop__blur {
    opacity: 0;
    transition-delay: var(--motion-delay-none);
  }

  .focus-backdrop[data-focus-backdrop-visible="false"] .focus-backdrop__blur {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  @starting-style {
    .focus-backdrop[data-focus-backdrop-visible="true"]:not([data-focus-backdrop-instant="true"])
      :is(.focus-backdrop__scrim, .focus-backdrop__blur) {
      opacity: 0;
    }
  }

  /* Pre-blurred video: replace backdrop-filter with filter:blur on the video element
     to avoid iOS Safari black-screen compositing bug on fixed/absolute full-screen layers. */
  .split-stage .stage-media-shell > video.stage-media {
    transition:
      filter var(--focus-backdrop-duration) var(--focus-backdrop-ease),
      transform var(--focus-backdrop-duration) var(--focus-backdrop-ease);
    transition-delay: var(--motion-delay-none);
  }

  .split-stage:has(.focus-backdrop[data-focus-backdrop-visible="true"])
    .stage-media-shell
    > video.stage-media {
    filter: blur(var(--focus-backdrop-blur));
    transform: scale(1.018);
    transition-delay: var(--focus-backdrop-blur-delay);
  }

  .split-stage:has(.focus-backdrop[data-focus-backdrop-instant="true"])
    .stage-media-shell
    > video.stage-media {
    transition-duration: 0ms;
    transition-delay: var(--motion-delay-none);
  }

  @starting-style {
    .split-stage:has(
        .focus-backdrop[data-focus-backdrop-visible="true"]:not(
            [data-focus-backdrop-instant="true"]
          )
      )
      .stage-media-shell
      > video.stage-media {
      filter: blur(0px);
      transform: scale(1);
    }
  }

  .focus-backdrop__content {
    position: relative;
    z-index: 1;
  }

  .focus-backdrop[data-focus-backdrop-variant="join-stage"] {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
  }

  .stage-overlay[data-stage-overlay="group-offer"] .group-offer-center {
    z-index: 1;
  }

  .stage-profile-link,
  .brand-link {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    background: transparent;
    border: 0;
    color: var(--text);
    font-size: var(--fs-sm);
    font-weight: 500;
    letter-spacing: var(--tracking-body);
    transition: opacity var(--dur) var(--ease);
  }

  .stage-profile-link:hover,
  .brand-link:hover {
    opacity: 0.7;
  }

  .stage-profile-link {
    position: absolute;
    top: max(
      var(--safe-area-top),
      clamp(0.5rem, calc(var(--fluid-min) * var(--scale-double)), 1.25rem)
    );
    right: max(
      var(--safe-area-right),
      clamp(0.25rem, calc(var(--fluid-min) * var(--scale-double)), 1rem)
    );
  }

  .stage-profile-link[data-variant="icon"] {
    width: var(--control-lg);
    height: var(--control-lg);
    padding: 0;
    justify-content: center;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.05);
    border: var(--divider-width) solid var(--line-2);
    backdrop-filter: blur(var(--backdrop-blur-sm));
    -webkit-backdrop-filter: blur(var(--backdrop-blur-sm));
  }

  .auth-top-links .stage-profile-link[data-variant="icon"] {
    position: relative;
    inset: auto;
    width: var(--auth-top-link-icon-size);
    height: var(--auth-top-link-icon-size);
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .profile-notification-badge {
    --profile-notification-badge-size: calc(var(--auth-top-link-icon-size, var(--icon-sm)) * 0.5);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--profile-notification-badge-size);
    height: var(--profile-notification-badge-size);
    min-width: var(--profile-notification-badge-size);
    max-width: var(--profile-notification-badge-size);
    border-radius: var(--radius-pill);
    background: #1f6fff;
    color: #fff;
    font-size: calc(var(--profile-notification-badge-size) * 0.56);
    font-weight: 800;
    line-height: 1;
    letter-spacing: var(--tracking-none);
    text-align: center;
    box-shadow: none;
    pointer-events: none;
    user-select: none;
  }

  .profile-notification-badge[data-badge-long="true"] {
    font-size: calc(var(--profile-notification-badge-size) * 0.38);
  }

  .auth-top-links .profile-notification-badge {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-58%, -50%);
    z-index: 1;
  }

  .auth-top-links .stage-profile-icon {
    flex: 0 0 auto;
    width: var(--auth-top-link-icon-size);
    height: var(--auth-top-link-icon-size);
    object-fit: contain;
  }

  .auth-top-links .auth-chat-link .stage-profile-icon {
    width: var(--auth-top-link-icon-size);
    height: var(--auth-top-link-icon-size);
  }

  .auth-top-links .auth-feed-link {
    color: rgba(255, 255, 255, 0.86);
  }

  .auth-top-links .auth-feed-link .stage-profile-icon {
    width: var(--auth-top-link-icon-size);
    height: var(--auth-top-link-icon-size);
  }

  .auth-top-links .auth-profile-link {
    margin-left: 0;
  }

  .auth-top-links.home-top-links .auth-profile-link .stage-profile-icon {
    width: var(--auth-top-link-icon-size);
    height: var(--auth-top-link-icon-size);
  }

  .stage-profile-icon {
    width: var(--icon-sm);
    height: var(--icon-sm);
    display: block;
  }

  .stage-number,
  .stage-top-anchor,
  .stage-browse-top,
  .stage-bottom-anchor,
  .stage-browse-bottom {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - var(--stage-inline-gutter) * var(--scale-double));
    text-align: center;
    color: var(--text);
    font-size: var(--fs-sm);
    font-weight: 400;
    line-height: var(--lh-snug);
    letter-spacing: var(--tracking-body);
    font-variant-numeric: tabular-nums;
  }

  .stage-number,
  .stage-top-anchor {
    top: var(--anchor-offset);
  }
  .stage-browse-top {
    top: 12%;
    font-weight: 900;
  }
  .stage-bottom-anchor {
    bottom: var(--anchor-offset);
  }
  .stage-browse-bottom {
    bottom: 12%;
    color: rgba(255, 255, 255, 0.88);
  }

  .stage-browse-bottom {
    width: auto;
    min-height: max(var(--button-min-height), var(--control-md));
    padding: var(--button-padding-block) var(--button-padding-inline);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    box-sizing: border-box;
    border-radius: var(--radius-pill);
    border: var(--divider-width) solid rgba(255, 255, 255, 0.16);
    background: transparent;
  }

  .stage-number,
  .stage-bottom-anchor {
    font-size: var(--stage-edge-caption-size, var(--type-stage-anchor));
    font-weight: 400;
  }

  .stage-number {
    top: 12%;
  }

  .participant-shell--window .stage-number {
    font-weight: 900;
    -webkit-text-stroke: var(--text-stroke-heading);
    paint-order: stroke fill;
  }

  .participant-shell--window .stage-bottom-anchor {
    font-weight: 520;
  }

  .stage-bottom-anchor {
    bottom: 12%;
  }

  .stage-browse-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - var(--stage-inline-gutter) * var(--scale-double));
    max-width: var(--container-stage-browse);
    text-align: center;
    display: grid;
    gap: var(--space-3);
  }

  .home-overlay .stage-browse-center {
    contain: layout style;
  }

  .stage-rotator,
  .stage-static-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - var(--stage-inline-gutter) * var(--scale-double));
    text-align: center;
  }

  .stage-title,
  .stage-static-title {
    --stage-fit-base-font-size: var(--fs-3xl);

    font-size: var(--stage-fit-base-font-size);
    line-height: var(--leading-display-tight);
    letter-spacing: var(--tr-display);
    font-weight: 700;
    color: var(--text);
    text-wrap: balance;
  }

  .home-overlay .stage-title,
  .home-overlay .stage-subtitle {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    text-wrap: balance;
  }

  .stage-static-title[data-stage-title-size="compact"] {
    font-size: var(--type-title-medium);
    line-height: var(--leading-tight);
  }

  .stage-stage-row .stage-static-title {
    max-width: none;
    min-width: 0;
    margin-inline: auto;
  }

  .stage-subtitle {
    --stage-fit-base-font-size: var(--fs-md);

    max-width: var(--container-stage-copy);
    margin-inline: auto;
    font-size: var(--stage-fit-base-font-size);
    line-height: var(--lh-base);
    color: rgba(255, 255, 255, 0.88);
    text-wrap: balance;
  }

  .home-overlay .stage-title {
    --home-stage-title-size: clamp(
      var(--type-title-small),
      min(var(--fs-3xl), 12.5vw),
      var(--fs-3xl)
    );

    font-size: var(--home-stage-title-size);
  }

  .home-overlay .stage-subtitle {
    --home-stage-subtitle-size: clamp(var(--type-caption), min(var(--fs-md), 5.4vw), var(--fs-md));

    font-size: var(--home-stage-subtitle-size);
  }

  .stage-rotator {
    min-height: var(--stage-rotator-min-height);
    display: grid;
    place-items: center;
  }

  .stage-phrase,
  .stage-phrase-title {
    font-size: var(--stage-phrase-size);
    line-height: var(--leading-control);
    letter-spacing: var(--tracking-display);
    font-weight: 700;
    color: var(--text);
    text-align: center;
    text-wrap: balance;
  }

  .stage-phrase {
    opacity: 0;
    transition: opacity var(--focus-backdrop-duration) var(--ease);
  }

  .stage-phrase[data-visible="true"] {
    opacity: 1;
  }

  .participant-shell--window .stage-phrase {
    font-size: var(--type-stage-phrase-emphasis);
    font-weight: 1000;
  }

  .stage-stage-row {
    width: var(--container-stage-row);
    margin-inline: auto;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--stage-row-gap);
  }

  .stage-nav-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--stage-control-size);
    height: var(--stage-control-size);
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: var(--fs-md);
    transition:
      color var(--dur) var(--ease),
      transform var(--dur) var(--ease);
  }

  .stage-nav-button:hover {
    color: var(--text);
  }
  .stage-nav-button:active {
    transform: scale(var(--app-press-scale-subtle));
  }
  .stage-nav-button[disabled] {
    opacity: 0.4;
    cursor: default;
  }
}

@layer lifeos.components {
  /* ==========================================================================
   Participant / stack shells
   ========================================================================== */

  .participant-shell,
  .stack-shell {
    min-height: 100dvh;
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    display: grid;
    background: transparent;
  }

  .participant-shell--plus {
    --plus-route-height: 100dvh;
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: 100%;
    height: var(--plus-route-height);
    min-height: var(--plus-route-height);
    max-height: var(--plus-route-height);
    display: block;
    overflow: hidden;
    overscroll-behavior: none;
    isolation: isolate;
    background: transparent;
  }

  .participant-shell--plus .split-stage {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: var(--plus-route-height);
    min-height: var(--plus-route-height);
    max-height: var(--plus-route-height);
  }

  .participant-shell--plus.participant-shell--window-details .stage-media-shell::after {
    content: none;
  }

  .window-browse-shell[data-plus-details="true"] {
    overflow: hidden;
    overscroll-behavior: none;
  }

  .window-browse-plus-overlay.participant-shell--plus {
    background: transparent;
    z-index: 2;
  }

  .window-browse-plus-overlay {
    pointer-events: none;
  }

  .window-browse-plus-backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    --focus-backdrop-scrim: rgba(4, 10, 16, 0.56);
  }

  .window-browse-plus-overlay :is(.plus-sheet, .plus-sheet-footer) {
    pointer-events: auto;
  }

  .panel,
  .form-panel,
  .watch-panel {
    background: transparent;
    container-type: size;
    container-name: adaptive-surface;
    display: flex;
    flex-direction: column;
    min-height: var(--layout-block-stage-min);
    padding-block: var(--space-5);
    padding-inline: var(--panel-safe-gutter-start) var(--panel-safe-gutter-end);
  }

  .panel-scroll {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-5);
    padding-block: var(--space-3);
  }

  .participant-shell--join-choice,
  .participant-shell--login,
  .participant-shell--auth-layout {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 100svh;
    overflow: hidden;
  }

  .participant-shell--join-choice .split-stage,
  .participant-shell--login .split-stage,
  .participant-shell--auth-layout .split-stage {
    position: absolute;
    inset: 0;
    width: 100%;
    min-height: 100svh;
  }

  .participant-shell--join-choice .form-panel,
  .participant-shell--login .form-panel,
  .participant-shell--auth-layout > .form-panel.split-screen-panel {
    position: absolute;
    inset: 0;
    z-index: 2;
    min-height: 100svh;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
    padding-inline: var(--panel-safe-gutter-start) var(--panel-safe-gutter-end);
  }

  .participant-shell--join-choice .panel-scroll,
  .participant-shell--login .panel-scroll,
  .participant-shell--auth-layout > .form-panel > .panel-scroll {
    grid-row: 2;
    align-self: center;
    justify-self: center;
    width: var(--copy-width);
    display: grid;
    justify-items: center;
    padding: 0;
    text-align: center;
  }

  .panel-copy {
    flex: 1;
    width: 100%;
    max-width: var(--copy-width);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--adaptive-base-gap) * var(--scale-type-fluid-sm-loose));
    text-align: center;
  }

  .panel-scroll .panel-copy {
    flex: 0 0 auto;
  }

  .panel-number {
    font-size: var(--adaptive-heading-size);
    font-weight: 600;
    color: var(--text);
    letter-spacing: var(--tracking-none);
    line-height: var(--leading-snug);
    text-wrap: balance;
  }

  .panel-summary {
    max-width: var(--container-panel-summary);
    font-size: var(--adaptive-copy-size);
    line-height: var(--line-height-adaptive-copy);
    font-weight: 400;
    color: var(--text-strong);
    text-wrap: pretty;
    overflow-wrap: break-word;
  }

  .panel-summary-stack {
    display: grid;
    justify-items: center;
    gap: var(--adaptive-base-gap);
  }

  .panel-more-link {
    --panel-more-padding-inline: max(calc(var(--adaptive-base-gap) * var(--scale-fine)), 0.8em);
    --panel-more-underline-offset: -0.18em;
    --panel-more-text-color: #ffc3c4;
    --panel-more-text-shimmer: #ffe0e1;
    --panel-more-underline-color-edge: rgba(255, 195, 196, 0);
    --panel-more-underline-color-soft: rgba(255, 195, 196, 0.62);
    --panel-more-underline-color-strong: #ffc3c4;
    --panel-more-hit-target-inset: calc(var(--interactive-inline-hit-outset-block) * -1)
      calc(var(--interactive-inline-hit-outset-inline) * -1);

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--interactive-min-size);
    padding: 0 var(--panel-more-padding-inline);
    font-size: var(--adaptive-detail-size);
    line-height: var(--leading-control);
    font-weight: 550;
    color: var(--panel-more-text-color);
    opacity: 1;
    text-decoration: none;
    letter-spacing: var(--tracking-none);
  }

  .panel-more-link .text-shimmer-wave {
    --text-shimmer-wave-base: var(--panel-more-text-color);
    --text-shimmer-wave-shimmer: var(--panel-more-text-shimmer);
  }

  .panel-more-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--panel-more-underline-offset);
    height: var(--decoration-line-width);
    background: linear-gradient(
      90deg,
      var(--panel-more-underline-color-edge),
      var(--panel-more-underline-color-soft) 18%,
      var(--panel-more-underline-color-strong) 50%,
      var(--panel-more-underline-color-soft) 82%,
      var(--panel-more-underline-color-edge)
    );
    opacity: 0.86;
    transform: scaleX(0.84);
    transform-origin: center;
    transition:
      opacity var(--dur) var(--ease-out),
      transform var(--dur) var(--ease-out);
  }

  .panel-more-hit-target {
    position: absolute;
    inset: var(--panel-more-hit-target-inset);
    z-index: 1;
  }

  .panel-more-link:hover::after {
    opacity: 1;
    transform: scaleX(1);
  }

  .participant-shell--window-details .panel-more-link {
    --panel-more-underline-color-edge: rgba(255, 255, 255, 0);
    --panel-more-underline-color-soft: rgba(255, 255, 255, 0.95);
    --panel-more-underline-color-strong: rgba(255, 255, 255, 1);

    color: rgba(255, 255, 255, 1);
  }

  .participant-shell--window-details .panel-more-link::after {
    opacity: 1;
    background: linear-gradient(
      90deg,
      var(--panel-more-underline-color-edge),
      var(--panel-more-underline-color-soft) 18%,
      var(--panel-more-underline-color-strong) 50%,
      var(--panel-more-underline-color-soft) 82%,
      var(--panel-more-underline-color-edge)
    );
  }

  .eyebrow {
    font-size: var(--fs-xxs);
    line-height: var(--lh-snug);
    color: var(--text-muted);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    font-weight: 500;
  }

  .meta-line,
  .deadline-state,
  .message-card time {
    font-size: var(--fs-xs);
    line-height: var(--lh-snug);
    color: var(--text-muted);
    letter-spacing: var(--tracking-none);
  }

  .panel-footnote {
    font-size: var(--adaptive-detail-size);
    line-height: var(--leading-snug);
    color: var(--text-muted);
    letter-spacing: var(--tracking-none);
  }

  /* footer симметричная сетка 1fr auto 1fr */
  .panel-footer {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--layout-control-gap);
    width: 100%;
    max-width: var(--copy-wide);
    min-height: var(--back-zone-height);
    margin: 0 auto;
    padding-top: 0;
  }

  /* добавляем виртуальный правый spacer, когда внутри только back + actions */
  .panel-footer:not(:has(> :nth-child(3)))::after {
    content: "";
    display: block;
    width: max(var(--back-control-size), var(--touch-target-min-size));
    height: max(var(--back-control-size), var(--touch-target-min-size));
    justify-self: end;
  }

  .panel,
  .form-panel,
  .watch-panel {
    position: relative;
  }

  /* ==========================================================================
   Split panel layout — mobile bottom sheet structure
   ========================================================================== */

  .split-panel__motion {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .split-panel__motion > .split-content-stack {
    justify-self: center;
    width: min(var(--adaptive-content-width), 100%);
    max-width: 100%;
    margin-inline: auto;
  }

  @media (max-width: var(--viewport-query-split-wide-fallback)) {
    :is(
        .participant-shell--window,
        .participant-shell--plus,
        .participant-shell--registration:not(.participant-shell--goal-composition),
        .participant-shell--gift-activation:not(.participant-shell--goal-composition),
        .participant-shell--info
      )
      > .split-screen-panel:has(> .split-panel__motion) {
      display: block;
      overflow: hidden;
      padding-block: 0;
      padding-inline: 0;
      height: auto;
      min-height: 0;
      max-height: none;
      grid-template-rows: unset;
      grid-template-columns: unset;
      container-type: size;
      container-name: adaptive-surface;
    }

    :is(
        .participant-shell--window,
        .participant-shell--plus,
        .participant-shell--registration:not(.participant-shell--goal-composition),
        .participant-shell--gift-activation:not(.participant-shell--goal-composition),
        .participant-shell--info
      )
      > .split-screen-panel:has(> .split-panel__motion)
      > .split-panel__motion {
      box-sizing: border-box;
      padding-inline: var(--panel-safe-gutter-start) var(--panel-safe-gutter-end);
    }

    .split-panel__motion {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: var(--split-media-gap) auto calc(
          var(--split-detail-actions-gap) * var(--scale-double)
        );
      width: 100%;
      background: var(--split-panel-surface);
      transform: none;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      transform-style: flat;
    }

    .participant-shell--plus > .plus-sheet > .split-panel__motion {
      grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
      height: 100%;
      min-height: 100%;
      max-height: 100%;
      background: transparent;
    }
  }

  @media (min-width: var(--viewport-query-split-wide)) {
    .split-panel__motion {
      align-content: center;
      min-height: 0;
    }

    :is(
        .participant-shell--window,
        .participant-shell--registration:not(.participant-shell--goal-composition),
        .participant-shell--gift-activation:not(.participant-shell--goal-composition),
        .participant-shell--info
      )
      > .split-screen-panel:has(> .split-panel__motion) {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
      align-items: stretch;
      justify-items: center;
      gap: 0;
      padding-block: 0;
      overflow: hidden;
    }
  }

  /* Shared split content engine for regular two-pane screens with a real panel. */
  :is(
      .participant-shell--window,
      .participant-shell--registration:not(.participant-shell--goal-composition),
      .participant-shell--gift-activation:not(.participant-shell--goal-composition),
      .participant-shell--info
    )
    > .split-screen-panel,
  .participant-shell--watch > .watch-panel {
    --split-base-gap: var(--adaptive-base-gap);
    --split-media-gap: calc(var(--split-base-gap) * var(--scale-split-rail));
    --split-content-actions-gap: calc(var(--split-base-gap) * var(--scale-split-rail));
    --split-detail-actions-gap: var(--split-content-actions-gap);
    --split-back-zone: calc(
      var(--adaptive-control-size) + var(--split-base-gap) * var(--scale-split-rail)
    );
    container-type: size;
    container-name: adaptive-surface;
  }

  :is(
      .participant-shell--window,
      .participant-shell--registration:not(.participant-shell--goal-composition),
      .participant-shell--gift-activation:not(.participant-shell--goal-composition),
      .participant-shell--info
    )
    > .split-screen-panel:not(:has(> .split-panel__motion)),
  .participant-shell--watch > .watch-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: stretch;
    justify-items: center;
    gap: 0;
    padding-block: 0;
    overflow: hidden;
  }

  :is(
      .participant-shell--window,
      .participant-shell--registration:not(.participant-shell--goal-composition),
      .participant-shell--gift-activation:not(.participant-shell--goal-composition),
      .participant-shell--info
    )
    > .split-screen-panel
    .split-content-stack,
  .participant-shell--watch > .watch-panel > .panel-scroll.split-content-stack {
    grid-row: 2;
    align-self: center;
    justify-self: center;
    margin-inline: auto;
    width: min(100%, var(--watch-copy-measure, 30ch));
    min-width: 0;
    min-height: 0;
    max-width: min(100%, var(--container-watch));
    box-sizing: border-box;
  }

  .split-screen-shell > .split-screen-stage {
    container-type: size;
    container-name: adaptive-surface;
  }

  .split-screen-shell > .split-screen-stage .stage-overlay,
  .window-browse-stage.participant-shell--window > .split-stage .stage-overlay {
    --stage-phrase-size: var(--type-stage-phrase-split);
    --stage-edge-caption-size: var(--type-stage-anchor);
  }

  @container adaptive-surface (max-width: var(--container-query-wide)) {
    .split-screen-shell > .split-screen-stage .stage-overlay,
    .window-browse-stage.participant-shell--window > .split-stage .stage-overlay {
      --stage-edge-caption-size: var(--stage-edge-caption-size-narrow);
    }
  }

  .split-screen-shell:not(.participant-shell--offer) .gift-certificate-caption {
    --gift-certificate-caption-size: var(--stage-edge-caption-size, var(--type-stage-anchor));
  }

  .split-screen-shell:not(.participant-shell--offer) .gift-certificate-message {
    --gift-certificate-message-size: var(--stage-phrase-size);
  }

  @supports (width: 1cqw) and (height: 1cqh) {
    :is(
        .participant-shell--window,
        .participant-shell--registration:not(.participant-shell--goal-composition),
        .participant-shell--gift-activation:not(.participant-shell--goal-composition),
        .participant-shell--info
      )
      > .split-screen-panel
      .split-content-stack,
    :is(
        .participant-shell--window,
        .participant-shell--registration:not(.participant-shell--goal-composition),
        .participant-shell--gift-activation:not(.participant-shell--goal-composition),
        .participant-shell--info
      )
      > .split-screen-panel
      > .panel-footer,
    .participant-shell--watch .watch-panel .panel-scroll,
    .participant-shell--watch .watch-panel .panel-footer,
    .plus-sheet .plus-sheet-copy,
    .plus-sheet .plus-sheet-footer {
      --adaptive-surface-fluid: min(
        calc(1cqw * var(--scale-fluid-inline-boost)),
        calc(1cqh * var(--scale-fluid-container-block))
      );
      --adaptive-fluid: var(--adaptive-surface-fluid);
      --adaptive-base-gap: var(--adaptive-surface-base-gap);
      --adaptive-action-gap: calc(var(--adaptive-base-gap) * var(--scale-route-fluid-row));
      --adaptive-content-width: var(--adaptive-surface-content-width);
      --adaptive-copy-size: var(--adaptive-surface-copy-size);
      --adaptive-detail-size: var(--adaptive-surface-detail-size);
      --adaptive-button-font-size: var(--adaptive-surface-control-size);
      --adaptive-button-padding-block: var(--adaptive-surface-button-padding-block);
      --adaptive-button-padding-inline: var(--adaptive-surface-button-padding-inline);
      --adaptive-button-max-block-size: var(--adaptive-surface-button-max-block-size);
      --adaptive-control-max-size: var(--adaptive-surface-control-max-size);
    }

    .split-screen-shell > .split-screen-stage .stage-overlay {
      --stage-phrase-size: var(--type-stage-phrase-container);
    }
  }

  @container adaptive-surface (max-width: var(--container-query-compact)) {
    :is(
        .participant-shell--window,
        .participant-shell--registration:not(.participant-shell--goal-composition),
        .participant-shell--gift-activation:not(.participant-shell--goal-composition),
        .participant-shell--info
      )
      > .split-screen-panel
      .split-content-stack,
    :is(
        .participant-shell--window,
        .participant-shell--registration:not(.participant-shell--goal-composition),
        .participant-shell--gift-activation:not(.participant-shell--goal-composition),
        .participant-shell--info
      )
      > .split-screen-panel
      > .panel-footer,
    .participant-shell--watch .watch-panel .panel-scroll,
    .participant-shell--watch .watch-panel .panel-footer,
    .plus-sheet .plus-sheet-copy,
    .plus-sheet .plus-sheet-footer {
      --adaptive-base-gap: var(--adaptive-compact-base-gap);
      --adaptive-copy-size: var(--adaptive-compact-copy-size);
      --adaptive-detail-size: var(--adaptive-compact-detail-size);
      --adaptive-button-font-size: var(--adaptive-compact-control-size);
      --adaptive-button-padding-block: var(--adaptive-compact-button-padding-block);
      --adaptive-button-padding-inline: var(--adaptive-compact-button-padding-inline);
      --adaptive-button-min-block-size: var(--adaptive-compact-button-min-block-size);
      --adaptive-button-max-block-size: var(--adaptive-compact-button-max-block-size);
      --adaptive-control-min-size: var(--interactive-min-size);
      --adaptive-control-max-size: var(--adaptive-compact-control-max-size);
      --adaptive-icon-min-size: var(--adaptive-compact-icon-min-size);
      --adaptive-icon-max-size: var(--adaptive-compact-icon-max-size);
    }
  }

  @container adaptive-surface (min-width: var(--container-query-split-panel)) {
    :is(
        .participant-shell--window,
        .participant-shell--registration:not(.participant-shell--goal-composition),
        .participant-shell--gift-activation:not(.participant-shell--goal-composition),
        .participant-shell--info
      )
      > .split-screen-panel
      .split-content-stack,
    :is(
        .participant-shell--window,
        .participant-shell--registration:not(.participant-shell--goal-composition),
        .participant-shell--gift-activation:not(.participant-shell--goal-composition),
        .participant-shell--info
      )
      > .split-screen-panel
      > .panel-footer,
    .participant-shell--watch .watch-panel .panel-scroll,
    .participant-shell--watch .watch-panel .panel-footer,
    .plus-sheet .plus-sheet-copy,
    .plus-sheet .plus-sheet-footer {
      --adaptive-content-width: var(--adaptive-surface-content-width-wide);
      --adaptive-copy-size: var(--adaptive-surface-copy-size);
      --adaptive-detail-size: var(--adaptive-surface-detail-size);
      --adaptive-button-max-block-size: var(--adaptive-wide-button-max-block-size);
      --adaptive-control-max-size: var(--adaptive-wide-control-max-size);
    }

    .plus-sheet .plus-sheet-copy,
    .plus-sheet .plus-sheet-footer.panel-footer {
      --plus-sheet-copy-width: min(36ch, var(--container-safe-inline));
    }

    .plus-sheet .plus-sheet-copy {
      --adaptive-content-width: min(36ch, var(--container-safe-inline));
    }

    .plus-sheet .plus-sheet-footer.panel-footer {
      --plus-footer-copy-edge: calc((100% + min(36ch, var(--container-safe-inline))) / 2);
    }
  }

  @container adaptive-surface (max-width: var(--container-query-narrow)) {
    .panel-scroll,
    .panel-copy,
    .panel-footer,
    .form-section,
    .registration-section,
    .rules-consent-section,
    .choice-panel,
    .lesson-tabs,
    .lesson-accordion,
    .profile-panel,
    .profile-screen-main,
    .profile-screen-stack,
    .profile-actions-area,
    .plus-sheet-copy,
    .plus-sheet-footer,
    .messages-header,
    .messages-feed,
    .messages-composer-shell,
    .feed-post-stack,
    .feed-post-actions,
    .feed-comments-dialog {
      --adaptive-base-gap: var(--adaptive-compact-base-gap);
      --adaptive-copy-size: var(--adaptive-compact-copy-size);
      --adaptive-detail-size: var(--adaptive-compact-detail-size);
      --adaptive-button-font-size: var(--adaptive-compact-control-size);
      --adaptive-button-padding-block: var(--adaptive-compact-button-padding-block);
      --adaptive-button-padding-inline: var(--adaptive-compact-button-padding-inline);
      --adaptive-button-min-block-size: var(--adaptive-compact-button-min-block-size);
      --adaptive-button-max-block-size: var(--adaptive-compact-button-max-block-size);
      --adaptive-control-min-size: var(--interactive-min-size);
      --adaptive-control-max-size: var(--adaptive-compact-control-max-size);
      --adaptive-icon-min-size: var(--adaptive-compact-icon-min-size);
      --adaptive-icon-max-size: var(--adaptive-compact-icon-max-size);
      --button-group-gap: var(--layout-control-gap);
    }
  }

  @container adaptive-surface (max-height: var(--container-query-low)) {
    .panel-scroll,
    .panel-copy,
    .panel-footer,
    .form-section,
    .choice-panel,
    .profile-screen-main,
    .profile-screen-stack,
    .plus-sheet-copy,
    .plus-sheet-footer,
    .messages-header,
    .messages-feed,
    .messages-composer-shell {
      --adaptive-base-gap: var(--adaptive-short-base-gap);
      --adaptive-copy-size: var(--adaptive-short-copy-size);
      --adaptive-detail-size: var(--adaptive-short-detail-size);
      --adaptive-button-font-size: var(--adaptive-short-control-size);
      --adaptive-button-padding-block: var(--adaptive-short-button-padding-block);
      --adaptive-button-padding-inline: var(--adaptive-short-button-padding-inline);
      --adaptive-button-min-block-size: var(--adaptive-short-button-min-block-size);
      --adaptive-button-max-block-size: var(--adaptive-short-button-max-block-size);
      --adaptive-control-max-size: var(--adaptive-short-control-max-size);
      --adaptive-icon-max-size: var(--adaptive-short-icon-max-size);
      --button-group-gap: var(--layout-control-gap);
    }
  }

  @container adaptive-surface (max-height: var(--container-query-short)) {
    :is(
        .participant-shell--window,
        .participant-shell--registration:not(.participant-shell--goal-composition),
        .participant-shell--gift-activation:not(.participant-shell--goal-composition),
        .participant-shell--info
      )
      > .split-screen-panel
      .split-content-stack,
    :is(
        .participant-shell--window,
        .participant-shell--registration:not(.participant-shell--goal-composition),
        .participant-shell--gift-activation:not(.participant-shell--goal-composition),
        .participant-shell--info
      )
      > .split-screen-panel
      > .panel-footer,
    .participant-shell--watch .watch-panel .panel-scroll,
    .participant-shell--watch .watch-panel .panel-footer,
    .plus-sheet .plus-sheet-copy,
    .plus-sheet .plus-sheet-footer {
      --adaptive-base-gap: var(--adaptive-short-base-gap);
      --adaptive-copy-size: var(--adaptive-short-copy-size);
      --adaptive-detail-size: var(--adaptive-short-detail-size);
      --adaptive-button-font-size: var(--adaptive-short-control-size);
      --adaptive-button-padding-block: var(--adaptive-short-button-padding-block);
      --adaptive-button-padding-inline: var(--adaptive-short-button-padding-inline);
      --adaptive-button-min-block-size: var(--adaptive-short-button-min-block-size);
      --adaptive-button-max-block-size: var(--adaptive-short-button-max-block-size);
      --adaptive-control-max-size: var(--adaptive-short-control-max-size);
      --adaptive-icon-max-size: var(--adaptive-short-icon-max-size);
    }
  }

  .participant-shell--window > .panel .panel-main-stack {
    --window-panel-scale: 1.071;
    --window-summary-line-height: var(--leading-comfort);
    --window-summary-expand: 1.5rem;
    --window-summary-bound: calc(100% + var(--window-summary-expand));
    --window-summary-measure: min(44rem, max(22rem, calc(100% + var(--window-summary-expand))));
    --window-summary-width: min(var(--window-summary-measure), var(--window-summary-bound));
    --window-summary-overhang: max(0px, calc(var(--window-summary-width) - 100%));
    width: var(--window-summary-width);
    max-width: var(--window-summary-width);
    transform: translateX(calc(var(--window-summary-overhang) / -2));
    display: grid;
    grid-template-rows: auto calc(var(--split-detail-actions-gap) * var(--window-panel-scale)) auto;
    justify-items: center;
  }

  .participant-shell--window > .panel.split-screen-panel {
    background: var(--split-panel-surface);
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-width: none;
  }

  .participant-shell--window > .panel.split-screen-panel::-webkit-scrollbar {
    display: none;
  }

  .participant-shell--window > .panel .panel-copy {
    grid-row: 1;
    flex: 0 0 auto;
    width: 100%;
    gap: var(--split-base-gap);
  }

  .participant-shell--window > .panel .panel-summary {
    width: 100%;
    margin-inline: auto;
    font-size: var(--adaptive-copy-size);
    line-height: var(--line-height-adaptive-copy);
    text-align: center;
    text-wrap: pretty;
  }

  .participant-shell--window > .panel .panel-summary-stack {
    gap: calc(var(--adaptive-base-gap) * var(--scale-tight));
  }

  .participant-shell--window > .panel .panel-more-link {
    padding-inline: var(--panel-more-padding-inline);
    min-height: auto;
    font-size: var(--adaptive-detail-size);
    letter-spacing: var(--tracking-none);
  }

  .participant-shell--window > .panel .panel-main-stack .panel-copy {
    gap: calc(var(--split-base-gap) * var(--window-panel-scale));
  }

  .participant-shell--window > .panel .panel-main-stack .panel-summary-stack {
    gap: calc(var(--split-base-gap) * var(--scale-tight) * var(--window-panel-scale));
  }

  .participant-shell--window > .panel .panel-main-stack .panel-summary {
    font-size: calc(var(--adaptive-copy-size) * var(--window-panel-scale));
    line-height: var(--window-summary-line-height);
  }

  .participant-shell--window > .panel .panel-main-stack .panel-more-link {
    font-size: calc(var(--adaptive-detail-size) * var(--window-panel-scale));
  }

  .participant-shell--window > .panel .panel-main-stack .panel-footnote {
    font-size: calc(var(--adaptive-detail-size) * var(--window-panel-scale));
  }

  .participant-shell--window > .panel .panel-main-stack .panel-footer-actions {
    gap: calc(var(--button-group-gap) * var(--window-panel-scale));
  }

  .participant-shell--window > .panel .panel-main-stack .panel-footer-actions .action {
    min-height: calc(var(--button-min-height) * var(--window-panel-scale));
    padding-block: calc(var(--button-padding-block) * var(--window-panel-scale));
    padding-inline: calc(var(--button-padding-inline) * var(--window-panel-scale));
    font-size: calc(var(--button-font-size) * var(--window-panel-scale));
  }

  .participant-shell--window > .panel-footer {
    display: contents;
  }

  .participant-shell--window > .panel-footer::after {
    content: none;
    display: none;
  }

  .participant-shell--registration:not(.participant-shell--goal-composition) > .panel-footer,
  .participant-shell--gift-activation:not(.participant-shell--goal-composition) > .panel-footer {
    display: contents;
  }

  .participant-shell--registration:not(.participant-shell--goal-composition) > .panel-footer::after,
  .participant-shell--gift-activation:not(.participant-shell--goal-composition)
    > .panel-footer::after {
    content: none;
    display: none;
  }

  .participant-shell--registration:not(.participant-shell--goal-composition)
    > .panel-footer
    > .panel-spacer,
  .participant-shell--gift-activation:not(.participant-shell--goal-composition)
    > .panel-footer
    > .panel-spacer {
    display: none;
  }

  .panel-footer > :nth-child(1) {
    justify-self: start;
  }
  .panel-footer > :nth-child(2) {
    justify-self: center;
  }
  .panel-footer > :nth-child(3) {
    justify-self: end;
  }

  .panel-footer > .panel-back {
    grid-column: 2;
    justify-self: center;
  }

  .participant-shell--login > .panel-footer[data-variant="login"] .panel-back,
  .participant-shell--registration > .panel-footer[data-variant="registration"] .panel-back,
  .participant-shell--window > .panel-footer .panel-back,
  .participant-shell--offer > .panel-footer .panel-back,
  .participant-shell--watch > .panel-footer .panel-back,
  .participant-shell--plus > .plus-sheet-footer.panel-footer .panel-back {
    grid-column: auto;
  }

  .participant-shell--offer .form-panel .panel-spacer {
    display: none;
  }

  .participant-shell--offer .form-panel .panel-scroll {
    justify-content: center;
    padding-block: var(--offer-panel-scroll-padding-block);
  }

  .participant-shell--registration .split-stage,
  .participant-shell--gift-activation .stage-overlay {
    pointer-events: none;
  }

  .participant-shell--registration .panel-footer[data-variant="registration"] .panel-spacer {
    display: none;
  }

  .participant-shell--registration:has(.registration-rules-section) .registration-rules-section,
  .participant-shell--gift-activation-rules .registration-rules-section {
    width: min(var(--container-registration-rules), 100%);
    max-width: 100%;
    pointer-events: auto;
  }

  .participant-shell--registration:has(.registration-rules-section)
    > .split-screen-panel
    .split-content-stack,
  .participant-shell--gift-activation-rules > .split-screen-panel .split-content-stack {
    max-height: 100%;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-width: none;
  }

  .participant-shell--registration:has(.registration-rules-section)
    > .split-screen-panel
    .split-content-stack::-webkit-scrollbar,
  .participant-shell--gift-activation-rules
    > .split-screen-panel
    .split-content-stack::-webkit-scrollbar {
    display: none;
  }

  .participant-shell--goal-composition {
    position: fixed;
    inset: 0;
    display: block;
    width: 100%;
    max-width: 100%;
    height: 100svh;
    min-height: 100svh;
    max-height: 100svh;
    overflow: hidden;
    overscroll-behavior: none;
  }

  .participant-shell--goal-composition .split-stage {
    position: absolute;
    inset: 0;
    width: 100%;
    min-height: 100svh;
  }

  .participant-shell--goal-composition .form-panel--goal-composition {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    min-height: 100svh;
    padding: 0;
    pointer-events: none;
  }

  .participant-shell--goal-composition .panel-scroll {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    padding: 0;
    pointer-events: none;
  }

  .participant-shell--goal-composition .registration-goal-section {
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
    pointer-events: none;
  }

  .form-panel:not(:has(.panel-scroll)) {
    justify-content: center;
    gap: var(--space-5);
  }

  .panel-footer-actions,
  .panel-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--button-group-gap);
    justify-content: center;
    align-items: center;
  }

  .panel-back,
  .panel-spacer {
    width: max(var(--back-control-size), var(--touch-target-min-size));
    height: max(var(--back-control-size), var(--touch-target-min-size));
    border-radius: var(--radius-pill);
  }

  .panel-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--text);
    font-size: var(--back-arrow-size);
    font-weight: 800;
    line-height: var(--leading-solid);
    text-decoration: none;
    text-shadow: var(--shadow-stage-meta);
    opacity: var(--back-control-opacity);
    transition:
      color var(--dur) var(--ease),
      opacity var(--dur) var(--ease),
      transform var(--dur) var(--ease);
  }

  .panel-back:hover {
    color: rgba(255, 255, 255, 1);
    opacity: var(--back-control-hover-opacity);
  }
  .panel-back:focus-visible {
    outline: none;
    box-shadow: none;
    color: rgba(255, 255, 255, 1);
    opacity: var(--back-control-hover-opacity);
  }
  .panel-back:active {
    transform: scale(var(--app-press-scale-subtle));
  }

  /* Viewport-standard back: fixed top-left (routes + profile/feed overlays). */
  :is(.participant-shell, .messages-shell) .panel-back,
  .feed-comments-backdrop .panel-back {
    position: fixed;
    top: max(
      var(--safe-area-top),
      clamp(0.5rem, calc(var(--fluid-min) * var(--scale-double)), 1.25rem)
    );
    left: max(
      var(--safe-area-left),
      clamp(0.25rem, calc(var(--fluid-min) * var(--scale-double)), 1rem)
    );
    right: auto;
    bottom: auto;
    z-index: var(--z-float);
    grid-row: auto;
    grid-column: auto;
    justify-self: auto;
    align-self: auto;
    margin: 0;
    width: max(
      calc(var(--touch-target-min-size) * var(--scale-double)),
      calc(var(--back-control-size) * var(--scale-double))
    );
    min-width: max(
      calc(var(--touch-target-min-size) * var(--scale-double)),
      calc(var(--back-control-size) * var(--scale-double))
    );
    height: max(
      calc(var(--touch-target-min-size) * var(--scale-double)),
      calc(var(--back-control-size) * var(--scale-double))
    );
    min-height: max(
      calc(var(--touch-target-min-size) * var(--scale-double)),
      calc(var(--back-control-size) * var(--scale-double))
    );
    justify-content: flex-start;
    align-items: flex-start;
    padding-top: var(--layout-panel-back-padding-block-start);
    padding-left: var(--layout-panel-back-padding-inline-start);
    box-sizing: border-box;
    transform: none;
    pointer-events: auto;
  }

  .feed-comments-backdrop .panel-back {
    z-index: calc(var(--z-modal) + 5);
  }

  .legal-modal-backdrop .panel-back {
    --google-icon-size: var(--layout-panel-back-icon-size);

    position: fixed;
    top: max(
      var(--safe-area-top),
      clamp(0.5rem, calc(var(--fluid-min) * var(--scale-double)), 1.25rem)
    );
    left: max(
      var(--safe-area-left),
      clamp(0.25rem, calc(var(--fluid-min) * var(--scale-double)), 1rem)
    );
    z-index: calc(var(--z-modal) + 5);
    width: max(var(--back-control-size), var(--touch-target-min-size));
    min-width: max(var(--back-control-size), var(--touch-target-min-size));
    height: max(var(--back-control-size), var(--touch-target-min-size));
    min-height: max(var(--back-control-size), var(--touch-target-min-size));
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    pointer-events: auto;
  }

  .legal-modal-backdrop .panel-back svg,
  .legal-modal-backdrop .panel-back svg.google-icon {
    width: var(--layout-panel-back-icon-size);
    height: var(--layout-panel-back-icon-size);
  }

  .legal-modal-backdrop .panel-back:active {
    transform: scale(var(--app-press-scale-subtle));
  }

  :is(.participant-shell, .messages-shell) .panel-back:active,
  .feed-comments-backdrop .panel-back:active {
    transform: scale(var(--app-press-scale-subtle));
  }

  :is(.participant-shell, .messages-shell) .panel-back svg,
  :is(.participant-shell, .messages-shell) .panel-back svg.google-icon,
  .feed-comments-backdrop .panel-back svg,
  .feed-comments-backdrop .panel-back svg.google-icon,
  .legal-modal-backdrop .panel-back svg,
  .legal-modal-backdrop .panel-back svg.google-icon {
    width: var(--layout-panel-back-icon-size);
    height: var(--layout-panel-back-icon-size);
  }

  .participant-shell .panel-footer,
  .participant-shell .plus-sheet-footer.panel-footer,
  .messages-shell > .panel-footer,
  .feed-comments-backdrop > .panel-footer {
    display: contents;
    min-height: 0;
    margin: 0;
  }

  .participant-shell--window > .panel .panel-footer-actions {
    grid-row: 3;
    justify-self: center;
    width: 100%;
    max-width: 100%;
    gap: var(--button-group-gap);
  }

  .panel-spacer {
    visibility: hidden;
    pointer-events: none;
  }

  .plus-sheet {
    --plus-sheet-copy-width: min(var(--adaptive-content-width), 100%);
    position: absolute;
    inset: var(--sheet-full-inset);
    z-index: 2;
    isolation: isolate;
    container-type: size;
    container-name: adaptive-surface;
    height: var(--sheet-block-size);
    min-height: var(--sheet-block-size);
    max-height: var(--sheet-block-size);
    width: var(--sheet-full-inline);
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
    justify-items: center;
    align-items: stretch;
    padding-block: 0 var(--sheet-safe-area-bottom);
    padding-inline: var(--panel-safe-gutter-start) var(--panel-safe-gutter-end);
    text-align: center;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-bottom: var(--sheet-scroll-padding-bottom);
    -webkit-overflow-scrolling: touch;
  }

  .plus-sheet--details {
    --plus-sheet-content-scale: 1.15;
  }

  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .focus-backdrop__scrim {
      background: var(--focus-backdrop-scrim-fallback);
    }

    .focus-backdrop__blur {
      display: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .focus-backdrop__scrim,
    .focus-backdrop__blur {
      transition: none;
    }

    .split-stage .stage-media-shell > video.stage-media {
      transition: none;
    }

    .focus-backdrop[data-focus-backdrop-visible="true"] .focus-backdrop__scrim,
    .focus-backdrop[data-focus-backdrop-visible="true"] .focus-backdrop__blur {
      opacity: 1;
    }

    .focus-backdrop[data-focus-backdrop-visible="false"] .focus-backdrop__scrim,
    .focus-backdrop[data-focus-backdrop-visible="false"] .focus-backdrop__blur {
      opacity: 0;
    }
  }

  .plus-sheet-copy {
    anchor-name: --plus-sheet-copy;
    position: relative;
    z-index: 1;
    grid-row: 2;
    align-self: end;
    justify-self: center;
    width: var(--plus-sheet-copy-width);
    max-width: 100%;
    display: grid;
    justify-items: stretch;
    gap: calc(
      var(--adaptive-base-gap) * var(--scale-form-offset) * var(--plus-sheet-content-scale, 1)
    );
    text-align: left;
  }

  .plus-sheet--details .plus-sheet-copy {
    min-height: 0;
    max-height: calc(
      var(--sheet-block-size) -
        max(
          calc(var(--touch-target-min-size) * var(--scale-double)),
          calc(var(--back-control-size) * var(--scale-double))
        ) -
        max(var(--sheet-safe-area-bottom), var(--space-5))
    );
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }

  .plus-sheet--details .plus-sheet-copy::-webkit-scrollbar {
    display: none;
  }

  .plus-sheet-number {
    position: relative;
    z-index: 1;
    grid-row: 1;
    align-self: center;
    justify-self: center;
    width: calc(100% - var(--stage-inline-gutter) * var(--scale-double));
    margin: 0;
    color: var(--text);
    font-size: calc(
      var(--type-stage-anchor) * var(--scale-offer-button-inline) *
        var(--plus-sheet-content-scale, 1)
    );
    font-weight: 900;
    line-height: var(--lh-snug);
    letter-spacing: var(--tracking-body);
    text-align: center;
    font-variant-numeric: tabular-nums;
    -webkit-text-stroke: var(--text-stroke-heading);
    paint-order: stroke fill;
  }

  .plus-sheet-copy .panel-summary {
    width: 100%;
    max-width: none;
    font-size: calc(var(--adaptive-copy-size) * var(--plus-sheet-content-scale, 1));
    line-height: var(--line-height-adaptive-copy);
    color: rgba(255, 255, 255, 1);
    font-weight: 500;
    text-align: left;
    text-shadow: var(--shadow-stage-copy-medium);
  }

  .plus-sheet-footer.panel-footer:not(:has(> :nth-child(3)))::after {
    content: none;
    display: none;
  }

  .plus-sheet-footer .panel-back svg {
    display: block;
  }

  .plus-sheet-footer .panel-back svg path {
    fill: currentColor;
  }

  .participant-shell--plus.participant-shell--legacy-course {
    background: transparent;
  }

  .participant-shell--plus.participant-shell--legacy-course .split-stage {
    display: none;
  }

  .participant-shell--plus.participant-shell--legacy-course .plus-sheet {
    grid-template-rows:
      var(--layout-route-row-start) minmax(0, 1fr)
      var(--layout-route-row-end-compact);
  }

  .participant-shell--plus.participant-shell--legacy-course .plus-sheet--legacy-course::before {
    content: none;
  }

  .participant-shell--plus.participant-shell--legacy-course
    .plus-sheet[data-legacy-course-direct="true"] {
    grid-template-rows:
      var(--layout-route-row-start) minmax(0, 1fr)
      var(--layout-route-row-end-compact);
  }

  .participant-shell--plus.participant-shell--legacy-course .legacy-course-sheet-copy {
    align-self: stretch;
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: hidden;
    overscroll-behavior: contain;
    padding-block: 0;
    gap: 0;
    justify-items: center;
    scrollbar-width: none;
  }

  .participant-shell--plus.participant-shell--legacy-course
    .legacy-course-sheet-copy::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  .participant-shell--plus.participant-shell--legacy-course .plus-sheet-footer.panel-footer {
    pointer-events: none;
  }

  .legacy-course-archive {
    --legacy-course-switch-height: max(
      var(--interactive-min-size),
      clamp(1.85rem, calc(var(--fluid-block) * var(--scale-type-fluid-display-tight)), 2.35rem)
    );
    --legacy-course-back-bottom: var(--layout-sheet-dock-offset);
    --legacy-course-back-gap: var(--layout-sheet-dock-gap);
    --legacy-course-padding-block-start: var(--layout-sheet-padding-block-start);
    --legacy-course-padding-inline: var(--layout-sheet-padding-inline);
    --legacy-course-padding-switch-gap: var(--layout-sheet-switch-gap);
    --legacy-course-section-gap: var(--layout-sheet-section-gap);
    --legacy-course-frame-padding-block: var(--layout-sheet-frame-padding-block);
    --legacy-course-format-gap: var(--layout-sheet-format-gap);
    --legacy-course-tab-padding-block: var(--layout-sheet-tab-padding-block);
    --legacy-course-tab-padding-inline: clamp(
      0.38rem,
      calc(var(--fluid-inline) * var(--scale-bubble-inline)),
      0.9rem
    );
    --legacy-course-video-choice-min-height: calc(
      var(--button-min-height) * var(--scale-inset-inline)
    );
    --legacy-course-video-choice-padding-block: 0;
    --legacy-course-video-choice-padding-inline: clamp(
      0.34rem,
      calc(var(--adaptive-base-gap) * var(--scale-meta-tight)),
      0.52rem
    );
    --legacy-course-video-choice-radius: var(--radius-xs);
    --legacy-course-video-choice-font-size: var(--type-control-compact);
    --legacy-course-heading-color: var(--text-strong);
    --legacy-course-format-copy-color: rgba(255, 255, 255, 0.86);
    --legacy-course-control-border: rgba(255, 255, 255, 0.22);
    --legacy-course-control-border-hover: rgba(255, 255, 255, 0.42);
    --legacy-course-control-border-selected: rgba(255, 255, 255, 0.54);
    --legacy-course-control-border-strong: rgba(255, 255, 255, 0.52);
    --legacy-course-control-color: var(--button-color);
    --legacy-course-control-color-hover: rgba(255, 255, 255, 0.9);
    --legacy-course-control-color-selected: var(--text);
    --legacy-course-link-color: rgba(255, 255, 255, 0.9);
    --legacy-course-link-decoration-color: rgba(255, 255, 255, 0.42);
    --legacy-course-link-hover-color: var(--text-strong);
    --legacy-course-link-hover-decoration-color: var(--text-soft);
    --legacy-course-segments-border: rgba(255, 255, 255, 0.24);
    --legacy-course-thumb-border: rgba(255, 255, 255, 0.5);
    --legacy-course-thumb-bg: rgba(255, 255, 255, 0.1);
    --legacy-course-tab-color: rgba(255, 255, 255, 0.62);
    container-type: size;
    container-name: adaptive-surface;

    position: relative;
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }

  .legacy-course-archive::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  .legacy-course-section {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-height: 100%;
    min-height: 0;
    margin: 0;
    padding: var(--legacy-course-padding-block-start) var(--legacy-course-padding-inline);
  }

  .legacy-course-section-frame {
    display: grid;
    align-content: safe center;
    gap: var(--legacy-course-section-gap);
    width: min(var(--accordion-inline), 100%);
    max-width: var(--accordion-inline);
    margin-inline: auto;
    justify-items: stretch;
    height: auto;
    max-height: 100%;
    padding-block: var(--legacy-course-frame-padding-block);
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-width: none;
  }

  .legacy-course-section-frame::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  .legacy-course-format-frame {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
    align-content: stretch;
    place-items: center;
    justify-items: center;
    width: 100%;
    height: 100%;
    max-height: 100%;
    gap: 0;
    overflow: visible;
  }

  .legacy-course-format-copy {
    grid-row: 2;
    align-self: center;
    display: grid;
    justify-items: center;
    gap: var(--legacy-course-format-gap);
    width: min(var(--container-form-local), 100%);
    max-width: 100%;
    text-align: center;
  }

  .legacy-course-format-footer {
    grid-row: 3;
    display: grid;
    place-items: center;
    align-self: center;
    width: 100%;
    min-height: max(var(--back-control-size), var(--touch-target-min-size));
  }

  .legacy-course-format-copy h2 {
    margin: 0;
    color: var(--legacy-course-heading-color);
    font-size: var(--type-title-small);
    font-weight: 600;
    line-height: var(--lh-snug);
    letter-spacing: var(--tracking-none);
    text-wrap: balance;
  }

  .legacy-course-format-copy .panel-summary {
    margin: 0;
    max-width: none;
    color: var(--legacy-course-format-copy-color);
    font-size: var(--type-body);
    font-weight: 400;
    line-height: var(--leading-readable);
    text-align: center;
    text-shadow: var(--shadow-stage-copy);
  }

  .legacy-course-format-copy .legacy-course-format-link {
    justify-self: center;
  }

  .legacy-course-video-leading {
    display: grid;
    gap: var(--layout-list-gap);
    width: 100%;
  }

  .legacy-course-video-leading > .legacy-course-after {
    gap: 0;
  }

  .legacy-course-video-switcher {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: var(--layout-micro-gap);
    width: 100%;
  }

  .legacy-course-video-choice {
    min-height: var(--legacy-course-video-choice-min-height);
    min-width: 0;
    width: 100%;
    padding: var(--legacy-course-video-choice-padding-block)
      var(--legacy-course-video-choice-padding-inline);
    border: var(--divider-width) solid var(--legacy-course-control-border);
    border-radius: var(--legacy-course-video-choice-radius);
    background: transparent;
    color: var(--legacy-course-control-color);
    font-size: var(--legacy-course-video-choice-font-size);
    font-weight: 500;
    line-height: var(--leading-solid);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: none;
    transition: none;
  }

  .legacy-course-video-choice[data-selected="true"] {
    border-color: var(--legacy-course-control-border-selected);
    background: transparent;
    color: var(--legacy-course-control-color-selected);
  }

  .legacy-course-video-choice:hover:not(:disabled) {
    border-color: var(--legacy-course-control-border-hover);
    background: transparent;
    color: var(--legacy-course-control-color-hover);
    opacity: 1;
    transform: none;
  }

  .legacy-course-video-choice:active:not(:disabled) {
    transform: none;
  }

  .legacy-course-after {
    display: grid;
    gap: var(--accordion-paragraph-gap);
    width: 100%;
  }

  .legacy-course-after p,
  .legacy-course-after li {
    margin: 0;
    color: var(--text-soft);
    font-size: calc(var(--accordion-body-size, var(--type-small)) * var(--accordion-scale, 1));
    line-height: var(--accordion-body-line-height, var(--leading-readable));
    text-wrap: pretty;
  }

  .legacy-course-after ul {
    margin: 0;
    padding-left: var(--list-indent);
  }

  .lesson-accordion-body .legacy-course-after li + li {
    margin-top: 0;
  }

  .legacy-course-after-title {
    color: var(--legacy-course-link-color) !important;
    font-weight: 500;
  }

  .legacy-course-after a {
    color: var(--legacy-course-link-color);
    text-decoration-line: underline;
    text-decoration-thickness: var(--text-decoration-line-width);
    text-decoration-color: var(--legacy-course-link-decoration-color);
    text-underline-offset: var(--text-underline-offset-lg);
    transition:
      color var(--dur) var(--ease-out),
      text-decoration-color var(--dur) var(--ease-out);
  }

  .legacy-course-after a:hover {
    color: var(--legacy-course-link-hover-color);
    text-decoration-color: var(--legacy-course-link-hover-decoration-color);
  }

  .legacy-course-after .legacy-course-download-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: var(--legacy-course-video-choice-min-height);
    padding: var(--legacy-course-video-choice-padding-block)
      var(--legacy-course-video-choice-padding-inline);
    border: var(--divider-width) solid var(--legacy-course-control-border);
    border-radius: var(--legacy-course-video-choice-radius);
    background: transparent;
    color: var(--legacy-course-control-color);
    font-size: var(--legacy-course-video-choice-font-size);
    font-weight: 500;
    line-height: var(--leading-solid);
    text-align: center;
    text-decoration: none;
    box-shadow: none;
  }

  .legacy-course-after .legacy-course-download-button:hover {
    border-color: var(--legacy-course-control-border-strong);
    background: transparent;
    color: var(--legacy-course-link-hover-color);
    text-decoration: none;
  }

  .legacy-course-course-switch {
    position: static;
    z-index: auto;
    display: grid;
    place-items: center;
    width: 100%;
    max-width: var(--accordion-inline);
    justify-self: center;
    padding-inline: 0;
    pointer-events: auto;
  }

  .legacy-course-course-segments {
    --segments: 3;
    --segment-index: 0;
    width: 100%;
    padding: var(--segmented-inset);
    border-color: var(--legacy-course-segments-border);
    background: transparent;
  }

  .legacy-course-course-thumb {
    top: var(--segmented-inset);
    left: var(--segmented-inset);
    bottom: var(--segmented-inset);
    width: calc((100% - var(--segmented-inset) * var(--scale-double)) / var(--segments));
    border-color: var(--legacy-course-thumb-border);
    background: var(--legacy-course-thumb-bg);
    transform: translateX(calc(var(--segment-index) * 100%));
  }

  .legacy-course-course-tab {
    min-height: var(--legacy-course-switch-height);
    min-width: 0;
    padding: var(--legacy-course-tab-padding-block) var(--legacy-course-tab-padding-inline);
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--legacy-course-tab-color);
    font-size: var(--type-control);
    font-weight: 650;
    line-height: var(--lh-snug);
    text-align: center;
    text-decoration: none;
    box-shadow: none;
    transition: none;
    overflow: hidden;
    white-space: nowrap;
  }

  .legacy-course-course-tab[data-active="true"] {
    color: var(--legacy-course-control-color-selected);
  }

  .legacy-course-course-tab[data-course-tab="format"] {
    color: var(--legacy-course-control-color);
  }

  .legacy-course-course-tab:hover:not(:disabled),
  .legacy-course-course-tab[data-course-tab="format"]:hover {
    background: transparent;
    color: var(--legacy-course-control-color-hover);
    opacity: 1;
    transform: none;
  }

  @container adaptive-surface (max-width: var(--container-query-tight)) {
    .legacy-course-course-switch {
      padding-inline: 0;
    }

    .legacy-course-course-segments {
      --segmented-inset: var(--segmented-inset-compact);
    }

    .legacy-course-course-thumb {
      top: var(--segmented-inset);
      left: var(--segmented-inset);
      bottom: var(--segmented-inset);
      width: calc((100% - var(--segmented-inset) * var(--scale-double)) / var(--segments));
    }

    .legacy-course-course-tab {
      min-height: var(--legacy-course-tab-min-height-compact);
      padding-block: var(--legacy-course-tab-padding-block-compact);
      padding-inline: var(--legacy-course-tab-padding-inline-compact);
      font-size: var(--type-control);
    }
  }

  @container adaptive-surface (max-width: var(--container-query-compact)) {
    .legacy-course-course-tab {
      padding-block: var(--legacy-course-tab-padding-block-compact);
      padding-inline: var(--legacy-course-tab-padding-inline-compact);
    }
  }

  /* ==========================================================================
   Shared button engine
   ========================================================================== */

  .action,
  button:not(
    :is(
      .lesson-accordion-trigger,
      .legacy-course-video-choice,
      .profile-action-button,
      .life-focus-timer button,
      .message-attachment-preview-control,
      .feed-post-media-action,
      .message-attachment-retry,
      .message-attachment-fullscreen-close,
      .message-attachment-fullscreen-nav,
      .feed-post-action-button,
      .feed-comments-button,
      .feed-comment-thread-tab,
      .stage-video-play-button,
      .icon-hit-control,
      .messages-send,
      .messages-composer-back,
      .messages-forward-cancel,
      .messages-composer-accessory-actions button,
      .message-forward-select,
      .stage-nav-button,
      .watch-series-button,
      .panel-back,
      [class*="icon-button"],
      [class*="-photo-picker"],
      [class*="composer-back"],
      [class*="-nav-button"],
      [class*="-arrow-button"]
    )
  ),
  .choice-card,
  .lesson-tab,
  .segment,
  .offer-details-button,
  .offer-pay-button,
  .offer-switch-tab,
  .ghost-button {
    appearance: none;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--button-gap);
    width: var(--button-width);
    min-width: var(--button-min-width);
    max-width: var(--button-max-width);
    min-height: var(--button-min-height);
    padding: var(--button-padding-block) var(--button-padding-inline);
    border: var(--button-border);
    border-radius: var(--button-radius);
    background: var(--button-bg);
    color: var(--button-color);
    font-size: var(--button-font-size);
    font-weight: 500;
    letter-spacing: var(--tracking-none);
    line-height: var(--button-line-height);
    text-align: center;
    white-space: var(--button-white-space);
    text-wrap: var(--button-text-wrap);
    overflow-wrap: var(--button-overflow-wrap);
    text-decoration: none;
    flex-shrink: 0;
    touch-action: manipulation;
    transition: var(--button-transition);
  }

  .action:focus-visible,
  button:focus-visible:not(
      :is(
        .lesson-accordion-trigger,
        .legacy-course-video-choice,
        .profile-action-button,
        .life-focus-timer button,
        .message-attachment-preview-control,
        .feed-post-media-action,
        .message-attachment-retry,
        .message-attachment-fullscreen-close,
        .message-attachment-fullscreen-nav,
        .feed-post-action-button,
        .feed-comments-button,
        .feed-comment-thread-tab,
        .stage-video-play-button,
        .icon-hit-control,
        .messages-send,
        .messages-composer-back,
        .messages-forward-cancel,
        .messages-composer-accessory-actions button,
        .message-forward-select,
        .stage-nav-button,
        .watch-series-button,
        .panel-back,
        [class*="icon-button"],
        [class*="-photo-picker"],
        [class*="composer-back"],
        [class*="-nav-button"],
        [class*="-arrow-button"]
      )
    ),
  .choice-card:focus-visible,
  .lesson-tab:focus-visible,
  .segment:focus-visible,
  .offer-details-button:focus-visible,
  .offer-pay-button:focus-visible,
  .offer-switch-tab:focus-visible,
  .ghost-button:focus-visible {
    outline: none;
    box-shadow:
      0 0 0 2px var(--page),
      0 0 0 4px var(--accent);
  }

  .action:hover:not([data-disabled="true"]):not(:disabled),
  button:hover:not(:disabled):not(
      :is(
        .lesson-accordion-trigger,
        .legacy-course-video-choice,
        .profile-action-button,
        .life-focus-timer button,
        .message-attachment-preview-control,
        .feed-post-media-action,
        .message-attachment-retry,
        .message-attachment-fullscreen-close,
        .message-attachment-fullscreen-nav,
        .feed-post-action-button,
        .feed-comments-button,
        .feed-comment-thread-tab,
        .stage-video-play-button,
        .icon-hit-control,
        .messages-send,
        .messages-composer-back,
        .messages-forward-cancel,
        .messages-composer-accessory-actions button,
        .message-forward-select,
        .stage-nav-button,
        .watch-series-button,
        .panel-back,
        [class*="icon-button"],
        [class*="-photo-picker"],
        [class*="composer-back"],
        [class*="-nav-button"],
        [class*="-arrow-button"]
      )
    ),
  .choice-card:hover,
  .lesson-tab:hover,
  .segment:hover:not(:has(input:checked)),
  .offer-details-button:hover:not(:disabled),
  .offer-pay-button:hover:not(:disabled),
  .offer-switch-tab:hover:not(:has(input:checked)),
  .ghost-button:hover {
    border-color: var(--button-border-hover);
    background: var(--button-bg-hover);
    color: var(--button-color-hover);
    opacity: 1;
  }

  .action:active:not([data-disabled="true"]):not(:disabled),
  button:active:not(:disabled):not(
      :is(
        .lesson-accordion-trigger,
        .legacy-course-video-choice,
        .profile-action-button,
        .life-focus-timer button,
        .message-attachment-preview-control,
        .feed-post-media-action,
        .message-attachment-retry,
        .message-attachment-fullscreen-close,
        .message-attachment-fullscreen-nav,
        .feed-post-action-button,
        .feed-comments-button,
        .feed-comment-thread-tab,
        .stage-video-play-button,
        .icon-hit-control,
        .messages-send,
        .messages-composer-back,
        .messages-forward-cancel,
        .messages-composer-accessory-actions button,
        .message-forward-select,
        .stage-nav-button,
        .watch-series-button,
        .panel-back,
        [class*="icon-button"],
        [class*="-photo-picker"],
        [class*="composer-back"],
        [class*="-nav-button"],
        [class*="-arrow-button"]
      )
    ),
  .choice-card:active,
  .lesson-tab:active,
  .segment:active:not(:has(input:disabled)),
  .offer-details-button:active:not(:disabled),
  .offer-pay-button:active:not(:disabled),
  .offer-switch-tab:active:not(:has(input:disabled)),
  .ghost-button:active {
    transform: scale(var(--app-press-scale-soft));
    background: var(--button-bg-active);
  }

  /* Icon / arrow controls: no hover fill; dimensions and ::before hit areas stay as-is. */
  button:is(
      .icon-hit-control,
      [class*="icon-button"],
      [class*="-photo-picker"],
      [class*="composer-back"],
      [class*="-nav-button"],
      [class*="-arrow-button"],
      .messages-send,
      .message-forward-select,
      .message-attachment-preview-control,
      .feed-post-media-action,
      .feed-comment-thread-tab,
      .stage-video-play-button,
      .stage-nav-button,
      .watch-series-button,
      .panel-back
    ):where(:hover, :focus-visible, :active):not(:disabled):not([data-active="true"]) {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    outline: none;
  }

  .action[data-tone="primary"],
  button:not(
    :is(
      .lesson-accordion-trigger,
      .legacy-course-video-choice,
      .profile-action-button,
      .life-focus-timer button,
      .message-attachment-preview-control,
      .feed-post-media-action,
      .message-attachment-retry,
      .message-attachment-fullscreen-close,
      .message-attachment-fullscreen-nav,
      .feed-post-action-button,
      .feed-comments-button,
      .feed-comment-thread-tab,
      .stage-video-play-button,
      .icon-hit-control,
      .messages-send,
      .messages-composer-back,
      .messages-forward-cancel,
      .messages-composer-accessory-actions button,
      .message-forward-select,
      .stage-nav-button,
      .watch-series-button,
      .panel-back,
      [class*="icon-button"],
      [class*="-photo-picker"],
      [class*="composer-back"],
      [class*="-nav-button"],
      [class*="-arrow-button"]
    )
  ) {
    background: var(--accent);
    color: var(--accent-ink);
  }

  .action[data-effect="text-shimmer"],
  .offer-pay-button[data-effect="text-shimmer"],
  button[data-effect="text-shimmer"] {
    position: relative;
    overflow: hidden;
    background: transparent;
    color: var(--button-color);
    box-shadow: var(--shadow-shimmer-ring);
  }

  .action[data-effect="text-shimmer"]:hover:not([data-disabled="true"]):not(:disabled),
  .offer-pay-button[data-effect="text-shimmer"]:hover:not(:disabled),
  button[data-effect="text-shimmer"]:hover:not(:disabled) {
    border-color: rgba(255, 255, 255, 0.34);
    opacity: 1;
  }

  .legacy-course-format-link {
    min-height: var(--button-min-height);
    min-width: 0;
    width: auto;
    padding: var(--button-padding-block) var(--button-padding-inline);
    border: var(--button-border);
    border-radius: var(--button-radius);
    background: transparent;
    color: var(--button-color);
    font-size: var(--button-font-size);
    font-weight: 600;
    line-height: var(--button-line-height);
    text-decoration: none;
    text-shadow: none;
    box-shadow: none;
  }

  .legacy-course-format-link[data-effect="text-shimmer"] {
    box-shadow: var(--shadow-shimmer-ring);
  }

  .participant-shell--window .panel-footer-actions .action {
    min-width: var(--button-min-width);
    max-width: 100%;
    min-height: var(--button-min-height);
    padding-block: var(--button-padding-block);
    padding-inline: var(--button-padding-inline);
    border-radius: var(--button-radius);
    border: var(--line-width-thin) solid rgba(255, 255, 255, 0.264);
    background: transparent;
    color: var(--button-color);
    font-size: var(--button-font-size);
    letter-spacing: var(--tracking-none);
    line-height: var(--leading-solid);
    white-space: nowrap;
    text-wrap: nowrap;
    overflow-wrap: normal;
    box-shadow: none;
  }

  .participant-shell--window .panel-footer-actions .action[data-tone="secondary"] {
    color: rgba(255, 255, 255, 0.576);
  }

  .participant-shell--window .panel-footer-actions .action[data-e2e-action="join"] {
    border-color: rgba(255, 255, 255, 0.317);
  }

  .participant-shell--window-details .panel-footer-actions .action {
    border-color: rgba(255, 255, 255, 0.9);
    color: rgba(255, 255, 255, 1);
  }

  .participant-shell--window
    .panel-footer-actions
    .action:hover:not([data-disabled="true"]):not(:disabled) {
    border-color: var(--button-border-hover);
    background: transparent;
    color: var(--button-color-hover);
    opacity: 1;
  }

  .participant-shell--window
    .panel-footer-actions
    .action[data-e2e-action="join"]:hover:not([data-disabled="true"]):not(:disabled) {
    border-color: rgba(255, 255, 255, 0.408);
  }

  .text-shimmer {
    --text-shimmer-spread: 4;
    --text-shimmer-soft-edge: 18%;
    --text-shimmer-hot-edge: 6%;
    --text-shimmer-base: rgba(255, 255, 255, 0.54);
    --text-shimmer-glow: rgba(232, 240, 255, 0.82);
    --text-shimmer-bright: rgba(255, 255, 255, 0.92);

    display: inline-block;
    color: transparent;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(
      90deg,
      var(--text-shimmer-base) 0%,
      var(--text-shimmer-base) calc(50% - var(--text-shimmer-soft-edge)),
      var(--text-shimmer-glow) calc(50% - var(--text-shimmer-hot-edge)),
      var(--text-shimmer-bright) 50%,
      var(--text-shimmer-glow) calc(50% + var(--text-shimmer-hot-edge)),
      var(--text-shimmer-base) calc(50% + var(--text-shimmer-soft-edge)),
      var(--text-shimmer-base) 100%
    );
    background-size: 200% 100%;
    background-repeat: repeat;
    background-position: 0% 50%;
    background-clip: text;
    -webkit-background-clip: text;
    animation: text-shimmer-sweep var(--motion-text-shimmer-duration) linear infinite;
  }

  .participant-shell--window .panel-footer-actions .text-shimmer {
    display: inline-flex;
    align-items: center;
    font-weight: 650;
    line-height: inherit;
  }

  @keyframes text-shimmer-sweep {
    from {
      background-position: 0% 50%;
    }
    to {
      background-position: 200% 50%;
    }
  }

  .text-shimmer-wave {
    --text-shimmer-wave-base: currentColor;
    --text-shimmer-wave-shimmer: currentColor;
    --text-shimmer-wave-duration: 2200ms;
    --text-shimmer-wave-stagger: 72ms;

    display: inline-flex;
    align-items: baseline;
    color: var(--text-shimmer-wave-base);
    white-space: nowrap;
  }

  .text-shimmer-wave-char {
    --text-shimmer-wave-order: 0;
    display: inline-block;
    color: var(--text-shimmer-wave-base);
    animation: text-shimmer-wave var(--text-shimmer-wave-duration) ease-in-out infinite;
    animation-delay: calc(var(--text-shimmer-wave-order) * var(--text-shimmer-wave-stagger));
  }

  .text-shimmer-wave-char:nth-child(2) {
    --text-shimmer-wave-order: 1;
  }

  .text-shimmer-wave-char:nth-child(3) {
    --text-shimmer-wave-order: 2;
  }

  .text-shimmer-wave-char:nth-child(4) {
    --text-shimmer-wave-order: 3;
  }

  .text-shimmer-wave-char:nth-child(5) {
    --text-shimmer-wave-order: 4;
  }

  .text-shimmer-wave-char:nth-child(6) {
    --text-shimmer-wave-order: 5;
  }

  .text-shimmer-wave-char:nth-child(7) {
    --text-shimmer-wave-order: 6;
  }

  .text-shimmer-wave-char:nth-child(8) {
    --text-shimmer-wave-order: 7;
  }

  .text-shimmer-wave-char:nth-child(9) {
    --text-shimmer-wave-order: 8;
  }

  .text-shimmer-wave-char:nth-child(10) {
    --text-shimmer-wave-order: 9;
  }

  .text-shimmer-wave-char:nth-child(11) {
    --text-shimmer-wave-order: 10;
  }

  .text-shimmer-wave-char:nth-child(12) {
    --text-shimmer-wave-order: 11;
  }

  .text-shimmer-wave-char:nth-child(13) {
    --text-shimmer-wave-order: 12;
  }

  .text-shimmer-wave-char:nth-child(14) {
    --text-shimmer-wave-order: 13;
  }

  .text-shimmer-wave-char:nth-child(15) {
    --text-shimmer-wave-order: 14;
  }

  .text-shimmer-wave-char:nth-child(16) {
    --text-shimmer-wave-order: 15;
  }

  .text-shimmer-wave-char:nth-child(17) {
    --text-shimmer-wave-order: 16;
  }

  .text-shimmer-wave-char:nth-child(18) {
    --text-shimmer-wave-order: 17;
  }

  .text-shimmer-wave-char:nth-child(19) {
    --text-shimmer-wave-order: 18;
  }

  .text-shimmer-wave-char:nth-child(20) {
    --text-shimmer-wave-order: 19;
  }

  .text-shimmer-wave-char:nth-child(21) {
    --text-shimmer-wave-order: 20;
  }

  .text-shimmer-wave-char:nth-child(22) {
    --text-shimmer-wave-order: 21;
  }

  .text-shimmer-wave-char:nth-child(23) {
    --text-shimmer-wave-order: 22;
  }

  .text-shimmer-wave-char:nth-child(24) {
    --text-shimmer-wave-order: 23;
  }

  @keyframes text-shimmer-wave {
    0%,
    100% {
      color: var(--text-shimmer-wave-base);
      opacity: 0.86;
      transform: var(--motion-shimmer-wave-rest-transform);
    }
    38% {
      color: var(--text-shimmer-wave-shimmer);
      opacity: 1;
      transform: var(--motion-shimmer-wave-crest-transform);
    }
    58% {
      color: var(--text-shimmer-wave-shimmer);
      opacity: 0.94;
      transform: var(--motion-shimmer-wave-tail-transform);
    }
  }

  .spokes {
    --spokes-size: 1.35rem;
    --spokes-ring: 34%;

    display: inline-block;
    flex: 0 0 auto;
    width: var(--spokes-size);
    height: var(--spokes-size);
    border-radius: var(--radius-circle);
    color: currentColor;
    background: conic-gradient(
      from 0deg,
      rgba(255, 255, 255, 0) 0deg,
      rgba(255, 255, 255, 0.16) 150deg,
      currentColor 360deg
    );
    -webkit-mask: radial-gradient(
      farthest-side,
      transparent calc(100% - var(--spokes-ring)),
      var(--mask-ink) calc(100% - var(--spokes-ring) + 1px)
    );
    mask: radial-gradient(
      farthest-side,
      transparent calc(100% - var(--spokes-ring)),
      var(--mask-ink) calc(100% - var(--spokes-ring) + 1px)
    );
    animation: spokes-spin var(--motion-spokes-duration) steps(12, end) infinite;
  }

  .spokes[data-variant="page"] {
    --spokes-size: var(--spinner-page-size);
    --spokes-ring: 24%;
  }

  .loading-spokes {
    display: grid;
    place-items: center;
    min-height: var(--spinner-block-min-height);
    color: var(--text);
  }

  .loading-spokes[data-variant="control"] {
    min-height: var(--control-lg);
    width: 100%;
    color: var(--text);
  }

  .loading-spokes[data-variant="control"] .spokes {
    --spokes-size: 1.35rem;
  }

  @keyframes spokes-spin {
    to {
      transform: rotate(1turn);
    }
  }

  .action[data-tone="primary"]:hover:not([data-disabled="true"]):not(:disabled),
  button:hover:not(:disabled) {
    opacity: 0.9;
  }

  .action[data-tone="primary"]:active:not([data-disabled="true"]):not(:disabled),
  button:active:not(:disabled) {
    transform: scale(var(--app-press-scale-soft));
  }

  .action[data-tone="secondary"],
  .ghost-button {
    background: transparent;
    color: var(--text-soft);
  }

  .action[data-tone="secondary"]:hover,
  .ghost-button:hover {
    color: var(--text);
  }

  .participant-shell .panel-back[type="button"] {
    padding-top: var(--layout-panel-back-padding-block-start);
    padding-left: var(--layout-panel-back-padding-inline-start);
    padding-right: 0;
    padding-bottom: 0;
  }

  .panel-back[type="button"] {
    min-height: max(var(--back-control-size), var(--touch-target-min-size));
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
  }

  .panel-back:hover,
  .panel-back:focus-visible,
  .panel-back:active,
  .panel-back[type="button"]:hover:not(:disabled),
  .panel-back[type="button"]:active:not(:disabled) {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
  }

  .panel-back:active,
  .panel-back[type="button"]:active:not(:disabled) {
    transform: scale(var(--app-press-scale-subtle));
  }

  .ghost-button {
    font-weight: 500;
  }

  button:disabled,
  .action[data-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
  }

  /* ==========================================================================
   Cards (status / message / note / profile / activation / form-section)
   Тонкая группировка без рамок и различимых плашек.
   ========================================================================== */

  .status-card,
  .activation-card,
  .message-card,
  .note-card,
  .form-section,
  .profile-card,
  .watch-card {
    width: 100%;
    max-width: var(--copy-width);
    margin-inline: auto;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
  }

  .form-section {
    display: grid;
    gap: var(--space-3);
    text-align: center;
  }

  :is(
    .form-panel,
    .watch-panel,
    .feed-posts,
    .messages-feed,
    .plus-sheet,
    .note-focus-card
  )[data-route-appear="true"] {
    animation: route-surface-appear 160ms var(--ease-out, ease-out) both;
  }

  @keyframes route-surface-appear {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  .form-section > form,
  .form-section > label,
  .form-section > fieldset,
  .form-section > .check-row,
  .form-section > .rules-list,
  .form-section > .message-list {
    text-align: start;
  }

  .otp-only-section > form,
  .rules-consent-section > form {
    text-align: start;
  }

  .registration-otp-section.otp-only-section > form,
  .registration-otp-section.otp-only-section > label {
    text-align: center;
  }

  .status-card,
  .activation-card,
  .message-card,
  .note-card,
  .profile-card {
    display: grid;
    gap: var(--space-2);
  }

  .message-list {
    display: grid;
    gap: var(--space-3);
    width: 100%;
  }

  .message-card h3 {
    color: var(--text);
    font-size: var(--form-card-heading-size);
    font-weight: 500;
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-soft-tight);
  }

  .status-card,
  .activation-card {
    padding: var(--space-4);
    background: var(--surface-soft);
    border: var(--divider-width) solid var(--hairline);
    border-radius: var(--radius-md);
    text-align: start;
  }

  .system-notice,
  .panel-notice,
  .messages-notice {
    width: 100%;
    max-width: var(--system-notice-width);
    margin-inline: auto;
    display: grid;
    justify-items: center;
    gap: var(--system-notice-gap);
    padding: var(--system-notice-padding-block) var(--system-notice-padding-inline);
    background: transparent;
    border: var(--divider-width) solid var(--hairline);
    border-radius: var(--radius-md);
    text-align: center;
    overflow-wrap: anywhere;
    text-wrap: balance;
  }

  .system-notice h2,
  .system-notice p,
  .panel-notice strong,
  .panel-notice span,
  .messages-notice strong,
  .messages-notice span {
    max-width: 100%;
    text-align: center;
  }

  .status-card.system-notice h2 {
    font-size: var(--form-status-heading-size);
    letter-spacing: var(--tracking-none);
  }

  .form-section > h2,
  .status-card h2 {
    font-size: var(--form-section-heading-size);
    font-weight: 500;
    color: var(--text);
    letter-spacing: var(--tracking-ui-tight);
    line-height: var(--lh-tight);
    text-wrap: balance;
  }

  .registration-section {
    --registration-section-gap: var(--layout-stack-gap-tight);
    --registration-control-gap: var(--layout-registration-control-gap);
    --registration-control-min-height: var(--field-registration-control-min-height);
    --registration-control-padding-block: var(--field-registration-control-padding-block);
    --registration-action-min-height: var(--field-control-min-height);
    --registration-action-padding-block: var(--button-padding-block);
    --registration-action-padding-inline: var(--button-padding-inline);
    --registration-note-color: rgba(255, 255, 255, 0.31);
    container-type: size;
    container-name: adaptive-surface;
    max-width: var(--container-form-local);
  }

  .registration-identity-section > form,
  .registration-otp-section > form {
    gap: var(--registration-control-gap);
  }

  .registration-name-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--registration-control-gap);
    width: 100%;
  }

  .registration-name-fields > label {
    min-width: 0;
  }

  .registration-name-fields input:not([type="checkbox"]):not([type="radio"]) {
    width: 100%;
  }

  .registration-identity-section input:not([type="checkbox"]):not([type="radio"]),
  .registration-otp-section input:not([type="checkbox"]):not([type="radio"]) {
    min-height: var(--registration-control-min-height);
    padding-block: var(--registration-control-padding-block);
    font-size: var(--type-body-large);
    line-height: var(--lh-snug);
    letter-spacing: var(--tracking-none);
    text-align: center;
  }

  .registration-section input::placeholder,
  .registration-section textarea::placeholder {
    color: var(--form-placeholder-color);
    opacity: 1;
    text-align: center;
  }

  .registration-otp-section input::placeholder {
    color: var(--form-placeholder-muted-color);
    opacity: 1;
  }

  .participant-shell--registration .registration-section {
    --registration-control-gap: var(--layout-registration-control-gap-compact);
    --registration-control-min-height: var(--field-control-min-height);
    --registration-control-padding-block: var(--field-control-padding-block);
    width: 100%;
    max-width: var(--container-form-narrow-local);
    margin-inline: auto;
  }

  .participant-shell--registration:not(.participant-shell--auth-layout)
    > .form-panel
    > .panel-scroll
    > .panel-copy,
  .participant-shell--registration:not(.participant-shell--auth-layout)
    > .form-panel
    > .panel-scroll
    > .registration-identity-section,
  .participant-shell--registration:not(.participant-shell--auth-layout)
    > .form-panel
    > .panel-scroll
    > .registration-otp-section {
    width: 100%;
    max-width: 100%;
  }

  .participant-shell--registration .registration-identity-title {
    width: 100%;
    max-width: var(--container-form-narrow-local);
    margin: 0;
    color: var(--form-field-text-color);
    font-size: var(--registration-identity-title-size);
    font-weight: calc(var(--form-field-font-weight) * var(--scale-back-arrow));
    line-height: var(--lh-snug);
    letter-spacing: var(--tracking-none);
    text-align: center;
    text-wrap: balance;
  }

  .participant-shell--registration .gift-registration-note {
    width: var(--container-gift-registration-note-inline);
    max-width: var(--container-panel-summary);
    margin-inline: auto;
    font-size: var(--adaptive-copy-size);
    line-height: var(--line-height-adaptive-copy);
    font-weight: 400;
    text-align: center;
    text-wrap: pretty;
  }

  .participant-shell--registration .registration-identity-note,
  .participant-shell--registration .gift-donor-registration-note {
    font-size: var(--adaptive-copy-size);
    font-weight: 400;
    line-height: var(--line-height-adaptive-copy);
    color: var(--text-strong);
    text-align: center;
    text-wrap: pretty;
  }

  .participant-shell--join-gift.participant-shell--registration .gift-donor-registration-note {
    font-size: calc(var(--adaptive-copy-size) * var(--scale-copy-subtle));
  }

  .participant-shell--gift-activation.participant-shell--registration
    .gift-activation-registration-note {
    font-size: calc(var(--adaptive-copy-size) * var(--scale-copy-subtle));
    max-width: var(--container-window-panel-summary-inline);
    margin-inline: auto;
    margin-top: calc(var(--registration-identity-stack-gap, var(--space-5)) * -0.35);
  }

  .participant-shell--registration .registration-identity-note .text-shimmer,
  .participant-shell--registration .gift-donor-registration-note .text-shimmer {
    --text-shimmer-base: rgba(255, 255, 255, 0.78);
    --text-shimmer-glow: rgba(232, 240, 255, 0.98);
    --text-shimmer-bright: rgba(255, 255, 255, 1);

    display: inline-block;
    max-width: 100%;
    font-weight: inherit;
    text-align: center;
  }

  .participant-shell--registration .registration-identity-note .text-shimmer > span {
    display: block;
  }

  .participant-shell--registration .gift-registration-note > span {
    display: block;
  }

  .participant-shell--registration .registration-identity-section > form,
  .participant-shell--registration .registration-otp-section > form {
    gap: var(--registration-control-gap);
  }

  .participant-shell--registration .registration-identity-section,
  .participant-shell--registration .registration-otp-section {
    --login-input-border: var(--form-field-border-color);
    --login-input-border-focus: var(--form-field-border-color-focus);
  }

  .participant-shell--registration .registration-identity-section > form,
  .participant-shell--registration .registration-otp-section > form {
    width: 100%;
    justify-items: center;
    text-align: center;
  }

  .participant-shell--registration .registration-identity-section label,
  .participant-shell--registration .registration-otp-section label {
    width: 100%;
    text-align: center;
  }

  .participant-shell--registration
    .registration-identity-section
    input:not([type="checkbox"]):not([type="radio"]),
  .participant-shell--registration
    .registration-otp-section
    input:not([type="checkbox"]):not([type="radio"]) {
    -webkit-appearance: none;
    appearance: none;
    --login-email-control-height: var(--control-lg);
    --login-email-line-height: calc(
      var(--login-email-control-height) - var(--divider-width) * var(--scale-double)
    );
    box-sizing: border-box;
    height: var(--login-email-control-height);
    min-height: var(--login-email-control-height);
    min-width: 0;
    width: 100%;
    field-sizing: fixed;
    padding: 0 var(--button-padding-inline);
    border: var(--form-field-border-width) solid var(--login-input-border);
    border-radius: var(--radius-field);
    background: transparent !important;
    box-shadow: none;
    color: var(--form-field-text-color);
    caret-color: var(--form-field-text-color);
    font-size: var(--fs-md);
    font-weight: var(--form-field-font-weight);
    line-height: var(--login-email-line-height);
    -webkit-text-fill-color: var(--form-field-text-color);
  }

  .participant-shell--registration
    .registration-identity-section
    input:not([type="checkbox"]):not([type="radio"]):focus,
  .participant-shell--registration
    .registration-identity-section
    input:not([type="checkbox"]):not([type="radio"]):focus-visible,
  .participant-shell--registration
    .registration-otp-section
    input:not([type="checkbox"]):not([type="radio"]):focus,
  .participant-shell--registration
    .registration-otp-section
    input:not([type="checkbox"]):not([type="radio"]):focus-visible {
    border-color: var(--login-input-border-focus);
  }

  .participant-shell--registration
    .registration-identity-section
    input:not([type="checkbox"]):not([type="radio"])::placeholder,
  .participant-shell--registration
    .registration-otp-section
    input:not([type="checkbox"]):not([type="radio"])::placeholder {
    color: var(--form-field-text-color);
    font-weight: var(--form-field-font-weight);
    text-align: center;
  }

  .participant-shell--registration .registration-identity-section button[type="submit"],
  .participant-shell--registration .registration-otp-section button[type="submit"],
  .participant-shell--registration .registration-otp-section .otp-resend-confirm {
    justify-self: center;
    width: auto;
    min-height: var(--button-min-height-compact);
    padding: var(--button-padding-block) var(--button-padding-inline);
    border: var(--divider-width) solid var(--login-submit-compact-border);
    background: transparent;
    color: var(--login-submit-compact-color);
    font-size: var(--type-login-small);
    font-weight: 300;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .participant-shell--registration
    .registration-section:not(.registration-identity-section):not(.registration-otp-section):not(
      .rules-consent-section
    ):not(.registration-goal-section)
    button[type="submit"],
  .participant-shell--registration
    .registration-section:not(.registration-identity-section):not(.registration-otp-section):not(
      .rules-consent-section
    ):not(.registration-goal-section)
    .otp-resend-confirm {
    justify-self: center;
    width: auto;
    min-height: var(--registration-action-min-height);
    padding: var(--registration-action-padding-block) var(--registration-action-padding-inline);
    border: var(--divider-width) solid var(--form-action-border);
    background: transparent;
    color: var(--form-action-color);
    font-size: var(--type-small);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .participant-shell--registration
    .registration-section:not(.registration-identity-section):not(.registration-otp-section):not(
      .rules-consent-section
    ):not(.registration-goal-section)
    button[type="submit"]:hover:not(:disabled),
  .participant-shell--registration
    .registration-section:not(.registration-identity-section):not(.registration-otp-section):not(
      .rules-consent-section
    )
    .otp-resend-confirm:hover:not(:disabled) {
    border-color: var(--form-action-border-hover);
    background: var(--form-action-bg-hover);
    color: var(--accent-ink);
  }

  .participant-shell.participant-shell--auth-layout.participant-shell--registration
    .registration-section {
    justify-self: center;
    width: var(--join-auth-control-inline);
    max-width: var(--container-renewal-error-inline);
    min-width: 0;
  }

  .participant-shell.participant-shell--auth-layout.participant-shell--registration:not(
      .participant-shell--join-gift,
      .participant-shell--gift-activation
    )
    .registration-identity-section {
    width: 100%;
    max-width: 100%;
  }

  .otp-resend-hint {
    justify-self: center;
    margin: 0;
    min-height: auto;
    width: auto;
    text-align: center;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    font-size: var(--type-login-small);
    font-weight: 500;
    line-height: var(--lh-snug);
    letter-spacing: var(--tracking-none);
  }

  .otp-resend-countdown {
    color: var(--form-placeholder-muted-color);
  }

  .otp-resend-link {
    color: var(--form-quiet-link-color);
  }

  .otp-resend-link:hover:not(:disabled) {
    background: transparent;
    color: var(--form-quiet-link-hover-color);
    opacity: 1;
  }

  .group-readiness-section {
    --group-readiness-gap: var(--layout-readiness-gap);
    --group-readiness-actions-offset: var(--layout-readiness-actions-offset);
    --group-readiness-action-inline: var(--readiness-action-inline);
    --group-readiness-action-padding-block: var(--readiness-action-padding-block);
    gap: var(--group-readiness-gap);
    max-width: var(--container-form-narrow-local);
  }

  .group-readiness-section p {
    color: var(--text);
    font-size: var(--type-body);
    line-height: var(--lh-relaxed);
    text-wrap: balance;
  }

  .group-readiness-actions {
    display: flex;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--group-readiness-actions-offset);
  }

  .group-readiness-actions button {
    min-width: var(--group-readiness-action-inline);
    min-height: var(--control-sm);
    padding: var(--group-readiness-action-padding-block) var(--space-4);
    border-radius: var(--radius-pill);
    background: transparent;
    border: var(--divider-width) solid var(--hairline);
    color: var(--text-soft);
    font-size: var(--button-font-size);
  }

  .group-readiness-actions button:hover,
  .group-readiness-actions button[data-tone="secondary"]:hover {
    color: var(--text);
    opacity: 1;
  }

  .status-card p,
  .message-card p,
  .note-card p {
    color: var(--text-soft);
    font-size: var(--form-card-copy-size);
    line-height: var(--leading-relaxed);
  }

  .status-card.system-notice p {
    font-size: var(--form-card-meta-size);
    line-height: var(--leading-base);
  }

  .status-error {
    width: 100%;
    max-width: var(--system-notice-width);
    margin: 0 auto;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--feedback-error-color);
    font-size: var(--status-error-text-size);
    font-weight: 400;
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-none);
    text-align: center;
    overflow-wrap: anywhere;
    text-wrap: balance;
  }

  .status-error-dev-code {
    margin-top: var(--space-1);
    color: var(--feedback-error-color);
    font-size: var(--status-error-text-size);
  }

  .system-notice[data-tone="error"],
  .status-card.system-notice[data-tone="error"],
  .status-card[data-tone="error"] {
    padding: 0;
    border: 0;
    background: transparent;
    gap: var(--space-1);
  }

  .login-code-feedback.status-error {
    color: var(--feedback-error-color);
    font-size: var(--status-error-text-size);
    font-weight: 400;
  }

  .activation-card p {
    font-size: var(--form-card-copy-size);
    color: var(--text-soft);
    line-height: var(--leading-relaxed);
  }
  .activation-card strong,
  .message-card strong {
    color: var(--text);
    font-weight: 500;
  }

  .dev-code {
    color: var(--accent);
    font-size: var(--form-card-meta-size);
  }

  .form-hint {
    color: var(--text-muted);
    font-size: var(--form-hint-size);
    line-height: var(--leading-snug);
    text-align: start;
  }

  .form-hint code {
    color: var(--text);
    font-family: inherit;
  }

  /* В одной form-panel секции идут единым потоком — тонкая линия делит шаги */
  .form-panel .form-section + .form-section {
    margin-top: var(--space-2);
    padding-top: var(--space-5);
    border-top: var(--divider-width) solid var(--hairline);
  }

  /* ==========================================================================
   Forms — hairline поля, без обводок и плашек
   ========================================================================== */

  form {
    display: grid;
    gap: var(--space-4);
    width: 100%;
  }

  label,
  fieldset {
    display: grid;
    gap: var(--space-1);
  }

  fieldset {
    margin: 0;
    padding: 0;
    border: 0;
  }

  legend {
    color: var(--text-muted);
    font-size: var(--form-legend-size);
    letter-spacing: var(--tracking-label-wide);
    text-transform: uppercase;
    font-weight: 500;
    padding: 0;
    margin-bottom: var(--space-1);
  }

  label > span:first-child {
    color: var(--text-muted);
    font-size: var(--form-label-size);
    letter-spacing: var(--tracking-body);
    padding: 0;
  }

  input:not([type="checkbox"]):not([type="radio"]),
  textarea {
    width: 100%;
    padding: var(--field-padding-block) 0;
    min-height: var(--field-min-height);
    background: transparent;
    border: 0;
    border-bottom: var(--divider-width) solid var(--hairline);
    border-radius: 0;
    color: var(--text);
    font-size: var(--form-field-size);
    transition: border-color var(--dur) var(--ease);
  }

  input:not([type="checkbox"]):not([type="radio"]):-webkit-autofill,
  input:not([type="checkbox"]):not([type="radio"]):-webkit-autofill:hover,
  input:not([type="checkbox"]):not([type="radio"]):-webkit-autofill:focus,
  input:not([type="checkbox"]):not([type="radio"]):-webkit-autofill:active,
  textarea:-webkit-autofill,
  textarea:-webkit-autofill:hover,
  textarea:-webkit-autofill:focus,
  textarea:-webkit-autofill:active,
  input:not([type="checkbox"]):not([type="radio"]):autofill,
  textarea:autofill {
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-box-shadow: var(--shadow-browser-autofill-clear) !important;
    box-shadow: var(--shadow-browser-autofill-clear) !important;
    background-color: transparent !important;
    background-image: none !important;
    color: var(--text) !important;
    -webkit-text-fill-color: var(--text) !important;
    caret-color: var(--text);
    filter: none;
    transition: var(--form-autofill-transition);
  }

  input:not([type="checkbox"]):not([type="radio"]):focus,
  textarea:focus {
    outline: none;
    border-bottom-color: var(--hairline-strong);
  }

  input:not([type="checkbox"]):not([type="radio"]):focus-visible,
  textarea:focus-visible {
    outline: none;
    border-bottom-color: var(--text);
  }

  textarea {
    min-height: var(
      --field-textarea-min-height,
      clamp(6rem, calc(var(--fluid-block) * var(--scale-profile-tag-inline)), 6.5rem)
    );
    resize: vertical;
    line-height: var(--lh-base);
  }

  input::placeholder,
  textarea::placeholder {
    color: var(--text-faint);
  }

  /* option grid — невидимый radio, текст с акцентом на выбранном */
  .option-grid,
  .profile-grid {
    display: grid;
    gap: var(--space-3);
    width: 100%;
    justify-items: center;
    text-align: center;
  }

  .option-card {
    position: relative;
    display: grid;
    gap: var(--space-1);
    padding: var(--space-2) 0;
    background: transparent;
    border: 0;
    cursor: pointer;
  }

  .option-card input {
    position: absolute;
    width: var(--visually-hidden-size);
    height: var(--visually-hidden-size);
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .option-title {
    font-weight: 700;
    font-size: var(--fs-lg);
    letter-spacing: var(--tracking-ui-tight);
    line-height: var(--lh-tight);
    color: var(--text-faint);
    transition: color var(--dur) var(--ease);
  }

  .option-meta {
    font-size: var(--fs-sm);
    font-weight: 400;
    color: var(--text-faint);
    transition: color var(--dur) var(--ease);
  }

  .option-card:hover .option-title {
    color: var(--text-muted);
  }
  .option-card:hover .option-meta {
    color: var(--text-muted);
  }

  .option-card:has(input:focus-visible) .option-title {
    color: var(--text);
  }
  .option-card:has(input:focus-visible) .option-meta {
    color: var(--text-soft);
  }

  .option-card:has(input:checked) .option-title {
    color: var(--text);
  }
  .option-card:has(input:checked) .option-meta {
    color: var(--text-soft);
  }

  .form-section.offer-section {
    max-width: min(var(--container-query-dialog), 100%);
    gap: 0;
    container-type: size;
    container-name: adaptive-surface;
  }

  .renewal-payment-error-slot {
    display: grid;
    align-items: end;
    justify-items: center;
    min-height: var(--status-error-slot-min-height);
    margin-bottom: var(--status-error-slot-offset);
  }

  .renewal-payment-error-slot[data-visible="false"] {
    display: none;
  }

  .offer-form {
    gap: 0;
    --offer-actions-margin-top: 0;
    --offer-control-panel-border-color: rgba(255, 255, 255, 0.34);
    --offer-control-panel-divider-color: rgba(255, 255, 255, 0.26);
    --offer-control-panel-selected-bg: rgb(255, 247, 231);
    --offer-control-panel-selected-text: rgba(0, 0, 0, 0.86);
    --offer-control-panel-action-text: rgba(255, 255, 255, 0.72);
    --offer-control-panel-action-text-hover: var(--text);
    --offer-control-panel-muted-text: rgba(255, 255, 255, 0.68);
  }

  .offer-control-panel {
    --button-transition: none;
    --offer-control-font-weight: 700;
    --offer-control-font-weight-strong: 840;
    --offer-control-font-weight-accent: 900;
    display: grid;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    border: var(--divider-width) solid var(--offer-control-panel-border-color);
    border-radius: var(--offer-control-radius, var(--radius-offer-control));
    background: transparent;
    isolation: isolate;
  }

  .offer-control-panel__selector {
    display: grid;
    gap: 0;
    width: 100%;
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .offer-control-panel__selector > legend {
    display: none;
  }

  .offer-control-panel__options {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    width: 100%;
    min-width: 0;
    overflow: hidden;
    background: transparent;
  }

  .offer-control-panel__option {
    width: 100%;
    min-width: 0;
    min-height: var(--button-min-height);
    padding: var(--button-padding-block) var(--button-padding-inline);
    border-radius: 0;
    border: 0;
    font-size: var(--button-font-size);
    font-weight: var(--offer-control-font-weight);
    color: var(--offer-control-panel-muted-text);
    transition: none;
  }

  .offer-control-panel :is(.offer-control-panel__option, .offer-details-button, .offer-pay-button) {
    justify-self: stretch;
    width: 100%;
    min-width: 0;
    max-width: none;
    flex-shrink: 1;
  }

  .offer-control-panel__option + .offer-control-panel__option {
    border-left: 0;
  }

  .offer-control-panel__option + .offer-control-panel__option::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    width: var(--divider-width);
    background: var(--offer-control-panel-divider-color);
    transform: translateX(var(--divider-offset));
    pointer-events: none;
  }

  .offer-control-panel__option[data-active="true"] {
    background: var(--offer-control-panel-selected-bg);
    color: var(--offer-control-panel-selected-text);
    font-weight: var(--offer-control-font-weight-strong);
  }

  .offer-control-panel .offer-switch-tab:hover:not([data-active="true"]),
  .offer-control-panel .offer-switch-tab:active:not(:disabled) {
    background: transparent;
    transform: none;
  }

  .offer-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    position: relative;
    width: 100%;
    margin-top: var(--offer-actions-margin-top, var(--button-group-gap));
    overflow: hidden;
    border: 0;
    border-top: var(--divider-width) solid var(--offer-control-panel-divider-color);
    border-radius: 0;
    background: transparent;
  }

  .offer-actions::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    z-index: 3;
    width: var(--divider-width);
    background: var(--offer-control-panel-divider-color);
    transform: translateX(var(--divider-offset));
    pointer-events: none;
  }

  .offer-details-button,
  .offer-pay-button {
    width: 100%;
    min-width: 0;
    min-height: var(--button-min-height);
    padding: var(--button-padding-block) var(--button-padding-inline);
    color: var(--offer-control-panel-action-text);
    font-size: var(--button-font-size);
    font-weight: var(--offer-control-font-weight-strong);
    transition: none;
  }

  .offer-details-button {
    border-right: 0;
    cursor: default;
  }

  .offer-pay-button {
    width: 100%;
    border-radius: 0;
    background: transparent;
    color: var(--offer-control-panel-action-text);
  }

  .offer-pay-button:hover:not(:disabled) {
    opacity: 1;
    background: rgba(255, 255, 255, 0.08);
    color: var(--offer-control-panel-action-text-hover);
  }

  .offer-pay-button:active:not(:disabled) {
    transform: none;
    background: rgba(255, 255, 255, 0.18);
  }

  .offer-access-summary {
    max-width: var(--layout-accordion-max-inline);
    margin: var(--offer-summary-offset, var(--layout-offer-summary-offset)) auto 0;
    color: rgba(255, 255, 255, 0.88);
    font-size: var(--offer-access-summary-size);
    line-height: var(--leading-base);
    letter-spacing: var(--tracking-none);
    text-align: center;
  }

  .offer-access-summary span {
    display: block;
    white-space: nowrap;
  }

  .accordion-column {
    width: min(var(--accordion-inline), 100%);
    max-width: var(--accordion-inline);
    min-width: 0;
    margin-inline: auto;
    justify-self: center;
    box-sizing: border-box;
  }

  :is(.accordion-column, .rules-copy, .group-offer-center) .lesson-accordion {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
  }

  .lesson-accordion {
    --accordion-scale: var(--scale-spacious);
    --accordion-row-padding-factor: var(--scale-meta-tight);

    width: min(var(--accordion-inline), 100%);
    max-width: var(--accordion-inline);
    min-width: 0;
    display: grid;
    gap: 0;
    margin: 0 auto;
    border-top: 0;
    border-bottom: 0;
    box-sizing: border-box;
  }

  .lesson-accordion-item {
    min-width: 0;
    border-top: var(--divider-width) solid var(--accordion-border-color);
  }

  .lesson-accordion-item:first-child {
    border-top: 0;
  }

  .lesson-accordion-trigger {
    appearance: none;
    width: 100%;
    min-width: 0;
    min-height: calc(var(--control-sm) * var(--accordion-scale, 1));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--space-3) * var(--accordion-scale, 1));
    cursor: pointer;
    padding: calc(
        var(--accordion-row-padding-block) * var(--accordion-scale, 1) *
          var(--accordion-row-padding-factor, 1)
      )
      calc(var(--accordion-row-padding-inline) * var(--accordion-scale, 1));
    box-sizing: border-box;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: calc(var(--accordion-title-size) * var(--accordion-scale, 1));
    font-weight: var(--accordion-title-weight);
    line-height: var(--accordion-title-line-height);
    letter-spacing: var(--tracking-none);
    text-align: left;
    text-wrap: pretty;
    overflow-wrap: anywhere;
    transition: none;
  }

  .lesson-accordion-trigger-title {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .lesson-accordion-trigger::after {
    content: "+";
    flex: 0 0 var(--accordion-indicator-inline-size);
    display: inline-block;
    width: var(--accordion-indicator-inline-size);
    margin-left: calc(var(--space-3) * var(--accordion-scale, 1));
    color: var(--accordion-indicator-color);
    font-size: calc(var(--accordion-indicator-size) * var(--accordion-scale, 1));
    line-height: var(--leading-solid);
    text-align: center;
    transition: none;
  }

  .lesson-accordion-item[data-open="true"] .lesson-accordion-trigger::after {
    content: "−";
    color: var(--accordion-indicator-color);
    transform: none;
  }

  .lesson-accordion-item[data-open="true"] {
    border-color: var(--accordion-border-color-open);
  }

  .lesson-accordion-trigger:hover:not(:disabled) {
    background: transparent;
    opacity: 1;
  }

  .lesson-accordion-trigger:hover:not(:disabled)::after {
    color: var(--accordion-indicator-color);
  }

  .lesson-accordion-trigger:active:not(:disabled) {
    background: transparent;
    opacity: 1;
    transform: none;
  }

  .lesson-accordion-trigger:focus-visible {
    outline: var(--divider-width) solid var(--hairline-strong);
    outline-offset: var(--space-1);
  }

  .lesson-accordion-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--motion-grid-panel-duration) var(--motion-grid-panel-ease);
  }

  .lesson-accordion-item[data-open="true"] .lesson-accordion-panel {
    grid-template-rows: 1fr;
  }

  .lesson-accordion-panel-inner {
    min-height: 0;
    overflow: hidden;
  }

  .lesson-accordion-body {
    display: grid;
    gap: var(--accordion-paragraph-gap);
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    padding: 0 calc(var(--accordion-row-padding-inline) * var(--accordion-scale, 1))
      calc(var(--accordion-body-padding-block-end) * var(--accordion-scale, 1));
    box-sizing: border-box;
    color: var(--text-strong);
    justify-items: start;
    text-align: left;
  }

  .lesson-accordion-body p {
    margin: 0;
    max-width: 100%;
    color: var(--text-strong);
    font-size: var(--accordion-body-size, var(--type-small));
    font-weight: 400;
    line-height: var(--accordion-body-line-height, var(--leading-comfort));
    letter-spacing: var(--tracking-none);
    text-align: left;
    text-wrap: pretty;
    overflow-wrap: break-word;
  }

  .lesson-accordion-body li {
    font-size: var(--accordion-body-size, var(--type-small));
  }

  .lesson-accordion-body ul {
    margin: 0;
    padding-left: calc(var(--list-indent) * var(--accordion-scale, 1));
    text-align: left;
  }

  .lesson-accordion-body li + li {
    margin-top: calc(var(--layout-list-gap) * var(--accordion-scale, 1));
  }

  .lesson-accordion-video {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius-sm);
    aspect-ratio: 16 / 9;
  }

  .lesson-accordion-video iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
  }

  /* ==========================================================================
   Panel notice — вместо тяжёлого status-card внутри профиля и форм
   ========================================================================== */

  .panel-notice {
    margin: 0 auto;
    color: var(--text-soft);
    font-size: var(--panel-notice-size);
    line-height: var(--leading-base);
  }

  .panel-notice strong {
    color: var(--text);
    font-size: var(--panel-notice-emphasis-size);
    font-weight: 500;
    letter-spacing: var(--tracking-none);
  }

  /* ==========================================================================
   Goal form — чекбоксы как чистые поводки без плашек
   ========================================================================== */

  .goal-form {
    gap: var(--space-5);
  }

  .goal-presets {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    border: 0;
    padding: 0;
    margin: 0;
  }

  .goal-presets > legend {
    position: absolute;
    width: var(--visually-hidden-size);
    height: var(--visually-hidden-size);
    padding: 0;
    margin: var(--visually-hidden-offset);
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .goal-option {
    --goal-option-padding-block: var(--layout-chip-padding-block);
    --goal-option-padding-inline: var(--layout-chip-padding-inline);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--control-sm);
    padding: var(--goal-option-padding-block) var(--goal-option-padding-inline);
    border: var(--divider-width) solid var(--hairline-strong);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition:
      background-color var(--dur) var(--ease),
      border-color var(--dur) var(--ease),
      color var(--dur) var(--ease);
  }

  .goal-option input[type="checkbox"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    border: 0;
  }

  .goal-option-label {
    pointer-events: none;
    color: var(--text-soft);
    font-size: var(--goal-option-label-size);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-none);
    transition: color var(--dur) var(--ease);
  }

  .goal-option:hover {
    border-color: var(--text-soft);
  }

  .goal-option:active {
    transform: none;
  }

  .goal-option:has(input:focus-visible) {
    outline: var(--focus-ring-width) solid var(--accent);
    outline-offset: var(--focus-ring-offset);
  }

  .goal-option:has(input:checked) {
    background: var(--accent);
    border-color: var(--accent);
  }

  .goal-option:hover .goal-option-label {
    color: var(--text);
  }
  .goal-option:has(input:checked) .goal-option-label {
    color: var(--accent-ink);
    font-weight: 500;
  }

  .goal-custom {
    display: grid;
    gap: var(--space-2);
  }

  .goal-custom > span {
    color: var(--text-muted);
    font-size: var(--goal-custom-label-size);
    font-weight: 500;
    letter-spacing: var(--tracking-label-wide);
    line-height: var(--leading-snug);
    text-transform: uppercase;
    padding: 0;
  }

  .goal-form button[type="submit"] {
    justify-self: stretch;
  }

  .participant-shell--goal-composition .goal-form {
    --goal-gap: var(--layout-goal-gap);
    --goal-row-gap: var(--goal-gap);
    --goal-chip-min-height: var(--goal-chip-min-height-base);
    --goal-chip-padding-block: var(--goal-chip-padding-block-base);
    --goal-chip-padding-inline: var(--goal-chip-padding-inline-base);
    --goal-chip-font-size: var(--goal-chip-font-size-base);
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    gap: 0;
    pointer-events: none;
  }

  .participant-shell--goal-composition .goal-presets {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }

  .participant-shell--goal-composition .goal-cloud {
    position: absolute;
    inset: clamp(0.65rem, calc(var(--fluid-block) * var(--scale-layout-stack-tight)), 1.45rem)
      clamp(0.55rem, calc(var(--fluid-inline) * var(--scale-offer-faq-current)), 2.2rem);
    container: goal-cloud / inline-size;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    justify-content: center;
    gap: var(--goal-row-gap) var(--goal-gap);
    contain: layout paint;
    overflow: visible;
    pointer-events: none;
  }

  .participant-shell--goal-composition .goal-cloud-item {
    position: relative;
    display: inline-flex;
    flex: 0 1 auto;
    max-inline-size: 100%;
    pointer-events: none;
  }

  .participant-shell--goal-composition .goal-cloud-item[data-kind="center"] {
    flex: 0 1 auto;
  }

  .participant-shell--goal-composition .goal-option {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: var(--goal-chip-min-height);
    max-width: min(100%, 18rem);
    padding: var(--goal-chip-padding-block) var(--goal-chip-padding-inline);
    border-color: rgba(255, 255, 255, 0.46);
    background: transparent;
    color: rgba(255, 255, 255, 0.88);
    white-space: normal;
    overflow-wrap: anywhere;
    text-wrap: balance;
    transition:
      border-color 180ms var(--ease),
      color 180ms var(--ease);
    pointer-events: auto;
  }

  .participant-shell--goal-composition .goal-option-label {
    color: rgba(255, 255, 255, 0.86);
    font-size: var(--goal-chip-font-size);
    font-weight: 450;
    text-align: center;
    white-space: normal;
    text-wrap: balance;
  }

  @container goal-cloud (max-width: 28rem) {
    .participant-shell--goal-composition .goal-option {
      max-width: min(100%, 14rem);
    }
  }

  .participant-shell--goal-composition .goal-option:hover {
    border-color: rgba(255, 255, 255, 0.78);
  }

  .participant-shell--goal-composition .goal-option:has(input:checked) {
    border-color: var(--goal-accent);
    background: transparent;
  }

  .participant-shell--goal-composition .goal-option:has(input:checked) .goal-option-label {
    color: rgba(255, 255, 255, 0.96);
    font-weight: 450;
  }

  .participant-shell--goal-composition .goal-option:active {
    transform: none;
  }

  .participant-shell--goal-composition .goal-option:focus-visible {
    outline: var(--focus-ring-width) solid var(--goal-accent);
    outline-offset: var(--focus-ring-offset);
  }

  .participant-shell--details-picker .details-topic-capsule {
    min-width: min(
      100%,
      clamp(10.5rem, calc(var(--fluid-min) * var(--scale-type-fluid-hero-wide-tight)), 16rem)
    );
    text-decoration: none;
  }

  .participant-shell--goal-composition .goal-option.goal-center-capsule {
    position: relative;
    z-index: 3;
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    max-width: min(100%, 18rem);
    border: var(--divider-width) solid var(--goal-accent);
    border-color: var(--goal-accent);
    background: var(--goal-accent);
    color: var(--text-strong);
    transform: none;
    transform-origin: center;
    box-shadow: none;
    cursor: default;
    opacity: 1;
    transition:
      background-color 180ms var(--ease),
      border-color 180ms var(--ease),
      opacity 180ms var(--ease);
    pointer-events: auto;
  }

  .participant-shell--goal-composition .goal-option.goal-center-capsule .goal-option-label {
    color: var(--text-strong);
    font-size: var(--goal-chip-font-size);
    font-weight: 450;
  }

  .participant-shell--goal-composition
    .goal-form[data-ready="true"]
    .goal-option.goal-center-capsule {
    transform: none;
    cursor: pointer;
  }

  .participant-shell--goal-composition
    .goal-option.goal-center-capsule:hover:not([data-disabled="true"]):not(:disabled) {
    border-color: var(--goal-accent);
    background: var(--goal-accent);
    color: var(--text-strong);
    opacity: 1;
  }

  .participant-shell--goal-composition
    .goal-option.goal-center-capsule:hover:not([data-disabled="true"]):not(:disabled)
    .goal-option-label {
    color: var(--text-strong);
  }

  .participant-shell--goal-composition .goal-option.goal-center-capsule:active:not(:disabled) {
    transform: none;
    border-color: var(--goal-accent);
    background: var(--goal-accent);
    color: var(--text-strong);
    opacity: 1;
  }

  .participant-shell--goal-composition.participant-shell--registration
    .form-panel--goal-composition
    .panel-scroll {
    width: 100%;
    justify-self: stretch;
    align-self: stretch;
  }

  .participant-shell--goal-composition.participant-shell--registration .registration-goal-section {
    width: 100%;
    max-width: none;
  }
}

@layer lifeos.routes {
  .reviews-add-button {
    position: fixed;
    right: max(var(--safe-area-right), var(--space-3));
    bottom: max(var(--safe-area-bottom), var(--space-3));
    z-index: calc(var(--z-modal) + 4);
    box-sizing: border-box;
    display: grid;
    place-items: center;
    width: max(var(--touch-target-min-size), 3rem);
    min-width: max(var(--touch-target-min-size), 3rem);
    height: max(var(--touch-target-min-size), 3rem);
    min-height: max(var(--touch-target-min-size), 3rem);
    padding: 0;
    color: var(--text);
    font-size: 0;
    font-weight: 420;
    line-height: 1;
    border: var(--divider-width) solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    background: #000;
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.24);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    cursor: pointer;
  }

  .reviews-add-button::before,
  .reviews-add-button::after {
    position: absolute;
    inset: 0;
    display: block;
    width: 1.05rem;
    height: 0.125rem;
    margin: auto;
    border-radius: 999px;
    background: currentColor;
    content: "";
  }

  .reviews-add-button::after {
    transform: rotate(90deg);
  }

  .reviews-add-button:hover,
  .reviews-add-button:focus-visible {
    color: var(--text);
    border-color: rgba(255, 255, 255, 0.34);
  }

  .reviews-composer textarea {
    box-sizing: border-box;
    padding: var(--space-2) var(--space-3);
    border: var(--divider-width) solid rgba(255, 255, 255, 0.18);
    background: #000;
  }

  .reviews-composer-actions {
    gap: var(--space-1);
  }

  .reviews-composer-actions button {
    min-height: var(--control-sm);
    padding: 0 var(--space-2);
    color: var(--text);
    font-size: var(--fs-xxs);
    font-weight: 700;
    border: var(--divider-width) solid rgba(255, 255, 255, 0.44);
    border-radius: var(--radius-sm);
    background: transparent;
  }

  .reviews-composer-actions button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }

  @media (max-width: 63.999rem) {
    .reviews-add-button {
      right: max(var(--safe-area-right), var(--space-3));
      bottom: max(var(--safe-area-bottom), var(--space-3));
    }

    .reviews-composer {
      left: max(var(--safe-area-left), var(--space-3));
      right: max(var(--safe-area-right), var(--space-3));
      bottom: calc(max(var(--safe-area-bottom), var(--space-3)) + 4rem);
      max-height: calc(
        100dvh - max(var(--safe-area-top), var(--space-3)) -
          max(var(--safe-area-bottom), var(--space-3)) - 5rem
      );
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
  }
}

@layer lifeos.overrides {
  /* Manual play: lifeos.components `button { display: inline-flex }` wins over lifeos.layout otherwise. */
  .stage-media-shell:not([data-video-play-blocked="true"]) + .stage-video-play-button {
    display: none !important;
    pointer-events: none !important;
  }

  .stage-media-shell[data-video-play-blocked="true"] + .stage-video-play-button {
    display: inline-flex !important;
  }

  .stage-video-play-button {
    width: auto;
    min-width: var(--stage-play-size);
    min-height: var(--stage-play-size);
    padding: 0 var(--space-4);
    border: var(--divider-width) solid rgba(255, 255, 255, 0.34);
    border-radius: var(--radius-pill);
    background: rgba(0, 0, 0, 0.62);
    color: var(--text);
    box-shadow: none;
  }

  :is(.home-stage, .window-browse-stage)
    .stage-media-shell[data-video-play-blocked="true"]
    + .stage-video-play-button {
    width: calc(100% - var(--stage-inline-gutter) * var(--scale-double));
    min-width: 0;
    min-height: var(--control-md);
    padding: 0;
    border: 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  /* ==========================================================================
   Responsive
   ========================================================================== */

  /* широкий экран — split 50/50, обе колонки во всю высоту */
  @media (min-width: 64rem) {
    .participant-shell--watch:not([data-watch-layout="panel-focus"]) {
      position: relative;
      display: block;
      width: 100%;
      max-width: 100%;
      min-height: 100svh;
      overflow: hidden;
    }

    .participant-shell--watch:not([data-watch-layout="panel-focus"]) .lesson-stage,
    .participant-shell--watch:not([data-watch-layout="panel-focus"]) .watch-panel {
      position: absolute;
      top: 0;
      width: 50%;
      min-width: 50%;
      max-width: 50%;
      height: 100svh;
      min-height: 100svh;
    }

    .participant-shell--watch:not([data-watch-layout="panel-focus"]) .lesson-stage {
      left: 0;
    }

    .participant-shell--watch:not([data-watch-layout="panel-focus"]) .watch-panel {
      left: 50%;
    }

    .participant-shell--watch:not([data-watch-layout="panel-focus"]) .video-frame iframe {
      width: 100%;
      height: 100%;
      max-width: none;
    }

    .participant-shell,
    .stack-shell {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .participant-shell.participant-shell--note-focus {
      grid-template-columns: 1fr;
    }

    .panel,
    .form-panel,
    .watch-panel,
    .simple-stage,
    .payment-card {
      min-height: 100svh;
    }

    .split-stage,
    .lesson-stage {
      min-height: 100svh;
    }

    .participant-shell--window > .panel {
      --adaptive-base-gap: clamp(0.42rem, var(--adaptive-fluid), 0.92rem);
    }

    .participant-shell--window > .panel .panel-summary {
      font-size: var(--adaptive-copy-size);
    }

    .participant-shell--window .stage-phrase {
      font-size: var(--type-stage-phrase-emphasis);
    }

    .participant-shell--registration .registration-section {
      margin-inline: auto;
    }

    .page-join .legal-notice {
      left: 75%;
      transform: translateX(-50%);
    }

    .page-join:has(.participant-shell--auth-layout.participant-shell--registration) .legal-notice {
      left: 50%;
    }

    .profile-grid {
      grid-template-columns: repeat(auto-fit, minmax(var(--container-grid-card-min), 1fr));
    }
  }

  /* узкий экран — вертикальный stack, видео сверху через общий block token */
  @media (max-width: var(--viewport-query-split-wide-max)) {
    :root {
      --anchor-offset: clamp(
        1.25rem,
        calc(var(--fluid-block) * var(--scale-sheet-inline)),
        3.25rem
      );
      --stage-gutter: clamp(1rem, calc(var(--fluid-inline) * var(--scale-panel-fluid)), 1.75rem);
    }

    .participant-shell,
    .stack-shell {
      grid-template-columns: 1fr;
    }

    .panel,
    .form-panel,
    .watch-panel {
      min-height: auto;
    }

    .split-stage,
    .lesson-stage {
      min-height: var(--layout-block-split-stage-compact);
    }

    .participant-shell--note-focus {
      grid-template-columns: 1fr;
    }

    .participant-shell--watch:not([data-watch-layout="panel-focus"]) {
      display: grid;
      grid-template-columns: 1fr;
      width: auto;
      max-width: none;
      min-height: 100svh;
      overflow: visible;
    }

    .participant-shell--watch:not([data-watch-layout="panel-focus"]) .lesson-stage,
    .participant-shell--watch:not([data-watch-layout="panel-focus"]) .watch-panel {
      position: relative;
      left: auto;
      top: auto;
      width: auto;
      min-width: 0;
      max-width: none;
      height: auto;
    }

    .participant-shell--watch:not([data-watch-layout="panel-focus"]) .watch-panel {
      min-height: var(--layout-block-watch-panel-compact);
    }

    .stage-static-title[data-stage-title-size="compact"] {
      font-size: var(--type-title-small);
    }

    .profile-grid {
      grid-template-columns: 1fr;
      gap: var(--space-4);
    }
  }

  /* tablet — вертикальная композиция, но сцена крупнее для баланса */
  @media (min-width: var(--viewport-query-tablet-max)) and (max-width: var(--viewport-query-split-wide-max)) {
    .split-stage,
    .lesson-stage {
      min-height: var(--layout-block-stage-tablet);
    }

    .panel,
    .form-panel,
    .watch-panel {
      padding-block: var(--layout-panel-padding-block);
    }

    .profile-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  /* narrow split: media takes the remaining height; content defines the bottom panel */
  @media (max-width: var(--viewport-query-split-wide-max)) {
    :is(
      .participant-shell--window:not(.window-browse-stage),
      .participant-shell--registration:not(.participant-shell--goal-composition),
      .participant-shell--gift-activation:not(.participant-shell--goal-composition),
      .participant-shell--info
    ),
    .participant-shell--watch:not([data-watch-layout="panel-focus"]) {
      grid-template-rows: minmax(0, 1fr) auto;
      height: 100dvh;
      min-height: 100dvh;
      max-height: 100dvh;
      overflow: hidden;
    }

    :is(
        .participant-shell--window,
        .participant-shell--registration:not(.participant-shell--goal-composition),
        .participant-shell--gift-activation:not(.participant-shell--goal-composition),
        .participant-shell--info
      )
      > .split-screen-stage,
    .participant-shell--watch:not([data-watch-layout="panel-focus"]) > .lesson-stage {
      min-height: 0;
      height: 100%;
      max-height: none;
    }

    :is(
        .participant-shell--window,
        .participant-shell--registration:not(.participant-shell--goal-composition),
        .participant-shell--gift-activation:not(.participant-shell--goal-composition),
        .participant-shell--info
      )
      > .split-screen-panel,
    .participant-shell--watch:not([data-watch-layout="panel-focus"]) > .watch-panel {
      --adaptive-fluid: var(--adaptive-narrow-fluid);
      --adaptive-base-gap: var(--layout-base-gap);
      --adaptive-action-gap: calc(var(--adaptive-base-gap) * var(--scale-route-fluid-row));
      --adaptive-copy-size: var(--type-panel-copy-narrow);
      --adaptive-detail-size: var(--type-panel-detail-narrow);
      --adaptive-button-font-size: var(--type-control-narrow);
      --adaptive-button-padding-block: clamp(
        0.36rem,
        calc(var(--adaptive-base-gap) * var(--scale-button-block)),
        0.52rem
      );
      --adaptive-button-padding-inline: clamp(
        0.72rem,
        calc(var(--adaptive-base-gap) * var(--scale-sheet-section)),
        1rem
      );
      --adaptive-button-max-block-size: 2.35rem;
      --adaptive-control-max-size: 2.45rem;
      --adaptive-icon-max-size: 0.95rem;
      --split-base-gap: var(--adaptive-base-gap);
      --split-media-gap: calc(var(--split-base-gap) * var(--scale-split-rail));
      --split-content-actions-gap: calc(var(--split-base-gap) * var(--scale-split-rail));
      --split-detail-actions-gap: var(--split-content-actions-gap);
      --split-back-zone: calc(
        var(--adaptive-control-size) + var(--split-base-gap) * var(--scale-split-rail)
      );
      container-type: size;
      container-name: adaptive-surface;
    }

    :is(
        .participant-shell--window:not(.window-browse-stage),
        .participant-shell--registration:not(.participant-shell--goal-composition),
        .participant-shell--gift-activation:not(.participant-shell--goal-composition),
        .participant-shell--info
      )
      > .split-screen-panel:not(:has(> .split-panel__motion)),
    .participant-shell--watch:not([data-watch-layout="panel-focus"]) > .watch-panel {
      height: auto;
      min-height: 0;
      max-height: calc(100dvh - var(--split-back-zone, 0px) * 2);
      grid-template-rows: var(--split-media-gap) auto var(--split-media-gap);
      padding-block: 0;
      overflow: hidden;
    }

    :is(
        .participant-shell--window,
        .participant-shell--registration:not(.participant-shell--goal-composition),
        .participant-shell--gift-activation:not(.participant-shell--goal-composition),
        .participant-shell--info
      )
      > .split-screen-panel
      .split-content-stack,
    :is(
        .participant-shell--window,
        .participant-shell--registration:not(.participant-shell--goal-composition),
        .participant-shell--gift-activation:not(.participant-shell--goal-composition),
        .participant-shell--info
      )
      > .split-screen-panel
      > .panel-footer,
    .participant-shell--watch .watch-panel .panel-scroll,
    .participant-shell--watch .watch-panel .panel-footer {
      --adaptive-fluid: inherit;
      --adaptive-base-gap: inherit;
      --adaptive-action-gap: inherit;
      --adaptive-content-width: inherit;
      --adaptive-copy-size: inherit;
      --adaptive-detail-size: inherit;
      --adaptive-button-font-size: inherit;
      --adaptive-button-padding-block: inherit;
      --adaptive-button-padding-inline: inherit;
      --adaptive-button-min-height: inherit;
      --adaptive-button-radius: inherit;
      --adaptive-control-size: inherit;
      --adaptive-icon-size: inherit;
      --split-base-gap: inherit;
      --split-media-gap: inherit;
      --split-content-actions-gap: inherit;
      --split-detail-actions-gap: inherit;
      --split-back-zone: inherit;
    }

    .participant-shell--window > .panel .panel-main-stack {
      --window-summary-expand: 0rem;
      --window-summary-measure: min(90vw, 42rem);
      grid-template-rows:
        auto calc(var(--split-detail-actions-gap) * var(--window-panel-scale))
        auto;
    }

    .participant-shell--window > .panel .panel-summary-stack {
      gap: calc(var(--split-base-gap) * var(--scale-tight));
    }

    .participant-shell--watch .watch-panel .panel-scroll {
      gap: var(--split-content-actions-gap);
    }

    .participant-shell--watch .panel-copy,
    .participant-shell--watch .lesson-description,
    .participant-shell--watch .lesson-description p {
      width: 100%;
      max-width: var(--watch-copy-measure, min(100%, var(--accordion-copy-measure)));
    }

    .participant-shell--watch .lesson-description {
      gap: var(--split-base-gap);
    }
  }

  /* узкий split / window panel */
  @media (max-width: var(--viewport-query-tablet-max)) {
    .participant-shell--window > .panel .panel-copy {
      width: var(--container-window-panel-copy-inline);
      margin-inline: auto;
    }

    .participant-shell--window > .panel .panel-summary {
      width: 100%;
      text-wrap: balance;
    }

    .participant-shell--goal-composition .goal-form {
      --goal-gap: var(--layout-goal-gap-compact);
      --goal-row-gap: var(--goal-gap);
      --goal-chip-min-height: calc(
        var(--goal-chip-min-height-compact) * var(--goal-chip-mobile-scale)
      );
      --goal-chip-padding-block: calc(
        var(--goal-chip-padding-block-compact) * var(--goal-chip-mobile-scale)
      );
      --goal-chip-padding-inline: calc(
        var(--goal-chip-padding-inline-compact) * var(--goal-chip-mobile-scale)
      );
      --goal-chip-font-size: calc(var(--type-fine) * var(--goal-chip-mobile-scale));
    }

    .participant-shell--goal-composition .goal-cloud {
      inset: var(--layout-goal-cloud-inset-block-compact)
        var(--layout-goal-cloud-inset-inline-compact);
    }

    @media (max-aspect-ratio: 12 / 22) {
      .participant-shell--goal-composition .goal-form {
        --goal-chip-min-height: calc(
          var(--goal-chip-min-height-base) * var(--goal-chip-mobile-scale)
        );
        --goal-chip-padding-block: calc(
          var(--goal-chip-padding-block-base) * var(--goal-chip-mobile-scale)
        );
        --goal-chip-padding-inline: calc(
          var(--goal-chip-padding-inline-base) * var(--goal-chip-mobile-scale)
        );
        --goal-gap: var(--layout-goal-gap-compact);
        --goal-row-gap: clamp(0.12rem, calc(var(--fluid-block) * var(--scale-compact)), 0.22rem);
      }

      .participant-shell--goal-composition .goal-cloud {
        inset-block: var(--layout-focus-inset-block);
        inset-inline: var(--layout-focus-inset-inline);
      }
    }

    .participant-shell--goal-composition .goal-option {
      max-width: min(100%, 14rem);
    }

    .participant-shell--goal-composition .goal-option-label {
      line-height: var(--leading-tight);
    }

    .participant-shell--goal-composition .goal-center-capsule {
      max-width: min(100%, 14rem);
    }

    .participant-shell--goal-composition .form-panel--goal-composition {
      overflow-y: auto;
      overscroll-behavior-y: contain;
      scrollbar-width: none;
      pointer-events: auto;
    }

    .participant-shell--goal-composition .form-panel--goal-composition::-webkit-scrollbar {
      display: none;
    }

    .participant-shell--goal-composition .panel-scroll {
      box-sizing: border-box;
      min-height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding-block: max(var(--space-4), var(--safe-area-top))
        max(var(--space-4), var(--safe-area-bottom));
      padding-inline: var(--panel-safe-gutter-start) var(--panel-safe-gutter-end);
      pointer-events: auto;
      overflow: visible;
    }

    .participant-shell--goal-composition .registration-goal-section {
      width: 100%;
      height: auto;
      pointer-events: auto;
    }

    .participant-shell--goal-composition .goal-form,
    .participant-shell--goal-composition .goal-presets,
    .participant-shell--goal-composition .goal-cloud {
      position: relative;
      inset: auto;
      width: 100%;
      height: auto;
      min-height: 0;
      max-height: none;
      pointer-events: auto;
    }

    .participant-shell--goal-composition .goal-cloud {
      align-content: center;
      justify-content: center;
      contain: none;
      transform: translateY(calc(100svh * -0.02));
    }
  }

  @media (max-width: 46rem) and (max-height: 38rem) {
    .participant-shell--goal-composition .form-panel--goal-composition {
      overflow: hidden;
      pointer-events: auto;
    }

    .participant-shell--goal-composition .panel-scroll {
      box-sizing: border-box;
      height: 100%;
      max-height: 100%;
      padding-block: max(var(--space-4), var(--safe-area-top))
        max(var(--space-4), var(--safe-area-bottom));
      padding-inline: var(--panel-safe-gutter-start) var(--panel-safe-gutter-end);
      overflow-y: auto;
      overscroll-behavior-y: contain;
      scrollbar-width: none;
      pointer-events: auto;
    }

    .participant-shell--goal-composition .panel-scroll::-webkit-scrollbar {
      display: none;
    }

    .participant-shell--goal-composition .registration-goal-section {
      height: auto;
      min-height: 0;
      pointer-events: auto;
    }

    .participant-shell--goal-composition .goal-form,
    .participant-shell--goal-composition .goal-presets,
    .participant-shell--goal-composition .goal-cloud {
      position: relative;
      inset: auto;
      width: 100%;
      height: auto;
      min-height: 0;
      max-height: none;
    }

    .participant-shell--goal-composition .goal-form,
    .participant-shell--goal-composition .goal-presets {
      display: block;
      pointer-events: auto;
    }

    .participant-shell--goal-composition .goal-cloud {
      align-content: flex-start;
      gap: var(--layout-goal-gap-compact);
      contain: none;
      overflow: visible;
    }
  }

  /* совсем узкие экраны — убираем боковой отступ почти полностью */
  @media (max-width: var(--viewport-query-compact)) {
    :root {
      --shell-gutter: var(--layout-shell-gutter-compact);
      --stage-gutter: var(--layout-stage-gutter-compact);
      --back-zone-height: var(--layout-back-zone-compact);
    }

    .participant-shell--window > .panel {
      --adaptive-fluid: var(--adaptive-phone-fluid);
      --adaptive-base-gap: var(--adaptive-phone-base-gap);
      --adaptive-action-gap: calc(var(--adaptive-base-gap) * var(--scale-route-fluid-row));
      --adaptive-copy-size: var(--type-panel-copy-phone);
      --adaptive-detail-size: var(--type-panel-detail-phone);
      --adaptive-button-font-size: var(--type-control-phone);
      --adaptive-button-padding-block: var(--adaptive-phone-button-padding-block);
      --adaptive-button-padding-inline: var(--adaptive-phone-button-padding-inline);
      --adaptive-button-min-block-size: var(--adaptive-compact-button-min-block-size);
      --adaptive-button-max-block-size: var(--adaptive-phone-button-max-block-size);
      --adaptive-control-min-size: var(--interactive-min-size);
      --adaptive-control-max-size: var(--adaptive-phone-control-max-size);
      --adaptive-icon-min-size: var(--adaptive-compact-icon-min-size);
      --adaptive-icon-max-size: var(--adaptive-phone-icon-max-size);
    }

    .home-overlay .stage-title,
    .home-overlay .stage-subtitle {
      white-space: normal;
      overflow-wrap: anywhere;
      text-wrap: balance;
    }

    .participant-shell--window > .panel .panel-copy {
      width: 100%;
    }

    .participant-shell--window > .panel .panel-summary-stack {
      gap: var(--split-base-gap);
    }

    .participant-shell--window > .panel .panel-main-stack .panel-summary-stack {
      gap: calc(var(--split-base-gap) * var(--window-panel-scale));
    }

    .participant-shell--window > .panel .panel-summary {
      font-size: var(--adaptive-copy-size);
      line-height: var(--line-height-adaptive-copy);
    }

    .participant-shell--window > .panel .panel-more-link {
      font-size: var(--adaptive-detail-size);
      line-height: var(--leading-control);
    }

    .participant-shell--window .panel-footer-actions {
      gap: var(--button-group-gap);
    }

    .participant-shell--window .panel-footer-actions .action {
      min-height: var(--button-min-height);
      padding-inline: var(--button-padding-inline);
      font-size: var(--button-font-size);
    }

    .panel-scroll {
      gap: var(--space-4);
    }

    .offer-control-panel__option {
      min-height: var(--button-min-height);
      padding-inline: var(--button-padding-inline);
      font-size: var(--button-font-size);
      font-weight: var(--offer-control-font-weight);
    }

    .offer-details-button,
    .offer-pay-button {
      min-height: var(--button-min-height);
      padding-inline: var(--button-padding-inline);
      font-size: var(--button-font-size);
      font-weight: var(--offer-control-font-weight-strong);
    }

    .status-card,
    .activation-card {
      padding: var(--system-notice-padding-block) var(--system-notice-padding-inline);
    }
  }

  @media (max-width: 63.999rem) {
    .window-browse-stage.participant-shell--window > .panel.split-screen-panel {
      --window-browse-panel-rail: calc(var(--split-media-gap) * var(--scale-dialog-inline));
      --window-browse-panel-bottom-rail: max(
        calc(var(--window-browse-panel-rail) * 1.55),
        calc(var(--safe-area-bottom) + var(--window-browse-panel-rail)),
        calc(0px + var(--window-browse-panel-rail))
      );
      padding-block-start: var(--window-browse-panel-rail);
      padding-block-end: var(--window-browse-panel-bottom-rail);
    }

    .window-browse-stage.participant-shell--window > .panel .panel-main-stack {
      width: calc(
        100vw - var(--shell-gutter) * var(--scale-double) * var(--scale-dialog-inline) *
          var(--scale-double)
      );
      grid-template-rows:
        auto
        calc(
          var(--split-detail-actions-gap) * var(--window-panel-scale) * var(--scale-dialog-inline)
        )
        auto;
    }
  }

  @media (max-width: var(--viewport-query-medium)),
    (max-width: var(--viewport-query-split-wide-max)) and (max-height: var(--viewport-query-offer-short)) {
    .plus-sheet--details .plus-sheet-copy {
      gap: calc(var(--layout-plus-sheet-copy-gap-compact) * var(--plus-sheet-content-scale, 1));
    }

    .plus-sheet--details .plus-sheet-copy .panel-summary {
      font-size: calc(var(--type-panel-copy-compact) * var(--plus-sheet-content-scale, 1));
      line-height: var(--leading-comfort);
      font-weight: 500;
    }

    .participant-shell--join-gift.participant-shell--gift-offer {
      --gift-certificate-caption-size: var(--type-gift-certificate-caption-compact);
    }

    .participant-shell--group-offer .group-offer-center {
      --group-offer-panel-scale: 1.21;
      --group-offer-copy-size: var(--group-offer-copy-size-compact);
      --group-offer-heading-size: var(--group-offer-heading-size-compact);
      --group-offer-section-gap: calc(var(--offer-base-gap) * var(--scale-double));

      top: auto;
      width: var(--container-stage-copy-inline);
      max-height: none;
      overflow: visible;
    }

    .group-offer-copy h1 {
      margin-bottom: var(--offer-faq-heading-gap-compact);
      font-size: var(--group-offer-heading-size);
      line-height: var(--leading-control);
    }

    .group-offer-copy .group-offer-inline-title {
      margin-bottom: 0;
      font-size: var(--group-offer-heading-size);
      line-height: var(--leading-caption);
    }

    .group-offer-copy p,
    .group-offer-copy:not([data-offer-copy="faq"]) p:not(.group-offer-practice-label) {
      font-size: var(--group-offer-copy-size);
      line-height: var(--group-offer-copy-leading);
    }

    .group-offer-copy > p + p {
      margin-top: var(--offer-base-gap);
    }

    .group-offer-copy .group-offer-practice-label {
      margin-top: var(--group-offer-section-gap);
    }
  }

  @media (max-width: var(--viewport-query-phone-tight)) {
    :root {
      --shell-gutter: var(--layout-shell-gutter-min);
      --stage-gutter: var(--layout-stage-gutter-min);
      --back-control-size: var(--layout-back-control-min);
      --back-arrow-size: var(--layout-back-arrow-min);
      --back-zone-height: var(--layout-back-zone-min);
    }

    .participant-shell--offer .form-panel .panel-scroll {
      padding-block: var(--offer-panel-scroll-padding-block-compact);
    }

    .participant-shell--solo-offer .form-panel .panel-scroll,
    .participant-shell--group-offer .form-panel .panel-scroll,
    .participant-shell--gift-offer .form-panel .panel-scroll {
      padding-block: 0;
    }

    .offer-control-panel__option {
      padding-inline: var(--button-padding-inline);
    }

    .offer-details-button,
    .offer-pay-button {
      padding-inline: var(--button-padding-inline);
      font-size: var(--button-font-size);
    }

    .offer-access-summary {
      font-size: var(--fs-xxs);
    }
  }

  /* ноутбуки 1280+ — мягко расширяем копию под просторную композицию */
  @media (min-width: var(--viewport-query-laptop)) {
    :root {
      --copy-width: min(36rem, 100%);
      --copy-wide: min(46rem, 100%);
    }
  }

  /* 2K+ мониторы — шире копии и выше потолок типографики */
  @media (min-width: var(--viewport-query-2k)) {
    :root {
      --copy-width: min(40rem, 100%);
      --copy-wide: min(52rem, 100%);

      --fs-sm: var(--type-small);
      --fs-md: var(--type-body);
      --fs-lg: var(--type-body-large);
      --fs-xl: var(--type-title-medium);
      --fs-2xl: var(--type-title-large);
      --fs-3xl: var(--type-display-large);
    }

    .stage-static-title[data-stage-title-size="compact"] {
      font-size: var(--type-title-large);
    }
  }

  /* очень широкие панорамные — стабильный потолок, без гонки за размером */
  @media (min-width: var(--viewport-query-ultrawide)) {
    :root {
      --copy-width: min(44rem, 100%);
      --copy-wide: min(56rem, 100%);
    }
  }

  /* landscape-телефоны с низкой высотой — прижимаем анкоры и уменьшаем шрифт stage */
  @media (max-height: var(--viewport-query-landscape-low)) and (orientation: landscape) {
    :root {
      --anchor-offset: var(--space-4);
      --back-control-size: var(--layout-back-control-landscape);
      --back-arrow-size: var(--layout-back-arrow-landscape);
      --back-zone-height: var(--layout-back-zone-landscape);
    }

    .participant-shell--join-choice .choice-panel {
      gap: calc(var(--layout-choice-panel-gap-landscape) * var(--choice-content-scale, 1));
    }

    .participant-shell--join-choice .choice-heading {
      font-size: calc(var(--type-title-small) * var(--choice-content-scale, 1));
      line-height: var(--leading-display-snug);
    }

    .participant-shell--join-choice .choice-card {
      min-height: calc(var(--choice-card-min-height-landscape) * var(--choice-content-scale, 1));
      padding-block: calc(
        var(--layout-choice-card-padding-block-landscape) * var(--choice-content-scale, 1)
      );
    }

    .participant-shell--join-choice .choice-title {
      font-size: calc(var(--choice-title-landscape-fluid-size) * var(--choice-content-scale, 1));
    }

    .participant-shell--join-choice .choice-subtitle {
      font-size: calc(var(--type-fine) * var(--choice-content-scale, 1));
    }

    .participant-shell--window {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      grid-template-rows: minmax(0, 1fr);
      height: 100dvh;
      min-height: 100dvh;
      max-height: 100dvh;
      overflow: hidden;
    }

    .participant-shell--window > .split-stage,
    .participant-shell--window > .panel {
      width: auto;
      min-width: 0;
      max-width: none;
      height: 100dvh;
      min-height: 100dvh;
      max-height: 100dvh;
    }

    .participant-shell--window > .panel {
      --adaptive-base-gap: var(--adaptive-landscape-base-gap);
      --adaptive-action-gap: calc(var(--adaptive-base-gap) * var(--scale-route-fluid-row));
      --adaptive-copy-size: var(--adaptive-landscape-copy-size);
      --adaptive-detail-size: var(--adaptive-landscape-detail-size);
      --adaptive-button-font-size: var(--adaptive-landscape-control-size);
      --adaptive-button-padding-block: var(--adaptive-landscape-button-padding-block);
      --adaptive-button-padding-inline: var(--adaptive-landscape-button-padding-inline);
      --adaptive-button-min-block-size: var(--adaptive-landscape-button-min-block-size);
      --adaptive-button-max-block-size: var(--adaptive-landscape-button-max-block-size);
      --adaptive-button-font-multiplier: var(--scale-button-font-multiplier-landscape);
      --adaptive-control-min-size: var(--interactive-min-size);
      --adaptive-control-max-size: var(--adaptive-landscape-control-max-size);
      grid-template-rows: minmax(0, 1fr) auto minmax(var(--adaptive-control-size), 1fr);
      overflow-y: auto;
      overscroll-behavior-y: contain;
      scrollbar-width: none;
    }

    .participant-shell--window > .panel::-webkit-scrollbar {
      display: none;
    }

    .participant-shell--window > .panel .panel-copy {
      width: var(--container-form-compact-local);
    }

    .participant-shell--window > .panel .panel-summary-stack {
      gap: calc(var(--adaptive-base-gap) * var(--scale-tight));
    }

    .participant-shell--window > .panel .panel-summary {
      width: var(--measure-summary);
      font-size: var(--adaptive-copy-size);
      line-height: var(--line-height-adaptive-copy);
    }

    .participant-shell--window > .panel .panel-more-link {
      font-size: var(--adaptive-detail-size);
      line-height: var(--leading-control);
    }

    .participant-shell--window > .panel .panel-footer-actions {
      gap: var(--button-group-gap);
    }

    .participant-shell--window .panel-footer-actions .action {
      min-height: var(--button-min-height);
      padding-block: var(--button-padding-block);
      padding-inline: var(--button-padding-inline);
      font-size: var(--button-font-size);
      line-height: var(--leading-control);
    }

    .participant-shell--window .stage-rotator {
      min-height: var(--stage-rotator-min-height-compact);
    }

    .participant-shell--window .stage-phrase {
      font-size: var(--type-title-medium);
      line-height: var(--leading-display);
    }

    .participant-shell--window .stage-bottom-anchor,
    .participant-shell--window .stage-number {
      font-size: var(--stage-edge-caption-size, var(--type-stage-anchor));
    }

    .participant-shell--window .stage-number {
      font-weight: 900;
      -webkit-text-stroke: var(--text-stroke-heading);
      paint-order: stroke fill;
    }

    .participant-shell--plus .plus-sheet {
      --adaptive-base-gap: clamp(0.32rem, var(--adaptive-fluid), 0.55rem);
      --adaptive-copy-size: var(--type-panel-copy-landscape);
      --adaptive-control-min-size: var(--interactive-min-size);
      --adaptive-control-max-size: 2rem;
      grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
      overflow: hidden;
    }

    .participant-shell--plus .plus-sheet-copy {
      grid-row: 2;
      align-self: center;
      justify-self: center;
      width: var(--plus-sheet-copy-width);
      max-height: var(--layout-plus-sheet-copy-max-block-landscape);
      gap: calc(var(--adaptive-base-gap) * var(--plus-sheet-content-scale, 1));
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-width: none;
    }

    .participant-shell--plus .plus-sheet-copy::-webkit-scrollbar {
      display: none;
    }

    .participant-shell--plus .plus-sheet-copy .panel-summary {
      font-size: calc(var(--adaptive-copy-size) * var(--plus-sheet-content-scale, 1));
      line-height: var(--line-height-adaptive-copy-comfort);
    }

    .participant-shell--plus .plus-sheet-footer {
      grid-row: 3;
      height: auto;
      min-height: 0;
    }

    .participant-shell--plus.participant-shell--legacy-course .legacy-course-sheet-copy {
      width: 100%;
      max-width: none;
      height: auto;
      min-height: 0;
      max-height: none;
    }

    .participant-shell--login .form-panel,
    .participant-shell--goal-composition .form-panel--goal-composition {
      overflow-y: auto;
      overscroll-behavior-y: contain;
      scrollbar-width: none;
    }

    .participant-shell--login .form-panel::-webkit-scrollbar,
    .participant-shell--goal-composition .form-panel--goal-composition::-webkit-scrollbar {
      display: none;
    }

    .participant-shell--solo-offer,
    .participant-shell--group-offer,
    .participant-shell--gift-offer {
      --offer-landscape-copy-size: var(--type-offer-landscape-copy);
      --offer-base-gap: var(--layout-base-gap);
      --solo-offer-control-height: max(
        var(--interactive-min-size),
        clamp(1.56rem, calc(var(--fluid-block) * var(--scale-profile-divider)), 2rem)
      );
      --solo-offer-text-size: var(--type-solo-offer-landscape-copy);
      --solo-offer-title-size: var(--type-solo-offer-landscape-title);
      --gift-offer-panel-height: calc(
        var(--solo-offer-control-height) * var(--scale-double) + var(--divider-width)
      );
    }

    .participant-shell--offer:not(:has(.stage-overlay[data-stage-overlay-mode="faq"]))
      .stage-overlay
      > .solo-offer-top-copy,
    .participant-shell--offer:not(:has(.stage-overlay[data-stage-overlay-mode="faq"]))
      .stage-overlay
      > .group-offer-top-copy,
    .participant-shell--offer:not(:has(.stage-overlay[data-stage-overlay-mode="faq"]))
      .gift-recipient-notice {
      width: var(--container-offer-top-copy-inline);
      line-height: var(--leading-control);
    }

    .participant-shell--offer:not(:has(.stage-overlay[data-stage-overlay-mode="faq"]))
      .stage-overlay
      > .solo-offer-top-copy {
      font-size: calc(var(--offer-landscape-copy-size) * var(--scale-spacious));
    }

    .participant-shell--offer:not(:has(.stage-overlay[data-stage-overlay-mode="faq"]))
      .stage-overlay
      > .group-offer-top-copy,
    .participant-shell--offer:not(:has(.stage-overlay[data-stage-overlay-mode="faq"]))
      .gift-recipient-notice {
      font-size: var(--offer-landscape-copy-size);
    }

    .participant-shell--solo-offer .stage-static-title {
      font-size: var(--solo-offer-title-size);
      line-height: var(--leading-tight);
    }

    .participant-shell--gift-offer .gift-greeting-panel-hint.status-error {
      bottom: calc(var(--offer-bottom-reserve) + var(--offer-base-gap));
    }

    .stage-rotator {
      min-height: var(--stage-rotator-min-height-compact);
    }
  }

  @media (max-width: var(--viewport-query-split-wide-max)) {
    .participant-shell--watch .lesson-tabs {
      width: 100%;
      max-width: var(--watch-copy-measure, min(100%, var(--accordion-copy-measure)));
    }
  }

  @media (max-width: var(--viewport-query-compact)) {
    .participant-shell--watch .lesson-description p {
      font-size: calc(var(--accordion-body-size, var(--type-small)) * var(--scale-accordion-body));
    }

    .participant-shell--watch .watch-panel .lesson-tabs {
      --button-font-size: var(--type-micro);
      --button-group-gap: calc(var(--layout-base-gap) * var(--scale-comfort));
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .page-watch-panel-focus .participant-shell--watch,
  .participant-shell--watch[data-watch-layout="panel-focus"] {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1;
    width: 100%;
    max-width: 100%;
    min-height: 100dvh;
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
    background: #000;
  }

  .page-watch-panel-focus .participant-shell--watch > .lesson-stage,
  .participant-shell--watch[data-watch-layout="panel-focus"] > .lesson-stage {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    min-width: 0;
    max-width: none;
    height: 100%;
    min-height: 100%;
  }

  .page-watch-panel-focus .participant-shell--watch .watch-panel,
  .participant-shell--watch[data-watch-layout="panel-focus"] > .watch-panel {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    justify-items: center;
    width: 100%;
    min-width: 0;
    max-width: none;
    height: 100%;
    min-height: 0;
    max-height: none;
    padding-block: 0;
    padding-inline: var(--panel-safe-gutter-start) var(--panel-safe-gutter-end);
    background: transparent;
    pointer-events: none;
    overflow: hidden;
  }

  .page-watch-panel-focus
    .participant-shell--watch
    > .watch-panel
    > .panel-scroll.split-content-stack,
  .participant-shell--watch[data-watch-layout="panel-focus"]
    > .watch-panel
    > .panel-scroll.split-content-stack {
    grid-row: 2;
    pointer-events: auto;
    justify-self: center;
    margin-inline: auto;
    width: min(100%, var(--watch-copy-measure, 30ch));
    max-width: min(100%, var(--container-watch));
    max-height: min(100%, calc(100dvh - var(--split-back-zone) * 2));
    overflow-y: auto;
    overscroll-behavior-y: contain;
  }

  .page-watch-panel-focus .participant-shell--watch > .panel-footer,
  .participant-shell--watch[data-watch-layout="panel-focus"] > .panel-footer {
    position: relative;
    z-index: 3;
    flex-shrink: 0;
    pointer-events: none;
  }

  /* Viewport stability for mobile in-app browsers. Dynamic viewport units may
   update while browser chrome appears or disappears; these full-screen routes
   keep shell geometry on stable viewport units and lock scrollable sheets to
   their own containers. */
  html:has(.participant-shell--plus),
  body:has(.participant-shell--plus),
  html:has(.window-browse-shell[data-plus-details="true"]),
  body:has(.window-browse-shell[data-plus-details="true"]) {
    height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
  }

  :is(
    .participant-shell--login,
    .participant-shell--join-choice,
    .participant-shell--registration,
    .participant-shell--gift-activation,
    .participant-shell--goal-composition,
    .participant-shell--solo-offer,
    .participant-shell--group-offer,
    .participant-shell--gift-offer,
    .participant-shell--group-readiness,
    .note-focus-stage,
    .group-payment-success-shell,
    .payment-card
  ) {
    min-height: 100svh;
  }

  :is(.participant-shell--profile, .messages-shell) {
    min-height: 100dvh;
  }

  :is(.messages-shell) {
    height: 100dvh;
  }

  :is(.payment-provider-waiting) {
    min-height: 0;
    height: 100%;
  }

  :is(.payment-provider-frame) {
    height: 100%;
    min-height: 0;
  }

  :is(
      .participant-shell--login,
      .participant-shell--join-choice,
      .participant-shell--registration:not(
        :is(.participant-shell--join-gift, .participant-shell--gift-activation):has(
          .panel-scroll--join-identity
        )
      ),
      .participant-shell--gift-activation.participant-shell--goal-composition,
      .participant-shell--goal-composition,
      .participant-shell--group-readiness
    )
    :is(.split-stage, .form-panel, .form-panel--registration, .form-panel--goal-composition) {
    min-height: 100svh;
  }

  .participant-shell--profile
    :is(.split-stage, .form-panel, .form-panel--registration, .form-panel--goal-composition),
  .participant-shell--profile .profile-panel {
    min-height: 100dvh;
  }

  @media (max-width: var(--viewport-query-split-wide-max)) {
    .participant-shell.participant-shell--auth-layout.participant-shell--registration:is(
        .participant-shell--join-gift,
        .participant-shell--gift-activation
      ):has(.panel-scroll--join-identity):not(.participant-shell--goal-composition) {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: minmax(0, 1fr) auto;
      height: 100svh;
      min-height: 100svh;
      max-height: 100svh;
      overflow: hidden;
    }

    .participant-shell.participant-shell--auth-layout.participant-shell--registration:is(
        .participant-shell--join-gift,
        .participant-shell--gift-activation
      ):has(.panel-scroll--join-identity):not(.participant-shell--goal-composition)
      > :is(.split-stage, .split-screen-stage, .form-panel.split-screen-panel) {
      min-height: 0;
    }

    .participant-shell.participant-shell--auth-layout.participant-shell--registration:is(
        .participant-shell--join-gift,
        .participant-shell--gift-activation
      ):has(.panel-scroll--join-identity):not(.participant-shell--goal-composition)
      > .split-stage {
      grid-column: 1;
      grid-row: 1;
      width: 100%;
      min-width: 0;
      height: 100%;
      max-height: none;
    }

    .participant-shell.participant-shell--auth-layout.participant-shell--registration:is(
        .participant-shell--join-gift,
        .participant-shell--gift-activation
      ):has(.panel-scroll--join-identity):not(.participant-shell--goal-composition)
      > .form-panel.split-screen-panel {
      grid-column: 1;
      grid-row: 2;
      align-self: end;
      width: 100%;
      min-width: 0;
      height: auto;
      max-height: none;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto;
      align-content: start;
      background: var(--split-panel-surface);
      overflow: visible;
      transform: none;
      pointer-events: auto;
      container-type: normal;
      container-name: none;
    }

    .participant-shell.participant-shell--auth-layout.participant-shell--registration:is(
        .participant-shell--join-gift,
        .participant-shell--gift-activation
      ):has(.panel-scroll--join-identity):not(.participant-shell--goal-composition)
      > .form-panel
      > .panel-scroll.panel-scroll--join-identity {
      grid-row: 1;
      align-self: stretch;
      justify-self: center;
      max-height: 100%;
      padding-block: var(--registration-identity-stack-gap, var(--space-5));
      padding-bottom: max(
        var(--safe-area-bottom),
        var(--registration-identity-stack-gap, var(--space-5))
      );
    }
  }

  /* 64rem matches --viewport-query-split-wide; literal for reliable @media in preview. */
  @media (min-width: 64rem) {
    .participant-shell.participant-shell--auth-layout.participant-shell--registration:is(
        .participant-shell--join-gift,
        .participant-shell--gift-activation
      ):has(.panel-scroll--join-identity):not(.participant-shell--goal-composition) {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      grid-template-rows: minmax(0, 1fr);
      height: 100svh;
      min-height: 100svh;
      max-height: 100svh;
      overflow: hidden;
    }

    .participant-shell.participant-shell--auth-layout.participant-shell--registration:is(
        .participant-shell--join-gift,
        .participant-shell--gift-activation
      ):has(.panel-scroll--join-identity):not(.participant-shell--goal-composition)
      > .split-stage {
      grid-column: 1;
      grid-row: 1;
      width: 100%;
      min-width: 0;
      height: 100svh;
      min-height: 100svh;
      max-height: 100svh;
    }

    .participant-shell.participant-shell--auth-layout.participant-shell--registration:is(
        .participant-shell--join-gift,
        .participant-shell--gift-activation
      ):has(.panel-scroll--join-identity):not(.participant-shell--goal-composition)
      > .form-panel.split-screen-panel {
      grid-column: 2;
      grid-row: 1;
      align-self: stretch;
      width: 100%;
      min-width: 0;
      height: 100svh;
      min-height: 100svh;
      max-height: 100svh;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
      background: var(--split-panel-surface);
      transform: none;
    }

    .participant-shell.participant-shell--auth-layout.participant-shell--registration:is(
        .participant-shell--join-gift,
        .participant-shell--gift-activation
      ):has(.panel-scroll--join-identity):not(.participant-shell--goal-composition)
      > .form-panel
      > .panel-scroll.panel-scroll--join-identity {
      grid-row: 2;
      align-self: center;
      justify-self: center;
    }
  }

  @media (max-width: var(--viewport-query-split-wide-fallback)) {
    .participant-shell.participant-shell--auth-layout.participant-shell--registration:is(
        .participant-shell--join-gift,
        .participant-shell--gift-activation
      ):has(.panel-scroll--join-identity):not(.participant-shell--goal-composition)
      > :is(.split-stage, .form-panel) {
      min-height: 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: var(--motion-reduced-duration) !important;
      animation-iteration-count: 1 !important;
      transition-duration: var(--motion-reduced-duration) !important;
      scroll-behavior: auto !important;
    }

    .text-shimmer,
    .rules-consent-form .form-hint,
    .rules-consent-section button[type="submit"] {
      animation: none !important;
      background: none;
      color: var(--text);
      -webkit-text-fill-color: currentColor;
    }

    .text-shimmer-wave-char {
      animation: none !important;
      color: var(--text-shimmer-wave-base);
      opacity: 1;
      text-shadow: none;
      transform: none;
    }

    .spokes {
      animation: none !important;
    }
  }

  /* ==========================================================================
   React route styles
   ========================================================================== */

  #root {
    --app-safe-area-zero: 0px;
    --app-radius-pill: var(--radius-pill, 999px);
    --app-hairline-border: var(--hairline, rgba(255, 255, 255, 0.24));
    --app-muted-border: rgba(255, 255, 255, 0.16);
    --app-soft-border: rgba(255, 255, 255, 0.12);
    --app-dialog-border: rgba(255, 255, 255, 0.2);
    --app-active-border: var(--hairline-strong, rgba(255, 255, 255, 0.34));
    --app-text: var(--text, #fff);
    --app-text-soft: var(--text-soft, rgba(255, 255, 255, 0.78));
    --app-text-muted: var(--text-muted, rgba(255, 255, 255, 0.58));
    --app-text-faint: rgba(255, 255, 255, 0.54);
    --app-control-color: rgba(255, 255, 255, 0.72);
    --app-control-color-hover: rgba(255, 255, 255, 0.96);
    --app-control-color-strong: rgba(255, 255, 255, 0.94);
    --app-action-bg: rgba(255, 255, 255, 0.035);
    --app-action-bg-soft: rgba(255, 255, 255, 0.05);
    --app-action-bg-hover: rgba(255, 255, 255, 0.12);
    --app-action-bg-active: rgba(255, 255, 255, 0.1);
    --app-field-bg: rgba(255, 255, 255, 0.055);
    --app-result-action-bg: rgba(0, 0, 0, 0.08);
    --app-selected-border: rgba(76, 154, 255, 0.48);
    --app-target-outline-color: rgba(255, 255, 255, 0.42);
    --app-dialog-bg: rgba(5, 5, 6, 0.94);
    --app-dialog-shadow: var(--shadow-dialog, 0 1rem 3rem rgba(0, 0, 0, 0.32));
    --app-danger-color: #ff453a;
    --app-divider-width: var(--divider-width, var(--line-width-hair, 1px));
    --app-visually-hidden-size: var(--visually-hidden-size, var(--app-divider-width));
    --app-visually-hidden-offset: var(
      --visually-hidden-offset,
      calc(var(--app-visually-hidden-size) * -1)
    );
    --app-focus-outline-width: var(--focus-ring-width, 2px);
    --app-focus-outline-offset: var(--focus-ring-offset-loose, 4px);
    --app-press-shift: var(--press-shift, 1px);
    --app-press-scale: 0.97;
    --app-press-scale-subtle: 0.96;
    --app-transition-fast: 160ms var(--ease, ease);
    --app-transition-base: 180ms var(--ease, ease);
    --app-icon-size: var(--control-icon-size, var(--adaptive-icon-size, 1.125rem));
    --app-dialog-safe-gap: var(--dialog-safe-gap, var(--space-3, 0.8rem));
    --app-overlay-inset-block-start: max(
      var(--safe-area-top, var(--app-safe-area-zero)),
      var(--app-dialog-safe-gap)
    );
    --app-overlay-inset-inline-end: max(
      var(--safe-area-right, var(--app-safe-area-zero)),
      var(--app-dialog-safe-gap)
    );
    --app-overlay-inset-block-end: max(
      var(--safe-area-bottom, var(--app-safe-area-zero)),
      var(--app-dialog-safe-gap)
    );
    --app-overlay-inset-inline-start: max(
      var(--safe-area-left, var(--app-safe-area-zero)),
      var(--app-dialog-safe-gap)
    );
    --app-overlay-border: var(--app-divider-width) solid var(--app-dialog-border);
    --app-overlay-panel-radius: var(--overlay-panel-radius, var(--radius-md, 0.72rem));
    --app-overlay-fullscreen-radius: var(--overlay-fullscreen-radius, 0);
    --app-overlay-fullscreen-inset: var(--overlay-full-inset, 0);
    --app-overlay-fullscreen-inline: var(--overlay-full-inline, 100%);
    --app-container-safe-inline-fallback: calc(
      100% - var(--shell-gutter, 1rem) * var(--scale-double)
    );
    --app-container-space-safe-inline-fallback: calc(
      100% - var(--space-4, 1.2rem) * var(--scale-double)
    );
    --app-container-panel-inline: var(--container-panel, min(48rem, 100%));
    --app-container-review-controls-inline: min(30rem, var(--container-cqw, 100%));
    --app-container-review-video-inline: min(58rem, 100%);
    --app-container-dialog-list-inline: min(
      48rem,
      var(--container-safe-inline, var(--app-container-safe-inline-fallback))
    );
    --app-container-feed-post-inline: min(
      38rem,
      var(--container-space-safe-inline, var(--app-container-space-safe-inline-fallback))
    );
    --app-container-feed-post-compact-inline: min(
      100%,
      var(--container-query-safe-inline, var(--app-container-safe-inline-fallback))
    );
    --app-container-feed-edit-inline: min(28rem, 100%);
    --app-container-feed-dialog-inline: min(
      42rem,
      var(--container-space-safe-inline, var(--app-container-space-safe-inline-fallback))
    );
    --app-control-inline: var(--container-cqi-control, 38%);
    --app-control-inline-compact: var(--container-cqi-compact, 32%);
    --app-button-min-height: var(--button-min-height, var(--adaptive-button-min-height));
    --app-button-compact-min-height: var(
      --interactive-target-size-compact,
      var(--button-compact-min-height, var(--app-button-min-height))
    );
    --app-button-compact-padding-inline: var(
      --button-compact-padding-inline,
      calc(var(--adaptive-button-padding-inline) * var(--scale-soft))
    );
    --app-icon-button-hit-size: var(
      --interactive-icon-hit-size-compact,
      var(--control-sm, var(--app-button-compact-min-height))
    );
    --app-route-min-height: 100dvh;
    --app-safe-padding-block: max(
        var(--safe-area-top, var(--app-safe-area-zero)),
        var(--shell-gutter)
      )
      max(var(--safe-area-bottom, var(--app-safe-area-zero)), var(--shell-gutter));
    --app-safe-padding-inline: var(
        --panel-safe-gutter-start,
        var(--safe-shell-gutter-start, var(--shell-gutter))
      )
      var(--panel-safe-gutter-end, var(--safe-shell-gutter-end, var(--shell-gutter)));
    --app-surface-gap: var(--adaptive-base-gap);
    --app-result-gap: calc(var(--adaptive-base-gap) * var(--scale-type-fluid-sm-loose));
    --app-review-gap: calc(var(--adaptive-base-gap) * var(--scale-double));
    --app-review-controls-inline: var(
      --container-review-controls,
      var(--app-container-review-controls-inline)
    );
    --app-review-video-inline: var(
      --container-review-video,
      var(--app-container-review-video-inline)
    );
    --app-video-max-block: min(calc(var(--fluid-block, 1svh) * var(--scale-watch-fluid)), 34rem);
    --app-dialog-list-inline: var(--container-dialog-list, var(--app-container-dialog-list-inline));
    --app-feed-post-inline: var(--container-feed-post, var(--app-container-feed-post-inline));
    --app-feed-post-inline-compact: var(
      --container-feed-post-compact,
      var(--app-container-feed-post-compact-inline)
    );
    --app-deadline-pill-inline: var(
      --container-deadline-pill,
      min(15rem, var(--app-control-inline))
    );
    --app-deadline-pill-inline-compact: var(
      --container-deadline-pill-compact,
      min(100%, var(--app-control-inline-compact))
    );
    min-height: var(--app-route-min-height);
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
  }

  .site-content-loading {
    position: relative;
    min-height: var(--app-route-min-height);
    background: transparent;
    overflow: hidden;
  }

  .site-content-boot-stage {
    position: fixed;
    inset: 0;
    z-index: -6;
    pointer-events: none;
  }

  .site-content-required {
    min-height: var(--app-route-min-height);
    container-type: size;
    container-name: adaptive-surface;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: var(--app-surface-gap);
    padding-block: var(--app-safe-padding-block);
    padding-inline: var(--app-safe-padding-inline);
    background: var(--page, #050506);
    color: var(--text, #f7f1e8);
    text-align: center;
  }

  .site-content-required p,
  .site-content-required span {
    margin: 0;
  }

  .site-content-required p {
    font-size: var(--adaptive-copy-size, var(--type-panel-copy));
    line-height: var(--lh-base);
  }

  .site-content-required span {
    color: var(--app-text-soft);
    font-size: var(--adaptive-detail-size, var(--type-panel-detail));
    line-height: var(--lh-base);
  }

  .sr-only {
    position: absolute;
    width: var(--app-visually-hidden-size);
    height: var(--app-visually-hidden-size);
    padding: 0;
    margin: var(--app-visually-hidden-offset);
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .google-icon {
    display: block;
    flex: 0 0 auto;
    width: var(--google-icon-size, var(--app-icon-size));
    height: var(--google-icon-size, var(--app-icon-size));
  }

  .gift-issued-shell {
    --gift-issued-gap: var(--app-result-gap);
    --gift-issued-instruction-gap: calc(var(--adaptive-base-gap) * var(--scale-fine));
    --gift-issued-status-min-height: calc(
      var(--adaptive-detail-size, 16px) * var(--scale-composer-inline-wide)
    );
    min-height: var(--app-route-min-height);
    position: relative;
    z-index: var(--z-overlay);
    container-type: size;
    container-name: adaptive-surface;
    display: grid;
    place-items: center;
    padding-block: var(--app-safe-padding-block);
    padding-inline: var(--app-safe-padding-inline);
    text-align: center;
    background: transparent;
    color: var(--app-text);
  }

  .gift-issued-content {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: var(--gift-issued-gap);
    width: var(--adaptive-content-width);
  }

  .gift-issued-shell p {
    max-width: var(--copy-wide, 44rem);
    margin: 0;
    color: var(--app-text-soft);
    font-size: var(--adaptive-detail-size, var(--type-panel-detail));
    line-height: var(--lh-base);
  }

  .gift-issued-deadline {
    margin: 0;
    color: var(--app-text-soft);
    font-size: var(--adaptive-copy-size, var(--type-panel-copy));
    line-height: var(--lh-base);
  }

  .gift-issued-copy {
    min-height: var(--button-min-height, var(--adaptive-button-min-height));
    padding: var(--button-padding-block, var(--adaptive-button-padding-block))
      var(--button-padding-inline, var(--adaptive-button-padding-inline));
    border: var(--app-divider-width) solid currentColor;
    border-radius: var(--adaptive-button-radius, var(--app-radius-pill));
    background: var(--app-result-action-bg);
    color: inherit;
    font: inherit;
    font-size: var(--button-font-size, var(--adaptive-button-font-size));
    line-height: var(--button-line-height, var(--leading-solid));
    letter-spacing: var(--tracking-none);
    cursor: pointer;
    transition:
      background-color var(--app-transition-fast),
      transform var(--app-transition-fast);
  }

  .gift-issued-copy:hover {
    background: var(--app-action-bg-hover);
  }

  .gift-issued-copy:active {
    transform: translateY(var(--app-press-shift));
  }

  .gift-issued-copy:focus-visible {
    outline: var(--app-focus-outline-width) solid currentColor;
    outline-offset: var(--app-focus-outline-offset);
  }

  .gift-issued-instruction {
    display: grid;
    gap: var(--gift-issued-instruction-gap);
    max-width: var(--adaptive-content-width);
  }

  .gift-issued-instruction span {
    display: block;
  }

  .gift-issued-copy-status {
    min-height: var(--gift-issued-status-min-height);
    color: var(--app-text);
  }

  .gift-issued-copy-status[data-state="copied"] {
    color: var(--app-danger-color);
  }

  .new-lesson-badge {
    display: inline-flex;
    align-items: center;
    min-height: calc(var(--adaptive-detail-size, 12px) * var(--scale-layout-stack-tight));
    margin-left: var(--space-2);
    padding: calc(var(--adaptive-base-gap) * var(--scale-fine)) var(--space-2);
    border: var(--app-divider-width) solid currentColor;
    border-radius: var(--app-radius-pill);
    font-size: var(--type-panel-meta);
    line-height: var(--leading-solid);
    text-transform: uppercase;
    vertical-align: middle;
  }

  .review-gate-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--button-group-gap, var(--adaptive-base-gap));
    width: var(--app-review-controls-inline);
    margin-inline: auto;
  }

  .review-gate-deadline {
    display: inline-flex;
    align-items: center;
    min-height: var(--button-min-height, var(--adaptive-button-min-height));
    padding: var(--button-padding-block, var(--adaptive-button-padding-block))
      var(--button-padding-inline, var(--adaptive-button-padding-inline));
    border: var(--app-divider-width) solid var(--app-hairline-border);
    border-radius: var(--adaptive-button-radius, var(--app-radius-pill));
    color: var(--app-text-soft);
    font-size: var(--button-font-size, var(--adaptive-button-font-size));
    line-height: var(--button-line-height, var(--leading-solid));
    white-space: nowrap;
    background: var(--app-action-bg-active);
  }

  .review-gate-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--button-min-height, var(--adaptive-button-min-height));
    padding: var(--button-padding-block, var(--adaptive-button-padding-block))
      var(--button-padding-inline, var(--adaptive-button-padding-inline));
    border: var(--app-divider-width) solid currentColor;
    border-radius: var(--adaptive-button-radius, var(--app-radius-pill));
    color: inherit;
    font-size: var(--button-font-size, var(--adaptive-button-font-size));
    line-height: var(--button-line-height, var(--leading-solid));
    text-decoration: none;
    transition:
      background-color var(--app-transition-base),
      color var(--app-transition-base),
      transform var(--app-transition-base);
  }

  .review-gate-action:hover {
    background: var(--app-action-bg-hover);
  }

  .review-gate-action:active {
    transform: scale(var(--app-press-scale));
  }

  /* Review-broadcast only: chat fills the allocated 50% panel with safe-area insets. */
  .participant-shell--watch.participant-shell--review-gate-broadcast:not(
      [data-watch-layout="panel-focus"]
    )
    > .watch-panel.watch-panel--review-gate-broadcast {
    box-sizing: border-box;
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    align-self: stretch;
    min-height: 0;
    height: 100%;
    padding-block-end: var(--safe-area-bottom);
    padding-inline: var(--panel-safe-gutter-start) var(--panel-safe-gutter-end);
    overflow: hidden;
    background: var(--page, #050505);
    color-scheme: dark;
    container-type: normal;
  }

  .participant-shell--watch.participant-shell--review-gate-broadcast
    > .watch-panel
    > .panel-scroll.panel-scroll--review-gate-chat {
    grid-row: 1;
    align-self: stretch;
    justify-self: stretch;
    width: 100%;
    max-width: none;
    height: 100%;
    min-height: 0;
    margin-inline: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    gap: 0;
  }

  .participant-shell--watch.participant-shell--review-gate-broadcast
    .watch-sheet-body--review-gate-chat,
  .participant-shell--watch.participant-shell--review-gate-broadcast [data-e2e="review-gate"] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: 100%;
  }

  .participant-shell--watch.participant-shell--review-gate-broadcast .kinescope-chat-frame {
    --kinescope-chat-surface: #000;
    position: relative;
    display: block;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    color-scheme: dark;
    background: var(--kinescope-chat-surface);
  }

  .participant-shell--watch.participant-shell--review-gate-broadcast .kinescope-chat-frame iframe {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    border: 0;
    background: var(--kinescope-chat-surface);
    color-scheme: dark;
  }

  @media (max-width: var(--viewport-query-split-wide-max)) {
    .participant-shell--watch.participant-shell--review-gate-broadcast:not(
        [data-watch-layout="panel-focus"]
      ) {
      grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
      grid-template-columns: minmax(0, 1fr);
    }

    .participant-shell--watch.participant-shell--review-gate-broadcast > .watch-top-links {
      grid-row: 1;
      grid-column: 1;
      align-self: start;
      justify-self: end;
      width: 0;
      height: 0;
      overflow: visible;
      pointer-events: none;
    }

    .participant-shell--watch.participant-shell--review-gate-broadcast > .watch-top-links a {
      pointer-events: auto;
    }

    .participant-shell--watch.participant-shell--review-gate-broadcast > .lesson-stage {
      grid-row: 1;
      grid-column: 1;
      min-height: 0;
      height: 100%;
    }

    .participant-shell--watch.participant-shell--review-gate-broadcast
      > .watch-panel.watch-panel--review-gate-broadcast {
      grid-row: 2;
      grid-column: 1;
      min-height: 0;
      max-height: none;
      height: 100%;
    }
  }

  @media (min-width: 64rem) {
    .participant-shell--watch.participant-shell--review-gate-broadcast:not(
        [data-watch-layout="panel-focus"]
      )
      > .watch-panel.watch-panel--review-gate-broadcast {
      padding-block: var(--safe-area-top) var(--safe-area-bottom);
      padding-inline: max(var(--safe-area-left), var(--space-3)) var(--panel-safe-gutter-end);
    }
  }

  .messages-deadline-pill {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    width: max-content;
    max-width: 100%;
    min-height: var(
      --button-min-height,
      var(--adaptive-button-min-height, var(--control-sm, 2.5rem))
    );
    padding: 0 var(--adaptive-button-padding-inline);
    border: var(--app-divider-width) solid var(--app-hairline-border);
    border-radius: var(--adaptive-button-radius, var(--app-radius-pill));
    color: var(--app-text-soft);
    font-size: var(--adaptive-detail-size, var(--type-panel-detail));
    line-height: var(--leading-solid);
    white-space: nowrap;
  }

  .messages-feed-item[data-target="true"] .message {
    outline: var(--app-focus-outline-width) solid var(--app-target-outline-color);
    outline-offset: var(--app-focus-outline-offset);
  }

  .messages-shell:has(> .messages-dialog-list) {
    grid-template-rows: 9% minmax(0, 1fr) auto;
  }

  .messages-dialog-list {
    grid-row: 1;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0 var(--shell-gutter);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--adaptive-base-gap);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .messages-dialog-list::-webkit-scrollbar {
    display: none;
  }

  .messages-dialog-chip {
    min-height: var(--button-min-height, var(--adaptive-button-min-height));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 0 var(--adaptive-button-padding-inline);
    border: var(--app-divider-width) solid var(--app-muted-border);
    border-radius: var(--adaptive-button-radius, var(--app-radius-pill));
    background: var(--app-action-bg);
    color: var(--app-control-color);
    font-size: var(--button-font-size, var(--adaptive-button-font-size));
    font-weight: 650;
    line-height: var(--leading-solid);
    white-space: nowrap;
    text-wrap: nowrap;
    text-decoration: none;
  }

  .messages-dialog-chip[data-active="true"] {
    border-color: var(--app-active-border);
    background: var(--app-action-bg-hover);
    color: var(--app-control-color-strong);
  }

  .telegram-prompt {
    --telegram-prompt-width: min(
      var(--container-telegram-prompt),
      var(--container-query-space-safe-inline, calc(100vw - 2rem))
    );
    --telegram-prompt-gap: calc(var(--adaptive-base-gap) * var(--scale-hit-lg));
    --telegram-prompt-panel-padding-block: calc(var(--adaptive-base-gap) * var(--scale-edit-block));
    --telegram-prompt-panel-padding-inline: calc(
      var(--adaptive-base-gap) * var(--scale-adaptive-pad)
    );
    --telegram-prompt-copy-size: var(--adaptive-detail-size, var(--type-panel-detail));
    --telegram-prompt-action-min-height: var(--app-button-min-height, var(--button-min-height));
    --telegram-prompt-action-padding-inline: var(--adaptive-button-padding-inline);
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-overlay, 20) + 4);
    container-type: size;
    container-name: adaptive-surface;
    display: grid;
    place-items: center;
    padding-block: var(--app-safe-padding-block);
    padding-inline: var(--app-safe-padding-inline);
  }

  .telegram-prompt[data-variant="fullscreen"] {
    --telegram-prompt-width: min(
      var(--container-telegram-prompt-wide),
      var(--container-query-space-safe-inline, calc(100vw - 2rem))
    );
  }

  .telegram-prompt[data-variant="fullscreen"] .focus-backdrop__content {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: var(--telegram-prompt-width);
    max-width: 100%;
    box-sizing: border-box;
  }

  .telegram-prompt-panel {
    display: grid;
    justify-items: center;
    gap: var(--telegram-prompt-gap);
    width: var(--telegram-prompt-width);
    max-width: 100%;
    box-sizing: border-box;
    padding: var(--telegram-prompt-panel-padding-block) var(--telegram-prompt-panel-padding-inline);
    border: var(--app-overlay-border);
    border-radius: var(--app-overlay-panel-radius);
    background: rgba(5, 5, 6, 0.88);
    box-shadow: var(--app-dialog-shadow);
    color: var(--app-text);
    text-align: center;
  }

  .telegram-prompt[data-variant="dialog"] .focus-backdrop__content {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: var(--telegram-prompt-width);
    max-width: 100%;
    box-sizing: border-box;
  }

  .telegram-prompt[data-variant="dialog"] .telegram-prompt-panel {
    width: 100%;
    padding-inline: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .telegram-prompt[data-variant="fullscreen"] .telegram-prompt-panel {
    width: 100%;
    padding-inline: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .telegram-prompt-copy {
    max-width: var(--copy-width);
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: var(--telegram-prompt-copy-size);
    font-weight: 500;
    line-height: var(--lh-relaxed);
    letter-spacing: var(--tracking-none);
    text-wrap: balance;
  }

  .telegram-prompt-actions {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: var(--adaptive-base-gap);
    width: 100%;
    max-width: 100%;
  }

  .telegram-prompt-action,
  .telegram-prompt .profile-action-button.telegram-prompt-action {
    flex: 0 0 auto;
    width: fit-content;
    max-width: 100%;
    min-width: 0;
  }

  .telegram-prompt[data-variant="dialog"] .telegram-prompt-actions,
  .telegram-prompt[data-variant="dialog"] .profile-telegram-confirm-actions {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
  }

  .telegram-prompt[data-variant="dialog"] .telegram-prompt-action,
  .telegram-prompt[data-variant="dialog"] .profile-action-button.telegram-prompt-action {
    flex: 0 1 auto;
    width: fit-content;
    min-width: 0;
    max-width: 100%;
  }

  .telegram-prompt[data-variant="dialog"] .profile-telegram-confirm-actions .profile-action-button {
    width: fit-content;
    min-width: 0;
    max-width: 100%;
  }

  .telegram-prompt-action {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--adaptive-base-gap) * var(--scale-snug));
    min-height: var(--telegram-prompt-action-min-height);
    min-width: 0;
    max-width: 100%;
    padding: var(--button-padding-block) var(--telegram-prompt-action-padding-inline);
    border: var(--app-divider-width) solid rgba(255, 255, 255, 0.42);
    border-radius: var(--adaptive-button-radius, var(--app-radius-pill));
    background: transparent;
    box-shadow: none;
    color: rgba(255, 255, 255, 0.88);
    cursor: pointer;
    font: inherit;
    font-size: var(--button-font-size, var(--adaptive-button-font-size));
    font-weight: 650;
    line-height: var(--leading-solid);
    letter-spacing: var(--tracking-none);
    text-align: center;
    text-decoration: none;
    white-space: normal;
    text-wrap: balance;
    transition:
      background-color var(--dur) var(--ease),
      border-color var(--dur) var(--ease),
      color var(--dur) var(--ease),
      opacity var(--dur) var(--ease),
      transform var(--dur) var(--ease);
  }

  .telegram-prompt-action:hover:not(:disabled) {
    border-color: rgba(255, 255, 255, 0.68);
    background: transparent;
    color: rgba(255, 255, 255, 0.98);
  }

  .telegram-prompt-action:active:not(:disabled) {
    transform: scale(var(--app-press-scale, 0.97));
  }

  .telegram-prompt-action:disabled {
    cursor: wait;
    opacity: 0.58;
  }

  .telegram-prompt .profile-action-button.telegram-prompt-action {
    width: auto;
    white-space: normal;
    text-wrap: balance;
  }

  .telegram-prompt[data-variant="dialog"] .profile-action-button.telegram-prompt-action {
    width: fit-content;
  }

  @container adaptive-surface (max-width: var(--container-query-narrow)) {
    .telegram-prompt:not([data-variant="dialog"]) .telegram-prompt-actions,
    .telegram-prompt:not([data-variant="dialog"]) .profile-telegram-confirm-actions {
      flex-direction: column;
      align-items: center;
      width: 100%;
    }

    .telegram-prompt:not([data-variant="dialog"]) .profile-action-button.telegram-prompt-action,
    .telegram-prompt:not([data-variant="dialog"])
      .profile-telegram-confirm-actions
      .profile-action-button {
      flex: 0 0 auto;
      width: fit-content;
      min-width: 0;
    }
  }

  .telegram-prompt-panel .status-error {
    width: 100%;
    max-width: 100%;
  }

  .telegram-prompt-error {
    display: grid;
    justify-items: center;
    gap: calc(var(--adaptive-base-gap) * var(--scale-dense));
    max-width: 100%;
    margin: 0;
    color: rgba(255, 210, 210, 0.9);
    font-size: var(--type-panel-meta);
    line-height: var(--lh-base);
    text-wrap: balance;
  }

  .telegram-prompt-error strong,
  .telegram-prompt-error span {
    display: block;
  }

  @media (max-width: 63.999rem) {
    .telegram-prompt {
      inset: 0;
      width: 100%;
      max-width: 100%;
      height: auto;
      min-height: 0;
      max-height: none;
      align-content: center;
      justify-items: center;
      overflow-x: hidden;
      overflow-x: clip;
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }

    .telegram-prompt::-webkit-scrollbar {
      display: none;
    }

    .telegram-prompt[data-variant="fullscreen"] .focus-backdrop__content,
    .telegram-prompt[data-variant="dialog"] .focus-backdrop__content {
      position: relative;
      inset: auto;
      left: auto;
      top: auto;
      transform: none;
      width: var(--telegram-prompt-width);
      max-width: 100%;
      max-height: calc(
        100dvh - max(var(--safe-area-top), var(--space-3)) -
          max(var(--safe-area-bottom), var(--space-3))
      );
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }

    .telegram-prompt[data-variant="fullscreen"] .focus-backdrop__content::-webkit-scrollbar,
    .telegram-prompt[data-variant="dialog"] .focus-backdrop__content::-webkit-scrollbar {
      display: none;
    }
  }
}