/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji';
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
    monospace;
    --color-zinc-50: oklch(98.5% 0 0);
    --color-zinc-100: oklch(96.7% 0.001 286.375);
    --color-zinc-200: oklch(92% 0.004 286.32);
    --color-zinc-400: oklch(70.5% 0.015 286.067);
    --color-zinc-500: oklch(55.2% 0.016 285.938);
    --color-zinc-700: oklch(37% 0.013 285.805);
    --color-white: #fff;
    --spacing: 0.25rem;
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --tracking-tight: -0.025em;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-relaxed: 1.625;
    --radius-sm: 0.25rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji');
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    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 {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :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)) {
        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, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-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']), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden='until-found'])) {
    display: none!important;
  }
}
@layer utilities {
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
  }
  .absolute {
    position: absolute;
  }
  .relative {
    position: relative;
  }
  .sticky {
    position: sticky;
  }
  .-top-2 {
    top: calc(var(--spacing) * -2);
  }
  .top-0 {
    top: calc(var(--spacing) * 0);
  }
  .top-1\/2 {
    top: calc(1/2 * 100%);
  }
  .-right-2 {
    right: calc(var(--spacing) * -2);
  }
  .right-1\.5 {
    right: calc(var(--spacing) * 1.5);
  }
  .left-3\.5 {
    left: calc(var(--spacing) * 3.5);
  }
  .z-50 {
    z-index: 50;
  }
  .mx-auto {
    margin-inline: auto;
  }
  .mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }
  .mt-10 {
    margin-top: calc(var(--spacing) * 10);
  }
  .mt-12 {
    margin-top: calc(var(--spacing) * 12);
  }
  .mb-1\.5 {
    margin-bottom: calc(var(--spacing) * 1.5);
  }
  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }
  .ml-2 {
    margin-left: calc(var(--spacing) * 2);
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline-flex {
    display: inline-flex;
  }
  .h-4 {
    height: calc(var(--spacing) * 4);
  }
  .h-5 {
    height: calc(var(--spacing) * 5);
  }
  .h-6 {
    height: calc(var(--spacing) * 6);
  }
  .h-9 {
    height: calc(var(--spacing) * 9);
  }
  .h-10 {
    height: calc(var(--spacing) * 10);
  }
  .h-16 {
    height: calc(var(--spacing) * 16);
  }
  .w-4 {
    width: calc(var(--spacing) * 4);
  }
  .w-5 {
    width: calc(var(--spacing) * 5);
  }
  .w-6 {
    width: calc(var(--spacing) * 6);
  }
  .w-9 {
    width: calc(var(--spacing) * 9);
  }
  .w-10 {
    width: calc(var(--spacing) * 10);
  }
  .w-full {
    width: 100%;
  }
  .w-max {
    width: max-content;
  }
  .max-w-\[1600px\] {
    max-width: 1600px;
  }
  .min-w-\[1\.1rem\] {
    min-width: 1.1rem;
  }
  .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);
  }
  .cursor-pointer {
    cursor: pointer;
  }
  .flex-col {
    flex-direction: column;
  }
  .place-items-center {
    place-items: center;
  }
  .items-center {
    align-items: center;
  }
  .items-start {
    align-items: flex-start;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }
  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  .space-y-4 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .rounded-2xl {
    border-radius: var(--radius-2xl);
  }
  .rounded-full {
    border-radius: calc(infinity * 1px);
  }
  .rounded-lg {
    border-radius: var(--radius-lg);
  }
  .rounded-sm {
    border-radius: var(--radius-sm);
  }
  .rounded-xl {
    border-radius: var(--radius-xl);
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }
  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  .border-zinc-200 {
    border-color: var(--color-zinc-200);
  }
  .bg-white {
    background-color: var(--color-white);
  }
  .bg-white\/90 {
    background-color: color-mix(in srgb, #fff 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 90%, transparent);
    }
  }
  .bg-zinc-50\/70 {
    background-color: color-mix(in srgb, oklch(98.5% 0 0) 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-zinc-50) 70%, transparent);
    }
  }
  .p-2 {
    padding: calc(var(--spacing) * 2);
  }
  .p-4 {
    padding: calc(var(--spacing) * 4);
  }
  .px-1 {
    padding-inline: calc(var(--spacing) * 1);
  }
  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }
  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }
  .py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5);
  }
  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }
  .py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5);
  }
  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }
  .py-8 {
    padding-block: calc(var(--spacing) * 8);
  }
  .py-10 {
    padding-block: calc(var(--spacing) * 10);
  }
  .pt-3 {
    padding-top: calc(var(--spacing) * 3);
  }
  .pr-12 {
    padding-right: calc(var(--spacing) * 12);
  }
  .pl-11 {
    padding-left: calc(var(--spacing) * 11);
  }
  .text-center {
    text-align: center;
  }
  .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-\[11px\] {
    font-size: 11px;
  }
  .text-\[15px\] {
    font-size: 15px;
  }
  .leading-relaxed {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }
  .leading-snug {
    --tw-leading: var(--leading-snug);
    line-height: var(--leading-snug);
  }
  .leading-tight {
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
  }
  .font-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-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .tracking-tight {
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }
  .text-white {
    color: var(--color-white);
  }
  .text-zinc-400 {
    color: var(--color-zinc-400);
  }
  .text-zinc-500 {
    color: var(--color-zinc-500);
  }
  .text-zinc-700 {
    color: var(--color-zinc-700);
  }
  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-1 {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-2 {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .backdrop-blur {
    --tw-backdrop-blur: blur(8px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-transform {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .outline-none {
    --tw-outline-style: none;
    outline-style: none;
  }
  .group-open\:rotate-180 {
    &:is(:where(.group):is([open], :popover-open, :open) *) {
      rotate: 180deg;
    }
  }
  .hover\:bg-zinc-100 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-zinc-100);
      }
    }
  }
  .hover\:shadow-sm {
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .hover\:brightness-95 {
    &:hover {
      @media (hover: hover) {
        --tw-brightness: brightness(95%);
        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,);
      }
    }
  }
  .focus\:bg-white {
    &:focus {
      background-color: var(--color-white);
    }
  }
  .focus\:ring-2 {
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .sm\:inline {
    @media (width >= 40rem) {
      display: inline;
    }
  }
  .sm\:inline-flex {
    @media (width >= 40rem) {
      display: inline-flex;
    }
  }
  .sm\:flex-row {
    @media (width >= 40rem) {
      flex-direction: row;
    }
  }
  .sm\:items-center {
    @media (width >= 40rem) {
      align-items: center;
    }
  }
  .sm\:gap-3 {
    @media (width >= 40rem) {
      gap: calc(var(--spacing) * 3);
    }
  }
  .sm\:px-6 {
    @media (width >= 40rem) {
      padding-inline: calc(var(--spacing) * 6);
    }
  }
  .sm\:text-2xl {
    @media (width >= 40rem) {
      font-size: var(--text-2xl);
      line-height: var(--tw-leading, var(--text-2xl--line-height));
    }
  }
  .sm\:text-sm {
    @media (width >= 40rem) {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }
  }
  .sm\:text-xl {
    @media (width >= 40rem) {
      font-size: var(--text-xl);
      line-height: var(--tw-leading, var(--text-xl--line-height));
    }
  }
  .md\:flex {
    @media (width >= 48rem) {
      display: flex;
    }
  }
  .md\:hidden {
    @media (width >= 48rem) {
      display: none;
    }
  }
  .lg\:px-8 {
    @media (width >= 64rem) {
      padding-inline: calc(var(--spacing) * 8);
    }
  }
}
@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-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-sepia {
  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;
}
@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-space-y-reverse: 0;
      --tw-border-style: solid;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: 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;
    }
  }
}

		
						
	
	

/* ===================================================================
   Minimal Tailwind-like CSS (subset) for the provided template
   - Includes custom colors: accent, ink
   - Includes common utilities used in the HTML
   - Responsive breakpoints: sm (640px), md (768px), lg (1024px), xl (1280px)
   NOTE: This is a handcrafted subset, not the full Tailwind build.
=================================================================== */

/* -------------------- CSS Reset (modern) -------------------- */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
html:focus-within{scroll-behavior:smooth}
body{margin:0;text-rendering:optimizeSpeed;line-height:1.5}
img,picture,video,canvas,svg{display:block;max-width:100%}
input,button,textarea,select{font:inherit}
p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}
:root{--tw-ring-color: currentColor}

/* -------------------- Color Variables -------------------- */
:root{
  /* Accent scale */
  --accent-50:#fff1f2;--accent-100:#ffe4e6;--accent-200:#fecdd3;--accent-300:#fda4af;
  --accent-400:#fb7185;--accent-500:#ef4444;--accent-600:#dc2626;--accent-700:#b91c1c;
  --accent-800:#991b1b;--accent-900:#7f1d1d;

  /* Ink scale (neutral darks) */
  --ink-50:#f7f7f7;--ink-100:#efefef;--ink-200:#e5e5e5;--ink-300:#d4d4d4;--ink-400:#a3a3a3;
  --ink-500:#737373;--ink-600:#525252;--ink-700:#404040;--ink-800:#262626;--ink-900:#171717;

  /* Zinc subset (used in markup) */
  --zinc-50:#fafafa;--zinc-100:#f4f4f5;--zinc-200:#e4e4e7;--zinc-400:#a1a1aa;
  --zinc-500:#71717a;--zinc-700:#3f3f46;
}

/* -------------------- Typography / font -------------------- */
.font-jp{font-family:"Noto Sans JP",ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Noto Sans","Helvetica Neue",Arial,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji",sans-serif}

/* -------------------- Layout / container -------------------- */
.max-w-\[1600px\]{max-width:1600px}
.mx-auto{margin-left:auto;margin-right:auto}
/* spacing (px-* / py-* / p-* / m-*) */
.p-2{padding:.5rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}
.px-3{padding-left:.75rem;padding-right:.75rem}
.px-4{padding-left:1rem;padding-right:1rem}
.px-6{padding-left:1.5rem;padding-right:1.5rem}
.px-8{padding-left:2rem;padding-right:2rem}
.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}
.py-2{padding-top:.5rem;padding-bottom:.5rem}
.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}
.py-3{padding-top:.75rem;padding-bottom:.75rem}
.py-8{padding-top:2rem;padding-bottom:2rem}
.py-10{padding-top:2.5rem;padding-bottom:2.5rem}
.pt-3{padding-top:.75rem}
.pb-0{padding-bottom:0}
.mb-1\.5{margin-bottom:.375rem}
.mb-4{margin-bottom:1rem}
.mb-6{margin-bottom:1.5rem}
.mt-10{margin-top:2.5rem}
.mt-12{margin-top:3rem}

/* gap */
.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}

/* display & positioning */
.block{display:block}.inline-block{display:inline-block}.inline-flex{display:inline-flex}
.flex{display:flex}.grid{display:grid}
.hidden{display:none}
.sticky{position:sticky}.relative{position:relative}.absolute{position:absolute}
.top-0{top:0}.z-50{z-index:50}
/* sizes */
.w-full{width:100%}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}
.w-9{width:2.25rem}.w-10{width:2.5rem}
.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}
.h-9{height:2.25rem}.h-10{height:2.5rem}.h-16{height:4rem}
.min-w-\[1\.1rem\]{min-width:1.1rem}
/* grid helpers */
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.sm\:grid-cols-2{}
.lg\:grid-cols-3{}
.xl\:grid-cols-4{}
/* We'll set via media queries below */

/* flex helpers */
.items-center{align-items:center}.justify-between{justify-content:space-between}
.justify-center{justify-content:center}.flex-1{flex:1 1 0%}

/* text */
.text-center{text-align:center}
.leading-tight{line-height:1.25}
.leading-snug{line-height:1.375}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* radius */
.rounded{border-radius:.25rem}
.rounded-sm{border-radius:.125rem}
.rounded-lg{border-radius:.5rem}
.rounded-xl{border-radius:.75rem}
.rounded-2xl{border-radius:1rem}
.rounded-full{border-radius:9999px}

/* borders */
.border{border-width:1px}
.border-t{border-top-width:1px}
.border-b{border-bottom-width:1px}
.border-ink-100{border-color:var(--ink-100)}
.border-ink-200{border-color:var(--ink-200)}
.border-accent-100{border-color:var(--accent-100)}
.border-accent-700\/70{border-color:rgba(185,28,28,.7)}
.border-zinc-200{border-color:var(--zinc-200)}

/* shadows */
.shadow{box-shadow:0 1px 2px rgba(0,0,0,.05)}
.shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05)}
.shadow-card{box-shadow:0 8px 24px rgba(0,0,0,.08)}

/* backdrop blur */
.backdrop-blur{backdrop-filter:blur(8px)}

/* ring (approximation of Tailwind's ring) */
.ring-1{box-shadow:0 0 0 1px var(--tw-ring-color)}
.ring-2{box-shadow:0 0 0 2px var(--tw-ring-color)}
.ring-accent{--tw-ring-color: var(--accent-600)}
.ring-accent\/20{--tw-ring-color: rgba(220,38,38,.2)}
.focus\:ring-2:focus{box-shadow:0 0 0 2px var(--tw-ring-color)}
.focus\:border-accent:focus{border-color:var(--accent-600)}
.outline-none{outline:2px solid transparent;outline-offset:2px}

/* background colors (with some opacity variants used) */
.bg-white{background-color:#fff}
.bg-white\/90{background-color:rgba(255,255,255,.9)}
.bg-black{background-color:#000}
.bg-ink-50{background-color:var(--ink-50)}
.bg-ink-900{background-color:var(--ink-900)}
.bg-ink-200{background-color:var(--ink-200)}
.bg-zinc-50\/70{background-color:rgba(250,250,250,.7)}
.bg-zinc-100{background-color:var(--zinc-100)}
.bg-accent{background-color:var(--accent-600)}
.bg-accent-100{background-color:var(--accent-100)}
.bg-accent-600{background-color:var(--accent-600)}
.bg-accent-700{background-color:var(--accent-700)}
.bg-accent\/10{background-color:rgba(220,38,38,.1)}
/* hover backgrounds */
.hover\:bg-zinc-100:hover{background-color:var(--zinc-100)}
.hover\:bg-accent-700:hover{background-color:var(--accent-700)}
.hover\:bg-accent\/15:hover{background-color:rgba(220,38,38,.15)}

/* text colors / sizes / weights */
.text-ink-800{color:var(--ink-800)}
.text-ink-700{color:var(--ink-700)}
.text-ink-600{color:var(--ink-600)}
.text-ink-500{color:var(--ink-500)}
.text-ink-400{color:var(--ink-400)}
.text-zinc-400{color:var(--zinc-400)}
.text-zinc-500{color:var(--zinc-500)}
.text-zinc-700{color:var(--zinc-700)}
.text-accent{color:var(--accent-600)}
.text-accent-500{color:var(--accent-500)}
.text-accent-600{color:var(--accent-600)}
.text-accent-700{color:var(--accent-700)}
.text-white{color:#fff}
.text-black{color:#000}

.text-xs{font-size:.75rem;line-height:1rem}
.text-sm{font-size:.875rem;line-height:1.25rem}
.text-[11px]{font-size:.6875rem;line-height:1rem}
.text-[12px]{font-size:.75rem;line-height:1rem}
.text-lg{font-size:1.125rem;line-height:1.75rem}
.text-xl{font-size:1.25rem;line-height:1.75rem}
.text-2xl{font-size:1.5rem;line-height:2rem}
.font-medium{font-weight:500}
.font-semibold{font-weight:600}
.font-bold{font-weight:700}
.tracking-tight{letter-spacing:-.01em}

/* alignment helpers */
.inline-flex{display:inline-flex;align-items:center}
.grid.place-items-center{display:grid;place-items:center}

/* icons / transforms */
.rotate-180{transform:rotate(180deg)}
.group-open\:rotate-180{transition:transform .2s ease}
/* For <details class="group"> */
details.group[open] .group-open\:rotate-180{transform:rotate(180deg)}

/* visibility */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* buttons / misc */
.hover\:shadow-lg:hover{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05)}
.hover\:brightness-95:hover{filter:brightness(95%)}

/* opacity-like utilities from the original (handled inline where used) */

/* -------------- Responsive Breakpoints -------------- */
@media (min-width:640px){
  .sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}
  .sm\:text-sm{font-size:.875rem;line-height:1.25rem}
  .sm\:text-xl{font-size:1.25rem;line-height:1.75rem}
  .sm\:text-2xl{font-size:1.5rem;line-height:2rem}
  .sm\:inline{display:inline}
  .sm\:inline-flex{display:inline-flex}
  .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:768px){
  .md\:hidden{display:none}
  .md\:flex{display:flex}
}
@media (min-width:1024px){
  .lg\:px-8{padding-left:2rem;padding-right:2rem}
  .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1280px){
  .xl\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* -------------------- Components specific to template -------------------- */

/* Asanoha subtle pattern (uses currentColor) */
.bg-asanoha{
  background-image:
    radial-gradient(currentColor 1px, transparent 1px),
    radial-gradient(currentColor 1px, transparent 1px);
  background-size:28px 28px,28px 28px;
  background-position:0 0,14px 14px;
  color: rgba(239,68,68,.08); /* accent-500 with low alpha */
}

/* Masonry helpers present in <style> in HTML are left to the inline CSS */

/* Ranking badges (top 1-3) */
.rank-top-1,.rank-top-2,.rank-top-3{
  border:1px solid #fecaca;background:#fff5f5;color:#b91c1c;
}

/* Forms */
input[type="search"]{
  background-clip:padding-box;
  transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

/* Utility combinations used in template */
.border-b{border-bottom-width:1px}
.border-t{border-top-width:1px}
.ring-2{box-shadow:0 0 0 2px var(--tw-ring-color)}
.pl-11{padding-left:2.75rem}
.pr-12{padding-right:3rem}
.right-1\.5{right:.375rem}
.left-3\.5{left:.875rem}
.-top-2{top:-.5rem}
.-right-2{right:-.5rem}
.top-1\/2{top:50%}
.-translate-y-1\/2{transform:translateY(-50%)}
/* compose transforms when both translate and rotate may appear */
.transform{transform:translate(var(--tw-translate-x,0),var(--tw-translate-y,0)) rotate(var(--tw-rotate,0))}

/* Link hovers */
.hover\:text-accent-600:hover{color:var(--accent-600)}

/* Background hover for cards */
.hover\:bg-ink-50:hover{background-color:var(--ink-50)}

/* Buttons */
button, .button{cursor:pointer}

/* Details/summary caret smoothing */
summary{list-style:none}
summary::-webkit-details-marker{display:none}
	

    /* Patrón asanoha suave */
    .bg-asanoha{
      background-image:
        radial-gradient(currentColor 1px, transparent 1px),
        radial-gradient(currentColor 1px, transparent 1px);
      background-size:28px 28px,28px 28px;
      background-position:0 0,14px 14px;
      color: rgba(239,68,68,.08);
    }
    .ranking-num{ width:1.75rem; height:1.75rem; }

    /* ===== Masonry grid ===== */
    #masonry{
      display:grid;
      grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
      grid-auto-rows:6px;      /* unidad base para el span */
      gap:16px;
      width:100%;
    }
    .masonry-item{ min-width:0; }
    .card-inner{ padding:12px; }

    /* ===== Lista con scroll al hover (10 filas aprox.) ===== */
    .list-clip{
      max-height:440px;
      overflow:hidden;
      scrollbar-width:none;
    }
    .group:hover .list-clip{
      overflow:auto;
      scrollbar-width:thin;
      scrollbar-color:#b91c1c #f1f5f9;
    }
    .list-clip::-webkit-scrollbar{ width:0; }
    .group:hover .list-clip::-webkit-scrollbar{ width:8px; }
    .group:hover .list-clip::-webkit-scrollbar-track{ background:#f1f5f9; border-radius:9999px; }
    .group:hover .list-clip::-webkit-scrollbar-thumb{ background:#b91c1c; border-radius:9999px; }

    /* Top 1-3 */
    .rank-top-1,.rank-top-2,.rank-top-3{ border:1px solid #fecaca; background:#fff5f5; color:#b91c1c; }

    /* Compactación */
    ul li{ padding-top:.35rem !important; padding-bottom:.35rem !important; }
    ul li a{ font-size:.83rem !important; line-height:1.2; }
    .ranking-num{ width:1.4rem !important; height:1.4rem !important; font-size:.7rem !important; }
    .text-xs, .text-[11px], .text-[12px]{ font-size:.75rem !important; }
    section.bg-white header{ padding-top:.6rem !important; padding-bottom:.6rem !important; }
    section.bg-white footer{ padding-top:.6rem !important; padding-bottom:.6rem !important; }
    section.bg-white ul{ padding:.3rem .25rem !important; }