/*! tailwindcss v4.1.10 | 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-red-400: oklch(70.4% 0.191 22.216);
    --color-red-500: oklch(63.7% 0.237 25.331);
    --color-red-900: oklch(39.6% 0.141 25.723);
    --color-yellow-500: oklch(79.5% 0.184 86.047);
    --color-gray-100: oklch(96.7% 0.003 264.542);
    --color-gray-300: oklch(87.2% 0.01 258.338);
    --color-gray-400: oklch(70.7% 0.022 261.325);
    --color-gray-500: oklch(55.1% 0.027 264.364);
    --color-black: #000;
    --color-white: #fff;
    --spacing: 0.25rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-lg: 32rem;
    --container-2xl: 42rem;
    --container-5xl: 64rem;
    --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-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --text-5xl: 3rem;
    --text-5xl--line-height: 1;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --tracking-tight: -0.025em;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --tracking-widest: 0.1em;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-relaxed: 1.625;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    --blur-sm: 8px;
    --blur-md: 12px;
    --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);
    --color-cyberBg: #0b0c10;
    --color-cyberDark: #12141c;
    --color-cyberDarkLighter: #1d212f;
    --color-cyberCyan: #00f0ff;
    --color-cyberPink: #ff007f;
    --color-cyberPurple: #9d00ff;
    --color-cyberGreen: #39ff14;
  }
}
@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;
  }
  :-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 {
  .pointer-events-none {
    pointer-events: none;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .sticky {
    position: sticky;
  }
  .inset-0 {
    inset: calc(var(--spacing) * 0);
  }
  .-top-1 {
    top: calc(var(--spacing) * -1);
  }
  .top-0 {
    top: calc(var(--spacing) * 0);
  }
  .top-20 {
    top: calc(var(--spacing) * 20);
  }
  .-right-1 {
    right: calc(var(--spacing) * -1);
  }
  .right-6 {
    right: calc(var(--spacing) * 6);
  }
  .-bottom-1 {
    bottom: calc(var(--spacing) * -1);
  }
  .bottom-6 {
    bottom: calc(var(--spacing) * 6);
  }
  .left-0 {
    left: calc(var(--spacing) * 0);
  }
  .left-1\/2 {
    left: calc(1/2 * 100%);
  }
  .left-6 {
    left: calc(var(--spacing) * 6);
  }
  .-z-10 {
    z-index: calc(10 * -1);
  }
  .z-10 {
    z-index: 10;
  }
  .z-40 {
    z-index: 40;
  }
  .z-50 {
    z-index: 50;
  }
  .z-\[9999\] {
    z-index: 9999;
  }
  .mx-auto {
    margin-inline: auto;
  }
  .-mt-1 {
    margin-top: calc(var(--spacing) * -1);
  }
  .mt-1 {
    margin-top: calc(var(--spacing) * 1);
  }
  .mt-auto {
    margin-top: auto;
  }
  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }
  .block {
    display: block;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .h-2\.5 {
    height: calc(var(--spacing) * 2.5);
  }
  .h-3 {
    height: calc(var(--spacing) * 3);
  }
  .h-4 {
    height: calc(var(--spacing) * 4);
  }
  .h-5 {
    height: calc(var(--spacing) * 5);
  }
  .h-6 {
    height: calc(var(--spacing) * 6);
  }
  .h-7 {
    height: calc(var(--spacing) * 7);
  }
  .h-8 {
    height: calc(var(--spacing) * 8);
  }
  .h-10 {
    height: calc(var(--spacing) * 10);
  }
  .h-14 {
    height: calc(var(--spacing) * 14);
  }
  .h-16 {
    height: calc(var(--spacing) * 16);
  }
  .h-36 {
    height: calc(var(--spacing) * 36);
  }
  .h-48 {
    height: calc(var(--spacing) * 48);
  }
  .h-full {
    height: 100%;
  }
  .max-h-48 {
    max-height: calc(var(--spacing) * 48);
  }
  .max-h-\[85vh\] {
    max-height: 85vh;
  }
  .min-h-\[52px\] {
    min-height: 52px;
  }
  .min-h-screen {
    min-height: 100vh;
  }
  .w-2\.5 {
    width: calc(var(--spacing) * 2.5);
  }
  .w-3 {
    width: calc(var(--spacing) * 3);
  }
  .w-4 {
    width: calc(var(--spacing) * 4);
  }
  .w-5 {
    width: calc(var(--spacing) * 5);
  }
  .w-6 {
    width: calc(var(--spacing) * 6);
  }
  .w-7 {
    width: calc(var(--spacing) * 7);
  }
  .w-8 {
    width: calc(var(--spacing) * 8);
  }
  .w-10 {
    width: calc(var(--spacing) * 10);
  }
  .w-14 {
    width: calc(var(--spacing) * 14);
  }
  .w-16 {
    width: calc(var(--spacing) * 16);
  }
  .w-36 {
    width: calc(var(--spacing) * 36);
  }
  .w-\[1px\] {
    width: 1px;
  }
  .w-\[80\%\] {
    width: 80%;
  }
  .w-full {
    width: 100%;
  }
  .max-w-2xl {
    max-width: var(--container-2xl);
  }
  .max-w-5xl {
    max-width: var(--container-5xl);
  }
  .max-w-\[65\%\] {
    max-width: 65%;
  }
  .max-w-\[80px\] {
    max-width: 80px;
  }
  .max-w-\[300px\] {
    max-width: 300px;
  }
  .max-w-lg {
    max-width: var(--container-lg);
  }
  .max-w-md {
    max-width: var(--container-md);
  }
  .max-w-sm {
    max-width: var(--container-sm);
  }
  .flex-1 {
    flex: 1;
  }
  .flex-shrink-0 {
    flex-shrink: 0;
  }
  .-translate-x-1\/2 {
    --tw-translate-x: calc(calc(1/2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-x-full {
    --tw-translate-x: -100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-y-20 {
    --tw-translate-y: calc(var(--spacing) * -20);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-y-20 {
    --tw-translate-y: calc(var(--spacing) * 20);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-rotate-90 {
    rotate: calc(90deg * -1);
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .animate-pulse {
    animation: var(--animate-pulse);
  }
  .cursor-default {
    cursor: default;
  }
  .cursor-not-allowed {
    cursor: not-allowed;
  }
  .cursor-pointer {
    cursor: pointer;
  }
  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .items-center {
    align-items: center;
  }
  .items-start {
    align-items: flex-start;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .gap-1 {
    gap: calc(var(--spacing) * 1);
  }
  .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);
  }
  .space-y-0\.5 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 0.5) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 0.5) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-1 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-2 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-3 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .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)));
    }
  }
  .space-y-6 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-8 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-10 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 10) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 10) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .overflow-x-hidden {
    overflow-x: hidden;
  }
  .overflow-y-auto {
    overflow-y: auto;
  }
  .rounded {
    border-radius: 0.25rem;
  }
  .rounded-2xl {
    border-radius: var(--radius-2xl);
  }
  .rounded-3xl {
    border-radius: var(--radius-3xl);
  }
  .rounded-full {
    border-radius: calc(infinity * 1px);
  }
  .rounded-lg {
    border-radius: var(--radius-lg);
  }
  .rounded-xl {
    border-radius: var(--radius-xl);
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px;
  }
  .border-4 {
    border-style: var(--tw-border-style);
    border-width: 4px;
  }
  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }
  .border-r {
    border-right-style: var(--tw-border-style);
    border-right-width: 1px;
  }
  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  .border-l-2 {
    border-left-style: var(--tw-border-style);
    border-left-width: 2px;
  }
  .border-dashed {
    --tw-border-style: dashed;
    border-style: dashed;
  }
  .border-cyberCyan {
    border-color: var(--color-cyberCyan);
  }
  .border-cyberCyan\/20 {
    border-color: color-mix(in srgb, #00f0ff 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-cyberCyan) 20%, transparent);
    }
  }
  .border-cyberCyan\/30 {
    border-color: color-mix(in srgb, #00f0ff 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-cyberCyan) 30%, transparent);
    }
  }
  .border-cyberCyan\/50 {
    border-color: color-mix(in srgb, #00f0ff 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-cyberCyan) 50%, transparent);
    }
  }
  .border-cyberGreen {
    border-color: var(--color-cyberGreen);
  }
  .border-cyberPink {
    border-color: var(--color-cyberPink);
  }
  .border-cyberPink\/30 {
    border-color: color-mix(in srgb, #ff007f 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-cyberPink) 30%, transparent);
    }
  }
  .border-cyberPink\/40 {
    border-color: color-mix(in srgb, #ff007f 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-cyberPink) 40%, transparent);
    }
  }
  .border-cyberPink\/50 {
    border-color: color-mix(in srgb, #ff007f 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-cyberPink) 50%, transparent);
    }
  }
  .border-cyberPurple {
    border-color: var(--color-cyberPurple);
  }
  .border-cyberPurple\/30 {
    border-color: color-mix(in srgb, #9d00ff 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-cyberPurple) 30%, transparent);
    }
  }
  .border-gray-500\/30 {
    border-color: color-mix(in srgb, oklch(55.1% 0.027 264.364) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-gray-500) 30%, transparent);
    }
  }
  .border-red-500\/30 {
    border-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-red-500) 30%, transparent);
    }
  }
  .border-white\/5 {
    border-color: color-mix(in srgb, #fff 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 5%, transparent);
    }
  }
  .border-white\/10 {
    border-color: color-mix(in srgb, #fff 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
  }
  .border-white\/20 {
    border-color: color-mix(in srgb, #fff 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 20%, transparent);
    }
  }
  .border-yellow-500\/30 {
    border-color: color-mix(in srgb, oklch(79.5% 0.184 86.047) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-yellow-500) 30%, transparent);
    }
  }
  .border-yellow-500\/50 {
    border-color: color-mix(in srgb, oklch(79.5% 0.184 86.047) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-yellow-500) 50%, transparent);
    }
  }
  .bg-black\/40 {
    background-color: color-mix(in srgb, #000 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 40%, transparent);
    }
  }
  .bg-black\/70 {
    background-color: color-mix(in srgb, #000 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 70%, transparent);
    }
  }
  .bg-black\/90 {
    background-color: color-mix(in srgb, #000 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 90%, transparent);
    }
  }
  .bg-cyberBg\/90 {
    background-color: color-mix(in srgb, #0b0c10 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-cyberBg) 90%, transparent);
    }
  }
  .bg-cyberBg\/95 {
    background-color: color-mix(in srgb, #0b0c10 95%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-cyberBg) 95%, transparent);
    }
  }
  .bg-cyberCyan {
    background-color: var(--color-cyberCyan);
  }
  .bg-cyberCyan\/5 {
    background-color: color-mix(in srgb, #00f0ff 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-cyberCyan) 5%, transparent);
    }
  }
  .bg-cyberCyan\/10 {
    background-color: color-mix(in srgb, #00f0ff 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-cyberCyan) 10%, transparent);
    }
  }
  .bg-cyberCyan\/20 {
    background-color: color-mix(in srgb, #00f0ff 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-cyberCyan) 20%, transparent);
    }
  }
  .bg-cyberDark {
    background-color: var(--color-cyberDark);
  }
  .bg-cyberDark\/80 {
    background-color: color-mix(in srgb, #12141c 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-cyberDark) 80%, transparent);
    }
  }
  .bg-cyberDark\/95 {
    background-color: color-mix(in srgb, #12141c 95%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-cyberDark) 95%, transparent);
    }
  }
  .bg-cyberGreen {
    background-color: var(--color-cyberGreen);
  }
  .bg-cyberGreen\/20 {
    background-color: color-mix(in srgb, #39ff14 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-cyberGreen) 20%, transparent);
    }
  }
  .bg-cyberPink {
    background-color: var(--color-cyberPink);
  }
  .bg-cyberPink\/5 {
    background-color: color-mix(in srgb, #ff007f 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-cyberPink) 5%, transparent);
    }
  }
  .bg-cyberPink\/10 {
    background-color: color-mix(in srgb, #ff007f 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-cyberPink) 10%, transparent);
    }
  }
  .bg-cyberPink\/20 {
    background-color: color-mix(in srgb, #ff007f 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-cyberPink) 20%, transparent);
    }
  }
  .bg-cyberPurple\/5 {
    background-color: color-mix(in srgb, #9d00ff 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-cyberPurple) 5%, transparent);
    }
  }
  .bg-cyberPurple\/20 {
    background-color: color-mix(in srgb, #9d00ff 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-cyberPurple) 20%, transparent);
    }
  }
  .bg-gray-500\/5 {
    background-color: color-mix(in srgb, oklch(55.1% 0.027 264.364) 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-gray-500) 5%, transparent);
    }
  }
  .bg-red-500\/5 {
    background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-red-500) 5%, transparent);
    }
  }
  .bg-red-900\/20 {
    background-color: color-mix(in srgb, oklch(39.6% 0.141 25.723) 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-red-900) 20%, transparent);
    }
  }
  .bg-white\/2 {
    background-color: color-mix(in srgb, #fff 2%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 2%, transparent);
    }
  }
  .bg-white\/5 {
    background-color: color-mix(in srgb, #fff 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
    }
  }
  .bg-white\/20 {
    background-color: color-mix(in srgb, #fff 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
    }
  }
  .bg-yellow-500\/5 {
    background-color: color-mix(in srgb, oklch(79.5% 0.184 86.047) 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-yellow-500) 5%, transparent);
    }
  }
  .bg-gradient-to-b {
    --tw-gradient-position: to bottom in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .bg-gradient-to-r {
    --tw-gradient-position: to right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .bg-gradient-to-tr {
    --tw-gradient-position: to top right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .from-cyberCyan {
    --tw-gradient-from: var(--color-cyberCyan);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-cyberDarkLighter {
    --tw-gradient-from: var(--color-cyberDarkLighter);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-cyberPink {
    --tw-gradient-from: var(--color-cyberPink);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-cyberDark {
    --tw-gradient-to: var(--color-cyberDark);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-cyberPink {
    --tw-gradient-to: var(--color-cyberPink);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-cyberPurple {
    --tw-gradient-to: var(--color-cyberPurple);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .bg-clip-text {
    background-clip: text;
  }
  .object-cover {
    object-fit: cover;
  }
  .p-1 {
    padding: calc(var(--spacing) * 1);
  }
  .p-1\.5 {
    padding: calc(var(--spacing) * 1.5);
  }
  .p-2 {
    padding: calc(var(--spacing) * 2);
  }
  .p-2\.5 {
    padding: calc(var(--spacing) * 2.5);
  }
  .p-3 {
    padding: calc(var(--spacing) * 3);
  }
  .p-4 {
    padding: calc(var(--spacing) * 4);
  }
  .p-5 {
    padding: calc(var(--spacing) * 5);
  }
  .p-6 {
    padding: calc(var(--spacing) * 6);
  }
  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }
  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }
  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }
  .px-5 {
    padding-inline: calc(var(--spacing) * 5);
  }
  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }
  .py-0\.5 {
    padding-block: calc(var(--spacing) * 0.5);
  }
  .py-1 {
    padding-block: calc(var(--spacing) * 1);
  }
  .py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5);
  }
  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }
  .py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5);
  }
  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }
  .py-3\.5 {
    padding-block: calc(var(--spacing) * 3.5);
  }
  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }
  .py-6 {
    padding-block: calc(var(--spacing) * 6);
  }
  .pt-2 {
    padding-top: calc(var(--spacing) * 2);
  }
  .pr-1 {
    padding-right: calc(var(--spacing) * 1);
  }
  .pb-2 {
    padding-bottom: calc(var(--spacing) * 2);
  }
  .pl-10 {
    padding-left: calc(var(--spacing) * 10);
  }
  .text-center {
    text-align: center;
  }
  .text-left {
    text-align: left;
  }
  .text-right {
    text-align: right;
  }
  .font-mono {
    font-family: var(--font-mono);
  }
  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }
  .text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }
  .text-5xl {
    font-size: var(--text-5xl);
    line-height: var(--tw-leading, var(--text-5xl--line-height));
  }
  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }
  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }
  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .text-\[9px\] {
    font-size: 9px;
  }
  .text-\[10px\] {
    font-size: 10px;
  }
  .text-\[11px\] {
    font-size: 11px;
  }
  .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-extrabold {
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
  }
  .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);
  }
  .tracking-wide {
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
  }
  .tracking-wider {
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
  }
  .tracking-widest {
    --tw-tracking: var(--tracking-widest);
    letter-spacing: var(--tracking-widest);
  }
  .whitespace-pre-wrap {
    white-space: pre-wrap;
  }
  .text-cyberBg {
    color: var(--color-cyberBg);
  }
  .text-cyberCyan {
    color: var(--color-cyberCyan);
  }
  .text-cyberGreen {
    color: var(--color-cyberGreen);
  }
  .text-cyberPink {
    color: var(--color-cyberPink);
  }
  .text-cyberPurple {
    color: var(--color-cyberPurple);
  }
  .text-gray-100 {
    color: var(--color-gray-100);
  }
  .text-gray-300 {
    color: var(--color-gray-300);
  }
  .text-gray-400 {
    color: var(--color-gray-400);
  }
  .text-gray-500 {
    color: var(--color-gray-500);
  }
  .text-red-400 {
    color: var(--color-red-400);
  }
  .text-red-500 {
    color: var(--color-red-500);
  }
  .text-transparent {
    color: transparent;
  }
  .text-white {
    color: var(--color-white);
  }
  .text-white\/80 {
    color: color-mix(in srgb, #fff 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 80%, transparent);
    }
  }
  .text-white\/95 {
    color: color-mix(in srgb, #fff 95%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 95%, transparent);
    }
  }
  .text-yellow-500 {
    color: var(--color-yellow-500);
  }
  .uppercase {
    text-transform: uppercase;
  }
  .italic {
    font-style: italic;
  }
  .opacity-0 {
    opacity: 0%;
  }
  .opacity-50 {
    opacity: 50%;
  }
  .opacity-60 {
    opacity: 60%;
  }
  .opacity-70 {
    opacity: 70%;
  }
  .shadow-2xl {
    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-lg {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px 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);
  }
  .shadow-cyberCyan\/10 {
    --tw-shadow-color: color-mix(in srgb, #00f0ff 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-cyberCyan) 10%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }
  .shadow-cyberCyan\/20 {
    --tw-shadow-color: color-mix(in srgb, #00f0ff 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-cyberCyan) 20%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }
  .backdrop-blur-md {
    --tw-backdrop-blur: blur(var(--blur-md));
    -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,);
  }
  .backdrop-blur-sm {
    --tw-backdrop-blur: blur(var(--blur-sm));
    -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, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-opacity {
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-transform {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .duration-200 {
    --tw-duration: 200ms;
    transition-duration: 200ms;
  }
  .duration-300 {
    --tw-duration: 300ms;
    transition-duration: 300ms;
  }
  .duration-500 {
    --tw-duration: 500ms;
    transition-duration: 500ms;
  }
  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }
  .group-hover\:translate-x-1 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        --tw-translate-x: calc(var(--spacing) * 1);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .group-hover\:scale-110 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        --tw-scale-x: 110%;
        --tw-scale-y: 110%;
        --tw-scale-z: 110%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
      }
    }
  }
  .group-hover\:border-cyberCyan {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        border-color: var(--color-cyberCyan);
      }
    }
  }
  .group-hover\:bg-white\/10 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #fff 10%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
        }
      }
    }
  }
  .group-hover\:text-cyberCyan {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        color: var(--color-cyberCyan);
      }
    }
  }
  .selection\:bg-cyberCyan {
    & *::selection {
      background-color: var(--color-cyberCyan);
    }
    &::selection {
      background-color: var(--color-cyberCyan);
    }
  }
  .selection\:text-cyberDark {
    & *::selection {
      color: var(--color-cyberDark);
    }
    &::selection {
      color: var(--color-cyberDark);
    }
  }
  .hover\:scale-105 {
    &:hover {
      @media (hover: hover) {
        --tw-scale-x: 105%;
        --tw-scale-y: 105%;
        --tw-scale-z: 105%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
      }
    }
  }
  .hover\:scale-\[1\.02\] {
    &:hover {
      @media (hover: hover) {
        scale: 1.02;
      }
    }
  }
  .hover\:border-cyberCyan {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-cyberCyan);
      }
    }
  }
  .hover\:border-cyberCyan\/50 {
    &:hover {
      @media (hover: hover) {
        border-color: color-mix(in srgb, #00f0ff 50%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-cyberCyan) 50%, transparent);
        }
      }
    }
  }
  .hover\:border-cyberCyan\/80 {
    &:hover {
      @media (hover: hover) {
        border-color: color-mix(in srgb, #00f0ff 80%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-cyberCyan) 80%, transparent);
        }
      }
    }
  }
  .hover\:border-cyberPink\/80 {
    &:hover {
      @media (hover: hover) {
        border-color: color-mix(in srgb, #ff007f 80%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-cyberPink) 80%, transparent);
        }
      }
    }
  }
  .hover\:border-cyberPurple\/80 {
    &:hover {
      @media (hover: hover) {
        border-color: color-mix(in srgb, #9d00ff 80%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-cyberPurple) 80%, transparent);
        }
      }
    }
  }
  .hover\:bg-cyberCyan\/20 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #00f0ff 20%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-cyberCyan) 20%, transparent);
        }
      }
    }
  }
  .hover\:bg-cyberCyan\/80 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #00f0ff 80%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-cyberCyan) 80%, transparent);
        }
      }
    }
  }
  .hover\:bg-cyberPink\/80 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #ff007f 80%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-cyberPink) 80%, transparent);
        }
      }
    }
  }
  .hover\:bg-cyberPurple\/80 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #9d00ff 80%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-cyberPurple) 80%, transparent);
        }
      }
    }
  }
  .hover\:bg-red-500\/10 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 10%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-red-500) 10%, transparent);
        }
      }
    }
  }
  .hover\:bg-red-500\/20 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 20%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-red-500) 20%, transparent);
        }
      }
    }
  }
  .hover\:bg-white\/5 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #fff 5%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
        }
      }
    }
  }
  .hover\:bg-white\/10 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #fff 10%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
        }
      }
    }
  }
  .hover\:from-cyberCyan {
    &:hover {
      @media (hover: hover) {
        --tw-gradient-from: var(--color-cyberCyan);
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
      }
    }
  }
  .hover\:to-cyberPink {
    &:hover {
      @media (hover: hover) {
        --tw-gradient-to: var(--color-cyberPink);
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
      }
    }
  }
  .hover\:text-cyberCyan {
    &:hover {
      @media (hover: hover) {
        color: var(--color-cyberCyan);
      }
    }
  }
  .hover\:text-red-400 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-red-400);
      }
    }
  }
  .hover\:text-white {
    &:hover {
      @media (hover: hover) {
        color: var(--color-white);
      }
    }
  }
  .focus\:border-cyberCyan {
    &:focus {
      border-color: var(--color-cyberCyan);
    }
  }
  .focus\:outline-none {
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .active\:scale-95 {
    &:active {
      --tw-scale-x: 95%;
      --tw-scale-y: 95%;
      --tw-scale-z: 95%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }
  }
  .sm\:grid-cols-2 {
    @media (width >= 40rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .md\:h-64 {
    @media (width >= 48rem) {
      height: calc(var(--spacing) * 64);
    }
  }
  .md\:grid-cols-2 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .md\:flex-row {
    @media (width >= 48rem) {
      flex-direction: row;
    }
  }
  .md\:p-6 {
    @media (width >= 48rem) {
      padding: calc(var(--spacing) * 6);
    }
  }
  .md\:py-8 {
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 8);
    }
  }
  .md\:text-left {
    @media (width >= 48rem) {
      text-align: left;
    }
  }
  .md\:text-5xl {
    @media (width >= 48rem) {
      font-size: var(--text-5xl);
      line-height: var(--tw-leading, var(--text-5xl--line-height));
    }
  }
  .md\:text-base {
    @media (width >= 48rem) {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
    }
  }
  .md\:text-sm {
    @media (width >= 48rem) {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }
  }
  .md\:text-xl {
    @media (width >= 48rem) {
      font-size: var(--text-xl);
      line-height: var(--tw-leading, var(--text-xl--line-height));
    }
  }
  .lg\:grid-cols-3 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
}
@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-gradient-position {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-via {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-to {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-via-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}
@property --tw-gradient-via-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 50%;
}
@property --tw-gradient-to-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 100%;
}
@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-duration {
  syntax: "*";
  inherits: false;
}
@property --tw-ease {
  syntax: "*";
  inherits: false;
}
@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@keyframes pulse {
  50% {
    opacity: 0.5;
  }
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-space-y-reverse: 0;
      --tw-border-style: solid;
      --tw-gradient-position: initial;
      --tw-gradient-from: #0000;
      --tw-gradient-via: #0000;
      --tw-gradient-to: #0000;
      --tw-gradient-stops: initial;
      --tw-gradient-via-stops: initial;
      --tw-gradient-from-position: 0%;
      --tw-gradient-via-position: 50%;
      --tw-gradient-to-position: 100%;
      --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-duration: initial;
      --tw-ease: initial;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
    }
  }
}

.hover\:shadow-cyan-sm:hover{box-shadow:0 0 18px rgba(0,240,255,.28)}
.hover\:shadow-pink-sm:hover{box-shadow:0 0 18px rgba(255,0,127,.28)}
.hover\:shadow-purple-sm:hover{box-shadow:0 0 18px rgba(157,0,255,.28)}


/* Misión ELE Híbrida V2 — módulos especiales */
.special-topbar{display:flex;gap:1rem;align-items:center;padding:1rem 1.25rem;border:1px solid rgba(0,240,255,.25);border-radius:1rem;background:rgba(18,20,28,.94);margin-bottom:1rem}.special-topbar button{border:1px solid rgba(255,255,255,.15);padding:.65rem 1rem;border-radius:.75rem;background:rgba(255,255,255,.05);color:#fff;font-weight:700}.special-content{display:block;min-height:55vh}.special-intro,.special-hint{color:#aab1c4}.special-question-list{display:grid;gap:1rem}.special-q{padding:1rem}.special-q-head{display:flex;justify-content:space-between;color:#00f0ff;font-family:monospace}.special-q h4{font-size:1rem;margin:.5rem 0 1rem}.special-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}.special-options button,.special-speak,.record-btn,.dict-play,.dict-check,.reading-actions button,.special-tabs button,.gallery-toolbar button{border:1px solid rgba(0,240,255,.3);background:rgba(255,255,255,.06);color:#fff;padding:.7rem;border-radius:.7rem;cursor:pointer}.special-options button:hover{border-color:#00f0ff}.special-options button.correct{background:rgba(57,255,20,.18);border-color:#39ff14;color:#39ff14}.special-options button.wrong{background:rgba(255,0,127,.18);border-color:#ff007f}.special-feedback{margin-top:.7rem;font-weight:800}.dialogue-hero,.reading-panel,.country-hero{display:grid;grid-template-columns:minmax(220px,38%) 1fr;gap:1.25rem;padding:1rem;margin-bottom:1rem}.dialogue-hero img,.reading-panel img{width:100%;height:100%;max-height:330px;object-fit:cover;border-radius:.85rem}.dialogue-hero audio{width:100%;margin:1rem 0}.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:.8rem 0}.chips span{font-size:.72rem;padding:.25rem .5rem;border:1px solid rgba(157,0,255,.5);border-radius:999px}.video-spec{margin-top:1rem;padding:1rem;border:1px solid rgba(255,0,127,.3);border-radius:1rem}.video-spec pre{white-space:pre-wrap;max-height:420px;overflow:auto;font-size:.76rem}.special-gallery{display:grid;gap:1rem}.oral-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}.page-grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}.special-media{padding:.75rem}.special-media img{width:100%;height:220px;object-fit:cover;border-radius:.7rem}.special-tabs{display:flex;gap:.5rem;margin-bottom:1rem}.special-tabs button.active{background:#00f0ff;color:#0b0c10}.glossary{width:100%;margin-top:1rem;border-collapse:collapse}.glossary td{padding:.35rem;border-bottom:1px solid rgba(255,255,255,.1)}.dictation-list{display:grid;gap:1rem}.dictation-card{padding:1rem;display:grid;grid-template-columns:auto auto 1fr auto;gap:.6rem;align-items:center}.dictation-card input{background:#080a0f;border:1px solid rgba(255,255,255,.15);color:#fff;padding:.7rem;border-radius:.6rem}.dictation-card details,.dict-result{grid-column:1/-1}.flag-big{font-size:6rem;text-align:center}.country-map{width:100%;max-height:400px;object-fit:contain;background:#fff;border-radius:.8rem}.fact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}.fact-grid div{padding:.6rem;background:rgba(255,255,255,.05);border-radius:.6rem}.fact-grid small,.fact-grid strong{display:block}.flag-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem}.flag-card{padding:1rem;text-align:center}.flag-card span{font-size:3.5rem;display:block}.flag-card small{display:block;color:#9ca3af}.map-layout{display:grid;grid-template-columns:2fr 1fr;gap:1rem}.map-layout img{width:100%;height:460px;object-fit:contain;background:#fff;border-radius:1rem}.food-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin-top:1rem}.food-grid img{width:100%;height:180px;object-fit:cover;border-radius:.8rem}.gallery-toolbar{display:flex;justify-content:center;align-items:center;gap:1rem;margin-bottom:1rem}.library-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.library-grid a{background:rgba(255,255,255,.04);padding:.5rem;border-radius:.7rem}.library-grid img{width:100%;height:150px;object-fit:contain;background:#fff;border-radius:.5rem}.library-grid small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#9ca3af}.iframe-toolbar{display:flex;justify-content:flex-end;margin-bottom:.5rem}.iframe-toolbar a{color:#00f0ff}.legacy-frame{width:100%;height:78vh;border:1px solid rgba(0,240,255,.35);border-radius:1rem;background:#fff}.hidden{display:none!important}
@media(max-width:700px){.special-options{grid-template-columns:1fr}.dialogue-hero,.reading-panel,.country-hero,.map-layout{grid-template-columns:1fr}.dictation-card{grid-template-columns:1fr}.map-layout img{height:300px}.special-media img{height:190px}}


/* V2.1 — visual vocabulary and interactive video expansion */
.vocab-toolbar{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-bottom:1rem}.vocab-toolbar button,.vocab-finish button{border:1px solid rgba(0,240,255,.45);background:rgba(0,240,255,.08);color:#dffcff;border-radius:.7rem;padding:.65rem .9rem;font-weight:700;cursor:pointer}.vocab-toolbar button:hover,.vocab-toolbar button.active{background:rgba(0,240,255,.2);box-shadow:0 0 18px rgba(0,240,255,.22)}
.vocab-visual-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:1rem}.vocab-visual-card{border-radius:1rem}.vocab-visual-card img{width:100%;aspect-ratio:1/1;object-fit:cover;background:#0a0c12}.vocab-visual-card>div{padding:.75rem;display:grid;grid-template-columns:1fr auto;gap:.25rem .5rem}.vocab-visual-card strong{color:#fff}.vocab-visual-card span{color:#aeb7c8;font-size:.88rem}.vocab-speak{grid-column:2;grid-row:1/3;border:1px solid rgba(255,0,127,.45);background:rgba(255,0,127,.1);border-radius:.6rem;padding:.4rem;color:#fff;cursor:pointer}
.vocab-quiz-card{max-width:720px;margin:auto;padding:1rem;border-radius:1rem}.vocab-quiz-card img{width:100%;max-height:410px;object-fit:contain;background:#090b11;border-radius:.8rem}.vocab-quiz-card h3{text-align:center;margin:1rem 0}.vocab-quiz-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}.vocab-quiz-options button{padding:1rem;border-radius:.8rem;border:1px solid rgba(255,255,255,.18);background:#171a24;color:#fff;font-weight:700;cursor:pointer}.vocab-quiz-options button.correct{background:rgba(57,255,20,.2);border-color:#39ff14}.vocab-quiz-options button.wrong{background:rgba(255,0,70,.2);border-color:#ff0046}.vocab-finish{max-width:560px;margin:auto;text-align:center;padding:2rem;border-radius:1rem}
.video-lesson-hero{display:grid;grid-template-columns:minmax(280px,1.1fr) minmax(260px,.9fr);gap:1rem;padding:1rem;border-radius:1rem;margin-bottom:1rem}.video-lesson-hero img{width:100%;max-height:430px;object-fit:cover;border-radius:.8rem}.video-lesson-hero audio{width:100%;margin:1rem 0}.video-lesson-hero button{padding:.75rem 1rem;border:1px solid #00f0ff;border-radius:.7rem;background:rgba(0,240,255,.12);color:#fff;cursor:pointer}.video-dialogue-lines{display:grid;gap:.75rem}.video-dialogue-lines article{display:grid;grid-template-columns:auto minmax(100px,160px) 1fr auto;gap:.75rem;align-items:center;padding:.85rem 1rem;border-radius:.8rem}.video-dialogue-lines span{color:#00f0ff;font-family:monospace}.video-dialogue-lines p{margin:0;color:#eef4ff}.line-speak{border:1px solid rgba(255,0,127,.5);background:rgba(255,0,127,.1);color:#fff;border-radius:.6rem;padding:.45rem;cursor:pointer}
@media(max-width:760px){.video-lesson-hero{grid-template-columns:1fr}.video-dialogue-lines article{grid-template-columns:auto 1fr auto}.video-dialogue-lines p{grid-column:1/-1}.vocab-quiz-options{grid-template-columns:1fr}}


/* V9.1 — banderas raster/vector reales para Windows/Chrome. No depende del renderizado de emoji de país. */
.country-flag-img{display:block;width:100%;height:92px;object-fit:cover;border-radius:.55rem;margin:0 0 .7rem;border:1px solid rgba(255,255,255,.14);box-shadow:0 8px 24px rgba(0,0,0,.22)}
.country-flag-detail{display:block;width:100%;max-width:360px;aspect-ratio:3/2;object-fit:cover;border-radius:.8rem;border:1px solid rgba(255,255,255,.16);box-shadow:0 12px 30px rgba(0,0,0,.28);margin:auto}
.flag-big{font-size:initial;text-align:center;display:flex;align-items:center;justify-content:center}
@media(max-width:700px){.country-flag-img{height:78px}.country-flag-detail{max-width:300px}}

/* V9.2 · integración libro ↔ app */
.book-hub-kicker{font:700 .75rem/1.2 ui-monospace,monospace;letter-spacing:.16em;color:#00f0ff;margin-bottom:.6rem}.book-hub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}.book-hub-topic{width:100%;display:flex;align-items:center;gap:14px;text-align:left;padding:16px;border:1px solid rgba(0,240,255,.2);transition:.18s transform,.18s border-color,.18s box-shadow}.book-hub-topic:hover,.book-hub-topic:focus-visible{transform:translateY(-2px);border-color:#00f0ff;box-shadow:0 0 24px rgba(0,240,255,.12);outline:none}.book-hub-topic strong{display:block;color:#fff;font-size:1rem}.book-hub-topic small{display:block;color:#9aa7b6;margin-top:4px}.book-hub-num{display:grid;place-items:center;min-width:34px;height:34px;border-radius:10px;background:rgba(0,240,255,.1);color:#00f0ff;font-weight:800}.book-hub-arrow{margin-left:auto;color:#00f0ff;font-size:1.4rem}@media(max-width:640px){.book-hub-grid{grid-template-columns:1fr}.book-hub-topic{padding:14px}}

/* V10 · BLOK 9 — dialogi wideo + transkrypcja + dotknij/przeciągnij */
.dialogue-lesson-shell{display:grid;gap:1.15rem}.dialogue-lesson-shell .dialogue-hero{grid-template-columns:minmax(320px,1.15fr) minmax(280px,.85fr);align-items:stretch;overflow:hidden;padding:0;background:linear-gradient(145deg,rgba(12,17,27,.98),rgba(16,19,30,.96));border-color:rgba(0,240,255,.28)}
.dialogue-video-frame{min-width:0;background:#05070c;display:flex;align-items:center;justify-content:center;overflow:hidden}.dialogue-video,.dialogue-video-poster{display:block;width:100%;height:100%;min-height:300px;max-height:460px;object-fit:contain;background:#05070c}.dialogue-hero-copy{padding:1.35rem 1.35rem 1.25rem;display:flex;flex-direction:column;justify-content:center;min-width:0}.dialogue-kicker{font:800 .72rem/1.2 ui-monospace,monospace;letter-spacing:.16em;color:#00f0ff}.dialogue-hero-copy h3{font-size:clamp(1.65rem,3vw,2.45rem);line-height:1.05;color:#fff;font-weight:900;margin:.5rem 0 .2rem}.dialogue-title-pl{color:#ff58aa;font-weight:800;margin-bottom:.75rem}.dialogue-hero-actions{display:flex;gap:.55rem;flex-wrap:wrap;margin-top:.35rem}.dialogue-source-caption{font-size:.74rem;color:#7f899c;line-height:1.45;margin-top:.85rem}.dialogue-source-notes{border:1px solid rgba(255,190,70,.28);background:rgba(255,190,70,.07);border-radius:1rem;padding:.85rem 1rem;color:#d7dbe4;font-size:.84rem}.dialogue-source-notes strong{color:#ffd47b}.dialogue-source-notes p{margin:.28rem 0 0;line-height:1.48}
.dialogue-section-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:.45rem}.dialogue-section-header>div:first-child{display:flex;align-items:center;gap:.8rem}.dialogue-section-header>div:first-child>span{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;border:1px solid rgba(0,240,255,.35);background:rgba(0,240,255,.08);color:#00f0ff;font:900 .78rem/1 ui-monospace,monospace}.dialogue-section-header h3{color:#fff;font-size:1.18rem;font-weight:900;margin:0}.dialogue-section-header p{color:#8590a3;font-size:.78rem;margin:.15rem 0 0}.dialogue-transcript-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}.dialogue-transcript-card{display:grid;grid-template-columns:auto 1fr;gap:.75rem;align-items:start;padding:.85rem;border-color:rgba(255,255,255,.09);background:rgba(15,18,27,.82)}.dialogue-line-play{width:42px;height:42px;min-width:42px;padding:0;display:grid;place-items:center;border-radius:12px}.dialogue-line-body{min-width:0}.dialogue-line-meta{display:flex;justify-content:space-between;gap:.6rem;align-items:center}.dialogue-line-meta strong{color:#00f0ff;font-size:.78rem}.dialogue-line-meta span{font:700 .67rem/1 ui-monospace,monospace;color:#596376}.dialogue-line-es{color:#fff;font-size:.96rem;font-weight:750;line-height:1.45;margin:.35rem 0 0}.dialogue-line-pl{color:#9da6b8;font-size:.79rem;line-height:1.42;margin:.25rem 0 0}.dialogue-language-note{color:#ffd47b;font-size:.75rem;line-height:1.4;margin:.4rem 0 0;padding:.4rem .55rem;border-left:2px solid rgba(255,212,123,.65);background:rgba(255,212,123,.06)}
.dialogue-exercise-header{margin-top:1rem}.dialogue-exercise-header>div:first-child>span{border-color:rgba(255,0,127,.38);background:rgba(255,0,127,.08);color:#ff58aa}.dialogue-progress-pill{white-space:nowrap;border:1px solid rgba(0,240,255,.28);background:rgba(0,240,255,.07);border-radius:999px;padding:.48rem .72rem;color:#9aa5b8;font:800 .72rem/1 ui-monospace,monospace}.dialogue-progress-pill strong{color:#39ff14;font-size:.9rem}.dialogue-exercise-progress{height:7px;background:rgba(255,255,255,.06);border-radius:999px;overflow:hidden;margin-top:-.45rem}.dialogue-exercise-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,#00f0ff,#ff007f);border-radius:inherit;transition:width .3s ease}.dialogue-exercise-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem}.dialogue-fill-card{padding:1rem;border-color:rgba(255,255,255,.1);background:linear-gradient(150deg,rgba(18,21,31,.96),rgba(10,12,19,.96));box-shadow:0 12px 35px rgba(0,0,0,.18)}.dialogue-fill-card[data-solved="1"]{border-color:rgba(57,255,20,.24)}.dialogue-fill-head{display:flex;justify-content:space-between;align-items:center;gap:.6rem;margin-bottom:.5rem}.dialogue-fill-head>div{display:flex;align-items:center;gap:.5rem}.dialogue-fill-head strong{font-size:.78rem;color:#dce4f0}.dialogue-ex-number{display:grid;place-items:center;width:27px;height:27px;border-radius:8px;background:rgba(0,240,255,.1);color:#00f0ff;font:900 .7rem/1 ui-monospace,monospace}.dialogue-level-pill{border:1px solid rgba(157,0,255,.35);background:rgba(157,0,255,.08);border-radius:999px;padding:.26rem .52rem;color:#d7b5ff;font:800 .67rem/1 ui-monospace,monospace}.dialogue-fill-instruction{font-size:.7rem;color:#7d879a;margin:0 0 .5rem}.dialogue-fill-sentence{min-height:76px;border:1px solid rgba(255,255,255,.08);background:rgba(4,6,11,.46);border-radius:.85rem;padding:.9rem;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.25rem;color:#fff;font-size:1.04rem;font-weight:850;line-height:1.6;text-align:center}.dialogue-drop-slot{min-width:96px;min-height:42px;padding:.35rem .7rem;border:1.5px dashed rgba(0,240,255,.65);background:rgba(0,240,255,.06);color:#8ff8ff;border-radius:.7rem;font-weight:900;cursor:pointer;transition:.18s transform,.18s border-color,.18s background,.18s box-shadow}.dialogue-drop-slot.filled{border-style:solid;background:rgba(0,240,255,.12);color:#fff}.dialogue-drop-slot.drag-over{transform:scale(1.04);border-color:#ff58aa;background:rgba(255,0,127,.1);box-shadow:0 0 18px rgba(255,0,127,.2)}.dialogue-drop-slot.correct{border-color:#39ff14;background:rgba(57,255,20,.14);color:#7cff67;box-shadow:0 0 18px rgba(57,255,20,.14)}.dialogue-drop-slot.wrong{border-color:#ff2b88;background:rgba(255,0,127,.14);color:#ff77b7}.dialogue-word-bank{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;margin:.72rem 0}.dialogue-word-chip{min-height:48px;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.055);color:#f5f7fb;padding:.55rem .7rem;border-radius:.72rem;font-weight:800;cursor:grab;touch-action:manipulation;transition:.16s transform,.16s border-color,.16s background,.16s box-shadow}.dialogue-word-chip:hover,.dialogue-word-chip:focus-visible{border-color:rgba(0,240,255,.65);background:rgba(0,240,255,.08);outline:none}.dialogue-word-chip:active{transform:scale(.97);cursor:grabbing}.dialogue-word-chip.selected{border-color:#00f0ff;background:rgba(0,240,255,.14);box-shadow:0 0 15px rgba(0,240,255,.12)}.dialogue-word-chip.correct{border-color:#39ff14;background:rgba(57,255,20,.14);color:#7cff67}.dialogue-word-chip.wrong{border-color:#ff2b88;background:rgba(255,0,127,.13);color:#ff8fc3}.dialogue-word-chip.dragging{opacity:.5}.dialogue-fill-actions{display:grid;grid-template-columns:1.2fr .9fr 1fr;gap:.45rem}.dialogue-fill-actions button{min-height:46px;border-radius:.7rem;padding:.55rem .65rem;font-size:.72rem;font-weight:900;cursor:pointer;transition:.16s transform,.16s filter}.dialogue-fill-actions button:active{transform:scale(.97)}.dialogue-action-check{border:1px solid rgba(57,255,20,.45);background:rgba(57,255,20,.1);color:#7cff67}.dialogue-action-clear{border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:#c1c8d4}.dialogue-action-listen{border:1px solid rgba(0,240,255,.4);background:rgba(0,240,255,.08);color:#72f6ff}.dialogue-fill-feedback{border-radius:.65rem;padding:.65rem .72rem;margin-top:.6rem;font-size:.79rem;line-height:1.45}.dialogue-feedback-correct{border:1px solid rgba(57,255,20,.28);background:rgba(57,255,20,.08);color:#8cff7a}.dialogue-feedback-wrong{border:1px solid rgba(255,0,127,.3);background:rgba(255,0,127,.08);color:#ff8fc3}.dialogue-feedback-hint{border:1px solid rgba(255,212,123,.3);background:rgba(255,212,123,.07);color:#ffd47b}.dialogue-ex-pl{font-size:.72rem;color:#778296;line-height:1.4;margin:.55rem 0 0}
@media(max-width:980px){.dialogue-lesson-shell .dialogue-hero{grid-template-columns:1fr}.dialogue-video,.dialogue-video-poster{min-height:0;max-height:none;aspect-ratio:16/9}.dialogue-transcript-grid,.dialogue-exercise-grid{grid-template-columns:1fr}}
@media(max-width:640px){.dialogue-hero-copy{padding:1rem}.dialogue-hero-copy h3{font-size:1.65rem}.dialogue-transcript-card{padding:.72rem}.dialogue-section-header{align-items:flex-start}.dialogue-section-header>div:first-child>span{width:36px;height:36px;border-radius:10px}.dialogue-section-header h3{font-size:1rem}.dialogue-section-header p{font-size:.7rem}.dialogue-word-bank{grid-template-columns:1fr 1fr}.dialogue-fill-actions{grid-template-columns:1fr 1fr}.dialogue-action-listen{grid-column:1/-1}.dialogue-fill-sentence{font-size:.95rem;min-height:68px}.dialogue-word-chip{min-height:52px}.dialogue-video{width:100%}.dialogue-source-notes{font-size:.78rem}}
@media(max-width:390px){.dialogue-word-bank{grid-template-columns:1fr}.dialogue-fill-actions{grid-template-columns:1fr}.dialogue-action-listen{grid-column:auto}.dialogue-progress-pill{font-size:.65rem}}

/* V11 — BLOK 11: atlas completo de países hispanohablantes */
.hisp-atlas{display:grid;gap:1rem}
.hisp-atlas-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.25rem;align-items:center;padding:1.2rem 1.3rem;background:linear-gradient(135deg,rgba(10,18,31,.97),rgba(28,12,32,.94));border:1px solid rgba(0,240,255,.28)}
.hisp-atlas-kicker{font-size:.68rem;letter-spacing:.12em;font-weight:900;color:#00f0ff;margin:0 0 .35rem;font-family:monospace}.hisp-atlas-hero h3{font-size:clamp(1.45rem,2.5vw,2.15rem);font-weight:950;color:#fff;line-height:1.08;margin:0}.hisp-atlas-es{color:#d6dce8;margin:.55rem 0 0;line-height:1.55}
.hisp-atlas-counter{min-width:128px;text-align:center;padding:1rem;border:1px solid rgba(255,0,127,.28);border-radius:1rem;background:rgba(255,0,127,.07)}.hisp-atlas-counter strong{display:block;font-size:2rem;color:#ff70b7;line-height:1}.hisp-atlas-counter span{display:block;margin-top:.35rem;font-size:.7rem;color:#aab1c4}
.hisp-atlas-toolbar{display:flex;gap:.45rem;flex-wrap:wrap;padding:.7rem;background:rgba(12,17,29,.95)}.hisp-region{border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.045);color:#ccd4e1;padding:.55rem .75rem;border-radius:.75rem;font-weight:850;font-size:.75rem;cursor:pointer;transition:.15s ease}.hisp-region:hover,.hisp-region.active{border-color:#00f0ff;background:rgba(0,240,255,.12);color:#dfffff;box-shadow:0 0 0 1px rgba(0,240,255,.08) inset}
.hisp-atlas-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:.85rem}.hisp-country-card{border:1px solid rgba(255,255,255,.1);border-radius:1rem;padding:0;overflow:hidden;text-align:left;background:rgba(13,18,29,.96);cursor:pointer;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}.hisp-country-card:hover{transform:translateY(-2px);border-color:rgba(0,240,255,.42);box-shadow:0 14px 34px rgba(0,0,0,.25)}.hisp-country-card.active{border-color:#00f0ff;box-shadow:0 0 0 2px rgba(0,240,255,.11),0 16px 36px rgba(0,0,0,.25)}
.hisp-country-map-wrap{height:145px;background:#070b12;display:flex;align-items:center;justify-content:center;padding:.45rem;border-bottom:1px solid rgba(255,255,255,.08)}.hisp-country-map-wrap img{width:100%;height:100%;object-fit:contain;border-radius:.55rem}.hisp-country-card-copy{display:grid;grid-template-columns:38px minmax(0,1fr);gap:.65rem;align-items:center;padding:.75rem}.hisp-country-flag{width:38px;height:25px;object-fit:cover;border-radius:.25rem;border:1px solid rgba(255,255,255,.18)}.hisp-country-card-copy strong{display:block;color:#fff;font-size:.94rem}.hisp-country-card-copy small{display:block;color:#8f9caf;margin-top:.12rem;white-space:normal;line-height:1.25}
.hisp-atlas-detail{display:grid;grid-template-columns:minmax(300px,42%) minmax(0,58%);gap:1.1rem;padding:1rem;background:linear-gradient(135deg,rgba(10,15,26,.98),rgba(17,12,27,.96));border:1px solid rgba(0,240,255,.25)}.hisp-detail-map{min-height:320px;background:#070b12;border-radius:1rem;padding:.65rem;display:flex;align-items:center;justify-content:center}.hisp-detail-map img{width:100%;height:100%;max-height:410px;object-fit:contain;border-radius:.7rem}.hisp-detail-copy{min-width:0;padding:.35rem}.hisp-detail-title{display:flex;gap:.8rem;align-items:center;margin-bottom:.9rem}.hisp-detail-title img{width:66px;height:43px;object-fit:cover;border-radius:.4rem;border:1px solid rgba(255,255,255,.2)}.hisp-detail-title span{display:block;color:#00f0ff;font-size:.72rem;font-weight:850;letter-spacing:.04em}.hisp-detail-title h3{font-size:1.6rem;font-weight:950;color:#fff;line-height:1.05;margin:.15rem 0 0}.hisp-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}.hisp-facts>div{padding:.7rem;border-radius:.75rem;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07)}.hisp-facts small{display:block;color:#7f8da3;font-size:.63rem;font-weight:850;letter-spacing:.04em;margin-bottom:.2rem}.hisp-facts strong{display:block;color:#f2f5f8;font-size:.88rem;line-height:1.35}.hisp-country-fact{margin:.8rem 0;color:#cbd3df;line-height:1.5;padding:.75rem;border-left:3px solid #ff007f;background:rgba(255,0,127,.045);border-radius:.35rem .7rem .7rem .35rem}.hisp-atlas-note{color:#778397;font-size:.7rem;margin:.1rem .2rem .3rem}
@media(max-width:850px){.hisp-atlas-detail{grid-template-columns:1fr}.hisp-detail-map{min-height:240px}.hisp-atlas-hero{grid-template-columns:1fr}.hisp-atlas-counter{justify-self:start;min-width:118px}.hisp-facts{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.hisp-atlas-grid{grid-template-columns:1fr 1fr;gap:.6rem}.hisp-country-map-wrap{height:115px}.hisp-country-card-copy{grid-template-columns:30px minmax(0,1fr);padding:.6rem}.hisp-country-flag{width:30px;height:20px}.hisp-country-card-copy strong{font-size:.82rem}.hisp-country-card-copy small{font-size:.67rem}.hisp-facts{grid-template-columns:1fr}.hisp-detail-title h3{font-size:1.35rem}.hisp-atlas-toolbar{overflow-x:auto;flex-wrap:nowrap}.hisp-region{flex:0 0 auto}}

/* V11 — identidad visual Nauka Hiszpańskiego z Carlosem */
.nhc-brand{min-width:0}.nhc-brand-mark{width:2.25rem;height:2.25rem;border-radius:.72rem;display:flex;align-items:center;justify-content:center;color:#071016;background:linear-gradient(145deg,#ff8d36 0%,#39e2e7 55%,#dff9ff 100%);box-shadow:0 7px 22px rgba(0,240,255,.18),inset 0 0 0 1px rgba(255,255,255,.35)}.nhc-brand-copy{display:flex;flex-direction:column;min-width:0;line-height:1}.nhc-brand-title{font-family:var(--font-display,inherit);font-weight:950;letter-spacing:.055em;font-size:.78rem;color:#f3f6f9;white-space:nowrap}.nhc-brand-subtitle{margin-top:.22rem;font-family:monospace;font-size:.58rem;letter-spacing:.08em;color:#39e2e7;white-space:nowrap}
@media(max-width:520px){.nhc-brand-title{font-size:.68rem}.nhc-brand-subtitle{font-size:.52rem}.nhc-brand-mark{width:2rem;height:2rem}}
.hisp-country-fact-pl{margin:-.45rem 0 .85rem;color:#94a3b8;font-size:.78rem;line-height:1.45;padding:0 .75rem}

/* V12 — videos pedagógicos visibles y accesibles */
.dialogue-hero{grid-template-columns:minmax(0,1.55fr) minmax(300px,.65fr)!important;align-items:stretch!important}
.dialogue-video-frame{min-height:420px!important;background:#02050a!important;display:flex!important;align-items:center!important;justify-content:center!important}
.dialogue-video{width:100%!important;min-height:420px!important;max-height:620px!important;aspect-ratio:16/9!important;object-fit:contain!important;background:#000!important}
.v12-video-learning{display:grid;gap:18px}.v12-video-hero{overflow:hidden;border-radius:22px!important;border:1px solid #27354a!important;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(320px,.65fr);background:#0c1320!important}.v12-video-main{background:#000}.v12-feature-video{display:block;width:100%;aspect-ratio:16/9;max-height:680px;object-fit:contain;background:#000}.v12-video-controls{display:flex;gap:7px;flex-wrap:wrap;padding:10px;background:#080c13;border-top:1px solid #222c3a}.v12-video-controls button{border:1px solid #2c5e72;background:#10202b;color:#c9f7ff;border-radius:10px;padding:9px 11px;font-weight:850}.v12-video-copy{padding:clamp(18px,3vw,34px);align-self:center}.v12-video-kicker{color:#22d3ee;font-weight:900;letter-spacing:.12em;font-size:.78rem}.v12-video-copy h3{font-size:clamp(1.6rem,3vw,2.7rem);line-height:1.08;margin:.35rem 0;color:#fff}.v12-video-copy h4{color:#f472b6;font-size:1.1rem;margin-bottom:1rem}.v12-video-copy p{color:#c1ccda;line-height:1.6}.v12-access-note{margin-top:16px;border-left:3px solid #22d3ee;background:#101d29;padding:11px 13px;border-radius:0 10px 10px 0;color:#bde9f0;font-size:.9rem}.v12-rule-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.v12-rule-card{border-radius:16px!important;padding:18px!important;border:1px solid #2a3a51!important}.v12-rule-card>strong{font-size:1.35rem;color:#5eeafa}.v12-rule-es{font-weight:800;color:#fff;margin-top:8px}.v12-rule-pl{color:#9fb0c4;font-size:.9rem;margin:5px 0 12px}.v12-rule-card button{display:block;width:100%;text-align:left;margin-top:5px;border:0;background:#111d2b;color:#d8e9f4;border-radius:8px;padding:7px 9px}.v12-learning-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;padding:8px 4px}.v12-learning-heading>div{display:flex;align-items:center;gap:12px}.v12-learning-heading span{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#12313d;color:#67e8f9;font-weight:950}.v12-learning-heading h3{font-size:1.45rem}.v12-learning-heading p{color:#94a3b8;max-width:560px}.v12-learning-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.v12-learning-q{position:relative;border-radius:16px!important;padding:17px!important;border:1px solid #28374c!important}.v12-learning-qnum{position:absolute;right:12px;top:12px;color:#587089;font-weight:900}.v12-learning-q h4{padding-right:35px;font-size:1.04rem;line-height:1.45;margin-bottom:12px}.v12-learning-options{display:flex;flex-wrap:wrap;gap:7px}.v12-learning-options button{border:1px solid #3b4a61;background:#171f2d;color:white;border-radius:10px;padding:9px 11px;font-weight:800;cursor:grab}.v12-learning-options button.selected{border-color:#22d3ee;background:#10303d}.v12-drag-grip{color:#71869e;margin-right:5px}.v12-learning-drop{margin-top:10px;width:100%;min-height:48px;border:1px dashed #2789a1;border-radius:11px;background:#0b1b27;color:#8bb6c4;font-weight:850;padding:10px;text-align:left}.v12-learning-drop.filled{color:white;border-style:solid}.v12-learning-drop.correct{border-color:#34d399;background:rgba(52,211,153,.11);color:#a7f3d0}.v12-learning-drop.wrong{border-color:#fb7185;background:rgba(251,113,133,.1);color:#fecdd3}.v12-learning-feedback{min-height:1.3em;margin-top:7px;color:#a8b8cb;font-size:.88rem}.v12-learning-summary{border-radius:15px!important;padding:14px 16px!important;display:flex;align-items:center;gap:10px}.v12-learning-summary strong{font-size:1.3rem;color:#67e8f9}.v12-learning-summary span{color:#9fb0c4}.v12-learning-summary button{margin-left:auto;border:1px solid #435269;background:#172132;color:white;border-radius:10px;padding:9px 12px;font-weight:850}
@media(max-width:1100px){.dialogue-hero,.v12-video-hero{grid-template-columns:1fr!important}.dialogue-video-frame,.dialogue-video{min-height:0!important}.v12-rule-grid{grid-template-columns:1fr}.v12-learning-grid{grid-template-columns:1fr}}
@media(max-width:650px){.dialogue-video{aspect-ratio:16/9!important}.v12-video-copy{padding:16px}.v12-video-controls button{flex:1}.v12-learning-heading{align-items:flex-start;flex-direction:column}.v12-learning-summary{align-items:flex-start;flex-wrap:wrap}.v12-learning-summary button{margin-left:0;width:100%}}