/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@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-border-style: solid;
      --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-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;
    }
  }
}
@layer theme {
  :root,
  :host {
    --font-sans: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --spacing: 0.25rem;
    --container-xs: 20rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-lg: 32rem;
    --container-xl: 36rem;
    --container-2xl: 42rem;
    --text-xs: clamp(0.75rem, 0.7268rem + 0.0952vw, 0.8125rem);
    --text-xs--line-height: calc(1 / 0.75);
    --text-sm: clamp(0.8125rem, 0.7893rem + 0.0952vw, 0.875rem);
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-base: clamp(1rem, 0.9768rem + 0.0952vw, 1.0625rem);
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: clamp(1.0625rem, 1.0161rem + 0.1905vw, 1.1875rem);
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: clamp(1.25rem, 1.2036rem + 0.1905vw, 1.375rem);
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: clamp(1.5rem, 1.4071rem + 0.381vw, 1.75rem);
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: clamp(1.75rem, 1.6107rem + 0.5714vw, 2.125rem);
    --text-3xl--line-height: calc(2.25 / 1.875);
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --tracking-normal: 0em;
    --tracking-wide: 0.025em;
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --ease-out: cubic-bezier(0.2, 0, 0, 1);
    --aspect-video: 16 / 9;
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --color-brand: var(--lightningcss-light, oklch(38% 0.13 305)) var(--lightningcss-dark, oklch(80% 0.1 305));
    --color-brand-strong: var(--lightningcss-light, oklch(30% 0.13 305)) var(--lightningcss-dark, oklch(87% 0.08 305));
    --color-on-brand: var(--lightningcss-light, oklch(99% 0 0)) var(--lightningcss-dark, oklch(18% 0.04 305));
    --color-accent: var(--lightningcss-light, oklch(58% 0.21 25)) var(--lightningcss-dark, oklch(72% 0.17 25));
    --color-on-accent: var(--lightningcss-light, oklch(99% 0 0)) var(--lightningcss-dark, oklch(18% 0.05 25));
    --color-live: var(--lightningcss-light, oklch(58% 0.21 25)) var(--lightningcss-dark, oklch(72% 0.17 25));
    --color-on-live: var(--lightningcss-light, oklch(99% 0 0)) var(--lightningcss-dark, oklch(18% 0.05 25));
    --color-bg: var(--lightningcss-light, oklch(99% 0.002 305)) var(--lightningcss-dark, oklch(15% 0.008 305));
    --color-surface: var(--lightningcss-light, oklch(97.5% 0.004 305)) var(--lightningcss-dark, oklch(19% 0.01 305));
    --color-surface-2: var(--lightningcss-light, oklch(94.5% 0.006 305)) var(--lightningcss-dark, oklch(24% 0.012 305));
    --color-surface-3: var(--lightningcss-light, oklch(90% 0.008 305)) var(--lightningcss-dark, oklch(30% 0.014 305));
    --color-line: var(--lightningcss-light, oklch(89% 0.005 305)) var(--lightningcss-dark, oklch(30% 0.01 305));
    --color-paper: var(--lightningcss-light, oklch(98% 0.006 85)) var(--lightningcss-dark, oklch(17% 0.008 85));
    --color-fg: var(--lightningcss-light, oklch(17% 0.01 305)) var(--lightningcss-dark, oklch(95% 0.004 305));
    --color-fg-muted: var(--lightningcss-light, oklch(44% 0.012 305)) var(--lightningcss-dark, oklch(74% 0.01 305));
    --color-fg-subtle: var(--lightningcss-light, oklch(50% 0.01 305)) var(--lightningcss-dark, oklch(66% 0.01 305));
    --color-fg-read: var(--lightningcss-light, oklch(20% 0.01 85)) var(--lightningcss-dark, oklch(88% 0.006 85));
    --color-success: var(--lightningcss-light, oklch(55% 0.15 150)) var(--lightningcss-dark, oklch(78% 0.14 150));
    --color-on-success: var(--lightningcss-light, oklch(99% 0 0)) var(--lightningcss-dark, oklch(16% 0.04 150));
    --color-warning: var(--lightningcss-light, oklch(76% 0.15 80)) var(--lightningcss-dark, oklch(82% 0.14 80));
    --color-danger: var(--lightningcss-light, oklch(56% 0.2 25)) var(--lightningcss-dark, oklch(72% 0.16 25));
    --color-on-danger: var(--lightningcss-light, oklch(99% 0 0)) var(--lightningcss-dark, oklch(16% 0.04 25));
    --color-cat-world: var(--lightningcss-light, oklch(45% 0.14 250)) var(--lightningcss-dark, oklch(80% 0.11 250));
    --color-cat-world-tint: var(--lightningcss-light, oklch(94% 0.04 250)) var(--lightningcss-dark, oklch(26% 0.05 250));
    --color-cat-politics: var(--lightningcss-light, oklch(45% 0.14 305)) var(--lightningcss-dark, oklch(80% 0.11 305));
    --color-cat-politics-tint: var(--lightningcss-light, oklch(94% 0.04 305))
      var(--lightningcss-dark, oklch(26% 0.05 305));
    --color-cat-business: var(--lightningcss-light, oklch(45% 0.14 155)) var(--lightningcss-dark, oklch(80% 0.11 155));
    --color-cat-business-tint: var(--lightningcss-light, oklch(94% 0.04 155))
      var(--lightningcss-dark, oklch(26% 0.05 155));
    --color-cat-tech: var(--lightningcss-light, oklch(45% 0.14 200)) var(--lightningcss-dark, oklch(80% 0.11 200));
    --color-cat-tech-tint: var(--lightningcss-light, oklch(94% 0.04 200)) var(--lightningcss-dark, oklch(26% 0.05 200));
    --color-cat-culture: var(--lightningcss-light, oklch(45% 0.14 25)) var(--lightningcss-dark, oklch(80% 0.11 25));
    --color-cat-culture-tint: var(--lightningcss-light, oklch(94% 0.04 25)) var(--lightningcss-dark, oklch(26% 0.05 25));
    --color-cat-sport: var(--lightningcss-light, oklch(45% 0.14 85)) var(--lightningcss-dark, oklch(80% 0.11 85));
    --color-cat-sport-tint: var(--lightningcss-light, oklch(94% 0.04 85)) var(--lightningcss-dark, oklch(26% 0.05 85));
    --color-cat-science: var(--lightningcss-light, oklch(45% 0.14 275)) var(--lightningcss-dark, oklch(80% 0.11 275));
    --color-cat-science-tint: var(--lightningcss-light, oklch(94% 0.04 275))
      var(--lightningcss-dark, oklch(26% 0.05 275));
    --color-cat-opinion: var(--lightningcss-light, oklch(45% 0.02 0)) var(--lightningcss-dark, oklch(80% 0.02 0));
    --color-cat-opinion-tint: var(--lightningcss-light, oklch(94% 0.01 0)) var(--lightningcss-dark, oklch(26% 0.01 0));
    --font-display: "Newsreader Variable", "Iowan Old Style", "Georgia", "Times New Roman", serif;
    --font-arabic: "IBM Plex Sans Arabic", "Noto Sans Arabic", system-ui, sans-serif;
    --text-display: clamp(2.25rem, 1.6rem + 3vw, 4rem);
    --text-body-read: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
    --radius-full: 999px;
    --shadow-float: 0 1px 0 #0000000a, 0 12px 24px -12px #0000001a;
    --texture-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    --ease-spring: linear(
      0,
      0.006,
      0.025 2.8%,
      0.101 6.1%,
      0.539 18.9%,
      0.721 25.3%,
      0.849 31.5%,
      0.937 38.1%,
      0.968 41.8%,
      0.991 45.7%,
      1.006 50.1%,
      1.015 55%,
      1.017 63.9%,
      1.001
    );
    --dur-fast: 0.15s;
    --dur-base: 0.25s;
    --dur-slow: 0.4s;
    --texture-photo-brightness: 0.92;
    --texture-photo-contrast: 1.03;
    --texture-photo-dim: brightness(var(--texture-photo-brightness)) contrast(var(--texture-photo-contrast));
    --z-nav: 30;
    --z-toast: 50;
  }
}
@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;
    -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: -0.25em;
  }
  sup {
    top: -0.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;
  }
  :root {
    --lightningcss-light: initial;
    --lightningcss-dark: ;
    color-scheme: light dark;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --lightningcss-light: ;
      --lightningcss-dark: initial;
    }
  }
  [data-theme="light"] {
    --lightningcss-light: initial;
    --lightningcss-dark: ;
    color-scheme: light;
  }
  [data-theme="dark"] {
    --lightningcss-light: ;
    --lightningcss-dark: initial;
    color-scheme: dark;
  }
  html {
    font-family: var(--font-sans);
    font-optical-sizing: auto;
    background: var(--color-bg);
    color: var(--color-fg);
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-block-end: 6rem;
  }
  :lang(ar),
  :lang(fa) {
    font-family: var(--font-arabic);
    line-height: 1.7;
  }
  body {
    min-block-size: 100dvh;
    font-size: var(--text-base);
    -webkit-font-smoothing: antialiased;
    padding-block-end: env(safe-area-inset-bottom);
    line-height: 1.55;
  }
  html[lang="ar"] body {
    line-height: 1.7;
  }
  h1,
  h2,
  h3,
  h4 {
    text-wrap: balance;
    font-weight: 600;
    line-height: 1.15;
  }
  h1 {
    font-weight: 700;
  }
  .text-2xl,
  .text-3xl,
  .text-display {
    letter-spacing: -0.02em;
  }
  :lang(ar),
  :lang(ar) * {
    letter-spacing: 0 !important;
    text-transform: none !important;
  }
  p {
    text-wrap: pretty;
  }
  :focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
  }
  img,
  video {
    block-size: auto;
    max-inline-size: 100%;
  }
  @view-transition {
    navigation: auto;
  }
  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
    *,
    :before,
    :after {
      transition: none !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
    }
    ::view-transition-group(*) {
      animation: none !important;
    }
    ::view-transition-old(*) {
      animation: none !important;
    }
    ::view-transition-new(*) {
      animation: none !important;
    }
  }
  h1,
  .headline {
    font-family: var(--font-display);
    letter-spacing: -0.015em;
    font-weight: 600;
  }
  html[lang="ar"] h1,
  html[lang="ar"] .headline,
  html[lang="ar"] .wordmark {
    font-weight: 700;
    line-height: 1.35;
  }
  html[lang="ar"] :is(h2, h3, h4) {
    line-height: 1.4;
  }
  html[lang="ar"] :is(.prose, .max-w-prose) {
    max-inline-size: 60ch;
    line-height: 1.8;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) img:not([data-no-dim], [src$="\.svg"]) {
      filter: var(--texture-photo-dim);
    }
  }
  [data-theme="dark"] img:not([data-no-dim], [src$="\.svg"]) {
    filter: var(--texture-photo-dim);
  }
  :root {
    --scale-reading: 1;
  }
  html[data-reading-size="s"] {
    --scale-reading: 0.9;
  }
  html[data-reading-size="m"] {
    --scale-reading: 1;
  }
  html[data-reading-size="l"] {
    --scale-reading: 1.13;
  }
  html[data-reading-size="xl"] {
    --scale-reading: 1.26;
  }
}
@layer components {
  .wrap {
    inline-size: min(100% - 2rem, 72rem);
    margin-inline: auto;
  }
  .prose {
    max-inline-size: 68ch;
  }
  .prose > * + * {
    margin-block-start: 1em;
  }
  .prose h2 {
    font-size: var(--text-2xl);
    margin-block-start: 2em;
  }
  .prose h3 {
    font-size: var(--text-xl);
    margin-block-start: 1.5em;
  }
  .prose a {
    color: var(--color-brand);
    text-underline-offset: 0.15em;
    text-decoration: underline;
  }
  .prose ul,
  .prose ol {
    padding-inline-start: 1.5em;
  }
  .prose ul {
    list-style: outside;
  }
  .prose ol {
    list-style: decimal;
  }
  .prose li + li {
    margin-block-start: 0.35em;
  }
  .prose blockquote {
    border-inline-start: 3px solid var(--color-brand);
    font-size: var(--text-lg);
    color: var(--color-fg-muted);
    padding-inline-start: 1em;
    font-weight: 500;
  }
  .prose code,
  .prose pre,
  .prose kbd {
    font-family:
      ui-monospace,
      SF Mono,
      Menlo,
      Consolas,
      monospace;
    font-size: 0.9em;
  }
  .prose code,
  .prose kbd {
    border-radius: var(--radius-xs);
    background: var(--color-surface-2);
    padding: 0.1em 0.35em;
  }
  .prose pre {
    padding: calc(var(--spacing) * 4);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.6;
    overflow: auto;
  }
  .prose pre code {
    font-size: var(--text-sm);
    background: 0 0;
    padding: 0;
  }
  .prose table {
    inline-size: 100%;
    font-size: var(--text-sm);
    border-collapse: collapse;
  }
  .prose th,
  .prose td {
    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
    text-align: start;
    border-block-end: 1px solid var(--color-line);
  }
  .prose th {
    font-weight: 600;
  }
  .prose figcaption {
    font-size: var(--text-sm);
    color: var(--color-fg-muted);
  }
  .prose hr {
    border: 0;
    border-block-start: 1px solid var(--color-line);
  }
  .band {
    background: var(--color-surface);
    padding-block: calc(var(--spacing) * 12);
  }
  .skip-link {
    z-index: var(--z-toast);
    padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
    background: var(--color-brand);
    color: var(--color-on-brand);
    border-end-end-radius: var(--radius-md);
    font-weight: 600;
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
    translate: 0 -100%;
  }
  .skip-link:focus-visible {
    outline-offset: -2px;
    translate: 0;
  }
  .icon {
    flex: none;
    block-size: 1.25em;
    inline-size: 1.25em;
  }
  [dir="rtl"] .icon[data-mirror] {
    transform: scaleX(-1);
  }
  .btn {
    justify-content: center;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    min-block-size: 44px;
    padding-inline: calc(var(--spacing) * 5);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    white-space: nowrap;
    background: var(--color-brand);
    color: var(--color-on-brand);
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition:
      background var(--dur-fast) var(--ease-out),
      color var(--dur-fast) var(--ease-out),
      transform var(--dur-fast) var(--ease-out);
    font-weight: 600;
    line-height: 1.2;
    display: inline-flex;
  }
  .btn:hover {
    background: var(--color-brand-strong);
  }
  .btn:active {
    transform: scale(0.97);
  }
  .btn:disabled,
  .btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
  }
  .btn-secondary {
    background: var(--color-surface-2);
    color: var(--color-fg);
  }
  .btn-secondary:hover {
    background: var(--color-surface-3);
  }
  .btn-ghost {
    color: var(--color-fg);
    border: 1px solid var(--color-line);
    background: 0 0;
  }
  .btn-ghost:hover {
    background: var(--color-surface);
  }
  .btn-danger {
    background: var(--color-danger);
    color: var(--color-on-danger);
  }
  .btn-danger:hover {
    background: var(--lightningcss-light, #b1252a) var(--lightningcss-dark, #d3655f);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .btn-danger:hover {
      background: color-mix(in oklch, var(--color-danger) 85%, black);
    }
  }
  .btn-icon {
    flex: none;
    inline-size: 44px;
    padding-inline: 0;
  }
  .btn-sm {
    min-block-size: 36px;
    padding-inline: calc(var(--spacing) * 4);
    font-size: var(--text-xs);
  }
  .btn-sm.btn-icon {
    inline-size: 36px;
  }
  .btn-lg {
    min-block-size: 52px;
    padding-inline: calc(var(--spacing) * 7);
    font-size: var(--text-base);
  }
  .card {
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    overflow: clip;
  }
  .card-press {
    transition: transform var(--dur-fast) var(--ease-out);
  }
  .card-press:active {
    transform: scale(0.97);
  }
  .card-media {
    padding: 4px;
  }
  .card-media > img,
  .card-media > picture > img,
  .card-media > .media {
    border-radius: var(--radius-md);
    object-fit: cover;
    inline-size: 100%;
  }
  .chip {
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    min-block-size: 36px;
    padding-inline: calc(var(--spacing) * 3.5);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-full);
    background: var(--color-bg);
    color: var(--color-fg);
    font-size: var(--text-sm);
    white-space: nowrap;
    cursor: pointer;
    transition:
      background var(--dur-fast) var(--ease-out),
      border-color var(--dur-fast) var(--ease-out);
    font-weight: 500;
    display: inline-flex;
    position: relative;
  }
  .chip:hover {
    background: var(--color-surface);
  }
  .chip[aria-pressed="true"],
  .chip[aria-current] {
    background: var(--color-fg);
    border-color: var(--color-fg);
    color: var(--color-bg);
  }
  .chip:has(input:checked) {
    background: var(--color-fg);
    border-color: var(--color-fg);
    color: var(--color-bg);
  }
  .chip input {
    opacity: 0;
    pointer-events: none;
    block-size: 1px;
    inline-size: 1px;
    position: absolute;
  }
  .badge {
    align-items: center;
    gap: calc(var(--spacing) * 1);
    min-block-size: 22px;
    padding-inline: calc(var(--spacing) * 2);
    border-radius: var(--radius-full);
    background: var(--color-surface-2);
    color: var(--color-fg);
    font-size: var(--text-xs);
    white-space: nowrap;
    font-weight: 600;
    line-height: 1;
    display: inline-flex;
  }
  .badge-accent {
    background: var(--color-accent);
    color: var(--color-on-accent);
  }
  .badge-brand {
    background: var(--color-brand);
    color: var(--color-on-brand);
  }
  .badge-count {
    block-size: 20px;
    min-inline-size: 20px;
    padding-inline: calc(var(--spacing) * 1.5);
    border: 2px solid var(--color-bg);
    justify-content: center;
    position: absolute;
    inset-block-start: -2px;
    inset-inline-end: -2px;
  }
  .badge-count:empty,
  .badge-count[data-zero] {
    display: none;
  }
  .input {
    min-block-size: 48px;
    inline-size: 100%;
    padding-inline: calc(var(--spacing) * 4);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    color: var(--color-fg);
    font-size: max(16px, var(--text-base));
    text-align: start;
    transition:
      border-color var(--dur-fast) var(--ease-out),
      box-shadow var(--dur-fast) var(--ease-out);
    display: block;
  }
  .input::placeholder {
    color: var(--color-fg-subtle);
  }
  .input:focus-visible {
    border-color: var(--color-brand);
    outline: none;
    box-shadow: 0 0 0 3px var(--lightningcss-light, #532a7840) var(--lightningcss-dark, #cdaef240);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .input:focus-visible {
      box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-brand) 25%, transparent);
    }
  }
  .input:user-invalid {
    border-color: var(--color-danger);
  }
  textarea.input {
    min-block-size: 8rem;
    padding-block: calc(var(--spacing) * 3);
    resize: vertical;
  }
  textarea.input[data-autosize] {
    field-sizing: content;
    resize: none;
    min-block-size: 3rem;
  }
  .field {
    gap: calc(var(--spacing) * 1.5);
    display: grid;
  }
  .label {
    font-size: var(--text-sm);
    font-weight: 500;
  }
  .hint {
    font-size: var(--text-xs);
    color: var(--color-fg-muted);
  }
  .glass {
    background: var(--lightningcss-light, #fcfbfdd9) var(--lightningcss-dark, #0c0a0ed9);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .glass {
      background: color-mix(in oklch, var(--color-bg) 85%, transparent);
    }
  }
  .glass {
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
  }
  @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .glass {
      background: var(--color-bg);
    }
  }
  .header {
    z-index: var(--z-nav);
    border-block-end: 1px solid var(--color-line);
    position: sticky;
    inset-block-start: 0;
  }
  .nav-link {
    align-items: center;
    gap: calc(var(--spacing) * 1);
    min-block-size: 40px;
    padding-inline: calc(var(--spacing) * 3);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    color: var(--color-fg);
    transition: background var(--dur-fast) var(--ease-out);
    font-weight: 500;
    display: inline-flex;
  }
  .nav-link:hover,
  .nav-link[aria-current="page"],
  .nav-link[aria-expanded="true"] {
    background: var(--color-surface-2);
  }
  .tabbar {
    z-index: var(--z-nav);
    border-block-start: 1px solid var(--color-line);
    box-shadow: var(--shadow-float);
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    padding-block-end: env(safe-area-inset-bottom);
    display: grid;
    position: fixed;
    inset-block-end: 0;
    inset-inline: 0;
  }
  .tab {
    min-block-size: 56px;
    font-size: var(--text-xs);
    color: var(--color-fg-muted);
    transition:
      color var(--dur-fast) var(--ease-out),
      transform var(--dur-fast) var(--ease-out);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
    font-weight: 500;
    display: flex;
  }
  .tab:active {
    transform: scale(0.97);
  }
  .tab[aria-current="page"],
  .tab[aria-expanded="true"] {
    color: var(--color-brand);
  }
  .tab .icon {
    block-size: 1.5rem;
    inline-size: 1.5rem;
  }
  @media (width>=1024px) {
    .tabbar {
      display: none;
    }
  }
  .sheet {
    max-block-size: 92dvh;
    inline-size: 100%;
    max-inline-size: 100%;
    padding: calc(var(--spacing) * 4) calc(var(--spacing) * 4)
      max(calc(var(--spacing) * 4), env(safe-area-inset-bottom));
    background: var(--color-surface);
    color: var(--color-fg);
    box-shadow: var(--shadow-float);
    overscroll-behavior: contain;
    transition:
      translate var(--dur-slow) var(--ease-spring),
      overlay var(--dur-slow) allow-discrete,
      display var(--dur-slow) allow-discrete;
    border: 0;
    border-start-start-radius: var(--radius-xl);
    border-start-end-radius: var(--radius-xl);
    margin: 0;
    position: fixed;
    inset: auto 0 0;
    overflow: auto;
    translate: 0 100%;
  }
  .sheet[data-snap="half"] {
    block-size: 40dvh;
  }
  .sheet[data-snap="full"] {
    block-size: 92dvh;
  }
  .sheet[data-dragging] {
    transition: none;
  }
  :is(.sheet:popover-open, .sheet[open]) {
    translate: 0;
  }
  @starting-style {
    :is(.sheet:popover-open, .sheet[open]) {
      translate: 0 100%;
    }
  }
  .sheet::backdrop {
    transition:
      opacity var(--dur-slow) var(--ease-out),
      overlay var(--dur-slow) allow-discrete,
      display var(--dur-slow) allow-discrete;
    background: #0006;
  }
  .sheet-handle {
    border-radius: var(--radius-full);
    background: var(--color-surface-3);
    touch-action: none;
    block-size: 5px;
    inline-size: 2.5rem;
    margin-block-end: calc(var(--spacing) * 3);
    margin-inline: auto;
    display: block;
  }
  .sheet-head {
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    margin-block-end: calc(var(--spacing) * 3);
    display: flex;
  }
  @media (width>=768px) {
    .sheet {
      border-radius: var(--radius-xl);
      inline-size: min(100% - 2rem, 32rem);
      margin-inline: auto;
      inset-block-end: calc(var(--spacing) * 6);
      inset-inline: 0;
    }
    .sheet-handle {
      display: none;
    }
  }
  .menu-item {
    align-items: center;
    gap: calc(var(--spacing) * 3);
    min-block-size: 44px;
    padding-inline: calc(var(--spacing) * 3);
    border-radius: var(--radius-sm);
    color: var(--color-fg);
    transition: background var(--dur-fast) var(--ease-out);
    font-weight: 500;
    display: flex;
  }
  .menu-item:hover,
  .menu-item[aria-current="page"] {
    background: var(--color-surface-2);
  }
  .menu-item .icon {
    color: var(--color-fg-muted);
  }
  .menu-group-title {
    padding-inline: calc(var(--spacing) * 3);
    margin-block: calc(var(--spacing) * 3) calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-fg-subtle);
    font-weight: 600;
  }
  .drawer {
    block-size: 100dvh;
    max-block-size: 100dvh;
    inline-size: min(100%, 26rem);
    max-inline-size: 100%;
    padding: calc(var(--spacing) * 4);
    border: 0;
    border-inline-start: 1px solid var(--color-line);
    background: var(--color-surface);
    color: var(--color-fg);
    box-shadow: var(--shadow-float);
    overscroll-behavior: contain;
    transition:
      translate var(--dur-slow) var(--ease-spring),
      overlay var(--dur-slow) allow-discrete,
      display var(--dur-slow) allow-discrete;
    margin: 0;
    position: fixed;
    inset-block: 0;
    inset-inline: auto 0;
    overflow: auto;
    translate: 100%;
  }
  [dir="rtl"] .drawer {
    translate: -100%;
  }
  .drawer[open] {
    grid-template-rows: auto minmax(0, 1fr) auto;
    display: grid;
    translate: 0;
  }
  @starting-style {
    .drawer[open] {
      translate: 100%;
    }
  }
  @starting-style {
    [dir="rtl"] .drawer[open] {
      translate: -100%;
    }
  }
  .drawer::backdrop {
    background: #0006;
  }
  .modal {
    max-block-size: min(85dvh, 40rem);
    inline-size: min(100% - 2rem, 36rem);
    padding: calc(var(--spacing) * 4);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    color: var(--color-fg);
    box-shadow: var(--shadow-float);
    overscroll-behavior: contain;
    opacity: 0;
    transition:
      opacity var(--dur-base) var(--ease-out),
      scale var(--dur-base) var(--ease-out),
      overlay var(--dur-base) allow-discrete,
      display var(--dur-base) allow-discrete;
    margin: auto;
    inset: 0;
    scale: 0.97;
  }
  .modal[open] {
    opacity: 1;
    scale: 1;
  }
  @starting-style {
    .modal[open] {
      opacity: 0;
      scale: 0.97;
    }
  }
  .modal::backdrop {
    background: #0006;
  }
  @media not all and (width>=768px) {
    .modal-top {
      margin-block-start: calc(var(--spacing) * 4);
    }
  }
  .dropdown {
    min-inline-size: 16rem;
    padding: calc(var(--spacing) * 2);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    color: var(--color-fg);
    box-shadow: var(--shadow-float);
    opacity: 0;
    transition:
      opacity var(--dur-fast) var(--ease-out),
      translate var(--dur-fast) var(--ease-out),
      overlay var(--dur-fast) allow-discrete,
      display var(--dur-fast) allow-discrete;
    translate: 0 -4px;
  }
  .dropdown:popover-open {
    opacity: 1;
    translate: 0;
  }
  @starting-style {
    .dropdown:popover-open {
      opacity: 0;
      translate: 0 -4px;
    }
  }
  @supports (anchor-name: --a) {
    .dropdown-anchor {
      anchor-name: --dropdown;
    }
    .dropdown {
      position-anchor: --dropdown;
      position-area: block-end span-inline-end;
      position-try-fallbacks: flip-inline;
      margin: calc(var(--spacing) * 2) 0 0;
      position: fixed;
      inset: auto;
    }
  }
  @supports not (anchor-name: --a) {
    .dropdown {
      inline-size: min(100% - 2rem, 32rem);
      margin: 0 auto calc(var(--spacing) * 6);
      border-radius: var(--radius-xl);
      max-block-size: 85dvh;
      position: fixed;
      inset: auto 0 0;
      overflow: auto;
      translate: 0 8px;
    }
  }
  .actionbar {
    z-index: calc(var(--z-nav) - 1);
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
    border-block-start: 1px solid var(--color-line);
    box-shadow: var(--shadow-float);
    display: flex;
    position: sticky;
    inset-block-end: calc(56px + env(safe-area-inset-bottom));
  }
  @media (width>=1024px) {
    .actionbar {
      inset-block-end: 0;
    }
  }
  .toast-region {
    z-index: var(--z-toast);
    justify-items: center;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 4);
    pointer-events: none;
    display: grid;
    position: fixed;
    inset-block-end: calc(64px + env(safe-area-inset-bottom));
    inset-inline: 0;
  }
  @media (width>=1024px) {
    .toast-region {
      inset-block-end: calc(var(--spacing) * 6);
    }
  }
  .toast {
    align-items: center;
    gap: calc(var(--spacing) * 3);
    min-block-size: 44px;
    max-inline-size: 28rem;
    padding: calc(var(--spacing) * 2.5) calc(var(--spacing) * 4);
    border-radius: var(--radius-lg);
    background: var(--color-fg);
    color: var(--color-bg);
    font-size: var(--text-sm);
    box-shadow: var(--shadow-float);
    pointer-events: auto;
    animation: toast-in var(--dur-base) var(--ease-out);
    font-weight: 500;
    display: flex;
  }
  .toast[data-leaving] {
    animation: toast-out var(--dur-base) var(--ease-out) forwards;
  }
  .toast .btn {
    min-block-size: 32px;
    padding-inline: calc(var(--spacing) * 3);
    color: inherit;
    text-underline-offset: 0.15em;
    background: 0 0;
    text-decoration: underline;
  }
  @keyframes toast-in {
    0% {
      opacity: 0;
      translate: 0 8px;
    }
  }
  @keyframes toast-out {
    to {
      opacity: 0;
      translate: 0 8px;
    }
  }
  .scroller {
    gap: calc(var(--spacing) * 3);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-inline: calc(var(--spacing) * 4);
    scroll-padding-inline: calc(var(--spacing) * 4);
    display: flex;
    overflow-x: auto;
  }
  .scroller > * {
    scroll-snap-align: start;
    flex: none;
  }
  .dots {
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    display: flex;
  }
  .dots > button {
    border-radius: var(--radius-full);
    background: var(--color-surface-3);
    background-clip: content-box;
    block-size: 1.5rem;
    inline-size: 1.5rem;
    padding: 0.5rem;
  }
  .dots > button[aria-current] {
    background-color: var(--color-brand);
  }
  .hero {
    isolation: isolate;
    color: oklch(98% 0 0);
    position: relative;
    overflow: clip;
  }
  .hero-img {
    object-fit: cover;
    z-index: -2;
    block-size: 100%;
    inline-size: 100%;
    position: absolute;
    inset: 0;
  }
  .hero:before {
    content: "";
    z-index: -1;
    background: linear-gradient(#0000 0%, oklch(12% 0.02 262/0.55) 55%, oklch(12% 0.02 262/0.9) 100%);
    position: absolute;
    inset: 0;
  }
  .grain:after {
    content: "";
    z-index: 0;
    pointer-events: none;
    background-image: var(--texture-grain);
    mix-blend-mode: soft-light;
    opacity: 0.6;
    position: absolute;
    inset: 0;
  }
  .hero > .hero-body {
    z-index: 1;
    position: relative;
  }
  .on-scrim-muted {
    color: oklch(88% 0.005 262);
  }
  @supports (animation-timeline: view()) {
    .reveal {
      animation: linear both reveal;
      animation-timeline: view();
      animation-range: entry entry 40%;
    }
    @keyframes reveal {
      0% {
        opacity: 0;
        translate: 0 16px;
      }
      to {
        opacity: 1;
        translate: 0;
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .reveal {
        animation: none;
      }
    }
  }
  .stack > * + * {
    margin-block-start: var(--spacing-stack, calc(var(--spacing) * 4));
  }
  .stack-sm {
    --spacing-stack: calc(var(--spacing) * 2);
  }
  .stack-lg {
    --spacing-stack: calc(var(--spacing) * 8);
  }
  .cluster {
    align-items: center;
    gap: var(--spacing-cluster, calc(var(--spacing) * 3));
    flex-wrap: wrap;
    display: flex;
  }
  .full-bleed {
    inline-size: 100vw;
    margin-inline: calc(50% - 50vw);
  }
  .bento {
    gap: calc(var(--spacing) * 3);
    grid-auto-rows: minmax(8rem, auto);
    display: grid;
  }
  @media (width>=768px) {
    .bento {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .bento-wide {
      grid-column: span 2;
    }
    .bento-tall {
      grid-row: span 2;
    }
  }
  @media (width>=1024px) {
    .bento {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .promo {
    aspect-ratio: 16/5;
    border: 1px dashed var(--color-line);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    color: var(--color-fg-subtle);
    font-size: var(--text-sm);
    place-items: center;
    display: grid;
    overflow: clip;
  }
  .promo-img {
    object-fit: cover;
    block-size: 100%;
    inline-size: 100%;
  }
  @media (width>=768px) {
    .promo {
      aspect-ratio: 16/3;
    }
  }
  .btn-link {
    min-block-size: 44px;
    padding-inline: calc(var(--spacing) * 1);
    color: var(--color-brand);
    text-underline-offset: 0.15em;
    background: 0 0;
    text-decoration: underline;
  }
  .btn-link:hover {
    color: var(--color-brand-strong);
    background: 0 0;
  }
  .btn[aria-busy="true"] {
    pointer-events: none;
  }
  .btn[aria-busy="true"] > .icon {
    display: none;
  }
  .btn[aria-busy="true"]:before {
    content: "";
    border-radius: var(--radius-full);
    border: 2px solid;
    border-inline-end-color: #0000;
    flex: none;
    block-size: 1em;
    inline-size: 1em;
    animation: 0.8s linear infinite spin;
  }
  @keyframes spin {
    to {
      rotate: 1turn;
    }
  }
  .btn-group {
    display: inline-flex;
  }
  .btn-group > .btn {
    border-radius: 0;
  }
  .btn-group > .btn:first-child {
    border-start-start-radius: var(--radius-full);
    border-end-start-radius: var(--radius-full);
  }
  .btn-group > .btn:last-child {
    border-start-end-radius: var(--radius-full);
    border-end-end-radius: var(--radius-full);
  }
  .btn-group > .btn + .btn {
    border-inline-start: 1px solid;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .btn-group > .btn + .btn {
      border-inline-start: 1px solid color-mix(in oklch, currentcolor 20%, transparent);
    }
  }
  .btn-group > .btn-ghost + .btn-ghost {
    border-inline-start-width: 0;
  }
  .btn-group > .btn:focus-visible {
    z-index: 1;
    position: relative;
  }
  .split {
    position: relative;
  }
  @supports (anchor-name: --a) {
    .split > .split-anchor {
      anchor-name: --split;
    }
    .split > .dropdown {
      position-anchor: --split;
      position-area: block-end span-inline-start;
    }
  }
  .check {
    align-items: center;
    gap: calc(var(--spacing) * 3);
    cursor: pointer;
    min-block-size: 44px;
    display: flex;
  }
  .check > input[type="checkbox"],
  .check > input[type="radio"] {
    block-size: 1.25rem;
    inline-size: 1.25rem;
    accent-color: var(--color-brand);
    flex: none;
    margin: 0;
  }
  .switch {
    appearance: none;
    border-radius: var(--radius-full);
    background: var(--color-surface-3);
    cursor: pointer;
    block-size: 1.625rem;
    inline-size: 2.75rem;
    transition: background var(--dur-fast) var(--ease-out);
    flex: none;
    margin: 0;
    position: relative;
  }
  .switch:before {
    content: "";
    border-radius: var(--radius-full);
    background: var(--color-bg);
    block-size: 1.25rem;
    inline-size: 1.25rem;
    transition: translate var(--dur-fast) var(--ease-out);
    position: absolute;
    inset-block-start: 3px;
    inset-inline-start: 3px;
    box-shadow: 0 1px 2px #0003;
  }
  .switch:checked {
    background: var(--color-brand);
  }
  .switch:checked:before {
    translate: 1.125rem;
  }
  [dir="rtl"] .switch:checked:before {
    translate: -1.125rem;
  }
  .switch:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  input[type="range"].range {
    block-size: 44px;
    inline-size: 100%;
    accent-color: var(--color-brand);
    margin: 0;
  }
  .chip:has(input:focus-visible) {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
  }
  .chip:has(input:disabled) {
    opacity: 0.5;
    cursor: not-allowed;
  }
  .chip-remove {
    border-radius: var(--radius-full);
    block-size: 1.5rem;
    inline-size: 1.5rem;
    color: inherit;
    place-items: center;
    margin-inline-end: calc(var(--spacing) * -2);
    display: inline-grid;
  }
  .chip-remove:hover {
    background: currentColor;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .chip-remove:hover {
      background: color-mix(in oklch, currentcolor 15%, transparent);
    }
  }
  .chip-remove > svg {
    block-size: 1rem;
    inline-size: 1rem;
  }
  .segmented {
    border: 1px solid var(--color-line);
    border-radius: var(--radius-full);
    background: var(--color-surface);
    padding: 3px;
    display: inline-flex;
  }
  .segmented > label {
    min-block-size: 36px;
    padding-inline: calc(var(--spacing) * 4);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    color: var(--color-fg-muted);
    cursor: pointer;
    transition:
      background var(--dur-fast) var(--ease-out),
      color var(--dur-fast) var(--ease-out);
    align-items: center;
    font-weight: 500;
    display: inline-flex;
    position: relative;
  }
  .segmented > label:has(input:checked) {
    background: var(--color-bg);
    color: var(--color-fg);
    box-shadow: var(--shadow-float);
  }
  .segmented > label:has(input:focus-visible) {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
  }
  .segmented input {
    opacity: 0;
    pointer-events: none;
    block-size: 1px;
    inline-size: 1px;
    position: absolute;
  }
  .stepper {
    border: 1px solid var(--color-line);
    border-radius: var(--radius-full);
    background: var(--color-bg);
    align-items: stretch;
    block-size: 44px;
    display: inline-flex;
    overflow: clip;
  }
  .stepper > button {
    inline-size: 44px;
    color: var(--color-fg);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out);
    place-items: center;
    display: inline-grid;
  }
  .stepper > button:hover {
    background: var(--color-surface-2);
  }
  .stepper > button:disabled {
    color: var(--color-fg-subtle);
    cursor: not-allowed;
    background: 0 0;
  }
  .stepper > button:focus-visible {
    outline-offset: -2px;
  }
  .stepper > input {
    appearance: textfield;
    text-align: center;
    inline-size: 3rem;
    color: var(--color-fg);
    font-weight: 600;
    font-size: max(16px, var(--text-base));
    font-variant-numeric: tabular-nums;
    direction: ltr;
    background: 0 0;
  }
  .stepper > input::-webkit-outer-spin-button {
    appearance: none;
    margin: 0;
  }
  .stepper > input::-webkit-inner-spin-button {
    appearance: none;
    margin: 0;
  }
  .stepper > input:focus-visible {
    outline-offset: -2px;
  }
  input[type="file"].input {
    padding-block: calc(var(--spacing) * 1.5);
    cursor: pointer;
    padding-inline-start: calc(var(--spacing) * 1.5);
  }
  input[type="file"].input::file-selector-button {
    min-block-size: 36px;
    padding-inline: calc(var(--spacing) * 4);
    border-radius: var(--radius-full);
    background: var(--color-surface-2);
    color: var(--color-fg);
    font: inherit;
    font-size: var(--text-xs);
    cursor: pointer;
    border: 0;
    margin-inline-end: calc(var(--spacing) * 3);
    font-weight: 600;
  }
  select.input {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right calc(var(--spacing) * 3) center;
    background-size: 1.25rem;
    padding-inline-end: calc(var(--spacing) * 10);
  }
  [dir="rtl"] select.input {
    background-position: left calc(var(--spacing) * 3) center;
  }
  .error {
    gap: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    color: var(--color-danger);
    font-weight: 500;
    display: flex;
  }
  .error:empty {
    display: none;
  }
  .field[data-invalid] .input,
  .input[aria-invalid="true"] {
    border-color: var(--color-danger);
  }
  .field[data-valid] .input {
    border-color: var(--color-success);
  }
  .form-summary {
    padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
    border: 1px solid var(--color-danger);
    border-radius: var(--radius-md);
    background: var(--lightningcss-light, #f8ebed) var(--lightningcss-dark, #1f1316);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .form-summary {
      background: color-mix(in oklch, var(--color-danger) 8%, var(--color-bg));
    }
  }
  .form-summary {
    font-size: var(--text-sm);
  }
  .form-summary p {
    font-weight: 600;
  }
  .form-summary a {
    color: var(--color-danger);
    text-underline-offset: 0.15em;
    text-decoration: underline;
  }
  .fieldset {
    gap: calc(var(--spacing) * 2);
    padding: calc(var(--spacing) * 4);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    display: grid;
  }
  .fieldset > legend {
    padding-inline: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    font-weight: 600;
  }
  .stat-value {
    font-size: var(--text-3xl);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    line-height: 1;
  }
  .pricing [data-annual] {
    display: none;
  }
  .pricing:has(input[value="annual"]:checked) [data-annual] {
    display: revert;
  }
  .pricing:has(input[value="annual"]:checked) [data-monthly] {
    display: none;
  }
  .skeleton {
    border-radius: var(--radius-sm);
    background: linear-gradient(
      90deg,
      var(--color-surface-2) 25%,
      var(--color-surface-3) 50%,
      var(--color-surface-2) 75%
    );
    background-size: 200% 100%;
    animation: 1.4s linear infinite shimmer;
  }
  @keyframes shimmer {
    0% {
      background-position: 200% 0;
    }
    to {
      background-position: -200% 0;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .skeleton {
      background: var(--color-surface-2);
      animation: none;
    }
  }
  .lib {
    gap: calc(var(--spacing) * 8);
    align-items: start;
    display: grid;
  }
  .lib-toc {
    gap: 2px;
    display: grid;
  }
  .lib-toc a {
    min-block-size: 36px;
    padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 3);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    color: var(--color-fg-muted);
    transition: background var(--dur-fast) var(--ease-out);
    display: block;
  }
  .lib-toc a:hover {
    background: var(--color-surface-2);
    color: var(--color-fg);
  }
  .lib-body {
    gap: calc(var(--spacing) * 8);
    min-inline-size: 0;
    display: grid;
  }
  @media (width>=1024px) {
    .lib {
      gap: calc(var(--spacing) * 12);
      grid-template-columns: 13rem minmax(0, 1fr);
    }
    .lib-toc {
      max-block-size: calc(100dvh - 6rem);
      position: sticky;
      inset-block-start: 5rem;
      overflow: auto;
    }
  }
  .demo {
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
    min-inline-size: 0;
    scroll-margin-block-start: 5rem;
    overflow: clip;
  }
  .demo-head {
    padding: calc(var(--spacing) * 4) calc(var(--spacing) * 4) calc(var(--spacing) * 3);
  }
  .demo-note {
    font-size: var(--text-sm);
    color: var(--color-fg-muted);
    max-inline-size: 60ch;
    margin-block-start: calc(var(--spacing) * 1);
  }
  .demo-body {
    padding: calc(var(--spacing) * 4);
    border-block-start: 1px solid var(--color-line);
  }
  .demo-body[data-flush] {
    padding: 0;
  }
  .demo-body[data-tint] {
    background: var(--color-surface);
  }
  .snippet {
    border-block-start: 1px solid var(--color-line);
    background: var(--color-surface);
  }
  .snippet > summary {
    align-items: center;
    gap: calc(var(--spacing) * 2);
    min-block-size: 44px;
    padding-inline: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    color: var(--color-fg-muted);
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    font-weight: 500;
    list-style: none;
    display: flex;
  }
  .snippet > summary::-webkit-details-marker {
    display: none;
  }
  .snippet > summary > svg {
    transition: rotate var(--dur-fast) var(--ease-out);
  }
  .snippet[open] > summary > svg {
    rotate: 180deg;
  }
  .snippet-body {
    border-block-start: 1px solid var(--color-line);
    position: relative;
  }
  .snippet-copy {
    position: absolute;
    inset-block-start: calc(var(--spacing) * 2);
    inset-inline-end: calc(var(--spacing) * 2);
  }
  .snippet pre {
    max-inline-size: 100%;
    padding: calc(var(--spacing) * 4);
    font-family:
      ui-monospace,
      SF Mono,
      Menlo,
      Consolas,
      monospace;
    font-size: var(--text-xs);
    tab-size: 2;
    text-align: start;
    color: var(--color-fg);
    direction: ltr;
    margin: 0;
    padding-inline-end: calc(var(--spacing) * 24);
    line-height: 1.6;
    overflow: auto;
  }
  .swatch {
    border-radius: var(--radius-full);
    border: 1px solid var(--color-line);
    background: var(--color-surface-2);
    vertical-align: middle;
    block-size: 1.5rem;
    inline-size: 1.5rem;
    display: inline-block;
  }
  .token-table {
    inline-size: 100%;
    font-size: var(--text-sm);
    border-collapse: collapse;
  }
  .token-table th,
  .token-table td {
    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
    text-align: start;
    border-block-end: 1px solid var(--color-line);
    vertical-align: middle;
  }
  .token-table th {
    font-size: var(--text-xs);
    color: var(--color-fg-muted);
    font-weight: 600;
  }
  .token-table td code {
    font-family:
      ui-monospace,
      SF Mono,
      Menlo,
      Consolas,
      monospace;
    font-size: var(--text-xs);
    overflow-wrap: anywhere;
    direction: ltr;
    unicode-bidi: isolate;
  }
  .accent-btn > .swatch {
    background: var(--color-brand);
    border-color: #0000;
  }
  .accent-btn[aria-pressed="true"] {
    border-color: var(--color-fg);
  }
  .specimen:last-child {
    border-block-end: 0;
  }
  .specimen-meta {
    font-family:
      ui-monospace,
      SF Mono,
      Menlo,
      Consolas,
      monospace;
    font-size: var(--text-xs);
    color: var(--color-fg-subtle);
  }
  .cell {
    border-radius: var(--radius-sm);
    background: var(--color-surface-2);
    min-block-size: 3rem;
    font-size: var(--text-xs);
    color: var(--color-fg-muted);
    place-items: center;
    font-weight: 600;
    display: grid;
  }
  .appbar {
    align-items: center;
    gap: calc(var(--spacing) * 2);
    min-block-size: 56px;
    padding-inline: calc(var(--spacing) * 3);
    border-block-end: 1px solid var(--color-line);
    background: var(--color-bg);
    display: flex;
  }
  .appbar-title {
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-inline-size: 0;
    font-weight: 600;
    overflow: hidden;
  }
  .breadcrumb ol {
    align-items: center;
    gap: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    flex-wrap: wrap;
    display: flex;
  }
  .breadcrumb li {
    align-items: center;
    gap: calc(var(--spacing) * 1);
    min-block-size: 32px;
    display: inline-flex;
  }
  .breadcrumb a {
    color: var(--color-fg-muted);
  }
  .breadcrumb a:hover {
    color: var(--color-fg);
    text-underline-offset: 0.15em;
    text-decoration: underline;
  }
  .breadcrumb [aria-current="page"] {
    color: var(--color-fg);
    font-weight: 500;
  }
  .breadcrumb .icon {
    block-size: 1rem;
    inline-size: 1rem;
    color: var(--color-fg-subtle);
  }
  .pagination ul {
    justify-content: center;
    align-items: center;
    gap: calc(var(--spacing) * 1);
    flex-wrap: wrap;
    display: flex;
  }
  .pagination a,
  .pagination button,
  .pagination span {
    block-size: 44px;
    min-inline-size: 44px;
    padding-inline: calc(var(--spacing) * 2);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
    color: var(--color-fg);
    transition: background var(--dur-fast) var(--ease-out);
    place-items: center;
    font-weight: 500;
    display: inline-grid;
  }
  .pagination a:hover,
  .pagination button:not(:disabled):hover {
    background: var(--color-surface-2);
  }
  .pagination a[aria-current="page"],
  .pagination button[aria-current="page"] {
    background: var(--color-fg);
    color: var(--color-bg);
  }
  .pagination span {
    color: var(--color-fg-subtle);
  }
  .pagination a[aria-disabled="true"],
  .pagination button:disabled {
    opacity: 0.4;
    pointer-events: none;
  }
  .chip-rail {
    gap: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1);
  }
  .steps {
    align-items: flex-start;
    display: flex;
  }
  .steps > li {
    isolation: isolate;
    justify-items: center;
    gap: calc(var(--spacing) * 2);
    text-align: center;
    font-size: var(--text-xs);
    color: var(--color-fg-muted);
    flex: 1;
    font-weight: 500;
    display: grid;
    position: relative;
  }
  .steps > li:not(:first-child):before {
    content: "";
    z-index: -1;
    background: var(--color-line);
    block-size: 2px;
    inline-size: 100%;
    position: absolute;
    inset-block-start: 1rem;
    inset-inline-end: 50%;
  }
  .step-marker {
    border: 2px solid var(--color-line);
    border-radius: var(--radius-full);
    background: var(--color-bg);
    font-variant-numeric: tabular-nums;
    block-size: 2rem;
    inline-size: 2rem;
    color: var(--color-fg-muted);
    place-items: center;
    font-weight: 600;
    display: grid;
  }
  .step-marker .icon {
    block-size: 1rem;
    inline-size: 1rem;
  }
  .steps > li[data-done] .step-marker {
    border-color: var(--color-brand);
    background: var(--color-brand);
    color: var(--color-on-brand);
  }
  .steps > li[data-done]:before,
  .steps > li[aria-current="step"]:before {
    background: var(--color-brand);
  }
  .steps > li[aria-current="step"] {
    color: var(--color-fg);
    font-weight: 600;
  }
  .steps > li[aria-current="step"] .step-marker {
    border-color: var(--color-brand);
    color: var(--color-brand);
  }
  .progress {
    appearance: none;
    border-radius: var(--radius-full);
    background: var(--color-surface-3);
    border: 0;
    block-size: 6px;
    inline-size: 100%;
    overflow: clip;
  }
  .progress::-webkit-progress-bar {
    background: var(--color-surface-3);
    border-radius: var(--radius-full);
  }
  .progress::-webkit-progress-value {
    background: var(--color-brand);
    border-radius: var(--radius-full);
    transition: inline-size var(--dur-base) var(--ease-out);
  }
  .progress::-moz-progress-bar {
    background: var(--color-brand);
    border-radius: var(--radius-full);
  }
  .progress:indeterminate::-webkit-progress-value {
    inline-size: 40%;
    animation: indeterminate 1.4s var(--ease-out) infinite;
  }
  @keyframes indeterminate {
    0% {
      translate: -100%;
    }
    to {
      translate: 250%;
    }
  }
  .spinner {
    border: 2px solid var(--color-surface-3);
    border-block-start-color: var(--color-brand);
    border-radius: var(--radius-full);
    block-size: 1.5rem;
    inline-size: 1.5rem;
    animation: 0.8s linear infinite spin;
    display: inline-block;
  }
  @media (prefers-reduced-motion: reduce) {
    .progress:indeterminate::-webkit-progress-value {
      opacity: 0.5;
      inline-size: 100%;
      animation: none;
    }
  }
  .anchored {
    display: inline-block;
    position: relative;
  }
  @supports (anchor-name: --a) {
    .anchored > .anchored-btn {
      anchor-name: --anchored;
    }
    .anchored > .dropdown {
      position-anchor: --anchored;
      position-area: block-end span-inline-end;
    }
  }
  .demo-body .tabbar {
    box-shadow: none;
    padding-block-end: 0;
    display: grid;
    position: static;
  }
  .demo-body .skip-link {
    border-radius: var(--radius-full);
    display: inline-block;
    position: static;
    translate: none;
  }
  .accordion {
    border-block-start: 1px solid var(--color-line);
  }
  .accordion > details {
    border-block-end: 1px solid var(--color-line);
  }
  .accordion summary {
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    min-block-size: 52px;
    padding-block: calc(var(--spacing) * 3);
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    font-weight: 600;
    list-style: none;
    display: flex;
  }
  .accordion summary::-webkit-details-marker {
    display: none;
  }
  .accordion summary > .icon {
    color: var(--color-fg-muted);
    transition: rotate var(--dur-fast) var(--ease-out);
  }
  .accordion details[open] > summary > .icon {
    rotate: 180deg;
  }
  .accordion-body {
    padding-block: 0 calc(var(--spacing) * 4);
    max-inline-size: 65ch;
    color: var(--color-fg-muted);
  }
  .tabs-list {
    gap: calc(var(--spacing) * 1);
    border-block-end: 1px solid var(--color-line);
    scrollbar-width: none;
    margin-block-end: calc(var(--spacing) * 4);
    display: flex;
    overflow-x: auto;
  }
  .tabs-list a {
    align-items: center;
    gap: calc(var(--spacing) * 2);
    min-block-size: 44px;
    padding-inline: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    white-space: nowrap;
    color: var(--color-fg-muted);
    transition:
      color var(--dur-fast) var(--ease-out),
      border-color var(--dur-fast) var(--ease-out);
    border-block-end: 2px solid #0000;
    margin-block-end: -1px;
    font-weight: 500;
    display: inline-flex;
  }
  .tabs-list a:hover {
    color: var(--color-fg);
  }
  .tabs-list a[aria-selected="true"] {
    color: var(--color-fg);
    border-color: var(--color-brand);
  }
  .tabs-list a:focus-visible {
    outline-offset: -2px;
  }
  .tabs-title {
    font-size: var(--text-lg);
    margin-block-end: calc(var(--spacing) * 2);
  }
  .tabs[data-ready] .tabs-title {
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
    block-size: 1px;
    inline-size: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }
  .tabs-panel {
    color: var(--color-fg-muted);
    max-inline-size: 65ch;
  }
  .tabs-panel:focus-visible {
    outline-offset: 4px;
  }
  .view-list {
    gap: calc(var(--spacing) * 2);
    display: grid;
  }
  .view:has(input[value="grid"]:checked) .view-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .view:has(input[value="grid"]:checked) .view-item {
    flex-direction: column;
    align-items: stretch;
  }
  .view:has(input[value="grid"]:checked) .view-item img {
    inline-size: 100%;
  }
  .view-item {
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding: calc(var(--spacing) * 1);
    display: flex;
  }
  .view-item img {
    border-radius: var(--radius-md);
    aspect-ratio: 1;
    object-fit: cover;
    inline-size: 4rem;
  }
  .show-more > summary {
    align-items: center;
    gap: calc(var(--spacing) * 1);
    min-block-size: 44px;
    font-size: var(--text-sm);
    color: var(--color-brand);
    cursor: pointer;
    font-weight: 600;
    list-style: none;
    display: inline-flex;
  }
  .show-more > summary::-webkit-details-marker {
    display: none;
  }
  .show-more > summary > .icon {
    transition: rotate var(--dur-fast) var(--ease-out);
  }
  .show-more[open] > summary > .icon {
    rotate: 180deg;
  }
  .show-more[open] > summary > [data-closed],
  .show-more:not([open]) > summary > [data-open] {
    display: none;
  }
  .toast-error {
    background: var(--color-danger);
    color: var(--color-on-danger);
  }
  .toast-success {
    background: var(--color-success);
    color: var(--color-on-success);
  }
  .banner {
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
    border-radius: var(--radius-lg);
    background: var(--color-brand);
    color: var(--color-on-brand);
    font-size: var(--text-sm);
    font-weight: 500;
    display: flex;
  }
  .banner a {
    text-underline-offset: 0.15em;
    text-decoration: underline;
  }
  .banner .btn-icon {
    background: var(--lightningcss-light, #fcfcfc26) var(--lightningcss-dark, #160c2026);
    margin-inline-start: auto;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .banner .btn-icon {
      background: color-mix(in oklch, var(--color-on-brand) 15%, transparent);
    }
  }
  .banner .btn-icon {
    color: inherit;
  }
  .banner .btn-icon:hover {
    background: var(--lightningcss-light, #fcfcfc40) var(--lightningcss-dark, #160c2040);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .banner .btn-icon:hover {
      background: color-mix(in oklch, var(--color-on-brand) 25%, transparent);
    }
  }
  .cookie {
    inset: auto 0 calc(64px + env(safe-area-inset-bottom));
    inline-size: min(100% - 2rem, 28rem);
    padding: calc(var(--spacing) * 4);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    color: var(--color-fg);
    box-shadow: var(--shadow-float);
    font-size: var(--text-sm);
    margin-inline: auto;
    position: fixed;
  }
  .cookie p {
    color: var(--color-fg-muted);
  }
  .cookie a {
    color: var(--color-brand);
    text-underline-offset: 0.15em;
    text-decoration: underline;
  }
  @media (width>=1024px) {
    .cookie {
      inset-block-end: calc(var(--spacing) * 6);
      inset-inline: auto calc(var(--spacing) * 6);
      margin-inline: 0;
    }
  }
  .alert {
    gap: calc(var(--spacing) * 3);
    padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
    border: 1px solid
      var(--color-alert, var(--lightningcss-light, oklch(17% 0.01 305)) var(--lightningcss-dark, oklch(95% 0.004 305)));
    display: flex;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .alert {
      border: 1px solid color-mix(in oklch, var(--color-alert, var(--color-fg)) 35%, transparent);
    }
  }
  .alert {
    border-inline-start: 3px solid var(--color-alert, var(--color-fg));
    border-radius: var(--radius-md);
    background: var(
      --color-alert,
      var(--lightningcss-light, oklch(17% 0.01 305)) var(--lightningcss-dark, oklch(95% 0.004 305))
    );
  }
  @supports (color: color-mix(in lab, red, red)) {
    .alert {
      background: color-mix(in oklch, var(--color-alert, var(--color-fg)) 7%, var(--color-bg));
    }
  }
  .alert {
    font-size: var(--text-sm);
  }
  .alert > .icon {
    color: var(--color-alert, var(--color-fg));
    margin-block-start: 0.15em;
  }
  .alert-title {
    font-weight: 600;
  }
  .alert p {
    color: var(--color-fg-muted);
  }
  .alert-info {
    --color-alert: var(--color-brand);
  }
  .alert-success {
    --color-alert: var(--color-success);
  }
  .alert-warning {
    --color-alert: var(--color-warning);
  }
  .alert-danger {
    --color-alert: var(--color-danger);
  }
  .table {
    inline-size: 100%;
    font-size: var(--text-sm);
    border-collapse: collapse;
  }
  .table caption {
    text-align: start;
    padding-block-end: calc(var(--spacing) * 3);
    font-weight: 600;
  }
  .table th,
  .table td {
    padding: calc(var(--spacing) * 2.5) calc(var(--spacing) * 3);
    text-align: start;
    vertical-align: middle;
    border-block-end: 1px solid var(--color-line);
  }
  .table thead th {
    font-size: var(--text-xs);
    color: var(--color-fg-muted);
    white-space: nowrap;
    font-weight: 600;
  }
  .table tbody th {
    font-weight: 500;
  }
  .table tbody tr:last-child > * {
    border-block-end: 0;
  }
  .table .num {
    text-align: end;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .table tfoot th,
  .table tfoot td {
    border-block-start: 2px solid var(--color-line);
    border-block-end: 0;
    font-weight: 600;
  }
  .table th[data-sort] {
    padding: 0;
  }
  .table th[data-sort] > button {
    align-items: center;
    gap: calc(var(--spacing) * 1);
    min-block-size: 44px;
    inline-size: 100%;
    padding-inline: calc(var(--spacing) * 3);
    font: inherit;
    color: inherit;
    text-align: start;
    cursor: pointer;
    display: inline-flex;
  }
  .table th[data-sort].num > button {
    justify-content: flex-end;
  }
  .table th[data-sort] > button:hover {
    color: var(--color-fg);
  }
  .table th[data-sort] .icon {
    block-size: 1rem;
    inline-size: 1rem;
    color: var(--color-fg-subtle);
  }
  .table th[aria-sort="ascending"] > button,
  .table th[aria-sort="descending"] > button,
  .table th[aria-sort="ascending"] .icon,
  .table th[aria-sort="descending"] .icon {
    color: var(--color-brand);
  }
  .table-scroll {
    overscroll-behavior-x: contain;
    max-inline-size: 100%;
    overflow-x: auto;
  }
  .table-scroll:focus-visible {
    outline-offset: -2px;
  }
  .table-sticky th:first-child,
  .table-sticky td:first-child {
    z-index: 1;
    background: var(--color-bg);
    border-inline-end: 1px solid var(--color-line);
    position: sticky;
    inset-inline-start: 0;
  }
  .table-sticky td,
  .table-sticky th {
    white-space: nowrap;
  }
  @media not all and (width>=768px) {
    .table-stack thead {
      clip-path: inset(50%);
      block-size: 1px;
      inline-size: 1px;
      position: absolute;
      overflow: hidden;
    }
    .table-stack tr {
      padding-block: calc(var(--spacing) * 2);
      border-block-end: 1px solid var(--color-line);
      display: block;
    }
    .table-stack tbody tr:last-child {
      border-block-end: 0;
    }
    .table-stack td,
    .table-stack tbody th {
      justify-content: space-between;
      gap: calc(var(--spacing) * 4);
      padding: calc(var(--spacing) * 1.5) 0;
      text-align: end;
      border: 0;
      display: flex;
    }
    .table-stack td:before,
    .table-stack tbody th:before {
      content: attr(data-label);
      color: var(--color-fg-muted);
      text-align: start;
      flex: none;
      font-weight: 500;
    }
    .table-stack tbody th {
      font-weight: 600;
    }
  }
  .table-compare th,
  .table-compare td {
    text-align: center;
  }
  .table-compare th:first-child,
  .table-compare td:first-child {
    text-align: start;
  }
  .table-compare .icon {
    vertical-align: middle;
    block-size: 1.25rem;
    inline-size: 1.25rem;
  }
  .table-compare .yes {
    color: var(--color-success);
  }
  .table-compare .no {
    color: var(--color-fg-subtle);
  }
  .icon-grid {
    gap: calc(var(--spacing) * 2);
    grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
    display: grid;
  }
  .icon-grid > li {
    justify-items: center;
    gap: calc(var(--spacing) * 2);
    padding: calc(var(--spacing) * 3) calc(var(--spacing) * 1);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    text-align: center;
    display: grid;
  }
  .icon-grid > li > .icon {
    block-size: 1.5rem;
    inline-size: 1.5rem;
  }
  .icon-grid code {
    color: var(--color-fg-muted);
    overflow-wrap: anywhere;
    direction: ltr;
    unicode-bidi: isolate;
    font-family:
      ui-monospace,
      SF Mono,
      Menlo,
      Consolas,
      monospace;
    font-size: 11px;
  }
  .carousel-nav {
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 4);
    margin-block-start: calc(var(--spacing) * 3);
    display: flex;
  }
  .scroller:focus-visible {
    outline-offset: -2px;
  }
  .scroller-center {
    scroll-padding-inline: 0;
  }
  .scroller-center > * {
    scroll-snap-align: center;
    flex-basis: min(85%, 26rem);
  }
  .scroller-full {
    gap: 0;
    padding-inline: 0;
    scroll-padding-inline: 0;
  }
  .scroller-full > * {
    flex-basis: 100%;
  }
  .thumbs {
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 4);
    scrollbar-width: none;
    margin-block-start: calc(var(--spacing) * 3);
    display: flex;
    overflow-x: auto;
  }
  .thumbs button {
    border-radius: var(--radius-md);
    cursor: pointer;
    inline-size: 4rem;
    transition: border-color var(--dur-fast) var(--ease-out);
    border: 2px solid #0000;
    flex: none;
    padding: 2px;
    display: block;
  }
  .thumbs button > img {
    border-radius: var(--radius-sm);
    aspect-ratio: 1;
    object-fit: cover;
  }
  .thumbs button[aria-current] {
    border-color: var(--color-fg);
  }
  .dots > button:focus-visible {
    outline-offset: 0;
  }
  .counter {
    padding: calc(var(--spacing) * 1) calc(var(--spacing) * 2.5);
    border-radius: var(--radius-full);
    background: var(--lightningcss-light, #100e13b3) var(--lightningcss-dark, #efeef1b3);
    position: absolute;
    inset-block-end: calc(var(--spacing) * 3);
    inset-inline-end: calc(var(--spacing) * 3);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .counter {
      background: color-mix(in oklch, var(--color-fg) 70%, transparent);
    }
  }
  .counter {
    color: var(--color-bg);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    direction: ltr;
    font-weight: 600;
  }
  .media {
    border-radius: var(--radius-md);
    background: var(--color-surface-2);
    block-size: auto;
    inline-size: 100%;
    display: block;
  }
  .ratio {
    aspect-ratio: var(--ratio, 16 / 9);
    border-radius: var(--radius-md);
    background: var(--color-surface-2);
    position: relative;
    overflow: clip;
  }
  .ratio > img,
  .ratio > video,
  .ratio > picture > img,
  .ratio > iframe {
    object-fit: cover;
    block-size: 100%;
    inline-size: 100%;
    position: absolute;
    inset: 0;
  }
  .ratio-square {
    --ratio: 1;
  }
  .ratio-standard {
    --ratio: 4 / 3;
  }
  .ratio-video {
    --ratio: 16 / 9;
  }
  .ratio-portrait {
    --ratio: 4 / 5;
  }
  .ratio-label {
    padding: calc(var(--spacing) * 0.5) calc(var(--spacing) * 2);
    border-radius: var(--radius-full);
    background: var(--lightningcss-light, #100e13b3) var(--lightningcss-dark, #efeef1b3);
    position: absolute;
    inset-block-end: calc(var(--spacing) * 2);
    inset-inline-start: calc(var(--spacing) * 2);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .ratio-label {
      background: color-mix(in oklch, var(--color-fg) 70%, transparent);
    }
  }
  .ratio-label {
    color: var(--color-bg);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    direction: ltr;
    font-weight: 600;
  }
  .anim {
    inline-size: min(100%, 20rem);
    position: relative;
  }
  .anim > .media {
    aspect-ratio: 1;
    object-fit: cover;
  }
  .anim-toggle {
    position: absolute;
    inset-block-end: calc(var(--spacing) * 2);
    inset-inline-end: calc(var(--spacing) * 2);
  }
  .icon-pause,
  [data-playing] .icon-play {
    display: none;
  }
  [data-playing] .icon-pause {
    display: block;
  }
  .player {
    gap: calc(var(--spacing) * 3);
    padding: calc(var(--spacing) * 3);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    grid-template-columns: 4.5rem minmax(0, 1fr) auto;
    align-items: center;
    display: grid;
  }
  .player-cover {
    aspect-ratio: 1;
    border-radius: var(--radius-md);
    object-fit: cover;
    inline-size: 4.5rem;
  }
  .player-body {
    min-inline-size: 0;
  }
  .player audio {
    inline-size: 100%;
    margin-block-start: calc(var(--spacing) * 2);
    display: block;
  }
  .player-toggle {
    inline-size: 52px;
  }
  @media not all and (width>=40rem) {
    .player {
      grid-template-columns: 4rem minmax(0, 1fr) auto;
    }
    .player-cover {
      inline-size: 4rem;
    }
    .player audio {
      grid-column: 1/-1;
      margin-block-start: 0;
    }
  }
  .thumb {
    border-radius: var(--radius-md);
    background: var(--color-surface-2);
    display: block;
    position: relative;
    overflow: clip;
  }
  .thumb > img {
    aspect-ratio: 4/3;
    object-fit: cover;
    inline-size: 100%;
    transition: scale var(--dur-slow) var(--ease-out);
  }
  .thumb:hover > img {
    scale: 1.03;
  }
  .thumb-zoom {
    padding: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-full);
    block-size: 2rem;
    inline-size: 2rem;
    background: var(--lightningcss-light, #100e13b3) var(--lightningcss-dark, #efeef1b3);
    position: absolute;
    inset-block-end: calc(var(--spacing) * 2);
    inset-inline-end: calc(var(--spacing) * 2);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .thumb-zoom {
      background: color-mix(in oklch, var(--color-fg) 70%, transparent);
    }
  }
  .thumb-zoom {
    color: var(--color-bg);
  }
  .lightbox {
    color: oklch(98% 0 0);
    opacity: 0;
    block-size: 100%;
    max-block-size: none;
    inline-size: 100%;
    max-inline-size: none;
    transition:
      opacity var(--dur-base) var(--ease-out),
      overlay var(--dur-base) allow-discrete,
      display var(--dur-base) allow-discrete;
    background: oklch(10% 0.01 262);
    border: 0;
    margin: 0;
    padding: 0;
    position: fixed;
    inset: 0;
  }
  .lightbox[open] {
    opacity: 1;
  }
  @starting-style {
    .lightbox[open] {
      opacity: 0;
    }
  }
  .lightbox::backdrop {
    background: oklch(10% 0.01 262/0.85);
  }
  .lightbox-track {
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    block-size: 100%;
    display: flex;
    overflow-x: auto;
  }
  .lightbox-track > li {
    block-size: 100%;
    padding: calc(var(--spacing) * 14) calc(var(--spacing) * 2) calc(var(--spacing) * 18);
    scroll-snap-align: start;
    scroll-snap-stop: always;
    flex: 0 0 100%;
    place-items: center;
    display: grid;
  }
  .lightbox-track img {
    object-fit: contain;
    border-radius: var(--radius-sm);
    max-block-size: 100%;
    max-inline-size: 100%;
  }
  .lightbox-content {
    max-block-size: 100%;
    inline-size: min(100%, 36rem);
    padding: calc(var(--spacing) * 5);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    color: var(--color-fg);
    overscroll-behavior: contain;
    overflow: auto;
  }
  .lightbox .btn {
    z-index: 1;
    color: inherit;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    background: oklch(98% 0 0/0.12);
    position: absolute;
  }
  .lightbox .btn:hover {
    background: oklch(98% 0 0/0.24);
  }
  .lightbox-close {
    inset-block-start: max(calc(var(--spacing) * 3), env(safe-area-inset-top));
    inset-inline-end: calc(var(--spacing) * 3);
  }
  .lightbox-prev,
  .lightbox-next {
    inset-block-end: max(calc(var(--spacing) * 4), env(safe-area-inset-bottom));
  }
  .lightbox-prev {
    inset-inline-start: calc(var(--spacing) * 3);
  }
  .lightbox-next {
    inset-inline-end: calc(var(--spacing) * 3);
  }
  .lightbox-counter {
    inset-block: max(calc(var(--spacing) * 5), env(safe-area-inset-top)) auto;
    inset-inline: calc(var(--spacing) * 4) auto;
    color: inherit;
    background: oklch(98% 0 0/0.12);
  }
  .lightbox-caption {
    inset-inline: calc(var(--spacing) * 16);
    text-align: center;
    font-size: var(--text-sm);
    color: oklch(88% 0.005 262);
    text-wrap: balance;
    margin: 0;
    position: absolute;
    inset-block-end: max(calc(var(--spacing) * 6), env(safe-area-inset-bottom));
  }
  @media (width>=64rem) {
    .lightbox-prev,
    .lightbox-next {
      block-size: 44px;
      margin-block: auto;
      inset-block: 0;
    }
    .lightbox-caption {
      inset-inline: calc(var(--spacing) * 20);
    }
  }
  .facade {
    aspect-ratio: 16/9;
    background: var(--color-surface-2);
    color: oklch(98% 0 0);
    isolation: isolate;
    display: grid;
    position: relative;
    overflow: clip;
  }
  .facade > picture,
  .facade > picture > img,
  .facade > iframe {
    object-fit: cover;
    border: 0;
    block-size: 100%;
    inline-size: 100%;
    position: absolute;
    inset: 0;
  }
  .facade:after {
    content: "";
    pointer-events: none;
    background: linear-gradient(#0000 55%, oklch(12% 0.02 262/0.85) 100%);
    position: absolute;
    inset: 0;
  }
  .facade[data-loaded]:after {
    display: none;
  }
  .facade-badge,
  .facade-title,
  .facade-note,
  .facade-play {
    z-index: 1;
    position: relative;
  }
  .facade-badge {
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    padding: calc(var(--spacing) * 1) calc(var(--spacing) * 2.5);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    background: oklch(10% 0.01 262/0.6);
    font-weight: 600;
    display: inline-flex;
    position: absolute;
    inset-block-start: calc(var(--spacing) * 3);
    inset-inline-start: calc(var(--spacing) * 3);
  }
  .facade-play {
    place-self: center;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    min-block-size: 52px;
    padding-inline: calc(var(--spacing) * 6);
    border-radius: var(--radius-full);
    background: var(--color-brand);
    color: var(--color-on-brand);
    font-size: var(--text-sm);
    box-shadow: var(--shadow-float);
    cursor: pointer;
    transition:
      background var(--dur-fast) var(--ease-out),
      transform var(--dur-fast) var(--ease-out);
    font-weight: 600;
    display: inline-flex;
  }
  .facade-play:hover {
    background: var(--color-brand-strong);
  }
  .facade-play:active {
    transform: scale(0.97);
  }
  .facade-play:focus-visible {
    outline-offset: 3px;
    outline: 2px solid oklch(98% 0 0);
  }
  .facade-title,
  .facade-note {
    inset-inline: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    margin: 0;
    position: absolute;
  }
  .facade-title {
    text-wrap: balance;
    font-weight: 600;
    inset-block-end: calc(var(--spacing) * 3);
  }
  .facade-note {
    color: oklch(88% 0.005 262);
    font-size: var(--text-xs);
    inset-block-end: calc(var(--spacing) * 9);
  }
  @media not all and (width>=40rem) {
    .facade-note {
      inset-block: calc(var(--spacing) * 12) auto;
    }
  }
  .post {
    gap: calc(var(--spacing) * 3);
    block-size: 100%;
    padding: calc(var(--spacing) * 4);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    margin: 0;
    display: grid;
  }
  .post-head {
    align-items: center;
    gap: calc(var(--spacing) * 3);
    display: flex;
  }
  .post-avatar {
    border-radius: var(--radius-full);
    object-fit: cover;
    flex: none;
    block-size: 2.5rem;
    inline-size: 2.5rem;
  }
  .post-brand {
    block-size: 1.5rem;
    inline-size: 1.5rem;
    color: var(--color-fg-muted);
    margin-inline-start: auto;
  }
  .post-text {
    font-size: var(--text-base);
    overflow-wrap: anywhere;
    line-height: 1.5;
  }
  .post-media {
    border-radius: var(--radius-md);
    object-fit: cover;
    block-size: auto;
    inline-size: 100%;
  }
  .post-foot {
    align-items: center;
    gap: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    color: var(--color-fg-muted);
    flex-wrap: wrap;
    margin-block-start: auto;
    display: flex;
  }
  .post-link {
    color: var(--color-brand);
    margin-inline-start: auto;
    font-weight: 600;
  }
  .post-link:hover {
    text-decoration: underline;
  }
  .share {
    gap: calc(var(--spacing) * 2);
    flex-wrap: wrap;
    display: flex;
  }
  .follow {
    gap: calc(var(--spacing) * 2);
    display: grid;
  }
  @media (width>=40rem) {
    .follow {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .follow-item {
    align-items: center;
    gap: calc(var(--spacing) * 3);
    min-block-size: 60px;
    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    transition: background var(--dur-fast) var(--ease-out);
    display: flex;
  }
  .follow-item:hover {
    background: var(--color-surface-2);
  }
  .follow-item > .icon {
    block-size: 1.5rem;
    inline-size: 1.5rem;
  }
  .follow-body {
    flex: 1;
    min-inline-size: 0;
    display: grid;
  }
  .rhythm > * + * {
    margin-block-start: calc(var(--spacing) * 12);
  }
  @media (width>=768px) {
    .rhythm > * + * {
      margin-block-start: calc(var(--spacing) * 16);
    }
  }
  main:has(> .band:last-child) + footer {
    margin-block-start: 0;
  }
  .eyebrow {
    font-size: var(--text-sm);
    color: var(--color-brand);
    font-weight: 600;
  }
  .actionbar-float {
    background: var(--color-bg);
    padding-block-end: calc(var(--spacing) * 3 + env(safe-area-inset-bottom));
    position: fixed;
    inset-inline: 0;
  }
  @media (width>=1024px) {
    .actionbar-float {
      display: none;
    }
  }
  .portrait > .card-media > picture > img {
    aspect-ratio: 4/5;
  }
  .service-media {
    margin: calc(var(--spacing) * -5) calc(var(--spacing) * -5) 0;
    border-start-start-radius: inherit;
    border-start-end-radius: inherit;
    overflow: clip;
  }
  .service-media img {
    object-fit: cover;
    block-size: 100%;
    max-block-size: 14rem;
    inline-size: 100%;
  }
  .channel {
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding: calc(var(--spacing) * 4);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
    color: inherit;
    transition: background-color var(--dur-fast) var(--ease-out);
    display: flex;
  }
  .channel:hover {
    background: var(--color-surface);
  }
  .channel:active {
    scale: 0.97;
  }
  .channel > .icon {
    block-size: 1.5rem;
    inline-size: 1.5rem;
    color: var(--color-brand);
    flex: none;
  }
  .hours td:last-child,
  .hours .num {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .reading-progress {
    z-index: calc(var(--z-nav) + 1);
    background: var(--color-brand);
    transform-origin: 0;
    pointer-events: none;
    block-size: 3px;
    inline-size: 100%;
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
    scale: 0 1;
  }
  [dir="rtl"] .reading-progress {
    transform-origin: 100%;
  }
  @supports (animation-timeline: scroll()) {
    .reading-progress {
      animation: linear both reading-progress;
      animation-timeline: scroll(root);
    }
    @keyframes reading-progress {
      0% {
        scale: 0 1;
      }
      to {
        scale: 1;
      }
    }
  }
  [data-vt] {
    view-transition-name: attr(data-vt type(<custom-ident>));
  }
  .article-meta {
    align-items: center;
    gap: calc(var(--spacing) * 3);
    margin-block-start: calc(var(--spacing) * 5);
    display: flex;
  }
  .avatar {
    border-radius: var(--radius-full);
    object-fit: cover;
    flex: none;
    block-size: 2.5rem;
    inline-size: 2.5rem;
  }
  .avatar-lg {
    block-size: 4rem;
    inline-size: 4rem;
  }
  .article-hero-img {
    aspect-ratio: 16/9;
  }
  .article-body {
    max-inline-size: 68ch;
  }
  .article-body > figure,
  .article-body > .gallery {
    margin-block: 2em;
  }
  .article-body [id] {
    scroll-margin-block-start: 5rem;
  }
  .article-figure > figcaption,
  .gallery > figcaption {
    margin-block-start: calc(var(--spacing) * 2);
  }
  .article-embed {
    max-inline-size: 36rem;
  }
  .article-aside {
    display: none;
  }
  @media (width>=768px) and ((width<1024px)) {
    .article-body {
      max-inline-size: 60ch;
    }
  }
  @media (width>=1024px) {
    .article-grid {
      justify-content: center;
      column-gap: calc(var(--spacing) * 12);
      grid-template-columns: 16rem minmax(0, 68ch);
      display: grid;
    }
    .article-aside {
      align-self: start;
      max-block-size: calc(100dvh - 6rem);
      display: block;
      position: sticky;
      inset-block-start: 5rem;
      overflow: auto;
    }
    .article-aside:has(.toc-list:empty) {
      visibility: hidden;
    }
  }
  .toc-list {
    gap: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    display: grid;
  }
  .toc-list a {
    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--color-fg-muted);
    transition:
      color var(--dur-fast) var(--ease-out),
      background var(--dur-fast) var(--ease-out);
    border-inline-start: 2px solid #0000;
    display: block;
  }
  [dir="rtl"] .toc-list a {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  }
  .toc-list a:hover {
    color: var(--color-fg);
    background: var(--color-surface);
  }
  .toc-list a[aria-current] {
    color: var(--color-brand);
    border-inline-start-color: var(--color-brand);
    font-weight: 600;
  }
  .toc-list [data-level="2"] a {
    padding-inline-start: calc(var(--spacing) * 6);
  }
  .sheet .toc-list a {
    min-block-size: 44px;
    font-size: var(--text-base);
  }
  .gallery-frame {
    position: relative;
  }
  .gallery-track {
    border-radius: var(--radius-md);
  }
  .gallery-slide {
    gap: calc(var(--spacing) * 2);
    display: grid;
  }
  .gallery-link img {
    aspect-ratio: 4/3;
    object-fit: cover;
    inline-size: 100%;
  }
  .gallery-caption {
    font-size: var(--text-sm);
    color: var(--color-fg-muted);
  }
  .gallery .counter {
    inset-block: calc(var(--spacing) * 3) auto;
  }
  .post-list {
    gap: calc(var(--spacing) * 3);
    display: grid;
  }
  .post-card-link {
    gap: calc(var(--spacing) * 3);
    block-size: 100%;
    padding: 4px;
    display: flex;
  }
  .post-card-media {
    flex: none;
    padding: 0;
  }
  .post-card-media img {
    aspect-ratio: 1;
    border-radius: var(--radius-md);
    object-fit: cover;
    inline-size: 6rem;
  }
  .post-card-body {
    justify-content: center;
    gap: calc(var(--spacing) * 1);
    min-inline-size: 0;
    padding-block: calc(var(--spacing) * 1);
    flex-direction: column;
    padding-inline-end: calc(var(--spacing) * 3);
    display: flex;
  }
  .post-card-meta {
    gap: calc(var(--spacing) * 1.5);
    font-size: var(--text-xs);
    color: var(--color-fg-muted);
    flex-wrap: wrap;
    display: flex;
  }
  .post-topic {
    color: var(--color-brand);
    font-weight: 600;
  }
  .post-card-title {
    font-weight: 600;
  }
  .post-card-excerpt,
  .post-card-author {
    font-size: var(--text-sm);
    color: var(--color-fg-muted);
    display: none;
  }
  .post-card-featured .post-card-link {
    flex-direction: column;
    gap: 0;
  }
  .post-card-featured .post-card-media img {
    aspect-ratio: 16/9;
    inline-size: 100%;
  }
  .post-card-featured .post-card-body {
    padding: calc(var(--spacing) * 3);
  }
  .post-card-featured .post-card-title {
    font-size: var(--text-2xl);
    text-wrap: balance;
    line-height: 1.15;
  }
  .post-card-featured .post-card-excerpt,
  .post-card-featured .post-card-author {
    display: block;
  }
  @media (width>=768px) {
    .post-list {
      grid-template-columns: repeat(2, 1fr);
    }
    .post-list-featured {
      grid-column: 1/-1;
    }
    .post-card-row .post-card-link {
      flex-direction: column;
      gap: 0;
    }
    .post-card-row .post-card-media img {
      aspect-ratio: 16/9;
      inline-size: 100%;
    }
    .post-card-row .post-card-body {
      padding: calc(var(--spacing) * 3);
      gap: calc(var(--spacing) * 1.5);
    }
    .post-card-row .post-card-excerpt {
      display: block;
    }
    .post-card-featured .post-card-link {
      grid-template-columns: 3fr 2fr;
      align-items: center;
      display: grid;
    }
    .post-card-featured .post-card-body {
      padding: calc(var(--spacing) * 6);
    }
    .post-card-featured .post-card-title {
      font-size: var(--text-3xl);
    }
  }
  @media (width>=1024px) {
    .post-list {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  .author-card {
    align-items: flex-start;
    gap: calc(var(--spacing) * 4);
    padding: calc(var(--spacing) * 5);
    display: flex;
  }
  .comment-list {
    gap: calc(var(--spacing) * 5);
    display: grid;
  }
  .comment {
    gap: calc(var(--spacing) * 3);
    display: flex;
  }
  .comment-meta {
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    color: var(--color-fg-muted);
    flex-wrap: wrap;
    display: flex;
  }
  .comment-author {
    padding: calc(var(--spacing) * 3);
    border-radius: var(--radius-md);
    background: var(--color-surface-2);
  }
  .price {
    align-items: baseline;
    gap: calc(var(--spacing) * 1.5);
    flex-wrap: wrap;
    display: inline-flex;
  }
  .price > s {
    font-weight: 400;
  }
  .wish[aria-pressed="true"] {
    border-color: var(--color-accent);
    color: var(--color-accent);
  }
  .wish[aria-pressed="true"] .icon {
    fill: currentColor;
  }
  .stars {
    color: var(--color-accent);
    gap: 2px;
    display: inline-flex;
  }
  .stars .star-outline {
    fill: none;
    stroke: currentColor;
  }
  .stars .star-fill {
    fill: currentColor;
  }
  .stars .star-half .star-fill {
    clip-path: inset(0 50% 0 0);
  }
  [dir="rtl"] .stars .star-half .star-fill {
    clip-path: inset(0 0 0 50%);
  }
  .stars .star-empty {
    color: var(--color-fg-subtle);
  }
  .stars .star-empty .star-fill {
    fill: none;
  }
  .swatch-dot {
    border-radius: var(--radius-full);
    background: var(--color-swatch, currentcolor);
    block-size: 14px;
    inline-size: 14px;
    box-shadow: inset 0 0 0 1px #00000026;
  }
  .chip[data-sold-out] {
    color: var(--color-fg-subtle);
    cursor: not-allowed;
    text-decoration: line-through;
  }
  .chip[data-sold-out]:hover {
    background: var(--color-bg);
  }
  .shop-main {
    min-inline-size: 0;
  }
  .shop-toolbar {
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    margin-block-end: calc(var(--spacing) * 3);
    display: flex;
  }
  .shop-toolbar .field {
    inline-size: 12rem;
  }
  .applied {
    margin-block-end: calc(var(--spacing) * 4);
  }
  .shop-grid {
    gap: calc(var(--spacing) * 3);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    display: grid;
  }
  .shop-grid > li {
    display: grid;
  }
  .shop-grid > li > .card {
    block-size: 100%;
  }
  .promo-slot {
    grid-column: 1/-1;
  }
  .promo-slot .promo {
    aspect-ratio: auto;
    block-size: 100%;
    inline-size: 100%;
    padding: calc(var(--spacing) * 5);
    color: var(--color-fg);
    text-align: start;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    display: flex;
  }
  @media (width>=768px) {
    .shop-grid {
      gap: calc(var(--spacing) * 4);
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .promo-slot {
      grid-column: auto;
    }
  }
  @media (width>=1280px) {
    .shop-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .filterbar {
    margin-block-start: calc(var(--spacing) * 6);
    margin-inline: calc(var(--spacing) * -4);
    background: var(--color-bg);
  }
  .filter-sheet .filter-actions {
    padding-block: calc(var(--spacing) * 3) max(calc(var(--spacing) * 4), env(safe-area-inset-bottom));
    background: var(--color-surface);
    margin-block-end: calc(-1 * max(calc(var(--spacing) * 4), env(safe-area-inset-bottom)));
    position: sticky;
    inset-block-end: calc(-1 * max(calc(var(--spacing) * 4), env(safe-area-inset-bottom)));
  }
  @media (width>=1024px) {
    .shop {
      gap: calc(var(--spacing) * 10);
      grid-template-columns: 16rem minmax(0, 1fr);
      align-items: start;
      display: grid;
    }
    .shop > .filter-sheet,
    .shop > .filter-sheet[data-snap] {
      block-size: auto;
      max-block-size: calc(100dvh - 6rem);
      inline-size: auto;
      max-inline-size: none;
      box-shadow: none;
      background: 0 0;
      border: 0;
      border-radius: 0;
      margin: 0;
      padding: 0;
      transition: none;
      display: block;
      position: sticky;
      inset: auto;
      inset-block-start: 5rem;
      overflow: auto;
      translate: 0;
    }
    .shop > .filter-sheet .sheet-handle {
      display: none;
    }
    .shop > .filter-sheet .filter-actions {
      background: 0 0;
      margin: 0;
      padding: 0;
      position: static;
    }
    .shop-grid-wide {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .pdp {
    gap: calc(var(--spacing) * 6);
    display: grid;
  }
  .pdp-gallery {
    position: relative;
  }
  .pdp-track {
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    display: flex;
    overflow-x: auto;
  }
  .pdp-track::-webkit-scrollbar {
    display: none;
  }
  .pdp-slide {
    scroll-snap-align: start;
    flex: 0 0 100%;
  }
  .pdp-slide > a {
    background: var(--color-surface-2);
    display: block;
  }
  .pdp-slide img {
    object-fit: cover;
    block-size: auto;
    inline-size: 100%;
  }
  .pdp-zoom-hint {
    border-radius: var(--radius-full);
    block-size: 32px;
    inline-size: 32px;
    background: var(--lightningcss-light, #100e13b3) var(--lightningcss-dark, #efeef1b3);
    place-items: center;
    display: grid;
    position: absolute;
    inset-block-end: calc(var(--spacing) * 3);
    inset-inline-start: calc(var(--spacing) * 3);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .pdp-zoom-hint {
      background: color-mix(in oklch, var(--color-fg) 70%, transparent);
    }
  }
  .pdp-zoom-hint {
    color: var(--color-bg);
    pointer-events: none;
  }
  [dir="rtl"] .pdp-gallery .counter {
    inset-inline: calc(var(--spacing) * 3) auto;
  }
  .pdp-arrow {
    display: none;
    position: absolute;
    inset-block-start: 50%;
    translate: 0 -50%;
  }
  .pdp-arrow-prev {
    inset-inline-start: calc(var(--spacing) * 3);
  }
  .pdp-arrow-next {
    inset-inline-end: calc(var(--spacing) * 3);
  }
  .pdp-gallery .dots {
    justify-content: center;
    margin-block-start: calc(var(--spacing) * 3);
  }
  .pdp-gallery .thumbs {
    padding-inline: calc(var(--spacing) * 4);
    margin-block-start: calc(var(--spacing) * 3);
  }
  @media (width>=768px) {
    .pdp-arrow {
      display: inline-flex;
    }
    .pdp-media {
      inline-size: min(100% - 2rem, 72rem);
      margin-inline: auto;
    }
    .pdp-slide img {
      border-radius: var(--radius-xl);
    }
  }
  @media (width>=1024px) {
    .pdp {
      gap: calc(var(--spacing) * 12);
      grid-template-columns: 7fr 5fr;
      align-items: start;
      inline-size: min(100% - 2rem, 72rem);
      margin-inline: auto;
    }
    .pdp > .pdp-media {
      inline-size: auto;
      margin: 0;
      position: sticky;
      inset-block-start: 5rem;
    }
    .pdp > .pdp-info {
      inline-size: auto;
      margin: 0;
      padding: 0;
    }
    .pdp-gallery .thumbs {
      padding-inline: 0;
    }
  }
  .stock {
    align-items: center;
    gap: calc(var(--spacing) * 2);
    color: var(--color-fg-muted);
    display: flex;
  }
  .stock:before {
    content: "";
    border-radius: var(--radius-full);
    background: var(--color-success);
    block-size: 8px;
    inline-size: 8px;
  }
  .stock[data-state="low"]:before {
    background: var(--color-warning);
  }
  .stock[data-state="out"]:before {
    background: var(--color-danger);
  }
  .trust {
    gap: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 4);
    border-block: 1px solid var(--color-line);
    font-size: var(--text-sm);
    color: var(--color-fg-muted);
    display: grid;
  }
  .trust > li {
    align-items: center;
    gap: calc(var(--spacing) * 2);
    display: flex;
  }
  .trust .icon {
    color: var(--color-brand);
    flex: none;
  }
  @media (width>=640px) {
    .trust {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .drawer-head {
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    border-block-end: 1px solid var(--color-line);
    padding-block-end: calc(var(--spacing) * 4);
    display: flex;
  }
  .drawer-body {
    min-block-size: 0;
    padding-block: calc(var(--spacing) * 4);
    overflow: auto;
  }
  .drawer-foot {
    gap: calc(var(--spacing) * 2);
    border-block-start: 1px solid var(--color-line);
    padding-block-start: calc(var(--spacing) * 4);
    display: grid;
  }
  .ship-progress {
    gap: calc(var(--spacing) * 2);
    margin-block-end: calc(var(--spacing) * 4);
    display: grid;
  }
  .ship-progress > progress {
    block-size: 6px;
    inline-size: 100%;
    accent-color: var(--color-brand);
  }
  .cart-lines {
    gap: calc(var(--spacing) * 4);
    display: grid;
  }
  .cart-line {
    gap: calc(var(--spacing) * 3);
    grid-template-columns: 5rem minmax(0, 1fr) auto;
    align-items: start;
    display: grid;
  }
  .cart-line-media > img {
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--radius-md);
    background: var(--color-surface-2);
    inline-size: 5rem;
  }
  .stepper-sm {
    block-size: 36px;
  }
  .stepper-sm > button {
    inline-size: 36px;
  }
  .stepper-sm > input {
    inline-size: 2.5rem;
  }
  .drawer > .toast-region {
    inset-block-end: calc(var(--spacing) * 36);
  }
  .fly-ghost {
    z-index: var(--z-toast);
    border-radius: var(--radius-md);
    object-fit: cover;
    pointer-events: none;
    block-size: 64px;
    inline-size: 64px;
    position: fixed;
    inset: 0 auto auto 0;
  }
  .search-list {
    gap: calc(var(--spacing) * 1);
    display: grid;
  }
  .search-hit {
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding: calc(var(--spacing) * 2);
    border-radius: var(--radius-md);
    transition: background var(--dur-fast) var(--ease-out);
    display: flex;
  }
  .search-hit:hover {
    background: var(--color-surface-2);
  }
  .search-hit > img {
    object-fit: cover;
    border-radius: var(--radius-sm);
    background: var(--color-surface-2);
    flex: none;
    block-size: 3rem;
    inline-size: 3rem;
  }
  .cart-lines-page {
    gap: 0;
  }
  .cart-lines-page > .cart-line {
    padding-block: calc(var(--spacing) * 4);
    border-block-start: 1px solid var(--color-line);
  }
  .cart-lines-page > .cart-line:first-child {
    border-block-start: 0;
  }
  .cart-line-media {
    flex: none;
    display: block;
  }
  .cart-extra {
    border-block-end: 1px solid var(--color-line);
  }
  .cart-extra > summary {
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    min-block-size: 52px;
    padding-block: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    font-weight: 600;
    list-style: none;
    display: flex;
  }
  .cart-extra > summary::-webkit-details-marker {
    display: none;
  }
  .cart-extra > summary > .icon:last-child {
    color: var(--color-fg-muted);
    transition: rotate var(--dur-fast) var(--ease-out);
  }
  .cart-extra[open] > summary > .icon:last-child {
    rotate: 180deg;
  }
  .cart-extra-body {
    padding-block: 0 calc(var(--spacing) * 4);
  }
  .totals > div {
    justify-content: space-between;
    align-items: baseline;
    gap: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    display: flex;
  }
  .totals dt {
    color: var(--color-fg-muted);
  }
  .totals dd {
    font-variant-numeric: tabular-nums;
  }
  .totals .total {
    border-block-start: 1px solid var(--color-line);
    font-size: var(--text-base);
    margin-block-start: calc(var(--spacing) * 1);
    padding-block-start: calc(var(--spacing) * 2.5);
    font-weight: 600;
  }
  .totals .total dt {
    color: var(--color-fg);
  }
  .order-lines {
    display: grid;
  }
  .order-line {
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 3);
    display: flex;
  }
  .order-line + .order-line {
    border-block-start: 1px solid var(--color-line);
  }
  .order-line img {
    object-fit: cover;
    border-radius: var(--radius-sm);
    background: var(--color-surface-2);
    block-size: 3.5rem;
    inline-size: 3.5rem;
  }
  .order-line-qty {
    inset-block-start: -0.375rem;
    inset-inline-end: -0.375rem;
  }
  .cart-sticky,
  .paybar {
    margin-block-start: calc(var(--spacing) * 6);
    margin-inline: calc(var(--spacing) * -4);
    background: var(--color-bg);
  }
  .pay-mark {
    border: 1px solid var(--color-line);
    border-radius: var(--radius-xs);
    block-size: 1.75rem;
    inline-size: 2.75rem;
  }
  .co-grid {
    gap: calc(var(--spacing) * 6);
    max-inline-size: 40rem;
    margin-inline: auto;
    display: grid;
  }
  @media (width>=1024px) {
    .co-grid {
      gap: calc(var(--spacing) * 12);
      grid-template-columns: 7fr 5fr;
      align-items: start;
      max-inline-size: none;
    }
    .co-form {
      order: 1;
    }
    .co-rail {
      order: 2;
      position: sticky;
      inset-block-start: calc(var(--spacing) * 20);
    }
  }
  .express-row {
    gap: calc(var(--spacing) * 2);
    grid-template-columns: repeat(3, 1fr);
    display: grid;
  }
  .express-btn {
    border: 1px solid var(--color-line);
    border-radius: var(--radius-full);
    background: var(--color-surface);
    min-block-size: 48px;
    color: var(--color-fg);
    cursor: pointer;
    transition: transform var(--dur-fast) var(--ease-out);
    justify-content: center;
    align-items: center;
    display: inline-flex;
  }
  .express-btn svg {
    direction: ltr;
  }
  .express-btn:active {
    transform: scale(0.97);
  }
  .express-apple {
    color: #fff;
    background: #000;
    border-color: #000;
  }
  .express-google {
    color: #3c4043;
    background: #fff;
    border-color: #dadce0;
  }
  .express-paypal {
    color: #003087;
    background: #ffc439;
    border-color: #ffc439;
  }
  .or {
    align-items: center;
    gap: calc(var(--spacing) * 3);
    font-size: var(--text-xs);
    color: var(--color-fg-subtle);
    margin-block-start: calc(var(--spacing) * 4);
    display: flex;
  }
  .or:before,
  .or:after {
    content: "";
    border-block-start: 1px solid var(--color-line);
    flex: 1;
  }
  .co-section {
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
  }
  .co-section + .co-section {
    margin-block-start: calc(var(--spacing) * 3);
  }
  .co-section-head {
    align-items: center;
    gap: calc(var(--spacing) * 3);
    min-block-size: 56px;
    padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
    cursor: pointer;
    list-style: none;
    display: flex;
  }
  .co-section-head::-webkit-details-marker {
    display: none;
  }
  .co-step-num {
    border: 1.5px solid var(--color-line);
    border-radius: var(--radius-full);
    block-size: 28px;
    inline-size: 28px;
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    flex: none;
    place-items: center;
    font-weight: 600;
    display: inline-grid;
  }
  .co-section[open] .co-step-num {
    background: var(--color-brand);
    border-color: var(--color-brand);
    color: var(--color-on-brand);
  }
  .co-section[data-complete] .co-step-num {
    background: var(--color-success);
    border-color: var(--color-success);
    color: var(--color-on-success);
  }
  .co-section-summary {
    font-size: var(--text-xs);
    color: var(--color-fg-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    overflow: hidden;
  }
  .co-section-summary:empty,
  .co-section[open] .co-section-summary {
    display: none;
  }
  .co-edit {
    font-size: var(--text-sm);
    text-underline-offset: 4px;
    font-weight: 500;
    text-decoration: underline;
  }
  .co-section[open] .co-edit,
  .co-section:not([data-complete]) .co-edit {
    display: none;
  }
  .co-body {
    padding: 0 calc(var(--spacing) * 4) calc(var(--spacing) * 5);
  }
  .option {
    align-items: center;
    gap: calc(var(--spacing) * 3);
    min-block-size: 56px;
    padding: calc(var(--spacing) * 3) calc(var(--spacing) * 3.5);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    cursor: pointer;
    display: flex;
  }
  .option > input {
    block-size: 1.25rem;
    inline-size: 1.25rem;
    accent-color: var(--color-brand);
    flex: none;
    margin: 0;
  }
  .option:has(input:checked) {
    border-color: var(--color-brand);
    box-shadow: inset 0 0 0 1px var(--color-brand);
  }
  .option:has(input:focus-visible) {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
  }
  .billing {
    gap: calc(var(--spacing) * 4);
    margin-block-start: calc(var(--spacing) * 4);
    display: grid;
  }
  .billing[hidden] {
    display: none;
  }
  form:has(#same-as-shipping:checked) #billing {
    display: none;
  }
  .co-summary {
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
  }
  .co-summary-bar {
    align-items: center;
    gap: calc(var(--spacing) * 3);
    min-block-size: 56px;
    padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
    cursor: pointer;
    list-style: none;
    display: flex;
  }
  .co-summary-bar::-webkit-details-marker {
    display: none;
  }
  .co-summary-hide,
  .co-summary[open] .co-summary-show {
    display: none;
  }
  .co-summary[open] .co-summary-hide {
    display: inline;
  }
  .co-summary-chevron {
    transition: rotate var(--dur-fast) var(--ease-out);
  }
  .co-summary[open] .co-summary-chevron {
    rotate: 180deg;
  }
  .co-summary-body {
    padding: 0 calc(var(--spacing) * 4) calc(var(--spacing) * 4);
  }
  @media (width>=1024px) {
    .co-summary-bar {
      pointer-events: none;
    }
    .co-summary-chevron {
      display: none;
    }
  }
  .review-list > div {
    gap: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    grid-template-columns: 7rem 1fr;
    display: grid;
  }
  .review-list > div + div {
    border-block-start: 1px solid var(--color-line);
  }
  .review-list > div > dt {
    color: var(--color-fg-muted);
  }
  .wish-grid {
    gap: calc(var(--spacing) * 3);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    display: grid;
  }
  @media (width>=768px) {
    .wish-grid {
      gap: calc(var(--spacing) * 4);
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  @media (width>=1024px) {
    .wish-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .empty-state {
    padding: calc(var(--spacing) * 10) calc(var(--spacing) * 4);
    text-align: center;
    justify-items: center;
    display: grid;
  }
  .empty-state[hidden] {
    display: none;
  }
  .acct {
    gap: calc(var(--spacing) * 6);
    align-items: start;
    display: grid;
  }
  .acct-side {
    display: none;
  }
  .acct-nav {
    gap: calc(var(--spacing) * 0.5);
    display: grid;
  }
  .acct-nav a,
  .acct-nav button {
    align-items: center;
    gap: calc(var(--spacing) * 3);
    min-block-size: 44px;
    inline-size: 100%;
    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    text-align: start;
    color: var(--color-fg);
    transition: background var(--dur-fast) var(--ease-out);
    border-inline-start: 3px solid #0000;
    font-weight: 500;
    display: flex;
  }
  .acct-nav a:hover,
  .acct-nav button:hover {
    background: var(--color-surface-2);
  }
  .acct-nav a[aria-current="page"] {
    background: var(--color-surface-2);
    border-inline-start-color: var(--color-brand);
  }
  .acct-nav .icon {
    color: var(--color-fg-muted);
  }
  .acct-nav a[aria-current="page"] .icon {
    color: var(--color-brand);
  }
  .acct-nav .acct-chevron {
    block-size: 1rem;
    inline-size: 1rem;
    color: var(--color-fg-subtle);
  }
  .acct-rows {
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    overflow: clip;
  }
  .acct-rows .acct-nav {
    gap: 0;
  }
  .acct-rows .acct-nav a,
  .acct-rows .acct-nav button {
    min-block-size: 52px;
    padding-inline: calc(var(--spacing) * 4);
    border-inline-start: 0;
    border-radius: 0;
  }
  .acct-rows .acct-nav > * + * {
    border-block-start: 1px solid var(--color-line);
  }
  .acct-rows .acct-nav a[aria-current="page"] {
    background: var(--color-surface);
  }
  @media (width>=1024px) {
    .acct {
      gap: calc(var(--spacing) * 12);
      grid-template-columns: 15rem minmax(0, 1fr);
    }
    .acct-side {
      display: block;
      position: sticky;
      inset-block-start: calc(56px + var(--spacing) * 6);
    }
    .acct-side .acct-nav a,
    .acct-side .acct-nav button {
      border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    }
    [dir="rtl"] .acct-side .acct-nav a,
    [dir="rtl"] .acct-side .acct-nav button {
      border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    }
    .acct-side .acct-chevron,
    .acct-rows {
      display: none;
    }
  }
  .status-pill[data-status="delivered"] {
    background: var(--lightningcss-light, #d0e5db) var(--lightningcss-dark, #233129);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .status-pill[data-status="delivered"] {
      background: color-mix(in oklch, var(--color-success) 16%, var(--color-surface));
    }
  }
  .status-pill[data-status="delivered"] {
    color: var(--lightningcss-light, #086431) var(--lightningcss-dark, #95d9a6);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .status-pill[data-status="delivered"] {
      color: color-mix(in oklch, var(--color-success) 70%, var(--color-fg));
    }
  }
  .status-pill[data-status="shipped"],
  .status-pill[data-status="processing"] {
    background: var(--lightningcss-light, #e0d9e7) var(--lightningcss-dark, #2e2836);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .status-pill[data-status="shipped"],
    .status-pill[data-status="processing"] {
      background: color-mix(in oklch, var(--color-brand) 14%, var(--color-surface));
    }
  }
  .status-pill[data-status="shipped"],
  .status-pill[data-status="processing"] {
    color: var(--lightningcss-light, #462564) var(--lightningcss-dark, #d3baf2);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .status-pill[data-status="shipped"],
    .status-pill[data-status="processing"] {
      color: color-mix(in oklch, var(--color-brand) 80%, var(--color-fg));
    }
  }
  .status-pill[data-status="cancelled"] {
    background: var(--color-surface-3);
    color: var(--color-fg-muted);
  }
  .row-list > * + * {
    border-block-start: 1px solid var(--color-line);
  }
  .order-row {
    gap: calc(var(--spacing) * 3);
    min-block-size: 44px;
    padding-block: calc(var(--spacing) * 3.5);
    cursor: pointer;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    list-style: none;
    display: grid;
  }
  .order-row::-webkit-details-marker {
    display: none;
  }
  .order-row:focus-visible {
    outline-offset: -2px;
    border-radius: var(--radius-sm);
  }
  .order-chevron {
    block-size: 1rem;
    inline-size: 1rem;
    transition: rotate var(--dur-fast) var(--ease-out);
  }
  .order[open] .order-chevron {
    rotate: 180deg;
  }
  .order-body {
    padding-block: calc(var(--spacing) * 2) calc(var(--spacing) * 6);
    padding-inline-start: calc(var(--spacing) * 2);
  }
  @media (width>=768px) {
    .order-body {
      padding-inline-start: calc(44px + var(--spacing) * 3);
    }
  }
  .thumb-stack {
    display: flex;
  }
  .thumb-stack img {
    object-fit: cover;
    border-radius: var(--radius-sm);
    block-size: 44px;
    inline-size: 44px;
    box-shadow: 0 0 0 2px var(--color-bg);
    margin-inline-start: calc(var(--spacing) * -3);
  }
  .thumb-stack img:first-child {
    margin-inline-start: 0;
  }
  .timeline {
    flex-direction: column;
    margin-block-start: calc(var(--spacing) * 3);
    display: flex;
  }
  .timeline > li {
    gap: calc(var(--spacing) * 3);
    padding-block-end: calc(var(--spacing) * 5);
    display: flex;
    position: relative;
  }
  .timeline > li:last-child {
    padding-block-end: 0;
  }
  .timeline > li:not(:last-child):before {
    content: "";
    background: var(--color-line);
    inline-size: 2px;
    position: absolute;
    inset-block: 24px 0;
    inset-inline-start: 11px;
  }
  .timeline > li[data-state="done"]:not(:last-child):before {
    background: var(--color-success);
  }
  .timeline-dot {
    z-index: 1;
    border-radius: var(--radius-full);
    border: 2px solid var(--color-line);
    background: var(--color-bg);
    color: #0000;
    flex: none;
    place-items: center;
    block-size: 24px;
    inline-size: 24px;
    display: grid;
    position: relative;
  }
  .timeline-dot .icon {
    block-size: 0.875rem;
    inline-size: 0.875rem;
  }
  .timeline [data-state="done"] .timeline-dot {
    background: var(--color-success);
    border-color: var(--color-success);
    color: var(--color-bg);
  }
  .timeline [data-state="current"] .timeline-dot {
    border-color: var(--color-brand);
    box-shadow: 0 0 0 4px var(--lightningcss-light, #532a7840) var(--lightningcss-dark, #cdaef240);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .timeline [data-state="current"] .timeline-dot {
      box-shadow: 0 0 0 4px color-mix(in oklch, var(--color-brand) 25%, transparent);
    }
  }
  .timeline [data-state="current"] .timeline-dot:after {
    content: "";
    border-radius: var(--radius-full);
    background: var(--color-brand);
    block-size: 8px;
    inline-size: 8px;
  }
  .timeline [data-state="current"] .timeline-dot .icon {
    display: none;
  }
  .timeline [data-state="todo"] {
    color: var(--color-fg-muted);
  }
  .tile-grid {
    gap: calc(var(--spacing) * 3);
    display: grid;
  }
  @media (width>=640px) {
    .tile-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .tile[data-default] {
    border-color: var(--color-fg);
  }
  .tile-actions {
    gap: calc(var(--spacing) * 1);
    flex-wrap: wrap;
    margin-block-start: auto;
    padding-block-start: calc(var(--spacing) * 3);
    display: flex;
  }
  .tile:not([data-default]) [data-default-badge],
  .tile[data-default] [data-address-default] {
    display: none;
  }
  .switch-row {
    align-items: center;
    gap: calc(var(--spacing) * 4);
    min-block-size: 44px;
    padding-block: calc(var(--spacing) * 3);
    cursor: pointer;
    display: flex;
  }
  .switch-row + .switch-row {
    border-block-start: 1px solid var(--color-line);
  }
  .auth {
    max-inline-size: 28rem;
    margin-inline: auto;
  }
  .auth .tabs-panel {
    max-inline-size: none;
    color: var(--color-fg);
  }
  .auth .tabs-list a {
    flex: 1;
    justify-content: center;
  }
  .field-pw {
    position: relative;
  }
  .field-pw .input {
    padding-inline-end: calc(var(--spacing) * 13);
  }
  .pw-toggle {
    border-radius: var(--radius-full);
    block-size: 44px;
    inline-size: 44px;
    color: var(--color-fg-muted);
    transition: color var(--dur-fast) var(--ease-out);
    place-items: center;
    display: grid;
    position: absolute;
    inset-block-start: 2px;
    inset-inline-end: calc(var(--spacing) * 1);
  }
  .pw-toggle:hover,
  .pw-toggle[aria-pressed="true"] {
    color: var(--color-fg);
  }
  .pw-toggle .icon-hide,
  .pw-toggle[aria-pressed="true"] .icon-show {
    display: none;
  }
  .pw-toggle[aria-pressed="true"] .icon-hide {
    display: block;
  }
  .strength {
    gap: calc(var(--spacing) * 1.5);
    font-size: var(--text-xs);
    color: var(--color-fg-muted);
    display: grid;
  }
  .strength[data-empty] {
    display: none;
  }
  .strength-bars {
    gap: calc(var(--spacing) * 1);
    grid-template-columns: repeat(4, 1fr);
    display: grid;
  }
  .strength-bars span {
    border-radius: var(--radius-full);
    background: var(--color-surface-3);
    block-size: 4px;
  }
  .strength[data-level="1"] .strength-bars span:nth-child(-n + 1) {
    background: var(--color-danger);
  }
  .strength[data-level="2"] .strength-bars span:nth-child(-n + 2) {
    background: var(--color-warning);
  }
  .strength[data-level="3"] .strength-bars span:nth-child(-n + 3) {
    background: var(--color-brand);
  }
  .strength[data-level="4"] .strength-bars span {
    background: var(--color-success);
  }
  .social-btn {
    justify-content: flex-start;
    gap: calc(var(--spacing) * 3);
  }
  .social-btn .social-label {
    text-align: center;
    flex: 1;
    margin-inline-end: calc(1.25rem + var(--spacing) * 3);
  }
  .countdown-grid {
    gap: calc(var(--spacing) * 2);
    max-inline-size: 28rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-block-start: calc(var(--spacing) * 4);
    margin-inline: auto;
    display: grid;
  }
  .countdown-cell {
    gap: calc(var(--spacing) * 1);
    padding-block: calc(var(--spacing) * 4);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    text-align: center;
    display: grid;
  }
  .countdown-cell b {
    font-size: var(--text-3xl);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    line-height: 1;
  }
  .countdown-cell span {
    font-size: var(--text-xs);
    color: var(--color-fg-muted);
  }
  [data-countdown-cells][data-live] {
    display: none;
  }
  [data-cat="world"] {
    --color-cat: var(--color-cat-world);
    --color-cat-tint: var(--color-cat-world-tint);
  }
  [data-cat="politics"] {
    --color-cat: var(--color-cat-politics);
    --color-cat-tint: var(--color-cat-politics-tint);
  }
  [data-cat="business"] {
    --color-cat: var(--color-cat-business);
    --color-cat-tint: var(--color-cat-business-tint);
  }
  [data-cat="tech"] {
    --color-cat: var(--color-cat-tech);
    --color-cat-tint: var(--color-cat-tech-tint);
  }
  [data-cat="culture"] {
    --color-cat: var(--color-cat-culture);
    --color-cat-tint: var(--color-cat-culture-tint);
  }
  [data-cat="sport"] {
    --color-cat: var(--color-cat-sport);
    --color-cat-tint: var(--color-cat-sport-tint);
  }
  [data-cat="science"] {
    --color-cat: var(--color-cat-science);
    --color-cat-tint: var(--color-cat-science-tint);
  }
  [data-cat="opinion"] {
    --color-cat: var(--color-cat-opinion);
    --color-cat-tint: var(--color-cat-opinion-tint);
  }
  .chip-cat {
    background: var(--color-cat-tint, var(--color-surface-2));
    color: var(--color-cat, var(--color-fg));
    border-color: #0000;
  }
  .chip-cat:hover {
    background: var(
      --color-cat-tint,
      var(--lightningcss-light, oklch(94.5% 0.006 305)) var(--lightningcss-dark, oklch(24% 0.012 305))
    );
  }
  @supports (color: color-mix(in lab, red, red)) {
    .chip-cat:hover {
      background: color-mix(
        in oklch,
        var(--color-cat-tint, var(--color-surface-2)) 85%,
        var(--color-cat, var(--color-fg))
      );
    }
  }
  .chip-cat[aria-current],
  .chip-cat[aria-pressed="true"] {
    background: var(--color-cat, var(--color-fg));
    border-color: var(--color-cat, var(--color-fg));
    color: var(--color-bg);
  }
  .chip-sm {
    min-block-size: 28px;
    padding-inline: calc(var(--spacing) * 2.5);
    font-size: var(--text-xs);
  }
  .kicker {
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    font-size: var(--text-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-cat, var(--color-brand));
    font-weight: 600;
    display: inline-flex;
  }
  .masthead {
    align-items: center;
    gap: calc(var(--spacing) * 2);
    min-block-size: 3.5rem;
    display: flex;
  }
  .wordmark {
    font-family: var(--font-display);
    letter-spacing: -0.02em;
    color: var(--color-fg);
    font-weight: 700;
    line-height: 1;
  }
  .wordmark-lg {
    font-size: var(--text-3xl);
  }
  .masthead-small {
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: var(--text-xl);
    display: inline-flex;
  }
  .masthead-mark {
    flex-shrink: 0;
    block-size: 1.75rem;
    inline-size: 1.75rem;
  }
  .masthead-large {
    border-block-start: 1px solid var(--color-line);
    overflow: hidden;
  }
  .masthead-large > .wrap {
    padding-block: calc(var(--spacing) * 3);
  }
  .masthead-edition {
    justify-content: flex-end;
    gap: calc(var(--spacing) * 1) calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    color: var(--color-fg-subtle);
    text-align: end;
    flex-wrap: wrap;
    display: flex;
  }
  .masthead-edition > span {
    color: var(--color-fg-muted);
    font-weight: 600;
  }
  .masthead-search {
    display: none;
    position: relative;
  }
  .input-sm {
    min-block-size: 40px;
    padding-block: 0;
  }
  .masthead-nav {
    border-block-start: 1px solid var(--color-line);
    display: none;
  }
  .masthead-nav > .wrap {
    min-block-size: 2.75rem;
  }
  .nav-link-cat {
    border-radius: 0;
    box-shadow: inset 0 -2px #0000;
  }
  .nav-link-cat:hover,
  .nav-link-cat[aria-current="page"] {
    box-shadow: inset 0 -2px var(--color-cat, var(--color-brand));
    background: 0 0;
  }
  @media (width>=1024px) {
    .masthead-search {
      inline-size: 16rem;
      display: block;
    }
    .masthead-nav {
      display: block;
    }
    .masthead-large > .wrap {
      padding-block: calc(var(--spacing) * 5);
    }
    .wordmark-lg {
      font-size: clamp(2.5rem, 2rem + 1.5vw, 3.25rem);
    }
  }
  @supports (animation-timeline: scroll()) {
    .masthead-large {
      block-size: var(--spacing-masthead, 4.25rem);
      animation: linear both masthead-collapse;
      animation-timeline: scroll(root);
      animation-range: 0 120px;
    }
    .masthead-small {
      opacity: 0;
      animation: linear both masthead-appear;
      animation-timeline: scroll(root);
      animation-range: 40px 120px;
    }
    @media (width>=1024px) {
      .masthead-large {
        --spacing-masthead: 6.5rem;
      }
    }
  }
  @keyframes masthead-collapse {
    to {
      opacity: 0;
      border-block-start-color: #0000;
      block-size: 0;
    }
  }
  @keyframes masthead-appear {
    to {
      opacity: 1;
    }
  }
  .mega {
    inline-size: min(60rem, 100vw - 2rem);
    padding: calc(var(--spacing) * 4);
  }
  .mega-grid {
    gap: calc(var(--spacing) * 3);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    display: grid;
  }
  .mega-item {
    align-content: start;
    gap: calc(var(--spacing) * 2);
    padding: calc(var(--spacing) * 2);
    border-radius: var(--radius-md);
    display: grid;
  }
  .mega-item:hover {
    background: var(--color-surface-2);
  }
  .mega-story {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--text-base);
    color: var(--color-fg);
    text-wrap: pretty;
    line-height: 1.3;
  }
  .mega-story:hover {
    text-decoration: underline;
  }
  .badge-live {
    background: var(--color-live);
    color: var(--color-on-live);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .badge-live:before {
    content: "";
    border-radius: var(--radius-full);
    background: currentColor;
    block-size: 0.5rem;
    inline-size: 0.5rem;
  }
  .badge-live-outline {
    color: var(--color-live);
    box-shadow: inset 0 0 0 1px var(--color-live);
    background: 0 0;
  }
  @media (prefers-reduced-motion: no-preference) {
    .badge-live:before {
      animation: 1.6s ease-in-out infinite live-pulse;
    }
  }
  @keyframes live-pulse {
    50% {
      opacity: 0.35;
      transform: scale(0.8);
    }
  }
  .story-row {
    gap: calc(var(--spacing) * 3);
    min-block-size: 88px;
    padding-block: calc(var(--spacing) * 3);
    border-block-end: 1px solid var(--color-line);
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    display: grid;
  }
  .story-row-thumb {
    aspect-ratio: 1;
    border-radius: var(--radius-md);
    object-fit: cover;
    background: var(--color-surface-2);
    inline-size: 96px;
  }
  .story-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--text-lg);
    text-wrap: pretty;
    line-height: 1.25;
  }
  .story-title > a {
    color: inherit;
  }
  .story-title > a:hover {
    text-decoration: underline;
  }
  .story-meta {
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    color: var(--color-fg-subtle);
    flex-wrap: wrap;
    display: flex;
  }
  .story-meta > time {
    font-variant-numeric: tabular-nums;
  }
  .story-card {
    align-content: start;
    gap: calc(var(--spacing) * 3);
    padding: calc(var(--spacing) * 1);
    border-radius: var(--radius-lg);
    transition: transform var(--dur-fast) var(--ease-out);
    grid-template-columns: minmax(0, 1fr);
    display: grid;
  }
  .story-card:active {
    transform: scale(0.97);
  }
  .story-card .card-media {
    aspect-ratio: 16/9;
    border-radius: var(--radius-md);
    background: var(--color-surface-2);
    min-inline-size: 0;
    overflow: clip;
  }
  .story-card .story-title {
    font-size: var(--text-xl);
  }
  .btn-save[aria-pressed="true"] {
    color: var(--color-brand);
  }
  .prose-read {
    max-inline-size: 68ch;
    font-size: var(--text-body-read);
    color: var(--color-fg-read);
    line-height: 1.6;
  }
  html[lang="ar"] .prose-read {
    max-inline-size: 60ch;
    line-height: 1.85;
  }
  .swatch-lg {
    min-block-size: 4.5rem;
    padding: calc(var(--spacing) * 2);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
    align-content: end;
    display: grid;
  }
  .specimen {
    gap: calc(var(--spacing) * 1);
    padding-block: calc(var(--spacing) * 3);
    border-block-end: 1px solid var(--color-line);
    display: grid;
  }
  .specimen > small {
    font-size: var(--text-xs);
    color: var(--color-fg-subtle);
  }
  .chip-rail-bar {
    z-index: calc(var(--z-nav) - 1);
    background: var(--color-bg);
    border-block-end: 1px solid var(--color-line);
    margin-block-end: calc(var(--spacing) * 4);
    position: sticky;
    inset-block-start: 3.5rem;
  }
  @media (width>=1024px) {
    .chip-rail-bar {
      inset-block-start: 6.25rem;
    }
  }
  .lead-story {
    gap: calc(var(--spacing) * 3);
    display: grid;
  }
  .lead-media {
    aspect-ratio: 16/9;
    background: var(--color-surface-2);
    border-radius: var(--radius-lg);
    display: block;
    position: relative;
    overflow: clip;
  }
  .lead-media > picture > img {
    object-fit: cover;
    block-size: 100%;
    inline-size: 100%;
  }
  .lead-body {
    gap: calc(var(--spacing) * 2);
    display: grid;
  }
  .lead-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-display);
    letter-spacing: -0.015em;
    text-wrap: balance;
    line-height: 1.05;
  }
  .lead-title > a {
    color: inherit;
  }
  .lead-title > a:hover {
    text-decoration: underline;
  }
  .lead-dek {
    max-inline-size: 46ch;
    font-size: var(--text-lg);
    color: var(--color-fg-muted);
    text-wrap: pretty;
  }
  html[lang="ar"] .lead-title {
    letter-spacing: normal;
    line-height: 1.25;
  }
  .story-rail {
    padding-inline: 0;
    scroll-padding-inline: 0;
  }
  @media not all and (width>=768px) {
    .story-rail {
      margin-inline: -1rem;
      padding-inline: 1rem;
      scroll-padding-inline: 1rem;
    }
  }
  .story-rail > li {
    inline-size: min(78vw, 20rem);
  }
  .story-rail .story-card {
    block-size: 100%;
  }
  .section-block {
    gap: calc(var(--spacing) * 3);
    display: grid;
  }
  .section-head {
    justify-content: space-between;
    align-items: baseline;
    gap: calc(var(--spacing) * 3);
    border-block-end: 2px solid var(--color-cat, var(--color-brand));
    padding-block-end: calc(var(--spacing) * 2);
    display: flex;
  }
  .section-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-2xl);
    line-height: 1.1;
  }
  .section-body {
    gap: calc(var(--spacing) * 3);
    display: grid;
  }
  .video-card .card-media {
    position: relative;
  }
  .video-duration {
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    border-radius: var(--radius-full);
    color: oklch(99% 0 0);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    background: oklch(15% 0.01 305/0.8);
    position: absolute;
    inset-block-end: calc(var(--spacing) * 2);
    inset-inline-end: calc(var(--spacing) * 2);
  }
  .video-play {
    border-radius: var(--radius-full);
    color: oklch(99% 0 0);
    block-size: 2.25rem;
    inline-size: 2.25rem;
    background: oklch(15% 0.01 305/0.8);
    place-items: center;
    display: grid;
    position: absolute;
    inset-block-start: calc(var(--spacing) * 2);
    inset-inline-start: calc(var(--spacing) * 2);
  }
  .weather-card,
  .newsletter-block {
    gap: calc(var(--spacing) * 2);
    padding: calc(var(--spacing) * 4);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    display: grid;
  }
  .weather-now {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-3xl);
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }
  .weather-days {
    justify-content: space-between;
    gap: calc(var(--spacing) * 2);
    border-block-start: 1px solid var(--color-line);
    padding-block-start: calc(var(--spacing) * 3);
    display: flex;
  }
  .weather-days > li {
    justify-items: center;
    gap: calc(var(--spacing) * 1);
    font-variant-numeric: tabular-nums;
    display: grid;
  }
  .newsletter-fields {
    gap: calc(var(--spacing) * 2);
    display: flex;
  }
  .ad-slot {
    place-content: center;
    justify-items: center;
    gap: calc(var(--spacing) * 1);
    aspect-ratio: 320/100;
    max-inline-size: 40rem;
    padding: calc(var(--spacing) * 3);
    border: 1px dashed var(--color-line);
    border-radius: var(--radius-md);
    background: var(--color-surface-2);
    text-align: center;
    margin-inline: auto;
    display: grid;
  }
  .ad-slot-label {
    font-size: var(--text-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-fg-subtle);
    font-weight: 600;
  }
  .most-read {
    counter-reset: most-read;
  }
  .most-read > li {
    gap: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 3);
    border-block-end: 1px solid var(--color-line);
    counter-increment: most-read;
    grid-template-columns: 1.5rem minmax(0, 1fr);
    display: grid;
  }
  .most-read > li:before {
    content: counter(most-read);
    font-family: var(--font-display);
    font-size: var(--text-xl);
    color: var(--color-cat, var(--color-brand));
    font-weight: 600;
    line-height: 1.2;
  }
  .news-layout {
    gap: calc(var(--spacing) * 8);
    align-items: start;
    display: grid;
  }
  .news-main {
    gap: calc(var(--spacing) * 8);
    min-inline-size: 0;
    display: grid;
  }
  .news-aside {
    gap: calc(var(--spacing) * 6);
    align-content: start;
    min-inline-size: 0;
    display: grid;
  }
  .section-grid {
    gap: calc(var(--spacing) * 8);
    display: grid;
  }
  @media (width>=768px) and ((width<1024px)) {
    .section-body {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: start;
    }
    .section-body > .story-card {
      grid-row: span 3;
    }
  }
  @media (width>=768px) {
    .story-rail > li {
      inline-size: 20rem;
    }
  }
  @media (width>=1024px) {
    .section-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .news-layout {
      column-gap: calc(var(--spacing) * 10);
      grid-template-columns: minmax(0, 1fr) 20rem;
    }
    .news-aside {
      position: sticky;
      inset-block-start: 7.5rem;
    }
    .lead-story {
      align-items: center;
      column-gap: calc(var(--spacing) * 6);
      grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    }
    .lead-title {
      font-size: clamp(2.25rem, 1.4rem + 1.6vw, 3rem);
    }
    .lead-media {
      aspect-ratio: 4/3;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .reading-progress {
      display: none;
    }
  }
  .article-page {
    padding-block-end: calc(var(--spacing) * 10);
  }
  @media not all and (width>=768px) {
    :is(
      .article-page .wrap:has(> .article-body),
      .article-page .wrap:has(> .article-grid),
      .article-page .wrap:has(> .article-gallery)
    ) {
      inline-size: calc(100% - 1.25rem);
    }
  }
  .article-head {
    padding-block-start: calc(var(--spacing) * 5);
  }
  .article-head .breadcrumb {
    margin-block-end: calc(var(--spacing) * 4);
  }
  .article-title {
    max-inline-size: 22ch;
    font-size: var(--text-3xl);
    text-wrap: balance;
    margin-block-start: calc(var(--spacing) * 2);
    line-height: 1.15;
  }
  .article-dek {
    max-inline-size: 60ch;
    font-size: var(--text-lg);
    color: var(--color-fg-muted);
    text-wrap: pretty;
    margin-block-start: calc(var(--spacing) * 3);
  }
  .article-byline {
    margin: 0;
  }
  .kicker-longread {
    color: var(--color-fg-muted);
    letter-spacing: 0.12em;
  }
  .article-hero {
    margin: calc(var(--spacing) * 6) 0 0;
  }
  .article-hero img,
  .article-hero video {
    object-fit: cover;
    block-size: auto;
    inline-size: 100%;
  }
  .article-hero > figcaption {
    font-size: var(--text-sm);
    color: var(--color-fg-muted);
    text-wrap: pretty;
    margin-block-start: calc(var(--spacing) * 3);
  }
  .article-hero-portrait img {
    aspect-ratio: 4/5;
    max-block-size: 80dvh;
  }
  @media (width>=768px) {
    .article-hero {
      inline-size: min(100% - 2rem, 72rem);
      margin-inline: auto;
    }
    .article-hero img,
    .article-hero video {
      border-radius: var(--radius-lg);
    }
    .article-hero > figcaption {
      padding-inline: 0;
    }
    .article-hero-portrait img {
      inline-size: min(100%, 36rem);
      margin-inline: auto;
    }
  }
  .article-layout {
    gap: calc(var(--spacing) * 10);
    margin-block-start: calc(var(--spacing) * 8);
    display: grid;
  }
  .article-layout > * {
    min-inline-size: 0;
  }
  .article-rail {
    gap: calc(var(--spacing) * 6);
    border-block-start: 1px solid var(--color-line);
    align-content: start;
    padding-block-start: calc(var(--spacing) * 6);
    display: grid;
  }
  .article-rail-sticky,
  .article-rail-sticky > * {
    min-inline-size: 0;
  }
  .article-rail-sticky {
    gap: calc(var(--spacing) * 6);
    display: grid;
  }
  @media (width>=1024px) {
    .article-layout {
      justify-content: center;
      column-gap: calc(var(--spacing) * 8);
      grid-template-columns: minmax(0, 52rem) 18rem;
    }
    .article-rail {
      border-block-start: 0;
      border-inline-start: 1px solid var(--color-line);
      padding-block-start: 0;
      padding-inline-start: calc(var(--spacing) * 6);
    }
    .article-rail-sticky {
      position: sticky;
      inset-block-start: 6rem;
    }
  }
  .article-rail .facade-title {
    display: none;
  }
  .article-rail .facade-note {
    inset-block: auto calc(var(--spacing) * 3);
  }
  .prose-read {
    font-size: calc(var(--text-body-read) * var(--scale-reading));
  }
  .article-body > * + * {
    margin-block-start: 1.1em;
  }
  .article-body h2 {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    color: var(--color-fg);
    text-wrap: balance;
    margin-block-start: 1.8em;
    font-weight: 600;
    line-height: 1.2;
  }
  .article-body blockquote {
    border-inline-start: 3px solid var(--color-brand);
    font-family: var(--font-display);
    font-size: calc(var(--text-xl) * var(--scale-reading));
    color: var(--color-fg);
    margin-block: 1.6em;
    padding-inline-start: calc(var(--spacing) * 5);
    font-style: normal;
    line-height: 1.35;
  }
  .article-body ul {
    padding-inline-start: calc(var(--spacing) * 5);
    list-style: outside;
  }
  .article-body li + li {
    margin-block-start: 0.5em;
  }
  .article-figure > figcaption {
    font-size: var(--text-sm);
    color: var(--color-fg-muted);
    text-wrap: pretty;
  }
  .reading-page {
    background: var(--color-paper);
  }
  .pull-quote {
    padding-block: calc(var(--spacing) * 5);
    border-block: 1px solid var(--color-line);
    font-family: var(--font-display);
    font-size: calc(var(--text-2xl) * var(--scale-reading));
    color: var(--color-fg);
    text-wrap: balance;
    margin-block: 2em;
    font-weight: 600;
    line-height: 1.25;
  }
  div.pull-quote > p {
    margin: 0;
  }
  .pull-quote-mark {
    block-size: 1.75rem;
    inline-size: 1.75rem;
    color: var(--color-brand);
    margin-block-end: calc(var(--spacing) * 2);
  }
  @media (width>=1024px) {
    .pull-quote {
      inline-size: calc(100% + 8rem);
      margin-inline-start: -4rem;
      padding-inline: 4rem;
    }
  }
  .prose-drop-cap > p:first-of-type:first-letter {
    float: inline-start;
    font-family: var(--font-display);
    color: var(--color-brand);
    margin-inline-end: 0.08em;
    padding-block-start: 0.06em;
    font-size: 3.4em;
    font-weight: 600;
    line-height: 0.82;
  }
  html[lang="ar"] .prose-drop-cap > p:first-of-type:first-letter {
    float: none;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    margin-inline-end: 0;
  }
  html[lang="ar"] .prose-drop-cap > p:first-of-type {
    font-size: 1.15em;
    font-weight: 500;
  }
  .article-toc-open {
    margin-block-start: calc(var(--spacing) * 8);
  }
  @media (width>=1024px) {
    .reading-page .article-grid {
      column-gap: calc(var(--spacing) * 10);
      grid-template-columns: 14rem minmax(0, 52rem);
    }
  }
  .article-bar {
    z-index: var(--z-nav);
    padding-inline: calc(var(--spacing) * 3);
    pointer-events: none;
    transition:
      translate var(--dur-base) var(--ease-out),
      opacity var(--dur-base) var(--ease-out);
    justify-content: center;
    display: flex;
    position: fixed;
    inset-block-end: calc(4.5rem + env(safe-area-inset-bottom));
    inset-inline: 0;
  }
  .article-bar[data-hidden] {
    opacity: 0;
    translate: 0 150%;
  }
  .article-bar-inner {
    align-items: center;
    gap: calc(var(--spacing) * 1);
    max-inline-size: 100%;
    padding: calc(var(--spacing) * 1);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-full);
    background: var(--lightningcss-light, #f7f6f9eb) var(--lightningcss-dark, #151317eb);
    display: flex;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .article-bar-inner {
      background: color-mix(in oklch, var(--color-surface) 92%, transparent);
    }
  }
  .article-bar-inner {
    box-shadow: var(--shadow-float);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    pointer-events: auto;
    scrollbar-width: none;
    overflow-x: auto;
  }
  .article-bar-btn {
    border-radius: var(--radius-full);
    white-space: nowrap;
    min-block-size: 44px;
    min-inline-size: 44px;
  }
  .article-bar-label {
    clip-path: inset(50%);
    white-space: nowrap;
    block-size: 1px;
    inline-size: 1px;
    position: absolute;
    overflow: hidden;
  }
  @media (width>=480px) {
    .article-bar-label {
      clip-path: none;
      white-space: normal;
      block-size: auto;
      inline-size: auto;
      position: static;
      overflow: visible;
    }
  }
  @media (width>=1024px) {
    .article-bar {
      inset-block-end: calc(var(--spacing) * 6);
    }
  }
  .text-size-set {
    border: 0;
    margin: 0;
    padding: 0;
  }
  .text-size-options {
    gap: calc(var(--spacing) * 2);
    grid-template-columns: repeat(4, 1fr);
    margin-block-start: calc(var(--spacing) * 3);
    display: grid;
  }
  .text-size-option {
    align-content: center;
    justify-items: center;
    gap: calc(var(--spacing) * 1);
    min-block-size: 72px;
    padding: calc(var(--spacing) * 2);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    cursor: pointer;
    transition:
      border-color var(--dur-fast) var(--ease-out),
      background var(--dur-fast) var(--ease-out);
    display: grid;
  }
  .text-size-option > input {
    opacity: 0;
    block-size: 1px;
    inline-size: 1px;
    position: absolute;
  }
  .text-size-option > span[aria-hidden] {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1;
  }
  .text-size-option[data-size="s"] > span[aria-hidden] {
    font-size: 0.9rem;
  }
  .text-size-option[data-size="m"] > span[aria-hidden] {
    font-size: 1.15rem;
  }
  .text-size-option[data-size="l"] > span[aria-hidden] {
    font-size: 1.45rem;
  }
  .text-size-option[data-size="xl"] > span[aria-hidden] {
    font-size: 1.8rem;
  }
  .text-size-name {
    font-size: var(--text-xs);
    color: var(--color-fg-muted);
    text-align: center;
  }
  .text-size-option:has(> input:checked) {
    border-color: var(--color-brand);
    background: var(--color-surface-2);
  }
  .text-size-option:has(> input:focus-visible) {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
  }
  .facade-post {
    gap: calc(var(--spacing) * 3);
    aspect-ratio: auto;
    color: inherit;
    background: 0 0;
    display: grid;
  }
  .facade-post:after {
    display: none;
  }
  .facade-post .facade-play {
    place-self: start;
    min-block-size: 44px;
  }
  .facade-post-foot {
    gap: calc(var(--spacing) * 2);
    display: grid;
  }
  .facade-post .facade-note {
    color: var(--color-fg-muted);
    font-size: var(--text-xs);
    position: static;
  }
  .article-gallery {
    margin-block: calc(var(--spacing) * 8);
  }
  .article-gallery .gallery-link img {
    aspect-ratio: 3/2;
  }
  .article-video-player {
    aspect-ratio: 16/9;
    background: var(--color-surface-3);
    inline-size: 100%;
  }
  .article-foot {
    gap: calc(var(--spacing) * 6);
    border-block-start: 1px solid var(--color-line);
    margin-block-start: calc(var(--spacing) * 10);
    padding-block-start: calc(var(--spacing) * 6);
    display: grid;
  }
  .tag-list {
    gap: calc(var(--spacing) * 2);
    flex-wrap: wrap;
    display: flex;
  }
  .live-summary {
    padding: calc(var(--spacing) * 5);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
  }
  .live-summary-list {
    gap: calc(var(--spacing) * 2);
    margin-block-start: calc(var(--spacing) * 3);
    padding-inline-start: calc(var(--spacing) * 5);
    list-style: outside;
    display: grid;
  }
  .live-head {
    justify-content: space-between;
    align-items: baseline;
    gap: calc(var(--spacing) * 2);
    flex-wrap: wrap;
    margin-block-start: calc(var(--spacing) * 8);
    display: flex;
  }
  .live-count {
    font-size: var(--text-sm);
    color: var(--color-fg-muted);
  }
  .live-pill {
    align-items: center;
    gap: calc(var(--spacing) * 2);
    min-block-size: 44px;
    padding-inline: calc(var(--spacing) * 5);
    border-radius: var(--radius-full);
    background: var(--color-brand);
    color: var(--color-on-brand);
    font-size: var(--text-sm);
    box-shadow: var(--shadow-float);
    margin-block-start: calc(var(--spacing) * 4);
    font-weight: 600;
    display: inline-flex;
  }
  .live-pill:hover {
    background: var(--color-brand-strong);
  }
  .live-list {
    margin-block-start: calc(var(--spacing) * 6);
  }
  .live-item {
    padding-block-end: calc(var(--spacing) * 8);
    padding-inline-start: calc(var(--spacing) * 6);
    position: relative;
  }
  .live-item:before {
    content: "";
    inset-block: calc(var(--spacing) * 2) 0;
    background: var(--color-line);
    inline-size: 2px;
    position: absolute;
    inset-inline-start: 3px;
  }
  .live-item:last-child:before {
    display: none;
  }
  .live-dot {
    border-radius: var(--radius-full);
    background: var(--color-fg-subtle);
    block-size: 8px;
    inline-size: 8px;
    position: absolute;
    inset-block-start: calc(var(--spacing) * 1.5);
    inset-inline-start: 0;
  }
  .live-item[data-key-event] .live-dot {
    background: var(--color-live);
  }
  .live-item-time {
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    color: var(--color-fg-muted);
    font-weight: 500;
    display: flex;
  }
  .live-item-title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    text-wrap: balance;
    margin-block-start: calc(var(--spacing) * 2);
    font-weight: 600;
    line-height: 1.25;
  }
  .live-item-figure {
    margin-block-start: calc(var(--spacing) * 3);
  }
  .live-item .live-item-figure img {
    border-radius: var(--radius-md);
    inline-size: 100%;
  }
  .live-item-text {
    margin-block-start: calc(var(--spacing) * 2);
  }
  .key-events {
    gap: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    display: grid;
  }
  ol.key-events > li {
    gap: calc(var(--spacing) * 1);
    border-inline-start: 2px solid var(--color-live);
    padding-inline-start: calc(var(--spacing) * 4);
    display: grid;
  }
  .key-events time {
    color: var(--color-fg-muted);
    font-weight: 600;
  }
  .search-page,
  .saved-page {
    gap: calc(var(--spacing) * 6);
    max-inline-size: 48rem;
    display: grid;
  }
  .search-panel {
    gap: calc(var(--spacing) * 5);
    display: grid;
  }
  .search-form {
    gap: calc(var(--spacing) * 2);
    align-items: center;
    display: flex;
  }
  .search-field {
    flex: auto;
    display: block;
    position: relative;
  }
  .search-field-icon {
    color: var(--color-fg-subtle);
    pointer-events: none;
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: calc(var(--spacing) * 3);
    translate: 0 -50%;
  }
  .story-list {
    display: grid;
  }
  .empty-illustration {
    border-radius: var(--radius-full);
    background: var(--color-surface-2);
    block-size: 4rem;
    inline-size: 4rem;
    color: var(--color-fg-subtle);
    place-items: center;
    display: grid;
  }
  .empty-illustration > .icon {
    block-size: 1.75rem;
    inline-size: 1.75rem;
  }
  .author-hero {
    gap: calc(var(--spacing) * 4);
    border-block-end: 1px solid var(--color-line);
    align-items: start;
    margin-block-start: calc(var(--spacing) * 4);
    padding-block-end: calc(var(--spacing) * 6);
    display: grid;
  }
  .avatar-xl {
    block-size: 7rem;
    inline-size: 7rem;
  }
  @media (width>=768px) {
    .author-hero {
      grid-template-columns: auto minmax(0, 1fr);
    }
  }
  .author-stats {
    gap: calc(var(--spacing) * 3);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-block-start: calc(var(--spacing) * 3);
    display: grid;
  }
  .author-list {
    gap: calc(var(--spacing) * 1);
    margin-block-start: calc(var(--spacing) * 3);
    display: grid;
  }
  .author-item {
    gap: calc(var(--spacing) * 3);
    padding: calc(var(--spacing) * 2);
    border-radius: var(--radius-md);
    transition: background var(--dur-fast) var(--ease-out);
    align-items: center;
    display: flex;
  }
  .author-item:hover {
    background: var(--color-surface-2);
  }
  .video-hero {
    gap: calc(var(--spacing) * 4);
    margin-block-start: calc(var(--spacing) * 3);
    display: grid;
  }
  .video-hero .card-media {
    border-radius: var(--radius-lg);
    display: block;
    position: relative;
    overflow: hidden;
  }
  .video-play-lg {
    block-size: 3.25rem;
    inline-size: 3.25rem;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    translate: -50% -50%;
  }
  .video-hero .video-play-lg > .icon {
    block-size: 1.5rem;
    inline-size: 1.5rem;
  }
  @media (width>=1024px) {
    .video-hero {
      grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
      align-items: center;
    }
  }
  .video-grid {
    gap: calc(var(--spacing) * 5);
    display: grid;
  }
  @media (width>=640px) {
    .video-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (width>=1024px) {
    .video-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .letter-list {
    gap: calc(var(--spacing) * 1);
    margin-block-start: calc(var(--spacing) * 3);
    display: grid;
  }
  .letter-option {
    padding: calc(var(--spacing) * 2);
    border-radius: var(--radius-md);
    align-items: start;
  }
  .letter-option:hover {
    background: var(--color-surface-2);
  }
  .edition-list {
    gap: calc(var(--spacing) * 4);
    margin-block-start: calc(var(--spacing) * 3);
    display: grid;
  }
  .edition {
    gap: calc(var(--spacing) * 1);
    border-inline-start: 2px solid var(--color-line);
    padding-inline-start: calc(var(--spacing) * 4);
    display: grid;
  }
  .sub-head {
    max-inline-size: 44rem;
  }
  .plan-grid {
    gap: calc(var(--spacing) * 4);
    margin-block-start: calc(var(--spacing) * 6);
    display: grid;
  }
  @media (width>=48rem) {
    .plan-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      align-items: start;
    }
  }
  .plan {
    padding: calc(var(--spacing) * 5);
    flex-direction: column;
    display: flex;
  }
  .plan-featured {
    border-color: var(--color-brand);
    box-shadow: 0 0 0 1px var(--color-brand);
  }
  .plan-price {
    align-items: baseline;
    gap: calc(var(--spacing) * 2);
    flex-wrap: wrap;
    margin-block-start: calc(var(--spacing) * 4);
    display: flex;
  }
  .plan-features {
    gap: calc(var(--spacing) * 2);
    margin-block: calc(var(--spacing) * 4) auto;
    font-size: var(--text-sm);
    display: grid;
  }
  .plan-features > li {
    gap: calc(var(--spacing) * 2);
    align-items: start;
    display: flex;
  }
  .plan-features .icon {
    flex: none;
    margin-block-start: 2px;
  }
  .plan-mark {
    border-radius: var(--radius-md);
    background: var(--color-surface-2);
    block-size: 2.5rem;
    inline-size: 2.5rem;
    color: var(--color-brand);
    flex: none;
    place-items: center;
    display: grid;
  }
  .paywall-actions {
    gap: calc(var(--spacing) * 2);
    margin-block-start: calc(var(--spacing) * 5);
    display: grid;
  }
  .paywall-reset {
    text-align: center;
    margin-block-start: calc(var(--spacing) * 3);
  }
  .paywall-meter {
    block-size: 6px;
    inline-size: 100%;
    margin-block: calc(var(--spacing) * 2) calc(var(--spacing) * 1);
    appearance: none;
    border-radius: var(--radius-full);
    background: var(--color-surface-3);
    color: var(--color-brand);
    border: 0;
  }
  .paywall-meter::-webkit-progress-bar {
    border-radius: var(--radius-full);
    background: var(--color-surface-3);
  }
  .paywall-meter::-webkit-progress-value {
    border-radius: var(--radius-full);
    background: var(--color-brand);
  }
  .paywall-meter::-moz-progress-bar {
    border-radius: var(--radius-full);
    background: var(--color-brand);
  }
  .paywall-note {
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-block-start: 1px solid var(--color-line);
    font-size: var(--text-sm);
    color: var(--color-fg-muted);
    flex-wrap: wrap;
    margin-block-start: calc(var(--spacing) * 8);
    padding-block-start: calc(var(--spacing) * 4);
    display: flex;
  }
  .paywall-note .icon {
    color: var(--color-brand);
  }
}
@layer utilities {
  .pointer-events-none {
    pointer-events: none;
  }
  .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;
  }
  .relative {
    position: relative;
  }
  .static {
    position: static;
  }
  .sticky {
    position: sticky;
  }
  .start-3 {
    inset-inline-start: calc(var(--spacing) * 3);
  }
  .end-3 {
    inset-inline-end: calc(var(--spacing) * 3);
  }
  .top-1\/2 {
    top: 50%;
  }
  .top-3 {
    top: calc(var(--spacing) * 3);
  }
  .z-10 {
    z-index: 10;
  }
  .col-span-3 {
    grid-column: span 3 / span 3;
  }
  .col-span-4 {
    grid-column: span 4 / span 4;
  }
  .col-span-6 {
    grid-column: span 6 / span 6;
  }
  .col-span-8 {
    grid-column: span 8 / span 8;
  }
  .col-span-12 {
    grid-column: span 12 / span 12;
  }
  .mx-auto {
    margin-inline: auto;
  }
  .ms-1 {
    margin-inline-start: var(--spacing);
  }
  .ms-2 {
    margin-inline-start: calc(var(--spacing) * 2);
  }
  .ms-auto {
    margin-inline-start: auto;
  }
  .me-1\.5 {
    margin-inline-end: calc(var(--spacing) * 1.5);
  }
  .mt-0\.5 {
    margin-top: calc(var(--spacing) * 0.5);
  }
  .mt-1 {
    margin-top: var(--spacing);
  }
  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }
  .mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }
  .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-8 {
    margin-top: calc(var(--spacing) * 8);
  }
  .mt-10 {
    margin-top: calc(var(--spacing) * 10);
  }
  .mt-12 {
    margin-top: calc(var(--spacing) * 12);
  }
  .mt-auto {
    margin-top: auto;
  }
  .\!mb-0 {
    margin-bottom: 0 !important;
  }
  .mb-1 {
    margin-bottom: var(--spacing);
  }
  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }
  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }
  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .block {
    display: block;
  }
  .contents {
    display: contents;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .inline-flex {
    display: inline-flex;
  }
  .table {
    display: table;
  }
  .aspect-\[4\/5\] {
    aspect-ratio: 4/5;
  }
  .aspect-square {
    aspect-ratio: 1;
  }
  .aspect-video {
    aspect-ratio: var(--aspect-video);
  }
  .\!size-3\.5 {
    width: calc(var(--spacing) * 3.5) !important;
    height: calc(var(--spacing) * 3.5) !important;
  }
  .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-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-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-14 {
    width: calc(var(--spacing) * 14);
    height: calc(var(--spacing) * 14);
  }
  .size-16 {
    width: calc(var(--spacing) * 16);
    height: calc(var(--spacing) * 16);
  }
  .h-3 {
    height: calc(var(--spacing) * 3);
  }
  .h-4 {
    height: calc(var(--spacing) * 4);
  }
  .h-6 {
    height: calc(var(--spacing) * 6);
  }
  .h-full {
    height: 100%;
  }
  .min-h-10 {
    min-height: calc(var(--spacing) * 10);
  }
  .min-h-\[60dvh\] {
    min-height: 60dvh;
  }
  .w-1\/2 {
    width: 50%;
  }
  .w-1\/3 {
    width: 33.3333%;
  }
  .w-1\/4 {
    width: 25%;
  }
  .w-2\/3 {
    width: 66.6667%;
  }
  .w-3\/4 {
    width: 75%;
  }
  .w-8 {
    width: calc(var(--spacing) * 8);
  }
  .w-10 {
    width: calc(var(--spacing) * 10);
  }
  .w-16 {
    width: calc(var(--spacing) * 16);
  }
  .w-24 {
    width: calc(var(--spacing) * 24);
  }
  .w-40 {
    width: calc(var(--spacing) * 40);
  }
  .w-\[72vw\] {
    width: 72vw;
  }
  .w-auto {
    width: auto;
  }
  .w-full {
    width: 100%;
  }
  .max-w-2xl {
    max-width: var(--container-2xl);
  }
  .max-w-56 {
    max-width: calc(var(--spacing) * 56);
  }
  .max-w-64 {
    max-width: calc(var(--spacing) * 64);
  }
  .max-w-\[60ch\] {
    max-width: 60ch;
  }
  .max-w-lg {
    max-width: var(--container-lg);
  }
  .max-w-md {
    max-width: var(--container-md);
  }
  .max-w-prose {
    max-width: 65ch;
  }
  .max-w-sm {
    max-width: var(--container-sm);
  }
  .max-w-xl {
    max-width: var(--container-xl);
  }
  .max-w-xs {
    max-width: var(--container-xs);
  }
  .min-w-0 {
    min-width: 0;
  }
  .flex-1 {
    flex: 1;
  }
  .shrink-0 {
    flex-shrink: 0;
  }
  .-translate-y-1\/2 {
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .scroll-mt-24 {
    scroll-margin-top: calc(var(--spacing) * 24);
  }
  .list-inside {
    list-style-position: inside;
  }
  .list-decimal {
    list-style-type: decimal;
  }
  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .place-items-center {
    place-items: center;
  }
  .content-start {
    align-content: flex-start;
  }
  .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-items-center {
    justify-items: center;
  }
  .gap-0\.5 {
    gap: calc(var(--spacing) * 0.5);
  }
  .gap-1 {
    gap: var(--spacing);
  }
  .gap-1\.5 {
    gap: calc(var(--spacing) * 1.5);
  }
  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }
  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  .gap-5 {
    gap: calc(var(--spacing) * 5);
  }
  .gap-6 {
    gap: calc(var(--spacing) * 6);
  }
  .gap-8 {
    gap: calc(var(--spacing) * 8);
  }
  .gap-10 {
    gap: calc(var(--spacing) * 10);
  }
  .gap-x-1\.5 {
    column-gap: calc(var(--spacing) * 1.5);
  }
  .gap-x-2 {
    column-gap: calc(var(--spacing) * 2);
  }
  .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-y-1 {
    row-gap: var(--spacing);
  }
  .gap-y-2 {
    row-gap: calc(var(--spacing) * 2);
  }
  .self-start {
    align-self: flex-start;
  }
  .justify-self-center {
    justify-self: center;
  }
  .justify-self-start {
    justify-self: flex-start;
  }
  .truncate {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
  .overflow-clip {
    overflow: clip;
  }
  .rounded-\[12px\] {
    border-radius: 12px;
  }
  .rounded-full {
    border-radius: var(--radius-full);
  }
  .rounded-lg {
    border-radius: var(--radius-lg);
  }
  .rounded-md {
    border-radius: var(--radius-md);
  }
  .rounded-sm {
    border-radius: var(--radius-sm);
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }
  .border-brand {
    border-color: var(--color-brand);
  }
  .border-line {
    border-color: var(--color-line);
  }
  .bg-success\/15 {
    background-color: var(--lightningcss-light, #05893e26) var(--lightningcss-dark, #6fd08726);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-success\/15 {
      background-color: color-mix(in oklab, var(--color-success) 15%, transparent);
    }
  }
  .bg-surface {
    background-color: var(--color-surface);
  }
  .bg-surface-2 {
    background-color: var(--color-surface-2);
  }
  .fill-brand {
    fill: var(--color-brand);
  }
  .fill-current {
    fill: currentColor;
  }
  .stroke-on-brand {
    stroke: var(--color-on-brand);
  }
  .object-cover {
    object-fit: cover;
  }
  .p-1 {
    padding: var(--spacing);
  }
  .p-2 {
    padding: calc(var(--spacing) * 2);
  }
  .p-3 {
    padding: calc(var(--spacing) * 3);
  }
  .p-4 {
    padding: calc(var(--spacing) * 4);
  }
  .p-5 {
    padding: calc(var(--spacing) * 5);
  }
  .px-1 {
    padding-inline: var(--spacing);
  }
  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }
  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }
  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }
  .py-1 {
    padding-block: var(--spacing);
  }
  .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-4 {
    padding-block: calc(var(--spacing) * 4);
  }
  .py-6 {
    padding-block: calc(var(--spacing) * 6);
  }
  .py-8 {
    padding-block: calc(var(--spacing) * 8);
  }
  .py-10 {
    padding-block: calc(var(--spacing) * 10);
  }
  .py-16 {
    padding-block: calc(var(--spacing) * 16);
  }
  .ps-9 {
    padding-inline-start: calc(var(--spacing) * 9);
  }
  .ps-10 {
    padding-inline-start: calc(var(--spacing) * 10);
  }
  .pe-3 {
    padding-inline-end: calc(var(--spacing) * 3);
  }
  .pt-1 {
    padding-top: var(--spacing);
  }
  .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-6 {
    padding-top: calc(var(--spacing) * 6);
  }
  .pb-3 {
    padding-bottom: calc(var(--spacing) * 3);
  }
  .pb-10 {
    padding-bottom: calc(var(--spacing) * 10);
  }
  .pb-16 {
    padding-bottom: calc(var(--spacing) * 16);
  }
  .pb-20 {
    padding-bottom: calc(var(--spacing) * 20);
  }
  .text-center {
    text-align: center;
  }
  .text-end {
    text-align: end;
  }
  .text-start {
    text-align: start;
  }
  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }
  .text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }
  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }
  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .text-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-display {
    font-size: var(--text-display);
  }
  .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-normal {
    --tw-tracking: var(--tracking-normal);
    letter-spacing: var(--tracking-normal);
  }
  .tracking-wide {
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
  }
  .text-balance {
    text-wrap: balance;
  }
  .text-pretty {
    text-wrap: pretty;
  }
  .text-wrap {
    text-wrap: wrap;
  }
  .whitespace-nowrap {
    white-space: nowrap;
  }
  .whitespace-pre-line {
    white-space: pre-line;
  }
  .text-brand {
    color: var(--color-brand);
  }
  .text-danger {
    color: var(--color-danger);
  }
  .text-fg {
    color: var(--color-fg);
  }
  .text-fg-muted {
    color: var(--color-fg-muted);
  }
  .text-fg-subtle {
    color: var(--color-fg-subtle);
  }
  .text-success {
    color: var(--color-success);
  }
  .text-warning {
    color: var(--color-warning);
  }
  .normal-case {
    text-transform: none;
  }
  .uppercase {
    text-transform: uppercase;
  }
  .italic {
    font-style: italic;
  }
  .not-italic {
    font-style: normal;
  }
  .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;
  }
  .underline-offset-2 {
    text-underline-offset: 2px;
  }
  .underline-offset-4 {
    text-underline-offset: 4px;
  }
  .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,);
  }
  .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,);
  }
  @media (hover: hover) {
    .hover\:bg-surface-2:hover {
      background-color: var(--color-surface-2);
    }
    .hover\:text-fg:hover {
      color: var(--color-fg);
    }
    .hover\:underline:hover {
      text-decoration-line: underline;
    }
  }
  @media not all and (width>=64rem) {
    .max-lg\:hidden {
      display: none;
    }
  }
  @media not all and (width>=48rem) {
    .max-md\:hidden {
      display: none;
    }
  }
  @media (width>=40rem) {
    .sm\:col-span-3 {
      grid-column: span 3 / span 3;
    }
    .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-\[1\.4fr_1fr_1fr\] {
      grid-template-columns: 1.4fr 1fr 1fr;
    }
    .sm\:grid-cols-\[1fr_1fr_auto\] {
      grid-template-columns: 1fr 1fr auto;
    }
    .sm\:grid-cols-\[1fr_2fr\] {
      grid-template-columns: 1fr 2fr;
    }
    .sm\:items-end {
      align-items: flex-end;
    }
  }
  @media (width>=48rem) {
    .md\:sticky {
      position: sticky;
    }
    .md\:top-20 {
      top: calc(var(--spacing) * 20);
    }
    .md\:col-span-2 {
      grid-column: span 2 / span 2;
    }
    .md\:mt-0 {
      margin-top: 0;
    }
    .md\:mt-16 {
      margin-top: calc(var(--spacing) * 16);
    }
    .md\:block {
      display: block;
    }
    .md\:grid {
      display: grid;
    }
    .md\:hidden {
      display: none;
    }
    .md\:aspect-video {
      aspect-ratio: var(--aspect-video);
    }
    .md\:w-52 {
      width: calc(var(--spacing) * 52);
    }
    .md\:w-56 {
      width: calc(var(--spacing) * 56);
    }
    .md\:w-full {
      width: 100%;
    }
    .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-\[1fr_minmax\(280px\,340px\)\] {
      grid-template-columns: 1fr minmax(280px, 340px);
    }
    .md\:grid-cols-\[14rem_1fr\] {
      grid-template-columns: 14rem 1fr;
    }
    .md\:grid-cols-\[auto_1fr\] {
      grid-template-columns: auto 1fr;
    }
    .md\:items-start {
      align-items: flex-start;
    }
    .md\:gap-8 {
      gap: calc(var(--spacing) * 8);
    }
    .md\:self-start {
      align-self: flex-start;
    }
    .md\:p-3 {
      padding: calc(var(--spacing) * 3);
    }
    .md\:p-5 {
      padding: calc(var(--spacing) * 5);
    }
    .md\:p-6 {
      padding: calc(var(--spacing) * 6);
    }
    .md\:py-8 {
      padding-block: calc(var(--spacing) * 8);
    }
    .md\:py-10 {
      padding-block: calc(var(--spacing) * 10);
    }
    .md\:py-12 {
      padding-block: calc(var(--spacing) * 12);
    }
    .md\:py-14 {
      padding-block: calc(var(--spacing) * 14);
    }
    .md\:pt-8 {
      padding-top: calc(var(--spacing) * 8);
    }
    .md\:pt-10 {
      padding-top: calc(var(--spacing) * 10);
    }
    .md\:text-3xl {
      font-size: var(--text-3xl);
      line-height: var(--tw-leading, var(--text-3xl--line-height));
    }
    .md\:text-4xl {
      font-size: var(--text-4xl);
      line-height: var(--tw-leading, var(--text-4xl--line-height));
    }
  }
  @media (width>=64rem) {
    .lg\:col-span-1 {
      grid-column: span 1 / span 1;
    }
    .lg\:col-start-4 {
      grid-column-start: 4;
    }
    .lg\:row-start-1 {
      grid-row-start: 1;
    }
    .lg\:mx-auto {
      margin-inline: auto;
    }
    .lg\:block {
      display: block;
    }
    .lg\:grid {
      display: grid;
    }
    .lg\:hidden {
      display: none;
    }
    .lg\:inline-flex {
      display: inline-flex;
    }
    .lg\:w-\[min\(100\%-2rem\,72rem\)\] {
      width: min(100% - 2rem, 72rem);
    }
    .lg\:w-auto {
      width: auto;
    }
    .lg\:max-w-none {
      max-width: none;
    }
    .lg\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .lg\:grid-cols-5 {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    .lg\:grid-cols-\[1\.4fr_1fr_1fr_1\.4fr\] {
      grid-template-columns: 1.4fr 1fr 1fr 1.4fr;
    }
    .lg\:grid-cols-\[2fr_1fr\] {
      grid-template-columns: 2fr 1fr;
    }
    .lg\:gap-12 {
      gap: calc(var(--spacing) * 12);
    }
    .lg\:overflow-visible {
      overflow: visible;
    }
    .lg\:px-0 {
      padding-inline: 0;
    }
    .lg\:pb-0 {
      padding-bottom: 0;
    }
  }
}
[data-accent="ink"] {
  --color-brand: var(--lightningcss-light, oklch(38% 0.13 305)) var(--lightningcss-dark, oklch(80% 0.1 305));
  --color-brand-strong: var(--lightningcss-light, oklch(30% 0.13 305)) var(--lightningcss-dark, oklch(87% 0.08 305));
  --color-on-brand: var(--lightningcss-light, oklch(99% 0 0)) var(--lightningcss-dark, oklch(18% 0.04 305));
}
[data-accent="newsprint"] {
  --color-brand: var(--lightningcss-light, oklch(48% 0.19 25)) var(--lightningcss-dark, oklch(78% 0.14 25));
  --color-brand-strong: var(--lightningcss-light, oklch(40% 0.19 25)) var(--lightningcss-dark, oklch(85% 0.12 25));
  --color-on-brand: var(--lightningcss-light, oklch(99% 0 0)) var(--lightningcss-dark, oklch(18% 0.05 25));
}
[data-accent="navy"] {
  --color-brand: var(--lightningcss-light, oklch(40% 0.14 255)) var(--lightningcss-dark, oklch(80% 0.1 255));
  --color-brand-strong: var(--lightningcss-light, oklch(32% 0.14 255)) var(--lightningcss-dark, oklch(87% 0.08 255));
  --color-on-brand: var(--lightningcss-light, oklch(99% 0 0)) var(--lightningcss-dark, oklch(18% 0.04 255));
}
[data-accent="forest"] {
  --color-brand: var(--lightningcss-light, oklch(40% 0.12 160)) var(--lightningcss-dark, oklch(80% 0.1 160));
  --color-brand-strong: var(--lightningcss-light, oklch(32% 0.12 160)) var(--lightningcss-dark, oklch(87% 0.08 160));
  --color-on-brand: var(--lightningcss-light, oklch(99% 0 0)) var(--lightningcss-dark, oklch(18% 0.04 160));
}
[data-accent="slate"] {
  --color-brand: var(--lightningcss-light, oklch(36% 0.02 260)) var(--lightningcss-dark, oklch(82% 0.02 260));
  --color-brand-strong: var(--lightningcss-light, oklch(28% 0.02 260)) var(--lightningcss-dark, oklch(90% 0.02 260));
  --color-on-brand: var(--lightningcss-light, oklch(99% 0 0)) var(--lightningcss-dark, oklch(18% 0.02 260));
}
[data-accent="amber"] {
  --color-brand: var(--lightningcss-light, oklch(46% 0.13 70)) var(--lightningcss-dark, oklch(82% 0.12 70));
  --color-brand-strong: var(--lightningcss-light, oklch(38% 0.13 70)) var(--lightningcss-dark, oklch(88% 0.1 70));
  --color-on-brand: var(--lightningcss-light, oklch(99% 0 0)) var(--lightningcss-dark, oklch(20% 0.05 70));
}
html[lang="ar"] {
  --font-display: var(--font-arabic);
}
@font-face {
  font-family: Inter Variable;
  src: url(../../fonts/inter-variable.woff2) format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: Newsreader Variable;
  src: url(../../fonts/newsreader-variable.woff2) format("woff2-variations");
  font-weight: 200 800;
  font-display: swap;
  unicode-range:
    U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: IBM Plex Sans Arabic;
  src: url(../../fonts/ibm-plex-sans-arabic-regular.woff2) format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: IBM Plex Sans Arabic;
  src: url(../../fonts/ibm-plex-sans-arabic-semibold.woff2) format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: IBM Plex Sans Arabic;
  src: url(../../fonts/ibm-plex-sans-arabic-bold.woff2) format("woff2");
  font-weight: 700;
  font-display: swap;
}
@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-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@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-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;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}