/* [project]/src/app/globals.css [app-client] (css) */
@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-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-space-y-reverse: 0;
      --tw-space-x-reverse: 0;
      --tw-border-style: solid;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-duration: initial;
      --tw-ease: initial;
    }
  }
}

@layer theme {
  :root, :host {
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
      "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
      "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --color-amber-500: #f99c00;
    --color-amber-600: #dd7400;
    --color-slate-500: #62748e;
    --color-black: #000;
    --color-white: #fff;
    --spacing: .25rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-2xl: 42rem;
    --container-3xl: 48rem;
    --container-4xl: 56rem;
    --container-5xl: 64rem;
    --container-6xl: 72rem;
    --text-xs: .75rem;
    --text-xs--line-height: calc(1 / .75);
    --text-sm: .875rem;
    --text-sm--line-height: calc(1.25 / .875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
    --text-5xl: 3rem;
    --text-5xl--line-height: 1;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-black: 900;
    --tracking-tight: -.025em;
    --tracking-wide: .025em;
    --tracking-widest: .1em;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --radius-md: .375rem;
    --radius-lg: .5rem;
    --radius-xl: .75rem;
    --radius-2xl: 1rem;
    --ease-out: cubic-bezier(0, 0, .2, 1);
    --animate-spin: spin 1s linear infinite;
    --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
    --blur-xs: 4px;
    --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);
  }

  @supports (color: lab(0% 0 0)) {
    :root, :host {
      --color-amber-500: lab(72.7183% 31.8672 97.9407);
      --color-amber-600: lab(60.3514% 40.5624 87.1228);
      --color-slate-500: lab(48.0876% -2.03595 -16.5814);
    }
  }
}

@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, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, 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:where(:not(iframe)) {
    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 {
  .\@container {
    container-type: inline-size;
  }

  .pointer-events-none {
    pointer-events: none;
  }

  .collapse {
    visibility: collapse;
  }

  .invisible {
    visibility: hidden;
  }

  .visible {
    visibility: visible;
  }

  .sr-only {
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }

  .absolute {
    position: absolute;
  }

  .fixed {
    position: fixed;
  }

  .relative {
    position: relative;
  }

  .static {
    position: static;
  }

  .sticky {
    position: sticky;
  }

  .inset-0 {
    inset: 0;
  }

  .-top-3 {
    top: calc(var(--spacing) * -3);
  }

  .top-0 {
    top: 0;
  }

  .top-0\.5 {
    top: calc(var(--spacing) * .5);
  }

  .top-1 {
    top: var(--spacing);
  }

  .top-2 {
    top: calc(var(--spacing) * 2);
  }

  .top-4 {
    top: calc(var(--spacing) * 4);
  }

  .top-\[108px\] {
    top: 108px;
  }

  .top-\[calc\(100\%\+6px\)\] {
    top: calc(100% + 6px);
  }

  .-right-3 {
    right: calc(var(--spacing) * -3);
  }

  .right-0 {
    right: 0;
  }

  .right-0\.5 {
    right: calc(var(--spacing) * .5);
  }

  .right-2 {
    right: calc(var(--spacing) * 2);
  }

  .right-4 {
    right: calc(var(--spacing) * 4);
  }

  .right-6 {
    right: calc(var(--spacing) * 6);
  }

  .-left-\[31px\] {
    left: -31px;
  }

  .left-1 {
    left: var(--spacing);
  }

  .isolate {
    isolation: isolate;
  }

  .z-10 {
    z-index: 10;
  }

  .z-40 {
    z-index: 40;
  }

  .z-50 {
    z-index: 50;
  }

  .order-first {
    order: -9999;
  }

  .order-last {
    order: 9999;
  }

  .col-span-2 {
    grid-column: span 2 / span 2;
  }

  .container {
    width: 100%;
  }

  @media (min-width: 40rem) {
    .container {
      max-width: 40rem;
    }
  }

  @media (min-width: 48rem) {
    .container {
      max-width: 48rem;
    }
  }

  @media (min-width: 64rem) {
    .container {
      max-width: 64rem;
    }
  }

  @media (min-width: 80rem) {
    .container {
      max-width: 80rem;
    }
  }

  @media (min-width: 96rem) {
    .container {
      max-width: 96rem;
    }
  }

  .-mx-1 {
    margin-inline: calc(var(--spacing) * -1);
  }

  .-mx-4 {
    margin-inline: calc(var(--spacing) * -4);
  }

  .mx-1 {
    margin-inline: var(--spacing);
  }

  .mx-1\.5 {
    margin-inline: calc(var(--spacing) * 1.5);
  }

  .mx-2 {
    margin-inline: calc(var(--spacing) * 2);
  }

  .mx-7 {
    margin-inline: calc(var(--spacing) * 7);
  }

  .mx-auto {
    margin-inline: auto;
  }

  .-my-2 {
    margin-block: calc(var(--spacing) * -2);
  }

  .my-1 {
    margin-block: var(--spacing);
  }

  .my-4 {
    margin-block: calc(var(--spacing) * 4);
  }

  .my-5 {
    margin-block: calc(var(--spacing) * 5);
  }

  .my-6 {
    margin-block: calc(var(--spacing) * 6);
  }

  .mt-0 {
    margin-top: 0;
  }

  .mt-0\.5 {
    margin-top: calc(var(--spacing) * .5);
  }

  .mt-1 {
    margin-top: var(--spacing);
  }

  .mt-1\.5 {
    margin-top: calc(var(--spacing) * 1.5);
  }

  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }

  .mt-2\.5 {
    margin-top: calc(var(--spacing) * 2.5);
  }

  .mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }

  .mt-3\.5 {
    margin-top: calc(var(--spacing) * 3.5);
  }

  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }

  .mt-5 {
    margin-top: calc(var(--spacing) * 5);
  }

  .mt-6 {
    margin-top: calc(var(--spacing) * 6);
  }

  .mt-7 {
    margin-top: calc(var(--spacing) * 7);
  }

  .mt-8 {
    margin-top: calc(var(--spacing) * 8);
  }

  .mt-9 {
    margin-top: calc(var(--spacing) * 9);
  }

  .mt-10 {
    margin-top: calc(var(--spacing) * 10);
  }

  .mt-11 {
    margin-top: calc(var(--spacing) * 11);
  }

  .mt-12 {
    margin-top: calc(var(--spacing) * 12);
  }

  .mt-auto {
    margin-top: auto;
  }

  .mr-1 {
    margin-right: var(--spacing);
  }

  .mr-1\.5 {
    margin-right: calc(var(--spacing) * 1.5);
  }

  .mr-2 {
    margin-right: calc(var(--spacing) * 2);
  }

  .-mb-4 {
    margin-bottom: calc(var(--spacing) * -4);
  }

  .mb-1 {
    margin-bottom: var(--spacing);
  }

  .mb-1\.5 {
    margin-bottom: calc(var(--spacing) * 1.5);
  }

  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }

  .mb-2\.5 {
    margin-bottom: calc(var(--spacing) * 2.5);
  }

  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }

  .mb-3\.5 {
    margin-bottom: calc(var(--spacing) * 3.5);
  }

  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }

  .mb-5 {
    margin-bottom: calc(var(--spacing) * 5);
  }

  .mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }

  .mb-7 {
    margin-bottom: calc(var(--spacing) * 7);
  }

  .mb-8 {
    margin-bottom: calc(var(--spacing) * 8);
  }

  .mb-9 {
    margin-bottom: calc(var(--spacing) * 9);
  }

  .mb-10 {
    margin-bottom: calc(var(--spacing) * 10);
  }

  .ml-0\.5 {
    margin-left: calc(var(--spacing) * .5);
  }

  .ml-1 {
    margin-left: var(--spacing);
  }

  .ml-2 {
    margin-left: calc(var(--spacing) * 2);
  }

  .ml-2\.5 {
    margin-left: calc(var(--spacing) * 2.5);
  }

  .ml-4 {
    margin-left: calc(var(--spacing) * 4);
  }

  .ml-6 {
    margin-left: calc(var(--spacing) * 6);
  }

  .ml-auto {
    margin-left: auto;
  }

  .line-clamp-1 {
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }

  .line-clamp-2 {
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }

  .line-clamp-3 {
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }

  .block {
    display: block;
  }

  .contents {
    display: contents;
  }

  .flex {
    display: flex;
  }

  .grid {
    display: grid;
  }

  .hidden {
    display: none;
  }

  .hidden\! {
    display: none !important;
  }

  .inline {
    display: inline;
  }

  .inline-block {
    display: inline-block;
  }

  .inline-flex {
    display: inline-flex;
  }

  .table {
    display: table;
  }

  .field-sizing-content {
    field-sizing: content;
  }

  .aspect-\[16\/9\] {
    aspect-ratio: 16 / 9;
  }

  .size-1 {
    width: var(--spacing);
    height: var(--spacing);
  }

  .size-1\.5 {
    width: calc(var(--spacing) * 1.5);
    height: calc(var(--spacing) * 1.5);
  }

  .size-3\.5 {
    width: calc(var(--spacing) * 3.5);
    height: calc(var(--spacing) * 3.5);
  }

  .size-4 {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  .size-4\.5 {
    width: calc(var(--spacing) * 4.5);
    height: calc(var(--spacing) * 4.5);
  }

  .size-5 {
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
  }

  .size-6 {
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6);
  }

  .size-7 {
    width: calc(var(--spacing) * 7);
    height: calc(var(--spacing) * 7);
  }

  .size-8 {
    width: calc(var(--spacing) * 8);
    height: calc(var(--spacing) * 8);
  }

  .size-9 {
    width: calc(var(--spacing) * 9);
    height: calc(var(--spacing) * 9);
  }

  .size-10 {
    width: calc(var(--spacing) * 10);
    height: calc(var(--spacing) * 10);
  }

  .size-11 {
    width: calc(var(--spacing) * 11);
    height: calc(var(--spacing) * 11);
  }

  .size-12 {
    width: calc(var(--spacing) * 12);
    height: calc(var(--spacing) * 12);
  }

  .size-13 {
    width: calc(var(--spacing) * 13);
    height: calc(var(--spacing) * 13);
  }

  .size-14 {
    width: calc(var(--spacing) * 14);
    height: calc(var(--spacing) * 14);
  }

  .size-16 {
    width: calc(var(--spacing) * 16);
    height: calc(var(--spacing) * 16);
  }

  .size-\[18px\] {
    width: 18px;
    height: 18px;
  }

  .size-\[22px\] {
    width: 22px;
    height: 22px;
  }

  .size-\[26px\] {
    width: 26px;
    height: 26px;
  }

  .size-\[30px\] {
    width: 30px;
    height: 30px;
  }

  .size-\[34px\] {
    width: 34px;
    height: 34px;
  }

  .size-full {
    width: 100%;
    height: 100%;
  }

  .h-1\.5 {
    height: calc(var(--spacing) * 1.5);
  }

  .h-2 {
    height: calc(var(--spacing) * 2);
  }

  .h-3\.5 {
    height: calc(var(--spacing) * 3.5);
  }

  .h-4 {
    height: calc(var(--spacing) * 4);
  }

  .h-5 {
    height: calc(var(--spacing) * 5);
  }

  .h-6 {
    height: calc(var(--spacing) * 6);
  }

  .h-7 {
    height: calc(var(--spacing) * 7);
  }

  .h-8 {
    height: calc(var(--spacing) * 8);
  }

  .h-9 {
    height: calc(var(--spacing) * 9);
  }

  .h-10 {
    height: calc(var(--spacing) * 10);
  }

  .h-11 {
    height: calc(var(--spacing) * 11);
  }

  .h-13 {
    height: calc(var(--spacing) * 13);
  }

  .h-14 {
    height: calc(var(--spacing) * 14);
  }

  .h-24 {
    height: calc(var(--spacing) * 24);
  }

  .h-40 {
    height: calc(var(--spacing) * 40);
  }

  .h-\[120px\] {
    height: 120px;
  }

  .h-auto {
    height: auto;
  }

  .h-full {
    height: 100%;
  }

  .h-px {
    height: 1px;
  }

  .max-h-32 {
    max-height: calc(var(--spacing) * 32);
  }

  .max-h-60 {
    max-height: calc(var(--spacing) * 60);
  }

  .max-h-\[560px\] {
    max-height: 560px;
  }

  .min-h-5 {
    min-height: calc(var(--spacing) * 5);
  }

  .min-h-7 {
    min-height: calc(var(--spacing) * 7);
  }

  .min-h-8 {
    min-height: calc(var(--spacing) * 8);
  }

  .min-h-9 {
    min-height: calc(var(--spacing) * 9);
  }

  .min-h-10 {
    min-height: calc(var(--spacing) * 10);
  }

  .min-h-11 {
    min-height: calc(var(--spacing) * 11);
  }

  .min-h-12 {
    min-height: calc(var(--spacing) * 12);
  }

  .min-h-16 {
    min-height: calc(var(--spacing) * 16);
  }

  .min-h-40 {
    min-height: calc(var(--spacing) * 40);
  }

  .min-h-\[60vh\] {
    min-height: 60vh;
  }

  .min-h-\[75vh\] {
    min-height: 75vh;
  }

  .min-h-\[260px\] {
    min-height: 260px;
  }

  .min-h-\[320px\] {
    min-height: 320px;
  }

  .min-h-full {
    min-height: 100%;
  }

  .min-h-screen {
    min-height: 100vh;
  }

  .w-3\.5 {
    width: calc(var(--spacing) * 3.5);
  }

  .w-4 {
    width: calc(var(--spacing) * 4);
  }

  .w-6 {
    width: calc(var(--spacing) * 6);
  }

  .w-7 {
    width: calc(var(--spacing) * 7);
  }

  .w-8 {
    width: calc(var(--spacing) * 8);
  }

  .w-9 {
    width: calc(var(--spacing) * 9);
  }

  .w-12 {
    width: calc(var(--spacing) * 12);
  }

  .w-16 {
    width: calc(var(--spacing) * 16);
  }

  .w-24 {
    width: calc(var(--spacing) * 24);
  }

  .w-40 {
    width: calc(var(--spacing) * 40);
  }

  .w-48 {
    width: calc(var(--spacing) * 48);
  }

  .w-64 {
    width: calc(var(--spacing) * 64);
  }

  .w-87 {
    width: calc(var(--spacing) * 87);
  }

  .w-\[115px\] {
    width: 115px;
  }

  .w-\[120px\] {
    width: 120px;
  }

  .w-\[170px\] {
    width: 170px;
  }

  .w-\[180px\] {
    width: 180px;
  }

  .w-\[185px\] {
    width: 185px;
  }

  .w-\[215px\] {
    width: 215px;
  }

  .w-\[225px\] {
    width: 225px;
  }

  .w-\[245px\] {
    width: 245px;
  }

  .w-\[325px\] {
    width: 325px;
  }

  .w-\[1660px\] {
    width: 1660px;
  }

  .w-auto {
    width: auto;
  }

  .w-fit {
    width: fit-content;
  }

  .w-full {
    width: 100%;
  }

  .w-px {
    width: 1px;
  }

  .max-w-2xl {
    max-width: var(--container-2xl);
  }

  .max-w-3xl {
    max-width: var(--container-3xl);
  }

  .max-w-4xl {
    max-width: var(--container-4xl);
  }

  .max-w-6xl {
    max-width: var(--container-6xl);
  }

  .max-w-48 {
    max-width: calc(var(--spacing) * 48);
  }

  .max-w-900 {
    max-width: calc(var(--spacing) * 900);
  }

  .max-w-\[85\%\] {
    max-width: 85%;
  }

  .max-w-\[380px\] {
    max-width: 380px;
  }

  .max-w-\[460px\] {
    max-width: 460px;
  }

  .max-w-\[640px\] {
    max-width: 640px;
  }

  .max-w-\[680px\] {
    max-width: 680px;
  }

  .max-w-\[720px\] {
    max-width: 720px;
  }

  .max-w-\[760px\] {
    max-width: 760px;
  }

  .max-w-\[820px\] {
    max-width: 820px;
  }

  .max-w-\[850px\] {
    max-width: 850px;
  }

  .max-w-\[880px\] {
    max-width: 880px;
  }

  .max-w-\[900px\] {
    max-width: 900px;
  }

  .max-w-\[920px\] {
    max-width: 920px;
  }

  .max-w-\[1050px\] {
    max-width: 1050px;
  }

  .max-w-\[1120px\] {
    max-width: 1120px;
  }

  .max-w-\[1160px\] {
    max-width: 1160px;
  }

  .max-w-\[1400px\] {
    max-width: 1400px;
  }

  .max-w-\[1480px\] {
    max-width: 1480px;
  }

  .max-w-full {
    max-width: 100%;
  }

  .max-w-md {
    max-width: var(--container-md);
  }

  .max-w-sm {
    max-width: var(--container-sm);
  }

  .min-w-0 {
    min-width: 0;
  }

  .min-w-4 {
    min-width: calc(var(--spacing) * 4);
  }

  .min-w-8 {
    min-width: calc(var(--spacing) * 8);
  }

  .min-w-24 {
    min-width: calc(var(--spacing) * 24);
  }

  .min-w-32 {
    min-width: calc(var(--spacing) * 32);
  }

  .min-w-\[560px\] {
    min-width: 560px;
  }

  .min-w-\[580px\] {
    min-width: 580px;
  }

  .min-w-\[760px\] {
    min-width: 760px;
  }

  .min-w-\[820px\] {
    min-width: 820px;
  }

  .flex-1 {
    flex: 1;
  }

  .shrink {
    flex-shrink: 1;
  }

  .shrink-0 {
    flex-shrink: 0;
  }

  .grow {
    flex-grow: 1;
  }

  .table-fixed {
    table-layout: fixed;
  }

  .border-collapse {
    border-collapse: collapse;
  }

  .-translate-x-1 {
    --tw-translate-x: calc(var(--spacing) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-y-1 {
    --tw-translate-y: calc(var(--spacing) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .transform {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .animate-pulse {
    animation: var(--animate-pulse);
  }

  .animate-spin {
    animation: var(--animate-spin);
  }

  .cursor-pointer {
    cursor: pointer;
  }

  .cursor-text {
    cursor: text;
  }

  .resize {
    resize: both;
  }

  .resize-none {
    resize: none;
  }

  .scroll-mt-20 {
    scroll-margin-top: calc(var(--spacing) * 20);
  }

  .scroll-mt-24 {
    scroll-margin-top: calc(var(--spacing) * 24);
  }

  .list-inside {
    list-style-position: inside;
  }

  .list-disc {
    list-style-type: disc;
  }

  .list-none {
    list-style-type: none;
  }

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

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

  .flex-col {
    flex-direction: column;
  }

  .flex-col-reverse {
    flex-direction: column-reverse;
  }

  .flex-row {
    flex-direction: row;
  }

  .flex-wrap {
    flex-wrap: wrap;
  }

  .place-items-center {
    place-items: center;
  }

  .items-baseline {
    align-items: baseline;
  }

  .items-center {
    align-items: center;
  }

  .items-end {
    align-items: flex-end;
  }

  .items-start {
    align-items: flex-start;
  }

  .justify-between {
    justify-content: space-between;
  }

  .justify-center {
    justify-content: center;
  }

  .justify-end {
    justify-content: flex-end;
  }

  .justify-start {
    justify-content: flex-start;
  }

  .gap-0 {
    gap: 0;
  }

  .gap-0\.5 {
    gap: calc(var(--spacing) * .5);
  }

  .gap-1 {
    gap: var(--spacing);
  }

  .gap-1\.5 {
    gap: calc(var(--spacing) * 1.5);
  }

  .gap-1\.5\! {
    gap: calc(var(--spacing) * 1.5) !important;
  }

  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }

  .gap-2\.5 {
    gap: calc(var(--spacing) * 2.5);
  }

  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }

  .gap-3\.5 {
    gap: calc(var(--spacing) * 3.5);
  }

  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }

  .gap-5 {
    gap: calc(var(--spacing) * 5);
  }

  .gap-6 {
    gap: calc(var(--spacing) * 6);
  }

  .gap-7 {
    gap: calc(var(--spacing) * 7);
  }

  .gap-12 {
    gap: calc(var(--spacing) * 12);
  }

  .gap-37 {
    gap: calc(var(--spacing) * 37);
  }

  :where(.space-y-0 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block: 0;
  }

  :where(.space-y-1 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(var(--spacing) * var(--tw-space-y-reverse));
    margin-block-end: calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-1\.5 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-2 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-2\.5 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 2.5) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 2.5) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-3 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-4 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-5 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-8 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-9 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 9) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 9) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-10 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 10) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 10) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-12 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 12) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 12) * calc(1 - var(--tw-space-y-reverse)));
  }

  .gap-x-2 {
    column-gap: calc(var(--spacing) * 2);
  }

  .gap-x-2\.5 {
    column-gap: calc(var(--spacing) * 2.5);
  }

  .gap-x-3 {
    column-gap: calc(var(--spacing) * 3);
  }

  .gap-x-4 {
    column-gap: calc(var(--spacing) * 4);
  }

  .gap-x-5 {
    column-gap: calc(var(--spacing) * 5);
  }

  .gap-x-6 {
    column-gap: calc(var(--spacing) * 6);
  }

  .gap-x-8 {
    column-gap: calc(var(--spacing) * 8);
  }

  :where(.-space-x-1\.5 > :not(:last-child)) {
    --tw-space-x-reverse: 0;
    margin-inline-start: calc(calc(var(--spacing) * -1.5) * var(--tw-space-x-reverse));
    margin-inline-end: calc(calc(var(--spacing) * -1.5) * calc(1 - var(--tw-space-x-reverse)));
  }

  :where(.-space-x-2 > :not(:last-child)) {
    --tw-space-x-reverse: 0;
    margin-inline-start: calc(calc(var(--spacing) * -2) * var(--tw-space-x-reverse));
    margin-inline-end: calc(calc(var(--spacing) * -2) * calc(1 - var(--tw-space-x-reverse)));
  }

  .gap-y-1 {
    row-gap: var(--spacing);
  }

  .gap-y-1\.5 {
    row-gap: calc(var(--spacing) * 1.5);
  }

  .gap-y-2 {
    row-gap: calc(var(--spacing) * 2);
  }

  .gap-y-2\.5 {
    row-gap: calc(var(--spacing) * 2.5);
  }

  .gap-y-3 {
    row-gap: calc(var(--spacing) * 3);
  }

  .gap-y-4 {
    row-gap: calc(var(--spacing) * 4);
  }

  .self-center {
    align-self: center;
  }

  .self-start {
    align-self: flex-start;
  }

  .truncate {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .overflow-hidden {
    overflow: hidden;
  }

  .overflow-x-auto {
    overflow-x: auto;
  }

  .overflow-x-hidden {
    overflow-x: hidden;
  }

  .overflow-y-auto {
    overflow-y: auto;
  }

  .rounded {
    border-radius: .25rem;
  }

  .rounded-2xl {
    border-radius: var(--radius-2xl);
  }

  .rounded-\[8px\] {
    border-radius: 8px;
  }

  .rounded-\[14px\] {
    border-radius: 14px;
  }

  .rounded-\[min\(var\(--radius-md\)\,10px\)\] {
    border-radius: min(var(--radius-md), 10px);
  }

  .rounded-\[min\(var\(--radius-md\)\,12px\)\] {
    border-radius: min(var(--radius-md), 12px);
  }

  .rounded-full {
    border-radius: 3.40282e38px;
  }

  .rounded-lg {
    border-radius: var(--radius-lg);
  }

  .rounded-md {
    border-radius: var(--radius-md);
  }

  .rounded-none {
    border-radius: 0;
  }

  .rounded-xl {
    border-radius: var(--radius-xl);
  }

  .rounded-b-xl {
    border-bottom-right-radius: var(--radius-xl);
    border-bottom-left-radius: var(--radius-xl);
  }

  .rounded-br-md {
    border-bottom-right-radius: var(--radius-md);
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .border-0 {
    border-style: var(--tw-border-style);
    border-width: 0;
  }

  .border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px;
  }

  .border-y {
    border-block-style: var(--tw-border-style);
    border-block-width: 1px;
  }

  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-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-l {
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
  }

  .border-l-2 {
    border-left-style: var(--tw-border-style);
    border-left-width: 2px;
  }

  .border-dashed {
    --tw-border-style: dashed;
    border-style: dashed;
  }

  .border-border {
    border-color: var(--border);
  }

  .border-border\/40 {
    border-color: var(--border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-border\/40 {
      border-color: color-mix(in oklab, var(--border) 40%, transparent);
    }
  }

  .border-border\/50 {
    border-color: var(--border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-border\/50 {
      border-color: color-mix(in oklab, var(--border) 50%, transparent);
    }
  }

  .border-border\/60 {
    border-color: var(--border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-border\/60 {
      border-color: color-mix(in oklab, var(--border) 60%, transparent);
    }
  }

  .border-border\/70 {
    border-color: var(--border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-border\/70 {
      border-color: color-mix(in oklab, var(--border) 70%, transparent);
    }
  }

  .border-card {
    border-color: var(--card);
  }

  .border-destructive\/40 {
    border-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-destructive\/40 {
      border-color: color-mix(in oklab, var(--destructive) 40%, transparent);
    }
  }

  .border-input {
    border-color: var(--input);
  }

  .border-primary {
    border-color: var(--primary);
  }

  .border-primary\/20 {
    border-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-primary\/20 {
      border-color: color-mix(in oklab, var(--primary) 20%, transparent);
    }
  }

  .border-primary\/30 {
    border-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-primary\/30 {
      border-color: color-mix(in oklab, var(--primary) 30%, transparent);
    }
  }

  .border-primary\/40 {
    border-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-primary\/40 {
      border-color: color-mix(in oklab, var(--primary) 40%, transparent);
    }
  }

  .border-transparent {
    border-color: #0000;
  }

  .bg-amber-500\/10 {
    background-color: #f99c001a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-amber-500\/10 {
      background-color: color-mix(in oklab, var(--color-amber-500) 10%, transparent);
    }
  }

  .bg-background {
    background-color: var(--background);
  }

  .bg-black {
    background-color: var(--color-black);
  }

  .bg-border {
    background-color: var(--border);
  }

  .bg-card {
    background-color: var(--card);
  }

  .bg-card\/60 {
    background-color: var(--card);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-card\/60 {
      background-color: color-mix(in oklab, var(--card) 60%, transparent);
    }
  }

  .bg-destructive {
    background-color: var(--destructive);
  }

  .bg-destructive\/10 {
    background-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-destructive\/10 {
      background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
    }
  }

  .bg-foreground {
    background-color: var(--foreground);
  }

  .bg-muted {
    background-color: var(--muted);
  }

  .bg-muted-foreground {
    background-color: var(--muted-foreground);
  }

  .bg-muted\/30 {
    background-color: var(--muted);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-muted\/30 {
      background-color: color-mix(in oklab, var(--muted) 30%, transparent);
    }
  }

  .bg-muted\/40 {
    background-color: var(--muted);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-muted\/40 {
      background-color: color-mix(in oklab, var(--muted) 40%, transparent);
    }
  }

  .bg-muted\/50 {
    background-color: var(--muted);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-muted\/50 {
      background-color: color-mix(in oklab, var(--muted) 50%, transparent);
    }
  }

  .bg-muted\/60 {
    background-color: var(--muted);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-muted\/60 {
      background-color: color-mix(in oklab, var(--muted) 60%, transparent);
    }
  }

  .bg-muted\/70 {
    background-color: var(--muted);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-muted\/70 {
      background-color: color-mix(in oklab, var(--muted) 70%, transparent);
    }
  }

  .bg-popover {
    background-color: var(--popover);
  }

  .bg-primary {
    background-color: var(--primary);
  }

  .bg-primary\/5 {
    background-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-primary\/5 {
      background-color: color-mix(in oklab, var(--primary) 5%, transparent);
    }
  }

  .bg-primary\/6 {
    background-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-primary\/6 {
      background-color: color-mix(in oklab, var(--primary) 6%, transparent);
    }
  }

  .bg-primary\/10 {
    background-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-primary\/10 {
      background-color: color-mix(in oklab, var(--primary) 10%, transparent);
    }
  }

  .bg-primary\/60 {
    background-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-primary\/60 {
      background-color: color-mix(in oklab, var(--primary) 60%, transparent);
    }
  }

  .bg-primary\/80 {
    background-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-primary\/80 {
      background-color: color-mix(in oklab, var(--primary) 80%, transparent);
    }
  }

  .bg-primary\/\[0\.07\] {
    background-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-primary\/\[0\.07\] {
      background-color: color-mix(in oklab, var(--primary) 7.0%, transparent);
    }
  }

  .bg-success {
    background-color: var(--success);
  }

  .bg-transparent {
    background-color: #0000;
  }

  .bg-white {
    background-color: var(--color-white);
  }

  .bg-clip-padding {
    background-clip: padding-box;
  }

  .fill-current {
    fill: currentColor;
  }

  .object-contain {
    object-fit: contain;
  }

  .object-cover {
    object-fit: cover;
  }

  .object-right {
    object-position: right;
  }

  .object-top {
    object-position: top;
  }

  .p-0 {
    padding: 0;
  }

  .p-0\.5 {
    padding: calc(var(--spacing) * .5);
  }

  .p-1 {
    padding: var(--spacing);
  }

  .p-2 {
    padding: calc(var(--spacing) * 2);
  }

  .p-3 {
    padding: calc(var(--spacing) * 3);
  }

  .p-3\.5 {
    padding: calc(var(--spacing) * 3.5);
  }

  .p-4 {
    padding: calc(var(--spacing) * 4);
  }

  .p-5 {
    padding: calc(var(--spacing) * 5);
  }

  .p-6 {
    padding: calc(var(--spacing) * 6);
  }

  .p-7 {
    padding: calc(var(--spacing) * 7);
  }

  .p-8 {
    padding: calc(var(--spacing) * 8);
  }

  .p-9 {
    padding: calc(var(--spacing) * 9);
  }

  .p-10 {
    padding: calc(var(--spacing) * 10);
  }

  .px-1 {
    padding-inline: var(--spacing);
  }

  .px-1\.5 {
    padding-inline: calc(var(--spacing) * 1.5);
  }

  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }

  .px-2\.5 {
    padding-inline: calc(var(--spacing) * 2.5);
  }

  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }

  .px-3\.5 {
    padding-inline: calc(var(--spacing) * 3.5);
  }

  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }

  .px-4\.5 {
    padding-inline: calc(var(--spacing) * 4.5);
  }

  .px-5 {
    padding-inline: calc(var(--spacing) * 5);
  }

  .px-5\! {
    padding-inline: calc(var(--spacing) * 5) !important;
  }

  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }

  .px-7 {
    padding-inline: calc(var(--spacing) * 7);
  }

  .py-0 {
    padding-block: 0;
  }

  .py-0\.5 {
    padding-block: calc(var(--spacing) * .5);
  }

  .py-1 {
    padding-block: var(--spacing);
  }

  .py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5);
  }

  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }

  .py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5);
  }

  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }

  .py-3\.5 {
    padding-block: calc(var(--spacing) * 3.5);
  }

  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }

  .py-4\.5 {
    padding-block: calc(var(--spacing) * 4.5);
  }

  .py-5 {
    padding-block: calc(var(--spacing) * 5);
  }

  .py-6 {
    padding-block: calc(var(--spacing) * 6);
  }

  .py-7 {
    padding-block: calc(var(--spacing) * 7);
  }

  .py-8 {
    padding-block: calc(var(--spacing) * 8);
  }

  .py-10 {
    padding-block: calc(var(--spacing) * 10);
  }

  .py-12 {
    padding-block: calc(var(--spacing) * 12);
  }

  .py-14 {
    padding-block: calc(var(--spacing) * 14);
  }

  .py-16 {
    padding-block: calc(var(--spacing) * 16);
  }

  .py-20 {
    padding-block: calc(var(--spacing) * 20);
  }

  .py-24 {
    padding-block: calc(var(--spacing) * 24);
  }

  .py-149 {
    padding-block: calc(var(--spacing) * 149);
  }

  .py-px {
    padding-block: 1px;
  }

  .pt-2 {
    padding-top: calc(var(--spacing) * 2);
  }

  .pt-3 {
    padding-top: calc(var(--spacing) * 3);
  }

  .pt-4 {
    padding-top: calc(var(--spacing) * 4);
  }

  .pt-5 {
    padding-top: calc(var(--spacing) * 5);
  }

  .pt-6 {
    padding-top: calc(var(--spacing) * 6);
  }

  .pt-9 {
    padding-top: calc(var(--spacing) * 9);
  }

  .pr-2 {
    padding-right: calc(var(--spacing) * 2);
  }

  .pr-3 {
    padding-right: calc(var(--spacing) * 3);
  }

  .pr-8 {
    padding-right: calc(var(--spacing) * 8);
  }

  .pb-1 {
    padding-bottom: var(--spacing);
  }

  .pb-2 {
    padding-bottom: calc(var(--spacing) * 2);
  }

  .pb-3 {
    padding-bottom: calc(var(--spacing) * 3);
  }

  .pb-7 {
    padding-bottom: calc(var(--spacing) * 7);
  }

  .pb-8 {
    padding-bottom: calc(var(--spacing) * 8);
  }

  .pb-9 {
    padding-bottom: calc(var(--spacing) * 9);
  }

  .pb-11 {
    padding-bottom: calc(var(--spacing) * 11);
  }

  .pb-13 {
    padding-bottom: calc(var(--spacing) * 13);
  }

  .pb-16 {
    padding-bottom: calc(var(--spacing) * 16);
  }

  .pl-1 {
    padding-left: var(--spacing);
  }

  .pl-2 {
    padding-left: calc(var(--spacing) * 2);
  }

  .pl-3 {
    padding-left: calc(var(--spacing) * 3);
  }

  .pl-3\.5 {
    padding-left: calc(var(--spacing) * 3.5);
  }

  .pl-6 {
    padding-left: calc(var(--spacing) * 6);
  }

  .pl-11 {
    padding-left: calc(var(--spacing) * 11);
  }

  .text-center {
    text-align: center;
  }

  .text-left {
    text-align: left;
  }

  .text-right {
    text-align: right;
  }

  .align-\[-2px\] {
    vertical-align: -2px;
  }

  .align-\[-3px\] {
    vertical-align: -3px;
  }

  .align-middle {
    vertical-align: middle;
  }

  .align-top {
    vertical-align: top;
  }

  .font-mono {
    font-family: var(--font-mono);
  }

  .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-4xl {
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
  }

  .text-5xl {
    font-size: var(--text-5xl);
    line-height: var(--tw-leading, var(--text-5xl--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-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }

  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }

  .text-\[0\.8rem\] {
    font-size: .8rem;
  }

  .text-\[9px\] {
    font-size: 9px;
  }

  .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;
  }

  .text-\[15px\] {
    font-size: 15px;
  }

  .text-\[31px\] {
    font-size: 31px;
  }

  .leading-4 {
    --tw-leading: calc(var(--spacing) * 4);
    line-height: calc(var(--spacing) * 4);
  }

  .leading-5 {
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
  }

  .leading-6 {
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
  }

  .leading-7 {
    --tw-leading: calc(var(--spacing) * 7);
    line-height: calc(var(--spacing) * 7);
  }

  .leading-8 {
    --tw-leading: calc(var(--spacing) * 8);
    line-height: calc(var(--spacing) * 8);
  }

  .leading-\[1\.15\] {
    --tw-leading: 1.15;
    line-height: 1.15;
  }

  .leading-\[1\.22\] {
    --tw-leading: 1.22;
    line-height: 1.22;
  }

  .leading-none {
    --tw-leading: 1;
    line-height: 1;
  }

  .leading-normal {
    --tw-leading: var(--leading-normal);
    line-height: var(--leading-normal);
  }

  .leading-relaxed {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }

  .leading-snug {
    --tw-leading: var(--leading-snug);
    line-height: var(--leading-snug);
  }

  .font-black {
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
  }

  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }

  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  .font-normal {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
  }

  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }

  .tracking-\[\.13em\] {
    --tw-tracking: .13em;
    letter-spacing: .13em;
  }

  .tracking-\[0\.2em\] {
    --tw-tracking: .2em;
    letter-spacing: .2em;
  }

  .tracking-\[0\.16em\] {
    --tw-tracking: .16em;
    letter-spacing: .16em;
  }

  .tracking-tight {
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }

  .tracking-wide {
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
  }

  .tracking-widest {
    --tw-tracking: var(--tracking-widest);
    letter-spacing: var(--tracking-widest);
  }

  .text-balance {
    text-wrap: balance;
  }

  .break-all {
    word-break: break-all;
  }

  .whitespace-nowrap {
    white-space: nowrap;
  }

  .whitespace-pre-wrap {
    white-space: pre-wrap;
  }

  .text-amber-600 {
    color: var(--color-amber-600);
  }

  .text-background {
    color: var(--background);
  }

  .text-destructive {
    color: var(--destructive);
  }

  .text-foreground {
    color: var(--foreground);
  }

  .text-foreground\/75 {
    color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-foreground\/75 {
      color: color-mix(in oklab, var(--foreground) 75%, transparent);
    }
  }

  .text-foreground\/80 {
    color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-foreground\/80 {
      color: color-mix(in oklab, var(--foreground) 80%, transparent);
    }
  }

  .text-foreground\/85 {
    color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-foreground\/85 {
      color: color-mix(in oklab, var(--foreground) 85%, transparent);
    }
  }

  .text-foreground\/90 {
    color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-foreground\/90 {
      color: color-mix(in oklab, var(--foreground) 90%, transparent);
    }
  }

  .text-muted-foreground {
    color: var(--muted-foreground);
  }

  .text-muted-foreground\/40 {
    color: var(--muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-muted-foreground\/40 {
      color: color-mix(in oklab, var(--muted-foreground) 40%, transparent);
    }
  }

  .text-muted-foreground\/50 {
    color: var(--muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-muted-foreground\/50 {
      color: color-mix(in oklab, var(--muted-foreground) 50%, transparent);
    }
  }

  .text-muted-foreground\/60 {
    color: var(--muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-muted-foreground\/60 {
      color: color-mix(in oklab, var(--muted-foreground) 60%, transparent);
    }
  }

  .text-muted-foreground\/70 {
    color: var(--muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-muted-foreground\/70 {
      color: color-mix(in oklab, var(--muted-foreground) 70%, transparent);
    }
  }

  .text-muted-foreground\/80 {
    color: var(--muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-muted-foreground\/80 {
      color: color-mix(in oklab, var(--muted-foreground) 80%, transparent);
    }
  }

  .text-popover-foreground {
    color: var(--popover-foreground);
  }

  .text-primary {
    color: var(--primary);
  }

  .text-primary-foreground {
    color: var(--primary-foreground);
  }

  .text-primary\/90 {
    color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-primary\/90 {
      color: color-mix(in oklab, var(--primary) 90%, transparent);
    }
  }

  .text-slate-500 {
    color: var(--color-slate-500);
  }

  .text-success {
    color: var(--success);
  }

  .text-white {
    color: var(--color-white);
  }

  .text-white\/70 {
    color: #ffffffb3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/70 {
      color: color-mix(in oklab, var(--color-white) 70%, transparent);
    }
  }

  .text-white\/80 {
    color: #fffc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/80 {
      color: color-mix(in oklab, var(--color-white) 80%, transparent);
    }
  }

  .lowercase {
    text-transform: lowercase;
  }

  .uppercase {
    text-transform: uppercase;
  }

  .italic {
    font-style: italic;
  }

  .tabular-nums {
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, );
  }

  .underline {
    text-decoration-line: underline;
  }

  .decoration-border {
    -webkit-text-decoration-color: var(--border);
    text-decoration-color: var(--border);
  }

  .decoration-primary\/30 {
    -webkit-text-decoration-color: var(--primary);
    text-decoration-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .decoration-primary\/30 {
      -webkit-text-decoration-color: color-mix(in oklab, var(--primary) 30%, transparent);
      text-decoration-color: color-mix(in oklab, var(--primary) 30%, transparent);
    }
  }

  .underline-offset-2 {
    text-underline-offset: 2px;
  }

  .underline-offset-4 {
    text-underline-offset: 4px;
  }

  .antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .accent-\[var\(--primary\)\], .accent-primary {
    accent-color: var(--primary);
  }

  .opacity-60 {
    opacity: .6;
  }

  .opacity-70 {
    opacity: .7;
  }

  .opacity-80 {
    opacity: .8;
  }

  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_10px_32px_-8px_rgb\(23_43_80_\/_0\.22\)\] {
    --tw-shadow: 0 10px 32px -8px var(--tw-shadow-color, #172b5038);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_18px_40px_-20px_rgb\(0_28_92_\/_0\.45\)\] {
    --tw-shadow: 0 18px 40px -20px var(--tw-shadow-color, #001c5c73);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-lg {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-md {
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-none {
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-sm {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-xl {
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, #0000001a), 0 8px 10px -6px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring-0 {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring-1 {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-popover {
    --tw-shadow-color: var(--popover);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .shadow-popover {
      --tw-shadow-color: color-mix(in oklab, var(--popover) var(--tw-shadow-alpha), transparent);
    }
  }

  .ring-border\/50 {
    --tw-ring-color: var(--border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .ring-border\/50 {
      --tw-ring-color: color-mix(in oklab, var(--border) 50%, transparent);
    }
  }

  .ring-foreground {
    --tw-ring-color: var(--foreground);
  }

  .ring-primary {
    --tw-ring-color: var(--primary);
  }

  .outline-hidden {
    --tw-outline-style: none;
    outline-style: none;
  }

  @media (forced-colors: active) {
    .outline-hidden {
      outline-offset: 2px;
      outline: 2px solid #0000;
    }
  }

  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }

  .outline-primary {
    outline-color: var(--primary);
  }

  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .grayscale {
    --tw-grayscale: grayscale(100%);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .filter {
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .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));
  }

  .transition-opacity {
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-transform {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .duration-100 {
    --tw-duration: .1s;
    transition-duration: .1s;
  }

  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }

  .outline-none {
    --tw-outline-style: none;
    outline-style: none;
  }

  .select-all {
    -webkit-user-select: all;
    user-select: all;
  }

  .select-none {
    -webkit-user-select: none;
    user-select: none;
  }

  .\[app-\:��\4 \] {
    app-: ��;
  }

  .\[app-\:��\] {
    app-: ��;
  }

  .\[app-\:\4 �\4 \] {
    app-: �;
  }

  .\[app-\:\1f p\] {
    app-: p;
  }

  .\[instrumenta\:\2 6\] {
    instrumenta: 6;
  }

  .\[metatype\:�\5 r\] {
    metatype: �r;
  }

  .group-open\:rotate-45:is(:where(.group):is([open], :popover-open, :open) *) {
    rotate: 45deg;
  }

  @media (hover: hover) {
    .group-hover\:translate-x-0\.5:is(:where(.group):hover *) {
      --tw-translate-x: calc(var(--spacing) * .5);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .group-hover\:bg-primary:is(:where(.group):hover *) {
      background-color: var(--primary);
    }

    .group-hover\:text-primary:is(:where(.group):hover *) {
      color: var(--primary);
    }

    .group-hover\:text-white:is(:where(.group):hover *) {
      color: var(--color-white);
    }
  }

  .group-data-\[disabled\=true\]\:pointer-events-none:is(:where(.group)[data-disabled="true"] *) {
    pointer-events: none;
  }

  .group-data-\[disabled\=true\]\:opacity-50:is(:where(.group)[data-disabled="true"] *) {
    opacity: .5;
  }

  .peer-disabled\:cursor-not-allowed:is(:where(.peer):disabled ~ *) {
    cursor: not-allowed;
  }

  .peer-disabled\:opacity-50:is(:where(.peer):disabled ~ *) {
    opacity: .5;
  }

  .marker\:text-muted-foreground\/50 ::marker {
    color: var(--muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .marker\:text-muted-foreground\/50 ::marker {
      color: color-mix(in oklab, var(--muted-foreground) 50%, transparent);
    }
  }

  .marker\:text-muted-foreground\/50::marker {
    color: var(--muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .marker\:text-muted-foreground\/50::marker {
      color: color-mix(in oklab, var(--muted-foreground) 50%, transparent);
    }
  }

  .marker\:text-muted-foreground\/50 ::-webkit-details-marker {
    color: var(--muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .marker\:text-muted-foreground\/50 ::-webkit-details-marker {
      color: color-mix(in oklab, var(--muted-foreground) 50%, transparent);
    }
  }

  .marker\:text-muted-foreground\/50::-webkit-details-marker {
    color: var(--muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .marker\:text-muted-foreground\/50::-webkit-details-marker {
      color: color-mix(in oklab, var(--muted-foreground) 50%, transparent);
    }
  }

  .marker\:text-muted-foreground\/60 ::marker {
    color: var(--muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .marker\:text-muted-foreground\/60 ::marker {
      color: color-mix(in oklab, var(--muted-foreground) 60%, transparent);
    }
  }

  .marker\:text-muted-foreground\/60::marker {
    color: var(--muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .marker\:text-muted-foreground\/60::marker {
      color: color-mix(in oklab, var(--muted-foreground) 60%, transparent);
    }
  }

  .marker\:text-muted-foreground\/60 ::-webkit-details-marker {
    color: var(--muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .marker\:text-muted-foreground\/60 ::-webkit-details-marker {
      color: color-mix(in oklab, var(--muted-foreground) 60%, transparent);
    }
  }

  .marker\:text-muted-foreground\/60::-webkit-details-marker {
    color: var(--muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .marker\:text-muted-foreground\/60::-webkit-details-marker {
      color: color-mix(in oklab, var(--muted-foreground) 60%, transparent);
    }
  }

  .file\:inline-flex::file-selector-button {
    display: inline-flex;
  }

  .file\:h-6::file-selector-button {
    height: calc(var(--spacing) * 6);
  }

  .file\:border-0::file-selector-button {
    border-style: var(--tw-border-style);
    border-width: 0;
  }

  .file\:bg-transparent::file-selector-button {
    background-color: #0000;
  }

  .file\:text-sm::file-selector-button {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }

  .file\:font-medium::file-selector-button {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  .file\:text-foreground::file-selector-button {
    color: var(--foreground);
  }

  .placeholder\:text-muted-foreground::placeholder {
    color: var(--muted-foreground);
  }

  .placeholder\:text-muted-foreground\/60::placeholder {
    color: var(--muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .placeholder\:text-muted-foreground\/60::placeholder {
      color: color-mix(in oklab, var(--muted-foreground) 60%, transparent);
    }
  }

  .first\:border-t-0:first-child {
    border-top-style: var(--tw-border-style);
    border-top-width: 0;
  }

  .first\:pt-0:first-child {
    padding-top: 0;
  }

  .last\:border-0:last-child {
    border-style: var(--tw-border-style);
    border-width: 0;
  }

  .last\:border-r-0:last-child {
    border-right-style: var(--tw-border-style);
    border-right-width: 0;
  }

  .last\:border-b-0:last-child {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0;
  }

  .last\:pb-0:last-child {
    padding-bottom: 0;
  }

  .focus-within\:border-primary:focus-within {
    border-color: var(--primary);
  }

  @media (hover: hover) {
    .hover\:-translate-y-0\.5:hover {
      --tw-translate-y: calc(var(--spacing) * -.5);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .hover\:border-border:hover {
      border-color: var(--border);
    }

    .hover\:border-primary:hover, .hover\:border-primary\/40:hover {
      border-color: var(--primary);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-primary\/40:hover {
        border-color: color-mix(in oklab, var(--primary) 40%, transparent);
      }
    }

    .hover\:bg-destructive\/20:hover {
      background-color: var(--destructive);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-destructive\/20:hover {
        background-color: color-mix(in oklab, var(--destructive) 20%, transparent);
      }
    }

    .hover\:bg-foreground\/5:hover {
      background-color: var(--foreground);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-foreground\/5:hover {
        background-color: color-mix(in oklab, var(--foreground) 5%, transparent);
      }
    }

    .hover\:bg-muted:hover, .hover\:bg-muted\/4:hover {
      background-color: var(--muted);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-muted\/4:hover {
        background-color: color-mix(in oklab, var(--muted) 4%, transparent);
      }
    }

    .hover\:bg-muted\/30:hover {
      background-color: var(--muted);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-muted\/30:hover {
        background-color: color-mix(in oklab, var(--muted) 30%, transparent);
      }
    }

    .hover\:bg-muted\/40:hover {
      background-color: var(--muted);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-muted\/40:hover {
        background-color: color-mix(in oklab, var(--muted) 40%, transparent);
      }
    }

    .hover\:bg-muted\/50:hover {
      background-color: var(--muted);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-muted\/50:hover {
        background-color: color-mix(in oklab, var(--muted) 50%, transparent);
      }
    }

    .hover\:bg-primary\/10:hover {
      background-color: var(--primary);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-primary\/10:hover {
        background-color: color-mix(in oklab, var(--primary) 10%, transparent);
      }
    }

    .hover\:bg-primary\/80:hover {
      background-color: var(--primary);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-primary\/80:hover {
        background-color: color-mix(in oklab, var(--primary) 80%, transparent);
      }
    }

    .hover\:bg-primary\/85:hover {
      background-color: var(--primary);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-primary\/85:hover {
        background-color: color-mix(in oklab, var(--primary) 85%, transparent);
      }
    }

    .hover\:bg-primary\/\[0\.02\]:hover {
      background-color: var(--primary);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-primary\/\[0\.02\]:hover {
        background-color: color-mix(in oklab, var(--primary) 2%, transparent);
      }
    }

    .hover\:text-destructive:hover {
      color: var(--destructive);
    }

    .hover\:text-foreground:hover {
      color: var(--foreground);
    }

    .hover\:text-primary:hover {
      color: var(--primary);
    }

    .hover\:text-white:hover {
      color: var(--color-white);
    }

    .hover\:underline:hover {
      text-decoration-line: underline;
    }

    .hover\:decoration-primary:hover {
      -webkit-text-decoration-color: var(--primary);
      text-decoration-color: var(--primary);
    }

    .hover\:opacity-90:hover {
      opacity: .9;
    }

    .hover\:shadow-md:hover {
      --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }

  .focus\:border-primary:focus {
    border-color: var(--primary);
  }

  .focus\:border-primary\/50:focus {
    border-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus\:border-primary\/50:focus {
      border-color: color-mix(in oklab, var(--primary) 50%, transparent);
    }
  }

  .focus-visible\:border-destructive\/40:focus-visible {
    border-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus-visible\:border-destructive\/40:focus-visible {
      border-color: color-mix(in oklab, var(--destructive) 40%, transparent);
    }
  }

  .focus-visible\:border-primary:focus-visible {
    border-color: var(--primary);
  }

  .focus-visible\:border-ring:focus-visible {
    border-color: var(--ring);
  }

  .focus-visible\:ring-2:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    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\:ring-3:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    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\:ring-destructive\/20:focus-visible {
    --tw-ring-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus-visible\:ring-destructive\/20:focus-visible {
      --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
    }
  }

  .focus-visible\:ring-ring\/20:focus-visible {
    --tw-ring-color: var(--ring);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus-visible\:ring-ring\/20:focus-visible {
      --tw-ring-color: color-mix(in oklab, var(--ring) 20%, transparent);
    }
  }

  .focus-visible\:ring-ring\/50:focus-visible {
    --tw-ring-color: var(--ring);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus-visible\:ring-ring\/50:focus-visible {
      --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
    }
  }

  .focus-visible\:outline:focus-visible {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }

  .focus-visible\:outline-2:focus-visible {
    outline-style: var(--tw-outline-style);
    outline-width: 2px;
  }

  .focus-visible\:outline-offset-2:focus-visible {
    outline-offset: 2px;
  }

  .focus-visible\:outline-offset-4:focus-visible {
    outline-offset: 4px;
  }

  .focus-visible\:outline-primary:focus-visible {
    outline-color: var(--primary);
  }

  .active\:not-aria-\[haspopup\]\:translate-y-px:active:not([aria-haspopup]) {
    --tw-translate-y: 1px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .disabled\:pointer-events-none:disabled {
    pointer-events: none;
  }

  .disabled\:cursor-not-allowed:disabled {
    cursor: not-allowed;
  }

  .disabled\:bg-input\/50:disabled {
    background-color: var(--input);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .disabled\:bg-input\/50:disabled {
      background-color: color-mix(in oklab, var(--input) 50%, transparent);
    }
  }

  .disabled\:opacity-40:disabled {
    opacity: .4;
  }

  .disabled\:opacity-50:disabled {
    opacity: .5;
  }

  .disabled\:opacity-60:disabled {
    opacity: .6;
  }

  :where([data-slot="button-group"]) .in-data-\[slot\=button-group\]\:rounded-lg {
    border-radius: var(--radius-lg);
  }

  .has-data-\[icon\=\1d \3 �end\]\:pr-2:has([data-icon="\1d \3 �end"]) {
    padding-right: calc(var(--spacing) * 2);
  }

  .has-data-\[icon\=inline-end\]\:pr-1\.5:has([data-icon="inline-end"]) {
    padding-right: calc(var(--spacing) * 1.5);
  }

  .has-data-\[icon\=inline-end\]\:pr-2:has([data-icon="inline-end"]) {
    padding-right: calc(var(--spacing) * 2);
  }

  .has-data-\[icon\=inline-end\]\:pr-3:has([data-icon="inline-end"]) {
    padding-right: calc(var(--spacing) * 3);
  }

  .has-data-\[icon\=inline-start\]\:pl-1\.5:has([data-icon="inline-start"]) {
    padding-left: calc(var(--spacing) * 1.5);
  }

  .has-data-\[icon\=inline-start\]\:pl-2:has([data-icon="inline-start"]) {
    padding-left: calc(var(--spacing) * 2);
  }

  .has-data-\[icon\=inline-start\]\:pl-3:has([data-icon="inline-start"]) {
    padding-left: calc(var(--spacing) * 3);
  }

  .has-data-\[icon\=�\2 �end\]\:pr-2:has([data-icon="�\2 �end"]) {
    padding-right: calc(var(--spacing) * 2);
  }

  .aria-expanded\:bg-muted[aria-expanded="true"] {
    background-color: var(--muted);
  }

  .aria-expanded\:text-foreground[aria-expanded="true"] {
    color: var(--foreground);
  }

  .aria-invalid\:border-destructive[aria-invalid="true"] {
    border-color: var(--destructive);
  }

  .aria-invalid\:ring-2[aria-invalid="true"] {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .aria-invalid\:ring-3[aria-invalid="true"] {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .aria-invalid\:ring-destructive\/20[aria-invalid="true"] {
    --tw-ring-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .aria-invalid\:ring-destructive\/20[aria-invalid="true"] {
      --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
    }
  }

  .data-horizontal\:h-px[data-horizontal] {
    height: 1px;
  }

  .data-horizontal\:w-full[data-horizontal] {
    width: 100%;
  }

  .data-vertical\:w-px[data-vertical] {
    width: 1px;
  }

  .data-vertical\:self-stretch[data-vertical] {
    align-self: stretch;
  }

  @media not (min-width: 700px) {
    .max-\[700px\]\:-top-2 {
      top: calc(var(--spacing) * -2);
    }

    .max-\[700px\]\:top-\[86px\] {
      top: 86px;
    }

    .max-\[700px\]\:-right-2 {
      right: calc(var(--spacing) * -2);
    }

    .max-\[700px\]\:right-4 {
      right: calc(var(--spacing) * 4);
    }

    .max-\[700px\]\:block {
      display: block;
    }

    .max-\[700px\]\:hidden {
      display: none;
    }

    .max-\[700px\]\:size-6 {
      width: calc(var(--spacing) * 6);
      height: calc(var(--spacing) * 6);
    }

    .max-\[700px\]\:w-auto {
      width: auto;
    }

    .max-\[700px\]\:rounded-full {
      border-radius: 3.40282e38px;
    }

    .max-\[700px\]\:bg-primary {
      background-color: var(--primary);
    }

    .max-\[700px\]\:px-4 {
      padding-inline: calc(var(--spacing) * 4);
    }

    .max-\[700px\]\:py-3 {
      padding-block: calc(var(--spacing) * 3);
    }

    .max-\[700px\]\:text-sm {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }

    .max-\[700px\]\:font-semibold {
      --tw-font-weight: var(--font-weight-semibold);
      font-weight: var(--font-weight-semibold);
    }

    .max-\[700px\]\:text-primary-foreground {
      color: var(--primary-foreground);
    }
  }

  @media (min-width: 40rem) {
    .sm\:-left-\[39px\] {
      left: -39px;
    }

    .sm\:block {
      display: block;
    }

    .sm\:flex {
      display: flex;
    }

    .sm\:hidden {
      display: none;
    }

    .sm\:inline {
      display: inline;
    }

    .sm\:inline-block {
      display: inline-block;
    }

    .sm\:inline-flex {
      display: inline-flex;
    }

    .sm\:size-6 {
      width: calc(var(--spacing) * 6);
      height: calc(var(--spacing) * 6);
    }

    .sm\:size-8 {
      width: calc(var(--spacing) * 8);
      height: calc(var(--spacing) * 8);
    }

    .sm\:w-auto {
      width: auto;
    }

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

    .sm\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sm\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .sm\:grid-cols-\[minmax\(0\,1fr\)_170px_170px_auto\] {
      grid-template-columns: minmax(0, 1fr) 170px 170px auto;
    }

    .sm\:grid-cols-\[minmax\(0\,1fr\)_190px_auto\] {
      grid-template-columns: minmax(0, 1fr) 190px auto;
    }

    .sm\:flex-row {
      flex-direction: row;
    }

    .sm\:items-center {
      align-items: center;
    }

    .sm\:justify-between {
      justify-content: space-between;
    }

    .sm\:p-6 {
      padding: calc(var(--spacing) * 6);
    }

    .sm\:px-2\.5 {
      padding-inline: calc(var(--spacing) * 2.5);
    }

    .sm\:px-5 {
      padding-inline: calc(var(--spacing) * 5);
    }

    .sm\:px-6 {
      padding-inline: calc(var(--spacing) * 6);
    }

    .sm\:px-7 {
      padding-inline: calc(var(--spacing) * 7);
    }

    .sm\:px-8 {
      padding-inline: calc(var(--spacing) * 8);
    }

    .sm\:py-14 {
      padding-block: calc(var(--spacing) * 14);
    }

    .sm\:pl-8 {
      padding-left: calc(var(--spacing) * 8);
    }

    .sm\:text-\[11px\] {
      font-size: 11px;
    }

    .sm\:text-\[15px\] {
      font-size: 15px;
    }

    .sm\:text-\[17px\] {
      font-size: 17px;
    }

    .sm\:text-\[28px\] {
      font-size: 28px;
    }

    .sm\:text-\[30px\] {
      font-size: 30px;
    }

    .sm\:text-\[39px\] {
      font-size: 39px;
    }
  }

  @media (min-width: 48rem) {
    .md\:col-span-2 {
      grid-column: span 2 / span 2;
    }

    .md\:mt-11 {
      margin-top: calc(var(--spacing) * 11);
    }

    .md\:inline {
      display: inline;
    }

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

    .md\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .md\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .md\:grid-cols-\[auto_1fr\] {
      grid-template-columns: auto 1fr;
    }

    .md\:p-6 {
      padding: calc(var(--spacing) * 6);
    }

    .md\:p-8 {
      padding: calc(var(--spacing) * 8);
    }

    .md\:px-6 {
      padding-inline: calc(var(--spacing) * 6);
    }

    .md\:py-9 {
      padding-block: calc(var(--spacing) * 9);
    }

    .md\:py-14 {
      padding-block: calc(var(--spacing) * 14);
    }

    .md\:py-17 {
      padding-block: calc(var(--spacing) * 17);
    }

    .md\:py-20 {
      padding-block: calc(var(--spacing) * 20);
    }

    .md\:pb-14 {
      padding-bottom: calc(var(--spacing) * 14);
    }

    .md\:text-5xl {
      font-size: var(--text-5xl);
      line-height: var(--tw-leading, var(--text-5xl--line-height));
    }

    .md\:text-sm {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }
  }

  @media (min-width: 64rem) {
    .lg\:col-span-1 {
      grid-column: span 1 / span 1;
    }

    .lg\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .lg\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .lg\:grid-cols-\[1fr_1fr_1\.55fr\] {
      grid-template-columns: 1fr 1fr 1.55fr;
    }

    .lg\:grid-cols-\[180px_minmax\(0\,1fr\)\] {
      grid-template-columns: 180px minmax(0, 1fr);
    }

    .lg\:flex-col {
      flex-direction: column;
    }

    .lg\:p-\[30px\] {
      padding: 30px;
    }

    .lg\:text-\[46px\] {
      font-size: 46px;
    }
  }

  @media (min-width: 80rem) {
    .xl\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .xl\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  .dark\:block:where(.dark, .dark *) {
    display: block;
  }

  .dark\:hidden:where(.dark, .dark *) {
    display: none;
  }

  .dark\:border-input:where(.dark, .dark *) {
    border-color: var(--input);
  }

  .dark\:bg-destructive\/20:where(.dark, .dark *) {
    background-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-destructive\/20:where(.dark, .dark *) {
      background-color: color-mix(in oklab, var(--destructive) 20%, transparent);
    }
  }

  .dark\:bg-input\/30:where(.dark, .dark *) {
    background-color: var(--input);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-input\/30:where(.dark, .dark *) {
      background-color: color-mix(in oklab, var(--input) 30%, transparent);
    }
  }

  @media (hover: hover) {
    .dark\:hover\:bg-destructive\/30:where(.dark, .dark *):hover {
      background-color: var(--destructive);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .dark\:hover\:bg-destructive\/30:where(.dark, .dark *):hover {
        background-color: color-mix(in oklab, var(--destructive) 30%, transparent);
      }
    }

    .dark\:hover\:bg-input\/50:where(.dark, .dark *):hover {
      background-color: var(--input);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .dark\:hover\:bg-input\/50:where(.dark, .dark *):hover {
        background-color: color-mix(in oklab, var(--input) 50%, transparent);
      }
    }

    .dark\:hover\:bg-muted\/50:where(.dark, .dark *):hover {
      background-color: var(--muted);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .dark\:hover\:bg-muted\/50:where(.dark, .dark *):hover {
        background-color: color-mix(in oklab, var(--muted) 50%, transparent);
      }
    }
  }

  .dark\:focus-visible\:ring-destructive\/40:where(.dark, .dark *):focus-visible {
    --tw-ring-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:focus-visible\:ring-destructive\/40:where(.dark, .dark *):focus-visible {
      --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
    }
  }

  .dark\:disabled\:bg-input\/80:where(.dark, .dark *):disabled {
    background-color: var(--input);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:disabled\:bg-input\/80:where(.dark, .dark *):disabled {
      background-color: color-mix(in oklab, var(--input) 80%, transparent);
    }
  }

  .dark\:aria-invalid\:border-destructive\/50:where(.dark, .dark *)[aria-invalid="true"] {
    border-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:aria-invalid\:border-destructive\/50:where(.dark, .dark *)[aria-invalid="true"] {
      border-color: color-mix(in oklab, var(--destructive) 50%, transparent);
    }
  }

  .dark\:aria-invalid\:ring-destructive\/40:where(.dark, .dark *)[aria-invalid="true"] {
    --tw-ring-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:aria-invalid\:ring-destructive\/40:where(.dark, .dark *)[aria-invalid="true"] {
      --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
    }
  }

  .\[\&_svg\]\:pointer-events-none svg {
    pointer-events: none;
  }

  .\[\&_svg\]\:shrink-0 svg {
    flex-shrink: 0;
  }

  .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-3 svg:not([class*="size-"]) {
    width: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 3);
  }

  .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-3\.5 svg:not([class*="size-"]) {
    width: calc(var(--spacing) * 3.5);
    height: calc(var(--spacing) * 3.5);
  }

  .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*="size-"]) {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  .\[\\u0026_svg\]\:pointer-events-none:is(u0026 svg) {
    pointer-events: none;
  }

  .\[\\u0026_svg\]\:shrink-0:is(u0026 svg) {
    flex-shrink: 0;
  }

  .\[\\u0026_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4:is(u0026 svg:not([class*="size-"])) {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  @media (hover: hover) {
    .\[a\]\:hover\:bg-primary\/80:is(a):hover {
      background-color: var(--primary);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .\[a\]\:hover\:bg-primary\/80:is(a):hover {
        background-color: color-mix(in oklab, var(--primary) 80%, transparent);
      }
    }
  }
}

:root {
  --white: #fff;
  --neutral-ink: #292e36;
  --brand: #3f66ff;
  --brand-foreground: var(--white);
  --brand-deep: var(--neutral-ink);
  --brand-light: var(--brand);
}

@supports (color: color-mix(in lab, red, red)) {
  :root {
    --brand-light: color-mix(in srgb, var(--brand) 35%, var(--white));
  }
}

:root {
  --background: #f8fafc;
  --foreground: var(--neutral-ink);
  --card: var(--white);
  --card-foreground: var(--foreground);
  --popover: var(--card);
  --popover-foreground: var(--foreground);
  --primary: var(--brand);
  --primary-foreground: var(--brand-foreground);
  --muted: #f5f6f8;
  --muted-foreground: #68717f;
  --accent: #e9edf2;
  --accent-foreground: var(--brand);
  --border: #e8eaee;
  --input: #dfe3e9;
  --ring: var(--brand);
  --destructive: #bc3544;
  --success: #23704f;
  --surface-hover: var(--foreground);
}

@supports (color: color-mix(in lab, red, red)) {
  :root {
    --surface-hover: color-mix(in srgb, var(--foreground) 3%, var(--card));
  }
}

:root {
  --selection: var(--primary);
  --selection-foreground: var(--foreground);
  --radius: .75rem;
  --radius-panel: 1rem;
  --radius-control: .65rem;
  --radius-badge: calc(var(--radius) * .42);
  --banner-gap: 16px;
  --section-padding: clamp(20px, 2.5vw, 32px);
  --duration-fast: .16s;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --shadow-color: var(--brand-deep);
}

@supports (color: color-mix(in lab, red, red)) {
  :root {
    --shadow-color: color-mix(in srgb, var(--brand-deep) 16%, transparent);
  }
}

:root {
  --shadow-soft: 0 8px 24px -16px var(--shadow-color);
  --shadow-popover: 0 16px 40px -12px var(--shadow-color);
  --field-focus-shadow: 0 0 0 2px var(--ring);
}

@supports (color: color-mix(in lab, red, red)) {
  :root {
    --field-focus-shadow: 0 0 0 2px color-mix(in srgb, var(--ring) 20%, transparent);
  }
}

:root {
  --site-rail: 236px;
  --site-navigation-height: 64px;
  --site-header-height: var(--site-navigation-height);
  --site-icon-size: 20px;
  --site-icon-stroke: 1.75;
  --site-icon-color: var(--navigation-foreground);
}

@supports (color: color-mix(in lab, red, red)) {
  :root {
    --site-icon-color: color-mix(in srgb, var(--navigation-foreground) 68%, var(--card));
  }
}

:root {
  --font-navigation: Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  --navigation-foreground: #20242a;
  --navigation-font-size: 14px;
  --navigation-font-weight: 400;
  --navigation-active-weight: 600;
  --navigation-line-height: 20px;
  --navigation-item-height: 44px;
  --navigation-item-radius: 9px;
  --navigation-label-size: 12px;
  --navigation-label-weight: 400;
  --badge-background: red;
  --badge-foreground: var(--white);
  --promotion-background: var(--foreground);
  --new-background: var(--badge-background);
  --new-foreground: var(--white);
  --footer-background: #000;
  --footer-foreground: var(--white);
  --footer-muted: #a3a3a3;
  --footer-link-hover: #8fa6ff;
}

html {
  scrollbar-color: var(--input) var(--background);
  scroll-behavior: smooth;
  font-family: Inter, PingFang SC, Microsoft YaHei, system-ui, sans-serif;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  min-width: 320px;
  line-height: 1.5;
}

@media (min-width: 981px) {
  body:has(.site-top-bar) {
    --site-header-height: calc(var(--site-navigation-height) + 40px);
  }
}

button, input {
  font: inherit;
}

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

img {
  max-width: 100%;
  display: block;
}

::selection {
  background: var(--footer-link-hover);
  color: var(--footer-background);
}

.site-masthead {
  z-index: 50;
  position: sticky;
  top: 0;
}

.site-top-bar {
  height: 40px;
  color: var(--brand-foreground);
  font-family: var(--font-navigation);
  background: linear-gradient(90deg, #0afdec, #8d28fc);
  font-size: 13px;
  line-height: 20px;
}

.site-top-bar-inner {
  justify-content: center;
  align-items: center;
  gap: 12px;
  width: min(100% - 48px, 1480px);
  height: 100%;
  margin-inline: auto;
  padding-inline: 36px;
  display: flex;
  position: relative;
}

.site-top-bar-link {
  justify-content: center;
  align-items: center;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
  display: flex;
}

.site-top-bar-label {
  border: 1px solid;
  border-radius: 4px;
  flex: none;
  padding: 0 5px;
  font-size: 10px;
  line-height: 16px;
}

.site-top-bar-link strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  max-width: 240px;
  font-weight: 600;
  overflow: hidden;
}

.site-top-bar-subtitle {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  max-width: 520px;
  overflow: hidden;
}

.site-top-bar-action {
  flex: none;
  align-items: center;
  gap: 4px;
  margin-left: 12px;
  font-size: 12px;
  display: inline-flex;
}

.site-top-bar-link:hover .site-top-bar-action {
  text-underline-offset: 3px;
  text-decoration: underline;
}

.site-top-bar-close {
  cursor: pointer;
  width: 32px;
  height: 32px;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 6px;
  place-items: center;
  display: grid;
  position: absolute;
  right: 0;
}

.site-header {
  height: var(--site-navigation-height);
  background: var(--card);
  border-bottom: 1px solid #0000;
}

.site-header, .site-sidebar, .site-footer {
  font-family: var(--font-navigation);
  -webkit-font-smoothing: antialiased;
}

.site-header-inner {
  align-items: center;
  gap: 12px;
  height: 100%;
  padding: 0 24px;
  display: flex;
  position: relative;
}

.site-wordmark {
  flex: none;
  align-items: center;
  height: 34px;
  display: inline-flex;
}

.site-wordmark img {
  border-radius: 9px;
  width: auto;
  height: 34px;
}

.site-desktop-navigation {
  white-space: nowrap;
  align-items: center;
  gap: clamp(12px, 1.35vw, 26px);
  min-width: 0;
  margin-left: 20px;
  display: none;
}

.site-desktop-navigation > a, .site-desktop-rank {
  height: 38px;
  color: var(--navigation-foreground);
  font-size: var(--navigation-font-size);
  font-weight: var(--navigation-font-weight);
  line-height: var(--navigation-line-height);
  align-items: center;
  gap: 3px;
  transition: color .16s;
  display: inline-flex;
}

.site-desktop-rank {
  cursor: pointer;
  background: none;
  border: 0;
  gap: 6px;
}

.site-desktop-rank > svg {
  width: 14px;
  height: 14px;
  color: var(--muted-foreground);
  transition: transform var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}

.site-desktop-rank:hover > svg, .site-desktop-rank[data-popup-open] > svg {
  color: var(--primary);
}

.site-desktop-rank[data-popup-open] > svg {
  transform: rotate(180deg);
}

.site-desktop-navigation > a:hover, .site-desktop-rank:hover, .site-desktop-navigation [aria-current="page"] {
  color: var(--primary);
}

.site-desktop-navigation [aria-current="page"] {
  font-weight: var(--navigation-active-weight);
}

.site-desktop-navigation > .site-header-news-link {
  padding-right: 28px;
}

.site-header-search {
  min-width: 0;
  max-width: 640px;
  height: 40px;
  margin-left: calc(var(--site-rail) - 38px);
  border: 1px solid var(--border);
  background: var(--muted);
  color: var(--muted-foreground);
  border-radius: 999px;
  flex: 1;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  display: flex;
}

.site-header-search:focus-within {
  border-color: var(--primary);
  background: var(--card);
  box-shadow: var(--field-focus-shadow);
}

.site-header-search > svg {
  width: var(--site-icon-size);
  height: var(--site-icon-size);
  stroke-width: var(--site-icon-stroke);
  color: var(--muted-foreground);
  flex: none;
}

.site-header-search input {
  min-width: 0;
  height: 100%;
  color: var(--foreground);
  background: none;
  outline: 0;
  flex: 1;
  font-size: 14px;
}

.site-header-search input::placeholder {
  color: var(--muted-foreground);
}

.site-header-search button {
  background: var(--brand);
  min-width: 72px;
  height: 32px;
  color: var(--brand-foreground);
  cursor: pointer;
  border-radius: 999px;
  flex: none;
  justify-content: center;
  align-items: center;
  margin-right: -11px;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
}

.site-header-search button:hover {
  background: var(--primary);
}

.site-header-search-button-icon {
  display: none;
}

.site-header-actions {
  flex: none;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  display: flex;
}

.site-header-text-link {
  color: var(--foreground);
  font-size: 14px;
  font-weight: var(--navigation-font-weight);
  white-space: nowrap;
  padding: 8px 7px;
}

.site-header-text-link:hover {
  color: var(--primary);
}

.site-header-submit {
  background: var(--brand);
  min-height: 36px;
  color: var(--brand-foreground);
  white-space: nowrap;
  cursor: pointer;
  border: 0;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
}

.site-header-submit:hover {
  opacity: .9;
}

.site-header-menu {
  color: var(--foreground);
}

.site-header-menu > svg {
  width: var(--site-icon-size);
  height: var(--site-icon-size);
}

.site-header-actions > button.site-header-menu {
  width: 36px;
  height: 36px;
  color: var(--muted-foreground);
  cursor: pointer;
  background: none;
  border: 0;
  place-items: center;
  display: grid;
}

.site-header-actions > button > svg {
  width: var(--site-icon-size);
  height: var(--site-icon-size);
}

.site-header-actions > button:hover {
  color: var(--primary);
}

@media (min-width: 981px) {
  .site-header-menu {
    display: none;
  }

  :is(body:has(main[data-site-layout="standalone"]) .site-desktop-navigation, body:has(main[data-site-layout="local-nav"]) .site-desktop-navigation, body:has(main[data-site-layout="editorial"]) .site-desktop-navigation) {
    display: flex;
  }

  body:has(main[data-site-layout="editorial"]) .site-desktop-navigation > a {
    font-size: 15px;
    font-weight: 500;
  }

  body:has(main[data-site-layout="editorial"]) .site-desktop-rank {
    font-size: 15px;
    font-weight: 500;
  }

  body:has(main[data-site-layout="editorial"]) .site-header-search {
    display: none;
  }

  body:has(main[data-site-layout="editorial"]) .site-header-text-link {
    display: none;
  }

  :is(body:has(main[data-site-layout="standalone"]) .site-header-search, body:has(main[data-site-layout="local-nav"]) .site-header-search) {
    display: none;
  }

  body:has(main[data-site-layout="standalone"]) .site-header-text-link {
    display: none;
  }

  body:has(main[data-site-layout="local-nav"]) .site-header-actions {
    gap: 4px;
  }

  @media (max-width: 1120px) {
    body:has(main[data-site-layout="editorial"]) .site-desktop-navigation {
      display: none;
    }

    body:has(main[data-site-layout="editorial"]) .site-header-search {
      margin-left: 12px;
      display: flex;
    }

    body:has(main[data-site-layout="editorial"]) .site-header-menu {
      display: inline-flex;
    }
  }
}

@media (max-width: 980px) {
  .site-header-search {
    margin-left: 12px;
  }
}

@media (max-width: 680px) {
  .site-wordmark, .site-wordmark img {
    width: 30px;
    height: 30px;
  }

  .site-header-search {
    height: 36px;
    margin-left: 8px;
    padding-inline: 10px;
  }

  .site-header-search > svg {
    display: none;
  }

  .site-header-search button {
    width: 30px;
    min-width: 30px;
    height: 28px;
    margin-right: -6px;
  }

  .site-header-search button span, .site-header-text-link {
    display: none;
  }

  .site-header-submit {
    min-height: 32px;
    padding-inline: 10px;
    font-size: 13px;
  }

  .site-header-actions {
    gap: 2px;
  }

  .site-header-actions > button.site-header-menu {
    width: 32px;
    height: 32px;
  }
}

@media (max-width: 480px) {
  .site-header-submit {
    display: none;
  }
}

.site-frame {
  grid-template-columns: var(--site-rail) minmax(0, 1fr);
  min-height: calc(100dvh - var(--site-header-height));
  display: grid;
}

.site-frame-content {
  min-width: 0;
}

.site-container {
  width: min(100% - 64px, 1480px);
  margin-inline: auto;
}

@media (max-width: 640px) {
  .site-container {
    width: min(100% - 32px, 1480px);
  }
}

main.site-main {
  padding: 0 0 40px;
}

.home-main {
  width: min(100% - 64px, 1480px);
  color: var(--foreground);
  margin-inline: auto;
  padding-block: 20px 64px;
  display: block;
}

@media (max-width: 680px) {
  .home-main {
    width: calc(100% - 32px);
    padding-block: 18px 40px;
  }
}

.site-sidebar {
  top: var(--site-header-height);
  width: var(--site-rail);
  height: calc(100dvh - var(--site-header-height));
  overscroll-behavior: contain;
  background: var(--card);
  scrollbar-width: thin;
  border-right: 0;
  flex-direction: column;
  align-self: start;
  gap: 0;
  padding: 12px 12px 16px;
  display: flex;
  position: sticky;
  overflow-y: auto;
}

@media (max-width: 980px) {
  .site-sidebar {
    display: none;
  }
}

.site-sidebar-brand {
  align-items: center;
  gap: 10px;
  padding: 2px 14px 14px;
  display: flex;
}

.site-sidebar-brand img {
  border-radius: 7px;
  width: 28px;
  height: 28px;
}

.site-sidebar-brand strong {
  letter-spacing: -.02em;
  font-size: 17px;
  font-weight: 700;
}

.site-sidebar-group {
  gap: 4px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  display: grid;
  position: relative;
}

.site-sidebar-group:after {
  content: "";
  background: var(--border);
  height: 1px;
  position: absolute;
  bottom: 0;
  left: 12px;
  right: 12px;
}

.site-sidebar-group:last-of-type:after {
  display: none;
}

.site-sidebar-label {
  letter-spacing: 0;
  line-height: 18px;
  font-size: var(--navigation-label-size);
  font-weight: var(--navigation-label-weight);
  color: var(--muted-foreground);
  padding: 1px 14px 6px;
}

.site-sidebar a:not(.site-sidebar-bottom a), .site-sidebar summary {
  border-radius: var(--navigation-item-radius);
  min-height: 44px;
  color: var(--navigation-foreground);
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  font-size: 14px;
  display: flex;
  position: relative;
}

.site-sidebar a:not(.site-sidebar-bottom a):hover, .site-sidebar summary:hover {
  background: var(--muted);
  color: var(--foreground);
}

.site-sidebar [aria-current="page"] {
  background: var(--accent);
  font-weight: var(--navigation-active-weight);
}

.site-sidebar-icon {
  width: var(--site-icon-size);
  height: var(--site-icon-size);
  color: var(--site-icon-color);
  flex: none;
  place-items: center;
  display: grid;
}

.site-sidebar-icon svg {
  width: var(--site-icon-size);
  height: var(--site-icon-size);
  stroke-width: var(--site-icon-stroke);
}

.site-sidebar-group > a:hover .site-sidebar-icon, .site-sidebar-group > a[aria-current="page"] .site-sidebar-icon {
  color: var(--primary);
}

.site-sidebar-name {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
}

.site-nav-title {
  min-width: 0;
  display: inline-flex;
  position: relative;
}

.site-sidebar-description {
  color: var(--site-icon-color);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 11px;
  font-weight: 400;
  line-height: 16px;
  overflow: hidden;
}

.site-sidebar-group > .site-sidebar-tool-navigation {
  align-items: flex-start;
  min-height: 50px;
  margin-top: 6px;
  padding-block: 6px;
}

.site-sidebar-tool-navigation .site-nav-title {
  flex-direction: column;
  gap: 2px;
}

.site-sidebar-tool-navigation .site-sidebar-name {
  font-weight: inherit;
}

.site-sidebar-tool-navigation .site-sidebar-icon {
  height: var(--navigation-line-height);
}

.site-sidebar-tool-navigation:is(:hover, [aria-current="page"]) .site-sidebar-tool-arrow {
  color: var(--primary);
}

.site-sidebar-tool-arrow {
  color: var(--site-icon-color);
  flex: none;
  margin-top: 3px;
  margin-left: auto;
  display: inline-flex;
}

.site-live-badge {
  background: var(--badge-background);
  color: var(--badge-foreground);
  white-space: nowrap;
  border-radius: 4px;
  padding: 0 3px;
  font-size: 9px;
  font-weight: 500;
  line-height: 14px;
  position: absolute;
  top: -6px;
  left: calc(100% + 4px);
}

.site-sidebar-details {
  flex: none;
  margin-bottom: 8px;
}

.site-sidebar-details summary {
  cursor: pointer;
  color: var(--muted-foreground);
  justify-content: space-between;
  gap: 8px;
  list-style: none;
}

.site-sidebar-details summary::-webkit-details-marker {
  display: none;
}

.site-sidebar-details summary svg {
  width: 14px;
  height: 14px;
  transition: transform var(--duration-fast) var(--ease-out);
}

.site-sidebar-details[open] > summary svg {
  transform: rotate(90deg);
}

.site-sidebar-details[open] > summary {
  color: var(--foreground);
}

.site-sidebar-details:has(a[aria-current="page"]) > summary {
  color: var(--primary);
}

.site-sidebar-details > .site-sidebar-group {
  margin: 4px 0 8px;
  padding: 0;
}

.site-sidebar-details > .site-sidebar-group:after {
  display: none;
}

.site-recent-products {
  min-height: 309px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
}

.site-sidebar-recent .site-recent-heading, .site-sidebar-recent .site-recent-products:after {
  display: none;
}

.site-recent-heading {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  margin-bottom: 6px;
  padding: 0 14px;
  display: flex;
}

.site-recent-heading h2 {
  color: var(--muted-foreground);
  font-size: var(--navigation-label-size);
  font-weight: var(--navigation-label-weight);
  line-height: 18px;
}

.site-recent-empty {
  justify-items: start;
  gap: 7px;
  padding: 8px 14px 5px;
  display: grid;
}

.site-recent-empty p {
  color: var(--muted-foreground);
  font-size: 12px;
  line-height: 1.6;
}

.site-recent-empty :is(a, button) {
  min-height: 28px;
  color: var(--primary);
  cursor: pointer;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  display: inline-flex;
}

.site-recent-empty :is(a, button):hover {
  text-underline-offset: 3px;
  text-decoration: underline;
}

.site-sidebar-bottom {
  border: 1px solid var(--border);
  border-radius: 999px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  margin-top: auto;
  padding: 4px;
  display: grid;
}

.site-sidebar-bottom > a {
  min-height: 34px;
  color: var(--muted-foreground);
  white-space: nowrap;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  transition: background-color .16s, color .16s;
  display: flex;
}

.site-sidebar-bottom > a:hover {
  background: var(--muted);
  color: var(--foreground);
}

.site-sidebar-bottom > a svg {
  flex: none;
}

@media (max-width: 1180px) {
  :root {
    --site-rail: 204px;
  }
}

.sr-only {
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}

.spotlight {
  --banner-ratio: 3.2;
  --side-banner-ratio: 3;
  gap: 12px;
  min-width: 0;
  display: grid;
}

.spotlight a {
  text-decoration: none;
}

.spotlight a:focus-visible, .spotlight button:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

.spotlight-lead-grid {
  gap: var(--banner-gap);
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  min-width: 0;
  height: clamp(230px, 18vw, 280px);
  display: grid;
}

.spotlight-lead-grid:has(.banner-link) {
  height: auto;
}

.spotlight-carousel {
  border-radius: var(--radius-control);
  background: var(--muted);
  min-width: 0;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.spotlight-carousel:has(.banner-link) {
  height: auto;
  aspect-ratio: var(--banner-ratio);
}

.spotlight-slide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  width: 100%;
  height: 100%;
  transition: opacity .4s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .4s;
  display: block;
  position: absolute;
  inset: 0;
}

.spotlight-slide.active-slide {
  z-index: 1;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.lead-link {
  color: #fff;
  background: #142c57;
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  overflow: hidden;
}

.lead-link.banner-link {
  background: var(--muted);
}

.banner-link > .artwork {
  background: var(--muted);
  width: 100%;
  inset: 0;
}

.banner-link .cover {
  object-fit: contain;
  object-position: center;
}

.banner-link:hover .cover {
  transform: none;
}

.artwork {
  background: #f4f0e7;
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  overflow: hidden;
}

.artwork-fallback {
  color: #142c57;
  place-items: center;
  font-size: 32px;
  font-weight: 750;
  display: grid;
  position: absolute;
  inset: 0;
}

.artwork-fallback .fallback-logo {
  object-fit: contain;
  width: 66px;
  height: 66px;
}

.cover {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
  transition: transform .35s;
  position: absolute;
  inset: 0;
}

.lead-link:hover .cover, .side-story:hover .cover {
  transform: scale(1.025);
}

.carousel-controls {
  z-index: 2;
  align-items: center;
  gap: 2px;
  display: flex;
  position: absolute;
  bottom: 8px;
  left: 25px;
}

.carousel-controls button {
  cursor: pointer;
  background: none;
  border: 0;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  display: grid;
}

.carousel-controls button:after {
  opacity: .4;
  content: "";
  background: #142c57;
  border-radius: 100px;
  width: 18px;
  height: 5px;
  transition: transform .2s, opacity .2s;
  transform: scaleX(.35);
}

.carousel-controls button:hover:after {
  opacity: .75;
}

.carousel-controls button.active-dot:after {
  opacity: 1;
  background: var(--brand);
  transform: scaleX(1);
}

.discover-panel {
  min-width: 0;
  display: flex;
}

.side-stories {
  gap: var(--banner-gap);
  flex: 1;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  min-height: 0;
  display: grid;
}

.side-story {
  color: #142c57;
  background: #e4f5ff;
  border-radius: 12px;
  min-width: 0;
  min-height: 0;
  display: block;
  position: relative;
  overflow: hidden;
}

.side-copy {
  z-index: 1;
  flex-direction: column;
  justify-content: center;
  width: 56%;
  min-width: 0;
  height: 100%;
  padding: 14px 5px 14px 19px;
  display: flex;
  position: relative;
}

.side-copy small {
  color: #40566e;
  font-size: 10px;
  font-weight: 600;
}

.side-copy strong {
  letter-spacing: -.03em;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-top: 8px;
  font-size: clamp(16px, 1.35vw, 22px);
  font-weight: 800;
  line-height: 1.3;
  display: -webkit-box;
  overflow: hidden;
}

.side-meta {
  color: #40566e;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  font-size: 10px;
  display: inline-flex;
}

.side-meta > svg:last-child {
  color: var(--primary);
  margin-left: auto;
}

.side-story:hover strong {
  text-underline-offset: 4px;
  text-decoration: underline;
}

.side-story .artwork {
  width: 50%;
  position: absolute;
  inset: 0 0 0 auto;
  -webkit-mask-image: linear-gradient(90deg, #0000, #000 25%);
  mask-image: linear-gradient(90deg, #0000, #000 25%);
}

.side-story.poster-story .artwork {
  z-index: 1;
  background: var(--muted);
  width: 100%;
  inset: 0;
  -webkit-mask-image: none;
  mask-image: none;
}

.side-story.poster-story .cover {
  object-fit: contain;
  object-position: center;
}

.side-story.poster-story:hover .cover {
  transform: none;
}

.tool-story {
  border: 1px solid var(--primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .tool-story {
    border: 1px solid color-mix(in srgb, var(--primary) 10%, var(--border));
  }
}

.tool-story {
  background: var(--primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .tool-story {
    background: color-mix(in srgb, var(--primary) 4%, var(--card));
  }
}

.tool-story {
  color: var(--foreground);
  transition: border-color var(--duration-fast) var(--ease-out);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  display: grid;
}

.tool-story > .artwork {
  background: none;
  width: 100%;
  min-height: 0;
  position: relative;
  inset: auto;
  -webkit-mask-image: none;
  mask-image: none;
}

.tool-story .artwork-fallback {
  background: var(--card);
  color: var(--foreground);
  border-radius: 8px;
  inset: 10px 10px 10px 0;
}

.tool-story .cover {
  background: var(--card);
  object-fit: contain;
  object-position: center;
  border-radius: 8px;
  width: calc(100% - 10px);
  height: calc(100% - 20px);
  inset: 10px 10px 10px 0;
}

.tool-story:hover .cover {
  transform: none;
}

.tool-copy {
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  padding: 12px 16px;
  display: flex;
}

.tool-identity {
  align-items: center;
  gap: 8px;
  min-width: 0;
  display: flex;
}

.tool-identity img {
  background: var(--card);
  object-fit: contain;
  border-radius: 8px;
  flex: none;
  width: 32px;
  height: 32px;
  padding: 4px;
}

.tool-identity strong {
  letter-spacing: -.025em;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  display: block;
  overflow: hidden;
}

.tool-summary {
  overflow-wrap: anywhere;
  color: var(--foreground);
}

@supports (color: color-mix(in lab, red, red)) {
  .tool-summary {
    color: color-mix(in srgb, var(--foreground) 78%, var(--card));
  }
}

.tool-summary {
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 12px;
  line-height: 1.5;
  display: -webkit-box;
  overflow: hidden;
}

.tool-action {
  color: var(--foreground);
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  display: inline-flex;
}

.tool-action svg {
  box-sizing: content-box;
  background: var(--foreground);
  color: var(--card);
  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
  border-radius: 50%;
  padding: 5px;
}

.tool-story:hover {
  border-color: var(--primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .tool-story:hover {
    border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
  }
}

.tool-story:hover strong {
  color: var(--primary);
  text-decoration: none;
}

.tool-story:hover .tool-action svg {
  background: var(--primary);
  color: var(--primary-foreground);
}

@media (min-width: 1101px) {
  .spotlight-lead-grid:has(.banner-link):has(.discover-panel) {
    --column-ratio: calc(2 * var(--banner-ratio) / var(--side-banner-ratio));
    grid-template-columns: minmax(0, calc((100% * var(--column-ratio) + (var(--banner-ratio) - var(--column-ratio)) * var(--banner-gap)) / (1 + var(--column-ratio)))) minmax(0, 1fr);
  }
}

@media (max-width: 1100px) {
  .side-story.poster-story {
    height: auto;
    aspect-ratio: var(--side-banner-ratio);
    align-self: start;
  }

  .tool-story {
    aspect-ratio: auto;
    height: auto;
    min-height: 140px;
  }
}

@media (max-width: 850px) {
  .side-stories:has(.tool-story) {
    grid-template-rows: auto;
  }
}

@media (max-width: 600px) {
  .side-stories {
    grid-template-rows: auto;
    gap: 10px;
  }

  .side-story.poster-story {
    height: auto;
    aspect-ratio: var(--side-banner-ratio);
  }

  .side-copy {
    width: 65%;
    padding: 10px 3px 10px 12px;
  }

  .side-copy strong {
    margin-top: 6px;
    font-size: 14px;
  }

  .side-meta {
    margin-top: 5px;
    font-size: 9px;
  }

  .side-story .cover {
    object-position: 65% center;
  }

  .banner-link > .artwork {
    width: 100%;
    inset: 0;
  }

  .side-stories:has(.tool-story) {
    grid-template-columns: minmax(0, 1fr);
  }

  .tool-story {
    aspect-ratio: auto;
    height: auto;
    min-height: 128px;
  }

  .tool-copy {
    gap: 6px;
    padding: 10px 12px;
  }

  .tool-identity strong {
    font-size: 18px;
  }

  .tool-identity img {
    border-radius: 6px;
    width: 28px;
    height: 28px;
    padding: 3px;
  }

  .tool-story .cover {
    object-position: center;
  }

  .carousel-controls {
    gap: 0;
    bottom: 5px;
    left: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .spotlight *, .spotlight :before, .spotlight :after {
    transition: none;
  }
}

.discovery-strip {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
  display: grid;
}

.discovery-strip a {
  text-decoration: none;
}

.strip-topic {
  border-radius: var(--radius);
  background: var(--card);
  flex-direction: column;
  min-width: 0;
  display: flex;
  overflow: hidden;
}

.strip-topic:hover {
  box-shadow: var(--shadow-popover);
}

.strip-topic:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.strip-topic .strip-artwork {
  aspect-ratio: 16 / 9;
  background: var(--muted);
  display: block;
  position: relative;
  overflow: hidden;
}

.strip-topic .strip-artwork > span {
  display: contents;
}

.strip-topic .strip-artwork img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.strip-artwork-fallback {
  color: var(--muted-foreground);
  place-items: center;
  font-size: 22px;
  font-weight: 700;
  display: grid;
  position: absolute;
  inset: 0;
}

.strip-artwork-fallback img {
  object-fit: contain;
  width: 48px;
  height: 48px;
}

.strip-caption-copy {
  color: var(--white);
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 28px 12px 10px;
  display: flex;
  position: absolute;
  inset: auto 0 0;
}

.strip-visual-topic > .strip-caption-copy {
  color: #fff;
  background: linear-gradient(#0000, #0e131db8 60%, #0e131deb);
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 28px 12px 10px;
  display: flex;
  position: absolute;
  inset: auto 0 0;
}

.strip-identity {
  align-items: center;
  gap: 8px;
  min-width: 0;
  display: flex;
}

.strip-identity > strong {
  color: #fff;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  overflow: hidden;
}

.strip-topic:hover .strip-identity > strong {
  text-underline-offset: 3px;
  text-decoration: underline;
}

.strip-logo {
  object-fit: contain;
  background: #fff;
  border-radius: 6px;
  flex: none;
  width: 24px;
  height: 24px;
  padding: 3px;
}

.strip-caption-arrow {
  color: #fff;
  flex: none;
}

.strip-visual-topic .strip-artwork > img {
  object-fit: contain;
}

@media (max-width: 1100px) {
  .discovery-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .discovery-strip > a:nth-child(n+5) {
    display: none;
  }
}

@media (max-width: 600px) {
  .discovery-strip {
    gap: 8px;
    margin-top: 12px;
  }

  .strip-visual-topic > .strip-caption-copy {
    gap: 8px;
    padding: 22px 8px 8px;
  }

  .strip-identity {
    gap: 6px;
  }

  .strip-identity > strong {
    font-size: 12px;
  }

  .strip-caption-arrow {
    width: 13px;
    height: 13px;
  }
}

.home-spotlight-spotlight {
  --banner-ratio: 3.2;
  --side-banner-ratio: 3;
  --banner-gap: 16px;
  min-width: 0;
  color: var(--foreground);
  gap: 12px;
  display: grid;
}

.home-spotlight-spotlight a {
  text-decoration: none;
}

.home-spotlight-spotlight a:focus-visible, .home-spotlight-spotlight button:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

.home-spotlight-leadGrid {
  gap: var(--banner-gap);
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  height: auto;
  display: grid;
}

.home-spotlight-leadGrid:has(.home-spotlight-bannerLink) {
  height: auto;
}

@media (min-width: 851px) {
  .home-spotlight-leadGrid {
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    height: clamp(230px, 18vw, 280px);
  }

  .home-spotlight-leadGrid:has(.home-spotlight-bannerLink):has(.home-spotlight-discoverPanel) {
    --column-ratio: calc(2 * var(--banner-ratio) / var(--side-banner-ratio));
    grid-template-columns: minmax(0, calc((100% * var(--column-ratio) + (var(--banner-ratio) - var(--column-ratio)) * var(--banner-gap)) / (1 + var(--column-ratio)))) minmax(0, 1fr);
  }
}

.home-spotlight-carousel {
  border-radius: var(--radius-control);
  background: var(--muted);
  min-width: 0;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.home-spotlight-carousel:has(.home-spotlight-bannerLink) {
  height: auto;
  aspect-ratio: var(--banner-ratio);
}

.home-spotlight-slide, .home-spotlight-leadLink {
  width: 100%;
  height: 100%;
  display: block;
}

.home-spotlight-slide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .4s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .4s;
  position: absolute;
  inset: 0;
}

.home-spotlight-activeSlide {
  z-index: 1;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.home-spotlight-leadLink {
  color: #fff;
  background: #142c57;
  position: relative;
  overflow: hidden;
}

.home-spotlight-artwork {
  background: #f4f0e7;
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  overflow: hidden;
}

.home-spotlight-leadLink > .home-spotlight-artwork {
  width: 54%;
  position: absolute;
  inset: 0 0 0 auto;
}

.home-spotlight-artworkFallback {
  color: #142c57;
  place-items: center;
  font-size: 32px;
  font-weight: 750;
  display: grid;
  position: absolute;
  inset: 0;
}

.home-spotlight-fallbackLogo {
  object-fit: contain;
  width: 66px;
  height: 66px;
}

.home-spotlight-cover {
  object-fit: cover;
  object-position: center top;
  width: 100%;
  height: 100%;
  transition: transform .35s;
  position: absolute;
  inset: 0;
}

.home-spotlight-bannerLink {
  background: var(--muted);
}

.home-spotlight-bannerLink > .home-spotlight-artwork {
  background: var(--muted);
  width: 100%;
  inset: 0;
}

.home-spotlight-leadLink:hover .home-spotlight-cover, .home-spotlight-sideStory:hover .home-spotlight-cover {
  transform: scale(1.025);
}

.home-spotlight-carouselControls {
  z-index: 2;
  align-items: center;
  gap: 2px;
  display: flex;
  position: absolute;
  bottom: 8px;
  left: 25px;
}

.home-spotlight-carouselControls button {
  cursor: pointer;
  background: none;
  border: 0;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  display: grid;
}

.home-spotlight-carouselControls button:after {
  opacity: .4;
  content: "";
  background: #142c57;
  border-radius: 100px;
  width: 18px;
  height: 5px;
  transition: transform .2s, opacity .2s;
  transform: scaleX(.35);
}

.home-spotlight-carouselControls button:hover:after {
  opacity: .75;
}

.home-spotlight-carouselControls .home-spotlight-activeDot:after {
  opacity: 1;
  background: var(--brand);
  transform: scaleX(1);
}

.home-spotlight-discoverPanel {
  min-width: 0;
  display: flex;
}

.home-spotlight-sideStories {
  gap: var(--banner-gap);
  flex: 1;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  min-height: 0;
  display: grid;
}

.home-spotlight-sideStory {
  color: #142c57;
  background: #e4f5ff;
  border-radius: 12px;
  min-width: 0;
  min-height: 0;
  display: block;
  position: relative;
  overflow: hidden;
}

.home-spotlight-sideStory .home-spotlight-artwork {
  width: 50%;
  position: absolute;
  inset: 0 0 0 auto;
  -webkit-mask-image: linear-gradient(90deg, #0000, #000 25%);
  mask-image: linear-gradient(90deg, #0000, #000 25%);
}

.home-spotlight-posterStory {
  height: auto;
  aspect-ratio: var(--side-banner-ratio);
  align-self: start;
}

.home-spotlight-posterStory .home-spotlight-artwork {
  z-index: 1;
  background: var(--muted);
  width: 100%;
  inset: 0;
  -webkit-mask-image: none;
  mask-image: none;
}

.home-spotlight-bannerLink .home-spotlight-cover, .home-spotlight-posterStory .home-spotlight-cover {
  object-fit: contain;
  object-position: center;
}

.home-spotlight-bannerLink:hover .home-spotlight-cover, .home-spotlight-posterStory:hover .home-spotlight-cover {
  transform: none;
}

.home-spotlight-toolStory {
  border: 1px solid var(--primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .home-spotlight-toolStory {
    border: 1px solid color-mix(in srgb, var(--primary) 10%, var(--border));
  }
}

.home-spotlight-toolStory {
  background: var(--primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .home-spotlight-toolStory {
    background: color-mix(in srgb, var(--primary) 4%, var(--card));
  }
}

.home-spotlight-toolStory {
  color: var(--foreground);
  transition: border-color var(--duration-fast) var(--ease-out);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  display: grid;
}

.home-spotlight-toolStory > .home-spotlight-artwork {
  background: none;
  width: 100%;
  min-height: 0;
  position: relative;
  inset: auto;
  -webkit-mask-image: none;
  mask-image: none;
}

.home-spotlight-toolStory .home-spotlight-artworkFallback {
  background: var(--card);
  color: var(--foreground);
  border-radius: 8px;
  inset: 10px 10px 10px 0;
}

.home-spotlight-toolStory .home-spotlight-cover {
  background: var(--card);
  object-fit: contain;
  object-position: center;
  border-radius: 8px;
  width: calc(100% - 10px);
  height: calc(100% - 20px);
  inset: 10px 10px 10px 0;
}

.home-spotlight-toolStory:hover .home-spotlight-cover {
  transform: none;
}

.home-spotlight-toolStory:hover {
  border-color: var(--primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .home-spotlight-toolStory:hover {
    border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
  }
}

.home-spotlight-toolStory:hover strong {
  color: var(--primary);
  text-decoration: none;
}

.home-spotlight-toolStory:hover .home-spotlight-toolAction svg {
  background: var(--primary);
  color: var(--primary-foreground);
}

.home-spotlight-toolCopy {
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  padding: 12px 16px;
  display: flex;
}

.home-spotlight-toolIdentity {
  align-items: center;
  gap: 8px;
  min-width: 0;
  display: flex;
}

.home-spotlight-toolIdentity strong {
  letter-spacing: -.025em;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  display: block;
  overflow: hidden;
}

.home-spotlight-toolLogo {
  background: var(--card);
  object-fit: contain;
  border-radius: 8px;
  flex: none;
  width: 32px;
  height: 32px;
  padding: 4px;
}

.home-spotlight-toolSummary {
  overflow-wrap: anywhere;
  color: var(--foreground);
}

@supports (color: color-mix(in lab, red, red)) {
  .home-spotlight-toolSummary {
    color: color-mix(in srgb, var(--foreground) 78%, var(--card));
  }
}

.home-spotlight-toolSummary {
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 12px;
  line-height: 1.5;
  display: -webkit-box;
  overflow: hidden;
}

.home-spotlight-toolAction {
  color: var(--foreground);
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  display: inline-flex;
}

.home-spotlight-toolAction svg {
  box-sizing: content-box;
  background: var(--foreground);
  color: var(--card);
  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
  border-radius: 50%;
  padding: 5px;
}

@media (max-width: 1100px) {
  .home-spotlight-leadGrid {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
  }

  .home-spotlight-sideStories {
    grid-template-rows: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-spotlight-sideStory {
    aspect-ratio: 3;
  }

  .home-spotlight-posterStory {
    height: auto;
    aspect-ratio: var(--side-banner-ratio);
    align-self: start;
  }

  .home-spotlight-toolStory {
    aspect-ratio: auto;
    height: auto;
    min-height: 140px;
  }

  .home-spotlight-carousel {
    height: 240px;
  }
}

@media (max-width: 850px) {
  .home-main {
    width: 100%;
  }

  .home-spotlight-leadGrid {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
  }

  .home-spotlight-discoverPanel {
    height: auto;
  }

  .home-spotlight-sideStories {
    grid-template-rows: 94px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-spotlight-sideStories:has(.home-spotlight-toolStory) {
    grid-template-rows: auto;
  }
}

@media (max-width: 600px) {
  .home-spotlight-spotlight {
    gap: 10px;
  }

  .home-spotlight-carousel {
    aspect-ratio: auto;
    height: 220px;
  }

  .home-spotlight-leadLink > .home-spotlight-artwork {
    width: 40%;
    height: 100%;
    inset: 0 0 0 auto;
  }

  .home-spotlight-leadLink .home-spotlight-cover {
    object-fit: cover;
    object-position: center top;
  }

  .home-spotlight-carouselControls {
    gap: 0;
    bottom: 5px;
    left: 13px;
  }

  .home-spotlight-carouselControls button {
    width: 24px;
  }

  .home-spotlight-sideStories {
    grid-template-rows: auto;
    gap: 10px;
  }

  .home-spotlight-sideStory {
    aspect-ratio: auto;
    height: 94px;
  }

  .home-spotlight-sideStory .home-spotlight-cover {
    object-position: 65% center;
  }

  .home-spotlight-bannerLink > .home-spotlight-artwork {
    width: 100%;
    inset: 0;
  }

  .home-spotlight-bannerLink .home-spotlight-cover, .home-spotlight-posterStory .home-spotlight-cover {
    object-fit: contain;
    object-position: center;
  }

  .home-spotlight-posterStory {
    height: auto;
    aspect-ratio: var(--side-banner-ratio);
  }

  .home-spotlight-sideStories:has(.home-spotlight-toolStory) {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-spotlight-toolStory {
    aspect-ratio: auto;
    height: auto;
    min-height: 128px;
  }

  .home-spotlight-toolCopy {
    gap: 6px;
    padding: 10px 12px;
  }

  .home-spotlight-toolIdentity strong {
    font-size: 18px;
  }

  .home-spotlight-toolLogo {
    border-radius: 6px;
    width: 28px;
    height: 28px;
    padding: 3px;
  }

  .home-spotlight-toolStory .home-spotlight-cover {
    object-position: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-spotlight-spotlight *, .home-spotlight-spotlight :before, .home-spotlight-spotlight :after {
    transition: none;
  }
}

.home-hot-tools-section {
  min-width: 0;
  margin-top: 22px;
}

.home-hot-tools-heading {
  justify-content: space-between;
  align-items: end;
  gap: 18px;
  margin-bottom: 12px;
  display: flex;
}

.home-hot-tools-headingCopy h2 {
  letter-spacing: -.025em;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
}

.home-hot-tools-actions {
  align-items: center;
  display: flex;
}

.home-hot-tools-more {
  min-height: 28px;
  color: var(--primary);
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 650;
  display: inline-flex;
}

.home-hot-tools-more:hover {
  text-underline-offset: 3px;
  text-decoration: underline;
}

.home-hot-tools-more:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.home-hot-tools-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
  min-width: 0;
  display: grid;
}

.home-hot-tools-card {
  background: var(--card);
  min-width: 0;
  min-height: 78px;
  color: var(--foreground);
  border-radius: 12px;
  align-items: center;
  gap: 10px;
  padding: 12px 11px;
  transition: background-color .18s;
  display: flex;
  position: relative;
}

.home-hot-tools-card:hover {
  background: var(--muted);
}

.home-hot-tools-card:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.home-hot-tools-card:has(.home-hot-tools-meta) {
  min-height: 94px;
}

.home-hot-tools-logo {
  background: var(--background);
  border-radius: 10px;
  flex: 0 0 39px;
  place-items: center;
  width: 39px;
  height: 39px;
  display: grid;
  overflow: hidden;
}

.home-hot-tools-logoImage {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.home-hot-tools-copy {
  flex: 1;
  min-width: 0;
  display: block;
}

.home-hot-tools-title {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  font-size: 12px;
  font-weight: 720;
  display: block;
  overflow: hidden;
}

.home-hot-tools-copy small {
  color: var(--muted-foreground);
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 4px;
  font-size: 10px;
  display: block;
  overflow: hidden;
}

@media (max-width: 1180px) {
  .home-hot-tools-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .home-hot-tools-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .home-hot-tools-section {
    margin-top: 18px;
  }

  .home-hot-tools-heading {
    align-items: center;
  }

  .home-hot-tools-heading h2 {
    font-size: 17px;
  }

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

  .home-hot-tools-card {
    gap: 8px;
    padding: 12px 10px;
  }

  .home-hot-tools-logo {
    flex-basis: 32px;
    width: 32px;
    height: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-hot-tools-card {
    transition: none;
  }
}

.tools-section {
  scroll-margin-top: calc(var(--site-header-height) + 24px);
  border-top: 0;
  margin-top: 22px;
  padding-top: 0;
}

.tools-heading {
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
  display: flex;
}

.title-group {
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px;
  display: flex;
}

.title-group h2 {
  letter-spacing: -.025em;
  font-size: 22px;
  font-weight: 680;
  line-height: 1.25;
}

.title-group span {
  color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

.browse-bar {
  border-bottom: 1px solid var(--border);
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  display: flex;
}

.categories {
  scrollbar-width: none;
  flex: 1;
  gap: 6px;
  display: flex;
  overflow-x: auto;
}

.categories::-webkit-scrollbar {
  display: none;
}

.category-pill {
  border: 1px solid var(--border);
  background: var(--card);
  min-height: 34px;
  color: var(--foreground);
  font-family: var(--font-navigation);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
  border-radius: 8px;
  flex: none;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  display: inline-flex;
}

.category-pill:hover {
  background: var(--muted);
  color: var(--foreground);
}

.category-pill svg {
  stroke-width: 1.75px;
  width: 15px;
  height: 15px;
}

.category-pill.all-categories {
  background: var(--foreground);
  color: var(--background);
  font-weight: 600;
}

.category-pill.all-categories:hover {
  background: var(--foreground);
  color: var(--background);
}

.tool-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  display: grid;
}

.tool-card {
  border: 1px solid var(--border);
  background: var(--card);
  min-width: 0;
  transition: border-color var(--duration-fast) var(--ease-out);
  border-radius: 12px;
  flex-direction: column;
  display: flex;
  position: relative;
  overflow: hidden;
}

.tool-card:hover {
  border-color: var(--primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .tool-card:hover {
    border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
  }
}

.tool-card:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

.tool-cover {
  aspect-ratio: 16 / 9;
  background: var(--muted);
  border-radius: 8px;
  margin: 12px 12px 0;
  display: block;
  position: relative;
  overflow: hidden;
}

.cover-fallback {
  color: var(--muted-foreground);
  place-items: center;
  padding: 16px;
  display: grid;
  position: absolute;
  inset: 0;
}

.cover-fallback-logo {
  object-fit: contain;
  width: 64px;
  height: 64px;
}

.cover-image {
  object-fit: cover;
  object-position: top;
  width: 100%;
  height: 100%;
  position: relative;
}

.tool-badge {
  z-index: 2;
  background: var(--new-background);
  color: var(--new-foreground);
  white-space: nowrap;
  border-radius: 0 8px 0 7px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  position: absolute;
  top: 12px;
  right: 12px;
}

.tool-body {
  flex-direction: column;
  flex: 1;
  min-width: 0;
  padding: 12px 14px 14px;
  display: flex;
}

.tool-heading-row {
  align-items: center;
  gap: 9px;
  display: flex;
}

.tool-logo {
  border-radius: 8px;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  display: grid;
  position: relative;
}

.tool-logo img {
  object-fit: contain;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.tool-heading-row h3 {
  min-width: 0;
  color: var(--foreground);
  transition: color var(--duration-fast) var(--ease-out);
  letter-spacing: -.015em;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  font-size: 15px;
  font-weight: 650;
  line-height: 24px;
  overflow: hidden;
}

.tool-card:hover h3 {
  color: var(--primary);
}

.tool-summary {
  overflow-wrap: anywhere;
  color: var(--foreground);
}

@supports (color: color-mix(in lab, red, red)) {
  .tool-summary {
    color: color-mix(in srgb, var(--foreground) 72%, var(--card));
  }
}

.tool-summary {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-height: 21px;
  margin-top: 8px;
  font-size: 13px;
  line-height: 21px;
  overflow: hidden;
}

.tool-footer {
  color: var(--foreground);
}

@supports (color: color-mix(in lab, red, red)) {
  .tool-footer {
    color: color-mix(in srgb, var(--foreground) 72%, var(--card));
  }
}

.tool-footer {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  margin-top: auto;
  padding-top: 12px;
  font-size: 11px;
  line-height: 20px;
  display: flex;
}

.tool-tags {
  gap: 6px;
  min-width: 0;
  display: flex;
  overflow: hidden;
}

.tool-tags span {
  background: var(--muted);
  white-space: nowrap;
  border-radius: 6px;
  flex: none;
  padding: 1px 7px;
}

.tool-action {
  color: var(--primary);
  opacity: .65;
  transition: opacity var(--duration-fast) var(--ease-out);
  flex: none;
  align-items: center;
  gap: 3px;
  display: inline-flex;
}

.tool-card:hover .tool-action {
  opacity: 1;
}

.content-rail {
  grid-template-columns: 1.25fr 1fr;
  gap: 16px;
  margin-top: 32px;
  display: grid;
}

.rail-panel {
  background: var(--card);
  border-radius: var(--radius-panel);
  flex-direction: column;
  min-width: 0;
  padding: 24px 28px 18px;
  display: flex;
}

.rail-heading {
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  display: flex;
}

.rail-heading h2 {
  letter-spacing: -.02em;
  font-size: 19px;
  font-weight: 650;
}

.rail-heading a {
  color: var(--muted-foreground);
  align-items: center;
  gap: 4px;
  min-height: 32px;
  font-size: 12px;
  display: inline-flex;
}

.rail-heading a:hover {
  color: var(--primary);
}

.news-list {
  flex-direction: column;
  display: flex;
}

.news-list a {
  border-bottom: 1px solid var(--border);
  padding-block: 13px;
  display: block;
}

.news-list a:hover h3 {
  color: var(--primary);
}

.news-list h3 {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
}

.news-source {
  color: var(--muted-foreground);
  margin-top: 6px;
  font-size: 11px;
}

.rail-more {
  min-height: 44px;
  color: var(--muted-foreground);
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
  font-size: 12px;
  display: inline-flex;
}

.rail-more:hover {
  color: var(--primary);
}

.rank-context {
  border-bottom: 1px solid var(--border);
  color: var(--muted-foreground);
  justify-content: space-between;
  padding-block: 8px 12px;
  font-size: 12px;
  display: flex;
}

.model-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.model-list li {
  border-bottom: 1px solid var(--border);
}

.model-list a {
  font-variant-numeric: tabular-nums;
  align-items: center;
  gap: 18px;
  min-height: 61px;
  display: flex;
}

.model-list a:hover strong {
  color: var(--primary);
}

.model-position {
  width: 14px;
  color: var(--muted-foreground);
  flex: none;
  font-size: 13px;
}

.model-copy {
  flex: 1;
  min-width: 0;
  display: block;
}

.model-copy strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 550;
  display: block;
  overflow: hidden;
}

.model-copy span {
  color: var(--muted-foreground);
  margin-top: 3px;
  font-size: 11px;
  display: block;
}

.model-score {
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 550;
}

b.model-score {
  font-weight: 550;
}

.video-entry {
  background: var(--card);
  border-radius: var(--radius-panel);
  grid-column: 1 / -1;
  align-items: center;
  gap: 16px;
  min-height: 72px;
  padding: 20px 28px;
  transition: background-color .18s;
  display: flex;
}

.video-entry:hover, .video-entry:focus-visible {
  background: var(--muted);
}

.video-entry:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.video-entry > svg {
  stroke-width: 1.6px;
  width: 23px;
  height: 23px;
  color: var(--foreground);
  flex: none;
}

.video-copy {
  flex-wrap: wrap;
  flex: 1;
  align-items: baseline;
  gap: 16px;
  min-width: 0;
  display: flex;
}

.video-copy strong {
  font-size: 15px;
  font-weight: 600;
}

.video-copy span {
  color: var(--muted-foreground);
  font-size: 13px;
}

.video-entry:hover strong {
  color: var(--primary);
}

.site-frame-content > .site-footer {
  display: none;
}

:is(.site-frame:has(main[data-site-layout="standalone"]) > .site-frame-content > .site-footer, .site-frame:has(main[data-site-layout="editorial"]) > .site-frame-content > .site-footer) {
  display: block;
}

:is(.site-frame:has(main[data-site-layout="standalone"]) > .site-frame-content > .site-sidebar-footer, .site-frame:has(main[data-site-layout="editorial"]) > .site-frame-content > .site-sidebar-footer) {
  display: none;
}

.site-frame:has(main[data-site-layout="standalone"]) {
  grid-template-columns: minmax(0, 1fr);
}

.site-frame:has(main[data-site-layout="standalone"]) > .site-sidebar {
  display: none;
}

.site-frame:has(main[data-site-layout="standalone"]) > .site-frame-content {
  grid-column: 1;
}

.site-sidebar-footer {
  color: var(--foreground);
  font-family: var(--font-navigation);
  margin-top: 40px;
  font-size: 12px;
  line-height: 20px;
}

.site-sidebar-footer-inner {
  border-top: 1px solid var(--border);
  padding: 20px 64px 24px 0;
}

.site-sidebar-footer-top {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px 28px;
  display: flex;
}

.site-sidebar-footer-top nav {
  flex-wrap: wrap;
  gap: 4px 24px;
  display: flex;
}

.site-sidebar-footer a {
  color: inherit;
  transition: color var(--duration-fast) var(--ease-out);
  text-underline-offset: 4px;
  align-items: center;
  min-height: 28px;
  display: inline-flex;
}

.site-sidebar-footer a:hover {
  color: var(--primary);
  text-decoration: underline;
}

.site-sidebar-footer small {
  font-size: inherit;
}

.site-sidebar-footer-registration {
  flex-wrap: wrap;
  gap: 0 24px;
  margin-top: 8px;
  display: flex;
}

.site-sidebar-footer-registration a {
  align-items: center;
  min-height: 28px;
  display: inline-flex;
}

.site-footer {
  background: var(--footer-background);
  color: var(--footer-foreground);
  font-family: var(--font-navigation);
  margin-top: 48px;
  container: site-footer / inline-size;
}

.site-footer a {
  color: var(--footer-muted);
  transition: color var(--duration-fast) var(--ease-out);
  text-underline-offset: 4px;
}

.site-footer a:hover {
  color: var(--footer-link-hover);
  text-decoration: underline;
}

.site-footer .site-container {
  max-width: 1160px;
}

.site-footer-main {
  grid-template-columns: minmax(260px, 1fr) 160px 140px;
  align-items: start;
  gap: clamp(32px, 5vw, 72px);
  padding-block: 40px;
  display: grid;
}

.site-footer-wordmark {
  letter-spacing: -.025em;
  color: var(--footer-foreground);
  align-items: center;
  gap: 10px;
  font-size: 22px;
  font-weight: 700;
  line-height: 48px;
  text-decoration: none;
  display: inline-flex;
}

.site-footer-wordmark img {
  border-radius: 12px;
  flex: none;
  width: 48px;
  height: 48px;
}

.site-footer-registration {
  justify-items: start;
  gap: 2px;
  margin-top: 18px;
  font-size: 13px;
  line-height: 22px;
  display: grid;
}

.site-footer-registration a, .site-footer-registration small {
  min-height: 28px;
  font-size: inherit;
  align-items: center;
  display: inline-flex;
}

.site-footer-group h2 {
  color: var(--footer-foreground);
  margin-bottom: 14px;
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
}

.site-footer-links {
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.site-footer-links a {
  align-items: center;
  min-height: 30px;
  font-size: 13px;
  line-height: 22px;
  display: inline-flex;
}

.site-floating-tools-tools {
  right: 65px;
  bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  flex-direction: column;
  gap: 12px;
  display: flex;
  position: fixed;
}

.site-floating-tools-tools > div {
  position: relative;
}

.site-floating-tools-button {
  background: var(--card);
  width: 40px;
  height: 40px;
  color: var(--foreground);
  box-shadow: var(--shadow-popover);
  cursor: pointer;
  border: 0;
  border-radius: 50%;
}

.site-floating-tools-button:hover, .site-floating-tools-button[data-popup-open] {
  background: var(--muted);
  color: var(--primary);
}

.site-floating-tools-button > svg {
  stroke-width: 1.75px;
  width: 20px;
  height: 20px;
}

.site-floating-tools-button:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

.site-floating-tools-popup {
  background: var(--popover);
  color: var(--popover-foreground);
  box-shadow: var(--shadow-popover);
  border-radius: 12px;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px;
  display: flex;
  position: absolute;
  bottom: calc(100% + 12px);
  right: -8px;
}

.site-floating-tools-popup > img {
  background: var(--white);
  object-fit: contain;
  border-radius: 4px;
  width: 120px;
  height: 120px;
}

.site-floating-tools-caption {
  white-space: nowrap;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
}

.site-floating-tools-arrow {
  background: var(--popover);
  width: 8px;
  height: 8px;
  position: absolute;
  transform: rotate(45deg);
}

.site-floating-tools-arrow[data-side="top"] {
  bottom: -4px;
  left: calc(50% - 4px);
}

@media (max-width: 980px) {
  .site-floating-tools-tools {
    right: 20px;
  }

  .site-floating-tools-button {
    width: 44px;
    height: 44px;
  }
}

html.dark {
  --lightningcss-light: ;
  --lightningcss-dark: initial;
  color-scheme: dark;
  --background: #171b20;
  --foreground: #f1f4f5;
  --card: #20262c;
  --card-foreground: #f1f4f5;
  --popover: #20262c;
  --popover-foreground: #f1f4f5;
  --muted: #292f35;
  --muted-foreground: #99a3ad;
  --accent: #232a31;
  --accent-foreground: #f1f4f5;
  --border: #2c333b;
  --input: #2c333b;
  --primary: var(--brand);
  --ring: #8fa6ff;
  --navigation-foreground: var(--foreground);
  --footer-link-hover: #8fa6ff;
  --shadow-soft: 0 1px 2px 0 #0006;
  --shadow-popover: 0 10px 32px -8px #000000a6, 0 2px 6px -2px #00000080;
}

@media (max-width: 1180px) {
  .hot-grid, .tool-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  .site-frame {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-sidebar {
    display: none;
  }

  .spotlight-lead-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .side-stories {
    grid-template-rows: none;
    grid-template-columns: 1fr 1fr;
  }

  .content-rail {
    grid-template-columns: minmax(0, 1fr);
  }

  .hot-grid, .tool-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .site-footer-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 24px;
    padding-block: 32px;
  }

  .site-footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  .hot-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .site-top-bar, .site-desktop-navigation {
    display: none;
  }

  .site-footer-main {
    padding-bottom: max(28px, env(safe-area-inset-bottom));
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-sidebar-footer-inner {
    padding-inline-end: 48px;
  }

  .site-floating-tools {
    right: 20px;
  }

  .site-floating-tools button {
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 680px) {
  .site-header-inner {
    gap: 5px;
    padding-inline: 14px;
  }

  .site-header-search {
    height: 36px;
    margin-left: 8px;
    padding-inline: 10px;
  }

  .site-header-search > svg {
    display: none;
  }

  .site-header-search button {
    width: 30px;
    min-width: 30px;
    height: 28px;
    margin-right: -6px;
  }

  .site-header-search button span {
    display: none;
  }

  .site-header-submit {
    min-height: 32px;
    padding-inline: 10px;
    font-size: 13px;
  }

  .site-header-actions > button.site-header-menu {
    width: 32px;
    height: 32px;
  }

  .site-header-actions {
    gap: 2px;
  }

  .site-wordmark img {
    border-radius: 8px;
    width: 30px;
    height: 30px;
  }

  .site-wordmark-text {
    font-size: 19px;
  }

  .tool-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

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

  .hot-card {
    gap: 8px;
    padding: 12px 10px;
  }

  .hot-logo {
    border-radius: 8px;
    width: 32px;
    height: 32px;
  }
}

@media (max-width: 480px) {
  .site-header-text-link, .site-header-submit {
    display: none;
  }
}

@media (max-width: 560px) {
  .content-rail {
    margin-top: 32px;
    padding-top: 24px;
  }

  .rail-panel {
    padding: 20px 20px 14px;
  }

  .video-entry {
    padding: 20px;
  }

  .video-copy {
    gap: 5px;
    display: grid;
  }
}

.models-page {
  --rank-surface: var(--card);
  --rank-ink: var(--foreground);
  --rank-muted: var(--muted-foreground);
  --rank-line: var(--border);
  --rank-soft: var(--muted);
  --rank-accent: var(--primary);
  background: var(--background);
  min-height: 70vh;
  color: var(--rank-ink);
  padding: 28px 32px 64px;
}

.models-page ::selection {
  background: var(--selection);
  color: var(--selection-foreground);
}

.models-page :is(a, button, summary):focus-visible {
  outline: 2px solid var(--rank-accent);
  outline-offset: 3px;
}

.models-page input {
  caret-color: var(--rank-accent);
}

.models-wrap {
  width: min(100%, 1400px);
  margin-inline: auto;
}

.models-breadcrumbs {
  color: var(--rank-muted);
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-bottom: 26px;
  font-size: 12px;
  line-height: 1.6;
  display: flex;
}

.models-breadcrumbs a:hover {
  color: var(--rank-accent);
}

.ranking-heading {
  padding-bottom: 28px;
}

.ranking-heading h1 {
  font-family: var(--font-heading);
  letter-spacing: -.025em;
  text-wrap: balance;
  font-size: clamp(30px, 3.1vw, 42px);
  font-weight: 650;
  line-height: 1.3;
}

.ranking-heading > p {
  max-width: 76ch;
  color: var(--rank-muted);
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.75;
}

.ranking-heading-meta {
  color: var(--rank-muted);
  font-variant-numeric: tabular-nums;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  margin-top: 17px;
  font-size: 12px;
  display: flex;
}

.ranking-heading-meta strong {
  color: var(--rank-ink);
  margin-left: 4px;
  font-weight: 600;
}

.ranking-heading-meta time {
  margin-left: 4px;
}

.ranking-heading-meta a {
  min-height: 24px;
  color: var(--rank-accent);
  align-items: center;
  gap: 4px;
  display: inline-flex;
}

.ranking-heading-meta a:hover {
  text-underline-offset: 4px;
  text-decoration: underline;
}

.ranking-families {
  border-block: 1px solid var(--rank-line);
  scrollbar-width: thin;
  scrollbar-color: var(--rank-line) transparent;
  gap: 30px;
  display: flex;
  overflow-x: auto;
}

.ranking-families a {
  min-height: 55px;
  color: var(--rank-muted);
  white-space: nowrap;
  border-bottom: 2px solid #0000;
  flex: none;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 0 2px;
  font-size: 14px;
  font-weight: 550;
  display: inline-flex;
}

.ranking-families a:hover {
  color: var(--rank-ink);
}

.ranking-families a[aria-current="page"] {
  border-bottom-color: var(--rank-accent);
  color: var(--rank-accent);
  font-weight: 650;
}

.ranking-related {
  scrollbar-width: thin;
  scrollbar-color: var(--rank-line) transparent;
  align-items: center;
  gap: 6px;
  padding: 14px 0 18px;
  display: flex;
  overflow-x: auto;
}

.ranking-related a {
  min-height: 34px;
  color: var(--rank-muted);
  white-space: nowrap;
  border-radius: 6px;
  flex: none;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  font-size: 12px;
  display: inline-flex;
}

.ranking-related a:hover {
  background: var(--rank-soft);
  color: var(--rank-ink);
}

.ranking-related a[aria-current="page"] {
  background: var(--accent);
  color: var(--rank-accent);
  font-weight: 650;
}

.ranking-related .ranking-all-link {
  color: var(--rank-accent);
  margin-left: auto;
  padding-right: 0;
}

.models-board {
  border: 1px solid var(--rank-line);
  background: var(--rank-surface);
  border-radius: 12px;
  overflow: clip;
}

.ranking-board-toolbar {
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 18px 24px;
  display: flex;
}

.ranking-board-toolbar > div {
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  display: flex;
}

.ranking-board-toolbar h2 {
  font-size: 16px;
  font-weight: 650;
}

.ranking-board-toolbar > div > span {
  color: var(--rank-muted);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

.ranking-search {
  align-items: center;
  gap: 8px;
  display: flex;
}

.ranking-search label {
  border: 1px solid var(--input);
  width: 260px;
  height: 38px;
  color: var(--rank-muted);
  background: var(--rank-surface);
  border-radius: 6px;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  display: flex;
}

.ranking-search label:focus-within {
  border-color: var(--ring);
  box-shadow: var(--field-focus-shadow);
}

.ranking-search svg {
  flex: none;
}

.ranking-search input {
  width: 100%;
  min-width: 0;
  height: 100%;
  color: var(--rank-ink);
  background: none;
  border: 0;
  outline: 0;
  font-size: 12px;
}

.ranking-search input::placeholder {
  color: var(--rank-muted);
}

.ranking-search button {
  background: var(--primary);
  min-height: 38px;
  color: var(--primary-foreground);
  cursor: pointer;
  border-radius: 6px;
  padding: 0 15px;
  font-size: 12px;
  font-weight: 600;
}

.ranking-search button:hover {
  background: var(--primary-hover);
}

.models-search-status {
  color: var(--rank-muted);
  overflow-wrap: anywhere;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 10px 24px 16px;
  font-size: 12px;
  display: flex;
}

.models-search-status a {
  color: var(--rank-accent);
  flex: none;
}

.models-load-more {
  border-top: 1px solid var(--rank-line);
  min-height: 56px;
  color: var(--rank-accent);
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
}

.models-load-more:hover {
  background: var(--rank-soft);
}

.models-load-more span {
  color: var(--rank-muted);
  font-variant-numeric: tabular-nums;
  margin-left: 6px;
  font-weight: 400;
}

.ranking-board-note {
  border-top: 1px solid var(--rank-line);
  background: var(--rank-soft);
  color: var(--rank-muted);
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding: 15px 24px;
  font-size: 11px;
  line-height: 1.7;
  display: flex;
}

.ranking-board-note > span {
  flex: none;
}

.ranking-board-note a {
  color: var(--rank-accent);
  text-underline-offset: 3px;
  text-decoration: underline;
}

.ranking-external-sources {
  border-top: 1px solid var(--rank-line);
  color: var(--rank-muted);
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  margin-top: 14px;
  padding-top: 12px;
  font-size: 13px;
  display: flex;
}

.ranking-external-sources > span:first-child {
  color: var(--rank-strong);
  flex: none;
  font-weight: 550;
}

.ranking-external-sources a {
  color: var(--rank-muted);
  align-items: center;
  gap: 4px;
  min-height: 28px;
  text-decoration: none;
  display: inline-flex;
}

.ranking-external-sources a:hover {
  color: var(--rank-accent);
}

.models-list-note {
  color: var(--rank-muted);
  padding: 18px 24px;
  font-size: 12px;
  line-height: 1.7;
}

.rank-table-region {
  overflow: visible;
}

.rank-table {
  border-collapse: collapse;
  text-align: left;
  width: 100%;
  display: block;
}

.rank-table thead, .rank-table tbody {
  display: block;
}

.rank-table thead {
  top: var(--site-header-height);
  z-index: 2;
  position: sticky;
}

.rank-table-head, .rank-table-row {
  grid-template-columns: 45px minmax(220px, 1fr) 110px repeat(3, minmax(100px, .32fr)) 40px;
  align-items: center;
  gap: 18px;
  padding-inline: 24px;
  display: grid;
}

.rank-table-head {
  border-block: 1px solid var(--rank-line);
  background: var(--rank-soft);
  min-height: 40px;
  color: var(--rank-muted);
  padding-block: 11px;
  font-size: 11px;
}

.rank-table-head th {
  font-weight: 550;
}

.rank-table-head th:nth-child(n+3) {
  text-align: right;
}

.rank-table-row {
  border-bottom: 1px solid var(--rank-line);
  min-height: 76px;
  padding-block: 14px;
}

.rank-table-row:last-child {
  border-bottom: 0;
}

.rank-table-row:hover {
  background: var(--surface-hover);
}

.rank-position {
  color: var(--rank-muted);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 600;
}

.rank-position-top {
  color: var(--rank-accent);
  font-size: 15px;
  font-weight: 700;
}

.rank-model {
  align-items: center;
  gap: 11px;
  min-width: 0;
  font-weight: 400;
  display: flex;
}

.rank-model-copy {
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  display: flex;
}

.rank-model-copy > a, .rank-model-copy > span {
  width: fit-content;
  max-width: 100%;
  color: var(--rank-ink);
  overflow-wrap: anywhere;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.45;
}

.rank-model-copy > a:hover {
  color: var(--rank-accent);
}

.rank-model-copy small {
  color: var(--rank-muted);
  font-size: 11px;
  line-height: 1.4;
}

.rank-score {
  text-align: right;
}

.rank-score strong {
  color: var(--rank-ink);
  font-variant-numeric: tabular-nums;
  font-size: 20px;
  font-weight: 700;
}

.rank-score small, .rank-metric-cell small {
  display: none;
}

.rank-metric-cell {
  text-align: right;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  font-size: 12px;
}

.rank-metric-cell b {
  font-weight: 500;
}

.rank-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  display: grid;
}

.rank-metrics > span {
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  display: flex;
}

.rank-metrics small {
  color: var(--rank-muted);
  font-size: 11px;
}

.rank-metrics b {
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  font-size: 12px;
  font-weight: 500;
}

.rank-metrics-mobile {
  display: none;
}

.rank-origin {
  text-align: right;
}

.rank-origin a {
  min-height: 32px;
  color: var(--rank-muted);
  white-space: nowrap;
  justify-content: center;
  align-items: center;
  font-size: 11px;
  display: inline-flex;
}

.rank-origin a:hover {
  color: var(--rank-accent);
}

.rank-empty {
  color: var(--rank-muted);
  text-align: center;
  padding: 48px 24px;
  font-size: 13px;
}

.rank-source-note {
  border: 1px solid var(--rank-border, var(--border));
  background: var(--card);
  text-align: center;
  border-radius: 16px;
  max-width: 640px;
  margin: 8px auto 0;
  padding: 28px 28px 24px;
}

.rank-source-note h2 {
  letter-spacing: -.02em;
  font-size: 17px;
  font-weight: 680;
}

.rank-source-note p {
  color: var(--rank-muted);
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.75;
}

.rank-source-actions {
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
  display: flex;
}

.rank-source-actions a {
  border: 1px solid var(--border);
  min-height: 36px;
  color: var(--foreground);
  border-radius: 999px;
  align-items: center;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
}

.rank-source-actions a:first-child {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
}

.rank-source-actions a:hover {
  opacity: .9;
}

@media (min-width: 761px) and (max-width: 1080px) {
  .rank-table-head, .rank-table-row {
    grid-template-columns: 32px minmax(150px, 1fr) 85px repeat(3, minmax(70px, .3fr)) 30px;
    gap: 10px;
    padding-inline: 18px;
  }
}

@media (max-width: 760px) {
  .rank-table-head {
    display: none;
  }

  .rank-table-row {
    grid-template-columns: 24px minmax(0, 1fr) auto;
    grid-template-areas: "rank model score"
                         ". metrics metrics";
    gap: 10px 8px;
    min-height: 0;
    padding: 16px 12px;
  }

  .rank-position {
    grid-area: rank;
    font-size: 12px;
  }

  .rank-model {
    grid-area: model;
    gap: 8px;
  }

  .rank-model-copy > a, .rank-model-copy > span {
    font-size: 12px;
  }

  .rank-model-copy small {
    font-size: 10px;
  }

  .rank-score {
    grid-area: score;
    max-width: 92px;
  }

  .rank-score strong {
    overflow-wrap: anywhere;
    font-size: 18px;
  }

  .rank-score small {
    max-width: 80px;
    color: var(--rank-muted);
    margin-top: 3px;
    font-size: 10px;
    display: block;
  }

  .rank-metric-cell, .rank-origin {
    display: none;
  }

  .rank-metrics-mobile {
    grid-area: metrics;
    padding-top: 2px;
    display: grid;
  }

  .rank-metrics small {
    font-size: 10px;
  }

  .rank-metrics b {
    font-size: 11px;
  }
}

.rank-hub-finder {
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-top: 26px;
  display: flex;
}

.rank-hub-search-field {
  border: 1px solid var(--input);
  background: var(--card);
  width: min(100%, 420px);
  height: 44px;
  color: var(--muted-foreground);
  border-radius: 6px;
  align-items: center;
  gap: 10px;
  padding: 0 13px;
  display: flex;
}

.rank-hub-search-field:focus-within {
  border-color: var(--ring);
  box-shadow: var(--field-focus-shadow);
}

.rank-hub-search-field svg {
  flex: none;
}

.rank-hub-search-field input {
  min-width: 0;
  height: 100%;
  color: var(--foreground);
  caret-color: var(--primary);
  background: none;
  border: 0;
  outline: 0;
  flex: 1;
  font-size: 13px;
}

.rank-hub-search-field input::placeholder {
  color: var(--muted-foreground);
}

.rank-hub-search-field input::-webkit-search-cancel-button {
  display: none;
}

.rank-hub-filter-row {
  flex-wrap: wrap;
  gap: 6px;
  display: flex;
}

.rank-hub-filter-row button {
  min-height: 40px;
  color: var(--muted-foreground);
  cursor: pointer;
  border-radius: 6px;
  align-items: center;
  gap: 7px;
  padding: 0 13px;
  font-size: 12px;
  display: inline-flex;
}

.rank-hub-filter-row button:hover {
  background: var(--muted);
  color: var(--foreground);
}

.rank-hub-filter-row button[aria-pressed="true"] {
  background: var(--accent);
  color: var(--primary);
  font-weight: 650;
}

.rank-hub-filter-row button span {
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}

.rank-hub-results-heading {
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin: 30px 0 20px;
  display: flex;
}

.rank-hub-results-heading h2 {
  font-size: 20px;
  font-weight: 650;
}

.rank-hub-results-heading > span {
  color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

.rank-hub-group-stack {
  gap: 32px;
  display: grid;
}

.rank-hub-reading-note {
  border-top: 1px solid var(--border);
  gap: 22px;
  margin-top: 32px;
  padding: 20px 0;
  display: flex;
}

.rank-hub-reading-note strong {
  flex: none;
  font-size: 13px;
  font-weight: 650;
}

.rank-hub-reading-note p {
  max-width: 90ch;
  color: var(--muted-foreground);
  font-size: 12px;
  line-height: 1.8;
}

.rank-hub-empty {
  text-align: center;
  justify-items: center;
  gap: 10px;
  padding: 56px 18px;
  display: grid;
}

.rank-hub-empty > svg {
  color: var(--muted-foreground);
}

.rank-hub-empty h3 {
  font-size: 18px;
  font-weight: 650;
}

.rank-hub-empty p {
  color: var(--muted-foreground);
  font-size: 13px;
}

.rank-hub-empty button {
  min-height: 40px;
  color: var(--primary);
  cursor: pointer;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
  font-size: 13px;
  display: inline-flex;
}

.rank-hub-group {
  border-top: 1px solid var(--border);
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 40px;
  padding-top: 24px;
  display: grid;
}

.rank-hub-group-heading h3 {
  font-size: 17px;
  font-weight: 650;
}

.rank-hub-group-heading p {
  max-width: 25ch;
  color: var(--muted-foreground);
  margin-top: 9px;
  font-size: 12px;
  line-height: 1.8;
}

.rank-hub-board-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 32px;
  list-style: none;
  display: grid;
}

.rank-hub-board-grid li {
  min-width: 0;
}

.rank-hub-board-card {
  border-bottom: 1px solid var(--border);
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  min-height: 126px;
  margin-bottom: 20px;
  padding: 2px 0 20px;
  display: flex;
}

.rank-hub-board-card:hover .rank-hub-board-main strong {
  color: var(--primary);
}

.rank-hub-board-main {
  gap: 7px;
  display: grid;
}

.rank-hub-board-main strong {
  font-size: 15px;
  font-weight: 650;
  line-height: 1.5;
}

.rank-hub-board-main > span {
  color: var(--muted-foreground);
  font-size: 12px;
  line-height: 1.6;
}

.rank-hub-board-footer {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  display: flex;
}

.rank-hub-board-footer small {
  color: var(--muted-foreground);
  font-size: 11px;
  line-height: 1.5;
}

.rank-hub-board-footer > span {
  min-height: 26px;
  color: var(--rank-accent);
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
}

@media (max-width: 1050px) {
  .rank-hub-finder {
    flex-wrap: wrap;
    gap: 12px;
  }

  .rank-hub-group {
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 24px;
  }
}

@media (max-width: 760px) {
  .rank-hub-finder {
    margin-top: 20px;
    display: block;
  }

  .rank-hub-search-field {
    width: 100%;
  }

  .rank-hub-filter-row {
    gap: 2px;
    margin-top: 12px;
  }

  .rank-hub-filter-row button {
    padding-inline: 9px;
  }

  .rank-hub-results-heading {
    margin-block: 24px 16px;
  }

  .rank-hub-results-heading h2 {
    font-size: 18px;
  }

  .rank-hub-group {
    grid-template-columns: 1fr;
    gap: 20px;
    padding-top: 20px;
  }

  .rank-hub-group-heading p {
    max-width: none;
    margin-top: 5px;
  }

  .rank-hub-board-grid {
    grid-template-columns: 1fr;
  }

  .rank-hub-board-card {
    gap: 14px;
    min-height: 0;
    margin-bottom: 18px;
    padding-bottom: 18px;
  }

  .rank-hub-reading-note {
    display: block;
  }

  .rank-hub-reading-note p {
    margin-top: 8px;
  }
}

.visits-page-table-region {
  scrollbar-color: var(--input) transparent;
  overflow-x: auto;
}

.visits-page-table {
  border-collapse: collapse;
  text-align: left;
  width: 100%;
  font-size: 13px;
}

.visits-page-table thead {
  background: var(--muted);
  color: var(--muted-foreground);
  font-size: 11px;
}

.visits-page-table thead th {
  height: 41px;
  padding: 10px 24px;
  font-weight: 650;
}

.visits-page-table thead th:first-child {
  width: 86px;
}

.visits-page-table thead th:nth-child(2) {
  width: 40%;
}

.visits-page-table thead th:nth-child(n+4) {
  text-align: right;
}

.visits-page-table tbody tr {
  border-top: 1px solid var(--rank-line);
}

.visits-page-table tbody tr[data-rank="1"] {
  background: var(--card);
}

.visits-page-table tbody tr:hover {
  background: var(--surface-hover);
}

.visits-page-table tbody td, .visits-page-table tbody th {
  height: 62px;
  padding: 12px 24px;
}

.visits-page-position {
  font-variant-numeric: tabular-nums;
  color: var(--rank-muted);
  padding-right: 0 !important;
}

.visits-page-position > span {
  border-radius: var(--radius-badge);
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 48px;
  min-height: 28px;
  font-size: 12px;
  font-weight: 650;
  display: inline-flex;
}

.visits-page-table tr[data-rank="1"] .visits-page-position > span, .visits-page-table tr[data-rank="2"] .visits-page-position > span, .visits-page-table tr[data-rank="3"] .visits-page-position > span {
  color: var(--primary);
  font-size: 15px;
  font-weight: 700;
}

.visits-page-product {
  overflow-wrap: anywhere;
  font-weight: 650;
}

.visits-page-product a {
  align-items: center;
  gap: 5px;
  min-height: 32px;
  display: inline-flex;
}

.visits-page-product a:hover {
  color: var(--primary);
}

.visits-page-product svg {
  color: var(--rank-muted);
  flex: none;
}

.visits-page-region {
  color: var(--rank-muted);
  white-space: nowrap;
}

.visits-page-visits {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.visits-page-visits strong {
  color: var(--foreground);
  letter-spacing: -.025em;
  font-size: 18px;
  font-weight: 650;
}

.visits-page-visits small, .visits-page-mobile-label {
  display: none;
}

.visits-page-change {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--rank-muted);
}

.visits-page-change > span:last-child {
  align-items: center;
  gap: 3px;
  display: inline-flex;
}

.visits-page-change[data-trend="up"] {
  color: var(--success);
}

.visits-page-change[data-trend="down"] {
  color: var(--destructive);
}

@media (max-width: 760px) {
  .visits-page-table, .visits-page-table tbody {
    display: block;
  }

  .visits-page-table thead {
    display: none;
  }

  .visits-page-table tbody tr {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    grid-template-areas: "rank product product"
                         ". region visits"
                         ". change visits";
    align-items: center;
    gap: 3px 10px;
    padding: 12px 14px;
    display: grid;
  }

  .visits-page-table tbody td, .visits-page-table tbody th {
    height: auto;
    padding: 0;
  }

  .visits-page-position {
    grid-area: rank;
  }

  .visits-page-position > span {
    width: 44px;
  }

  .visits-page-product {
    grid-area: product;
    font-size: 13px;
  }

  .visits-page-product a {
    min-height: 30px;
  }

  .visits-page-region {
    grid-area: region;
    font-size: 11px;
  }

  .visits-page-visits {
    grid-area: visits;
  }

  .visits-page-visits strong {
    font-size: 17px;
  }

  .visits-page-visits small {
    color: var(--rank-muted);
    margin-top: 3px;
    font-size: 10px;
    display: block;
  }

  .visits-page-change {
    text-align: left;
    grid-area: change;
    font-size: 11px;
  }

  .visits-page-mobile-label {
    color: var(--rank-muted);
    margin-right: 7px;
    display: inline;
  }

  .models-page {
    padding: 20px 16px 40px;
  }

  .models-breadcrumbs {
    margin-bottom: 20px;
    font-size: 11px;
  }

  .ranking-heading {
    padding-bottom: 22px;
  }

  .ranking-heading h1 {
    font-size: 29px;
  }

  .ranking-heading > p {
    margin-top: 10px;
    font-size: 13px;
  }

  .ranking-heading-meta {
    gap: 4px 16px;
    margin-top: 12px;
    font-size: 11px;
  }

  .ranking-families {
    gap: 24px;
  }

  .ranking-families a {
    gap: 6px;
    min-height: 48px;
    font-size: 12px;
  }

  .ranking-families svg {
    width: 16px;
    height: 16px;
  }

  .ranking-related {
    padding-block: 10px 14px;
  }

  .ranking-related a {
    min-height: 40px;
    padding-inline: 10px;
  }

  .ranking-board-toolbar {
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px;
  }

  .ranking-board-toolbar h2 {
    font-size: 14px;
  }

  .ranking-board-toolbar > div > span {
    font-size: 11px;
  }

  .ranking-search {
    width: 100%;
  }

  .ranking-search label {
    flex: 1;
    width: auto;
    height: 42px;
  }

  .ranking-search button {
    min-height: 42px;
  }

  .ranking-board-note {
    padding: 14px 16px;
    display: block;
  }

  .ranking-board-note > span {
    margin-top: 4px;
    display: block;
  }
}

body:has(.category-explorer) {
  background: var(--background);
}

.category-explorer {
  padding-block: 0 96px;
}

body:has(.category-explorer) .site-header {
  border-bottom-color: var(--border);
  box-shadow: none;
}

body:has(.category-explorer) .site-header-search {
  display: none;
}

body:has(.category-explorer) .site-desktop-navigation [aria-current="page"] {
  position: relative;
}

body:has(.category-explorer) .site-desktop-navigation [aria-current="page"]:after {
  background: var(--brand);
  content: "";
  border-radius: 2px;
  height: 2px;
  position: absolute;
  bottom: -13px;
  left: 0;
  right: 0;
}

.explore-hero {
  --explore-hero-ink: var(--foreground);
  --explore-hero-muted: var(--foreground);
}

@supports (color: color-mix(in lab, red, red)) {
  .explore-hero {
    --explore-hero-muted: color-mix(in srgb, var(--foreground) 76%, var(--background));
  }
}

.explore-hero {
  isolation: isolate;
  min-height: 380px;
  color: var(--explore-hero-ink);
  margin-bottom: 28px;
  padding: 128px 24px 48px;
  position: relative;
  overflow: hidden;
}

.explore-marquee {
  pointer-events: none;
  height: 184px;
  position: absolute;
  inset: 0 0 auto;
}

.explore-marquee:before {
  background-image: linear-gradient(-45deg, #6864f733, var(--brand), #369eff33, #95f3d933);
}

@supports (color: color-mix(in lab, red, red)) {
  .explore-marquee:before {
    background-image: linear-gradient(-45deg, #6864f733, color-mix(in srgb, var(--brand) 20%, transparent), #369eff33, #95f3d933);
  }
}

.explore-marquee:before {
  content: "";
  -webkit-mask-composite: source-in;
  background-position: 50%;
  background-size: 400% 400%;
  animation: 5s 5s infinite paused explore-glow-shift;
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(90deg, #0000, #000 18% 82%, #0000), linear-gradient(#000, #0000 96%);
  mask-image: linear-gradient(90deg, #0000, #000 18% 82%, #0000), linear-gradient(#000, #0000 96%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.explore-marquee-art {
  -webkit-mask-composite: source-in;
  height: 100%;
  padding-top: 8px;
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #0000, #000 18% 82%, #0000), linear-gradient(#000000a8, #00000061 42%, #0000 70%);
  mask-image: linear-gradient(90deg, #0000, #000 18% 82%, #0000), linear-gradient(#000000a8, #00000061 42%, #0000 70%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.explore-marquee-row {
  --logo-size: 52px;
  margin-bottom: 10px;
  overflow: hidden;
}

.explore-marquee-row:nth-child(2) {
  --logo-size: 47px;
}

.explore-marquee-row:nth-child(3) {
  --logo-size: 42px;
}

.explore-marquee-track {
  width: max-content;
  animation: explore-logo-scroll var(--marquee-duration) linear infinite;
  animation-play-state: paused;
  display: flex;
}

.explore-marquee-row:nth-child(2) .explore-marquee-track {
  animation-direction: reverse;
}

.explore-marquee[data-visible="true"] .explore-marquee-track, .explore-marquee[data-visible="true"]:before {
  animation-play-state: running;
}

.explore-marquee-group {
  flex: none;
  justify-content: space-around;
  align-items: center;
  gap: 30px;
  min-width: 100vw;
  padding-right: 30px;
  display: flex;
}

.explore-marquee-logo {
  width: var(--logo-size);
  height: var(--logo-size);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--primary);
  border-radius: 10px;
  flex: none;
  place-items: center;
  padding: 5px;
  display: grid;
  overflow: hidden;
}

.explore-marquee-logo img {
  object-fit: contain;
  border-radius: 3px;
  width: 100%;
  height: 100%;
}

@keyframes explore-logo-scroll {
  to {
    transform: translate(-50%);
  }
}

@keyframes explore-glow-shift {
  0%, to {
    background-position: 0%;
  }

  50% {
    background-position: 100%;
  }
}

.explore-hero-main {
  text-align: center;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  width: 100%;
  display: flex;
  position: relative;
}

.explore-hero-copy {
  min-width: 0;
}

.explore-hero h1 {
  color: var(--explore-hero-ink);
  letter-spacing: -.02em;
  text-wrap: balance;
  font-size: clamp(34px, 3.7vw, 52px);
  font-weight: 780;
  line-height: 1.2;
}

.explore-title-accent {
  color: var(--primary);
  white-space: nowrap;
  display: inline-block;
}

.explore-intro {
  color: var(--explore-hero-ink);
  margin-top: 22px;
  font-size: 20px;
  line-height: 1.5;
}

.explore-tools {
  width: min(100%, 560px);
}

.explore-search {
  border: 1px solid var(--border);
}

@supports (color: color-mix(in lab, red, red)) {
  .explore-search {
    border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  }
}

.explore-search {
  background: var(--card);
  min-height: 62px;
  color: var(--explore-hero-muted);
  box-shadow: 0 2px 4px -2px var(--shadow-color);
  transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
  border-radius: 12px;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  display: flex;
}

.explore-search:hover {
  border-color: var(--input);
}

.explore-search:focus-within {
  border-color: var(--ring);
  box-shadow: var(--field-focus-shadow);
}

.explore-search-brand {
  flex: none;
  place-items: center;
  width: 22px;
  height: 22px;
  display: grid;
}

.explore-search-brand img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.explore-search > svg {
  flex: none;
}

.explore-search input {
  width: 100%;
  min-width: 0;
  color: var(--foreground);
  caret-color: var(--foreground);
  font: inherit;
  background: none;
  border: 0;
  outline: 0;
  font-size: 14px;
}

.explore-search input::placeholder {
  color: var(--explore-hero-muted);
  opacity: 1;
}

.explore-search input::-webkit-search-cancel-button {
  display: none;
}

.explore-search button {
  width: 30px;
  height: 30px;
  color: var(--explore-hero-muted);
  cursor: pointer;
  border-radius: 50%;
  flex: none;
  place-items: center;
  display: grid;
}

.explore-search button:hover {
  background: var(--muted);
  color: var(--primary);
}

.explore-totals strong {
  color: var(--primary);
  font-size: inherit;
  font-variant-numeric: tabular-nums;
  margin-inline: 2px;
  font-weight: 650;
}

.explore-hero ::selection {
  background: var(--brand);
}

@supports (color: color-mix(in lab, red, red)) {
  .explore-hero ::selection {
    background: color-mix(in srgb, var(--brand) 28%, var(--white));
  }
}

.explore-hero ::selection {
  color: var(--neutral-ink);
}

.explore-layout {
  min-width: 0;
}

.explore-sidebar {
  flex-direction: column;
  gap: 4px;
  display: flex;
}

.explore-content {
  min-width: 0;
}

.explore-results {
  color: var(--muted-foreground);
  margin-bottom: 24px;
  font-size: 13px;
}

.explore-section {
  min-width: 0;
  scroll-margin-top: calc(var(--site-header-height) + 24px);
  margin-bottom: 50px;
}

.explore-section-head {
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 13px;
  display: flex;
}

.explore-section-head > div {
  flex-wrap: wrap;
  align-items: baseline;
  gap: 9px;
  min-width: 0;
  display: flex;
}

.explore-section-head h2 {
  color: var(--foreground);
  letter-spacing: -.025em;
  font-size: 26px;
  font-weight: 730;
}

.explore-section-head span {
  color: var(--muted-foreground);
  white-space: nowrap;
  font-size: 12px;
}

.explore-direction-bar {
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
  margin-bottom: 16px;
  display: flex;
}

.explore-direction-tabs {
  flex-wrap: wrap;
  flex: 1;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 2px 1px;
  display: flex;
}

.explore-direction-tabs a {
  border: 1px solid var(--border);
  border-radius: var(--radius-badge);
  background: var(--card);
  min-height: 28px;
  color: var(--foreground);
  cursor: pointer;
  flex: none;
  padding: 4px 10px;
  font-size: 12px;
  line-height: 1.4;
}

.explore-direction-tabs a:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.explore-direction-tabs a[aria-current="true"] {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--primary-foreground);
}

.explore-direction-bar > a {
  color: var(--primary);
  white-space: nowrap;
  flex: none;
  align-items: center;
  gap: 3px;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 620;
  display: inline-flex;
}

.explore-direction-bar > a:hover {
  text-underline-offset: 3px;
  text-decoration: underline;
}

.explore-products {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  display: grid;
}

.explore-product {
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--card);
  min-width: 0;
  min-height: 76px;
  transition: border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  display: flex;
}

.explore-product:hover {
  border-color: var(--primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .explore-product:hover {
    border-color: color-mix(in srgb, var(--primary) 48%, var(--border));
  }
}

.explore-product:hover {
  background: var(--primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .explore-product:hover {
    background: color-mix(in srgb, var(--primary) 3%, var(--card));
  }
}

.explore-product-logo {
  background: var(--muted);
  border-radius: 10px;
  flex: none;
  place-items: center;
  width: 42px;
  height: 42px;
  display: grid;
  overflow: hidden;
}

.explore-product-fallback {
  width: 100%;
  height: 100%;
  color: var(--primary);
  place-items: center;
  font-size: 18px;
  font-weight: 750;
  display: grid;
}

.explore-product-text {
  gap: 3px;
  min-width: 0;
  display: grid;
}

.explore-product-text strong, .explore-product-text small {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.explore-product-text strong {
  color: var(--foreground);
  font-size: 13px;
  font-weight: 680;
}

.explore-product-text small {
  color: var(--muted-foreground);
  font-size: 11px;
  line-height: 1.5;
}

.explore-no-products {
  color: var(--muted-foreground);
  padding: 11px 0;
  font-size: 12px;
}

.explore-no-products a {
  color: var(--primary);
}

.explore-empty {
  color: var(--muted-foreground);
  padding: 56px 0;
  font-size: 14px;
}

.category-explorer a:focus-visible, .category-explorer button:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

@media (max-width: 1350px) {
  .explore-products {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (max-width: 1120px) {
  .explore-products {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 981px) {
  .explore-layout {
    display: block;
  }
}

@media (max-width: 980px) {
  .explore-sidebar {
    top: var(--site-header-height);
    z-index: 15;
    border-bottom: 1px solid var(--border);
    background: var(--background);
    scrollbar-width: none;
    flex-direction: row;
    gap: 4px;
    padding: 8px 0;
    position: sticky;
    overflow-x: auto;
  }

  .explore-sidebar a {
    white-space: nowrap;
    flex: none;
  }

  .explore-section {
    scroll-margin-top: 125px;
  }

  .explore-products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .category-explorer {
    padding-block: 0 68px;
  }

  .explore-hero {
    min-height: 350px;
    margin-bottom: 24px;
    padding: 112px 8px 32px;
  }

  .explore-marquee {
    height: 152px;
  }

  .explore-marquee-row {
    --logo-size: 46px;
  }

  .explore-marquee-row:nth-child(2) {
    --logo-size: 41px;
  }

  .explore-marquee-row:nth-child(3) {
    --logo-size: 36px;
  }

  .explore-marquee-logo {
    padding: 5px;
  }

  .explore-hero-main {
    gap: 24px;
  }

  .explore-hero h1 {
    font-size: clamp(28px, 7.6vw, 40px);
    line-height: 1.35;
  }

  .explore-intro {
    margin-top: 18px;
    font-size: 14px;
    line-height: 1.7;
  }

  .explore-totals > span {
    display: inline-block;
  }

  .explore-search {
    min-height: 56px;
    padding-inline: 16px;
  }

  .explore-tools {
    width: 100%;
  }

  .explore-section-head h2 {
    font-size: 23px;
  }

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

@media (prefers-reduced-motion: reduce) {
  .explore-search {
    transition: none;
  }

  .explore-marquee-track, .explore-marquee:before {
    animation: none;
  }
}

@media (max-width: 430px) {
  .explore-products {
    gap: 8px;
  }

  .explore-product {
    gap: 8px;
    min-height: 66px;
    padding: 8px;
  }

  .explore-product-logo {
    width: 34px;
    height: 34px;
  }

  .explore-product-text strong {
    font-size: 12px;
  }

  .explore-product-text small {
    font-size: 10px;
  }
}

.site-header, .site-sidebar, .site-mobile-navigation, .site-local-sidebar {
  font-family: var(--font-navigation);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:is(.site-sidebar-group > a, .site-local-menu a, .site-local-menu summary) {
  min-height: var(--navigation-item-height);
  border-radius: var(--navigation-item-radius);
  color: var(--navigation-foreground);
  font-family: var(--font-navigation);
  font-size: var(--navigation-font-size);
  font-weight: var(--navigation-font-weight);
  line-height: var(--navigation-line-height);
  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  display: flex;
}

.site-local-menu :is(a, summary) > svg:first-child {
  width: var(--site-icon-size);
  height: var(--site-icon-size);
  color: var(--site-icon-color);
  stroke-width: var(--site-icon-stroke);
  flex: none;
}

.site-local-menu :is(a, summary):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

:is(.site-sidebar-group > a, .site-local-menu a, .site-local-menu summary):hover {
  background: var(--muted);
}

:is(.site-sidebar-group > a, .site-local-menu a):is([aria-current="page"], [aria-current="location"]), .site-sidebar-bottom > a[aria-current="page"] {
  background: var(--accent);
  color: var(--navigation-foreground);
  font-weight: var(--navigation-active-weight);
}

.site-local-menu :is(a, summary):hover > svg:first-child, .site-local-menu a:is([aria-current="page"], [aria-current="location"]) > svg:first-child {
  color: var(--primary);
}

.site-local-back {
  display: none;
}

@media (min-width: 981px) {
  .site-header-menu {
    display: none;
  }

  .site-local-back {
    border-bottom: 1px solid var(--border);
    flex: none;
    width: 100%;
    margin-bottom: 8px;
    padding-bottom: 10px;
    display: block;
  }

  .site-local-back a {
    min-height: var(--navigation-item-height);
    border-radius: var(--navigation-item-radius);
    color: var(--muted-foreground);
    font-size: var(--navigation-font-size);
    font-weight: var(--navigation-font-weight);
    line-height: var(--navigation-line-height);
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    display: flex;
  }

  .site-local-back svg {
    width: var(--site-icon-size);
    height: var(--site-icon-size);
    stroke-width: var(--site-icon-stroke);
  }

  .site-local-back a:hover {
    background: var(--muted);
    color: var(--foreground);
  }

  .site-local-back a:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
  }

  body:has(main[data-site-layout="local-nav"]) .site-desktop-navigation {
    display: flex;
  }

  body:has(main[data-site-layout="local-nav"]) .site-header-search {
    display: none;
  }

  body:has(main[data-site-layout="local-nav"]) .site-header-actions {
    gap: 4px;
  }

  body:has(main[data-site-layout="local-nav"]) .site-header-text-link {
    display: none;
  }

  .site-frame:has(main[data-site-layout="local-nav"]) > .site-sidebar {
    display: none;
  }

  .site-frame:has(main[data-site-layout="local-nav"]) > .site-frame-content {
    grid-column: 2;
  }

  main[data-site-layout="local-nav"] .site-local-sidebar {
    top: var(--site-header-height);
    z-index: 20;
    width: var(--site-rail);
    height: calc(100dvh - var(--site-header-height));
    overscroll-behavior: contain;
    border-right: 1px solid var(--border);
    background: var(--card);
    scrollbar-width: thin;
    flex-direction: column;
    gap: 4px;
    max-height: none;
    padding: 18px 12px 16px;
    display: flex;
    position: fixed;
    left: 0;
    overflow: hidden auto;
  }
}

body:has(.category-directory) {
  background: var(--card);
}

.category-directory {
  padding-block: 28px 100px;
}

.category-breadcrumb {
  color: var(--muted-foreground);
  align-items: center;
  gap: 10px;
  font-size: 12px;
  display: flex;
}

.category-breadcrumb a:hover {
  color: var(--primary);
}

.category-hero {
  border-radius: var(--radius-panel);
  color: #10223c;
  background: #eef7ff;
  align-items: center;
  height: clamp(180px, 15vw, 220px);
  margin-block: 24px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.category-hero-art {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.category-hero-copy {
  width: 50%;
  padding: 28px 36px;
  position: relative;
}

.category-hero-copy h1 {
  color: inherit;
  font-family: var(--font-heading);
  letter-spacing: -.025em;
  margin: 0;
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 750;
  line-height: 1.2;
}

.category-hero-copy h1 span {
  color: var(--brand);
}

.category-hero-copy p {
  color: #334f70;
  text-wrap: pretty;
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.65;
}

.category-hero-copy .category-hero-totals {
  flex-wrap: wrap;
  gap: 0 4px;
  font-size: 16px;
  font-weight: 600;
  display: flex;
}

.category-hero-totals span {
  white-space: nowrap;
}

.category-hero-totals strong {
  color: var(--brand);
  font-variant-numeric: tabular-nums;
  font-weight: 750;
}

.category-layout {
  grid-template-columns: 208px minmax(0, 1fr);
  align-items: start;
  gap: 32px;
  padding-top: 8px;
  display: grid;
}

.category-sidebar {
  top: calc(var(--site-header-height) + 24px);
  max-height: calc(100dvh - var(--site-header-height) - 48px);
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--input) transparent;
  border-right: 1px solid var(--border);
  flex-direction: column;
  gap: 4px;
  padding: 4px 16px 4px 0;
  display: flex;
  position: sticky;
  overflow-y: auto;
}

.category-content {
  min-width: 0;
}

.category-sections {
  flex-direction: column;
  gap: 36px;
  display: flex;
}

.category-section {
  min-width: 0;
  scroll-margin-top: calc(var(--site-header-height) + 24px);
}

.category-section-title {
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  display: flex;
}

.category-section-heading {
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  display: flex;
}

.category-section-heading h2 {
  color: var(--foreground);
  letter-spacing: -.025em;
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 700;
  line-height: 1.3;
}

.category-section-heading span {
  color: var(--muted-foreground);
  white-space: nowrap;
  font-size: 12px;
}

.category-parent-link {
  min-height: 36px;
  color: var(--primary);
  flex: none;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
}

.category-parent-link:hover {
  text-underline-offset: 4px;
  text-decoration: underline;
}

.category-children {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 16px;
  min-width: 0;
  display: grid;
}

.category-child {
  border-radius: var(--radius-badge);
  background: var(--muted);
  min-width: 0;
  min-height: 44px;
  color: var(--foreground);
  transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
  border: 1px solid #0000;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  font-size: 14px;
  line-height: 1.5;
  display: flex;
}

.category-child:hover {
  border-color: var(--primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .category-child:hover {
    border-color: color-mix(in srgb, var(--primary) 28%, transparent);
  }
}

.category-child:hover {
  background: var(--primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .category-child:hover {
    background: color-mix(in srgb, var(--primary) 8%, var(--card));
  }
}

.category-child:hover {
  color: var(--foreground);
}

.category-child span {
  overflow-wrap: anywhere;
}

.category-child small {
  color: var(--primary);
  font-variant-numeric: tabular-nums;
  flex: none;
  font-size: 13px;
}

.category-empty, .category-error {
  color: var(--muted-foreground);
  padding: 56px 0;
  font-size: 14px;
}

.category-directory a:focus-visible, .category-directory button:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

@media (max-width: 1100px) {
  .category-layout {
    grid-template-columns: 176px minmax(0, 1fr);
    gap: 24px;
  }

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

@media (min-width: 981px) {
  .category-layout {
    display: block;
  }

  .category-sidebar {
    border-right: 0;
    max-height: none;
    padding: 0;
    position: static;
    overflow: visible;
  }
}

@media (max-width: 800px) {
  .category-hero {
    height: 120px;
  }

  .category-hero-copy {
    width: 60%;
    padding: 20px;
  }

  .category-hero-copy h1 {
    font-size: clamp(24px, 4.6vw, 32px);
  }

  .category-hero-copy p {
    margin-top: 10px;
    font-size: 12px;
  }

  .category-hero-copy .category-hero-totals {
    font-size: 12px;
  }

  .category-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    padding-top: 0;
  }

  .category-sidebar {
    z-index: 20;
    border-right: 0;
    border-bottom: 1px solid var(--border);
    background: var(--card);
    flex-direction: row;
    gap: 4px;
    max-height: none;
    padding: 8px 0;
    top: 64px;
    overflow-x: auto;
  }

  .category-sidebar a {
    white-space: nowrap;
    padding: 10px 14px;
  }

  .category-section {
    scroll-margin-top: 148px;
  }

  .category-sections {
    gap: 32px;
  }
}

@media (max-width: 480px) {
  .category-directory {
    padding-block: 20px 64px;
  }

  .category-section-heading {
    gap: 4px 8px;
  }

  .category-section-heading h2 {
    font-size: 22px;
  }

  .category-children {
    gap: 10px;
  }

  .category-child {
    gap: 8px;
    padding: 10px;
    font-size: 13px;
  }

  .category-child small {
    font-size: 12px;
  }

  .category-parent-link {
    font-size: 11px;
  }
}

@font-face {
  font-family: Maomu News Lexend;
  src: url("/fonts/lexend-variable.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}

:root:not(.dark) body:has(.news-page) {
  background: var(--card);
}

:root:not(.dark) .site-frame-content:has(.news-page) .site-footer {
  background: var(--card);
}

body:has(.news-page) {
  min-width: 0;
}

.news-page {
  --news-accent: var(--primary);
  --news-secondary: var(--foreground);
}

@supports (color: color-mix(in lab, red, red)) {
  .news-page {
    --news-secondary: color-mix(in srgb, var(--foreground) 72%, var(--card));
  }
}

.news-page {
  width: 100%;
  padding-bottom: 64px;
  font-family: Maomu News Lexend, -apple-system, system-ui, sans-serif;
}

.news-container {
  width: min(100% - 64px, 1200px);
  margin-inline: auto;
}

.news-page :is(a, button):focus-visible {
  outline: 2px solid var(--news-accent);
  outline-offset: 4px;
}

.news-masthead {
  background: var(--brand);
}

@supports (color: color-mix(in lab, red, red)) {
  .news-masthead {
    background: color-mix(in srgb, var(--brand) 6%, var(--card));
  }
}

.news-masthead {
  min-height: 200px;
  padding: 24px 0 40px;
}

.news-breadcrumb {
  color: var(--news-secondary);
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  font-size: 13px;
  line-height: 1.5;
  display: flex;
}

.news-breadcrumb a:hover {
  color: var(--foreground);
  text-underline-offset: 4px;
  text-decoration: underline;
}

.news-topline {
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  display: flex;
}

.news-topline-copy {
  min-width: 0;
}

.news-title-row {
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
  display: flex;
}

.news-topline-copy h1 {
  letter-spacing: -.025em;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.3;
}

.news-title-accent {
  color: var(--news-accent);
}

.news-live-label {
  color: var(--news-accent);
  white-space: nowrap;
  font-size: 14px;
  font-weight: 500;
}

.news-live-label[data-unavailable] {
  color: var(--news-secondary);
}

.news-topline-copy p {
  color: var(--foreground);
  margin-top: 14px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.7;
}

.news-topline-actions {
  flex-wrap: wrap;
  flex: none;
  justify-content: flex-end;
  align-items: center;
  gap: 8px 12px;
  max-width: 300px;
  display: flex;
}

.news-topline-latest {
  color: var(--news-secondary);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

.news-topline-actions [role="status"] {
  color: var(--news-secondary);
  text-align: right;
  flex-basis: 100%;
  font-size: 12px;
}

.news-topline-actions [role="status"]:empty {
  display: none;
}

.news-refresh {
  min-height: 40px;
}

.news-spinning {
  animation: 1s linear infinite news-spin;
}

@keyframes news-spin {
  to {
    transform: rotate(360deg);
  }
}

.news-layout {
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: start;
  gap: 32px;
  margin-top: 32px;
  display: grid;
}

.news-layout[data-single-column] {
  grid-template-columns: minmax(0, 848px);
}

.news-primary {
  min-width: 0;
}

.news-newer {
  border-radius: var(--radius-control);
  background: var(--muted);
  width: 100%;
  min-height: 44px;
  color: var(--foreground);
  cursor: pointer;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  font-size: 14px;
  font-weight: 500;
  display: flex;
}

.news-newer:hover {
  background: var(--accent);
}

.news-day + .news-day {
  margin-top: 32px;
}

.news-day-topline {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  display: flex;
}

.news-day-topline .news-day-heading {
  margin-bottom: 0;
}

.news-sound-control {
  flex: none;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 13px;
  display: flex;
}

.news-sound-control label {
  cursor: pointer;
}

.news-sound-switch {
  background: var(--news-secondary);
  width: 44px;
  height: 22px;
  color: var(--primary-foreground);
  cursor: pointer;
  border-radius: 999px;
  align-items: center;
  padding: 2px;
  display: flex;
  position: relative;
}

.news-sound-switch:after {
  content: "";
  position: absolute;
  inset: -11px -2px;
}

.news-sound-switch[data-checked] {
  background: var(--news-accent);
}

.news-sound-switch:focus-visible {
  outline: 2px solid var(--news-accent);
  outline-offset: 4px;
}

.news-sound-thumb {
  background: var(--primary-foreground);
  border-radius: 50%;
  width: 18px;
  height: 18px;
}

.news-sound-switch[data-checked] .news-sound-thumb {
  margin-left: 22px;
}

.news-sound-state {
  font-size: 11px;
  line-height: 1;
  position: absolute;
  right: 6px;
}

.news-sound-switch[data-checked] .news-sound-state {
  left: 6px;
  right: auto;
}

.news-day-heading {
  align-items: center;
  gap: 7px;
  min-height: 36px;
  margin-bottom: 24px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  display: flex;
}

.news-day-heading > svg, .news-aside-heading > svg {
  color: var(--news-accent);
  flex: none;
}

.news-day-heading > span {
  flex: 1;
}

.news-day-heading small {
  color: var(--news-secondary);
  white-space: nowrap;
  font-size: 12px;
  font-weight: 400;
}

.news-day-list {
  position: relative;
}

.news-day-list:before {
  background: var(--border);
  content: "";
  width: 1px;
  position: absolute;
  top: 19px;
  bottom: 36px;
  left: 61px;
}

.news-entry {
  grid-template-columns: 80px minmax(0, 1fr);
  padding: 8px 0 32px;
  display: grid;
  position: relative;
}

.news-entry-time {
  color: var(--foreground);
  font-variant-numeric: tabular-nums;
  align-items: flex-start;
  padding-top: 1px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  display: flex;
}

.news-entry-dot {
  border: 2px solid var(--news-accent);
  background: var(--card);
  border-radius: 50%;
  width: 7px;
  height: 7px;
  position: absolute;
  top: 17px;
  left: 58px;
}

.news-entry-body {
  grid-template-rows: min-content min-content;
  grid-template-columns: minmax(0, 1fr) 128px;
  align-content: start;
  gap: 4px 24px;
  min-width: 0;
  display: grid;
}

.news-entry-body:not(:has(.news-entry-cover)) {
  grid-template-columns: minmax(0, 1fr);
}

.news-entry-link {
  min-width: 0;
  color: inherit;
  grid-area: 1 / 1;
}

.news-cover-link {
  grid-area: 1 / 2 / 3;
  align-self: start;
}

.news-cover-link:not(:has(img)) {
  display: none;
}

.news-entry h3 {
  letter-spacing: -.015em;
  overflow-wrap: anywhere;
  text-wrap: pretty;
  transition: color var(--duration-fast) var(--ease-out);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
}

.news-entry-link:hover h3 {
  color: var(--news-accent);
}

.news-entry p {
  color: var(--news-secondary);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-top: 12px;
  font-size: 16px;
  font-weight: 400;
  line-height: 2;
  display: -webkit-box;
  overflow: hidden;
}

.news-entry-meta {
  color: var(--news-secondary);
  flex-wrap: wrap;
  grid-area: 2 / 1;
  align-items: center;
  gap: 4px 8px;
  font-size: 13px;
  line-height: 1.6;
  display: flex;
}

.news-entry-meta a:hover {
  color: var(--news-accent);
  text-underline-offset: 4px;
  text-decoration: underline;
}

.news-report-count {
  margin-left: 4px;
  font-size: 12px;
}

.news-entry-cover {
  object-fit: cover;
  border-radius: 8px;
  width: 128px;
  height: 90px;
}

.news-aside {
  top: calc(var(--site-header-height) + 24px);
  border-left: 1px solid var(--border);
  min-width: 0;
  padding-left: 24px;
  position: sticky;
}

.news-aside-heading {
  align-items: center;
  gap: 7px;
  min-height: 36px;
  margin-bottom: 24px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  display: flex;
}

.news-hot ol {
  margin-left: 7px;
  list-style: none;
  position: relative;
}

.news-hot ol:before {
  background: var(--border);
  content: "";
  width: 1px;
  position: absolute;
  top: 12px;
  bottom: 32px;
  left: 0;
}

.news-hot li {
  padding: 2px 0 24px 22px;
  position: relative;
}

.news-hot li:before {
  border: 2px solid var(--news-accent);
  background: var(--card);
  content: "";
  border-radius: 50%;
  width: 9px;
  height: 9px;
  position: absolute;
  top: 11px;
  left: -4px;
}

.news-hot li a {
  font-size: 14px;
  line-height: 1.8;
}

.news-hot li h3 {
  font-size: inherit;
  font-weight: 400;
  line-height: inherit;
  overflow-wrap: anywhere;
  display: inline;
}

.news-hot li a:hover h3 {
  color: var(--news-accent);
}

.news-hot-time {
  color: var(--news-secondary);
  white-space: nowrap;
}

.news-mobile-read {
  justify-content: center;
  width: 100%;
  height: auto;
  min-height: 0;
  margin-top: 12px;
}

.news-empty {
  text-align: center;
  padding: 48px 20px;
}

.news-empty strong {
  font-size: 20px;
  font-weight: 600;
}

.news-empty p {
  color: var(--news-secondary);
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.8;
}

.news-load-more {
  min-height: 88px;
  color: var(--news-secondary);
  justify-content: center;
  align-items: center;
  padding: 20px 0;
  font-size: 14px;
  display: flex;
}

.news-load-more button {
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--card);
  min-height: 44px;
  color: var(--foreground);
  cursor: pointer;
  justify-content: center;
  align-items: center;
  padding: 0 16px;
  display: inline-flex;
}

.news-load-more button:hover:not(:disabled) {
  background: var(--muted);
}

.news-load-more button:disabled {
  opacity: .55;
  cursor: not-allowed;
}

@media (max-width: 1100px) {
  .news-layout {
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 28px;
  }

  .news-topline {
    gap: 24px;
  }

  .news-topline-copy h1 {
    font-size: 32px;
  }

  .news-topline-copy p {
    font-size: 16px;
  }

  .news-entry-body:has(.news-entry-cover) {
    grid-template-columns: minmax(0, 1fr) 112px;
    gap: 4px 20px;
  }

  .news-entry-cover {
    width: 112px;
    height: 84px;
  }
}

@media (max-width: 880px) {
  .news-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .news-aside {
    border-left: 0;
    border-top: 1px solid var(--border);
    padding: 24px 0 0;
    position: static;
  }

  .news-hot ol {
    columns: 2;
    column-gap: 28px;
  }

  .news-hot li {
    break-inside: avoid;
  }

  .news-hot ol:before, .news-hot li:before {
    display: none;
  }

  .news-hot li {
    padding-left: 0;
  }

  .news-topline {
    flex-direction: column;
    align-items: flex-start;
  }

  .news-topline-actions {
    justify-content: flex-start;
    max-width: none;
  }

  .news-topline-actions [role="status"] {
    text-align: left;
  }
}

@media (max-width: 640px) {
  .news-container {
    width: calc(100% - 32px);
  }

  .news-masthead {
    min-height: 0;
    padding: 20px 0 28px;
  }

  .news-breadcrumb {
    margin-bottom: 16px;
    font-size: 12px;
  }

  .news-topline {
    gap: 20px;
  }

  .news-topline-copy h1 {
    font-size: 30px;
  }

  .news-live-label {
    font-size: 12px;
  }

  .news-topline-copy p {
    margin-top: 10px;
    font-size: 14px;
    font-weight: 400;
  }

  .news-topline-actions {
    justify-content: space-between;
    gap: 8px;
    width: 100%;
  }

  .news-topline-latest {
    font-size: 11px;
  }

  .news-refresh {
    min-height: 44px;
  }

  .news-layout {
    margin-top: 24px;
  }

  .news-day-heading {
    min-height: 32px;
    margin-bottom: 20px;
    font-size: 13px;
  }

  .news-day-heading small {
    font-size: 11px;
  }

  .news-day-topline {
    gap: 8px;
    margin-bottom: 20px;
  }

  .news-day-topline:has(.news-sound-control) .news-day-heading small {
    display: none;
  }

  .news-sound-control {
    gap: 6px;
    font-size: 12px;
  }

  .news-day-list:before {
    display: none;
  }

  .news-entry {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 0 0 28px;
  }

  :is(.news-entry-body, .news-entry-body:has(.news-entry-cover)) {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .news-cover-link {
    display: none;
  }

  .news-entry-dot {
    order: -1;
    align-self: center;
    position: static;
  }

  .news-entry-time {
    color: var(--news-secondary);
    gap: 6px;
    padding-top: 0;
    font-size: 12px;
  }

  .news-entry h3 {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.6;
  }

  .news-entry p {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.8;
  }

  .news-entry-meta {
    gap: 4px 6px;
    font-size: 12px;
  }

  .news-hot ol {
    columns: 1;
  }
}

@media (max-width: 360px) {
  .news-title-row {
    gap: 6px 10px;
  }

  .news-topline-copy h1 {
    font-size: 27px;
  }

  .news-entry h3 {
    font-size: 17px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .news-spinning {
    animation: none;
  }
}

body:has(main[data-site-layout="mobile-reader"]) {
  --site-header-height: 0px;
  background: var(--card);
  min-width: 0;
}

:is(body:has(main[data-site-layout="mobile-reader"]) .site-masthead, body:has(main[data-site-layout="mobile-reader"]) .site-sidebar, body:has(main[data-site-layout="mobile-reader"]) .site-sidebar-footer, body:has(main[data-site-layout="mobile-reader"]) .site-footer, body:has(main[data-site-layout="mobile-reader"]) [aria-label="悬浮工具"]) {
  display: none;
}

.site-frame:has(main[data-site-layout="mobile-reader"]) {
  min-height: 100dvh;
  display: block;
}

.daily-page {
  width: min(100%, 720px);
  margin-inline: auto;
  padding: 0 24px 40px;
}

.daily-page :is(a, button):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 4px;
}

.daily-navigation {
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  display: flex;
}

.daily-navigation a {
  min-height: 44px;
  color: var(--muted-foreground);
  align-items: center;
  gap: 5px;
  font-size: 13px;
  display: inline-flex;
}

.daily-navigation .daily-brand {
  color: var(--foreground);
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
}

.daily-navigation a:hover {
  color: var(--primary);
}

.daily-brand img {
  border-radius: 50%;
}

.daily-banner {
  background: var(--card);
  align-items: center;
  min-height: 220px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.daily-banner-art {
  object-fit: contain;
  object-position: right center;
}

.daily-banner-copy {
  width: 60%;
  padding-block: 28px;
  position: relative;
}

.daily-banner h1 {
  color: var(--foreground);
  letter-spacing: -.025em;
  font-size: clamp(28px, 5vw, 36px);
  font-weight: 700;
  line-height: 1.3;
}

.daily-banner p {
  max-width: 24ch;
  color: var(--muted-foreground);
  text-wrap: pretty;
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.8;
}

.dark .daily-banner-art {
  opacity: .28;
}

.daily-feed {
  margin-top: 16px;
}

.daily-feed-heading {
  border-bottom: 1px solid var(--border);
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-block: 12px;
  display: flex;
}

.daily-feed-heading > div {
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  display: flex;
}

.daily-feed-heading h2 {
  font-size: 17px;
  font-weight: 600;
}

.daily-feed-heading span {
  color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

.daily-refresh {
  min-height: 44px;
}

.daily-item {
  border-bottom: 1px solid var(--border);
  min-height: 120px;
  color: var(--foreground);
  grid-template: "title images" 1fr
                 "meta images"
                 / minmax(0, 1fr) 112px;
  column-gap: 16px;
  padding-block: 20px;
  display: grid;
}

.daily-item:last-child {
  border-bottom: 0;
}

.daily-item h3 {
  overflow-wrap: anywhere;
  text-wrap: pretty;
  grid-area: title;
  align-self: start;
  min-width: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
}

.daily-item:hover h3 {
  color: var(--primary);
}

.daily-item-images {
  grid-area: images;
  align-self: center;
  gap: 6px;
  min-width: 0;
  display: grid;
}

.daily-item-image {
  object-fit: cover;
  background: var(--muted);
  border-radius: 4px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 80px;
  display: block;
}

.daily-item-meta {
  color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
  flex-wrap: wrap;
  grid-area: meta;
  align-items: center;
  gap: 4px 10px;
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.5;
  display: flex;
}

.daily-item--multi {
  flex-direction: column;
  display: flex;
}

.daily-item--multi h3 {
  margin-bottom: 10px;
}

.daily-item--multi .daily-item-images {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-self: stretch;
}

.daily-item--multi .daily-item-image {
  height: clamp(76px, 23vw, 130px);
}

.daily-item--multi .daily-item-images:has( > :nth-child(2):last-child) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.daily-item--text {
  flex-direction: column;
  min-height: 0;
  display: flex;
}

.daily-empty {
  color: var(--muted-foreground);
  text-align: center;
  padding: 48px 0;
  font-size: 14px;
  line-height: 1.8;
}

@media (max-width: 640px) {
  .daily-page {
    padding-inline: 16px;
  }

  .daily-navigation {
    min-height: 56px;
  }

  .daily-banner {
    min-height: 172px;
  }

  .daily-banner h1 {
    font-size: 28px;
  }

  .daily-banner p {
    max-width: 18ch;
    font-size: 12px;
  }

  .daily-feed {
    margin-top: 4px;
  }

  .daily-feed-heading > div {
    display: block;
  }

  .daily-feed-heading span {
    margin-top: 4px;
    font-size: 11px;
    display: block;
  }

  .daily-item {
    grid-template-columns: minmax(0, 1fr) 96px;
    gap: 0 12px;
    padding-block: 20px;
  }

  .daily-item h3 {
    font-size: 18px;
  }

  .daily-item-image {
    height: 76px;
  }

  .daily-item-meta {
    gap: 3px 8px;
    font-size: 11px;
  }
}

@media (max-width: 360px) {
  .daily-banner h1 {
    font-size: 25px;
  }

  .daily-item {
    grid-template-columns: minmax(0, 1fr) 86px;
  }

  .daily-item h3 {
    font-size: 17px;
  }
}

.product-page {
  --product-secondary: var(--foreground);
}

@supports (color: color-mix(in lab, red, red)) {
  .product-page {
    --product-secondary: color-mix(in srgb, var(--foreground) 76%, var(--card));
  }
}

.product-page {
  min-height: calc(100dvh - var(--site-header-height));
  background: var(--card);
  padding: 32px clamp(24px, 5vw, 80px) 72px;
}

.product-inner {
  max-width: 1200px;
  margin-inline: auto;
}

.product-page :is(a, button, summary):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 5px;
  border-radius: 4px;
}

.product-page ::selection {
  background: var(--selection);
  color: var(--selection-foreground);
}

.product-topline {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  display: flex;
}

.product-breadcrumb {
  color: var(--product-secondary);
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  line-height: 1.6;
  display: flex;
}

.product-breadcrumb a:hover {
  color: var(--primary);
}

.product-breadcrumb > span {
  overflow-wrap: anywhere;
}

.product-breadcrumb > svg {
  color: var(--muted-foreground);
}

.product-editorCredit {
  color: var(--product-secondary);
  flex-wrap: wrap;
  gap: 16px;
  font-size: 12px;
  line-height: 1.6;
  display: inline-flex;
}

.product-hero {
  grid-template-columns: minmax(0, 1fr) minmax(0, 46%);
  align-items: center;
  gap: clamp(32px, 5vw, 76px);
  padding-block: 52px 48px;
  display: grid;
}

.product-hero:not(:has(.product-preview)) {
  grid-template-columns: minmax(0, 820px);
}

.product-heroCopy {
  min-width: 0;
}

.product-identity {
  align-items: center;
  gap: 20px;
  display: flex;
}

.product-identity h1 {
  letter-spacing: -.035em;
  text-wrap: balance;
  overflow-wrap: anywhere;
  min-width: 0;
  font-size: clamp(34px, 3.4vw, 48px);
  font-weight: 700;
  line-height: 1.22;
}

.product-logo {
  background: var(--muted);
  border-radius: 15px;
  flex: none;
  place-items: center;
  width: 64px;
  height: 64px;
  display: grid;
  overflow: hidden;
}

.product-logoImage {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.product-logoFallback {
  color: var(--primary);
  font-size: 32px;
  font-weight: 600;
}

.product-categories {
  color: var(--product-secondary);
  flex-wrap: wrap;
  gap: 9px 18px;
  margin-top: 18px;
  font-size: 12px;
  line-height: 1.7;
  display: flex;
}

.product-categories a {
  text-decoration: underline;
  -webkit-text-decoration-color: var(--border);
  -webkit-text-decoration-color: var(--border);
  text-decoration-color: var(--border);
  text-underline-offset: 4px;
}

.product-categories a:hover {
  color: var(--primary);
  text-decoration-color: currentColor;
}

.product-tagline {
  color: var(--foreground);
  letter-spacing: -.01em;
  text-wrap: pretty;
  overflow-wrap: anywhere;
  margin-top: 26px;
  font-size: clamp(21px, 1.8vw, 26px);
  font-weight: 480;
  line-height: 1.65;
}

.product-summary {
  max-width: 36em;
  color: var(--product-secondary);
  text-wrap: pretty;
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.9;
}

.product-actions {
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  display: flex;
}

.product-actions > span > button {
  min-height: 48px;
  padding-inline: 18px;
}

.product-domain {
  max-width: 100%;
  color: var(--product-secondary);
  overflow-wrap: anywhere;
  align-items: center;
  gap: 7px;
  margin-top: 17px;
  font-size: 12px;
  line-height: 1.6;
  display: inline-flex;
}

.product-domain:hover {
  color: var(--primary);
}

.product-domain svg {
  flex: none;
}

.product-preview {
  min-width: 0;
  margin: 0;
}

.product-previewTrigger {
  background: var(--muted);
  cursor: zoom-in;
  border-radius: 14px;
  width: 100%;
  display: block;
  position: relative;
  overflow: hidden;
}

.product-cover {
  aspect-ratio: 1.57;
  object-fit: contain;
  object-position: center;
  width: 100%;
  height: auto;
  transition: filter .24s cubic-bezier(.16, 1, .3, 1);
}

.product-previewTrigger:hover .product-cover {
  filter: brightness(.95);
}

.product-expand {
  background: var(--card);
  width: 32px;
  height: 32px;
  color: var(--foreground);
  border-radius: 8px;
  place-items: center;
  display: grid;
  position: absolute;
  bottom: 12px;
  right: 12px;
}

.product-preview figcaption {
  color: var(--product-secondary);
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-top: 14px;
  font-size: 12px;
  line-height: 1.75;
  display: flex;
}

.product-preview figcaption > span:first-child {
  gap: 12px;
  display: flex;
}

.product-preview figcaption strong {
  color: var(--foreground);
  white-space: nowrap;
  font-weight: 550;
}

.product-preview figcaption > span:last-child {
  font-variant-numeric: tabular-nums;
  flex: none;
}

.product-thumbnails {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  gap: 10px;
  margin-top: 16px;
  padding: 3px;
  display: flex;
  overflow-x: auto;
}

.product-thumbnails button {
  background: var(--muted);
  cursor: pointer;
  opacity: .6;
  border-radius: 6px;
  flex: none;
  width: 76px;
  min-height: 48px;
  overflow: hidden;
}

.product-thumbnails button[aria-pressed="true"] {
  opacity: 1;
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.product-thumbnails img {
  object-fit: contain;
  width: 100%;
  height: 48px;
}

.product-galleryEmpty {
  background: var(--muted);
  border-radius: 14px;
  place-items: center;
  min-height: 280px;
  display: grid;
}

.product-largeImage {
  object-fit: contain;
  width: 100%;
  height: auto;
  max-height: 72dvh;
}

.product-galleryNavigation {
  font-variant-numeric: tabular-nums;
  justify-content: center;
  align-items: center;
  gap: 20px;
  display: flex;
}

.product-galleryNavigation button {
  min-width: 44px;
  min-height: 44px;
}

.product-factStrip {
  flex-wrap: wrap;
  gap: 28px 46px;
  padding-block: 0 30px;
  display: flex;
}

.product-factStrip > div {
  flex: 1;
  min-width: 130px;
  max-width: 260px;
}

.product-factStrip dt {
  color: var(--product-secondary);
  margin-bottom: 8px;
  font-size: 12px;
}

.product-factStrip dd {
  color: var(--foreground);
  overflow-wrap: anywhere;
  font-size: 15px;
  line-height: 1.75;
}

.product-readingLayout {
  grid-template-columns: minmax(0, 780px) 236px;
  justify-content: space-between;
  gap: 70px;
  padding-top: 42px;
  display: grid;
}

.product-article {
  min-width: 0;
}

.product-article :is(h2, h3, h4, h5, h6), .product-startUsing {
  scroll-margin-top: calc(var(--site-header-height) + 28px);
}

.product-article h2 {
  color: var(--foreground);
  letter-spacing: -.02em;
  text-wrap: balance;
  font-size: 24px;
  font-weight: 650;
  line-height: 1.5;
}

.product-highlights {
  margin-bottom: 52px;
}

.product-highlightList {
  margin-top: 22px;
}

.product-highlight {
  border-top: 1px solid var(--border);
  grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  gap: 26px;
  padding-block: 22px;
  display: grid;
}

.product-highlight h3 {
  color: var(--foreground);
  align-items: flex-start;
  gap: 8px;
  font-size: 16px;
  font-weight: 580;
  line-height: 1.8;
  display: flex;
}

.product-highlight h3 svg {
  color: var(--product-secondary);
  flex: none;
  margin-top: 6px;
}

.product-highlight p {
  color: var(--product-secondary);
  overflow-wrap: anywhere;
  font-size: 14px;
  line-height: 1.95;
}

.product-highlight:is(a):hover h3, .product-highlight:is(a):hover svg {
  color: var(--primary);
}

.product-scenarios {
  margin-bottom: 52px;
}

.product-scenarios > div {
  padding-top: 22px;
}

.product-scenarios h3 {
  color: var(--foreground);
  font-size: 17px;
  font-weight: 580;
  line-height: 1.7;
}

.product-scenarios p {
  color: var(--product-secondary);
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.95;
}

.product-articleHeading {
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  display: flex;
}

.product-articleHeading > span {
  color: var(--product-secondary);
  flex: none;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  display: inline-flex;
}

.product-prose {
  color: var(--foreground);
}

@supports (color: color-mix(in lab, red, red)) {
  .product-prose {
    color: color-mix(in srgb, var(--foreground) 94%, var(--card));
  }
}

.product-prose {
  overflow-wrap: anywhere;
  text-wrap: pretty;
  font-size: 16px;
  line-height: 2;
}

.product-prose > * + * {
  margin-top: 20px;
}

.product-prose :is(h2, h3, h4, h5, h6) {
  color: var(--foreground);
  text-wrap: balance;
}

.product-prose h2 {
  letter-spacing: -.02em;
  margin-top: 48px;
  margin-bottom: 18px;
  font-size: 23px;
  font-weight: 640;
  line-height: 1.55;
}

.product-prose h3 {
  margin-top: 30px;
  margin-bottom: 12px;
  font-size: 17px;
  font-weight: 580;
  line-height: 1.75;
}

.product-prose :is(h4, h5, h6) {
  margin-top: 26px;
  font-size: 16px;
  font-weight: 580;
}

.product-prose :is(h2, h3, h4, h5, h6) + *, .product-prose > :first-child {
  margin-top: 0;
}

.product-prose p {
  margin-bottom: 18px;
}

.product-prose strong {
  color: var(--foreground);
  font-weight: 550;
}

.product-prose ul {
  padding-left: 1.3em;
  list-style: outside;
}

.product-prose ol {
  padding-left: 1.5em;
  list-style: decimal;
}

.product-prose li {
  margin-block: 10px;
  padding-left: 5px;
}

.product-prose li::marker {
  color: var(--product-secondary);
}

.product-prose li > p {
  margin: 0;
}

.product-prose li > :is(ul, ol) {
  margin-top: 10px;
}

.product-prose a {
  color: var(--primary);
  text-underline-offset: 4px;
  text-decoration: underline;
}

.product-prose blockquote {
  border-left: 1px solid var(--border);
  background: var(--muted);
  margin-block: 24px;
  padding: 18px 22px;
}

.product-prose blockquote p:last-child {
  margin-bottom: 0;
}

.product-prose img {
  border-radius: 12px;
  max-width: 100%;
  height: auto;
  margin-block: 24px;
  display: block;
}

.product-prose pre {
  background: var(--muted);
  text-wrap: nowrap;
  border-radius: 12px;
  max-width: 100%;
  padding: 20px;
  font-size: 13px;
  overflow-x: auto;
}

.product-prose :not(pre) > code {
  background: var(--muted);
  border-radius: 4px;
  padding: 2px 5px;
  font-size: .88em;
}

.product-prose table {
  border-collapse: collapse;
  text-wrap: initial;
  max-width: 100%;
  font-size: 14px;
  display: block;
  overflow-x: auto;
}

.product-prose :is(th, td) {
  border: 1px solid var(--border);
  text-align: left;
  padding: 10px 14px;
}

.product-prose th {
  background: var(--muted);
  font-weight: 580;
}

.product-prose hr {
  border-color: var(--border);
  margin-block: 32px;
}

.product-empty {
  color: var(--product-secondary);
  font-size: 16px;
  line-height: 2;
}

.product-rail {
  top: calc(var(--site-header-height) + 28px);
  min-width: 0;
  max-height: calc(100dvh - var(--site-header-height) - 56px);
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  align-self: start;
  position: sticky;
  overflow-y: auto;
}

.product-contents {
  flex-direction: column;
  gap: 3px;
  display: flex;
}

.product-contents h2, .product-productFacts h2 {
  color: var(--foreground);
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 600;
}

.product-contents > a {
  color: var(--product-secondary);
  border-radius: 6px;
  padding: 9px 12px;
  font-size: 13px;
  line-height: 1.65;
  transition: color .16s ease-out, background-color .16s ease-out;
  display: block;
}

.product-contents > a:hover {
  color: var(--primary);
  background: var(--muted);
}

.product-contents > a[aria-current] {
  color: var(--primary);
  background: var(--primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .product-contents > a[aria-current] {
    background: color-mix(in srgb, var(--primary) 6%, var(--card));
  }
}

.product-contents > a[aria-current] {
  font-weight: 550;
}

.product-productFacts {
  border-top: 1px solid var(--border);
  margin-top: 30px;
  padding-top: 24px;
}

.product-productFacts dl > div {
  margin-bottom: 18px;
}

.product-productFacts dt {
  color: var(--product-secondary);
  margin-bottom: 6px;
  font-size: 12px;
}

.product-productFacts dd {
  color: var(--foreground);
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.7;
}

.product-productFacts dd a, .product-railLinks a {
  align-items: center;
  gap: 6px;
  display: flex;
}

.product-productFacts dd svg {
  flex: none;
}

.product-productFacts a:hover {
  color: var(--primary);
}

.product-railLinks {
  color: var(--product-secondary);
  gap: 12px;
  margin-block: 20px;
  font-size: 13px;
  display: grid;
}

.product-updateLink {
  min-height: 44px;
  color: var(--product-secondary);
  align-items: center;
  gap: 8px;
  font-size: 12px;
  display: inline-flex;
}

.product-startUsing {
  background: var(--muted);
  border-radius: 14px;
  margin-top: 50px;
  padding: 30px;
}

.product-startHeading {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  display: flex;
}

.product-startHeading h2 {
  font-size: 21px;
}

.product-startHeading p {
  color: var(--product-secondary);
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.8;
}

.product-resourceLinks {
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 20px;
  display: flex;
}

.product-resourceLinks a {
  min-height: 44px;
  color: var(--primary);
  align-items: center;
  gap: 8px;
  font-size: 14px;
  display: inline-flex;
}

.product-editorNote {
  color: var(--product-secondary);
  padding-block: 28px 0;
  font-size: 12px;
  line-height: 1.9;
}

.product-editorNote h3 {
  color: var(--foreground);
  font-size: 13px;
  font-weight: 600;
}

.product-editorNote p {
  margin-top: 7px;
}

.product-sources {
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 16px;
  margin-top: 16px;
  display: flex;
}

.product-sources a {
  text-underline-offset: 3px;
  align-items: center;
  gap: 4px;
  min-height: 30px;
  text-decoration: underline;
  display: inline-flex;
}

.product-maintenanceActions {
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 20px;
  margin-top: 10px;
  display: flex;
}

.product-maintenanceActions a {
  align-items: center;
  gap: 7px;
  min-height: 44px;
  display: inline-flex;
}

.product-maintenanceActions a:hover, .product-sources a:hover {
  color: var(--primary);
}

.product-maintenanceActions > span {
  font-size: 11px;
}

.product-related {
  margin-top: 52px;
}

.product-relatedLayout {
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 64px;
  padding-top: 32px;
  display: grid;
}

.product-relatedLayout:not(:has(.product-sponsored)) {
  grid-template-columns: minmax(0, 1fr);
}

.product-related h2 {
  color: var(--foreground);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
}

.product-relatedGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 28px;
  margin-top: 18px;
  display: grid;
}

.product-sponsored .display-title {
  font-size: 14px;
}

.product-mobileContents {
  display: none;
}

.product-shareWorkspace {
  grid-template-columns: minmax(0, 1fr) minmax(0, 240px);
  align-items: center;
  gap: 28px;
  margin-top: 12px;
  display: grid;
}

.product-sharePreview {
  background: var(--muted);
  border-radius: 12px;
  place-items: center;
  min-height: 470px;
  padding: 18px;
  display: grid;
  position: relative;
}

.product-shareImage {
  object-fit: contain;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 490px;
  box-shadow: 0 8px 24px var(--foreground);
}

@supports (color: color-mix(in lab, red, red)) {
  .product-shareImage {
    box-shadow: 0 8px 24px color-mix(in srgb, var(--foreground) 12%, transparent);
  }
}

.product-shareImage {
  display: block;
}

.product-sharePreview[aria-busy="true"] .product-shareImage {
  opacity: 0;
}

.product-shareLoading {
  color: var(--muted-foreground);
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  display: flex;
  position: absolute;
  inset: 0;
}

.product-shareLoading svg {
  animation: 1s linear infinite product-share-spin;
}

.product-shareFailure {
  color: var(--muted-foreground);
  justify-items: center;
  gap: 16px;
  font-size: 13px;
  display: grid;
}

.product-shareControls {
  flex-direction: column;
  gap: 24px;
  display: flex;
}

.product-shareControls h3 {
  color: var(--foreground);
  font-size: 14px;
  font-weight: 550;
}

.product-shareControls p {
  color: var(--muted-foreground);
  margin-top: 14px;
  font-size: 12px;
  line-height: 1.9;
}

.product-shareButtons {
  gap: 10px;
  display: grid;
}

.product-shareControls .product-shareStatus {
  min-height: 22px;
  margin-top: 0;
}

@keyframes product-share-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 1100px) {
  .product-page {
    padding-inline: 32px;
  }

  .product-hero {
    gap: 36px;
    padding-block: 40px;
  }

  .product-readingLayout {
    grid-template-columns: minmax(0, 1fr) 210px;
    gap: 44px;
  }

  .product-highlight {
    grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
    gap: 24px;
  }
}

@media (max-width: 900px) {
  .product-readingLayout {
    grid-template-columns: minmax(0, 780px);
    justify-content: center;
    padding-top: 32px;
  }

  .product-rail {
    display: none;
  }

  .product-hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 44%);
    gap: 28px;
  }

  .product-identity h1 {
    font-size: 36px;
  }

  .product-logo {
    width: 52px;
    height: 52px;
  }

  .product-tagline {
    font-size: 21px;
  }

  .product-mobileContents {
    border-bottom: 1px solid var(--border);
    display: block;
  }

  .product-mobileContents summary {
    min-height: 52px;
    color: var(--product-secondary);
    cursor: pointer;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    list-style: none;
    display: flex;
  }

  .product-mobileContents summary::-webkit-details-marker {
    display: none;
  }

  .product-mobileContents[open] summary svg {
    rotate: 180deg;
  }

  .product-mobileContents nav {
    gap: 3px;
    padding-bottom: 14px;
    display: grid;
  }

  .product-mobileContents nav a {
    color: var(--product-secondary);
    padding: 12px;
    font-size: 14px;
    line-height: 1.7;
  }

  .product-mobileContents nav a:hover {
    color: var(--primary);
    background: var(--muted);
  }

  .product-relatedLayout {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
}

@media (max-width: 640px) {
  .product-page {
    padding: 24px 20px 44px;
  }

  .product-topline {
    gap: 10px;
  }

  .product-editorCredit {
    font-size: 11px;
  }

  .product-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
    padding-block: 30px;
  }

  .product-identity {
    gap: 14px;
  }

  .product-identity h1 {
    font-size: 36px;
  }

  .product-logo {
    border-radius: 12px;
    width: 52px;
    height: 52px;
  }

  .product-tagline {
    margin-top: 22px;
    font-size: 22px;
    line-height: 1.65;
  }

  .product-summary {
    font-size: 14px;
  }

  .product-categories {
    margin-top: 16px;
  }

  .product-actions {
    gap: 8px;
    margin-top: 24px;
  }

  .product-actions > span > button {
    padding-inline: 14px;
  }

  .product-cover {
    aspect-ratio: 1.57;
  }

  .product-preview figcaption {
    font-size: 11px;
  }

  .product-factStrip {
    gap: 22px;
    padding-bottom: 26px;
  }

  .product-factStrip > div {
    min-width: calc(50% - 22px);
  }

  .product-readingLayout {
    gap: 0;
    padding-top: 28px;
  }

  .product-article h2 {
    font-size: 22px;
  }

  .product-highlights {
    margin-bottom: 40px;
  }

  .product-highlight {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding-block: 20px;
  }

  .product-highlight h3 {
    justify-content: space-between;
    font-size: 16px;
  }

  .product-highlight p {
    font-size: 14px;
  }

  .product-articleHeading {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 20px;
  }

  .product-articleHeading > span {
    font-size: 11px;
  }

  .product-prose {
    font-size: 15px;
    line-height: 1.95;
  }

  .product-prose h2 {
    margin-top: 38px;
    font-size: 22px;
  }

  .product-prose h3 {
    margin-top: 26px;
    font-size: 16px;
  }

  .product-prose li {
    padding-left: 2px;
  }

  .product-startUsing {
    margin-top: 38px;
    padding: 22px;
  }

  .product-startHeading h2 {
    font-size: 19px;
  }

  .product-relatedGrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .product-shareWorkspace {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }

  .product-sharePreview {
    min-height: 300px;
    padding: 14px;
  }

  .product-shareImage {
    max-height: 310px;
  }

  .product-shareControls {
    gap: 18px;
  }

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

  .product-shareButtons > :last-child {
    grid-column: 1 / -1;
  }

  .product-shareControls .product-shareStatus:empty {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-cover, .product-contents > a {
    transition: none;
  }

  .product-shareLoading svg {
    animation: none;
  }
}

.discover-page {
  scroll-margin-top: calc(var(--site-header-height) + 16px);
  padding-bottom: 64px;
}

.discover-container {
  max-width: 1400px;
}

.discover-intro {
  grid-template-columns: minmax(0, 1fr) 360px;
  align-items: center;
  gap: 40px;
  padding-block: 40px 28px;
  display: grid;
}

.discover-intro h1 {
  letter-spacing: -.03em;
  text-wrap: pretty;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.4;
}

.discover-intro h1 span {
  color: var(--primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .discover-intro h1 span {
    color: color-mix(in srgb, var(--primary) 92%, var(--foreground));
  }
}

.discover-intro p {
  color: var(--foreground);
}

@supports (color: color-mix(in lab, red, red)) {
  .discover-intro p {
    color: color-mix(in srgb, var(--foreground) 78%, var(--background));
  }
}

.discover-intro p {
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.8;
}

.discover-searchArea {
  min-width: 0;
}

.discover-search {
  border: 1px solid var(--input);
  border-radius: var(--radius-control);
  background: var(--card);
  align-items: center;
  gap: 10px;
  padding: 4px 4px 4px 14px;
  display: flex;
}

.discover-search:focus-within {
  border-color: var(--ring);
  box-shadow: var(--field-focus-shadow);
}

.discover-search > svg {
  color: var(--foreground);
}

@supports (color: color-mix(in lab, red, red)) {
  .discover-search > svg {
    color: color-mix(in srgb, var(--foreground) 75%, var(--background));
  }
}

.discover-search > svg {
  flex: none;
}

.discover-search input {
  width: 100%;
  min-width: 0;
  height: 40px;
  caret-color: var(--primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .discover-search input {
    caret-color: color-mix(in srgb, var(--primary) 92%, var(--foreground));
  }
}

.discover-search input {
  background: none;
  outline: none;
  font-size: 14px;
}

.discover-search input::placeholder {
  color: var(--foreground);
}

@supports (color: color-mix(in lab, red, red)) {
  .discover-search input::placeholder {
    color: color-mix(in srgb, var(--foreground) 75%, var(--background));
  }
}

.discover-search button {
  border-radius: var(--radius-control);
  background: var(--primary);
  min-width: 64px;
  min-height: 40px;
  color: var(--primary-foreground);
  cursor: pointer;
  flex: none;
  font-size: 13px;
  font-weight: 600;
}

.discover-search button:hover {
  opacity: .9;
}

.discover-layout {
  display: block;
}

.discover-library {
  min-width: 0;
}

.discover-toolbar {
  border-bottom: 1px solid var(--border);
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 56px;
  padding-bottom: 12px;
  display: flex;
}

.discover-resultTitle {
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  display: flex;
}

.discover-resultTitle h2 {
  letter-spacing: -.02em;
  font-size: 20px;
  font-weight: 700;
}

.discover-resultTitle > span {
  color: var(--foreground);
}

@supports (color: color-mix(in lab, red, red)) {
  .discover-resultTitle > span {
    color: color-mix(in srgb, var(--foreground) 75%, var(--background));
  }
}

.discover-resultTitle > span {
  white-space: nowrap;
  font-size: 13px;
}

.discover-controls, .discover-sort {
  align-items: center;
  gap: 20px;
  display: flex;
}

.discover-controls {
  gap: 24px;
}

.discover-sort a {
  min-height: 40px;
  color: var(--foreground);
}

@supports (color: color-mix(in lab, red, red)) {
  .discover-sort a {
    color: color-mix(in srgb, var(--foreground) 75%, var(--background));
  }
}

.discover-sort a {
  white-space: nowrap;
  align-items: center;
  font-size: 13px;
  display: inline-flex;
}

.discover-sort a[aria-current="page"] {
  color: var(--primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .discover-sort a[aria-current="page"] {
    color: color-mix(in srgb, var(--primary) 92%, var(--foreground));
  }
}

.discover-sort a[aria-current="page"] {
  font-weight: 600;
}

.discover-filter {
  font-size: 13px;
  position: relative;
}

.discover-filter summary {
  min-height: 40px;
  color: var(--foreground);
}

@supports (color: color-mix(in lab, red, red)) {
  .discover-filter summary {
    color: color-mix(in srgb, var(--foreground) 75%, var(--background));
  }
}

.discover-filter summary {
  cursor: pointer;
  align-items: center;
  gap: 6px;
  list-style: none;
  display: flex;
}

.discover-filter summary::-webkit-details-marker {
  display: none;
}

.discover-filter[open] summary {
  color: var(--primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .discover-filter[open] summary {
    color: color-mix(in srgb, var(--primary) 92%, var(--foreground));
  }
}

.discover-filterMenu {
  z-index: 5;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--card);
  min-width: 176px;
  padding: 8px;
  position: absolute;
  top: 42px;
  right: 0;
}

.discover-filterMenu a {
  border-radius: var(--radius-badge);
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 44px;
  padding: 10px 12px;
  display: flex;
}

.discover-filterMenu a:hover, .discover-filterMenu a[aria-current="page"] {
  background: var(--muted);
  color: var(--primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .discover-filterMenu a:hover, .discover-filterMenu a[aria-current="page"] {
    color: color-mix(in srgb, var(--primary) 92%, var(--foreground));
  }
}

.discover-filterMenu span {
  color: var(--foreground);
}

@supports (color: color-mix(in lab, red, red)) {
  .discover-filterMenu span {
    color: color-mix(in srgb, var(--foreground) 75%, var(--background));
  }
}

.discover-filterMenu span {
  font-variant-numeric: tabular-nums;
}

.discover-collections {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  padding-top: 24px;
  display: grid;
}

.discover-collection {
  background: var(--card);
  border-radius: 12px;
  flex-direction: column;
  min-width: 0;
  padding: 20px;
  display: flex;
}

.discover-coverLink {
  display: block;
}

.discover-cover {
  aspect-ratio: 3 / 2;
  border-radius: 8px;
}

.discover-cover img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: transform .22s cubic-bezier(.16, 1, .3, 1);
  display: block;
}

.discover-collectionCopy {
  min-width: 0;
  margin-top: 16px;
}

.discover-collection h3 {
  -webkit-line-clamp: 2;
  text-wrap: pretty;
  -webkit-box-orient: vertical;
  min-height: 3.2em;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  display: -webkit-box;
  overflow: hidden;
}

.discover-collection h3 a:hover {
  color: var(--primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .discover-collection h3 a:hover {
    color: color-mix(in srgb, var(--primary) 92%, var(--foreground));
  }
}

.discover-cardDetails {
  color: var(--foreground);
}

@supports (color: color-mix(in lab, red, red)) {
  .discover-cardDetails {
    color: color-mix(in srgb, var(--foreground) 75%, var(--background));
  }
}

.discover-cardDetails {
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.6;
  display: flex;
}

.discover-featuredLabel {
  color: var(--primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .discover-featuredLabel {
    color: color-mix(in srgb, var(--primary) 92%, var(--foreground));
  }
}

.discover-cardFooter {
  color: var(--foreground);
}

@supports (color: color-mix(in lab, red, red)) {
  .discover-cardFooter {
    color: color-mix(in srgb, var(--foreground) 75%, var(--background));
  }
}

.discover-cardFooter {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 24px;
  font-size: 12px;
  display: flex;
}

.discover-author {
  align-items: center;
  gap: 6px;
  min-width: 0;
  display: flex;
}

.discover-author img {
  border-radius: 50%;
  flex: none;
  width: 20px;
  height: 20px;
}

.discover-author > span {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.discover-kindLink {
  flex: none;
  align-items: center;
  gap: 5px;
  min-height: 32px;
  display: inline-flex;
}

.discover-kindLink > span {
  width: 16px;
  height: 16px;
  color: var(--primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .discover-kindLink > span {
    color: color-mix(in srgb, var(--primary) 92%, var(--foreground));
  }
}

.discover-kindLink > span {
  background: var(--primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .discover-kindLink > span {
    background: color-mix(in srgb, var(--primary) 8%, var(--card));
  }
}

.discover-kindLink > span {
  border-radius: 50%;
  place-items: center;
  font-weight: 600;
  display: grid;
}

.discover-kindLink:hover {
  color: var(--primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .discover-kindLink:hover {
    color: color-mix(in srgb, var(--primary) 92%, var(--foreground));
  }
}

@media (hover: hover) {
  .discover-coverLink:hover .discover-cover img {
    transform: scale(1.035);
  }
}

@media (prefers-reduced-motion: reduce) {
  .discover-cover img {
    transition: none;
  }
}

.discover-searchContext {
  color: var(--foreground);
}

@supports (color: color-mix(in lab, red, red)) {
  .discover-searchContext {
    color: color-mix(in srgb, var(--foreground) 75%, var(--background));
  }
}

.discover-searchContext {
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-block: 12px;
  font-size: 13px;
  display: flex;
}

.discover-searchContext a {
  min-height: 40px;
  color: var(--primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .discover-searchContext a {
    color: color-mix(in srgb, var(--primary) 92%, var(--foreground));
  }
}

.discover-searchContext a {
  align-items: center;
  gap: 6px;
  display: inline-flex;
}

.discover-empty {
  text-align: center;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 64px 24px;
  display: flex;
}

.discover-empty > svg {
  color: var(--foreground);
}

@supports (color: color-mix(in lab, red, red)) {
  .discover-empty > svg {
    color: color-mix(in srgb, var(--foreground) 75%, var(--background));
  }
}

.discover-empty h3 {
  font-size: 19px;
  font-weight: 600;
}

.discover-empty p {
  color: var(--foreground);
}

@supports (color: color-mix(in lab, red, red)) {
  .discover-empty p {
    color: color-mix(in srgb, var(--foreground) 75%, var(--background));
  }
}

.discover-empty p {
  font-size: 14px;
  line-height: 1.8;
}

.discover-empty a {
  min-height: 44px;
  color: var(--primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .discover-empty a {
    color: color-mix(in srgb, var(--primary) 92%, var(--foreground));
  }
}

.discover-empty a {
  align-items: center;
  font-size: 14px;
  display: inline-flex;
}

@media (max-width: 1440px) {
  .discover-collections {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1180px) {
  .discover-collections {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 800px) {
  .discover-intro {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    padding-top: 28px;
  }

  .discover-search {
    width: 100%;
  }

  .discover-intro h1 {
    font-size: 28px;
  }
}

@media (max-width: 580px) {
  .discover-page {
    padding-bottom: 40px;
  }

  .discover-intro {
    gap: 18px;
    padding-block: 24px 20px;
  }

  .discover-intro h1 {
    font-size: 27px;
  }

  .discover-intro p {
    font-size: 15px;
    line-height: 1.75;
  }

  .discover-toolbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding-bottom: 8px;
  }

  .discover-resultTitle h2 {
    font-size: 19px;
  }

  .discover-controls {
    justify-content: space-between;
    gap: 16px;
    width: 100%;
  }

  .discover-filterMenu {
    left: 0;
    right: auto;
  }

  .discover-collections {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    padding-top: 20px;
  }

  .discover-collection {
    padding: 16px;
  }

  .discover-collection h3 {
    font-size: 17px;
  }

  .discover-cardFooter {
    padding-top: 20px;
  }

  .discover-kindLink {
    min-height: 44px;
  }
}

.videos-page {
  --video-muted: var(--foreground);
}

@supports (color: color-mix(in lab, red, red)) {
  .videos-page {
    --video-muted: color-mix(in srgb, var(--foreground) 72%, var(--background));
  }
}

.videos-page {
  padding-block: 28px 64px;
}

body:has(.videos-page) .site-header-search {
  display: none;
}

.videos-hero {
  isolation: isolate;
  border-radius: var(--radius-panel);
  background: var(--neutral-ink);
  min-height: 208px;
  color: var(--white);
  align-items: center;
  margin-bottom: 28px;
  padding: 28px 32px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.videos-heroArt {
  z-index: -2;
  object-fit: cover;
  object-position: center 32%;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.videos-hero:after {
  z-index: -1;
  background: linear-gradient(90deg, var(--neutral-ink), var(--neutral-ink) 38%, transparent 76%);
}

@supports (color: color-mix(in lab, red, red)) {
  .videos-hero:after {
    background: linear-gradient(90deg, color-mix(in srgb, var(--neutral-ink) 94%, transparent), color-mix(in srgb, var(--neutral-ink) 76%, transparent) 38%, transparent 76%);
  }
}

.videos-hero:after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.videos-heroCopy {
  width: min(58%, 560px);
  min-width: 0;
}

.videos-hero h1 {
  color: inherit;
  font-family: var(--font-heading);
  letter-spacing: -.025em;
  text-wrap: balance;
  font-size: clamp(26px, 2.3vw, 34px);
  font-weight: 750;
  line-height: 1.3;
}

.videos-hero p {
  color: var(--white);
}

@supports (color: color-mix(in lab, red, red)) {
  .videos-hero p {
    color: color-mix(in srgb, var(--white) 88%, transparent);
  }
}

.videos-hero p {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.7;
}

.videos-search {
  border-radius: var(--radius-control);
  background: var(--card);
  width: min(100%, 440px);
  min-height: 48px;
  color: var(--video-muted);
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding: 5px 5px 5px 14px;
  display: flex;
}

.videos-search:focus-within {
  outline: 2px solid var(--white);
  outline-offset: 3px;
}

.videos-search > svg {
  flex: none;
}

.videos-search input[type="search"] {
  width: 100%;
  min-width: 0;
  height: 38px;
  color: var(--foreground);
  caret-color: var(--primary);
  background: none;
  border: 0;
  outline: 0;
  font-size: 14px;
}

.videos-search input::placeholder {
  color: var(--video-muted);
  opacity: 1;
}

.videos-search button {
  background: var(--primary);
  min-height: 38px;
  color: var(--primary-foreground);
  cursor: pointer;
  border-radius: 8px;
  flex: none;
  padding-inline: 20px;
  font-size: 13px;
  font-weight: 600;
}

.videos-search button:hover {
  background: var(--primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .videos-search button:hover {
    background: color-mix(in srgb, var(--primary) 88%, var(--foreground));
  }
}

.videos-sectionHead {
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px 20px;
  padding-bottom: 12px;
  display: flex;
}

.videos-heading {
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
  display: flex;
}

.videos-heading h2 {
  color: var(--foreground);
  letter-spacing: -.025em;
  font-size: 24px;
  font-weight: 730;
  line-height: 1.4;
}

.videos-heading > span {
  color: var(--video-muted);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

.videos-sort {
  align-items: center;
  gap: 16px;
  display: flex;
}

.videos-sort a {
  min-height: 36px;
  color: var(--video-muted);
  align-items: center;
  font-size: 13px;
  display: inline-flex;
}

.videos-sort a[aria-current="page"] {
  color: var(--primary);
  font-weight: 600;
}

.videos-toolbar {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 4px 16px;
  margin-block: 12px 20px;
  display: flex;
}

.videos-durations {
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  display: flex;
}

.videos-durations a {
  min-height: 36px;
  color: var(--video-muted);
  border-radius: 8px;
  align-items: center;
  padding: 6px 12px;
  font-size: 12px;
  line-height: 1.5;
  display: flex;
}

.videos-durations a:hover {
  background: var(--muted);
  color: var(--foreground);
}

.videos-durations a[aria-current="page"] {
  background: var(--primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .videos-durations a[aria-current="page"] {
    background: color-mix(in srgb, var(--primary) 9%, var(--card));
  }
}

.videos-durations a[aria-current="page"] {
  color: var(--primary);
  font-weight: 600;
}

.videos-reset {
  min-height: 36px;
  color: var(--video-muted);
  align-items: center;
  gap: 4px;
  font-size: 12px;
  display: inline-flex;
}

.videos-reset:hover, .videos-sort a:hover {
  color: var(--primary);
}

.videos-searchSummary {
  color: var(--video-muted);
  overflow-wrap: anywhere;
  margin-block: -8px 16px;
  font-size: 13px;
}

.videos-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 28px 18px;
  display: grid;
}

.videos-video {
  border-radius: var(--radius-control);
  min-width: 0;
  display: block;
}

.videos-cover {
  aspect-ratio: 16 / 9;
  background: var(--muted);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}

.videos-coverFallback {
  color: var(--video-muted);
  text-align: center;
  justify-content: center;
  align-items: center;
  padding: 16px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
  display: flex;
  position: absolute;
  inset: 0;
}

.videos-coverImage {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: relative;
}

.videos-play {
  background: var(--neutral-ink);
}

@supports (color: color-mix(in lab, red, red)) {
  .videos-play {
    background: color-mix(in srgb, var(--neutral-ink) 24%, transparent);
  }
}

.videos-play {
  color: var(--white);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out);
  place-items: center;
  display: grid;
  position: absolute;
  inset: 0;
}

.videos-video:hover .videos-play, .videos-video:focus-visible .videos-play {
  opacity: 1;
}

.videos-duration {
  background: var(--neutral-ink);
}

@supports (color: color-mix(in lab, red, red)) {
  .videos-duration {
    background: color-mix(in srgb, var(--neutral-ink) 90%, transparent);
  }
}

.videos-duration {
  color: var(--white);
  font-variant-numeric: tabular-nums;
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.6;
  position: absolute;
  bottom: 8px;
  right: 8px;
}

.videos-videoCopy {
  min-width: 0;
  padding: 10px 2px 0;
}

.videos-video h3 {
  -webkit-line-clamp: 2;
  min-height: 44px;
  color: var(--foreground);
  overflow-wrap: anywhere;
  transition: color var(--duration-fast) var(--ease-out);
  -webkit-box-orient: vertical;
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
  display: -webkit-box;
  overflow: hidden;
}

.videos-video:hover h3 {
  color: var(--primary);
}

.videos-videoCopy p {
  min-width: 0;
  color: var(--video-muted);
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 12px;
  line-height: 18px;
  display: flex;
}

.videos-videoCopy p > span:first-child {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.videos-platform {
  flex: none;
}

.videos-grid[data-view="list"] {
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

.videos-grid[data-view="list"] .videos-video {
  border-bottom: 1px solid var(--border);
  gap: 20px;
  padding-bottom: 20px;
  display: flex;
}

.videos-grid[data-view="list"] .videos-cover {
  flex: none;
  width: 220px;
}

.videos-grid[data-view="list"] .videos-videoCopy {
  padding-top: 4px;
}

.videos-empty {
  color: var(--video-muted);
  text-align: center;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 64px 16px;
  display: flex;
}

.videos-empty h3 {
  color: var(--foreground);
  font-size: 18px;
  font-weight: 600;
}

.videos-empty p {
  font-size: 14px;
}

.videos-empty a {
  min-height: 44px;
  color: var(--primary);
  align-items: center;
  font-size: 14px;
  display: inline-flex;
}

.videos-page :is(a, button):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

.videos-hero ::selection {
  background: var(--primary);
  color: var(--primary-foreground);
}

@media (max-width: 1439px) {
  .videos-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  .videos-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .videos-heroCopy {
    width: 65%;
  }
}

@media (max-width: 980px) {
  .videos-page {
    padding-block: 0 48px;
  }

  .videos-hero {
    min-height: 192px;
    margin-top: 20px;
    padding: 24px;
  }
}

@media (max-width: 680px) {
  .videos-hero {
    min-height: 0;
    margin-bottom: 24px;
    padding: 24px 20px;
  }

  .videos-heroArt {
    object-position: 65% center;
  }

  .videos-hero:after {
    background: var(--neutral-ink);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .videos-hero:after {
      background: color-mix(in srgb, var(--neutral-ink) 82%, transparent);
    }
  }

  .videos-heroCopy {
    width: 100%;
  }

  .videos-hero h1 {
    font-size: 26px;
  }

  .videos-search {
    margin-top: 16px;
  }

  .videos-search button {
    min-height: 44px;
  }

  .videos-heading h2 {
    font-size: 22px;
  }

  .videos-sectionHead {
    gap: 4px 12px;
  }

  .videos-heading {
    gap: 8px;
  }

  .videos-sort {
    gap: 12px;
  }

  .videos-sort a, .videos-durations a, .videos-reset {
    min-height: 44px;
  }

  .videos-toolbar {
    flex-wrap: nowrap;
    gap: 8px;
    margin-block: 8px 16px;
  }

  .videos-durations {
    scrollbar-width: thin;
    flex-wrap: nowrap;
    flex: 1;
    gap: 2px;
    min-width: 0;
    overflow-x: auto;
  }

  .videos-durations a {
    white-space: nowrap;
    flex: none;
    padding-inline: 10px;
  }

  .videos-reset {
    flex: none;
  }

  .videos-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 12px;
  }

  .videos-grid[data-view="list"] .videos-cover {
    width: 140px;
  }

  .videos-grid[data-view="list"] .videos-video {
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .videos-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .videos-video h3 {
    min-height: 0;
    font-size: 15px;
    line-height: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .videos-play, .videos-video h3 {
    transition: none;
  }
}

.article-page {
  --article-secondary: var(--foreground);
}

@supports (color: color-mix(in lab, red, red)) {
  .article-page {
    --article-secondary: color-mix(in srgb, var(--foreground) 72%, var(--card));
  }
}

.article-page {
  background: var(--card);
  min-height: 80vh;
  padding: 32px 0 64px;
}

.article-container {
  width: min(100% - 80px, 1120px);
  margin-inline: auto;
}

.article-soloIndex {
  max-width: 960px;
}

.article-singleGrid {
  display: block;
}

.article-breadcrumb {
  color: var(--article-secondary);
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
  font-size: 12px;
  line-height: 20px;
  display: flex;
}

.article-breadcrumb a:hover {
  color: var(--primary);
}

.article-indexHeader {
  margin-bottom: 24px;
}

.article-indexHeader h1 {
  letter-spacing: -.02em;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.4;
}

.article-indexHeader p {
  -webkit-line-clamp: 2;
  color: var(--article-secondary);
  -webkit-box-orient: vertical;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.8;
  display: -webkit-box;
  overflow: hidden;
}

.article-categories {
  border-bottom: 1px solid var(--border);
  font-family: var(--font-navigation);
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  margin-bottom: 8px;
  padding-bottom: 12px;
  font-size: 14px;
  display: flex;
  position: relative;
}

.article-categories > a, .article-moreCategories summary {
  cursor: pointer;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  display: flex;
}

.article-categories a:hover, .article-moreCategories summary:hover {
  color: var(--primary);
}

.article-categories > a[aria-current="page"] {
  color: var(--primary);
  box-shadow: inset 0 -2px var(--primary);
  font-weight: 600;
}

.article-moreCategories {
  position: static;
}

.article-moreCategories summary {
  color: var(--article-secondary);
  gap: 4px;
  list-style: none;
}

.article-moreCategories summary::-webkit-details-marker {
  display: none;
}

.article-moreCategories[open] summary svg {
  transform: rotate(180deg);
}

.article-moreCategories nav {
  z-index: 10;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  width: min(480px, 80vw);
  max-height: 360px;
  padding: 12px;
  display: grid;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  overflow-y: auto;
}

.article-moreCategories nav a {
  border-radius: 6px;
  align-items: center;
  min-height: 44px;
  padding: 4px 8px;
  display: flex;
}

.article-moreCategories nav a:hover {
  background: var(--muted);
}

.article-grid {
  grid-template-columns: minmax(0, 1fr) 248px;
  align-items: start;
  gap: 48px;
  display: grid;
}

.article-list {
  min-width: 0;
}

.article-listItem {
  border-bottom: 1px solid var(--border);
  gap: 24px;
  padding: 24px 0;
  display: flex;
}

.article-listItem > a {
  flex-shrink: 0;
}

.article-listImage {
  object-fit: cover;
  background: var(--muted);
  border-radius: 8px;
  flex-shrink: 0;
  width: 224px;
  height: 142px;
}

.article-listCopy {
  flex-direction: column;
  flex: 1;
  min-width: 0;
  display: flex;
}

.article-listTitle {
  letter-spacing: -.015em;
  overflow-wrap: anywhere;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.55;
}

.article-listTitle a:hover {
  color: var(--primary);
}

.article-listSummary {
  -webkit-line-clamp: 2;
  color: var(--article-secondary);
  -webkit-box-orient: vertical;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.8;
  display: -webkit-box;
  overflow: hidden;
}

.article-meta {
  color: var(--article-secondary);
  font-variant-numeric: tabular-nums;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  font-size: 12px;
  line-height: 20px;
  display: flex;
}

.article-meta a {
  color: var(--article-secondary);
}

.article-meta a:hover {
  color: var(--primary);
}

.article-listCopy .article-meta {
  margin-top: auto;
  padding-top: 12px;
}

.article-rail {
  padding-top: 24px;
}

.article-related h2 {
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}

.article-relatedItem {
  align-items: start;
  gap: 12px;
  margin-bottom: 20px;
  display: flex;
}

.article-relatedItem > div {
  flex: 1;
  min-width: 0;
}

.article-relatedItem h3 {
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.65;
  display: -webkit-box;
  overflow: hidden;
}

.article-relatedItem:hover h3 {
  color: var(--primary);
}

.article-relatedItem time {
  color: var(--article-secondary);
  margin-top: 6px;
  font-size: 11px;
  display: block;
}

.article-relatedImage {
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
  width: 76px;
  height: 54px;
}

.article-empty {
  color: var(--article-secondary);
  padding: 64px 0;
  font-size: 14px;
}

.article-readingGrid {
  grid-template-columns: minmax(0, 760px) 248px;
}

.article-readingHeader {
  border-bottom: 1px solid var(--border);
  padding-bottom: 24px;
}

.article-readingHeader h1 {
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
  text-wrap: pretty;
  font-size: 32px;
  font-weight: 650;
  line-height: 1.5;
}

.article-readingHeader .article-meta {
  margin-top: 16px;
}

.article-readingSummary {
  color: var(--article-secondary);
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.9;
}

.article-cover {
  object-fit: contain;
  border-radius: 8px;
  width: 100%;
  height: auto;
  max-height: 360px;
  margin: 28px 0;
  display: block;
}

.article-body {
  overflow-wrap: anywhere;
  padding-top: 24px;
  font-size: 16px;
  line-height: 1.9;
}

.article-cover + .article-body {
  padding-top: 0;
}

.article-body h2 {
  margin-top: 40px;
  margin-bottom: 16px;
  font-size: 24px;
  font-weight: 650;
  line-height: 1.5;
}

.article-body h3 {
  margin-top: 32px;
  margin-bottom: 12px;
  font-size: 20px;
}

.article-body :is(h2, h3) {
  scroll-margin-top: calc(var(--site-header-height, 104px) + 24px);
}

.article-body pre {
  overflow-wrap: normal;
}

.article-readingRail {
  align-self: stretch;
  padding-top: 8px;
}

.article-mobileContents {
  display: none;
}

.article-readingRail .article-related {
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
  padding-bottom: 24px;
}

.article-contents {
  top: calc(var(--site-header-height, 104px) + 28px);
  position: sticky;
}

.article-contents summary {
  cursor: pointer;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 600;
}

.article-contents nav {
  max-height: calc(100vh - var(--site-header-height, 104px) - 100px);
  flex-direction: column;
  display: flex;
  overflow-y: auto;
}

.article-contents nav a {
  color: var(--article-secondary);
  padding: 8px 0;
  font-size: 13px;
  line-height: 1.7;
}

.article-contents nav a[data-nested] {
  padding-left: 12px;
  font-size: 12px;
}

.article-contents nav a:hover {
  color: var(--primary);
}

.article-backLink {
  min-height: 44px;
  color: var(--article-secondary);
  align-items: center;
  gap: 8px;
  margin-top: 40px;
  font-size: 14px;
  display: inline-flex;
}

.article-backLink:hover {
  color: var(--primary);
}

@media (max-width: 1200px) {
  .article-grid {
    grid-template-columns: minmax(0, 1fr) 216px;
    gap: 32px;
  }

  .article-listImage {
    width: 180px;
    height: 120px;
  }
}

@media (max-width: 1080px) {
  .article-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .article-rail, .article-readingRail {
    display: none;
  }

  .article-mobileContents {
    margin-top: 24px;
    display: block;
  }

  .article-contents {
    background: var(--muted);
    border-radius: 8px;
    margin-bottom: 8px;
    padding: 12px 16px;
    position: static;
  }

  .article-contents nav {
    max-height: 240px;
  }

  .article-container {
    max-width: 840px;
  }
}

@media (max-width: 640px) {
  .article-page {
    padding: 24px 0 40px;
  }

  .article-container {
    width: calc(100% - 40px);
  }

  .article-breadcrumb {
    margin-bottom: 20px;
  }

  .article-indexHeader {
    margin-bottom: 16px;
  }

  .article-indexHeader h1 {
    font-size: 26px;
  }

  .article-categories {
    gap: 0 14px;
  }

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

  .article-listItem {
    gap: 16px;
    padding: 20px 0;
  }

  .article-listImage {
    width: 104px;
    height: 78px;
  }

  .article-listTitle {
    font-size: 16px;
    line-height: 1.6;
  }

  .article-listSummary {
    display: none;
  }

  .article-listCopy .article-meta {
    gap: 4px 8px;
    padding-top: 8px;
    font-size: 11px;
  }

  .article-readingHeader h1 {
    font-size: 25px;
    line-height: 1.5;
  }

  .article-readingSummary {
    font-size: 14px;
  }

  .article-cover {
    max-height: 280px;
    margin: 24px 0;
  }

  .article-body h2 {
    font-size: 22px;
  }

  .article-body h3 {
    font-size: 18px;
  }
}

.content-category-sidebar-title {
  color: var(--muted-foreground);
  font-size: var(--navigation-label-size);
  font-weight: var(--navigation-label-weight);
  margin: 10px 12px 8px;
  line-height: 18px;
}

.content-category-sidebar-categories {
  flex-direction: column;
  gap: 4px;
  display: flex;
}

@media (max-width: 980px) {
  .content-category-sidebar-sidebar {
    top: var(--site-header-height);
    z-index: 15;
    border-bottom: 1px solid var(--border);
    background: var(--background);
    position: sticky;
  }

  .content-category-sidebar-title {
    display: none;
  }

  .content-category-sidebar-categories {
    scrollbar-width: thin;
    flex-direction: row;
    padding-block: 8px;
    overflow-x: auto;
  }

  .content-category-sidebar-categories a {
    white-space: nowrap;
    flex: none;
  }
}

.page-banner-banner {
  --banner-ink: var(--white);
  --banner-muted: var(--white);
}

@supports (color: color-mix(in lab, red, red)) {
  .page-banner-banner {
    --banner-muted: color-mix(in srgb, var(--white) 87%, var(--brand));
  }
}

.page-banner-banner {
  --banner-surface: #17212f;
  isolation: isolate;
  border-radius: var(--radius-panel);
  background: var(--banner-surface);
  min-height: 264px;
  color: var(--banner-ink);
  align-items: center;
  margin-block: 16px 28px;
  padding: 30px clamp(24px, 3vw, 42px);
  display: flex;
  position: relative;
  overflow: hidden;
}

.page-banner-banner[data-banner-theme="image"], .page-banner-banner[data-banner-theme="writing"], .page-banner-banner[data-banner-theme="apps"], .page-banner-banner[data-banner-theme="research"], .page-banner-banner[data-banner-theme="work"] {
  --banner-ink: var(--neutral-ink);
  --banner-muted: var(--neutral-ink);
}

@supports (color: color-mix(in lab, red, red)) {
  .page-banner-banner[data-banner-theme="image"], .page-banner-banner[data-banner-theme="writing"], .page-banner-banner[data-banner-theme="apps"], .page-banner-banner[data-banner-theme="research"], .page-banner-banner[data-banner-theme="work"] {
    --banner-muted: color-mix(in srgb, var(--neutral-ink) 80%, var(--white));
  }
}

.page-banner-banner[data-banner-theme="image"], .page-banner-banner[data-banner-theme="writing"], .page-banner-banner[data-banner-theme="apps"], .page-banner-banner[data-banner-theme="research"], .page-banner-banner[data-banner-theme="work"] {
  --banner-surface: #f6f2e8;
}

.page-banner-banner[data-banner-theme="apps"] {
  --banner-ink: var(--white);
  --banner-muted: var(--white);
}

@supports (color: color-mix(in lab, red, red)) {
  .page-banner-banner[data-banner-theme="apps"] {
    --banner-muted: color-mix(in srgb, var(--white) 85%, var(--brand));
  }
}

.page-banner-banner[data-banner-theme="apps"] {
  --banner-surface: var(--brand);
}

@supports (color: color-mix(in lab, red, red)) {
  .page-banner-banner[data-banner-theme="apps"] {
    --banner-surface: color-mix(in srgb, var(--brand) 15%, var(--brand-deep));
  }
}

.page-banner-banner[data-banner-theme="apps"] {
  min-height: 316px;
}

.page-banner-banner[data-banner-theme="apps"] .page-banner-art {
  object-position: center 30%;
}

.page-banner-banner[data-banner-theme="apps"] .page-banner-copy {
  width: 48%;
  max-width: 480px;
}

.page-banner-banner[data-banner-theme="research"] {
  --banner-surface: #eef1f4;
}

.page-banner-banner[data-banner-theme="audio"] {
  --banner-surface: #081a31;
}

.page-banner-banner[data-banner-theme="video"] {
  --banner-surface: #171c1c;
}

.page-banner-banner[data-banner-theme="ranking"] {
  --banner-surface: var(--brand);
}

@supports (color: color-mix(in lab, red, red)) {
  .page-banner-banner[data-banner-theme="ranking"] {
    --banner-surface: color-mix(in srgb, var(--brand) 20%, var(--neutral-ink));
  }
}

.page-banner-banner[data-banner-theme="workspace"] {
  --banner-surface: #111c39;
}

.page-banner-art {
  z-index: -2;
  object-fit: cover;
  object-position: center 24%;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.page-banner-banner:after {
  z-index: -1;
  background: linear-gradient(90deg, var(--banner-surface), var(--banner-surface) 36%, transparent 72%);
}

@supports (color: color-mix(in lab, red, red)) {
  .page-banner-banner:after {
    background: linear-gradient(90deg, color-mix(in srgb, var(--banner-surface) 90%, transparent), color-mix(in srgb, var(--banner-surface) 70%, transparent) 36%, transparent 72%);
  }
}

.page-banner-banner:after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.page-banner-copy {
  width: 56%;
  min-width: 0;
  max-width: 680px;
}

.page-banner-copy h1 span {
  color: inherit;
}

.page-banner-copy h1 {
  color: var(--banner-ink);
  font-family: var(--font-heading);
  letter-spacing: -.03em;
  text-wrap: balance;
  overflow-wrap: anywhere;
  margin: 0;
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 750;
  line-height: 1.2;
}

.page-banner-description {
  max-width: 72ch;
  color: var(--banner-muted);
  text-wrap: pretty;
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.7;
}

.page-banner-description p {
  margin: 0;
}

.page-banner-controls {
  min-width: 0;
  margin-top: 22px;
}

.page-banner-controls > * {
  width: 100%;
  max-width: 480px;
  margin: 0;
}

.page-banner-controls form, .page-banner-controls label {
  border-radius: var(--radius-control);
  background: var(--white);
  color: var(--neutral-ink);
}

.page-banner-controls input {
  background: var(--white);
  color: var(--neutral-ink);
  caret-color: var(--neutral-ink);
}

.page-banner-controls input::placeholder {
  color: var(--neutral-ink);
}

@supports (color: color-mix(in lab, red, red)) {
  .page-banner-controls input::placeholder {
    color: color-mix(in srgb, var(--neutral-ink) 76%, var(--white));
  }
}

.page-banner-controls input::placeholder {
  opacity: 1;
}

.page-banner-meta {
  color: var(--banner-muted);
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  margin-top: 16px;
  font-size: 12px;
  line-height: 1.6;
  display: flex;
}

.page-banner-meta strong {
  color: var(--banner-ink);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.page-banner-meta a {
  text-underline-offset: 3px;
  text-decoration: underline;
}

.page-banner-meta dl {
  flex-wrap: wrap;
  gap: 8px 20px;
  display: flex;
}

.page-banner-meta dt {
  font-size: 11px;
}

.page-banner-meta dd {
  color: var(--banner-ink);
  font-weight: 650;
}

.page-banner-banner ::selection {
  background: var(--brand);
}

@supports (color: color-mix(in lab, red, red)) {
  .page-banner-banner ::selection {
    background: color-mix(in srgb, var(--brand) 30%, var(--white));
  }
}

.page-banner-banner ::selection {
  color: var(--neutral-ink);
}

.page-banner-banner :is(a, button, summary):focus-visible {
  outline: 2px solid var(--banner-ink);
  outline-offset: 3px;
}

@media (max-width: 1100px) and (min-width: 681px) {
  .page-banner-copy {
    width: 61%;
  }

  .page-banner-art {
    object-position: 70% 24%;
  }

  .page-banner-banner[data-banner-theme="apps"] .page-banner-copy {
    width: 58%;
  }

  .page-banner-banner[data-banner-theme="apps"] .page-banner-art {
    object-position: 65% 30%;
  }
}

@media (max-width: 680px) {
  .page-banner-banner {
    min-height: 0;
    margin-block: 14px 24px;
    padding: 174px 22px 24px;
    display: block;
  }

  .page-banner-art {
    object-position: 78% 20%;
    height: 180px !important;
  }

  .page-banner-banner:after {
    background: linear-gradient(180deg, transparent 70px, var(--banner-surface) 180px);
  }

  .page-banner-copy {
    width: 100%;
    max-width: none;
  }

  .page-banner-copy h1 {
    font-size: clamp(27px, 7.4vw, 34px);
  }

  .page-banner-description {
    margin-top: 10px;
    font-size: 13px;
  }

  .page-banner-controls {
    margin-top: 18px;
  }

  .page-banner-meta {
    gap: 8px 16px;
    margin-top: 13px;
  }

  .page-banner-banner[data-banner-theme="apps"] {
    min-height: 0;
    padding-top: 204px;
  }

  .page-banner-banner[data-banner-theme="apps"] .page-banner-art {
    object-position: 80% 25%;
    height: 210px !important;
  }

  .page-banner-banner[data-banner-theme="apps"]:after {
    background: linear-gradient(180deg, transparent 110px, var(--banner-surface) 210px);
  }

  .page-banner-banner[data-banner-theme="apps"] .page-banner-copy {
    width: 100%;
    max-width: none;
  }
}

.appstore-page {
  --app-accent: var(--primary);
  --app-ink: var(--foreground);
  --app-muted: var(--muted-foreground);
  --app-border: var(--border);
  --app-selected: var(--accent);
  min-height: 100vh;
  color: var(--app-ink);
  background: var(--background);
  padding-bottom: 100px;
}

.appstore-hero {
  text-align: center;
  height: 350px;
  padding: 76px 24px 0;
}

.appstore-hero h1 {
  letter-spacing: 0;
  margin: 0;
  font-size: 46px;
  font-weight: 750;
  line-height: 1.35;
}

.appstore-hero h1 span {
  color: var(--app-accent);
}

.appstore-hero p {
  margin: 18px 0 0;
  font-size: 20px;
  line-height: 1.5;
}

.appstore-hero strong {
  color: var(--app-accent);
  font-weight: 600;
}

.appstore-search {
  border: 1px solid var(--input);
  border-radius: var(--radius-control);
  background: var(--card);
  align-items: center;
  width: min(100%, 746px);
  height: 46px;
  margin: 30px auto 0;
  padding-left: 20px;
  display: flex;
}

.appstore-search:focus-within {
  border-color: var(--ring);
  box-shadow: var(--field-focus-shadow);
}

.appstore-search input {
  width: 100%;
  min-width: 0;
  height: 100%;
  color: var(--app-ink);
  background: none;
  border: 0;
  outline: none;
  font-size: 14px;
}

.appstore-search input::placeholder {
  color: var(--app-muted);
}

.appstore-search button {
  border-radius: var(--radius-control);
  cursor: pointer;
  width: 56px;
  color: var(--app-muted);
  flex-shrink: 0;
  align-self: stretch;
  place-items: center;
  display: grid;
}

.appstore-search button:hover {
  color: var(--app-accent);
}

.appstore-directory {
  grid-template-columns: 128px minmax(0, 1fr);
  align-items: start;
  gap: 36px;
  width: 75%;
  margin-inline: auto;
  display: grid;
}

.appstore-categories {
  top: calc(var(--site-header-height) + 28px);
  max-height: calc(100dvh - var(--site-header-height) - 48px);
  scrollbar-width: thin;
  flex-direction: column;
  gap: 4px;
  display: flex;
  position: sticky;
  overflow-y: auto;
}

.appstore-sections {
  flex-direction: column;
  gap: 64px;
  min-width: 0;
  padding-top: 12px;
  display: flex;
}

.appstore-section {
  min-width: 0;
  scroll-margin-top: calc(var(--site-header-height) + 28px);
}

.appstore-sectionHeader {
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  display: flex;
}

.appstore-sectionHeader h2 {
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  display: flex;
}

.appstore-sectionIcon {
  border-radius: var(--radius-control);
  background: var(--muted);
  width: 40px;
  height: 40px;
  color: var(--app-muted);
  place-items: center;
  display: grid;
}

.appstore-more {
  flex-shrink: 0;
  padding: 8px 4px;
  font-size: 16px;
}

.appstore-more:hover {
  color: var(--app-accent);
}

.appstore-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  display: grid;
}

.appstore-card {
  border-radius: var(--radius-control);
  background: var(--card);
  align-items: center;
  gap: 10px;
  min-width: 0;
  height: 74px;
  padding: 12px;
  transition: background-color .15s;
  display: flex;
}

.appstore-card:hover {
  background: var(--muted);
}

.appstore-cardLogo {
  width: 48px;
  height: 48px;
  color: var(--app-accent);
  background: var(--muted);
  border-radius: 11px;
  flex-shrink: 0;
  place-items: center;
  display: grid;
  overflow: hidden;
}

.appstore-cardLogo img {
  object-fit: contain;
  width: 48px;
  height: 48px;
}

.appstore-cardText {
  min-width: 0;
}

.appstore-card h3 {
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 16px;
  font-weight: 650;
  line-height: 24px;
  overflow: hidden;
}

.appstore-card:hover h3 {
  color: var(--app-accent);
}

.appstore-card p {
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--app-muted);
  margin-top: 2px;
  font-size: 14px;
  line-height: 20px;
  overflow: hidden;
}

.appstore-resultCount {
  color: var(--app-muted);
  font-size: 14px;
  font-weight: 400;
}

.appstore-empty {
  color: var(--app-muted);
  padding: 60px 0;
  line-height: 2;
}

.appstore-empty a {
  color: var(--app-accent);
}

@media (max-width: 1439px) {
  .appstore-directory {
    gap: 28px;
    width: calc(100% - 80px);
  }
}

@media (max-width: 1100px) {
  .appstore-directory {
    grid-template-columns: 128px minmax(0, 1fr);
    gap: 24px;
    width: calc(100% - 48px);
  }

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

  .appstore-hero h1 {
    font-size: 40px;
  }

  .appstore-hero p {
    font-size: 17px;
  }
}

@media (max-width: 800px) {
  .appstore-hero {
    height: 292px;
    padding-top: 56px;
  }

  .appstore-hero h1 {
    font-size: 34px;
  }

  .appstore-hero p {
    max-width: 500px;
    margin-inline: auto;
    font-size: 16px;
  }

  .appstore-search {
    margin-top: 24px;
  }

  .appstore-directory {
    display: block;
  }

  .appstore-categories {
    flex-direction: row;
    max-height: none;
    padding-bottom: 12px;
    position: static;
    overflow-x: auto;
  }

  .appstore-category {
    flex-shrink: 0;
  }

  .appstore-sections {
    gap: 40px;
    padding-top: 20px;
  }

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

@media (max-width: 480px) {
  .appstore-hero {
    height: 282px;
    padding: 44px 16px 0;
  }

  .appstore-hero h1 {
    text-wrap: balance;
    font-size: 29px;
  }

  .appstore-hero h1 span {
    display: block;
  }

  .appstore-hero p {
    margin-top: 12px;
    font-size: 14px;
  }

  .appstore-search {
    margin-top: 22px;
  }

  .appstore-directory {
    width: calc(100% - 32px);
  }

  .appstore-grid {
    gap: 10px;
  }

  .appstore-card {
    gap: 8px;
    height: 72px;
    padding: 9px;
  }

  .appstore-cardLogo, .appstore-cardLogo img {
    width: 36px;
    height: 36px;
  }

  .appstore-cardLogo {
    border-radius: var(--radius-control);
  }

  .appstore-card h3 {
    font-size: 14px;
  }

  .appstore-card p {
    font-size: 12px;
  }

  .appstore-sectionHeader h2 {
    font-size: 18px;
  }

  .appstore-more {
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .appstore-card {
    transition: none;
  }
}

.appstore-page {
  min-height: 0;
  padding-bottom: 72px;
}

.appstore-hero {
  border-bottom: 1px solid var(--border);
  text-align: left;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  align-items: center;
  gap: 2px 30px;
  width: min(100% - 64px, 1480px);
  height: auto;
  margin: 0 auto 28px;
  padding: 30px 0 23px;
  display: grid;
}

.appstore-hero h1 {
  letter-spacing: -.045em;
  grid-column: 1;
  font-size: clamp(27px, 2.5vw, 38px);
  font-weight: 780;
}

.appstore-hero p {
  color: var(--muted-foreground);
  grid-column: 1;
  margin-top: 4px;
  font-size: 14px;
}

.appstore-hero strong {
  color: var(--primary);
}

.appstore-search {
  background: var(--muted);
  border-radius: 999px;
  grid-area: 1 / 2 / 3;
  width: 100%;
  height: 44px;
  margin: 0;
}

.appstore-directory {
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 28px;
  width: min(100% - 64px, 1480px);
}

.appstore-categories {
  border-right: 1px solid var(--border);
  padding-right: 12px;
  top: 84px;
}

.appstore-sections {
  gap: 44px;
  padding-top: 0;
}

.appstore-sectionHeader {
  margin-bottom: 15px;
}

.appstore-sectionHeader h2 {
  font-size: 19px;
}

.appstore-sectionIcon {
  width: 34px;
  height: 34px;
}

.appstore-more {
  color: var(--muted-foreground);
  font-size: 12px;
}

.appstore-grid {
  gap: 12px;
}

.appstore-card {
  border-radius: 12px;
  height: 78px;
}

.appstore-cardLogo, .appstore-cardLogo img {
  width: 50px;
  height: 50px;
}

.appstore-card h3 {
  font-size: 14px;
}

.appstore-card p {
  font-size: 12px;
}

@media (max-width: 1250px) {
  .appstore-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 800px) {
  .appstore-hero {
    grid-template-columns: 1fr;
    gap: 14px;
    width: calc(100% - 40px);
    margin-bottom: 18px;
    padding-top: 24px;
  }

  .appstore-hero h1, .appstore-hero p, .appstore-search {
    grid-area: auto / 1;
  }

  .appstore-hero h1 {
    font-size: 30px;
  }

  .appstore-hero p {
    margin: -10px 0 0;
    font-size: 13px;
  }

  .appstore-search {
    margin-top: 2px;
  }

  .appstore-directory {
    width: calc(100% - 40px);
    display: block;
  }

  .appstore-categories {
    border-right: 0;
    border-bottom: 1px solid var(--border);
    flex-direction: row;
    padding: 0 0 12px;
  }

  .appstore-sections {
    padding-top: 18px;
  }

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

@media (max-width: 480px) {
  .appstore-hero {
    width: calc(100% - 32px);
  }

  .appstore-hero h1 {
    font-size: 27px;
  }

  .appstore-directory {
    width: calc(100% - 32px);
  }

  .appstore-grid {
    grid-template-columns: 1fr;
  }

  .appstore-card {
    height: 72px;
  }

  .appstore-cardLogo, .appstore-cardLogo img {
    width: 44px;
    height: 44px;
  }
}

@media (min-width: 981px) {
  .appstore-directory {
    display: block;
  }

  .appstore-categories {
    border-right: 0;
    max-height: none;
    padding-right: 0;
    position: static;
    overflow: visible;
  }
}

.legal-content {
  color: var(--foreground);
  font-size: 14px;
  line-height: 1.9;
}

.legal-content h1 {
  letter-spacing: -.035em;
  margin-bottom: 28px;
  font-size: clamp(30px, 4vw, 42px);
  font-weight: 750;
  line-height: 1.3;
}

.legal-content h2 {
  margin: 32px 0 12px;
  font-size: 22px;
  font-weight: 700;
}

.legal-content h3 {
  margin: 28px 0 10px;
  font-size: 18px;
  font-weight: 700;
}

.legal-content section + section {
  margin-top: 28px;
}

.legal-content p + p, .legal-content p + ul, .legal-content ul + p {
  margin-top: 12px;
}

.legal-content ul {
  padding-left: 20px;
  list-style: outside;
}

.legal-content li + li {
  margin-top: 7px;
}

.legal-content a {
  color: var(--primary);
  text-underline-offset: 3px;
  text-decoration: underline;
}

@media (max-width: 1100px) and (min-width: 681px) {
  .page-banner-module__1jsgDq__copy {
    width: 61%;
  }

  .page-banner-module__1jsgDq__art {
    object-position: 70% 24%;
  }

  .page-banner-module__1jsgDq__banner[data-banner-theme="apps"] .page-banner-module__1jsgDq__copy {
    width: 58%;
  }

  .page-banner-module__1jsgDq__banner[data-banner-theme="apps"] .page-banner-module__1jsgDq__art {
    object-position: 65% 30%;
  }
}

@media (max-width: 680px) {
  .page-banner-module__1jsgDq__banner {
    min-height: 0;
    margin-block: 14px 24px;
    padding: 174px 22px 24px;
    display: block;
  }

  .page-banner-module__1jsgDq__art {
    object-position: 78% 20%;
    height: 180px !important;
  }

  .page-banner-module__1jsgDq__banner:after {
    background: linear-gradient(180deg, transparent 70px, var(--banner-surface) 180px);
  }

  .page-banner-module__1jsgDq__copy {
    width: 100%;
    max-width: none;
  }

  .page-banner-module__1jsgDq__copy h1 {
    font-size: clamp(27px, 7.4vw, 34px);
  }

  .page-banner-module__1jsgDq__description {
    margin-top: 10px;
    font-size: 13px;
  }

  .page-banner-module__1jsgDq__controls {
    margin-top: 18px;
  }

  .page-banner-module__1jsgDq__meta {
    gap: 8px 16px;
    margin-top: 13px;
  }

  .page-banner-module__1jsgDq__banner[data-banner-theme="apps"] {
    min-height: 0;
    padding-top: 204px;
  }

  .page-banner-module__1jsgDq__banner[data-banner-theme="apps"] .page-banner-module__1jsgDq__art {
    object-position: 80% 25%;
    height: 210px !important;
  }

  .page-banner-module__1jsgDq__banner[data-banner-theme="apps"]:after {
    background: linear-gradient(180deg, transparent 110px, var(--banner-surface) 210px);
  }

  .page-banner-module__1jsgDq__banner[data-banner-theme="apps"] .page-banner-module__1jsgDq__copy {
    width: 100%;
    max-width: none;
  }
}

.member-library-library {
  --library-secondary: var(--foreground);
}

@supports (color: color-mix(in lab, red, red)) {
  .member-library-library {
    --library-secondary: color-mix(in srgb, var(--foreground) 72%, var(--card));
  }
}

.member-library-library {
  width: min(100% - 80px, 1120px);
  min-height: calc(100dvh - var(--site-header-height));
  margin-inline: auto;
  padding-block: 48px 64px;
}

.member-library-heading {
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-bottom: 28px;
  display: flex;
}

.member-library-heading h1 {
  letter-spacing: -.025em;
  margin-bottom: 10px;
  font-size: 30px;
  font-weight: 650;
  line-height: 1.4;
}

.member-library-heading p {
  color: var(--library-secondary);
  font-size: 14px;
  line-height: 1.7;
}

.member-library-explore-link, .member-library-browse-link {
  min-height: 44px;
  color: var(--library-secondary);
  flex-shrink: 0;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  display: inline-flex;
}

.member-library-explore-link:hover, .member-library-browse-link:hover {
  color: var(--primary);
}

.member-library-library :is(a, button):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 4px;
}

.member-library-tabs {
  border-bottom: 1px solid var(--border);
  gap: 28px;
  display: flex;
}

.member-library-tabs a {
  min-height: 48px;
  color: var(--library-secondary);
  align-items: center;
  gap: 8px;
  padding-block: 12px;
  font-size: 14px;
  font-weight: 550;
  display: inline-flex;
  position: relative;
}

.member-library-tabs a:hover {
  color: var(--primary);
}

.member-library-tabs svg, .member-library-visit svg, .member-library-remove svg, .member-library-empty > svg {
  stroke-width: var(--site-icon-stroke);
}

.member-library-tabs svg {
  width: 18px;
  height: 18px;
}

.member-library-tabs a[aria-current="page"] {
  color: var(--primary);
  font-weight: 650;
}

.member-library-tabs button {
  cursor: pointer;
  min-height: 48px;
  color: var(--library-secondary);
  background: none;
  border: none;
  align-items: center;
  gap: 8px;
  padding-block: 12px;
  font-size: 14px;
  font-weight: 550;
  display: inline-flex;
  position: relative;
}

.member-library-tabs button:hover {
  color: var(--primary);
}

.site-header-mobileNav {
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  gap: 8px;
  padding: 0 12px 10px;
  display: flex;
  overflow-x: auto;
}

.site-header-mobileNav::-webkit-scrollbar {
  display: none;
}

.site-header-mobileNav a {
  border: 1px solid var(--border);
  min-height: 30px;
  color: var(--foreground);
  background: var(--card);
  white-space: nowrap;
  border-radius: 999px;
  flex: none;
  align-items: center;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
}

.site-header-mobileNav a:hover {
  color: var(--primary);
  border-color: var(--primary);
}

@media (min-width: 768px) {
  .site-header-mobileNav {
    display: none;
  }
}

.member-library-tabs a[aria-current="page"]:after {
  background: var(--primary);
  content: "";
  height: 2px;
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
}

.member-library-toolbar {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px 16px;
  padding-block: 24px 16px;
  display: flex;
}

.member-library-toolbar h2 {
  font-size: 13px;
  font-weight: 550;
}

.member-library-toolbar h2 span {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.member-library-toolbar p {
  color: var(--library-secondary);
  font-size: 12px;
  line-height: 1.6;
}

.member-library-list {
  background: var(--card);
  border-radius: 12px;
  padding-inline: 24px;
}

.member-library-row {
  align-items: center;
  gap: 16px;
  min-width: 0;
  display: flex;
}

.member-library-row + .member-library-row {
  border-top: 1px solid var(--border);
}

.member-library-product {
  flex: 1;
  align-items: center;
  gap: 16px;
  min-width: 0;
  min-height: 88px;
  padding-block: 16px;
  display: flex;
}

.member-library-logo {
  background: var(--card);
  border-radius: 12px;
  flex: none;
  place-items: center;
  width: 48px;
  height: 48px;
  display: grid;
  overflow: hidden;
}

.member-library-logoimage {
  object-fit: contain;
  border-radius: 8px;
  width: 40px;
  height: 40px;
  display: block;
}

.member-library-logofallback {
  width: 100%;
  height: 100%;
  color: var(--foreground);
  place-items: center;
  font-size: 20px;
  font-weight: 650;
  display: grid;
}

.member-library-copy {
  flex: 1;
  gap: 4px;
  min-width: 0;
  display: grid;
}

.member-library-copy h3 {
  overflow-wrap: anywhere;
  color: var(--foreground);
  transition: color var(--duration-fast) var(--ease-out);
  font-size: 16px;
  font-weight: 650;
  line-height: 1.5;
}

.member-library-copy p {
  -webkit-line-clamp: 2;
  color: var(--library-secondary);
  -webkit-box-orient: vertical;
  font-size: 13px;
  line-height: 1.6;
  display: -webkit-box;
  overflow: hidden;
}

.member-categories {
  max-width: 160px;
  color: var(--library-secondary);
  text-align: right;
  font-size: 12px;
  line-height: 1.6;
}

.member-library-visit {
  color: var(--library-secondary);
  transition: color var(--duration-fast) var(--ease-out);
  flex: none;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  display: inline-flex;
}

.member-library-product:hover :is(h3, .member-library-visit) {
  color: var(--primary);
}

.member-library-remove {
  min-width: 76px;
  min-height: 44px;
  color: var(--site-icon-color);
  cursor: pointer;
  padding-inline: 12px;
  font-size: 12px;
}

.member-library-remove svg {
  width: 18px;
  height: 18px;
}

.member-library-remove:is(:hover, :focus-visible) {
  color: var(--destructive);
  background: var(--destructive);
}

@supports (color: color-mix(in lab, red, red)) {
  .member-library-remove:is(:hover, :focus-visible) {
    background: color-mix(in srgb, var(--destructive) 6%, var(--card));
  }
}

.member-library-remove:disabled {
  cursor: wait;
}

.member-library-empty {
  background: var(--card);
  text-align: center;
  border-radius: 12px;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  min-height: 320px;
  margin-top: 24px;
  padding: 48px 24px;
  display: flex;
}

.member-library-empty > svg {
  color: var(--library-secondary);
}

.member-library-empty h2 {
  font-size: 20px;
  font-weight: 650;
  line-height: 1.5;
}

.member-library-empty p {
  max-width: 42ch;
  color: var(--library-secondary);
  font-size: 14px;
  line-height: 1.7;
}

.member-library-empty button, .member-library-empty a {
  min-height: 44px;
  margin-top: 8px;
}

.member-library-login-invite {
  background: var(--card);
  border-radius: 12px;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  margin-top: 28px;
  display: grid;
}

.member-library-invite-content {
  text-align: left;
  text-wrap: initial;
  background: var(--primary);
  border-radius: 12px 0 0 12px;
  justify-content: center;
  align-items: flex-start;
  gap: 28px;
}

@supports (color: color-mix(in lab, red, red)) {
  .member-library-invite-content {
    background: color-mix(in srgb, var(--primary) 4%, var(--card));
  }
}

.member-library-invite-content {
  padding: 48px;
}

.member-library-invite-header {
  align-items: flex-start;
  gap: 18px;
  max-width: 100%;
}

.member-library-invite-header h2 {
  color: var(--foreground);
  letter-spacing: -.025em;
  font-size: clamp(27px, 2.5vw, 34px);
  font-weight: 650;
  line-height: 1.5;
}

.member-library-invite-header p {
  color: var(--library-secondary);
  font-size: 14px;
  line-height: 1.9;
}

.member-library-invite-actions {
  align-items: flex-start;
  gap: 18px;
  max-width: none;
}

.member-library-action-row {
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  display: flex;
}

.member-library-login-button {
  min-height: 44px;
  padding-inline: 20px;
}

.member-library-sync-hint {
  color: var(--library-secondary);
  align-items: center;
  gap: 7px;
  font-size: 12px;
  line-height: 1.6;
  display: inline-flex;
}

.member-library-collection-guide {
  align-self: center;
  padding: 40px 48px;
}

.member-library-guide-heart {
  color: var(--primary);
  stroke-width: 1.5px;
  margin-bottom: 20px;
}

.member-library-collection-guide h3 {
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
}

.member-library-collection-guide p {
  color: var(--library-secondary);
  font-size: 13px;
  line-height: 1.9;
}

.member-library-collection-guide ul {
  gap: 12px;
  margin-top: 24px;
  display: grid;
}

.member-library-collection-guide li {
  color: var(--library-secondary);
  align-items: center;
  gap: 10px;
  font-size: 13px;
  line-height: 1.6;
  display: flex;
}

.member-library-collection-guide li svg {
  color: var(--primary);
  stroke-width: var(--site-icon-stroke);
}

.member-library-discovery {
  margin-top: 40px;
}

.member-library-discovery > h2 {
  margin-bottom: 22px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
}

.member-library-discovery-links {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  display: grid;
}

.member-library-discovery-links > a {
  border-top: 1px solid var(--border);
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding-block: 20px 8px;
  display: flex;
}

.member-library-discovery-links h3 {
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  width: 100%;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  display: flex;
}

.member-library-discovery-links svg {
  color: var(--library-secondary);
  stroke-width: var(--site-icon-stroke);
}

.member-library-discovery-links p {
  color: var(--library-secondary);
  font-size: 13px;
  line-height: 1.8;
}

.member-library-discovery-links span {
  color: var(--primary);
  margin-top: auto;
  padding-top: 8px;
  font-size: 12px;
  line-height: 1.7;
}

.member-library-discovery-links a:hover :is(h3, svg) {
  color: var(--primary);
}

.member-library-empty-action {
  min-height: 44px;
  padding-inline: 20px;
}

.member-library-login-button:hover, .member-library-empty-action:hover {
  background: var(--primary-hover);
}

.member-retry-button {
  min-height: 44px;
}

.member-loading {
  color: var(--library-secondary);
  padding-block: 32px;
  font-size: 14px;
}

.member-error {
  background: var(--destructive);
}

@supports (color: color-mix(in lab, red, red)) {
  .member-error {
    background: color-mix(in srgb, var(--destructive) 6%, var(--card));
  }
}

.member-error {
  color: var(--destructive);
  overflow-wrap: anywhere;
  border-radius: 8px;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  padding: 16px;
  font-size: 14px;
  display: flex;
}

.member-spinner {
  animation: 1s linear infinite member-spin;
}

@keyframes member-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 760px) {
  .member-library-login-invite {
    grid-template-columns: 1fr;
    margin-top: 24px;
  }

  .member-library-invite-content {
    border-radius: 12px 12px 0 0;
    padding: 32px 24px;
  }

  .member-library-invite-header h2 {
    font-size: 28px;
  }

  .member-library-collection-guide {
    padding: 28px 24px;
  }

  .member-library-guide-heart, .member-library-collection-guide p br {
    display: none;
  }

  .member-library-collection-guide ul {
    gap: 10px;
    margin-top: 16px;
  }

  .member-library-discovery {
    margin-top: 32px;
  }

  .member-library-discovery-links {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .member-library-discovery-links > a {
    gap: 8px;
    padding-block: 16px 8px;
  }

  .member-library-heading {
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
  }

  .member-library-explore-link {
    display: none;
  }

  .member-error {
    flex-wrap: wrap;
  }

  .member-library-library {
    width: calc(100% - 32px);
    padding-block: 24px 40px;
  }

  .member-library-heading h1 {
    font-size: 26px;
  }

  .member-library-tabs {
    gap: 24px;
  }

  .member-library-toolbar {
    align-items: flex-start;
  }

  .member-library-list {
    padding-inline: 16px;
  }

  .member-library-row {
    gap: 8px;
  }

  .member-library-product {
    gap: 12px;
    min-height: 80px;
  }

  .member-library-logo {
    width: 40px;
    height: 40px;
  }

  .member-library-logoimage {
    border-radius: 6px;
    width: 32px;
    height: 32px;
  }

  .member-library-logo {
    border-radius: 10px;
  }

  .member-library-copy h3 {
    font-size: 15px;
  }

  .member-categories, .member-library-visit {
    display: none;
  }

  .member-library-remove {
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
  }

  .member-library-remove span {
    display: none;
  }
}

@media (min-width: 761px) and (max-width: 1100px) {
  .member-library-invite-content {
    padding: 36px;
  }

  .member-library-collection-guide {
    padding: 36px 28px;
  }

  .member-library-discovery-links {
    gap: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .member-library-copy h3, .member-library-visit {
    transition: none;
  }

  .member-spinner {
    animation: none;
  }
}

.service-presentation-page {
  padding-block: 26px 88px;
}

.service-presentation-hero {
  isolation: isolate;
  background: #0b2857;
  border-radius: 18px;
  min-height: 370px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.service-presentation-hero-image {
  object-fit: cover;
  object-position: center 18%;
}

.service-presentation-hero-shade {
  background: linear-gradient(90deg, #071c44f0 0%, #071c44d6 27%, #071c4447 52%, #0000 75%);
  position: absolute;
  inset: 0;
}

.service-presentation-hero-content {
  z-index: 1;
  color: #fff;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: min(62%, 760px);
  padding: 28px 48px 34px;
  display: flex;
  position: relative;
}

.service-presentation-breadcrumb {
  color: #c8d9f5;
  margin-bottom: 23px;
  font-size: 11px;
  font-weight: 550;
}

.service-presentation-breadcrumb:hover {
  color: #fff;
}

.service-presentation-breadcrumb span {
  color: #9ab2d7;
  margin-inline: 6px;
}

.service-presentation-hero h1 {
  letter-spacing: -.035em;
  text-wrap: balance;
  max-width: 11ch;
  font-size: clamp(38px, 3.5vw, 58px);
  font-weight: 760;
  line-height: 1.15;
}

.service-presentation-hero-content > p {
  color: #e4edff;
  text-wrap: pretty;
  max-width: 50ch;
  margin-top: 15px;
  font-size: 15px;
  line-height: 1.7;
}

.service-presentation-hero-actions {
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 25px;
  display: flex;
}

.service-presentation-primary-action {
  background: var(--primary);
  min-height: 44px;
  color: var(--primary-foreground);
  border-radius: 9px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding-inline: 20px;
  font-size: 13px;
  font-weight: 750;
  transition: opacity .2s, transform .2s;
  display: inline-flex;
}

.service-presentation-primary-action:hover {
  opacity: .9;
  transform: translateY(-2px);
}

.service-presentation-secondary-action {
  color: #eef6ff;
  align-items: center;
  gap: 6px;
  min-height: 42px;
  font-size: 12px;
  font-weight: 650;
  display: inline-flex;
}

.service-presentation-secondary-action:hover {
  color: #fff;
  text-underline-offset: 4px;
  text-decoration: underline;
}

.service-presentation-hero-facts {
  color: #d3e6ff;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 24px;
  font-size: 11px;
  font-weight: 570;
  display: flex;
}

.service-presentation-hero-facts span {
  align-items: center;
  gap: 5px;
  display: inline-flex;
}

.service-presentation-hero-facts svg {
  color: var(--brand-light);
}

.service-presentation-tabs {
  border-bottom: 1px solid var(--border);
  scrollbar-width: none;
  gap: clamp(16px, 3vw, 42px);
  min-width: 0;
  margin-top: 26px;
  display: flex;
  overflow-x: auto;
}

.service-presentation-tabs::-webkit-scrollbar {
  display: none;
}

.service-presentation-tab {
  min-height: 51px;
  color: var(--muted-foreground);
  white-space: nowrap;
  border-bottom: 2px solid #0000;
  flex: none;
  align-items: baseline;
  gap: 7px;
  padding: 10px 2px 13px;
  display: flex;
}

.service-presentation-tab:hover {
  color: var(--foreground);
}

.service-presentation-tab-active {
  border-bottom-color: var(--primary);
  color: var(--foreground);
}

.service-presentation-tab strong {
  font-size: 14px;
  font-weight: 650;
}

.service-presentation-tab small {
  font-size: 11px;
}

.service-presentation-tab-active strong {
  font-weight: 750;
}

.service-presentation-work-area {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 16px;
  grid-template-columns: minmax(0, 1fr) 340px;
  align-items: stretch;
  margin-top: 24px;
  display: grid;
  overflow: hidden;
}

.service-presentation-form-card {
  min-width: 0;
  scroll-margin-top: calc(var(--site-header-height) + 24px);
  padding: clamp(24px, 3vw, 42px);
}

.service-presentation-aside {
  --preview-muted: var(--muted-foreground);
}

@supports (color: color-mix(in lab, red, red)) {
  .service-presentation-aside {
    --preview-muted: color-mix(in srgb, var(--muted-foreground) 80%, var(--foreground));
  }
}

.service-presentation-aside {
  border-left: 1px solid var(--border);
  min-width: 0;
  scroll-margin-top: calc(var(--site-header-height) + 24px);
  padding: clamp(24px, 3vw, 42px) 28px;
}

.service-presentation-preview-heading h2 {
  font-size: 16px;
  font-weight: 650;
  line-height: 1.5;
}

.service-presentation-preview-heading p {
  color: var(--preview-muted);
  text-wrap: pretty;
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.7;
}

.service-presentation-preview-product {
  border-block: 1px solid var(--border);
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  padding-block: 18px;
  display: flex;
}

.service-presentation-preview-product-text {
  min-width: 0;
}

.service-presentation-preview-product-text strong {
  color: var(--foreground);
  overflow-wrap: anywhere;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
  display: block;
}

.service-presentation-preview-product-text small {
  color: var(--preview-muted);
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.5;
  display: block;
}

.service-presentation-preview-logo {
  background: var(--muted);
  border-radius: 8px;
  flex: 0 0 40px;
  place-items: center;
  width: 40px;
  height: 40px;
  display: grid;
  overflow: hidden;
}

.service-presentation-preview-logo-image {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.service-presentation-preview-logo-fallback {
  color: var(--preview-muted);
  font-size: 18px;
  font-weight: 600;
}

.service-presentation-preview-disclaimer {
  color: var(--preview-muted);
  margin-top: 10px;
  font-size: 11px;
  line-height: 1.7;
}

.service-presentation-support {
  margin-top: 32px;
}

.service-presentation-support h3 {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}

.service-presentation-support ul {
  color: var(--preview-muted);
  gap: 6px;
  margin-top: 10px;
  padding-left: 16px;
  font-size: 12px;
  line-height: 1.7;
  list-style: outside;
  display: grid;
}

.service-presentation-support a {
  color: var(--preview-muted);
  text-underline-offset: 4px;
  margin-top: 16px;
  font-size: 12px;
  line-height: 1.7;
  text-decoration: underline;
  display: inline-block;
}

.service-presentation-support a:hover {
  color: var(--primary);
}

.service-presentation-support a:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 4px;
  border-radius: 2px;
}

.service-presentation-support-only {
  border-left: 1px solid var(--border);
  background: var(--primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .service-presentation-support-only {
    background: color-mix(in srgb, var(--primary) 2%, var(--card));
  }
}

.service-presentation-support-only {
  min-width: 0;
  padding: 40px 28px;
}

.service-presentation-support-only > svg {
  color: var(--primary);
}

.service-presentation-support-only h2 {
  margin-top: 14px;
  font-size: 17px;
  font-weight: 700;
}

.service-presentation-support-only p {
  color: var(--muted-foreground);
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.7;
}

.service-presentation-support-only a {
  color: var(--primary);
  align-items: center;
  gap: 4px;
  margin-top: 15px;
  font-size: 12px;
  display: inline-flex;
}

@media (max-width: 1000px) {
  .service-presentation-work-area {
    grid-template-columns: minmax(0, 1fr) 300px;
  }

  .service-presentation-hero-content {
    width: 66%;
    padding-inline: 34px;
  }
}

@media (max-width: 800px) {
  .service-presentation-work-area {
    grid-template-columns: 1fr;
  }

  .service-presentation-aside, .service-presentation-support-only {
    border-top: 1px solid var(--border);
    border-left: 0;
  }

  .service-presentation-hero-content {
    width: 78%;
  }
}

@media (max-width: 640px) {
  .service-presentation-page {
    padding-block: 16px 56px;
  }

  .service-presentation-hero {
    border-radius: 14px;
    align-items: flex-end;
    min-height: 480px;
  }

  .service-presentation-hero-image {
    object-position: 73% top;
  }

  .service-presentation-hero-shade {
    background: linear-gradient(#06173a14 24%, #06173aeb 63%, #06173afc 100%);
  }

  .service-presentation-hero-content {
    width: 100%;
    padding: 22px;
  }

  .service-presentation-breadcrumb {
    margin-bottom: 15px;
  }

  .service-presentation-hero h1 {
    max-width: 10ch;
    font-size: clamp(32px, 9vw, 42px);
  }

  .service-presentation-hero-content > p {
    max-width: 30ch;
    margin-top: 11px;
    font-size: 12px;
    line-height: 1.7;
  }

  .service-presentation-hero-actions {
    gap: 10px;
    margin-top: 20px;
  }

  .service-presentation-primary-action {
    min-height: 40px;
    padding-inline: 14px;
    font-size: 11px;
  }

  .service-presentation-secondary-action {
    font-size: 11px;
  }

  .service-presentation-hero-facts {
    gap: 5px 10px;
    margin-top: 20px;
    font-size: 9px;
  }

  .service-presentation-tabs {
    gap: 20px;
    margin-top: 16px;
  }

  .service-presentation-tab {
    min-height: 44px;
    padding-bottom: 10px;
  }

  .service-presentation-tab strong {
    font-size: 12px;
  }

  .service-presentation-tab small {
    display: none;
  }

  .service-presentation-work-area {
    margin-top: 18px;
  }

  .service-presentation-form-card {
    padding: 20px 16px;
  }

  .service-presentation-aside, .service-presentation-support-only {
    padding: 26px 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-presentation-primary-action {
    transition: none;
  }

  .service-presentation-primary-action:hover {
    transform: none;
  }
}

.site-footer-mail {
  color: #fff;
  background: #ffffff14;
  border-radius: 8px;
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 550;
  line-height: 20px;
  display: block;
}

.site-footer-mail:hover {
  color: #8fa6ff;
}

.site-floating-popup a {
  background: hsl(var(--muted));
  color: hsl(var(--foreground));
  white-space: nowrap;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 600;
  display: block;
}

.site-floating-popup a:hover {
  color: hsl(var(--primary));
}

.tool-card-tool {
  border: 1px solid var(--border);
  background: var(--card);
  min-width: 0;
  transition: border-color var(--duration-fast) var(--ease-out);
  border-radius: 12px;
  flex-direction: column;
  display: flex;
  position: relative;
  overflow: hidden;
}

.tool-card-tool:hover {
  border-color: var(--primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .tool-card-tool:hover {
    border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
  }
}

.tool-card-tool:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
}

.tool-card-toolBody {
  flex-direction: column;
  flex: 1;
  min-width: 0;
  padding: 12px 14px 14px;
  display: flex;
}

.tool-card-toolHeading {
  align-items: center;
  gap: 9px;
  min-width: 0;
  display: flex;
}

.tool-card-toolLogo {
  height: 32px;
  color: var(--muted-foreground);
  border-radius: 8px;
  flex: 0 0 32px;
  place-items: center;
  font-size: 12px;
  font-weight: 600;
  display: grid;
  position: relative;
  overflow: hidden;
}

.tool-card-logoImage {
  object-fit: contain;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.tool-card-toolHeading h3 {
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: -.015em;
  min-width: 0;
  transition: color var(--duration-fast) var(--ease-out);
  flex: 1;
  font-size: 15px;
  font-weight: 650;
  line-height: 24px;
  overflow: hidden;
}

.tool-card-tool:hover h3 {
  color: var(--primary);
}

.tool-card-toolBadge {
  z-index: 2;
  background: var(--new-background);
  color: var(--new-foreground);
  border-radius: 0 8px 0 7px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  position: absolute;
  top: 12px;
  right: 12px;
}

.tool-card-toolSummary {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-height: 21px;
  color: var(--foreground);
}

@supports (color: color-mix(in lab, red, red)) {
  .tool-card-toolSummary {
    color: color-mix(in srgb, var(--foreground) 72%, var(--card));
  }
}

.tool-card-toolSummary {
  margin-top: 8px;
  font-size: 13px;
  line-height: 21px;
  overflow: hidden;
}

.tool-card-toolFooter {
  min-height: 34px;
  color: var(--foreground);
}

@supports (color: color-mix(in lab, red, red)) {
  .tool-card-toolFooter {
    color: color-mix(in srgb, var(--foreground) 72%, var(--card));
  }
}

.tool-card-toolFooter {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
  font-size: 11px;
  line-height: 20px;
  display: flex;
}

.tool-card-toolAction {
  color: var(--primary);
  opacity: .65;
  transition: opacity var(--duration-fast) var(--ease-out);
  flex: none;
}

.tool-card-tool:hover .tool-card-toolAction, .tool-card-tool:focus-visible .tool-card-toolAction {
  opacity: 1;
}

.tool-card-toolCover {
  aspect-ratio: 16 / 9;
  background: var(--muted);
  border-radius: 8px;
  margin: 12px 12px 0;
  position: relative;
  overflow: hidden;
}

.tool-card-coverFallback {
  color: var(--muted-foreground);
  place-items: center;
  padding: 16px;
  display: grid;
  position: absolute;
  inset: 0;
}

.tool-card-coverFallbackLogo {
  object-fit: contain;
  width: 64px;
  height: 64px;
}

.tool-card-coverImage {
  object-fit: cover;
  object-position: top;
  width: 100%;
  height: 100%;
  position: relative;
}

.tool-card-toolTags {
  align-items: center;
  gap: 6px;
  min-width: 0;
  display: flex;
  overflow: hidden;
}

.tool-card-toolTags span {
  background: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 6px;
  min-width: 0;
  padding: 1px 7px;
  overflow: hidden;
}

.tool-card-toolSignals {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px 10px;
  min-width: 0;
  display: flex;
}

.tool-card-toolLabel {
  align-items: center;
  gap: 5px;
  display: inline-flex;
}

.tool-card-traffic {
  font-variant-numeric: tabular-nums;
  align-items: center;
  gap: 4px;
  display: inline-flex;
}

.tool-card-traffic svg {
  stroke-width: var(--site-icon-stroke);
}

.tool-card-toolGrid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  display: grid;
}

@media (max-width: 1500px) {
  .tool-card-toolGrid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1280px) {
  .tool-card-toolGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .tool-card-toolGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .tool-card-toolGrid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

@media (max-width: 560px) {
  .tool-card-toolHeading h3 {
    font-size: 16px;
  }

  .tool-card-toolAction {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tool-card-tool, .tool-card-toolHeading h3, .tool-card-toolAction {
    transition: none;
  }
}

.model-dossier {
  --dossier-series-1: #5876d8;
  --dossier-series-2: #9c68c9;
  --dossier-series-3: #d27736;
  --dossier-series-4: #168e93;
  --dossier-series-5: #d46683;
  --dossier-series-6: #5e9550;
  --dossier-series-7: #5d8fb9;
  --dossier-series-8: #b48533;
}

.dark .model-dossier {
  --dossier-series-1: #91acff;
  --dossier-series-2: #c99bea;
  --dossier-series-3: #eda266;
  --dossier-series-4: #64c5c9;
  --dossier-series-5: #ef9db2;
  --dossier-series-6: #a1c98b;
  --dossier-series-7: #8bbce4;
  --dossier-series-8: #e4c071;
}

.model-dossier {
  background: var(--background);
  color: var(--foreground);
  min-height: 80vh;
  padding: 30px 32px 80px;
}

.dossier-wrap {
  width: min(100%, 1280px);
  margin-inline: auto;
}

.model-detail > .dossier-wrap {
  max-width: 1180px;
}

.model-dossier a, .model-dossier button {
  text-underline-offset: 4px;
  transition: color .16s, background-color .16s;
}

.model-dossier :is(a, button, summary, select, input):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 4px;
}

.model-dossier ::selection {
  background: var(--selection);
  color: var(--selection-foreground);
}

.model-dossier input {
  caret-color: var(--primary);
}

.model-dossier section[id] {
  scroll-margin-top: calc(var(--site-header-height) + 24px);
}

.dossier-breadcrumbs {
  color: var(--muted-foreground);
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  font-size: 12px;
  line-height: 1.6;
  display: flex;
}

.dossier-breadcrumbs a:hover {
  color: var(--primary);
}

.dossier-hero {
  border-radius: var(--radius-panel);
  background: var(--hero-start);
  color: var(--hero-foreground);
  flex-direction: column;
  gap: 24px;
  padding: 28px;
  display: flex;
}

.dossier-header {
  min-width: 0;
}

.dossier-identity {
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
  display: flex;
}

.dossier-identity > span {
  border-radius: var(--radius);
  width: 56px;
  height: 56px;
}

.dossier-identity > div {
  min-width: 0;
}

.dossier-header h1 {
  letter-spacing: -.025em;
  overflow-wrap: anywhere;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.25;
}

.dossier-identity p {
  color: var(--hero-muted);
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.7;
  display: flex;
}

.dossier-hero-footer {
  border-top: 1px solid var(--hero-border);
  flex-direction: column;
  gap: 8px;
  padding-top: 20px;
  display: flex;
}

.dossier-highlight {
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  display: flex;
}

.dossier-intro {
  max-width: 75ch;
  color: var(--hero-foreground);
  font-size: 14px;
  line-height: 1.8;
}

.dossier-intro strong {
  border-radius: var(--radius-badge);
  background: var(--brand);
  color: var(--brand-foreground);
  white-space: nowrap;
  margin-left: 8px;
  padding: 2px 8px;
  font-weight: 650;
  display: inline-block;
}

.dossier-hero-source {
  color: var(--brand-light);
  white-space: nowrap;
  font-size: 12px;
}

.model-dossier .dossier-hero-source:hover {
  color: var(--hero-foreground);
  text-decoration: underline;
}

.dossier-hero :is(a, button):focus-visible {
  outline-color: var(--brand-light);
}

.dossier-highlight-configuration {
  color: var(--hero-muted);
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 1.7;
}

.dossier-facts {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  padding: 24px 28px;
  display: grid;
}

.dossier-facts > div > span, .dossier-facts > div > small {
  color: var(--muted-foreground);
  font-size: 12px;
  line-height: 1.6;
  display: block;
}

.dossier-facts strong {
  font-variant-numeric: tabular-nums;
  margin: 6px 0 4px;
  font-size: 22px;
  font-weight: 650;
  line-height: 1.3;
  display: block;
}

.model-dossier small a, .dossier-evaluation-meta a, .dossier-benchmark > a, .dossier-source-list h3 a, .dossier-evidence a {
  align-items: center;
  gap: 3px;
  display: inline-flex;
}

.model-dossier a:hover {
  color: var(--primary);
}

.dossier-section-nav {
  border-bottom: 1px solid var(--border);
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  gap: 24px;
  padding: 12px 28px;
  font-size: 13px;
  font-weight: 550;
  display: flex;
  overflow-x: auto;
}

.dossier-section-nav a {
  border-radius: var(--radius-control);
  flex: none;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  margin-inline: -8px;
  padding: 6px 8px;
  display: inline-flex;
}

.dossier-section-nav a svg {
  color: var(--primary);
}

.dossier-section-nav a:hover {
  background: var(--muted);
}

.dossier-section-nav a:focus-visible {
  outline-offset: -2px;
}

.dossier-section {
  padding: 32px 28px 0;
}

.dossier-section-heading {
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  margin-bottom: 20px;
  display: flex;
}

.dossier-section-heading h2 {
  letter-spacing: -.015em;
  font-size: 22px;
  font-weight: 650;
  line-height: 1.4;
}

.dossier-section-heading p, .dossier-benchmark-heading p {
  color: var(--muted-foreground);
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.75;
}

.dossier-section-heading > span {
  color: var(--muted-foreground);
  white-space: nowrap;
  font-size: 12px;
}

.dossier-source-tabs {
  border-radius: var(--radius);
  background: var(--muted);
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  margin-bottom: 20px;
  padding: 4px;
  display: flex;
  overflow-x: auto;
}

.dossier-source-tabs button {
  border-radius: var(--radius-control);
  min-height: 40px;
  color: var(--muted-foreground);
  cursor: pointer;
  flex: none;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 550;
  display: inline-flex;
}

.dossier-source-tabs button[aria-pressed="true"] {
  background: var(--primary);
  color: var(--primary-foreground);
  font-weight: 650;
}

.dossier-source-tabs button span {
  color: inherit;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

.dossier-source-tabs button:hover:not([aria-pressed="true"]) {
  color: var(--foreground);
  background: var(--card);
}

.dossier-source-tabs button:focus-visible {
  outline-offset: -2px;
}

.dossier-evaluation-meta {
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  display: flex;
}

.dossier-config-field {
  flex: 1;
  min-width: 0;
}

.dossier-evaluation-meta label {
  min-width: 0;
  color: var(--muted-foreground);
  align-items: center;
  gap: 12px;
  font-size: 12px;
  display: flex;
}

.dossier-select {
  align-items: center;
  width: min(100%, 520px);
  min-width: 0;
  display: flex;
  position: relative;
}

.dossier-select select {
  appearance: none;
  border: 1px solid var(--input);
  border-radius: var(--radius-control);
  background: var(--card);
  width: 100%;
  min-height: 40px;
  color: var(--foreground);
  text-overflow: ellipsis;
  cursor: pointer;
  padding: 8px 32px 8px 12px;
  font-size: 13px;
}

.dossier-select svg {
  pointer-events: none;
  position: absolute;
  right: 12px;
}

.dossier-selected-configuration {
  color: var(--muted-foreground);
  overflow-wrap: anywhere;
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.7;
}

.dossier-observation-source {
  color: var(--muted-foreground);
  flex-wrap: wrap;
  flex: none;
  justify-content: flex-end;
  align-items: center;
  gap: 8px 16px;
  padding-top: 12px;
  font-size: 12px;
  display: flex;
}

.dossier-evaluation-meta a {
  color: var(--primary);
}

.dossier-score-overview {
  border-radius: var(--radius);
  background: var(--primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .dossier-score-overview {
    background: color-mix(in srgb, var(--primary) 5%, var(--card));
  }
}

.dossier-score-overview {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 20px 32px;
  margin-top: 20px;
  padding: 20px 24px;
  display: flex;
}

.dossier-primary-score {
  min-width: 0;
}

.dossier-primary-score > span {
  color: var(--muted-foreground);
  font-size: 12px;
  line-height: 1.6;
  display: block;
}

.dossier-primary-score > div {
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  margin-top: 4px;
  display: flex;
}

.dossier-score-overview strong {
  color: var(--primary);
  font-variant-numeric: tabular-nums;
  font-size: 28px;
  font-weight: 650;
  line-height: 1.3;
}

.dossier-score-overview strong sup {
  font-size: 13px;
}

.dossier-score-overview[data-has-score="false"] {
  background: var(--muted);
}

.dossier-score-overview[data-has-score="false"] strong {
  color: var(--foreground);
  font-size: 16px;
  font-weight: 550;
}

.dossier-score-overview small {
  color: var(--muted-foreground);
  font-size: 12px;
}

.dossier-score-overview .dossier-rank-tag {
  color: var(--foreground);
  align-items: center;
  gap: 6px;
  font-weight: 550;
  display: inline-flex;
}

.dossier-rank-tag svg {
  color: var(--primary);
}

.dossier-score-overview dl {
  flex-wrap: wrap;
  gap: 16px 32px;
  display: flex;
}

.dossier-score-overview dt {
  color: var(--muted-foreground);
  font-size: 12px;
}

.dossier-score-overview dd {
  font-variant-numeric: tabular-nums;
  margin-top: 6px;
  font-size: 15px;
  font-weight: 600;
}

.dossier-method-note {
  color: var(--muted-foreground);
  align-items: flex-start;
  gap: 7px;
  margin-block: 14px 24px;
  font-size: 12px;
  line-height: 1.7;
  display: flex;
}

.dossier-method-note svg {
  flex: none;
  margin-top: 2px;
}

.dossier-chart-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  display: grid;
}

.dossier-chart-grid-single {
  grid-template-columns: minmax(0, 1fr);
}

.dossier-chart-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  min-width: 0;
  padding: 24px;
}

.model-dossier h3 {
  font-size: 16px;
  font-weight: 650;
  line-height: 1.5;
}

.dossier-chart-panel > p {
  color: var(--muted-foreground);
  margin-block: 6px 22px;
  font-size: 12px;
}

.dossier-bars {
  flex-direction: column;
  gap: 17px;
  display: flex;
}

.dossier-bar-row {
  grid-template-columns: minmax(0, 1fr) 66px;
  align-items: center;
  gap: 7px 10px;
  display: grid;
}

.dossier-bar-row > a {
  color: var(--muted-foreground);
  text-overflow: ellipsis;
  white-space: nowrap;
  grid-column: 1;
  font-size: 12px;
  line-height: 1.5;
  display: block;
  overflow: hidden;
}

.dossier-bar-row > a span {
  margin-left: 6px;
  font-size: 12px;
}

.dossier-bar-row[data-current="true"] > a {
  color: var(--primary);
  font-weight: 600;
}

.dossier-bar-track {
  background: var(--muted);
  border-radius: 2px;
  grid-row: 2;
  height: 10px;
  overflow: hidden;
}

.dossier-bar-track > span {
  background: var(--dossier-series-1);
  border-radius: 2px;
  height: 100%;
  display: block;
}

.dossier-bar-row[data-current="true"] b {
  font-weight: 750;
}

.dossier-bar-row b {
  text-align: right;
  font-variant-numeric: tabular-nums;
  grid-area: 1 / 2 / 3;
  font-size: 13px;
  font-weight: 650;
}

.dossier-bar-row b small {
  color: var(--muted-foreground);
  font-size: 12px;
  font-weight: 400;
  display: block;
}

.dossier-chart-caption {
  min-height: 20px;
  color: var(--muted-foreground);
  margin-top: 22px;
  font-size: 12px;
  line-height: 1.7;
  display: block;
}

.dossier-chart-switch {
  flex-wrap: wrap;
  gap: 5px;
  margin-block: 12px;
  display: flex;
}

.dossier-chart-switch button {
  min-height: 36px;
  color: var(--muted-foreground);
  cursor: pointer;
  border-radius: 4px;
  padding: 5px 8px;
  font-size: 12px;
}

.dossier-chart-switch button[aria-pressed="true"] {
  background: var(--muted);
  color: var(--primary);
  font-weight: 600;
}

.dossier-scatter-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  grid-template-columns: 1fr 1.45fr;
  align-items: center;
  gap: 40px;
  margin-top: 20px;
  padding: 30px 24px;
  display: grid;
}

.dossier-scatter-panel > div:first-child p {
  max-width: 36ch;
  color: var(--muted-foreground);
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.8;
}

.dossier-scatter svg {
  width: 100%;
  overflow: visible;
}

.dossier-scatter text {
  fill: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

.dossier-gridline {
  stroke: var(--border);
  stroke-dasharray: 3 4;
}

.dossier-point {
  fill: var(--dossier-series-1);
}

.dossier-point-current {
  fill: var(--dossier-series-1);
  stroke: var(--foreground);
  stroke-width: 2px;
  paint-order: stroke fill;
}

.dossier-scatter a:hover circle, .dossier-scatter a:focus circle {
  stroke: var(--primary);
  stroke-width: 3px;
  opacity: 1;
}

.dossier-benchmark-heading {
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-block: 35px 20px;
  display: flex;
}

.dossier-search {
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  color: var(--muted-foreground);
  background: var(--card);
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  display: flex;
}

.dossier-search input {
  width: 190px;
  min-width: 0;
  color: var(--foreground);
  outline: none;
  font-size: 12px;
}

.dossier-search:focus-within {
  border-color: var(--ring);
  box-shadow: var(--field-focus-shadow);
}

.dossier-benchmarks {
  border-top: 1px solid var(--border);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 32px;
  display: grid;
}

.dossier-benchmark {
  border-bottom: 1px solid var(--border);
  grid-template-columns: minmax(0, 1fr) minmax(100px, .65fr);
  align-content: start;
  align-items: center;
  column-gap: 14px;
  padding-block: 18px;
  display: grid;
}

.dossier-benchmark > div:first-child strong {
  font-size: 13px;
  line-height: 1.6;
  display: block;
}

.dossier-benchmark > div:first-child small {
  color: var(--muted-foreground);
  margin-top: 4px;
  font-size: 12px;
  display: block;
}

.dossier-benchmark-value {
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  display: flex;
}

.dossier-benchmark-value b {
  text-align: right;
  font-variant-numeric: tabular-nums;
  min-width: 58px;
  font-size: 15px;
}

.dossier-benchmark-value b small {
  margin-left: 2px;
  font-size: 12px;
  font-weight: 400;
}

.dossier-percent-track {
  background: var(--muted);
  border-radius: 2px;
  flex: 1;
  height: 5px;
  display: block;
  overflow: hidden;
}

.dossier-percent-track > span {
  background: var(--primary);
  height: 100%;
  display: block;
}

.dossier-benchmark > p {
  color: var(--muted-foreground);
  overflow-wrap: anywhere;
  grid-column: 1 / -1;
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.75;
}

.dossier-benchmark > a {
  width: fit-content;
  color: var(--primary);
  margin-top: 8px;
  font-size: 12px;
}

.dossier-empty {
  background: var(--muted);
  border-radius: var(--radius-control);
  color: var(--muted-foreground);
  text-align: center;
  padding: 40px 18px;
  font-size: 13px;
  line-height: 1.8;
}

.dossier-specs {
  border-top: 1px solid var(--border);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 50px;
  display: grid;
}

.dossier-specs > div {
  border-bottom: 1px solid var(--border);
  justify-content: space-between;
  gap: 20px;
  padding: 17px 0;
  font-size: 13px;
  display: flex;
}

.dossier-specs dt {
  color: var(--muted-foreground);
  flex: none;
}

.dossier-specs dd {
  text-align: right;
  min-width: 0;
}

.dossier-specs dd strong {
  overflow-wrap: anywhere;
  font-weight: 550;
}

.dossier-specs dd small {
  color: var(--muted-foreground);
  margin-top: 4px;
  font-size: 12px;
  display: block;
}

.dossier-pricing-layout {
  grid-template-columns: minmax(0, 1.8fr) minmax(240px, 1fr);
  align-items: start;
  gap: 36px;
  display: grid;
}

.dossier-table-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--muted-foreground) var(--muted);
  overflow-x: auto;
}

.model-dossier table {
  border-collapse: collapse;
  text-align: left;
  width: 100%;
  font-size: 12px;
}

.model-dossier th, .model-dossier td {
  border-bottom: 1px solid var(--border);
  padding: 14px 12px;
}

.model-dossier thead th {
  background: var(--muted);
  color: var(--muted-foreground);
  white-space: nowrap;
  font-size: 12px;
  font-weight: 550;
}

.model-dossier tbody th {
  min-width: 200px;
  max-width: 360px;
  font-weight: 500;
  line-height: 1.7;
}

.dossier-price-table td {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.dossier-price-table thead th:not(:first-child) {
  text-align: right;
}

.dossier-calculator {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}

.dossier-calculator p {
  color: var(--muted-foreground);
  margin-block: 8px 20px;
  font-size: 12px;
  line-height: 1.7;
}

.dossier-calculator label {
  color: var(--muted-foreground);
  margin-top: 14px;
  font-size: 12px;
  display: block;
}

.dossier-calculator input {
  border: 1px solid var(--input);
  border-radius: var(--radius-control);
  width: 100%;
  color: var(--foreground);
  font-variant-numeric: tabular-nums;
  margin-top: 7px;
  padding: 10px;
  display: block;
}

.dossier-calculator > div {
  border-top: 1px solid var(--border);
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-block: 22px 12px;
  padding-top: 18px;
  display: flex;
}

.dossier-calculator > div span {
  font-size: 12px;
}

.dossier-calculator > div strong {
  color: var(--primary);
  font-variant-numeric: tabular-nums;
  font-size: 24px;
}

.dossier-calculator > small {
  color: var(--muted-foreground);
  font-size: 12px;
  line-height: 1.75;
  display: block;
}

.dossier-source-list > div {
  border-top: 1px solid var(--border);
  align-items: center;
  gap: 16px;
  padding-block: 20px;
  display: flex;
}

.dossier-source-list > div > svg {
  color: var(--primary);
  flex: none;
}

.dossier-source-list > div > div {
  flex: 1;
}

.dossier-source-list p {
  color: var(--muted-foreground);
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.8;
}

.dossier-source-list > div > span {
  color: var(--foreground);
  text-align: right;
  font-size: 12px;
}

.dossier-source-list > div > span small {
  color: var(--muted-foreground);
  margin-top: 5px;
  font-size: 12px;
  display: block;
}

.dossier-evidence {
  border-block: 1px solid var(--border);
  margin-top: 20px;
  font-size: 12px;
}

.dossier-evidence summary {
  cursor: pointer;
  padding: 16px 0;
  font-weight: 550;
}

.dossier-evidence td small {
  color: var(--muted-foreground);
  margin-top: 4px;
  font-size: 12px;
  display: block;
}

.dossier-back {
  color: var(--primary);
  align-items: center;
  gap: 12px;
  margin-top: 36px;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
}

@media (max-width: 1000px) {
  .model-detail {
    padding-inline: 28px;
  }

  .dossier-evaluation-meta {
    flex-direction: column;
    gap: 8px;
  }

  .dossier-config-field {
    width: 100%;
  }

  .dossier-observation-source {
    justify-content: flex-start;
    padding-top: 0;
  }

  .dossier-chart-panel {
    padding: 20px;
  }
}

@media (max-width: 700px) {
  .model-dossier {
    padding: 20px 18px 48px;
  }

  .dossier-breadcrumbs {
    margin-bottom: 24px;
  }

  .dossier-hero {
    gap: 20px;
    padding: 20px;
  }

  .dossier-hero-footer {
    padding-top: 16px;
  }

  .dossier-identity {
    gap: 12px;
  }

  .dossier-identity > span {
    width: 40px;
    height: 40px;
  }

  .dossier-header h1 {
    font-size: 24px;
    line-height: 1.3;
  }

  .dossier-identity p {
    gap: 4px 6px;
    margin-top: 6px;
  }

  .dossier-intro {
    font-size: 13px;
  }

  .dossier-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    padding: 20px 0;
  }

  .dossier-facts strong {
    font-size: 20px;
  }

  .dossier-section-nav {
    gap: 20px;
    padding-inline: 0;
    font-size: 12px;
  }

  .dossier-section-nav a {
    margin-inline: 0;
    padding-inline: 0;
  }

  .dossier-section-nav a svg {
    display: none;
  }

  .dossier-section {
    padding: 28px 0 0;
  }

  .dossier-section-heading {
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
  }

  .dossier-section-heading h2 {
    font-size: 20px;
  }

  .dossier-section-heading > span {
    margin-top: 4px;
  }

  .dossier-source-tabs {
    margin-bottom: 16px;
  }

  .dossier-source-tabs button {
    padding-inline: 12px;
    font-size: 12px;
  }

  .dossier-evaluation-meta label {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .dossier-select {
    width: 100%;
  }

  .dossier-score-overview {
    margin-top: 16px;
    padding: 16px;
  }

  .dossier-score-overview strong {
    font-size: 26px;
  }

  .dossier-score-overview dl {
    gap: 16px 24px;
    width: 100%;
  }

  .dossier-chart-grid, .dossier-scatter-panel, .dossier-benchmarks, .dossier-specs, .dossier-pricing-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .dossier-chart-grid {
    gap: 16px;
  }

  .dossier-scatter-panel {
    gap: 20px;
    padding: 20px 16px;
  }

  .dossier-scatter-panel > div:first-child p {
    max-width: none;
    font-size: 12px;
  }

  .dossier-benchmark-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .dossier-search {
    width: 100%;
  }

  .dossier-search input {
    flex: 1;
  }

  .dossier-source-list > div {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
  }

  .dossier-source-list > div > div {
    flex-basis: calc(100% - 32px);
  }

  .dossier-source-list > div > span {
    flex-wrap: wrap;
    gap: 12px;
    margin-left: 28px;
    display: flex;
  }

  .dossier-source-list > div > span small {
    margin-top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .model-dossier *, .model-dossier :before, .model-dossier :after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

.model-dossier {
  --dossier-chart-neutral: #adb8c1;
}

.dark .model-dossier {
  --dossier-chart-neutral: #637380;
}

.dossier-evidence-charts {
  background: var(--card);
  margin-top: 24px;
  padding: 0;
}

.dossier-visual-heading {
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  display: flex;
}

.dossier-visual-heading p {
  color: var(--muted-foreground);
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.6;
}

.dossier-visual-heading > span {
  color: var(--muted-foreground);
  white-space: nowrap;
  font-size: 12px;
}

.dossier-chart-key {
  color: var(--muted-foreground);
  gap: 16px;
  margin-top: 9px;
  font-size: 11px;
  display: flex;
}

.dossier-chart-key span {
  align-items: center;
  gap: 6px;
  display: inline-flex;
}

.dossier-chart-key i {
  background: var(--dossier-chart-neutral);
  border-radius: 2px;
  width: 9px;
  height: 9px;
}

.dossier-chart-key span:first-child i {
  background: var(--primary);
}

.dossier-chart-canvas {
  width: 100%;
  height: 340px;
  margin-top: 14px;
}

.dossier-ranking-chart-mobile {
  display: none;
}

.dossier-chart-canvas .recharts-surface {
  overflow: visible;
}

.dossier-chart-tooltip {
  border: 1px solid var(--border);
  background: var(--card);
  max-width: 270px;
  color: var(--foreground);
  border-radius: 8px;
  gap: 4px;
  padding: 11px 13px;
  font-size: 12px;
  line-height: 1.5;
  display: grid;
  box-shadow: 0 8px 22px #0000001c;
}

.dossier-chart-tooltip strong {
  font-size: 13px;
}

.dossier-chart-tooltip small {
  color: var(--muted-foreground);
}

.dossier-cost-comparison {
  border-top: 1px solid var(--border);
  margin-top: 28px;
  padding-top: 25px;
}

.dossier-cost-chart {
  height: 290px;
}

.dossier-chart-data {
  border-top: 1px solid var(--border);
  margin-top: 16px;
  font-size: 12px;
}

.dossier-chart-data summary {
  width: fit-content;
  color: var(--primary);
  cursor: pointer;
  padding-block: 13px 0;
}

.dossier-chart-data table {
  margin-top: 12px;
}

.dossier-chart-data td {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dossier-chart-data tbody th {
  min-width: 220px;
}

@media (max-width: 700px) {
  .dossier-evidence-charts {
    margin-top: 20px;
  }

  .dossier-visual-heading {
    flex-wrap: wrap;
    gap: 6px;
  }

  .dossier-chart-canvas {
    height: 310px;
  }

  .dossier-ranking-chart {
    display: none;
  }

  .dossier-ranking-chart-mobile {
    height: 325px;
    display: block;
  }

  .dossier-cost-chart {
    height: 250px;
  }
}

.dossier-directory-search {
  gap: 10px;
  max-width: 520px;
  margin-top: 28px;
  display: flex;
}

.dossier-directory-search .dossier-search {
  flex: 1;
}

.dossier-directory-search input {
  width: 100%;
}

.dossier-directory-search button {
  border-radius: var(--radius-control);
  background: var(--primary);
  color: var(--primary-foreground);
  cursor: pointer;
  padding: 10px 20px;
  font-size: 13px;
}

.dossier-directory-count {
  color: var(--muted-foreground);
  margin-block: 22px 14px;
  font-size: 12px;
}

.dossier-directory {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 40px;
  display: grid;
}

.dossier-directory > a {
  border-top: 1px solid var(--border);
  align-items: center;
  gap: 12px;
  padding: 20px 0;
  display: flex;
}

.dossier-directory > a > div {
  flex: 1;
  min-width: 0;
}

.dossier-directory strong {
  overflow-wrap: anywhere;
  font-size: 14px;
  display: block;
}

.dossier-directory span {
  color: var(--muted-foreground);
  margin-top: 6px;
  font-size: 12px;
  display: block;
}

.dossier-directory small {
  color: var(--muted-foreground);
  flex: none;
  font-size: 12px;
}

@media (max-width: 700px) {
  .dossier-directory {
    grid-template-columns: minmax(0, 1fr);
  }
}

.dossier-directory {
  counter-reset: model-card;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.dossier-directory > a {
  counter-increment: model-card;
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 13px;
  min-height: 94px;
  padding: 16px;
  transition: border-color .16s, background-color .16s;
}

.dossier-directory > a:before {
  content: counter(model-card, decimal-leading-zero);
  min-width: 37px;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.04em;
  flex: none;
  align-self: flex-start;
  font-size: 21px;
  font-weight: 800;
}

.dossier-directory > a:hover {
  border-color: var(--brand);
  background: var(--muted);
}

.dossier-directory > a:hover strong {
  color: var(--primary);
}

.dossier-directory small {
  background: var(--muted);
  border-radius: 6px;
  padding: 4px 7px;
  font-size: 11px;
}

@media (max-width: 1100px) {
  .dossier-directory {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .dossier-directory {
    grid-template-columns: 1fr;
  }

  .dossier-bar-row > a {
    white-space: normal;
    overflow-wrap: anywhere;
    overflow: visible;
  }

  .dossier-scatter text {
    font-size: 18px;
  }
}

@media (max-width: 500px) {
  .dossier-scatter text {
    font-size: 22px;
  }
}

@media (max-width: 420px) {
  .dossier-scatter text {
    font-size: 25px;
  }
}

@media (max-width: 360px) {
  .dossier-scatter text {
    font-size: 28px;
  }
}

.appstore-detail-page {
  --muted-foreground: var(--foreground);
}

@supports (color: color-mix(in lab, red, red)) {
  .appstore-detail-page {
    --muted-foreground: color-mix(in srgb, var(--foreground) 70%, var(--card));
  }
}

.appstore-detail-page {
  min-height: 70vh;
  color: var(--foreground);
  background: var(--card);
  padding: 28px 0 72px;
}

.appstore-detail-container {
  width: min(100% - 64px, 1200px);
  margin-inline: auto;
}

.appstore-detail-breadcrumb {
  color: var(--muted-foreground);
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 32px;
  font-size: 13px;
  display: flex;
}

.appstore-detail-breadcrumb a:hover {
  color: var(--primary);
}

.appstore-detail-header {
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  margin-bottom: 40px;
  display: flex;
}

.appstore-detail-identity {
  align-items: center;
  gap: 24px;
  min-width: 0;
  display: flex;
}

.appstore-detail-logo {
  background: var(--muted);
  border-radius: 28px;
  flex-shrink: 0;
  width: 144px;
  height: 144px;
  overflow: hidden;
}

.appstore-detail-heading {
  min-width: 0;
}

.appstore-detail-titleRow {
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  display: flex;
}

.appstore-detail-heading h1 {
  text-wrap: balance;
  overflow-wrap: anywhere;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.3;
}

.appstore-detail-score {
  color: var(--warning);
  white-space: nowrap;
  align-items: center;
  gap: 5px;
  font-size: 15px;
  display: inline-flex;
}

.appstore-detail-score svg {
  fill: currentColor;
}

.appstore-detail-summary {
  overflow-wrap: anywhere;
  max-width: 64ch;
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.8;
}

.appstore-detail-categories {
  color: var(--muted-foreground);
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.7;
  display: flex;
}

.appstore-detail-categories a:hover {
  color: var(--primary);
  text-underline-offset: 4px;
  text-decoration: underline;
}

.appstore-detail-seller {
  overflow-wrap: anywhere;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.7;
}

.appstore-detail-downloads {
  flex-wrap: wrap;
  flex-shrink: 0;
  gap: 10px;
  padding-top: 12px;
  display: flex;
}

.appstore-detail-downloads p {
  color: var(--muted-foreground);
  font-size: 13px;
}

.appstore-detail-columns {
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 48px;
  display: grid;
}

.appstore-detail-content, .appstore-detail-sidebar {
  min-width: 0;
}

.appstore-detail-page h2 {
  font-size: 20px;
  font-weight: 650;
  line-height: 1.5;
}

.appstore-detail-introduction {
  max-width: 74ch;
  margin-top: 40px;
}

.appstore-detail-introduction:first-child {
  margin-top: 0;
}

.appstore-detail-introduction > h2 {
  margin-bottom: 20px;
}

.appstore-detail-introduction .markdown-body {
  overflow-wrap: anywhere;
}

.appstore-detail-introduction .markdown-body > :first-child {
  margin-top: 0;
}

.appstore-detail-introduction .markdown-body h3 {
  font-size: 17px;
  line-height: 1.6;
}

.appstore-detail-introduction .markdown-body li + li {
  margin-top: 10px;
}

.appstore-detail-introduction .markdown-body ol {
  list-style: decimal;
}

.appstore-detail-unavailable {
  color: var(--muted-foreground);
  font-size: 14px;
}

.appstore-detail-relatedList {
  flex-direction: column;
  gap: 8px;
  margin: 16px -16px 0;
  display: flex;
}

.appstore-detail-screenshots {
  min-width: 0;
}

.appstore-detail-galleryWrapper {
  position: relative;
}

.appstore-detail-imageStrip {
  scrollbar-width: thin;
  scrollbar-color: var(--input) transparent;
  scroll-snap-type: x proximity;
  gap: 14px;
  padding-bottom: 12px;
  display: flex;
  overflow-x: auto;
}

.appstore-detail-imageTrigger {
  scroll-snap-align: start;
  cursor: zoom-in;
  background: var(--muted);
  border-radius: 12px;
  flex: 0 0 calc(33.3333% - 9.33333px);
  min-width: 0;
  display: block;
  overflow: hidden;
}

.appstore-detail-screenshot {
  aspect-ratio: 9 / 16;
  object-fit: contain;
  width: 100%;
  height: auto;
  display: block;
}

.appstore-detail-failedImage {
  aspect-ratio: 9 / 16;
  width: 100%;
  color: var(--muted-foreground);
  text-align: center;
  align-content: center;
  padding: 20px;
  font-size: 13px;
  line-height: 1.8;
  display: grid;
}

.appstore-detail-previous, .appstore-detail-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.appstore-detail-previous {
  left: -16px;
}

.appstore-detail-next {
  right: -16px;
}

.appstore-detail-galleryCaption {
  color: var(--muted-foreground);
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
  font-size: 12px;
  display: flex;
}

.appstore-detail-largeImage {
  object-fit: contain;
  width: 100%;
  height: min(65dvh, 680px);
  display: block;
}

.appstore-detail-galleryNavigation {
  justify-content: center;
  align-items: center;
  gap: 20px;
  display: flex;
}

.appstore-detail-galleryNavigation span {
  color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}

.appstore-detail-original {
  color: var(--primary);
  text-underline-offset: 4px;
  font-size: 13px;
}

.appstore-detail-original:hover {
  text-decoration: underline;
}

.appstore-detail-imageTrigger:focus-visible, .appstore-detail-page a:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 4px;
}

@media (max-width: 1100px) {
  .appstore-detail-downloads {
    flex-direction: column;
  }

  .appstore-detail-columns {
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 32px;
  }

  .appstore-detail-logo {
    border-radius: 24px;
    width: 120px;
    height: 120px;
  }
}

@media (max-width: 800px) {
  .appstore-detail-header {
    flex-direction: column;
    gap: 20px;
    margin-bottom: 28px;
  }

  .appstore-detail-downloads {
    flex-direction: row;
    padding-top: 0;
  }

  .appstore-detail-columns {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }

  .appstore-detail-sidebar {
    border-top: 1px solid var(--border);
    padding-top: 24px;
  }

  .appstore-detail-relatedList {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    display: grid;
  }
}

@media (max-width: 640px) {
  .appstore-detail-page {
    padding-top: 20px;
  }

  .appstore-detail-container {
    width: calc(100% - 32px);
  }

  .appstore-detail-breadcrumb {
    margin-bottom: 24px;
  }

  .appstore-detail-identity {
    align-items: flex-start;
    gap: 16px;
  }

  .appstore-detail-logo {
    border-radius: 16px;
    width: 80px;
    height: 80px;
  }

  .appstore-detail-heading h1 {
    font-size: 25px;
  }

  .appstore-detail-titleRow {
    gap: 6px 12px;
  }

  .appstore-detail-score {
    font-size: 13px;
  }

  .appstore-detail-summary {
    margin-top: 8px;
    font-size: 14px;
  }

  .appstore-detail-categories {
    gap: 6px 12px;
    margin-top: 10px;
    font-size: 12px;
  }

  .appstore-detail-seller {
    font-size: 12px;
  }

  .appstore-detail-imageStrip {
    gap: 12px;
  }

  .appstore-detail-imageTrigger {
    flex-basis: 72%;
  }

  .appstore-detail-previous {
    left: -8px;
  }

  .appstore-detail-next {
    right: -8px;
  }

  .appstore-detail-relatedList {
    grid-template-columns: minmax(0, 1fr);
  }
}

.category-mobile-toggle {
  display: none;
}

.category-product-navigation {
  gap: 4px;
  display: grid;
}

.category-mobile-toggle:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.category-product-navigation .category-all-link {
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  margin-bottom: 8px;
  padding-bottom: 12px;
}

.category-navigation-group > summary {
  cursor: pointer;
  list-style: none;
}

.category-navigation-group > summary::-webkit-details-marker {
  display: none;
}

.category-navigation-group > summary > span {
  flex: 1;
}

.category-navigation-group > summary > svg:last-child {
  transform: rotate(-90deg);
}

.category-navigation-group[open] > summary > svg:last-child {
  transform: none;
}

.category-navigation-group:has([aria-current="page"]) > summary {
  font-weight: var(--navigation-active-weight);
}

.category-navigation-children {
  gap: 2px;
  margin: 4px 0 8px;
  display: grid;
}

.category-navigation-children a, .category-navigation-leaf a {
  overflow-wrap: anywhere;
  padding-left: 40px;
}

.category-navigation-error {
  color: var(--muted-foreground);
  padding: 12px;
  font-size: 12px;
  line-height: 1.6;
}

@media (min-width: 981px) {
  .category-navigation-children {
    margin-left: 44px;
  }

  .category-product-navigation .category-navigation-children a {
    min-height: 36px;
    padding: 8px 12px;
    font-size: 13px;
  }
}

@media (max-width: 980px) {
  .category-product-sidebar {
    border-bottom: 1px solid var(--border);
    margin-bottom: 20px;
    padding: 8px 0;
  }

  .category-mobile-toggle {
    border-radius: var(--radius-control);
    width: 100%;
    min-height: 44px;
    color: var(--navigation-foreground);
    font-size: var(--navigation-font-size);
    line-height: var(--navigation-line-height);
    text-align: left;
    cursor: pointer;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    display: flex;
  }

  .category-mobile-toggle > span {
    flex: 1;
  }

  .category-mobile-toggle > svg {
    flex: none;
  }

  .category-product-sidebar[data-mobile-open="true"] .category-mobile-toggle > svg:last-child {
    transform: rotate(180deg);
  }

  .category-product-sidebar[data-mobile-open="false"] .category-product-navigation {
    display: none;
  }

  .category-product-navigation {
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--input) transparent;
    max-height: 55dvh;
    margin-top: 8px;
    overflow-y: auto;
  }

  .category-product-navigation a, .category-navigation-group > summary {
    min-height: 44px;
  }
}

.home-page {
  width: min(100% - 80px, 1480px);
  color: var(--foreground);
  grid-template-columns: 156px minmax(0, 1fr);
  gap: 40px;
  margin-inline: auto;
  padding-block: 28px 64px;
  display: grid;
}

.home-main {
  min-width: 0;
}

.home-discoveryStrip {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
  display: grid;
}

.home-discoveryStrip a:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

.home-stripTopic {
  border-radius: var(--radius);
  background: var(--card);
  flex-direction: column;
  min-width: 0;
  display: flex;
  overflow: hidden;
}

.home-stripVisualTopic {
  background: var(--muted);
  position: relative;
}

.home-stripArtwork {
  aspect-ratio: 16 / 9;
  background: var(--muted);
  flex: none;
  width: 100%;
  display: block;
  position: relative;
  overflow: hidden;
}

.home-stripArtworkFallback {
  color: var(--foreground);
  place-items: center;
  font-size: 22px;
  font-weight: 700;
  display: grid;
  position: absolute;
  inset: 0;
}

.home-stripArtworkFallback img {
  object-fit: contain;
  width: 48px;
  height: 48px;
}

.home-stripTopicCover {
  object-fit: contain;
  object-position: center;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.home-stripCopy {
  flex-direction: column;
  flex: 1;
  gap: 8px;
  min-width: 0;
  padding: 16px;
  display: flex;
}

.home-stripCopy > strong {
  overflow-wrap: anywhere;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
}

.home-stripVisualTopic > .home-stripCaptionCopy {
  color: #fff;
  background: linear-gradient(#0000, #0e131db8 60%, #0e131deb);
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 28px 12px 10px;
  display: flex;
  position: absolute;
  inset: auto 0 0;
}

.home-stripIdentity {
  align-items: center;
  gap: 8px;
  min-width: 0;
  display: flex;
}

.home-stripIdentity > strong {
  color: #fff;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  overflow: hidden;
}

.home-stripLogo {
  object-fit: contain;
  background: #fff;
  border-radius: 6px;
  flex: none;
  width: 24px;
  height: 24px;
  padding: 3px;
}

.home-stripCaptionArrow {
  color: #fff;
  flex: none;
}

.home-stripVisualTopic:hover .home-stripIdentity > strong {
  text-underline-offset: 3px;
  text-decoration: underline;
}

.home-stripSummary {
  overflow-wrap: anywhere;
  min-height: 3em;
  color: var(--foreground);
}

@supports (color: color-mix(in lab, red, red)) {
  .home-stripSummary {
    color: color-mix(in srgb, var(--foreground) 76%, var(--card));
  }
}

.home-stripSummary {
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 12px;
  line-height: 1.5;
  display: -webkit-box;
  overflow: hidden;
}

.home-stripFooter {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
  display: flex;
}

.home-stripTopicFoot {
  overflow-wrap: anywhere;
  color: var(--foreground);
}

@supports (color: color-mix(in lab, red, red)) {
  .home-stripTopicFoot {
    color: color-mix(in srgb, var(--foreground) 72%, var(--card));
  }
}

.home-stripTopicFoot {
  font-size: 11px;
  line-height: 1.5;
}

.home-stripAction {
  color: var(--primary);
  flex: none;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
}

.home-stripTextOnly {
  min-height: 148px;
}

.home-stripTopic:hover .home-stripCopy > strong {
  color: var(--primary);
}

.home-stripTopic:hover .home-stripAction {
  text-underline-offset: 4px;
  text-decoration: underline;
}

@media (max-width: 1100px) {
  .home-discoveryStrip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .home-discoveryStrip {
    gap: 8px;
    margin-top: 12px;
  }

  .home-stripCopy {
    gap: 6px;
    padding: 12px;
  }

  .home-stripCopy > strong {
    font-size: 14px;
  }

  .home-stripVisualTopic > .home-stripCaptionCopy {
    gap: 8px;
    padding: 22px 8px 8px;
  }

  .home-stripIdentity {
    gap: 6px;
  }

  .home-stripIdentity > strong {
    font-size: 12px;
  }

  .home-stripLogo {
    border-radius: 4px;
    width: 20px;
    height: 20px;
    padding: 2px;
  }

  .home-stripCaptionArrow {
    width: 13px;
    height: 13px;
  }

  .home-stripFooter {
    gap: 4px;
    padding-top: 6px;
  }

  .home-stripAction, .home-stripTopicFoot {
    font-size: 11px;
  }
}

.home-sidebar {
  top: calc(var(--site-header-height) + 32px);
  align-self: start;
  padding-top: 2px;
  position: sticky;
}

.home-sidebarNav {
  gap: 4px;
  display: grid;
}

.home-sidebarNav h2 {
  color: var(--muted-foreground);
  padding: 22px 12px 8px;
  font-size: 11px;
  font-weight: 500;
}

.home-sidebarNav a {
  border-radius: var(--radius-control);
  min-height: 40px;
  color: var(--muted-foreground);
  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
  align-items: center;
  gap: 11px;
  padding: 8px 12px;
  font-size: 13px;
  display: flex;
}

.home-sidebarNav a:hover {
  background: var(--muted);
  color: var(--foreground);
}

.home-sidebarNav .home-sidebarCurrent {
  background: var(--muted);
  color: var(--foreground);
  font-weight: 600;
}

.home-sideArrow {
  opacity: 0;
  margin-left: auto;
}

.home-sidebarNav a:hover .home-sideArrow, .home-sidebarNav a:focus-visible .home-sideArrow {
  opacity: 1;
}

.home-sidebarFoot {
  border-top: 1px solid var(--border);
  gap: 4px;
  margin-top: 22px;
  padding-top: 16px;
  display: grid;
}

.home-sidebarFoot a {
  color: var(--muted-foreground);
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  font-size: 12px;
  display: flex;
}

.home-sidebarFoot a:hover {
  color: var(--primary);
}

.home-page a {
  text-underline-offset: 4px;
}

.home-page svg {
  flex-shrink: 0;
}

.home-intro {
  grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  align-items: center;
  gap: 32px;
  margin-bottom: 28px;
  display: grid;
}

.home-intro h1 {
  letter-spacing: -.025em;
  text-wrap: balance;
  font-size: clamp(27px, 2.1vw, 32px);
  font-weight: 720;
  line-height: 1.35;
}

.home-introCopy p {
  color: var(--muted-foreground);
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.7;
}

.home-searchArea {
  min-width: 0;
}

.home-search {
  scroll-margin-top: calc(var(--site-header-height) + 36px);
  align-items: center;
  gap: 8px;
  display: flex;
}

.home-searchField {
  flex: 1;
  min-width: 0;
  position: relative;
}

.home-searchField > svg {
  color: var(--muted-foreground);
  pointer-events: none;
  position: absolute;
  top: 17px;
  left: 15px;
}

.home-searchHints {
  color: var(--muted-foreground);
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 9px;
  font-size: 12px;
  display: flex;
}

.home-searchHints a:hover {
  color: var(--primary);
  text-decoration: underline;
}

.home-sectionHeading, .home-toolsHeading {
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  display: flex;
}

.home-sectionHeading {
  margin-bottom: 16px;
}

.home-sectionHeading h2, .home-railHeading h2 {
  letter-spacing: -.02em;
  font-size: 19px;
  font-weight: 650;
}

.home-sectionHeading > a, .home-submitLink, .home-searchContext a {
  min-height: 32px;
  color: var(--muted-foreground);
  align-items: center;
  gap: 6px;
  font-size: 12px;
  display: inline-flex;
}

.home-sectionHeading > a:hover, .home-submitLink:hover, .home-searchContext a:hover {
  color: var(--primary);
}

.home-featureGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  display: grid;
}

.home-feature {
  border-radius: var(--radius-panel);
  background: var(--muted);
  min-width: 0;
  min-height: 148px;
  transition: background-color var(--duration-fast) var(--ease-out);
  align-items: stretch;
  gap: 16px;
  padding: 22px;
  display: flex;
}

.home-feature:hover {
  background: var(--accent);
}

.home-featureBody {
  flex-direction: column;
  flex: 1;
  min-width: 0;
  display: flex;
}

.home-feature h3 {
  letter-spacing: -.025em;
  text-wrap: pretty;
  font-size: 17px;
  font-weight: 650;
  line-height: 1.55;
}

.home-feature p {
  -webkit-line-clamp: 2;
  color: var(--muted-foreground);
  -webkit-box-orient: vertical;
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.7;
  display: -webkit-box;
  overflow: hidden;
}

.home-featureMeta {
  color: var(--muted-foreground);
  align-items: center;
  gap: 9px;
  margin-top: auto;
  padding-top: 20px;
  font-size: 11px;
  display: flex;
}

.home-feature:hover h3, .home-feature:hover .home-featureMeta {
  color: var(--primary);
}

.home-featureImage {
  border-radius: var(--radius-control);
  flex: 0 0 96px;
  align-self: center;
  height: 108px;
  overflow: hidden;
}

.home-featureImage img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.home-tools {
  border-top: 1px solid var(--border);
  scroll-margin-top: calc(var(--site-header-height) + 24px);
  margin-top: 30px;
  padding-top: 24px;
}

.home-toolsHeading {
  margin-bottom: 14px;
}

.home-titleGroup {
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px;
  display: flex;
}

.home-titleGroup h2 {
  letter-spacing: -.025em;
  font-size: 24px;
  font-weight: 680;
}

.home-titleGroup > span {
  color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

.home-categories {
  scrollbar-width: thin;
  scrollbar-color: var(--input) transparent;
  align-items: center;
  gap: 7px;
  padding-bottom: 18px;
  display: none;
  overflow-x: auto;
}

.home-categories a {
  border-radius: var(--radius-control);
  min-height: 36px;
  color: var(--muted-foreground);
  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
  flex: none;
  justify-content: center;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  font-size: 13px;
  display: inline-flex;
}

.home-categories a:hover {
  background: var(--muted);
  color: var(--foreground);
}

.home-browseBar {
  border-bottom: 1px solid var(--border);
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  display: flex;
}

.home-searchContext {
  border-bottom: 1px solid var(--border);
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  font-size: 14px;
  display: flex;
}

.home-searchContext > span {
  overflow-wrap: anywhere;
  min-width: 0;
}

.home-searchContext a {
  flex-shrink: 0;
}

.home-empty {
  border: 1px dashed var(--input);
  border-radius: var(--radius-panel);
  text-align: center;
  color: var(--muted-foreground);
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 64px 20px;
  display: flex;
}

.home-empty h3 {
  color: var(--foreground);
  font-size: 18px;
  font-weight: 600;
}

.home-empty p {
  font-size: 14px;
  line-height: 1.7;
}

.home-empty a {
  min-height: 40px;
  color: var(--primary);
  align-items: center;
  gap: 8px;
  font-size: 14px;
  display: inline-flex;
}

.home-contentRail {
  grid-template-columns: 1.25fr 1fr;
  gap: 16px;
  margin-top: 32px;
  padding-top: 0;
  display: grid;
}

.home-newsPanel, .home-rankPanel {
  border-radius: var(--radius-panel);
  background: var(--card);
  flex-direction: column;
  min-width: 0;
  padding: 24px 28px 18px;
  display: flex;
}

.home-railHeading {
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  display: flex;
}

.home-railHeading > a {
  min-height: 32px;
  color: var(--muted-foreground);
  align-items: center;
  font-size: 12px;
  display: inline-flex;
}

.home-newsList > a {
  border-bottom: 1px solid var(--border);
  padding-block: 13px;
  display: block;
}

.home-newsList h3 {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
}

.home-newsList > a:hover h3 {
  color: var(--primary);
}

.home-newsList > a > div {
  color: var(--muted-foreground);
  gap: 14px;
  margin-top: 6px;
  font-size: 11px;
  display: flex;
}

.home-railMore {
  min-height: 44px;
  color: var(--muted-foreground);
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
  font-size: 12px;
  display: flex;
}

.home-railMore:hover {
  color: var(--primary);
}

.home-rankContext {
  border-bottom: 1px solid var(--border);
  color: var(--muted-foreground);
  justify-content: space-between;
  align-items: center;
  padding-block: 8px 12px;
  font-size: 12px;
  display: flex;
}

.home-modelList li {
  border-bottom: 1px solid var(--border);
}

.home-modelList a {
  font-variant-numeric: tabular-nums;
  align-items: center;
  gap: 18px;
  min-height: 61px;
  display: flex;
}

.home-modelPosition {
  width: 14px;
  color: var(--muted-foreground);
  font-size: 13px;
}

.home-modelList a > div {
  flex: 1;
  min-width: 0;
}

.home-modelList strong {
  overflow-wrap: anywhere;
  font-size: 13px;
  font-weight: 550;
  display: block;
}

.home-modelList a > div > span {
  color: var(--muted-foreground);
  margin-top: 3px;
  font-size: 11px;
  display: block;
}

.home-modelList b {
  font-size: 13px;
  font-weight: 550;
}

.home-modelList a:hover strong {
  color: var(--primary);
}

.home-railEmpty {
  color: var(--muted-foreground);
  padding-block: 28px;
  font-size: 14px;
}

.home-videoEntry {
  border-radius: var(--radius-panel);
  background: var(--card);
  min-height: 72px;
  transition: background-color var(--duration-fast) var(--ease-out);
  grid-column: 1 / -1;
  align-items: center;
  gap: 16px;
  padding: 20px 28px;
  display: flex;
}

.home-videoEntry:hover, .home-videoEntry:focus-visible {
  background: var(--muted);
}

.home-videoEntry > div {
  flex: 1;
  align-items: baseline;
  gap: 16px;
  display: flex;
}

.home-videoEntry strong {
  font-size: 15px;
  font-weight: 600;
}

.home-videoEntry span {
  color: var(--muted-foreground);
  font-size: 13px;
}

.home-videoEntry:hover strong {
  color: var(--primary);
}

.home-exploreRow {
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  display: grid;
}

.home-exploreRow a {
  border-radius: var(--radius-panel);
  background: var(--card);
  min-height: 96px;
  transition: background-color var(--duration-fast) var(--ease-out);
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 18px 20px;
  display: flex;
}

.home-exploreRow a:hover, .home-exploreRow a:focus-visible {
  background: var(--muted);
}

.home-exploreRow a svg {
  color: var(--primary);
}

.home-exploreRow strong {
  font-size: 14px;
  font-weight: 600;
}

.home-exploreRow span {
  color: var(--muted-foreground);
  font-size: 12px;
  line-height: 1.6;
}

.home-exploreRow a:hover strong {
  color: var(--primary);
}

@media (max-width: 850px) {
  .home-exploreRow {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .home-exploreRow {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .home-exploreRow a {
    min-height: 0;
    padding: 14px 18px;
  }
}

@media (max-width: 1380px) and (min-width: 1151px) {
  .home-page {
    grid-template-columns: 144px minmax(0, 1fr);
    gap: 28px;
  }

  .home-intro {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 24px;
  }

  .home-intro h1 {
    font-size: 27px;
  }

  .home-feature {
    gap: 12px;
    padding: 18px;
  }

  .home-featureImage {
    flex-basis: 64px;
    height: 86px;
  }
}

@media (max-width: 1150px) {
  .home-page {
    display: block;
  }

  .home-sidebar {
    display: none;
  }

  .home-categories {
    display: flex;
  }

  .home-page {
    width: calc(100% - 64px);
    padding-top: 36px;
  }

  .home-intro {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 42%);
    gap: 24px;
  }

  .home-intro h1 {
    font-size: 30px;
  }

  .home-feature {
    gap: 12px;
    padding: 20px;
  }

  .home-featureImage {
    flex-basis: 72px;
    height: 92px;
  }

  .home-feature h3 {
    font-size: 16px;
  }
}

@media (max-width: 850px) {
  .home-intro {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 24px;
  }

  .home-searchArea {
    max-width: none;
  }

  .home-featureGrid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .home-feature {
    min-height: 0;
    padding: 18px 20px;
  }

  .home-featureImage {
    flex-basis: 88px;
    height: 80px;
  }

  .home-feature h3 {
    font-size: 17px;
  }

  .home-feature p {
    -webkit-line-clamp: 1;
    margin-top: 5px;
  }

  .home-featureMeta {
    padding-top: 10px;
  }

  .home-tools {
    margin-top: 24px;
    padding-top: 20px;
  }

  .home-contentRail {
    gap: 16px;
  }
}

@media (max-width: 560px) {
  .home-page {
    width: calc(100% - 40px);
    padding-block: 24px 40px;
  }

  .home-intro h1 {
    font-size: 26px;
  }

  .home-introCopy p {
    margin-top: 7px;
    font-size: 13px;
  }

  .home-search {
    gap: 7px;
  }

  .home-search button {
    padding-inline: 14px;
  }

  .home-search button > svg {
    display: none;
  }

  .home-searchHints {
    column-gap: 12px;
    font-size: 12px;
  }

  .home-sectionHeading h2 {
    font-size: 18px;
  }

  .home-sectionHeading > a {
    font-size: 12px;
  }

  .home-featureGrid {
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: var(--input) transparent;
    grid-template-columns: none;
    grid-auto-columns: 88%;
    grid-auto-flow: column;
    gap: 12px;
    margin-inline: -20px;
    padding: 0 20px 10px;
    scroll-padding-inline: 20px;
    overflow-x: auto;
  }

  .home-feature {
    scroll-snap-align: start;
    gap: 14px;
    min-height: 140px;
    padding: 16px;
  }

  .home-feature p {
    -webkit-line-clamp: 2;
  }

  .home-featureImage {
    flex-basis: 72px;
    height: 76px;
  }

  .home-feature h3 {
    font-size: 16px;
  }

  .home-feature p {
    font-size: 12px;
  }

  .home-featureMeta {
    padding-top: 8px;
    font-size: 11px;
  }

  .home-toolsHeading {
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
  }

  .home-titleGroup {
    gap: 6px 10px;
  }

  .home-titleGroup h2 {
    font-size: 22px;
  }

  .home-titleGroup > span {
    font-size: 11px;
  }

  .home-categories {
    padding-inline: 20px;
    margin-inline: -20px;
    padding-bottom: 10px;
  }

  .home-categories a {
    min-height: 40px;
    padding-inline: 10px;
  }

  .home-browseBar {
    margin-bottom: 14px;
  }

  .home-submitLink {
    font-size: 11px;
  }

  .home-contentRail {
    grid-template-columns: 1fr;
    margin-top: 32px;
    padding-top: 24px;
  }

  .home-newsPanel, .home-rankPanel {
    padding: 20px 20px 14px;
  }

  .home-videoEntry {
    padding: 20px;
  }

  .home-videoEntry > div {
    gap: 5px;
    display: grid;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-page *, .home-page :before, .home-page :after {
    transition: none;
  }
}

@media (max-width: 650px) {
  .home-searchContext {
    flex-wrap: wrap;
  }
}

.home-page {
  width: min(100% - 64px, 1480px);
  padding-block: 20px 64px;
  display: block;
}

.home-sidebar {
  display: none;
}

.home-intro {
  margin-bottom: 19px;
  display: block;
}

.home-intro h1 {
  font-size: 22px;
  font-weight: 760;
}

.home-introCopy p {
  margin-top: 4px;
  font-size: 12px;
}

.home-searchArea {
  margin-top: 13px;
}

.home-search {
  display: none;
}

.home-searchHints {
  gap: 7px;
  margin: 0;
}

.home-searchHints > span {
  margin-right: 4px;
}

.home-searchHints a {
  border: 1px solid var(--border);
  background: var(--card);
  min-height: 31px;
  color: var(--foreground);
  border-radius: 8px;
  align-items: center;
  padding: 0 11px;
  display: inline-flex;
}

.home-searchHints a:hover {
  border-color: var(--brand);
  background: var(--muted);
  text-decoration: none;
}

.home-categories {
  scrollbar-width: none;
  flex: auto;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 0;
  display: flex;
  overflow-x: auto;
}

.home-categories::-webkit-scrollbar {
  display: none;
}

.home-categories a {
  border: 1px solid var(--border);
  background: var(--card);
  min-height: 34px;
  color: var(--foreground);
  font-family: var(--font-navigation);
  font-size: var(--navigation-font-size);
  font-weight: 400;
  line-height: var(--navigation-line-height);
  border-radius: 8px;
}

.home-categories .home-allCategories {
  background: var(--foreground);
  color: var(--background);
  font-weight: var(--navigation-active-weight);
}

.home-tools {
  border-top: 0;
  margin-top: 22px;
  padding-top: 0;
}

.home-titleGroup h2 {
  font-size: 22px;
}

.home-browseBar {
  align-items: center;
  gap: 12px;
  min-width: 0;
  margin-bottom: 18px;
  padding-bottom: 14px;
  display: flex;
}

@media (max-width: 680px) {
  .home-page {
    width: calc(100% - 32px);
    padding-block: 18px 40px;
  }

  .home-intro h1 {
    font-size: 20px;
  }

  .home-browseBar {
    flex-wrap: wrap;
    gap: 10px;
  }

  .home-categories {
    flex: 100%;
    margin: 0;
    padding: 0;
    overflow-x: auto;
  }
}

.article-reading-page {
  --article-secondary: var(--foreground);
}

@supports (color: color-mix(in lab, red, red)) {
  .article-reading-page {
    --article-secondary: color-mix(in srgb, var(--foreground) 72%, var(--card));
  }
}

.article-reading-page {
  background: var(--card);
  min-height: 80vh;
  padding: 32px 0 64px;
}

.article-reading-container {
  width: min(100% - 80px, 1120px);
  margin-inline: auto;
}

.article-reading-soloIndex {
  max-width: 960px;
}

.article-reading-singleGrid {
  display: block;
}

.article-reading-breadcrumb {
  color: var(--article-secondary);
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
  font-size: 12px;
  line-height: 20px;
  display: flex;
}

.article-reading-breadcrumb a:hover {
  color: var(--primary);
}

.article-reading-indexHeader {
  margin-bottom: 24px;
}

.article-reading-indexHeader h1 {
  letter-spacing: -.02em;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.4;
}

.article-reading-indexHeader p {
  -webkit-line-clamp: 2;
  color: var(--article-secondary);
  -webkit-box-orient: vertical;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.8;
  display: -webkit-box;
  overflow: hidden;
}

.article-reading-categories {
  border-bottom: 1px solid var(--border);
  font-family: var(--font-navigation);
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  margin-bottom: 8px;
  padding-bottom: 12px;
  font-size: 14px;
  display: flex;
  position: relative;
}

.article-reading-categories > a, .article-reading-moreCategories summary {
  cursor: pointer;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  display: flex;
}

.article-reading-categories a:hover, .article-reading-moreCategories summary:hover {
  color: var(--primary);
}

.article-reading-categories > a[aria-current="page"] {
  color: var(--primary);
  box-shadow: inset 0 -2px var(--primary);
  font-weight: 600;
}

.article-reading-moreCategories {
  position: static;
}

.article-reading-moreCategories summary {
  color: var(--article-secondary);
  gap: 4px;
  list-style: none;
}

.article-reading-moreCategories summary::-webkit-details-marker {
  display: none;
}

.article-reading-moreCategories[open] summary svg {
  transform: rotate(180deg);
}

.article-reading-moreCategories nav {
  z-index: 10;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  width: min(480px, 80vw);
  max-height: 360px;
  padding: 12px;
  display: grid;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  overflow-y: auto;
}

.article-reading-moreCategories nav a {
  border-radius: 6px;
  align-items: center;
  min-height: 44px;
  padding: 4px 8px;
  display: flex;
}

.article-reading-moreCategories nav a:hover {
  background: var(--muted);
}

.article-reading-grid {
  grid-template-columns: minmax(0, 1fr) 248px;
  align-items: start;
  gap: 48px;
  display: grid;
}

.article-reading-list {
  min-width: 0;
}

.article-reading-listItem {
  border-bottom: 1px solid var(--border);
  gap: 24px;
  padding: 24px 0;
  display: flex;
}

.article-reading-listItem > a {
  flex-shrink: 0;
}

.article-reading-listImage {
  object-fit: cover;
  background: var(--muted);
  border-radius: 8px;
  flex-shrink: 0;
  width: 224px;
  height: 142px;
}

.article-reading-listCopy {
  flex-direction: column;
  flex: 1;
  min-width: 0;
  display: flex;
}

.article-reading-listTitle {
  letter-spacing: -.015em;
  overflow-wrap: anywhere;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.55;
}

.article-reading-listTitle a:hover {
  color: var(--primary);
}

.article-reading-listSummary {
  -webkit-line-clamp: 2;
  color: var(--article-secondary);
  -webkit-box-orient: vertical;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.8;
  display: -webkit-box;
  overflow: hidden;
}

.article-reading-meta {
  color: var(--article-secondary);
  font-variant-numeric: tabular-nums;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  font-size: 12px;
  line-height: 20px;
  display: flex;
}

.article-reading-meta a {
  color: var(--article-secondary);
}

.article-reading-meta a:hover {
  color: var(--primary);
}

.article-reading-listCopy .article-reading-meta {
  margin-top: auto;
  padding-top: 12px;
}

.article-reading-rail {
  padding-top: 24px;
}

.article-reading-related h2 {
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}

.article-reading-relatedItem {
  align-items: start;
  gap: 12px;
  margin-bottom: 20px;
  display: flex;
}

.article-reading-relatedItem > div {
  flex: 1;
  min-width: 0;
}

.article-reading-relatedItem h3 {
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.65;
  display: -webkit-box;
  overflow: hidden;
}

.article-reading-relatedItem:hover h3 {
  color: var(--primary);
}

.article-reading-relatedItem time {
  color: var(--article-secondary);
  margin-top: 6px;
  font-size: 11px;
  display: block;
}

.article-reading-relatedImage {
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
  width: 76px;
  height: 54px;
}

.article-reading-empty {
  color: var(--article-secondary);
  padding: 64px 0;
  font-size: 14px;
}

.article-reading-readingGrid {
  grid-template-columns: minmax(0, 760px) 248px;
}

.article-reading-readingHeader {
  border-bottom: 1px solid var(--border);
  padding-bottom: 24px;
}

.article-reading-readingHeader h1 {
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
  text-wrap: pretty;
  font-size: 32px;
  font-weight: 650;
  line-height: 1.5;
}

.article-reading-readingHeader .article-reading-meta {
  margin-top: 16px;
}

.article-reading-readingSummary {
  color: var(--article-secondary);
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.9;
}

.article-reading-cover {
  object-fit: contain;
  border-radius: 8px;
  width: 100%;
  height: auto;
  max-height: 360px;
  margin: 28px 0;
  display: block;
}

.article-reading-body {
  overflow-wrap: anywhere;
  padding-top: 24px;
  font-size: 16px;
  line-height: 1.9;
}

.article-reading-cover + .article-reading-body {
  padding-top: 0;
}

.article-reading-body h2 {
  margin-top: 40px;
  margin-bottom: 16px;
  font-size: 24px;
  font-weight: 650;
  line-height: 1.5;
}

.article-reading-body h3 {
  margin-top: 32px;
  margin-bottom: 12px;
  font-size: 20px;
}

.article-reading-body :is(h2, h3) {
  scroll-margin-top: calc(var(--site-header-height, 104px) + 24px);
}

.article-reading-body pre {
  overflow-wrap: normal;
}

.article-reading-body p {
  margin-bottom: 16px;
}

.article-reading-body ul, .article-reading-body ol {
  margin: 0 0 16px;
  padding-left: 24px;
}

.article-reading-body ul {
  list-style: outside;
}

.article-reading-body li {
  margin-bottom: 8px;
  line-height: 1.8;
}

.article-reading-body li:last-child {
  margin-bottom: 0;
}

.article-reading-body blockquote {
  border-left: 3px solid var(--border);
  color: var(--article-secondary);
  margin: 0 0 16px;
  padding: 2px 0 2px 16px;
}

.article-reading-body code {
  background: var(--muted);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 14px;
}

.article-reading-body strong {
  font-weight: 650;
}

.article-reading-body img {
  border-radius: 8px;
  width: 100%;
  height: auto;
}

.article-reading-readingRail {
  align-self: stretch;
  padding-top: 8px;
}

.article-reading-mobileContents {
  display: none;
}

.article-reading-readingRail .article-reading-related {
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
  padding-bottom: 24px;
}

.article-reading-contents {
  top: calc(var(--site-header-height, 104px) + 28px);
  position: sticky;
}

.article-reading-contents summary {
  cursor: pointer;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 600;
}

.article-reading-contents nav {
  max-height: calc(100vh - var(--site-header-height, 104px) - 100px);
  flex-direction: column;
  display: flex;
  overflow-y: auto;
}

.article-reading-contents nav a {
  color: var(--article-secondary);
  padding: 8px 0;
  font-size: 13px;
  line-height: 1.7;
}

.article-reading-contents nav a[data-nested] {
  padding-left: 12px;
  font-size: 12px;
}

.article-reading-contents nav a:hover {
  color: var(--primary);
}

.article-reading-backLink {
  min-height: 44px;
  color: var(--article-secondary);
  align-items: center;
  gap: 8px;
  margin-top: 40px;
  font-size: 14px;
  display: inline-flex;
}

.article-reading-backLink:hover {
  color: var(--primary);
}

@media (max-width: 1200px) {
  .article-reading-grid {
    grid-template-columns: minmax(0, 1fr) 216px;
    gap: 32px;
  }

  .article-reading-listImage {
    width: 180px;
    height: 120px;
  }
}

@media (max-width: 1080px) {
  .article-reading-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .article-reading-rail, .article-reading-readingRail {
    display: none;
  }

  .article-reading-mobileContents {
    margin-top: 24px;
    display: block;
  }

  .article-reading-contents {
    background: var(--muted);
    border-radius: 8px;
    margin-bottom: 8px;
    padding: 12px 16px;
    position: static;
  }

  .article-reading-contents nav {
    max-height: 240px;
  }

  .article-reading-container {
    max-width: 840px;
  }
}

@media (max-width: 640px) {
  .article-reading-page {
    padding: 24px 0 40px;
  }

  .article-reading-container {
    width: calc(100% - 40px);
  }

  .article-reading-breadcrumb {
    margin-bottom: 20px;
  }

  .article-reading-indexHeader {
    margin-bottom: 16px;
  }

  .article-reading-indexHeader h1 {
    font-size: 26px;
  }

  .article-reading-categories {
    gap: 0 14px;
  }

  .article-reading-moreCategories nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .article-reading-listItem {
    gap: 16px;
    padding: 20px 0;
  }

  .article-reading-listImage {
    width: 104px;
    height: 78px;
  }

  .article-reading-listTitle {
    font-size: 16px;
    line-height: 1.6;
  }

  .article-reading-listSummary {
    display: none;
  }

  .article-reading-listCopy .article-reading-meta {
    gap: 4px 8px;
    padding-top: 8px;
    font-size: 11px;
  }

  .article-reading-readingHeader h1 {
    font-size: 25px;
    line-height: 1.5;
  }

  .article-reading-readingSummary {
    font-size: 14px;
  }

  .article-reading-cover {
    max-height: 280px;
    margin: 24px 0;
  }

  .article-reading-body h2 {
    font-size: 22px;
  }

  .article-reading-body h3 {
    font-size: 18px;
  }
}

.pagination-pagination {
  border-top: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  padding-top: 24px;
  font-size: 14px;
  line-height: 20px;
  display: flex;
}

.pagination-controls {
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.pagination-page {
  align-items: center;
  gap: 6px;
  display: flex;
}

.pagination-number, .pagination-step, .pagination-ellipsis {
  border-radius: var(--radius-control);
  border: 1px solid #0000;
  flex: none;
  justify-content: center;
  align-items: center;
  min-width: 40px;
  height: 40px;
  display: inline-flex;
}

.pagination-number, .pagination-step {
  color: var(--foreground);
  transition: background-color var(--duration-fast) ease, border-color var(--duration-fast) ease, color var(--duration-fast) ease;
  text-decoration: none;
}

.pagination-number {
  background: none;
  padding: 0 8px;
  font-weight: 500;
}

.pagination-pagination button {
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

.pagination-step {
  border-color: var(--border);
  background: var(--card);
  white-space: nowrap;
  gap: 6px;
  padding: 0 12px;
}

.pagination-pagination svg {
  stroke-width: 1.75px;
  width: 16px;
  height: 16px;
}

.pagination-pagination :is(a, button):hover {
  border-color: var(--input);
  background: var(--card);
  color: var(--primary);
}

.pagination-pagination :is(a, button):active {
  background: var(--accent);
}

.pagination-pagination :is(a, button):focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
}

.pagination-number[aria-current="page"] {
  background: var(--primary);
  color: var(--primary-foreground);
  font-weight: 600;
}

.pagination-step[aria-disabled="true"] {
  color: var(--muted-foreground);
  opacity: .5;
  background: none;
}

.pagination-ellipsis {
  min-width: 28px;
  color: var(--muted-foreground);
}

.pagination-status {
  color: var(--foreground);
}

@supports (color: color-mix(in lab, red, red)) {
  .pagination-status {
    color: color-mix(in srgb, var(--foreground) 72%, var(--background));
  }
}

.pagination-status {
  margin: 0;
  font-size: 12px;
}

.pagination-mobileStatus {
  display: none;
}

@media (max-width: 600px) {
  .pagination-pagination {
    margin-top: 24px;
    padding-top: 20px;
  }

  .pagination-controls {
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    max-width: 360px;
  }

  .pagination-page, .pagination-status {
    display: none;
  }

  .pagination-step {
    min-height: 44px;
    padding: 0 12px;
  }

  .pagination-mobileStatus {
    color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .pagination-mobileStatus {
      color: color-mix(in srgb, var(--foreground) 72%, var(--background));
    }
  }

  .pagination-mobileStatus {
    white-space: nowrap;
    display: block;
  }

  .pagination-mobileStatus > span {
    color: var(--foreground);
    font-weight: 600;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pagination-number, .pagination-step {
    transition: none;
  }
}

.article-reading-sourceCard {
  border: 1px solid var(--border);
  border-radius: var(--radius-control, 12px);
  background: var(--muted);
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin: 28px 0 8px;
  padding: 16px 20px;
  display: flex;
}

.article-reading-sourceCopy {
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  display: flex;
}

.article-reading-sourceLabel {
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted-foreground);
  border-radius: 999px;
  margin-right: 2px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
}

.article-reading-sourceCopy strong {
  color: var(--foreground);
  font-size: 14px;
  font-weight: 650;
}

.article-reading-sourceDate {
  color: var(--muted-foreground);
  font-size: 12px;
}

.article-reading-sourceLink {
  background: var(--primary);
  min-height: 32px;
  color: var(--primary-foreground);
  border-radius: 999px;
  align-items: center;
  gap: 4px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
}

.article-reading-sourceLink:hover {
  opacity: .9;
}

.article-reading-relatedList {
  gap: 0;
  display: grid;
}

.article-reading-relatedItem {
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
  padding: 12px 0;
}

.article-reading-relatedItem:last-child {
  border-bottom: 0;
}

.article-reading-relatedItem .article-reading-relatedTitle {
  color: var(--foreground);
  font-size: 14px;
  font-weight: 550;
  line-height: 1.6;
  display: block;
}

.article-reading-relatedItem:hover .article-reading-relatedTitle {
  color: var(--primary);
}

.article-reading-relatedItem .article-reading-relatedMeta {
  color: var(--muted-foreground);
  margin-top: 4px;
  font-size: 12px;
  display: block;
}

.article-reading-readingRail .article-reading-railRelated {
  border-top: 1px solid var(--border);
  gap: 0;
  margin-top: 24px;
  padding-top: 16px;
  display: grid;
}

.article-reading-railTitle {
  color: var(--muted-foreground);
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 650;
}

.article-reading-railItem {
  min-height: 28px;
  color: var(--foreground);
  padding: 6px 0;
  font-size: 13px;
  line-height: 1.55;
}

.article-reading-railItem:hover {
  color: var(--primary);
}

.article-reading-listImageFallback {
  aspect-ratio: 8 / 5;
  border: 1px solid var(--border);
  border-radius: var(--radius-control, 12px);
  background: var(--muted);
  color: var(--muted-foreground);
  justify-content: center;
  align-items: center;
  font-size: 22px;
  font-weight: 700;
  display: flex;
}

.article-reading-page .article-reading-empty {
  min-height: 120px;
  color: var(--muted-foreground);
  padding: 32px 0;
  font-size: 14px;
}

.beian-hero {
  background: #095acb;
}

.beian-hero:before {
  z-index: -1;
  content: "";
  background: linear-gradient(136deg, #01c7f059 0 17%, #0000 17% 100%), linear-gradient(316deg, #00239247 0 29%, #0000 29% 100%), linear-gradient(120deg, #0870dc, #074fc0 68%, #0647b6);
  position: absolute;
  inset: 0;
}

.beian-hero:after {
  z-index: -1;
  content: "";
  background: linear-gradient(135deg, #0000 0 31%, #0a77e659 31% 46%, #0000 46% 100%);
  position: absolute;
  inset: 0;
}

.product-faqList {
  gap: 10px;
  display: grid;
}

.product-faqItem {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 12px;
  transition: border-color .18s ease-out, background-color .18s ease-out;
}

.product-faqItem:hover {
  border-color: var(--foreground);
}

@supports (color: color-mix(in lab, red, red)) {
  .product-faqItem:hover {
    border-color: color-mix(in srgb, var(--foreground) 18%, var(--border));
  }
}

.product-faqItem[open] {
  border-color: var(--primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .product-faqItem[open] {
    border-color: color-mix(in srgb, var(--primary) 32%, var(--border));
  }
}

.product-faqItem[open] {
  background: var(--primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .product-faqItem[open] {
    background: color-mix(in srgb, var(--primary) 1.5%, var(--card));
  }
}

.product-faqItem summary {
  cursor: pointer;
  border-radius: 12px;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  min-height: 54px;
  padding: 14px 18px;
  list-style: none;
  display: flex;
}

.product-faqItem summary::-webkit-details-marker {
  display: none;
}

.product-faqItem summary:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.product-faqItem summary h3 {
  color: var(--foreground);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.65;
}

.product-faqChevron {
  color: var(--muted-foreground);
  flex: none;
  transition: transform .22s ease-out;
}

.product-faqItem[open] .product-faqChevron {
  transform: rotate(180deg);
}

.product-faqBody {
  color: var(--product-secondary);
  padding: 0 18px 16px;
  font-size: 14.5px;
  line-height: 1.95;
}

.product-prosCons {
  grid-template-columns: 1fr;
  gap: 14px;
  display: grid;
}

@media (min-width: 761px) {
  .product-prosCons {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
}

.product-prosCol {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
}

.product-prosCol--pros {
  border-left: 2px solid var(--primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .product-prosCol--pros {
    border-left: 2px solid color-mix(in srgb, var(--primary) 45%, transparent);
  }
}

.product-prosCol--cons {
  border-left: 2px solid var(--foreground);
}

@supports (color: color-mix(in lab, red, red)) {
  .product-prosCol--cons {
    border-left: 2px solid color-mix(in srgb, var(--foreground) 22%, transparent);
  }
}

.product-prosCol h3 {
  color: var(--foreground);
  letter-spacing: .02em;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.7;
  display: flex;
}

.product-prosCol h3 svg {
  color: var(--muted-foreground);
}

.product-prosCol ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.product-prosCol li {
  color: var(--foreground);
  margin-block: 0;
  padding: 9px 0 9px 22px;
  font-size: 14.5px;
  line-height: 1.85;
  position: relative;
}

@supports (color: color-mix(in lab, red, red)) {
  .product-prosCol li {
    color: color-mix(in srgb, var(--foreground) 94%, var(--card));
  }
}

.product-prosCol li {
  border-top: 1px solid var(--border);
}

@supports (color: color-mix(in lab, red, red)) {
  .product-prosCol li {
    border-top: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  }
}

.product-prosCol li:first-child {
  border-top: 0;
  padding-top: 0;
}

.product-prosCol li:last-child {
  padding-bottom: 0;
}

.product-prosCol li:before {
  content: "";
  background: var(--product-secondary);
  border-radius: 2px;
  width: 6px;
  height: 6px;
  position: absolute;
  top: calc(1em + 2px);
  left: 2px;
}

@supports (color: color-mix(in lab, red, red)) {
  .product-prosCol li:before {
    background: color-mix(in srgb, var(--product-secondary) 55%, transparent);
  }
}

@media (max-width: 760px) {
  .product-prosCol li {
    font-size: 14px;
    line-height: 1.8;
  }
}

.product-vsLink {
  border: 1px solid var(--border);
  min-height: 32px;
  color: var(--product-secondary);
  border-radius: 6px;
  flex: none;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  font-size: 13px;
  line-height: 1.65;
  transition: color .16s ease-out, border-color .16s ease-out, background-color .16s ease-out;
  display: inline-flex;
}

.product-vsLink:hover {
  color: var(--primary);
  border-color: var(--primary);
  background: var(--muted);
}

.product-moreAlternatives {
  border-top: 1px solid var(--border);
  color: var(--product-secondary);
  margin-top: 16px;
  padding-top: 16px;
  font-size: 13px;
  line-height: 1.8;
}

.product-moreAlternatives a {
  color: var(--primary);
  text-underline-offset: 4px;
}

.product-moreAlternatives a:hover {
  text-decoration: underline;
}

.vs-logoPair {
  gap: 10px;
  display: flex;
}

.vs-logoCell {
  background: var(--muted);
  border-radius: 12px;
  place-items: center;
  width: 52px;
  height: 52px;
  display: grid;
  overflow: hidden;
}

.vs-logoCell img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.vs-jumpLink {
  min-height: 44px;
  color: var(--primary);
  align-items: center;
  gap: 8px;
  font-size: 14px;
  display: inline-flex;
}

.vs-jumpLink:hover {
  color: var(--primary);
}

.vs-jumpLink svg {
  flex: none;
}

.vs-tableWrap {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow-x: auto;
}

.vs-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 520px;
  font-size: 14px;
}

.vs-table th, .vs-table td {
  border: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
  padding: 10px 14px;
}

.vs-table thead th {
  background: var(--muted);
  white-space: nowrap;
  font-weight: 580;
}

.vs-table tbody th {
  background: var(--muted);
  white-space: nowrap;
  width: 96px;
  font-weight: 580;
}

.vs-table td {
  color: var(--product-secondary);
}

.mobile-comments-cta {
  display: none;
}

@media (max-width: 767px) {
  .mobile-comments-cta {
    z-index: 40;
    background: var(--primary);
    height: 2.5rem;
    color: var(--primary-foreground);
    border-radius: 9999px;
    align-items: center;
    padding: 0 1.125rem;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    position: fixed;
    bottom: 1.5rem;
    left: 1rem;
    box-shadow: 0 4px 16px #0000002e;
  }

  .mobile-comments-cta:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
  }
}

.vs-ctaBox {
  background: var(--muted);
  border-radius: 12px;
  margin-top: 1.75rem;
  padding: 1.25rem 1.5rem;
}

.vs-ctaBox h2 {
  margin: 0 0 .5rem;
  font-size: 16px;
  font-weight: 650;
}

.vs-ctaBox p {
  color: var(--product-secondary);
  margin: 0;
  font-size: 13.5px;
  line-height: 1.85;
}

.vs-ctaBox a {
  color: var(--primary);
  font-weight: 550;
}

.site-suggest-list {
  z-index: 60;
  background: var(--popover);
  border: 1px solid var(--border);
  border-radius: 14px;
  max-height: min(60vh, 420px);
  margin: 0;
  padding: 6px;
  list-style: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  overflow: auto;
  box-shadow: 0 12px 32px #0000001f;
}

.site-suggest-row {
  width: 100%;
  color: var(--foreground);
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 9px;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  font-size: 14px;
  font-weight: 500;
  display: flex;
}

.site-suggest-row.is-active, .site-suggest-row:hover {
  background: var(--muted);
}

.site-suggest-logo {
  object-fit: cover;
  background: var(--background);
  border-radius: 6px;
  width: 22px;
  height: 22px;
}

.site-suggest-icon {
  color: var(--muted-foreground);
  display: inline-flex;
}

.site-suggest-label {
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  overflow: hidden;
}

.site-suggest-count {
  color: var(--muted-foreground);
  font-size: 12px;
  font-weight: 450;
}

.site-suggest-searchall {
  color: var(--muted-foreground);
  font-size: 13px;
  font-weight: 450;
}

.site-suggest-searchall:hover {
  color: var(--primary);
  background: var(--muted);
}

.editorial-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
}

.editorial-breadcrumb {
  color: var(--muted-foreground);
  gap: 8px;
  margin-bottom: 1rem;
  font-size: 13px;
  display: flex;
}

.editorial-breadcrumb a:hover {
  color: var(--primary);
}

.editorial-page h1 {
  letter-spacing: -.02em;
  margin: 0 0 .75rem;
  font-size: 30px;
  font-weight: 700;
}

.editorial-lede {
  color: var(--product-secondary);
  margin: 0 0 2rem;
  font-size: 15px;
  line-height: 1.9;
}

.editorial-section {
  margin-top: 2.25rem;
}

.editorial-section h2 {
  margin: 0 0 .9rem;
  font-size: 20px;
  font-weight: 650;
}

.editorial-steps {
  gap: .85rem;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.editorial-steps strong {
  font-size: 14.5px;
  font-weight: 600;
}

.editorial-steps p {
  color: var(--product-secondary);
  margin: .2rem 0 0;
  font-size: 13.5px;
  line-height: 1.8;
}

.editorial-health {
  gap: .7rem;
  margin: 0;
  display: grid;
}

.editorial-health dt {
  font-size: 14px;
  font-weight: 600;
}

.editorial-health dd {
  color: var(--product-secondary);
  margin: .15rem 0 0;
  font-size: 13.5px;
  line-height: 1.8;
}

.editorial-note {
  color: var(--muted-foreground);
  margin-top: 1rem;
  font-size: 13px;
  line-height: 1.8;
}

.editorial-section p {
  font-size: 14px;
  line-height: 1.9;
}

.editorial-link-inline {
  color: var(--primary);
  font-weight: 550;
}

.product-verify-link {
  color: inherit;
  align-items: center;
  gap: 4px;
  display: inline-flex;
}

.product-verify-link:hover {
  color: var(--primary);
}

.recent-visited {
  margin-top: var(--section-gap, 22px);
}

.recent-visited-head {
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
  display: flex;
}

.recent-visited-head h2 {
  letter-spacing: -.025em;
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}

.recent-visited-head a {
  color: var(--muted-foreground);
  font-size: 12px;
}

.recent-visited-head a:hover {
  color: var(--primary);
}

.recent-visited-row {
  scrollbar-width: none;
  gap: 10px;
  padding-bottom: 2px;
  display: flex;
  overflow-x: auto;
}

.recent-visited-row::-webkit-scrollbar {
  display: none;
}

.recent-visited-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 8px;
  display: flex;
}

.recent-visited-card:hover {
  border-color: var(--primary);
}

.recent-visited-card img {
  object-fit: cover;
  background: var(--background);
  border-radius: 8px;
  width: 30px;
  height: 30px;
}

.recent-visited-name {
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 9em;
  font-size: 13px;
  font-weight: 550;
  overflow: hidden;
}

.apidocs-endpoint {
  border-top: 1px solid var(--border);
  margin-top: 2rem;
  padding-top: 1.25rem;
}

.apidocs-endpoint h2 {
  align-items: center;
  gap: 10px;
  margin: 0 0 .5rem;
  font-size: 16px;
  font-weight: 650;
  display: flex;
}

.apidocs-method {
  background: var(--primary);
  color: var(--primary-foreground);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 650;
}

.apidocs-path {
  background: var(--muted);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 13px;
}

.apidocs-params {
  margin: .75rem 0 0;
}

.apidocs-params dt {
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-mono, monospace);
  display: inline;
}

.apidocs-params dd {
  color: var(--product-secondary);
  margin-left: 8px;
  font-size: 13px;
  display: inline;
}

.apidocs-params div {
  margin: .35rem 0;
}

.apidocs-sample {
  background: var(--muted);
  border-radius: 9px;
  margin: .75rem 0 0;
  padding: 10px 12px;
  font-size: 12.5px;
  overflow-x: auto;
}

.category-guide h2, .category-faq h2 {
  letter-spacing: -.02em;
  margin: 0 0 .75rem;
  font-size: 18px;
  font-weight: 700;
}

.category-guide p {
  color: var(--product-secondary);
  margin: .6rem 0 0;
  font-size: 14px;
  line-height: 1.95;
}

.category-faq details {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 10px;
  margin-bottom: .5rem;
  padding: .7rem 1rem;
}

.category-faq summary {
  cursor: pointer;
  font-size: 14px;
  font-weight: 550;
}

.category-faq summary::marker {
  color: var(--muted-foreground);
}

.category-faq details p {
  color: var(--product-secondary);
  margin: .6rem 0 0;
  font-size: 13.5px;
  line-height: 1.85;
}

.product-page {
  isolation: isolate;
  position: relative;
}

.product-page:before {
  content: "";
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(58% 78% at 16% 0%,var(--primary),transparent 72%),radial-gradient(42% 62% at 88% 4%,var(--primary),transparent 70%);
  height: min(560px, 72vw);
  position: absolute;
  inset: 0 0 auto;
}

@supports (color: color-mix(in lab, red, red)) {
  .product-page:before {
    background: radial-gradient(58% 78% at 16% 0%,color-mix(in srgb,var(--primary) 4.5%,transparent),transparent 72%),radial-gradient(42% 62% at 88% 4%,color-mix(in srgb,var(--primary) 3%,transparent),transparent 70%);
  }
}

.product-page:before {
  -webkit-mask-image: linear-gradient(#000 0%, #0000 100%);
  mask-image: linear-gradient(#000 0%, #0000 100%);
}

.product-logo {
  background: var(--background);
  border: 1px solid var(--border);
  box-shadow: 0 1px 2px var(--foreground),0 4px 14px var(--foreground);
}

@supports (color: color-mix(in lab, red, red)) {
  .product-logo {
    box-shadow: 0 1px 2px color-mix(in srgb,var(--foreground) 7%,transparent),0 4px 14px color-mix(in srgb,var(--foreground) 4%,transparent);
  }
}

.product-logoImage {
  padding: 9%;
}

.product-logoFallback {
  padding: 0;
}

.product-editorAside {
  border-left: 2px solid var(--primary);
  max-width: 44em;
  margin-top: 18px;
  padding: 3px 0 3px 16px;
}

@supports (color: color-mix(in lab, red, red)) {
  .product-editorAside {
    border-left: 2px solid color-mix(in srgb,var(--primary) 50%,transparent);
  }
}

.product-editorAsideBody {
  color: var(--product-secondary);
  text-wrap: pretty;
  font-size: 13.5px;
  line-height: 1.85;
}

.product-editorAsideMark {
  letter-spacing: .06em;
  color: var(--primary);
  margin-top: 6px;
  font-size: 11px;
  font-weight: 600;
  display: inline-block;
}

@supports (color: color-mix(in lab, red, red)) {
  .product-editorAsideMark {
    color: color-mix(in srgb,var(--primary) 85%,var(--foreground));
  }
}

.product-prose h2:before, .product-startHeading h2:before {
  content: "";
  background: var(--primary);
  border-radius: 2px;
  width: 26px;
  height: 3px;
  display: block;
}

@supports (color: color-mix(in lab, red, red)) {
  .product-prose h2:before, .product-startHeading h2:before {
    background: color-mix(in srgb,var(--primary) 68%,transparent);
  }
}

.product-prose h2:before, .product-startHeading h2:before {
  margin-bottom: 12px;
}

.product-page a:hover [data-icon="inline-end"] {
  transform: translate(2px, -2px);
}

.product-page a [data-icon="inline-end"] {
  transition: transform .18s ease-out;
}

.product-highlight {
  transition: background-color .16s ease-out;
}

.product-highlight:hover {
  background: var(--muted);
}

@supports (color: color-mix(in lab, red, red)) {
  .product-highlight:hover {
    background: color-mix(in srgb,var(--muted) 38%,transparent);
  }
}

.product-highlight:hover .product-highlightTitle {
  color: var(--primary);
}

.product-highlightTitle {
  transition: color .16s ease-out;
}

.product-resourceLinks a {
  border-bottom: 1px solid var(--primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .product-resourceLinks a {
    border-bottom: 1px solid color-mix(in srgb,var(--primary) 22%,transparent);
  }
}

.product-resourceLinks a {
  padding-bottom: 1px;
  transition: border-color .16s ease-out;
}

.product-resourceLinks a:hover {
  border-bottom-color: var(--primary);
}

@media (prefers-reduced-motion: reduce) {
  .product-page a [data-icon="inline-end"], .product-faqChevron, .product-highlight, .product-highlightTitle {
    transition: none;
  }
}

.product-articleHeading h2 {
  letter-spacing: -.02em;
}

.product-articleHeading h2:before {
  content: "";
  background: var(--primary);
  border-radius: 2px;
  width: 26px;
  height: 3px;
  display: block;
}

@supports (color: color-mix(in lab, red, red)) {
  .product-articleHeading h2:before {
    background: color-mix(in srgb,var(--primary) 68%,transparent);
  }
}

.product-articleHeading h2:before {
  margin-bottom: 12px;
}

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

@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-space-x-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-leading {
  syntax: "*";
  inherits: false
}

@property --tw-font-weight {
  syntax: "*";
  inherits: false
}

@property --tw-tracking {
  syntax: "*";
  inherits: false
}

@property --tw-ordinal {
  syntax: "*";
  inherits: false
}

@property --tw-slashed-zero {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-figure {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

@property --tw-duration {
  syntax: "*";
  inherits: false
}

@property --tw-ease {
  syntax: "*";
  inherits: false
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes pulse {
  50% {
    opacity: .5;
  }
}

/*# sourceMappingURL=src_app_globals_162hn9o.css.map*/