@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {--tw-scroll-snap-strictness: proximity;
      --tw-space-y-reverse: 0;
      --tw-border-style: solid;
      --tw-leading: initial;
      --tw-shadow: 0 0 #0000;
      --tw-inset-shadow: 0 0 #0000;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-duration: initial;
      --tw-ease: initial}
  }
}
@layer theme {
  :root, :host {--font-sans: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --color-amber-800: #953d00;
    --color-green-700: #008138;
    --color-blue-100: #2196f3;
    --color-violet-100: #7d4ccf;
    --color-neutral-100: #f5f5f5;
    --color-neutral-300: #e0e0e0;
    --color-neutral-500: #9e9e9e;
    --color-neutral-600: #757575;
    --color-neutral-900: #2d2d2d;
    --color-white: #fff;
    --spacing: .25rem;
    --container-2xl: 42rem;
    --container-3xl: 48rem;
    --container-4xl: 56rem;
    --container-6xl: 72rem;
    --text-sm: 14px;
    --text-sm--line-height: 20px;
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 18px;
    --text-lg--line-height: 28px;
    --text-xl: 20px;
    --text-xl--line-height: 28px;
    --text-2xl: 24px;
    --text-2xl--line-height: 32px;
    --text-3xl: 30px;
    --text-3xl--line-height: 36px;
    --text-4xl: 36px;
    --text-4xl--line-height: 40px;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-relaxed: 1.625;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --radius-3xl: 24px;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --color-neutral-000: #fff;
    --color-violet-12: #efe9f9;
    --color-blue-12: #e4f2fd;
    --color-green-12: #e9f5ea;
    --color-orange-12: #fff3e0;
    --color-text-primary: var(--color-neutral-900);
    --color-text-secondary: var(--color-neutral-600);
    --color-text-accent: var(--color-violet-100);
    --color-surface-page: var(--color-neutral-000);
    --color-surface-section: var(--color-neutral-100);
    --color-surface-card: var(--color-neutral-000);
    --color-border-default: var(--color-neutral-300);
    --color-action-primary: var(--color-violet-100);
    --color-action-primary-soft: var(--color-violet-12);
    --spacing-0: 0px;
    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 12px;
    --spacing-4: 16px;
    --spacing-5: 20px;
    --spacing-6: 24px;
    --spacing-7: 28px;
    --spacing-8: 32px;
    --spacing-9: 36px;
    --spacing-10: 40px;
    --spacing-12: 48px;
    --spacing-16: 64px;
    --spacing-24: 96px;
    --spacing-1_5: 6px;
    --spacing-2_5: 10px;
    --spacing-3_5: 14px;
    --radius-none: 0px;
    --radius-base: 4px;
    --radius-full: 9999px;
    --container-kaiten: 1216px;
    --duration-base: .18s;
    --ease-ui: cubic-bezier(.2, 0, .2, 1);
    --button-radius: 8px;
    --button-fill-bg: var(--color-violet-100);
    --button-fill-bg-hover: #6f43b8;
    --button-fill-text: var(--color-neutral-000);
    --button-outline-bg: var(--color-neutral-000);
    --button-outline-bg-hover: var(--color-violet-12);
    --button-outline-border: var(--color-neutral-300);
    --button-outline-border-hover: #7d4ccf7a;
    --button-outline-text: var(--color-violet-100);
    --button-outline-text-hover: #6f43b8;
    --button-focus-default: 0 0 0 4px #98a2b324}
  @supports (color: lab(0% 0 0)) {
    :root, :host {--color-amber-800: lab(37.8823% 37.1699 52.2718);
      --color-green-700: lab(47.0329% -47.0239 31.4788)}
  }
}
@layer base {
  *, :after, :before, ::backdrop {box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0}
  ::file-selector-button {box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0}
  html, :host {-webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent}
  hr {height: 0;
    color: inherit;
    border-top-width: 1px}
  abbr:where([title]) {-webkit-text-decoration: underline dotted;
    text-decoration: underline dotted}
  h1, h2, h3, h4, h5, h6 {font-size: inherit;
    font-weight: inherit}
  a {color: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit}
  b, strong {font-weight: bolder}
  code, kbd, samp, pre {font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em}
  small {font-size: 80%}
  sub, sup {vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative}
  sub {bottom: -.25em}
  sup {top: -.5em}
  table {text-indent: 0;
    border-color: inherit;
    border-collapse: collapse}
  :-moz-focusring {outline: auto}
  progress {vertical-align: baseline}
  summary {display: list-item}
  ol, ul, menu {list-style: none}
  img, svg, video, canvas, audio, iframe, embed, object {vertical-align: middle;
    display: block}
  img, video {max-width: 100%;
    height: auto}
  button, input, select, optgroup, textarea {font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0}
  ::file-selector-button {font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0}
  :where(select:is([multiple], [size])) optgroup {font-weight: bolder}
  :where(select:is([multiple], [size])) optgroup option {padding-inline-start: 20px}
  ::file-selector-button {margin-inline-end: 4px}
  ::placeholder {opacity: 1}
  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {color: currentColor}
    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {color: color-mix(in oklab, currentcolor 50%, transparent)}
    }
  }
  textarea {resize: vertical}
  ::-webkit-search-decoration {-webkit-appearance: none}
  ::-webkit-date-and-time-value {min-height: 1lh;
    text-align: inherit}
  ::-webkit-datetime-edit {display: inline-flex}
  ::-webkit-datetime-edit-fields-wrapper {padding: 0}
  ::-webkit-datetime-edit {padding-block: 0}
  ::-webkit-datetime-edit-year-field {padding-block: 0}
  ::-webkit-datetime-edit-month-field {padding-block: 0}
  ::-webkit-datetime-edit-day-field {padding-block: 0}
  ::-webkit-datetime-edit-hour-field {padding-block: 0}
  ::-webkit-datetime-edit-minute-field {padding-block: 0}
  ::-webkit-datetime-edit-second-field {padding-block: 0}
  ::-webkit-datetime-edit-millisecond-field {padding-block: 0}
  ::-webkit-datetime-edit-meridiem-field {padding-block: 0}
  ::-webkit-calendar-picker-indicator {line-height: 1}
  :-moz-ui-invalid {box-shadow: none}
  button, input:where([type="button"], [type="reset"], [type="submit"]) {appearance: button}
  ::file-selector-button {appearance: button}
  ::-webkit-inner-spin-button {height: auto}
  ::-webkit-outer-spin-button {height: auto}
  [hidden]:where(:not([hidden="until-found"])) {display: none !important}
}
@layer components;
@layer utilities {
  .relative {position: relative}
  .isolate {isolation: isolate}
  .mx-auto {margin-inline: auto}
  .mt-2 {margin-top: var(--spacing-2)}
  .mt-3 {margin-top: var(--spacing-3)}
  .mt-4 {margin-top: var(--spacing-4)}
  .mt-6 {margin-top: var(--spacing-6)}
  .-mr-6 {margin-right: calc(var(--spacing-6) * -1)}
  .-mb-6 {margin-bottom: calc(var(--spacing-6) * -1)}
  .mb-2 {margin-bottom: var(--spacing-2)}
  .mb-6 {margin-bottom: var(--spacing-6)}
  .ml-6 {margin-left: var(--spacing-6)}
  .ml-auto {margin-left: auto}
  .block {display: block}
  .flex {display: flex}
  .grid {display: grid}
  .hidden {display: none}
  .inline-flex {display: inline-flex}
  .h-3 {height: var(--spacing-3)}
  .h-3\.5 {height: var(--spacing-3_5)}
  .h-4 {height: var(--spacing-4)}
  .h-5 {height: var(--spacing-5)}
  .h-7 {height: var(--spacing-7)}
  .h-8 {height: var(--spacing-8)}
  .h-9 {height: var(--spacing-9)}
  .h-12 {height: var(--spacing-12)}
  .h-\[480px\] {height: 480px}
  .h-auto {height: auto}
  .h-full {height: 100%}
  .max-h-\[440px\] {max-height: 440px}
  .w-3 {width: var(--spacing-3)}
  .w-3\.5 {width: var(--spacing-3_5)}
  .w-4 {width: var(--spacing-4)}
  .w-5 {width: var(--spacing-5)}
  .w-7 {width: var(--spacing-7)}
  .w-9 {width: var(--spacing-9)}
  .w-12 {width: var(--spacing-12)}
  .w-\[240px\] {width: 240px}
  .w-\[318px\] {width: 318px}
  .w-\[720px\] {width: 720px}
  .w-auto {width: auto}
  .w-full {width: 100%}
  .w-px {width: 1px}
  .max-w-\(--container-kaiten\) {max-width: var(--container-kaiten)}
  .max-w-2xl {max-width: var(--container-2xl)}
  .max-w-3xl {max-width: var(--container-3xl)}
  .max-w-full {max-width: 100%}
  .min-w-0 {min-width: var(--spacing-0)}
  .min-w-4 {min-width: var(--spacing-4)}
  .flex-1 {flex: 1}
  .shrink-0 {flex-shrink: 0}
  .snap-x {scroll-snap-type: x var(--tw-scroll-snap-strictness)}
  .snap-mandatory {--tw-scroll-snap-strictness: mandatory}
  .snap-start {scroll-snap-align: start}
  .grid-cols-1 {grid-template-columns: repeat(1, minmax(0, 1fr))}
  .flex-col {flex-direction: column}
  .items-center {align-items: center}
  .items-start {align-items: flex-start}
  .justify-between {justify-content: space-between}
  .justify-center {justify-content: center}
  .gap-1 {gap: var(--spacing-1)}
  .gap-1\.5 {gap: var(--spacing-1_5)}
  .gap-2 {gap: var(--spacing-2)}
  .gap-3 {gap: var(--spacing-3)}
  .gap-4 {gap: var(--spacing-4)}
  .gap-5 {gap: var(--spacing-5)}
  .gap-6 {gap: var(--spacing-6)}
  .gap-8 {gap: var(--spacing-8)}
  :where(.space-y-2 > :not(:last-child)) {--tw-space-y-reverse: 0;
    margin-block-start: calc(var(--spacing-2) * var(--tw-space-y-reverse));
    margin-block-end: calc(var(--spacing-2) * calc(1 - var(--tw-space-y-reverse)))}
  .self-end {align-self: flex-end}
  .self-stretch {align-self: stretch}
  .overflow-hidden {overflow: hidden}
  .overflow-x-auto {overflow-x: auto}
  .rounded-\(--radius-3xl\) {border-radius: var(--radius-3xl)}
  .rounded-\(--radius-base\) {border-radius: var(--radius-base)}
  .rounded-\(--radius-lg\) {border-radius: var(--radius-lg)}
  .rounded-\(--radius-xl\) {border-radius: var(--radius-xl)}
  .rounded-\[var\(--button-radius\)\] {border-radius: var(--button-radius)}
  .rounded-full {border-radius: var(--radius-full)}
  .rounded-lg {border-radius: var(--radius-lg)}
  .rounded-br-\(--radius-xl\) {border-bottom-right-radius: var(--radius-xl)}
  .border {border-style: var(--tw-border-style);
    border-width: 1px}
  .border-r {border-right-style: var(--tw-border-style);
    border-right-width: 1px}
  .border-b {border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px}
  .border-\(--button-outline-border\) {border-color: var(--button-outline-border)}
  .border-\(--color-border-default\) {border-color: var(--color-border-default)}
  .border-\[\#ededed\] {border-color: #ededed}
  .bg-\(--button-fill-bg\) {background-color: var(--button-fill-bg)}
  .bg-\(--button-outline-bg\) {background-color: var(--button-outline-bg)}
  .bg-\(--color-action-primary\) {background-color: var(--color-action-primary)}
  .bg-\(--color-action-primary-soft\) {background-color: var(--color-action-primary-soft)}
  .bg-\(--color-blue-12\) {background-color: var(--color-blue-12)}
  .bg-\(--color-border-default\) {background-color: var(--color-border-default)}
  .bg-\(--color-green-12\) {background-color: var(--color-green-12)}
  .bg-\(--color-orange-12\) {background-color: var(--color-orange-12)}
  .bg-\(--color-surface-card\) {background-color: var(--color-surface-card)}
  .bg-\(--color-surface-page\) {background-color: var(--color-surface-page)}
  .bg-\(--color-surface-section\) {background-color: var(--color-surface-section)}
  .bg-\[rgba\(33\,150\,243\,0\.08\)\] {background-color: #2196f314}
  .bg-\[rgba\(76\,175\,81\,0\.08\)\] {background-color: #4caf5114}
  .bg-\[rgba\(125\,76\,207\,0\.08\)\] {background-color: #7d4ccf14}
  .bg-\[rgba\(255\,161\,0\,0\.08\)\] {background-color: #ffa10014}
  .object-contain {object-fit: contain}
  .object-center {object-position: center}
  .object-right {object-position: right}
  .p-2 {padding: var(--spacing-2)}
  .p-2\.5 {padding: var(--spacing-2_5)}
  .p-6 {padding: var(--spacing-6)}
  .px-1 {padding-inline: var(--spacing-1)}
  .px-1\.5 {padding-inline: var(--spacing-1_5)}
  .px-4 {padding-inline: var(--spacing-4)}
  .px-5 {padding-inline: var(--spacing-5)}
  .px-8 {padding-inline: var(--spacing-8)}
  .py-2 {padding-block: var(--spacing-2)}
  .py-2\.5 {padding-block: var(--spacing-2_5)}
  .py-3 {padding-block: var(--spacing-3)}
  .py-3\.5 {padding-block: var(--spacing-3_5)}
  .pt-6 {padding-top: var(--spacing-6)}
  .pt-8 {padding-top: var(--spacing-8)}
  .pt-12 {padding-top: var(--spacing-12)}
  .pt-16 {padding-top: var(--spacing-16)}
  .pb-16 {padding-bottom: var(--spacing-16)}
  .text-left {text-align: left}
  .text-2xl {font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height))}
  .text-3xl {font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height))}
  .text-base {font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height))}
  .text-lg {font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height))}
  .text-sm {font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height))}
  .text-\[10\.5px\] {font-size: 10.5px}
  .text-\[10px\] {font-size: 10px}
  .text-\[11px\] {font-size: 11px}
  .text-\[12px\] {font-size: 12px}
  .text-\[13px\] {font-size: 13px}
  .text-\[14px\] {font-size: 14px}
  .leading-relaxed {--tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed)}
  .leading-snug {--tw-leading: var(--leading-snug);
    line-height: var(--leading-snug)}
  .leading-tight {--tw-leading: var(--leading-tight);
    line-height: var(--leading-tight)}
  .font-medium {font-weight: var(--font-weight-medium)}
  .font-semibold {font-weight: var(--font-weight-semibold)}
  .whitespace-nowrap {white-space: nowrap}
  .whitespace-pre-line {white-space: pre-line}
  .text-\(--button-fill-text\) {color: var(--button-fill-text)}
  .text-\(--button-outline-text\) {color: var(--button-outline-text)}
  .text-\(--color-blue-100\) {color: var(--color-blue-100)}
  .text-\(--color-text-accent\) {color: var(--color-text-accent)}
  .text-\(--color-text-primary\) {color: var(--color-text-primary)}
  .text-\(--color-text-secondary\) {color: var(--color-text-secondary)}
  .text-amber-800 {color: var(--color-amber-800)}
  .text-green-700 {color: var(--color-green-700)}
  .text-white {color: var(--color-white)}
  .uppercase {text-transform: uppercase}
  .no-underline {text-decoration-line: none}
  .transition-colors {transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration))}
  .duration-\(--duration-base\) {--tw-duration: var(--duration-base);
    transition-duration: var(--duration-base)}
  .ease-\(--ease-ui\) {--tw-ease: var(--ease-ui);
    transition-timing-function: var(--ease-ui)}
  @media (hover: hover) {
    .hover\:border-\(--button-outline-border-hover\):hover {border-color: var(--button-outline-border-hover)}
  }
  @media (hover: hover) {
    .hover\:bg-\(--button-fill-bg-hover\):hover {background-color: var(--button-fill-bg-hover)}
  }
  @media (hover: hover) {
    .hover\:bg-\(--button-outline-bg-hover\):hover {background-color: var(--button-outline-bg-hover)}
  }
  @media (hover: hover) {
    .hover\:text-\(--button-outline-text-hover\):hover {color: var(--button-outline-text-hover)}
  }
  @media (hover: hover) {
    .hover\:text-\(--color-text-accent\):hover {color: var(--color-text-accent)}
  }
  @media (hover: hover) {
    .hover\:text-\(--color-text-primary\):hover {color: var(--color-text-primary)}
  }
  @media (hover: hover) {
    .hover\:opacity-90:hover {opacity: .9}
  }
  .focus-visible\:shadow-\(--button-focus-default\):focus-visible {--tw-shadow: var(--button-focus-default);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}
  .focus-visible\:outline-none:focus-visible {outline-style: none}
  @media (min-width: 40rem) {
    .sm\:inline-flex {display: inline-flex}
  }
  @media (min-width: 40rem) {
    .sm\:flex-row {flex-direction: row}
  }
  @media (min-width: 40rem) {
    .sm\:justify-center {justify-content: center}
  }
  @media (min-width: 48rem) {
    .md\:order-1 {order: 1}
  }
  @media (min-width: 48rem) {
    .md\:order-2 {order: 2}
  }
  @media (min-width: 48rem) {
    .md\:mx-0 {margin-inline: var(--spacing-0)}
  }
  @media (min-width: 48rem) {
    .md\:mx-auto {margin-inline: auto}
  }
  @media (min-width: 48rem) {
    .md\:-mt-16 {margin-top: calc(var(--spacing-16) * -1)}
  }
  @media (min-width: 48rem) {
    .md\:-mr-8 {margin-right: calc(var(--spacing-8) * -1)}
  }
  @media (min-width: 48rem) {
    .md\:-mb-8 {margin-bottom: calc(var(--spacing-8) * -1)}
  }
  @media (min-width: 48rem) {
    .md\:mb-8 {margin-bottom: var(--spacing-8)}
  }
  @media (min-width: 48rem) {
    .md\:mb-16 {margin-bottom: var(--spacing-16)}
  }
  @media (min-width: 48rem) {
    .md\:-ml-8 {margin-left: calc(var(--spacing-8) * -1)}
  }
  @media (min-width: 48rem) {
    .md\:max-h-\[380px\] {max-height: 380px}
  }
  @media (min-width: 48rem) {
    .md\:w-\[calc\(50\%-12px\)\] {width: calc(50% - 12px)}
  }
  @media (min-width: 48rem) {
    .md\:max-w-4xl {max-width: var(--container-4xl)}
  }
  @media (min-width: 48rem) {
    .md\:grid-cols-2 {grid-template-columns: repeat(2, minmax(0, 1fr))}
  }
  @media (min-width: 48rem) {
    .md\:gap-6 {gap: var(--spacing-6)}
  }
  @media (min-width: 48rem) {
    .md\:gap-16 {gap: var(--spacing-16)}
  }
  @media (min-width: 48rem) {
    .md\:rounded-br-\(--radius-xl\) {border-bottom-right-radius: var(--radius-xl)}
  }
  @media (min-width: 48rem) {
    .md\:rounded-br-none {border-bottom-right-radius: var(--radius-none)}
  }
  @media (min-width: 48rem) {
    .md\:rounded-bl-\(--radius-xl\) {border-bottom-left-radius: var(--radius-xl)}
  }
  @media (min-width: 48rem) {
    .md\:rounded-bl-none {border-bottom-left-radius: var(--radius-none)}
  }
  @media (min-width: 48rem) {
    .md\:object-left {object-position: left}
  }
  @media (min-width: 48rem) {
    .md\:object-right {object-position: right}
  }
  @media (min-width: 48rem) {
    .md\:p-8 {padding: var(--spacing-8)}
  }
  @media (min-width: 48rem) {
    .md\:px-6 {padding-inline: var(--spacing-6)}
  }
  @media (min-width: 48rem) {
    .md\:pt-10 {padding-top: var(--spacing-10)}
  }
  @media (min-width: 48rem) {
    .md\:pt-12 {padding-top: var(--spacing-12)}
  }
  @media (min-width: 48rem) {
    .md\:pt-16 {padding-top: var(--spacing-16)}
  }
  @media (min-width: 48rem) {
    .md\:pt-24 {padding-top: var(--spacing-24)}
  }
  @media (min-width: 48rem) {
    .md\:pb-24 {padding-bottom: var(--spacing-24)}
  }
  @media (min-width: 48rem) {
    .md\:text-center {text-align: center}
  }
  @media (min-width: 48rem) {
    .md\:text-4xl {font-size: var(--text-4xl);
      line-height: var(--tw-leading, var(--text-4xl--line-height))}
  }
  @media (min-width: 48rem) {
    .md\:text-lg {font-size: var(--text-lg);
      line-height: var(--tw-leading, var(--text-lg--line-height))}
  }
  @media (min-width: 64rem) {
    .lg\:order-1 {order: 1}
  }
  @media (min-width: 64rem) {
    .lg\:order-2 {order: 2}
  }
  @media (min-width: 64rem) {
    .lg\:mx-0 {margin-inline: var(--spacing-0)}
  }
  @media (min-width: 64rem) {
    .lg\:-mt-24 {margin-top: calc(var(--spacing-24) * -1)}
  }
  @media (min-width: 64rem) {
    .lg\:mt-0 {margin-top: var(--spacing-0)}
  }
  @media (min-width: 64rem) {
    .lg\:mr-0 {margin-right: var(--spacing-0)}
  }
  @media (min-width: 64rem) {
    .lg\:-mb-12 {margin-bottom: calc(var(--spacing-12) * -1)}
  }
  @media (min-width: 64rem) {
    .lg\:mb-8 {margin-bottom: var(--spacing-8)}
  }
  @media (min-width: 64rem) {
    .lg\:mb-12 {margin-bottom: var(--spacing-12)}
  }
  @media (min-width: 64rem) {
    .lg\:mb-24 {margin-bottom: var(--spacing-24)}
  }
  @media (min-width: 64rem) {
    .lg\:ml-0 {margin-left: var(--spacing-0)}
  }
  @media (min-width: 64rem) {
    .lg\:flex {display: flex}
  }
  @media (min-width: 64rem) {
    .lg\:grid {display: grid}
  }
  @media (min-width: 64rem) {
    .lg\:max-h-\[460px\] {max-height: 460px}
  }
  @media (min-width: 64rem) {
    .lg\:w-auto {width: auto}
  }
  @media (min-width: 64rem) {
    .lg\:max-w-4xl {max-width: var(--container-4xl)}
  }
  @media (min-width: 64rem) {
    .lg\:max-w-6xl {max-width: var(--container-6xl)}
  }
  @media (min-width: 64rem) {
    .lg\:min-w-0 {min-width: var(--spacing-0)}
  }
  @media (min-width: 64rem) {
    .lg\:flex-1 {flex: 1}
  }
  @media (min-width: 64rem) {
    .lg\:shrink {flex-shrink: 1}
  }
  @media (min-width: 64rem) {
    .lg\:grid-cols-3 {grid-template-columns: repeat(3, minmax(0, 1fr))}
  }
  @media (min-width: 64rem) {
    .lg\:items-center {align-items: center}
  }
  @media (min-width: 64rem) {
    .lg\:gap-6 {gap: var(--spacing-6)}
  }
  @media (min-width: 64rem) {
    .lg\:gap-8 {gap: var(--spacing-8)}
  }
  @media (min-width: 64rem) {
    .lg\:gap-12 {gap: var(--spacing-12)}
  }
  @media (min-width: 64rem) {
    .lg\:gap-24 {gap: var(--spacing-24)}
  }
  @media (min-width: 64rem) {
    .lg\:overflow-visible {overflow: visible}
  }
  @media (min-width: 64rem) {
    .lg\:rounded-\(--radius-2xl\) {border-radius: var(--radius-2xl)}
  }
  @media (min-width: 64rem) {
    .lg\:rounded-br-none {border-bottom-right-radius: var(--radius-none)}
  }
  @media (min-width: 64rem) {
    .lg\:rounded-bl-none {border-bottom-left-radius: var(--radius-none)}
  }
  @media (min-width: 64rem) {
    .lg\:object-left {object-position: left}
  }
  @media (min-width: 64rem) {
    .lg\:p-12 {padding: var(--spacing-12)}
  }
  @media (min-width: 64rem) {
    .lg\:pt-12 {padding-top: var(--spacing-12)}
  }
  @media (min-width: 64rem) {
    .lg\:pt-24 {padding-top: var(--spacing-24)}
  }
  @media (min-width: 64rem) {
    .lg\:pt-32 {padding-top: calc(var(--spacing) * 32)}
  }
  @media (min-width: 64rem) {
    .lg\:pb-32 {padding-bottom: calc(var(--spacing) * 32)}
  }
  @media (min-width: 64rem) {
    .lg\:text-lg {font-size: var(--text-lg);
      line-height: var(--tw-leading, var(--text-lg--line-height))}
  }
  @media (min-width: 64rem) {
    .lg\:text-xl {font-size: var(--text-xl);
      line-height: var(--tw-leading, var(--text-xl--line-height))}
  }
  @media (min-width: 80rem) {
    .xl\:gap-8 {gap: var(--spacing-8)}
  }
  @media (min-width: 80rem) {
    .xl\:px-0 {padding-inline: var(--spacing-0)}
  }
}
:root {--font-sans: var(--font-roboto), "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif}
html {background: var(--color-surface-page);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased}
@property --tw-scroll-snap-strictness {syntax: "*";
  inherits: false;
  initial-value: proximity;}
@property --tw-space-y-reverse {syntax: "*";
  inherits: false;
  initial-value: 0;}
@property --tw-border-style {syntax: "*";
  inherits: false;
  initial-value: solid;}
@property --tw-gradient-from {syntax: "<color>";
  inherits: false;
  initial-value: #0000;}
@property --tw-gradient-via {syntax: "<color>";
  inherits: false;
  initial-value: #0000;}
@property --tw-gradient-to {syntax: "<color>";
  inherits: false;
  initial-value: #0000;}
@property --tw-leading {syntax: "*";
  inherits: false}
@property --tw-shadow {syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;}
@property --tw-inset-shadow {syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;}
@property --tw-ring-shadow {syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;}
@property --tw-inset-ring-shadow {syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;}
@property --tw-ring-offset-shadow {syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;}
@property --tw-drop-shadow {syntax: "*";
  inherits: false}
@property --tw-duration {syntax: "*";
  inherits: false}
@property --tw-ease {syntax: "*";
  inherits: false}
@keyframes pulse {50% {
    opacity: .5;
  }}
/*# sourceMappingURL=%5Broot-of-the-server%5D__0ic-g0e._.css.map*/
/* ===== кастомные компоненты (в SSR были inline) ===== */
.hsi-screen__glow {position:absolute;width:720px;height:520px;left:50%;top:-220px;transform:translateX(-50%);border-radius:9999px;background:linear-gradient(-90deg,#e298ff,#6fe5ff);filter:blur(220px);opacity:.28;pointer-events:none;z-index:0}
.hsi-screen__container {position:relative;z-index:1}
.hsi-screen {--_brand:var(--brand-100,#7d4ccf);--_brand-hover:var(--brand-hover,#6f43b8);
  --_brand-12:var(--brand-12,#efe9f9);
  --_brand-48k:var(--brand-48k,rgba(125,76,207,.48));--_border:var(--border-default,#e0e0e0);
  --_ink:#2d2d2d;--_font:var(--font-sans,'Roboto',system-ui,-apple-system,'Segoe UI',sans-serif);
  --_ls:var(--ls,0);
  position:relative;padding:var(--sp-12,48px) 0 var(--sp-6,24px);overflow:hidden;
  font-family:var(--_font);letter-spacing:var(--_ls);color:var(--_ink)}
.hsi-screen *, .hsi-screen *::before, .hsi-screen *::after {box-sizing:border-box}
.hsi-screen__container {max-width:var(--container,1216px);margin:0 auto;padding:0 var(--sp-4,16px)}
/* Боковой отступ: 16 на мобилке, 24 с планшета; на десктопе контейнер
   упирается в 1216 и отступ не нужен. */
@media(min-width:768px) {
  .hsi-screen__container {padding:0 var(--sp-6,24px)}
}
@media(min-width:1280px) {
  .hsi-screen__container {padding:0}
}
.hsi-screen__grid {display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--sp-12,48px)}
.hsi-screen__copy {width:100%;max-width:940px;margin:0 auto;text-align:center}
.hsi-screen__title {font-size:var(--fs-4xl,36px);line-height:var(--lh-4xl,44px);font-weight:var(--fw-semi,600);letter-spacing:0;margin:var(--sp-4,16px) 0 var(--sp-5,20px)}
.hsi-screen__sub {font-size:var(--fs-lg,18px);line-height:var(--lh-lg,28px);font-weight:var(--fw-reg,400);color:#2d2d2d;max-width:820px;margin:0 auto var(--sp-8,32px)}
.hsi-screen__cta {display:flex;gap:var(--sp-3,12px);flex-wrap:wrap;justify-content:center}
.hsi-screen__btn {display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-1,4px);height:48px;padding:var(--sp-3,12px) var(--sp-5,20px);font-family:var(--_font);font-size:var(--fs-md,16px);line-height:var(--lh-md,24px);font-weight:var(--fw-med,500);letter-spacing:var(--_ls);border-radius:var(--radius-lg,8px);border:none;cursor:pointer;white-space:nowrap;text-decoration:none;transition:background .18s,border-color .18s,color .18s}
.hsi-screen__btn--fill {background:var(--_brand);color:#fff}
.hsi-screen__btn--fill:hover {background:var(--_brand-hover)}
.hsi-screen__btn--outline {background:#fff;border:1px solid var(--_border);color:var(--_brand)}
.hsi-screen__btn--outline:hover {background:var(--_brand-12);border-color:var(--_brand-48k);color:var(--_brand-hover)}
.hsi-screen__visual {width:100%;display:flex;justify-content:center}
/* Строка доверия — стилистика лендинга «Кайтен vs MS Project»:
   иконка-контур брендового цвета + подпись, разделитель-палочка между пунктами,
   на узких экранах — бегущая строка с растворением по краям. */
.hsi-screen__trust {display:flex;align-items:center;justify-content:center;gap:16px;font-size:16px;margin-top:var(--sp-4,16px)}
.hsi-screen__trust b {display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-size:16px;line-height:22px;font-weight:var(--fw-reg,400);color:#424242}
.hsi-screen__trust b svg {width:18px;height:18px;color:var(--_brand);flex:0 0 auto}
.hsi-screen__trust .sep {width:1px;height:20px;background:var(--_border);flex:0 0 auto}
.hsi-screen__trust .trust-track {display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:16px;min-width:0}
.hsi-screen__trust .trust-set {display:flex;align-items:center;gap:16px;flex:0 0 auto}
.hsi-screen__trust .trust-track>[aria-hidden="true"], .hsi-screen__trust .trust-track>.trust-gap {display:none}
.hsi-screen__trust .trust-gap {width:16px}
.hsi-screen__trust .sep--lead {display:none}
@media(max-width:839px) {
  .hsi-screen__trust {overflow:hidden;justify-content:flex-start;mask-image:linear-gradient(90deg,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%)}
  .hsi-screen__trust .trust-track {width:max-content;flex:0 0 auto;flex-wrap:nowrap;justify-content:flex-start;animation:hsiTrustMarquee 30s linear infinite}
  .hsi-screen__trust .trust-track>[aria-hidden="true"] {display:flex}
  .hsi-screen__trust .sep--lead {display:block}
  .hsi-screen__trust .trust-track>.trust-gap {display:none}
}
@media(max-width:767px) {
  .hsi-screen__trust {font-size:14px;gap:12px;padding-inline:16px}
  .hsi-screen__trust b {font-size:14px}
  .hsi-screen__trust b svg {width:16px;height:16px}
  .hsi-screen__trust .sep {height:16px}
}
@keyframes hsiTrustMarquee {from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce) {
  .hsi-screen__trust .trust-track {animation:none}
}
@media(max-width:980px) {
  .hsi-screen__grid {gap:var(--sp-10,40px)}
  .hsi-screen__copy {max-width:none}
  .hsi-screen__sub {max-width:none}
}
@media(max-width:767px) {
  .hsi-screen {padding:var(--sp-12,48px) 0 var(--sp-6,24px)}
  .hsi-screen__title {font-size:var(--fs-4xl,36px);line-height:var(--lh-4xl,40px)}
  .hsi-screen__sub {font-size:var(--fs-md,16px)}
  .hsi-screen__copy {text-align:left}
  .hsi-screen__cta {justify-content:center}
}
@media(max-width:384px) {
  .hsi-screen__title {font-size:var(--fs-3xl,30px);line-height:var(--lh-3xl,36px)}
}
.hsi {--tp:#2d2d2d;--ts:#8a8a8f;--bd:#e8e8eb;font-family:var(--font-sans,'Roboto',system-ui,-apple-system,'Segoe UI',sans-serif);color:var(--tp);-webkit-font-smoothing:antialiased;text-align:left;display:flex;justify-content:center;zoom:.894}
.hsi * {box-sizing:border-box;margin:0;padding:0}
.hsi .mod {width:1360px;flex:0 0 auto;background:#f1f1f4;border:1px solid var(--bd);border-radius:16px;box-shadow:0 0 50px -24px rgba(45,45,45,.35);overflow:hidden}
.hsi .hdr {display:flex;align-items:center;gap:12px;padding:14px 18px}
.hsi .grip {display:grid;grid-template-columns:repeat(2,3px);gap:3px}
.hsi .grip i {width:3px;height:3px;border-radius:50%;background:#c4c4c9;display:block}
.hsi .hdr .nm {font-size:17px;font-weight:600}
.hsi .hdr .chev {margin-left:auto;color:var(--ts);display:flex}
.hsi .colhdr {display:flex;padding:6px 16px 10px;border-bottom:1px solid var(--bd)}
.hsi .colhdr .c {flex:1;display:flex;align-items:center;gap:8px;padding:0 9px}
.hsi .colhdr .c .t {font-size:14.5px;font-weight:500;color:var(--tp)}
.hsi .colhdr .c .chk {color:#4a8a2f;display:flex}
.hsi .cnt {margin-left:auto;display:inline-flex;min-width:24px;height:24px;align-items:center;justify-content:center;background:#5f5e5a;color:#fff;border-radius:7px;padding:0 7px;font-size:12.5px;font-weight:600}
.hsi .lane {display:flex;align-items:center;gap:12px;padding:13px 18px;border-bottom:1px solid var(--bd)}
.hsi .lane--foot {border-top:1px solid var(--bd)}
.hsi .lane .lnm {font-size:15px;font-weight:600}
.hsi .lane .cnt2 {margin-left:auto;display:inline-flex;min-width:30px;height:24px;align-items:center;justify-content:center;background:#ededf0;color:#6b6b70;border-radius:7px;padding:0 8px;font-size:12.5px;font-weight:600}
.hsi .lane .chev {color:var(--ts);display:flex}
.hsi .lanebody {display:flex;padding:14px 8px}
.hsi .col {flex:1;padding:0 9px;display:flex;flex-direction:column;gap:12px;position:relative}
.hsi .col + .col::before {content:"";position:absolute;left:0;top:-14px;bottom:-14px;border-left:1px solid var(--bd)}
.hsi .card {background:#fff;border:1px solid var(--bd);border-radius:12px;padding:14px;box-shadow:0 0 2px rgba(45,45,45,.05);display:flex;flex-direction:column;gap:11px}
.hsi .ct {font-size:14.5px;font-weight:500;line-height:1.35;color:var(--tp)}
.hsi .row {display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hsi .sub {display:inline-flex;align-items:center;gap:4px;color:var(--ts);font-size:12.5px}
.hsi .tags {display:flex;flex-wrap:wrap;gap:6px}
.hsi .tag {border-radius:999px;padding:3px 10px;font-size:12.5px;font-weight:500;white-space:nowrap}
.hsi .t-prod {background:#ededf0;color:#6b6b70}
.hsi .t-cx {background:#f7f0cf;color:#8a6a00}
.hsi .t-big {background:#efe9f9;color:#7d4ccf}
.hsi .t-urg {background:#fbe3ec;color:#c2185b}
.hsi .t-ok {background:#e7f3df;color:#2f7d33}
.hsi .t-blue {background:#e2eefb;color:#2f6fb0}
.hsi .foot {display:flex;align-items:center;justify-content:space-between}
.hsi .avs {display:flex;align-items:center}
.hsi .av {width:24px;height:24px;border-radius:50%;border:2px solid #fff;margin-left:-7px}
.hsi .av:first-child {margin-left:0}
.hsi .plus {font-size:12.5px;color:var(--ts);margin-left:7px}
.hsi .due {display:inline-flex;align-items:center;gap:5px;color:var(--ts);font-size:12.5px}
.hsi .drag-slot {position:relative}
/* Место, откуда карточку унесли: плашка чёрным с прозрачностью 10%. */
.hsi .drag-ghost {position:absolute;inset:0;border-radius:12px;background:rgba(0,0,0,.1);opacity:0;z-index:1;pointer-events:none;animation:hsiGhost 5s ease-in-out infinite}
.hsi .drag-layer {position:relative;z-index:30;animation:hsiTravel 5s ease-in-out infinite}
.hsi .drag-card {border:1px solid #e0d6f3;transform-origin:center;animation:hsiLift 5s ease-in-out infinite}
.hsi .hand {position:absolute;left:84%;top:32%;transform:translate(-50%,-50%);width:40px;height:40px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.25));animation:hsiHand 5s ease-in-out infinite;z-index:31}
@keyframes hsiTravel {0%{transform:translate(0,0)}10%{transform:translate(0,0)}20%{transform:translate(4px,-12px)}44%{transform:translate(154px,48px)}56%{transform:translate(154px,48px)}82%{transform:translate(4px,-12px)}94%{transform:translate(0,0)}100%{transform:translate(0,0)}}
@keyframes hsiLift {0%{transform:rotate(0) scale(1);box-shadow:0 0 2px rgba(45,45,45,.06)}10%{transform:rotate(0) scale(1);box-shadow:0 0 2px rgba(45,45,45,.06)}20%{transform:rotate(3deg) scale(1.03);box-shadow:0 0 45px -12px rgba(45,45,45,.40)}82%{transform:rotate(3deg) scale(1.03);box-shadow:0 0 45px -12px rgba(45,45,45,.40)}94%{transform:rotate(0) scale(1);box-shadow:0 0 2px rgba(45,45,45,.06)}100%{transform:rotate(0) scale(1);box-shadow:0 0 2px rgba(45,45,45,.06)}}
@keyframes hsiHand {0%{opacity:0}10%{opacity:0}20%{opacity:1}86%{opacity:1}100%{opacity:0}}
@keyframes hsiGhost {0%{opacity:0}14%{opacity:0}20%{opacity:1}82%{opacity:1}92%{opacity:0}100%{opacity:0}}
@media(prefers-reduced-motion:reduce) {
  .hsi .drag-layer, .hsi .drag-card, .hsi .hand, .hsi .drag-ghost {animation:none}
}
/* Фолбэк до гидратации: заведомо меньшие ступени, чтобы доска не вылезала
   за экран ещё до того, как JS посчитает точный масштаб по ширине слота. */
@media(max-width:1279px) {
  .hsi {zoom:.68}
}
@media(max-width:980px) {
  .hsi {zoom:.5}
}
@media(max-width:767px) {
  .hsi {zoom:.42}
}
@media(max-width:600px) {
  .hsi {zoom:.34}
}
@media(max-width:480px) {
  .hsi {zoom:.26}
}
@media(max-width:384px) {
  .hsi {zoom:.2}
}
/* Мобилка: доска без анимации. Кадр застывает в момент, когда карточку донесли до соседней
   колонки: слой смещён в конечную точку, карточка приподнята, рука и призрак видны. */
@media(max-width:767px) {
  .hsi .drag-layer {animation:none;transform:translate(154px,48px)}
  .hsi .drag-card {animation:none;transform:rotate(3deg) scale(1.03);box-shadow:0 0 45px -12px rgba(45,45,45,.40)}
  .hsi .hand {animation:none;opacity:1}
  .hsi .drag-ghost {animation:none;opacity:1}
}
.revx-mock {--container:1216px;
  --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-12:48px;
  --radius-2xl:16px; --radius-lg:8px;
  --fw-med:500; --fw-semi:600;
  --brand-100:#7d4ccf; --brand-hover:#6a3cbf; --brand-48:rgba(125,76,207,.48); --brand-12:#efe9f9;
  --border-default:#dbe1e0; --text-title:#2d2d2d; --text-secondary:#757575; --surface-section:#f7f7f8; --green-100:#4caf51;
  font-family:var(--font-sans,'Roboto',system-ui,-apple-system,sans-serif); color:var(--text-title);
  background:var(--surface-section); padding:96px 0}
.revx-mock * {box-sizing:border-box}
/* Боковой отступ контейнера держим в переменной: окно листалки гасит его на
   свою ширину, чтобы карточки шли от края до края на всех брейкпоинтах. */
.revx-mock {--pad:var(--sp-4)}
.revx-mock .revx__in {width:100%; max-width:var(--container); margin:0 auto; padding:0 var(--pad); display:flex; flex-direction:column; gap:var(--sp-12); align-items:center}
.revx-mock .revx__wrap {width:100%; overflow:hidden; position:relative}
/* Ширина трека равна окну — карточки задаются в процентах от него и выходят
   за край, обрезаясь overflow'ом обёртки. При width:max-content проценты
   считать было не от чего, и карточки резались краем. */
.revx-mock .revx__track {display:flex; gap:var(--sp-4); align-items:stretch; width:100%; transition:transform .35s ease}
.revx-mock .revx__track--single {width:100%; justify-content:center}
.revx-mock .otz {flex-shrink:0; width:384px; height:460px; background:#fff; border-radius:var(--radius-2xl); padding:var(--sp-6); display:flex; flex-direction:column; gap:var(--sp-6)}
.revx-mock .otz__top {display:flex; flex-direction:column; gap:var(--sp-5); flex:1; min-height:0}
.revx-mock .otz__hd {display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-4); min-height:64px}
.revx-mock .otz__co {font-size:18px; line-height:28px; font-weight:var(--fw-semi); color:var(--text-title)}
.revx-mock .otz__co img {height:40px; width:auto; max-width:140px; object-fit:contain; display:block}
.revx-mock .otz__q {flex-shrink:0; width:79px; height:60px; color:#f3f4f6}
/* Текст отзыва начинается на одной высоте во всех карточках: по центру
   свободного места он ездил вверх-вниз вслед за высотой подписи автора. */
.revx-mock .otz__body {flex:1; min-height:0; display:flex; flex-direction:column; justify-content:flex-start; gap:var(--sp-3)}
.revx-mock .otz__metric {font-size:18px; line-height:26px; font-weight:var(--fw-semi); color:var(--green-100)}
.revx-mock .otz__text {font-size:16px; line-height:24px; color:var(--text-title)}
.revx-mock .otz__author {display:flex; gap:var(--sp-4); align-items:center}
.revx-mock .otz__av {position:relative; overflow:hidden; isolation:isolate; width:56px; height:56px; border-radius:9999px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:var(--fw-semi); color:#fff; background:#c4b5e0}
.revx-mock .otz__av:has(img) {background:none}
.revx-mock .otz__av img {position:absolute; inset:-1px; width:calc(100% + 2px); height:calc(100% + 2px); object-fit:cover; border-radius:inherit}
.revx-mock .otz__who {display:flex; flex-direction:column; min-width:0}
.revx-mock .otz__name {font-size:16px; line-height:24px; font-weight:var(--fw-med); color:var(--text-title)}
.revx-mock .otz__role {font-size:16px; line-height:24px; color:var(--text-secondary); white-space:pre-line}
.revx-mock .otz__btn {align-self:flex-start; display:inline-flex; align-items:center; border:1px solid var(--border-default); border-radius:var(--radius-lg); padding:10px var(--sp-4); font-size:16px; line-height:24px; font-weight:var(--fw-med); color:var(--brand-100); background:#fff; text-decoration:none; cursor:pointer; transition:background .18s, border-color .18s, color .18s}
.revx-mock .otz__btn:hover {border-color:var(--brand-48); background:var(--brand-12); color:var(--brand-hover)}
.revx-mock .revx__nav {display:flex; gap:14px; align-items:center}
.revx-mock .revx__navbtn {width:40px; height:40px; border-radius:9999px; border:1px solid var(--border-default); background:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--brand-100); transition:background .18s, border-color .18s, color .18s, box-shadow .18s}
.revx-mock .revx__navbtn:hover:not(:disabled) {background:var(--brand-12); border-color:var(--brand-48); color:var(--brand-hover)}
.revx-mock .revx__navbtn:focus-visible {outline:none; box-shadow:0 0 0 4px rgba(152,162,179,.14)}
.revx-mock .revx__navbtn:disabled {background:#fff; border-color:var(--border-default); color:var(--border-default); cursor:default}
.revx-mock .revx__navbtn svg {width:24px; height:24px}
.revx-mock .revx__count {font-size:16px; line-height:24px; color:var(--text-secondary); min-width:52px; text-align:center}
.revx-mock .revx__count b {font-weight:var(--fw-med); color:var(--brand-100)}
/* Боковой отступ: 16 на мобилке, 24 с планшета и на десктопе. Контейнер на
   десктопе шире на два отступа, чтобы контент внутри остался 1216. */
@media(min-width:768px) {
  .revx-mock {--pad:var(--sp-6)}
}
@media(min-width:1280px) {
  .revx-mock .revx__in {max-width:calc(1216px + var(--sp-6) * 2)}
  .revx-mock .revx__track {gap:var(--sp-8)}
}
/* На планшете карточка той же ширины, что на десктопе (384): своя ширина
   осталась только на мобилке. */
@media(min-width:768px) and (max-width:1279px) {
  .revx-mock .revx__in {gap:var(--sp-8)}
  .revx-mock .revx__track {gap:var(--sp-6)}
}
/* Уменьшённый нижний отступ компенсирует блок листалки под карточками.
   Когда все карточки влезли и листалки нет — отступ снизу равен верхнему. */
/* Окно листалки выходит в оба края экрана, а сам трек отбит внутренними
   отступами: первая карточка стоит по сетке, а те, что не влезли, уходят
   в край экрана слева и справа, а не обрываются по границе контейнера. */
@media(max-width:1279px) {
  .revx-mock .revx__wrap {width:calc(100% + var(--pad) * 2); margin-inline:calc(var(--pad) * -1)}
  .revx-mock .revx__track {padding-inline:var(--pad)}
}
@media(max-width:1279px) {
  .revx-mock {padding-bottom:var(--sp-8)}
  .revx-mock.revx--nopager {padding-bottom:96px}
}
@media(max-width:1023px) {
  .revx-mock {padding:64px 0 var(--sp-8)}
  .revx-mock.revx--nopager {padding-bottom:64px}
  .revx-mock .revx__in {gap:var(--sp-8)}
}
@media(max-width:767px) {
  .revx-mock {padding:48px 0 var(--sp-6)}
  .revx-mock.revx--nopager {padding-bottom:48px}
  .revx-mock .revx__in {gap:var(--sp-6)}
  .revx-mock .otz {width:328px; max-width:100%; height:auto}
  .revx-mock .otz__co {font-size:16px; line-height:24px}
  .revx-mock .otz__co img {height:50px; max-width:150px}
}
.fg-track {scrollbar-width:none;-ms-overflow-style:none}
.fg-track::-webkit-scrollbar {display:none}
.ctp {position:relative;overflow:hidden;border-radius:12px;padding:48px;
  display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:48px;
  background:linear-gradient(90deg,#ece0ff,#cdecff);
  font-family:'Roboto',system-ui,sans-serif;color:#2d2d2d}
.ctp__copy {position:relative;z-index:1}
.ctp__copy h2 {font-size:30px;line-height:36px;font-weight:600;color:#2d2d2d;margin:0}
@media(min-width:1280px) {
  .ctp__copy h2 {font-size:36px;line-height:40px}
}
.ctp__copy p {font-size:16px;line-height:24px;color:#424242;margin:16px 0 0}
/* Кнопки в один ряд; в столбик уходят только на самых узких экранах,
   где две штуки физически не помещаются по ширине. */
.ctp__cta {display:flex;flex-wrap:nowrap;gap:12px;margin-top:24px}
/* Кнопки по шкале DS: высота 48, паддинг 12/20, радиус 8, начертание 500. */
.ctp__btn {display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
  height:48px;padding:12px 20px;border-radius:8px;border:1px solid transparent;
  background:#7d4ccf;color:#fff;
  font-size:16px;line-height:24px;font-weight:500;text-decoration:none;
  transition:background .18s, border-color .18s, color .18s}
.ctp__btn:hover {background:#6a3cbf}
/* Контурная — как btn--outline в DS: белая с рамкой и брендовым текстом. */
.ctp__btn--ghost {background:#fff;border-color:#dbe1e0;color:#7d4ccf}
.ctp__btn--ghost:hover {background:#efe9f9;border-color:rgba(125,76,207,.48);color:#6a3cbf}
.ctp__visual {position:relative;z-index:1;display:flex;justify-content:center;align-items:center}
.ctp__visual img {width:85%;height:auto;display:block;border-radius:12px}
@media(min-width:1024px) {
  .ctp {border-radius:16px}
  .ctp__visual img {border-radius:16px}
}
@media(min-width:768px) and (max-width:1279px) {
  .ctp__visual img {width:80%}
}
@media(min-width:1280px) {
  .ctp__visual img {width:84%}
}
@media(max-width:1023px) {
  .ctp {grid-template-columns:1fr;text-align:center;background:linear-gradient(180deg,#ece0ff,#cdecff)}
  .ctp__cta {justify-content:center}
  .ctp__visual {order:2}
}
@media(max-width:767px) {
  .ctp {text-align:left}
  .ctp__copy h2 {font-size:24px;line-height:32px}
  .ctp__cta {justify-content:center}
}
@media(min-width:560px) and (max-width:767px) {
  .ctp {padding:48px}
}
@media(max-width:559px) {
  .ctp {padding:24px}
  .ctp__cta {flex-wrap:wrap}
}
.fm {--violet:#7d4ccf;--violet-12:#efe9f9;--orange:#ffa100;--orange-12:#fff3e0;--red:#f44336;--red-12:#fde8e6;--green:#4caf51;--green-12:#e9f5ea;--blue:#2f80ed;--t1:#2d2d2d;--t2:#757575;--t3:#9e9e9e;--bd:#ececec;--surf:#f6f6f7;--page:#c9c9cf;font-family:var(--font-sans,"Roboto",system-ui,-apple-system,"Segoe UI",sans-serif);color:var(--t1);background:var(--page);-webkit-font-smoothing:antialiased;padding:36px}
.fm * {box-sizing:border-box;margin:0;padding:0}
.fm h1 {font-size:20px;font-weight:600;margin-bottom:4px;color:#222}
.fm .sub {font-size:13px;color:#5b5b5f;margin-bottom:30px}
.fm .card {position:relative;width:240px;background:#fff;border-radius:16px;box-shadow:0 0 40px -20px rgba(40,40,60,.45);padding:12px;overflow:hidden}
.fm .h180 {height:176px}
.fm .ttl {font-size:11px;font-weight:600;margin-bottom:9px}
.fm .lab {font-size:8.5px;color:var(--t2)}
.fm .val {font-size:8.5px;color:var(--t1);font-weight:500}
.fm .row {display:flex;align-items:center;gap:6px}
.fm .sp {flex:1}
.fm .line {height:6px;border-radius:3px;background:#eef0f2}
.fm .chip {display:inline-block;font-size:8px;font-weight:600;padding:2px 7px;border-radius:9px;white-space:nowrap}
.fm .chip.o {background:var(--orange-12);color:#b87400}
.fm .chip.r {background:var(--red-12);color:var(--red)}
.fm .chip.g {background:var(--green-12);color:#2f7d33}
.fm .av {border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:600;color:#fff;flex:none}
.fm .kbsh {display:flex;height:100%}
.fm .kbside {width:50px;flex:none;display:flex;flex-direction:column;gap:6px;padding:2px 9px 0 0;border-right:1px solid #eee}
.fm .kbside .hd {height:6px;width:95%;border-radius:3px;background:#e0e0e0;margin-bottom:2px}
.fm .kbrow {display:flex;align-items:center;gap:4px}
.fm .kbrow .dot {width:5px;height:5px;border-radius:50%;background:#e0e0e0;flex:none}
.fm .kbrow .ln {flex:1;height:5px;border-radius:3px;background:#eee}
.fm .kbside .pj {display:flex;align-items:center;gap:4px;background:#efe9f9;border-radius:5px;padding:3px 5px;margin:0 -2px 0 -5px}
.fm .kbside .pj i {width:5px;height:5px;border-radius:50%;background:#7d4ccf;flex:none}
.fm .kbside .pj b {font-size:8px;font-weight:600;color:#424242}
.fm .kbmain {flex:1;min-width:0;padding-left:9px}
.fm .vtb {display:flex;align-items:center;background:#efefef;border-radius:6px;padding:1.5px;width:100%;margin-bottom:7px}
.fm .vtb .vi {flex:1;height:18px;display:flex;align-items:center;justify-content:center;color:#6e6e72;position:relative}
.fm .vtb .vi svg {width:12px;height:12px}
.fm .vtb .vi:not(:last-child)::after {content:"";position:absolute;right:0;top:3px;bottom:3px;width:1px;background:#dbdbdb}
.fm .vtb .vi.act {background:#fff;border-radius:5px;color:#2d2d2d}
.fm .vtb .vi.act::after {display:none}
.fm .bttl {font-size:9.5px;font-weight:600;color:#424242;margin-bottom:8px}
.fm .kboard {display:grid;grid-template-columns:repeat(4,1fr)}
.fm .kcol {padding:0 5px;border-right:1px solid #eee;display:flex;flex-direction:column;gap:5px;min-width:0}
.fm .kcol:last-child {border-right:0}
.fm .kcol .kh {font-size:7px;color:#898989;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fm .kk {border-radius:4px}
.fm .kk.r {background:#fde8e6}
.fm .kk.o {background:#fff0d9}
.fm .kk.g {background:#e9f5ea}
.fm .kk.n {background:#f5f5f5}
.fm .kk.fg {background:#e9f5ea}
.fg-track {scrollbar-width:none;-ms-overflow-style:none}
.fg-track::-webkit-scrollbar {display:none}
.lmq {--_ink:var(--text-title,#2d2d2d);
  --_font:var(--font-sans,'Roboto',system-ui,-apple-system,'Segoe UI',sans-serif);
  --_ls:var(--ls,0);
  font-family:var(--_font);letter-spacing:var(--_ls);color:var(--_ink)}
.lmq *, .lmq *::before, .lmq *::after {box-sizing:border-box}
/* Лента живёт в контейнере страницы, а не во всю ширину окна. */
.lmq__marq {max-width:1216px;margin-left:auto;margin-right:auto;margin-top:var(--sp-12,48px);overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.lmq__track {display:flex;align-items:center;width:max-content;animation:lmqScroll 38s linear infinite}
.lmq__marq:hover .lmq__track {animation-play-state:paused}
.lmq__track img {height:46px;width:auto;margin-right:var(--sp-10,40px);flex:none;display:block;object-fit:contain}
@keyframes lmqScroll {from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce) {
  .lmq__track {animation:none}
}
@media(max-width:767px) {
  .lmq__marq {margin-top:var(--sp-6,24px)}
  .lmq__track img {margin-right:var(--sp-5,20px)}
}
.cta-secondary {--sp-1:4px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;
  --radius-3xl:24px; --radius-lg:8px;
  --fw-med:500; --fw-semi:600; --ls:0;
  --brand-12:#efe9f9; --brand-100:#7d4ccf; --brand-hover:#6a3cbf; --brand-48:rgba(125,76,207,.48);
  --border-default:#dbe1e0; --text-title:#2d2d2d; --surface-section:#f7f7f8;
  font-family:var(--font-sans,'Roboto',system-ui,-apple-system,sans-serif); color:var(--text-title);
  display:block; width:100%; padding:128px var(--sp-4); box-sizing:border-box}
.cta-secondary, .cta-secondary * {box-sizing:border-box}
.cta-secondary .fcta {position:relative; overflow:hidden; max-width:1216px; margin:0 auto; background:linear-gradient(90deg,#ece0ff,#cdecff); border-radius:var(--radius-3xl); text-align:left; padding:var(--sp-16) var(--sp-12)}
.cta-secondary .fcta__blur {display:none}
@media(max-width:1279px) {
  .cta-secondary .fcta {background:linear-gradient(180deg,#ece0ff 30%,#cdecff 85%)}
}
.cta-secondary .fcta__in {position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) 500px; gap:var(--sp-8); align-items:center}
.cta-secondary .fcta__copy {max-width:760px; align-self:start}
.cta-secondary .fcta h2 {font-size:30px; line-height:36px; font-weight:var(--fw-semi); margin:0 0 var(--sp-4)}
.cta-secondary .fcta p {font-size:18px; line-height:28px; color:#2d2d2d; margin:0 0 var(--sp-8)}
.cta-secondary .fcta__cta {display:flex; gap:var(--sp-3); justify-content:flex-start; flex-wrap:nowrap}
.cta-secondary .btn {display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-1); font-family:inherit; font-weight:var(--fw-med); letter-spacing:var(--ls); border-radius:var(--radius-lg); border:none; cursor:pointer; white-space:nowrap; text-decoration:none; height:48px; padding:var(--sp-3) var(--sp-5); font-size:16px; line-height:24px; transition:background .18s, border-color .18s, color .18s}
.cta-secondary .btn--fill {background:var(--brand-100); color:#fff}
.cta-secondary .btn--fill:hover {background:var(--brand-hover)}
.cta-secondary .btn--outline {background:#fff; border:1px solid var(--border-default); color:var(--brand-100)}
.cta-secondary .btn--outline:hover {background:var(--brand-12); border-color:var(--brand-48); color:var(--brand-hover)}
.cta-secondary .fcta__visual {justify-self:end; align-self:end; width:500px; max-width:100%; overflow:visible; margin-bottom:0; text-align:left}
@media(max-width:1279px) {
  .cta-secondary {padding:96px var(--sp-4)}
  .cta-secondary .fcta__in {grid-template-columns:minmax(0,1fr); text-align:center; gap:var(--sp-12); justify-items:center}
  .cta-secondary .fcta__copy {max-width:680px; margin:0 auto; min-width:0}
  .cta-secondary .fcta__cta {justify-content:center; flex-wrap:nowrap}
  .cta-secondary .fcta__visual {justify-self:center; align-self:auto; width:100%; max-width:520px; text-align:left}
}
@media(max-width:767px) {
  .cta-secondary {padding:64px var(--sp-4)}
  .cta-secondary .fcta {padding:var(--sp-12) var(--sp-6); border-radius:12px}
  .cta-secondary .fcta h2 {font-size:20px; line-height:28px}
  .cta-secondary .fcta p {font-size:16px; line-height:24px}
  .cta-secondary .fcta__copy {text-align:left}
  /* Кнопки в один ряд и на мобилке: две штуки помещаются по ширине. */
  .cta-secondary .fcta__cta {flex-direction:row; flex-wrap:wrap; justify-content:center; margin-inline:auto}
  .cta-secondary .fcta__cta .btn {width:auto}
}
/* статика: блоки, появляющиеся по скроллу (JS), показываем сразу */
:root {--font-sans:'Roboto',system-ui,-apple-system,'Segoe UI',sans-serif}