/*! tailwindcss v4.1.12 | 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;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
    monospace;
    --color-red-50: oklch(97.1% 0.013 17.38);
    --color-red-100: oklch(93.6% 0.032 17.717);
    --color-red-200: oklch(88.5% 0.062 18.334);
    --color-red-300: oklch(80.8% 0.114 19.571);
    --color-red-400: oklch(70.4% 0.191 22.216);
    --color-red-500: oklch(63.7% 0.237 25.331);
    --color-red-600: oklch(57.7% 0.245 27.325);
    --color-red-700: oklch(50.5% 0.213 27.518);
    --color-red-800: oklch(44.4% 0.177 26.899);
    --color-orange-100: oklch(95.4% 0.038 75.164);
    --color-amber-50: oklch(98.7% 0.022 95.277);
    --color-amber-100: oklch(96.2% 0.059 95.617);
    --color-amber-200: oklch(92.4% 0.12 95.746);
    --color-amber-300: oklch(87.9% 0.169 91.605);
    --color-amber-400: oklch(82.8% 0.189 84.429);
    --color-amber-500: oklch(76.9% 0.188 70.08);
    --color-amber-600: oklch(66.6% 0.179 58.318);
    --color-amber-700: oklch(55.5% 0.163 48.998);
    --color-emerald-50: oklch(97.9% 0.021 166.113);
    --color-emerald-100: oklch(95% 0.052 163.051);
    --color-emerald-200: oklch(90.5% 0.093 164.15);
    --color-emerald-300: oklch(84.5% 0.143 164.978);
    --color-emerald-400: oklch(76.5% 0.177 163.223);
    --color-emerald-500: oklch(69.6% 0.17 162.48);
    --color-emerald-600: oklch(59.6% 0.145 163.225);
    --color-emerald-700: oklch(50.8% 0.118 165.612);
    --color-sky-100: oklch(95.1% 0.026 236.824);
    --color-sky-200: oklch(90.1% 0.058 230.902);
    --color-sky-300: oklch(82.8% 0.111 230.318);
    --color-sky-400: oklch(74.6% 0.16 232.661);
    --color-sky-700: oklch(50% 0.134 242.749);
    --color-rose-50: oklch(96.9% 0.015 12.422);
    --color-rose-200: oklch(89.2% 0.058 10.001);
    --color-rose-300: oklch(81% 0.117 11.638);
    --color-rose-500: oklch(64.5% 0.246 16.439);
    --color-black: #000;
    --color-white: #fff;
    --spacing: 0.25rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-lg: 32rem;
    --container-xl: 36rem;
    --container-2xl: 42rem;
    --container-3xl: 48rem;
    --container-4xl: 56rem;
    --container-6xl: 72rem;
    --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-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
    --text-5xl: 3rem;
    --text-5xl--line-height: 1;
    --text-6xl: 3.75rem;
    --text-6xl--line-height: 1;
    --text-7xl: 4.5rem;
    --text-7xl--line-height: 1;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;
    --tracking-tight: -0.025em;
    --tracking-normal: 0em;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --tracking-widest: 0.1em;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15);
    --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-navy: #0C2C4A;
    --color-bbc-blue: #27A2F6;
    --color-bbc-orange: #F67B27;
  }
}
@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 {
  .pointer-events-none {
    pointer-events: none;
  }
  .visible {
    visibility: visible;
  }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .static {
    position: static;
  }
  .container {
    width: 100%;
    @media (width >= 40rem) {
      max-width: 40rem;
    }
    @media (width >= 48rem) {
      max-width: 48rem;
    }
    @media (width >= 64rem) {
      max-width: 64rem;
    }
    @media (width >= 80rem) {
      max-width: 80rem;
    }
    @media (width >= 96rem) {
      max-width: 96rem;
    }
  }
  .mt-0\.5 {
    margin-top: calc(var(--spacing) * 0.5);
  }
  .mt-1 {
    margin-top: calc(var(--spacing) * 1);
  }
  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }
  .mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }
  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }
  .mt-6 {
    margin-top: calc(var(--spacing) * 6);
  }
  .mt-8 {
    margin-top: calc(var(--spacing) * 8);
  }
  .mb-1 {
    margin-bottom: calc(var(--spacing) * 1);
  }
  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }
  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }
  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }
  .mb-8 {
    margin-bottom: calc(var(--spacing) * 8);
  }
  .ml-auto {
    margin-left: auto;
  }
  .block {
    display: block;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .inline-flex {
    display: inline-flex;
  }
  .table {
    display: table;
  }
  .h-6 {
    height: calc(var(--spacing) * 6);
  }
  .h-10 {
    height: calc(var(--spacing) * 10);
  }
  .h-12 {
    height: calc(var(--spacing) * 12);
  }
  .h-16 {
    height: calc(var(--spacing) * 16);
  }
  .h-40 {
    height: calc(var(--spacing) * 40);
  }
  .min-h-screen {
    min-height: 100vh;
  }
  .w-6 {
    width: calc(var(--spacing) * 6);
  }
  .w-10 {
    width: calc(var(--spacing) * 10);
  }
  .w-12 {
    width: calc(var(--spacing) * 12);
  }
  .w-16 {
    width: calc(var(--spacing) * 16);
  }
  .w-40 {
    width: calc(var(--spacing) * 40);
  }
  .w-44 {
    width: calc(var(--spacing) * 44);
  }
  .w-full {
    width: 100%;
  }
  .max-w-2xl {
    max-width: var(--container-2xl);
  }
  .max-w-lg {
    max-width: var(--container-lg);
  }
  .max-w-xl {
    max-width: var(--container-xl);
  }
  .min-w-0 {
    min-width: calc(var(--spacing) * 0);
  }
  .flex-1 {
    flex: 1;
  }
  .shrink-0 {
    flex-shrink: 0;
  }
  .grow {
    flex-grow: 1;
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .resize {
    resize: both;
  }
  .scroll-mt-6 {
    scroll-margin-top: calc(var(--spacing) * 6);
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .items-center {
    align-items: center;
  }
  .items-end {
    align-items: flex-end;
  }
  .items-start {
    align-items: flex-start;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .justify-end {
    justify-content: flex-end;
  }
  .gap-1 {
    gap: calc(var(--spacing) * 1);
  }
  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }
  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  .gap-6 {
    gap: calc(var(--spacing) * 6);
  }
  .gap-8 {
    gap: calc(var(--spacing) * 8);
  }
  .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)));
    }
  }
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .overflow-x-auto {
    overflow-x: auto;
  }
  .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-amber-300\/40 {
    border-color: color-mix(in srgb, oklch(87.9% 0.169 91.605) 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-amber-300) 40%, transparent);
    }
  }
  .border-navy\/5 {
    border-color: color-mix(in srgb, #0C2C4A 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-navy) 5%, transparent);
    }
  }
  .border-navy\/10 {
    border-color: color-mix(in srgb, #0C2C4A 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-navy) 10%, transparent);
    }
  }
  .border-navy\/15 {
    border-color: color-mix(in srgb, #0C2C4A 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-navy) 15%, transparent);
    }
  }
  .border-red-300\/40 {
    border-color: color-mix(in srgb, oklch(80.8% 0.114 19.571) 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-red-300) 40%, 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);
    }
  }
  .bg-amber-500\/15 {
    background-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-amber-500) 15%, transparent);
    }
  }
  .bg-amber-600\/90 {
    background-color: color-mix(in srgb, oklch(66.6% 0.179 58.318) 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-amber-600) 90%, transparent);
    }
  }
  .bg-bbc-blue\/10 {
    background-color: color-mix(in srgb, #27A2F6 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-bbc-blue) 10%, transparent);
    }
  }
  .bg-bbc-blue\/20 {
    background-color: color-mix(in srgb, #27A2F6 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-bbc-blue) 20%, transparent);
    }
  }
  .bg-bbc-orange {
    background-color: var(--color-bbc-orange);
  }
  .bg-emerald-600\/80 {
    background-color: color-mix(in srgb, oklch(59.6% 0.145 163.225) 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-emerald-600) 80%, transparent);
    }
  }
  .bg-navy {
    background-color: var(--color-navy);
  }
  .bg-navy\/5 {
    background-color: color-mix(in srgb, #0C2C4A 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-navy) 5%, transparent);
    }
  }
  .bg-navy\/10 {
    background-color: color-mix(in srgb, #0C2C4A 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-navy) 10%, transparent);
    }
  }
  .bg-navy\/\[0\.03\] {
    background-color: color-mix(in srgb, #0C2C4A 3%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-navy) 3%, transparent);
    }
  }
  .bg-red-400\/20 {
    background-color: color-mix(in srgb, oklch(70.4% 0.191 22.216) 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-red-400) 20%, transparent);
    }
  }
  .bg-sky-700\/80 {
    background-color: color-mix(in srgb, oklch(50% 0.134 242.749) 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-sky-700) 80%, transparent);
    }
  }
  .bg-white {
    background-color: var(--color-white);
  }
  .bg-white\/15 {
    background-color: color-mix(in srgb, #fff 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 15%, transparent);
    }
  }
  .object-contain {
    object-fit: contain;
  }
  .p-3 {
    padding: calc(var(--spacing) * 3);
  }
  .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);
  }
  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }
  .px-8 {
    padding-inline: calc(var(--spacing) * 8);
  }
  .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-3 {
    padding-block: calc(var(--spacing) * 3);
  }
  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }
  .pt-1 {
    padding-top: calc(var(--spacing) * 1);
  }
  .pt-5 {
    padding-top: calc(var(--spacing) * 5);
  }
  .text-center {
    text-align: center;
  }
  .text-left {
    text-align: left;
  }
  .text-right {
    text-align: right;
  }
  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }
  .text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }
  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }
  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }
  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .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-\[0\.3em\] {
    --tw-tracking: 0.3em;
    letter-spacing: 0.3em;
  }
  .tracking-normal {
    --tw-tracking: var(--tracking-normal);
    letter-spacing: var(--tracking-normal);
  }
  .tracking-tight {
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }
  .tracking-wide {
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
  }
  .text-amber-100 {
    color: var(--color-amber-100);
  }
  .text-amber-200 {
    color: var(--color-amber-200);
  }
  .text-bbc-blue {
    color: var(--color-bbc-blue);
  }
  .text-bbc-orange {
    color: var(--color-bbc-orange);
  }
  .text-emerald-200 {
    color: var(--color-emerald-200);
  }
  .text-navy {
    color: var(--color-navy);
  }
  .text-navy\/30 {
    color: color-mix(in srgb, #0C2C4A 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-navy) 30%, transparent);
    }
  }
  .text-navy\/40 {
    color: color-mix(in srgb, #0C2C4A 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-navy) 40%, transparent);
    }
  }
  .text-navy\/55 {
    color: color-mix(in srgb, #0C2C4A 55%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-navy) 55%, transparent);
    }
  }
  .text-navy\/60 {
    color: color-mix(in srgb, #0C2C4A 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-navy) 60%, transparent);
    }
  }
  .text-navy\/70 {
    color: color-mix(in srgb, #0C2C4A 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-navy) 70%, transparent);
    }
  }
  .text-red-200 {
    color: var(--color-red-200);
  }
  .text-red-600 {
    color: var(--color-red-600);
  }
  .text-red-700 {
    color: var(--color-red-700);
  }
  .text-white {
    color: var(--color-white);
  }
  .text-white\/35 {
    color: color-mix(in srgb, #fff 35%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 35%, transparent);
    }
  }
  .text-white\/40 {
    color: color-mix(in srgb, #fff 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 40%, transparent);
    }
  }
  .text-white\/45 {
    color: color-mix(in srgb, #fff 45%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 45%, transparent);
    }
  }
  .text-white\/50 {
    color: color-mix(in srgb, #fff 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 50%, transparent);
    }
  }
  .text-white\/55 {
    color: color-mix(in srgb, #fff 55%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 55%, transparent);
    }
  }
  .text-white\/60 {
    color: color-mix(in srgb, #fff 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 60%, transparent);
    }
  }
  .text-white\/65 {
    color: color-mix(in srgb, #fff 65%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 65%, transparent);
    }
  }
  .text-white\/70 {
    color: color-mix(in srgb, #fff 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 70%, transparent);
    }
  }
  .text-white\/75 {
    color: color-mix(in srgb, #fff 75%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 75%, transparent);
    }
  }
  .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\/85 {
    color: color-mix(in srgb, #fff 85%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 85%, transparent);
    }
  }
  .normal-case {
    text-transform: none;
  }
  .uppercase {
    text-transform: uppercase;
  }
  .tabular-nums {
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
  }
  .no-underline {
    text-decoration-line: none;
  }
  .underline {
    text-decoration-line: underline;
  }
  .opacity-0 {
    opacity: 0%;
  }
  .opacity-40 {
    opacity: 40%;
  }
  .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);
  }
  .ring-bbc-orange {
    --tw-ring-color: var(--color-bbc-orange);
  }
  .filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, 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));
  }
  .hover\:border-red-300 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-red-300);
      }
    }
  }
  .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\:underline {
    &:hover {
      @media (hover: hover) {
        text-decoration-line: underline;
      }
    }
  }
  .sm\:grid-cols-2 {
    @media (width >= 40rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .md\:col-span-2 {
    @media (width >= 48rem) {
      grid-column: span 2 / span 2;
    }
  }
  .md\:grid-cols-2 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .lg\:grid-cols-4 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .xl\:grid-cols-2 {
    @media (width >= 80rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .xl\:grid-cols-3 {
    @media (width >= 80rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .\32 xl\:grid-cols-5 {
    @media (width >= 96rem) {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }
}
@layer base {
  html {
    scroll-behavior: smooth;
  }
  body.app-shell {
    font-family: 'Outfit', ui-sans-serif, system-ui, sans-serif;
    position: relative;
    min-height: 100vh;
    background-color: var(--color-navy);
    color: var(--color-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-image: radial-gradient(ellipse 90% 70% at 50% -10%, rgba(39, 162, 246, 0.28), transparent 55%), radial-gradient(ellipse 55% 45% at 8% 95%, rgba(246, 123, 39, 0.16), transparent 50%), radial-gradient(ellipse 45% 40% at 92% 85%, rgba(16, 185, 129, 0.14), transparent 45%), linear-gradient(180deg, #07182c 0%, #0c2c4a 48%, #06121f 100%);
  }
  body.app-shell::before {
    content: '';
    pointer-events: none;
    position: absolute;
    inset: calc(var(--spacing) * 0);
    opacity: 0.055;
    background-image: linear-gradient(rgba(255, 255, 255, 0.55) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.55) 1px, transparent 1px);
    background-size: 4rem 4rem;
    mask-image: radial-gradient(ellipse 75% 65% at 50% 35%, #000 15%, transparent 78%);
  }
}
@layer components {
  .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-xl);
    background-color: var(--color-bbc-orange);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
    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));
    &:hover {
      @media (hover: hover) {
        --tw-brightness: brightness(110%);
        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,);
      }
    }
  }
  .btn-primary:disabled, .btn-secondary:disabled, .btn-ghost:disabled {
    pointer-events: none;
    opacity: 40%;
  }
  .btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-xl);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-navy);
    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));
    &:hover {
      @media (hover: hover) {
        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);
        }
      }
    }
  }
  .btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    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);
    }
    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);
    }
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
    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));
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-bbc-blue);
      }
    }
    &: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);
        }
      }
    }
  }
  .badge {
    display: inline-flex;
    align-items: center;
    border-radius: calc(infinity * 1px);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .badge-done {
    display: inline-flex;
    align-items: center;
    border-radius: calc(infinity * 1px);
    background-color: color-mix(in srgb, oklch(76.5% 0.177 163.223) 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-emerald-400) 20%, transparent);
    }
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-emerald-200);
  }
  .badge-progress {
    display: inline-flex;
    align-items: center;
    border-radius: calc(infinity * 1px);
    background-color: color-mix(in srgb, #F67B27 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-bbc-orange) 20%, transparent);
    }
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-bbc-orange);
  }
  .badge-todo {
    display: inline-flex;
    align-items: center;
    border-radius: calc(infinity * 1px);
    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);
    }
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: color-mix(in srgb, #fff 55%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 55%, transparent);
    }
  }
  .card {
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    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);
    }
    padding: calc(var(--spacing) * 4);
    color: var(--color-white);
    --tw-shadow: 0 12px 40px var(--tw-shadow-color, rgba(0,0,0,0.22));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --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,);
    background-image: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
  }
  .card-validated, .card-done {
    border-color: color-mix(in srgb, oklch(84.5% 0.143 164.978) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-emerald-300) 30%, transparent);
    }
    background-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-emerald-500) 15%, transparent);
    }
    background-image: none;
  }
  .card-forfeit {
    border-color: color-mix(in srgb, oklch(80.8% 0.114 19.571) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-red-300) 30%, transparent);
    }
    background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-red-500) 15%, transparent);
    }
    background-image: none;
  }
  .card-next {
    --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);
    --tw-ring-color: var(--color-bbc-orange);
  }
  .app-header {
    position: relative;
    z-index: 2;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    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);
    }
    background-color: color-mix(in srgb, #0C2C4A 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-navy) 80%, transparent);
    }
    --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,);
  }
  .app-header-inner {
    margin-inline: auto;
    display: flex;
    max-width: 96rem;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 4);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 6);
    }
  }
  .app-brand {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    color: var(--color-white);
  }
  .app-brand-logo {
    height: calc(var(--spacing) * 11);
    width: calc(var(--spacing) * 11);
    object-fit: contain;
  }
  .app-brand-kicker {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-tracking: 0.2em;
    letter-spacing: 0.2em;
    color: var(--color-bbc-blue);
    text-transform: uppercase;
  }
  .app-brand-title {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .app-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .app-nav a {
    color: color-mix(in srgb, #fff 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 90%, transparent);
    }
    text-decoration-line: none;
    &:hover {
      @media (hover: hover) {
        color: var(--color-bbc-orange);
      }
    }
  }
  .live-health-badge {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: calc(infinity * 1px);
    border-style: var(--tw-border-style);
    border-width: 1px;
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    text-decoration-line: none;
  }
  .live-health-badge .live-health-badge-dot {
    height: calc(var(--spacing) * 2);
    width: calc(var(--spacing) * 2);
    flex-shrink: 0;
    border-radius: calc(infinity * 1px);
  }
  .live-health-badge.is-ok {
    border-color: color-mix(in srgb, oklch(76.5% 0.177 163.223) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-emerald-400) 50%, transparent);
    }
    background-color: color-mix(in srgb, oklch(59.6% 0.145 163.225) 85%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-emerald-600) 85%, transparent);
    }
    color: var(--color-white);
    &:hover {
      @media (hover: hover) {
        color: var(--color-white);
      }
    }
  }
  .live-health-badge.is-ok .live-health-badge-dot {
    background-color: var(--color-emerald-200);
  }
  .live-health-badge.is-bad {
    border-color: color-mix(in srgb, oklch(80.8% 0.114 19.571) 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-red-300) 60%, transparent);
    }
    background-color: color-mix(in srgb, oklch(57.7% 0.245 27.325) 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-red-600) 90%, transparent);
    }
    color: var(--color-white);
    &:hover {
      @media (hover: hover) {
        color: var(--color-white);
      }
    }
  }
  .live-health-badge.is-bad .live-health-badge-dot {
    background-color: var(--color-red-100);
  }
  .live-health-badge.is-idle {
    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);
    }
    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);
    }
    color: color-mix(in srgb, #fff 85%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 85%, transparent);
    }
    &:hover {
      @media (hover: hover) {
        color: var(--color-white);
      }
    }
  }
  .live-health-badge.is-idle .live-health-badge-dot {
    background-color: color-mix(in srgb, #fff 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 50%, transparent);
    }
  }
  .live-health-alert {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: color-mix(in srgb, oklch(87.9% 0.169 91.605) 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-amber-300) 40%, transparent);
    }
    background-color: color-mix(in srgb, oklch(55.5% 0.163 48.998) 95%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-amber-700) 95%, transparent);
    }
    color: var(--color-white);
  }
  .live-health-alert.is-hidden {
    display: none;
  }
  .live-health-alert-inner {
    margin-inline: auto;
    display: flex;
    max-width: 96rem;
    flex-direction: column;
    gap: calc(var(--spacing) * 1);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2.5);
    @media (width >= 48rem) {
      flex-direction: row;
    }
    @media (width >= 48rem) {
      align-items: center;
    }
    @media (width >= 48rem) {
      justify-content: space-between;
    }
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 4);
    }
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 6);
    }
  }
  .live-health-alert-label {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: var(--leading-snug);
    line-height: var(--leading-snug);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .live-health-alert-hint {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: color-mix(in srgb, oklch(98.7% 0.022 95.277) 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-amber-50) 90%, transparent);
    }
  }
  .live-health-alert-hint code {
    border-radius: 0.25rem;
    background-color: color-mix(in srgb, #000 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 25%, transparent);
    }
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--color-white);
  }
  .app-main {
    position: relative;
    z-index: 1;
    margin-inline: auto;
    max-width: 96rem;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 6);
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 6);
    }
  }
  .app-flash {
    margin-bottom: calc(var(--spacing) * 4);
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .app-flash-ok {
    border-color: color-mix(in srgb, oklch(84.5% 0.143 164.978) 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-emerald-300) 40%, transparent);
    }
    background-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-emerald-500) 20%, transparent);
    }
    color: var(--color-emerald-100);
  }
  .app-flash-error {
    border-color: color-mix(in srgb, oklch(80.8% 0.114 19.571) 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-red-300) 40%, transparent);
    }
    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);
    }
    color: var(--color-red-100);
  }
  .program-nav-bar {
    margin-top: calc(var(--spacing) * 3);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .program-nav-actions {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .program-nav-current {
    padding-inline: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: color-mix(in srgb, #fff 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 70%, transparent);
    }
    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));
    &:hover {
      @media (hover: hover) {
        color: var(--color-bbc-orange);
      }
    }
  }
  .program-nav-hint {
    margin-bottom: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-bbc-orange);
  }
  .program-timeline {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--spacing) * 1.5);
  }
  .program-chip {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    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));
  }
  .program-chip-code {
    border-radius: var(--radius-md);
    background-color: color-mix(in srgb, #000 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 20%, transparent);
    }
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: calc(var(--spacing) * 0.5);
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
  }
  .program-chip-label {
    display: none;
    @media (width >= 40rem) {
      display: inline;
    }
  }
  .program-chip-done {
    border-color: color-mix(in srgb, oklch(84.5% 0.143 164.978) 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-emerald-300) 40%, transparent);
    }
    background-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-emerald-500) 25%, transparent);
    }
    color: var(--color-emerald-100);
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 35%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-emerald-500) 35%, transparent);
        }
      }
    }
  }
  .program-chip-active {
    border-color: color-mix(in srgb, #F67B27 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-bbc-orange) 70%, transparent);
    }
    background-color: var(--color-bbc-orange);
    color: var(--color-white);
    --tw-shadow: 0 0 16px var(--tw-shadow-color, rgba(246,123,39,0.35));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .program-chip-todo {
    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);
    }
    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);
    }
    color: color-mix(in srgb, #fff 35%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 35%, transparent);
    }
  }
  .program-chip-next {
    cursor: pointer;
    border-color: color-mix(in srgb, #F67B27 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-bbc-orange) 80%, transparent);
    }
    background-color: color-mix(in srgb, #F67B27 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-bbc-orange) 25%, transparent);
    }
    color: var(--color-bbc-orange);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-bbc-orange);
      }
    }
    &:hover {
      @media (hover: hover) {
        color: var(--color-white);
      }
    }
    animation: program-chip-pulse 1.4s ease-in-out infinite;
  }
  .program-chip-locked {
    cursor: not-allowed;
    opacity: 70%;
  }
  .program-timeline-legend {
    margin-top: calc(var(--spacing) * 2);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    font-size: 11px;
    color: color-mix(in srgb, #fff 45%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 45%, transparent);
    }
  }
  .program-legend-done::before, .program-legend-active::before, .program-legend-next::before, .program-legend-todo::before {
    content: '';
    margin-right: calc(var(--spacing) * 1.5);
    display: inline-block;
    height: calc(var(--spacing) * 2);
    width: calc(var(--spacing) * 2);
    border-radius: calc(infinity * 1px);
    vertical-align: middle;
  }
  .program-legend-done::before {
    background-color: var(--color-emerald-400);
  }
  .program-legend-active::before {
    background-color: var(--color-bbc-orange);
  }
  .program-legend-next::before {
    background-color: color-mix(in srgb, #F67B27 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-bbc-orange) 70%, transparent);
    }
    box-shadow: 0 0 0 3px rgba(246, 123, 39, 0.25);
  }
  .program-legend-todo::before {
    background-color: color-mix(in srgb, #fff 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 30%, transparent);
    }
  }
  .program-cta {
    margin-bottom: calc(var(--spacing) * 6);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 4);
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: color-mix(in srgb, #F67B27 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-bbc-orange) 50%, transparent);
    }
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 4);
    --tw-shadow: 0 12px 40px var(--tw-shadow-color, rgba(246,123,39,0.18));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --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,);
    background: linear-gradient(120deg, rgba(246, 123, 39, 0.22), rgba(255, 255, 255, 0.06));
  }
  .program-cta-kicker {
    font-size: 11px;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: 0.18em;
    letter-spacing: 0.18em;
    color: var(--color-bbc-orange);
    text-transform: uppercase;
  }
  .program-cta-title {
    margin-top: calc(var(--spacing) * 0.5);
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-white);
  }
  .program-cta-lead {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: color-mix(in srgb, #fff 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 70%, transparent);
    }
  }
  .program-cta-btn {
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 3);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --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);
  }
  @keyframes program-chip-pulse {
    0%, 100% {
      box-shadow: 0 0 0 0 rgba(246, 123, 39, 0.35);
    }
    50% {
      box-shadow: 0 0 0 6px rgba(246, 123, 39, 0);
    }
  }
  .team-label {
    min-width: calc(var(--spacing) * 0);
  }
  .team-label-names {
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .team-label-amp {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    opacity: 55%;
  }
  .team-label-club {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    --tw-leading: var(--leading-snug);
    line-height: var(--leading-snug);
    opacity: 70%;
  }
  .team-label-empty {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    opacity: 55%;
  }
  .team-label-end {
    text-align: right;
  }
  .team-label-court {
    text-align: center;
    color: var(--color-white);
  }
  .team-label-court .team-label-names {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .team-label-court .team-label-club {
    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);
    }
  }
  .team-label-tv .team-label-names {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
  }
  .team-label-tv .team-label-club {
    color: color-mix(in srgb, #fff 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 60%, transparent);
    }
  }
  .team-label-standing .team-label-names {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-white);
  }
  .team-label-standing .team-label-club {
    color: color-mix(in srgb, #fff 55%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 55%, transparent);
    }
  }
  .team-label-card .team-label-names {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-white);
  }
  .team-label-card .team-label-club {
    color: color-mix(in srgb, #fff 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 60%, transparent);
    }
  }
  .team-label-page .team-label-names {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
  }
  .team-label-page .team-label-club {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: color-mix(in srgb, #fff 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 70%, transparent);
    }
  }
  .team-label-checkin .team-label-names {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
  .team-label-list .team-label-names {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-white);
  }
  .team-label-list .team-label-club {
    color: color-mix(in srgb, #fff 65%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 65%, transparent);
    }
  }
  .progress-track {
    height: calc(var(--spacing) * 2);
    overflow: hidden;
    border-radius: calc(infinity * 1px);
    background-color: color-mix(in srgb, #fff 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 15%, transparent);
    }
  }
  .progress-bar {
    height: 100%;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-bbc-orange);
    transition-property: width;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .progress-bar-done {
    background-color: var(--color-emerald-500);
  }
  .workflow-steps {
    display: grid;
    gap: calc(var(--spacing) * 3);
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    @media (width >= 80rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .workflow-step {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    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);
    }
    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);
    }
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    color: var(--color-white);
    --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,);
  }
  .workflow-dot {
    display: flex;
    height: calc(var(--spacing) * 8);
    width: calc(var(--spacing) * 8);
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: calc(infinity * 1px);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .workflow-step-done .workflow-dot {
    background-color: var(--color-emerald-500);
    color: var(--color-white);
  }
  .workflow-step-progress .workflow-dot, .workflow-step-ready .workflow-dot {
    background-color: var(--color-bbc-orange);
    color: var(--color-white);
  }
  .workflow-step-todo .workflow-dot {
    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);
    }
    color: color-mix(in srgb, #fff 55%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 55%, transparent);
    }
  }
  .app-shell label {
    margin-bottom: calc(var(--spacing) * 1);
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    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);
    }
  }
  .app-shell input[type='text'], .app-shell input[type='email'], .app-shell input[type='password'], .app-shell input[type='number'], .app-shell input[type='date'], .app-shell input[type='datetime-local'], .app-shell input[type='file'], .app-shell select:not(.score-input), .app-shell textarea {
    width: 100%;
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: color-mix(in srgb, #fff 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 15%, transparent);
    }
    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);
    }
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-white);
    --tw-outline-style: none;
    outline-style: none;
    &::placeholder {
      color: color-mix(in srgb, #fff 40%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, var(--color-white) 40%, transparent);
      }
    }
    &:focus {
      border-color: var(--color-bbc-blue);
    }
  }
  .app-shell input[type='date'], .app-shell input[type='datetime-local'] {
    color-scheme: dark;
  }
  .app-shell input[type='file'] {
    &::file-selector-button {
      margin-right: calc(var(--spacing) * 3);
    }
    &::file-selector-button {
      border-radius: var(--radius-lg);
    }
    &::file-selector-button {
      border-style: var(--tw-border-style);
      border-width: 0px;
    }
    &::file-selector-button {
      background-color: color-mix(in srgb, #fff 15%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-white) 15%, transparent);
      }
    }
    &::file-selector-button {
      padding-inline: calc(var(--spacing) * 3);
    }
    &::file-selector-button {
      padding-block: calc(var(--spacing) * 1.5);
    }
    &::file-selector-button {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }
    &::file-selector-button {
      --tw-font-weight: var(--font-weight-semibold);
      font-weight: var(--font-weight-semibold);
    }
    &::file-selector-button {
      color: var(--color-white);
    }
  }
  .app-shell .form-error, .app-shell .invalid-feedback, .app-shell ul li {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-red-300);
  }
  .ts-wrapper.single .ts-control, .ts-wrapper.multi .ts-control {
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: color-mix(in srgb, #fff 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 15%, transparent);
    }
    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);
    }
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-white);
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    min-height: 2.75rem;
  }
  .ts-wrapper.single .ts-control input, .ts-wrapper.multi .ts-control input {
    color: var(--color-white);
    &::placeholder {
      color: color-mix(in srgb, #fff 40%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, var(--color-white) 40%, transparent);
      }
    }
  }
  .ts-wrapper.focus .ts-control {
    border-color: var(--color-bbc-blue);
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ts-dropdown {
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: color-mix(in srgb, #fff 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 15%, transparent);
    }
    background-color: var(--color-navy);
    color: var(--color-white);
    z-index: 60;
  }
  .ts-dropdown .option, .ts-dropdown .optgroup-header {
    color: color-mix(in srgb, #fff 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 90%, transparent);
    }
  }
  .ts-dropdown .active {
    background-color: var(--color-bbc-blue);
    color: var(--color-white);
  }
  .ts-dropdown .option.disabled {
    opacity: 35%;
  }
  .ts-control .item {
    color: var(--color-white);
  }
  .ts-wrapper.disabled .ts-control {
    opacity: 50%;
  }
  .club-logo {
    height: calc(var(--spacing) * 8);
    width: calc(var(--spacing) * 8);
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background-color: var(--color-white);
    object-fit: contain;
    --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);
    --tw-ring-color: color-mix(in srgb, #0C2C4A 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--color-navy) 10%, transparent);
    }
  }
  .checkin-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: calc(var(--spacing) * 5);
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .checkin-card {
    height: 100%;
    border-radius: 1.5rem;
    padding: 1px;
    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));
    --tw-duration: 200ms;
    transition-duration: 200ms;
    &:hover {
      @media (hover: hover) {
        --tw-translate-y: calc(var(--spacing) * -1);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
    background: linear-gradient(155deg, rgba(148, 178, 210, 0.55) 0%, rgba(90, 120, 155, 0.2) 42%, rgba(196, 168, 140, 0.35) 100%);
    box-shadow: 0 16px 40px rgba(4, 16, 32, 0.35);
  }
  .checkin-card-validee {
    background: linear-gradient(155deg, rgba(110, 210, 170, 0.65) 0%, rgba(40, 120, 95, 0.25) 55%, rgba(148, 200, 180, 0.4) 100%);
    box-shadow: 0 16px 40px rgba(6, 40, 28, 0.32);
  }
  .checkin-card-forfait {
    background: linear-gradient(155deg, rgba(180, 150, 150, 0.4) 0%, rgba(90, 70, 70, 0.2) 55%, rgba(140, 110, 110, 0.3) 100%);
    box-shadow: 0 12px 32px rgba(20, 10, 10, 0.28);
  }
  .checkin-card-inner {
    position: relative;
    display: flex;
    height: 100%;
    flex-direction: column;
    overflow: hidden;
    border-radius: 1.4rem;
    padding: calc(var(--spacing) * 3.5);
    color: var(--color-white);
    background: radial-gradient(ellipse 80% 55% at 12% 0%, rgba(255, 255, 255, 0.1), transparent 55%), linear-gradient(165deg, #16324d 0%, #0d2238 55%, #0a1a2c 100%);
  }
  .checkin-card-validee .checkin-card-inner {
    background: radial-gradient(ellipse 80% 55% at 12% 0%, rgba(110, 220, 175, 0.16), transparent 55%), linear-gradient(165deg, #134033 0%, #0c2a22 55%, #091f1a 100%);
  }
  .checkin-card-forfait .checkin-card-inner {
    background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(255, 255, 255, 0.05), transparent 55%), linear-gradient(165deg, #2a2224 0%, #1a1416 60%, #120e10 100%);
  }
  .checkin-card-inner::before {
    content: "";
    pointer-events: none;
    position: absolute;
    left: 1rem;
    right: 1rem;
    top: 0;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(148, 178, 210, 0.7), rgba(196, 168, 140, 0.55));
    opacity: 0.9;
  }
  .checkin-card-validee .checkin-card-inner::before {
    background: linear-gradient(90deg, rgba(110, 210, 170, 0.85), rgba(90, 190, 160, 0.45));
  }
  .checkin-card-forfait .checkin-card-inner::before {
    background: linear-gradient(90deg, rgba(190, 140, 140, 0.55), rgba(140, 110, 110, 0.35));
  }
  .checkin-card-inner::after {
    content: none;
  }
  .checkin-card-header {
    position: relative;
    z-index: 10;
    margin-bottom: calc(var(--spacing) * 3);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 1);
    padding-top: calc(var(--spacing) * 1);
  }
  .checkin-pair {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }
  .checkin-pool {
    margin-top: calc(var(--spacing) * 1);
    font-size: 11px;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: 0.22em;
    letter-spacing: 0.22em;
    color: color-mix(in srgb, oklch(90.1% 0.058 230.902) 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-sky-200) 80%, transparent);
    }
    text-transform: uppercase;
  }
  .checkin-card-validee .checkin-pool {
    color: color-mix(in srgb, oklch(90.5% 0.093 164.15) 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-emerald-200) 90%, transparent);
    }
  }
  .checkin-card-forfait .checkin-pool {
    color: color-mix(in srgb, oklch(89.2% 0.058 10.001) 55%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-rose-200) 55%, transparent);
    }
  }
  .checkin-status {
    flex-shrink: 0;
    border-radius: calc(infinity * 1px);
    border-style: var(--tw-border-style);
    border-width: 1px;
    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);
    }
    background-color: color-mix(in srgb, #fff 12%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 12%, transparent);
    }
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    --tw-tracking: 0.14em;
    letter-spacing: 0.14em;
    color: var(--color-white);
    text-transform: uppercase;
    --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);
    --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,);
  }
  .checkin-card-validee .checkin-status {
    border-color: color-mix(in srgb, oklch(90.5% 0.093 164.15) 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-emerald-200) 40%, transparent);
    }
    background-color: color-mix(in srgb, oklch(76.5% 0.177 163.223) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-emerald-400) 25%, transparent);
    }
    color: var(--color-emerald-50);
  }
  .checkin-card-forfait .checkin-status {
    border-color: color-mix(in srgb, oklch(89.2% 0.058 10.001) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-rose-200) 30%, transparent);
    }
    background-color: color-mix(in srgb, oklch(64.5% 0.246 16.439) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-rose-500) 25%, transparent);
    }
    color: var(--color-rose-50);
  }
  .checkin-art {
    position: relative;
    z-index: 10;
    display: grid;
    min-height: 14rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: color-mix(in srgb, #fff 12%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 12%, transparent);
    }
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
  .checkin-stamp {
    pointer-events: none;
    position: absolute;
    inset: calc(var(--spacing) * 0);
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    --tw-tracking: 0.28em;
    letter-spacing: 0.28em;
    color: color-mix(in srgb, oklch(81% 0.117 11.638) 85%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-rose-300) 85%, transparent);
    }
    text-transform: uppercase;
    transform: rotate(-18deg);
    text-shadow: 0 2px 12px rgb(0 0 0 / 0.55);
  }
  .checkin-player {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-inline: calc(var(--spacing) * 2);
    padding-top: calc(var(--spacing) * 5);
    padding-bottom: calc(var(--spacing) * 4);
    text-align: center;
  }
  .checkin-player-woman {
    background: linear-gradient(185deg, rgba(120, 158, 190, 0.42) 0%, rgba(22, 48, 72, 0.92) 72%);
    border-right: 1px solid rgb(255 255 255 / 0.1);
  }
  .checkin-player-man {
    background: linear-gradient(185deg, rgba(186, 154, 128, 0.38) 0%, rgba(28, 40, 52, 0.94) 72%);
  }
  .checkin-card-validee .checkin-player-woman {
    background: linear-gradient(185deg, rgba(90, 190, 150, 0.38) 0%, rgba(14, 48, 40, 0.92) 72%);
  }
  .checkin-card-validee .checkin-player-man {
    background: linear-gradient(185deg, rgba(120, 200, 165, 0.32) 0%, rgba(12, 42, 34, 0.94) 72%);
  }
  .checkin-card-forfait .checkin-player-woman, .checkin-card-forfait .checkin-player-man {
    background: linear-gradient(185deg, rgba(120, 100, 100, 0.28) 0%, rgba(28, 20, 22, 0.94) 72%);
    --tw-grayscale: grayscale(100%);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .checkin-role {
    position: absolute;
    top: calc(var(--spacing) * 2.5);
    border-radius: calc(infinity * 1px);
    background-color: color-mix(in srgb, #000 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 20%, transparent);
    }
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 10px;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    --tw-tracking: 0.22em;
    letter-spacing: 0.22em;
    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-transform: uppercase;
    --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,);
  }
  .checkin-portrait {
    margin-bottom: calc(var(--spacing) * 3);
    display: flex;
    height: 5.75rem;
    width: 5.75rem;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 1.35rem;
    background-color: var(--color-white);
    --tw-shadow: 0 10px 24px var(--tw-shadow-color, rgba(0,0,0,0.28));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --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);
    --tw-ring-color: color-mix(in srgb, #fff 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--color-white) 70%, transparent);
    }
  }
  .checkin-portrait img {
    height: 100%;
    width: 100%;
    background-color: var(--color-white);
    object-fit: contain;
    padding: calc(var(--spacing) * 1);
  }
  .checkin-initials {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    color: color-mix(in srgb, #0C2C4A 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-navy) 80%, transparent);
    }
  }
  .checkin-player-name {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    --tw-drop-shadow-size: drop-shadow(0 1px 2px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.15)));
    --tw-drop-shadow: drop-shadow(var(--drop-shadow-sm));
    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,);
  }
  .checkin-player-club {
    margin-top: calc(var(--spacing) * 0.5);
    font-size: 11px;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: 0.14em;
    letter-spacing: 0.14em;
    color: color-mix(in srgb, #fff 75%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 75%, transparent);
    }
    text-transform: uppercase;
  }
  .checkin-level {
    margin-top: calc(var(--spacing) * 1.5);
    border-radius: calc(infinity * 1px);
    background-color: color-mix(in srgb, #000 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 20%, transparent);
    }
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 10px;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    color: color-mix(in srgb, oklch(96.2% 0.059 95.617) 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-amber-100) 80%, transparent);
    }
    text-transform: uppercase;
  }
  .checkin-card-footer {
    position: relative;
    z-index: 10;
    margin-top: calc(var(--spacing) * 3.5);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: calc(var(--spacing) * 3);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    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);
    }
    padding-top: calc(var(--spacing) * 3);
  }
  .checkin-mail {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    word-break: break-all;
    color: color-mix(in srgb, #fff 75%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 75%, transparent);
    }
    text-decoration-line: none;
    &:hover {
      @media (hover: hover) {
        color: var(--color-sky-100);
      }
    }
  }
  .checkin-mail-date {
    font-size: 11px;
    color: color-mix(in srgb, #fff 45%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 45%, transparent);
    }
  }
  .checkin-btn-ghost {
    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);
    }
    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);
    }
    color: var(--color-white);
    &:hover {
      @media (hover: hover) {
        border-color: color-mix(in srgb, #fff 40%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-white) 40%, transparent);
        }
      }
    }
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #fff 15%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-white) 15%, transparent);
        }
      }
    }
  }
  .checkin-page {
    font-family: 'Outfit', ui-sans-serif, system-ui, sans-serif;
    position: relative;
    min-height: 100vh;
    background-color: var(--color-navy);
    color: var(--color-white);
    background-image: radial-gradient(ellipse 85% 55% at 50% -12%, rgba(130, 168, 200, 0.18), transparent 58%), radial-gradient(ellipse 45% 40% at 0% 90%, rgba(180, 155, 130, 0.1), transparent 55%), linear-gradient(180deg, #081929 0%, #0c2c4a 50%, #071521 100%);
  }
  .checkin-page::before {
    content: '';
    pointer-events: none;
    position: absolute;
    inset: calc(var(--spacing) * 0);
    opacity: 0.055;
    background-image: linear-gradient(rgba(255, 255, 255, 0.55) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.55) 1px, transparent 1px);
    background-size: 4rem 4rem;
    mask-image: radial-gradient(ellipse 75% 65% at 50% 35%, #000 15%, transparent 78%);
  }
  .checkin-frame {
    position: relative;
    z-index: 1;
    margin-inline: auto;
    max-width: 96rem;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 5);
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 6);
    }
  }
  .checkin-page > header {
    position: relative;
    z-index: 2;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    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);
    }
    background-color: color-mix(in srgb, #0C2C4A 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-navy) 80%, transparent);
    }
    --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,);
  }
  .checkin-page > header a {
    color: var(--color-white);
  }
  .checkin-page .btn-ghost {
    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);
    }
    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);
    }
    color: var(--color-white);
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-bbc-blue);
      }
    }
    &: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);
        }
      }
    }
  }
  .checkin-page .btn-secondary {
    border-style: var(--tw-border-style);
    border-width: 0px;
    background-color: var(--color-bbc-orange);
    color: var(--color-white);
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #F67B27 90%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-bbc-orange) 90%, transparent);
        }
      }
    }
  }
  .checkin-page .program-nav p {
    color: color-mix(in srgb, #fff 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 70%, transparent);
    }
  }
  .checkin-page .mb-4.rounded-xl {
    border-style: var(--tw-border-style);
    border-width: 1px;
    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);
    }
    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);
    }
    color: var(--color-white);
  }
  .checkin-masthead {
    margin-bottom: calc(var(--spacing) * 6);
  }
  .checkin-masthead-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 4);
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    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);
    }
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    --tw-shadow: 0 12px 40px var(--tw-shadow-color, rgba(0,0,0,0.22));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --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,);
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
  }
  .checkin-masthead-banner {
    margin-bottom: calc(var(--spacing) * 3);
    width: 100%;
    border-radius: var(--radius-2xl);
    object-fit: cover;
    --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);
    --tw-ring-color: color-mix(in srgb, #fff 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--color-white) 20%, transparent);
    }
    aspect-ratio: 1920 / 250;
  }
  .checkin-masthead-copy {
    min-width: calc(var(--spacing) * 0);
    flex: 1;
  }
  .checkin-masthead-title {
    margin-top: calc(var(--spacing) * 0.5);
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-white);
    @media (width >= 48rem) {
      font-size: var(--text-3xl);
      line-height: var(--tw-leading, var(--text-3xl--line-height));
    }
  }
  .checkin-masthead-lead {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: color-mix(in srgb, #fff 65%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 65%, transparent);
    }
  }
  .checkin-masthead-aside {
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    align-items: flex-end;
    gap: calc(var(--spacing) * 1);
  }
  .checkin-masthead-badge {
    border-radius: var(--radius-xl);
    background-color: var(--color-bbc-orange);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    color: var(--color-white);
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px 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);
  }
  .checkin-filters {
    margin-bottom: calc(var(--spacing) * 5);
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    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);
    }
    padding: calc(var(--spacing) * 3);
    --tw-shadow: 0 12px 40px var(--tw-shadow-color, rgba(0,0,0,0.18));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --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,);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
  }
  .checkin-tabs {
    margin-bottom: calc(var(--spacing) * 4);
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--spacing) * 2);
  }
  .checkin-tab {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: color-mix(in srgb, #fff 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 15%, transparent);
    }
    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);
    }
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: color-mix(in srgb, #fff 75%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 75%, transparent);
    }
    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));
    &:hover {
      @media (hover: hover) {
        border-color: color-mix(in srgb, #27A2F6 60%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-bbc-blue) 60%, transparent);
        }
      }
    }
    &: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 {
      @media (hover: hover) {
        color: var(--color-white);
      }
    }
  }
  .checkin-tab.is-active {
    border-color: color-mix(in srgb, #F67B27 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-bbc-orange) 70%, transparent);
    }
    background-color: var(--color-bbc-orange);
    color: var(--color-white);
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px 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);
  }
  .checkin-tab-count {
    border-radius: var(--radius-lg);
    background-color: color-mix(in srgb, #000 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 25%, transparent);
    }
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
  }
  .checkin-tab.is-active .checkin-tab-count {
    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);
    }
  }
  .checkin-filter-input {
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: color-mix(in srgb, #fff 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 15%, transparent);
    }
    background-color: color-mix(in srgb, #0C2C4A 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-navy) 40%, transparent);
    }
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-white);
    --tw-outline-style: none;
    outline-style: none;
    &::placeholder {
      color: color-mix(in srgb, #fff 40%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, var(--color-white) 40%, transparent);
      }
    }
    &:focus {
      border-color: var(--color-bbc-blue);
    }
  }
  .checkin-filter-input option {
    background-color: var(--color-navy);
    color: var(--color-white);
  }
  .checkin-empty {
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    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);
    }
    background-color: color-mix(in srgb, #fff 8%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 8%, transparent);
    }
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 10);
    text-align: center;
    color: color-mix(in srgb, #fff 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 70%, transparent);
    }
    --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,);
  }
  .checkin-page .team-label-checkin .team-label-names {
    color: var(--color-white);
  }
  .checkin-page .team-label-checkin .team-label-club {
    color: color-mix(in srgb, #fff 65%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 65%, transparent);
    }
  }
  .checkin-page .checkin-portrait img {
    background-color: color-mix(in srgb, #0C2C4A 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-navy) 30%, transparent);
    }
  }
  .score-card {
    min-height: 7.25rem;
    width: 100%;
  }
  .score-card-body {
    display: grid;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    grid-template-columns: minmax(0, 1fr) 8.75rem minmax(0, 1fr) 6.75rem;
  }
  .score-card-team {
    display: flex;
    min-width: calc(var(--spacing) * 0);
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .score-card-team-right {
    justify-content: flex-end;
    text-align: right;
  }
  .score-card-logos {
    display: flex;
    height: calc(var(--spacing) * 6);
    width: 3.25rem;
    flex-shrink: 0;
    align-items: center;
    gap: calc(var(--spacing) * 1);
  }
  .score-card-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .score-card-clubs {
    height: calc(var(--spacing) * 4);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: color-mix(in srgb, #fff 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 60%, transparent);
    }
  }
  .score-card-sets {
    display: flex;
    justify-content: center;
    gap: calc(var(--spacing) * 1.5);
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
  }
  .score-card-set {
    display: inline-flex;
    height: calc(var(--spacing) * 8);
    min-width: 2.5rem;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    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);
    }
    padding-inline: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-white);
  }
  .score-card-action {
    justify-self: flex-end;
  }
  .score-card-action .btn-primary {
    min-width: 6.75rem;
  }
  .countdown-overlay {
    position: fixed;
    inset: calc(var(--spacing) * 0);
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: radial-gradient(ellipse 70% 55% at 50% 45%, rgba(249, 115, 22, 0.22), transparent 55%), radial-gradient(ellipse 90% 80% at 50% 50%, rgba(15, 23, 42, 0.92), rgba(2, 6, 23, 0.97));
  }
  .countdown-orb {
    pointer-events: none;
    position: absolute;
    height: min(70vw, 28rem);
    width: min(70vw, 28rem);
    border-radius: calc(infinity * 1px);
    background: radial-gradient(circle, rgba(249, 115, 22, 0.35), transparent 68%);
    filter: blur(8px);
    animation: countdown-orb 2.4s ease-in-out infinite;
  }
  .countdown-number {
    position: relative;
    z-index: 10;
    --tw-leading: 1;
    line-height: 1;
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    color: var(--color-white);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    font-size: clamp(7rem, 28vw, 16rem);
    text-shadow: 0 0 40px rgba(249, 115, 22, 0.45), 0 12px 40px rgba(0, 0, 0, 0.45);
    letter-spacing: -0.04em;
  }
  .countdown-number.is-tick {
    animation: countdown-tick 0.85s cubic-bezier(0.2, 0.9, 0.3, 1) both;
  }
  .countdown-number.is-go {
    color: var(--color-bbc-orange);
    font-size: clamp(5rem, 18vw, 10rem);
    letter-spacing: 0.08em;
  }
  .countdown-caption {
    position: relative;
    z-index: 10;
    margin-top: calc(var(--spacing) * 6);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: 0.4em;
    letter-spacing: 0.4em;
    color: color-mix(in srgb, #fff 75%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 75%, transparent);
    }
    text-transform: uppercase;
    @media (width >= 48rem) {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
    }
  }
  .countdown-caption.is-tick {
    animation: countdown-caption-tick 0.55s cubic-bezier(0.2, 0.85, 0.25, 1) both;
  }
  @keyframes countdown-caption-tick {
    0% {
      opacity: 0.25;
      transform: translateY(0.45rem);
      letter-spacing: 0.55em;
    }
    100% {
      opacity: 1;
      transform: none;
      letter-spacing: 0.4em;
    }
  }
  @keyframes countdown-tick {
    0% {
      opacity: 0.35;
      transform: scale(0.72);
    }
    35% {
      opacity: 1;
      transform: scale(1.08);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }
  @keyframes countdown-orb {
    0%, 100% {
      transform: scale(0.92);
      opacity: 0.55;
    }
    50% {
      transform: scale(1.08);
      opacity: 0.9;
    }
  }
  .is-waiting {
    opacity: 0;
    transform: translateY(0.85rem);
  }
  .is-in {
    animation: tv-reveal 0.55s cubic-bezier(0.2, 0.85, 0.25, 1) both;
  }
  @keyframes tv-reveal {
    from {
      opacity: 0;
      transform: translateY(0.85rem);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  .draw-reveal {
    position: relative;
    display: grid;
    min-height: 22rem;
    gap: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    @media (width >= 80rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .draw-reveal-tv {
    min-height: min(70vh, 40rem);
  }
  .draw-pool {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-2xl);
    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);
    }
    padding: calc(var(--spacing) * 6);
    color: var(--color-white);
    --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);
    --tw-ring-color: color-mix(in srgb, #fff 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--color-white) 15%, transparent);
    }
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
  }
  .draw-pool-glow, .draw-pool-sheen, .draw-pool-phase, .draw-pool-rule {
    display: none;
  }
  .draw-pool-court {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
    @media (width >= 48rem) {
      font-size: var(--text-4xl);
      line-height: var(--tw-leading, var(--text-4xl--line-height));
    }
  }
  .draw-pool-kicker {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: 0.35em;
    letter-spacing: 0.35em;
    color: var(--color-bbc-blue);
    text-transform: uppercase;
  }
  .draw-pool-title {
    margin-top: calc(var(--spacing) * 2);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
    @media (width >= 48rem) {
      font-size: var(--text-4xl);
      line-height: var(--tw-leading, var(--text-4xl--line-height));
    }
  }
  .draw-pool-list {
    margin-top: calc(var(--spacing) * 6);
    :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)));
    }
  }
  .draw-reveal.is-complete .draw-pool-court {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
    @media (width >= 48rem) {
      font-size: var(--text-4xl);
      line-height: var(--tw-leading, var(--text-4xl--line-height));
    }
    font-family: inherit;
    text-shadow: none;
    letter-spacing: -0.02em;
    line-height: 1.1;
  }
  .draw-reveal.is-complete .draw-pool-kicker {
    order: -9999;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: 0.35em;
    letter-spacing: 0.35em;
    color: var(--color-bbc-blue);
    text-transform: uppercase;
    margin-top: 0;
  }
  .draw-reveal.is-complete .draw-pool-head {
    display: flex;
    flex-direction: column;
  }
  .draw-team {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    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);
    }
    padding-top: calc(var(--spacing) * 3);
  }
  .draw-team.is-writing .draw-caret {
    display: inline-block;
    animation: draw-caret 0.85s steps(1) infinite;
  }
  .draw-caret {
    margin-left: calc(var(--spacing) * 0.5);
    display: none;
    height: 0.95em;
    width: 0.08em;
    background-color: var(--color-bbc-orange);
    vertical-align: -0.08em;
  }
  .draw-team-clubs {
    margin-top: calc(var(--spacing) * 1);
  }
  @keyframes draw-caret {
    0%, 45% {
      opacity: 1;
    }
    50%, 100% {
      opacity: 0;
    }
  }
  .draw-stage {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-2xl);
    background-color: var(--color-navy);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 12);
    text-align: center;
    color: var(--color-white);
    --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);
  }
  .draw-stage-edit {
    position: absolute;
    top: calc(var(--spacing) * 4);
    right: calc(var(--spacing) * 4);
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: color-mix(in srgb, #fff 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 25%, transparent);
    }
    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);
    }
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-bbc-orange);
      }
    }
  }
  .draw-stage-kicker {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-tracking: 0.35em;
    letter-spacing: 0.35em;
    color: var(--color-bbc-blue);
    text-transform: uppercase;
  }
  .draw-stage-banner {
    margin-inline: auto;
    margin-top: calc(var(--spacing) * 4);
    width: 100%;
    max-width: var(--container-4xl);
    border-radius: var(--radius-2xl);
    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);
    }
    object-fit: cover;
    --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);
    --tw-ring-color: color-mix(in srgb, #fff 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--color-white) 25%, transparent);
    }
    aspect-ratio: 1920 / 250;
  }
  .draw-stage-title {
    margin-top: calc(var(--spacing) * 3);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-white);
    @media (width >= 48rem) {
      font-size: var(--text-4xl);
      line-height: var(--tw-leading, var(--text-4xl--line-height));
    }
  }
  .draw-stage-title.is-accent {
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
    color: var(--color-bbc-orange);
    @media (width >= 48rem) {
      font-size: var(--text-5xl);
      line-height: var(--tw-leading, var(--text-5xl--line-height));
    }
    @media (width >= 64rem) {
      font-size: var(--text-6xl);
      line-height: var(--tw-leading, var(--text-6xl--line-height));
    }
  }
  .draw-stage-lead {
    margin-top: calc(var(--spacing) * 3);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    color: color-mix(in srgb, #fff 85%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 85%, transparent);
    }
  }
  .draw-stage-lead.is-accent {
    margin-top: calc(var(--spacing) * 1.5);
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-bbc-orange);
    @media (width >= 48rem) {
      font-size: var(--text-2xl);
      line-height: var(--tw-leading, var(--text-2xl--line-height));
    }
  }
  .draw-stage-note {
    margin-inline: auto;
    margin-top: calc(var(--spacing) * 3);
    max-width: var(--container-xl);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
    color: color-mix(in srgb, #fff 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 60%, transparent);
    }
  }
  .draw-stage-note.is-accent {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-bbc-orange);
    @media (width >= 48rem) {
      font-size: var(--text-lg);
      line-height: var(--tw-leading, var(--text-lg--line-height));
    }
  }
  .draw-stage + .partner-slide {
    margin-inline: auto;
    margin-top: calc(var(--spacing) * 8);
    max-width: var(--container-3xl);
  }
  .draw-stage-courts {
    margin-top: calc(var(--spacing) * 8);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
  }
  .draw-stage-court {
    height: calc(var(--spacing) * 11);
    width: calc(var(--spacing) * 8);
    border-radius: var(--radius-sm);
    background-color: color-mix(in srgb, oklch(50.8% 0.118 165.612) 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-emerald-700) 90%, transparent);
    }
    --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);
    --tw-ring-color: color-mix(in srgb, #fff 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--color-white) 25%, transparent);
    }
    animation: draw-stage-breathe 2.4s ease-in-out infinite;
  }
  .draw-stage-court:nth-child(odd) {
    animation-delay: 0.4s;
  }
  .schedule-countdown {
    position: relative;
    z-index: 1;
    margin-inline: auto;
    margin-top: calc(var(--spacing) * 8);
    max-width: var(--container-3xl);
    text-align: center;
  }
  .schedule-countdown-caption {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-tracking: 0.35em;
    letter-spacing: 0.35em;
    color: var(--color-bbc-blue);
    text-transform: uppercase;
  }
  .schedule-countdown-units {
    margin-top: calc(var(--spacing) * 5);
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: calc(var(--spacing) * 3);
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 4);
    }
  }
  .schedule-countdown-unit {
    min-width: 4.5rem;
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: color-mix(in srgb, #fff 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 15%, transparent);
    }
    background-color: color-mix(in srgb, #fff 8%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 8%, transparent);
    }
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 4);
    --tw-shadow: 0 12px 40px var(--tw-shadow-color, rgba(0,0,0,0.2));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --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,);
    @media (width >= 48rem) {
      min-width: 5.5rem;
    }
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 4);
    }
  }
  .schedule-countdown-value {
    display: block;
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-white);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    font-size: clamp(1.75rem, 4vw, 3rem);
    line-height: 1;
  }
  .schedule-countdown-label {
    margin-top: calc(var(--spacing) * 2);
    display: block;
    font-size: 0.65rem;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: 0.2em;
    letter-spacing: 0.2em;
    color: color-mix(in srgb, #fff 55%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 55%, transparent);
    }
    text-transform: uppercase;
  }
  .schedule-countdown-when {
    margin-top: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: color-mix(in srgb, #fff 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 60%, transparent);
    }
  }
  .schedule-countdown-soon {
    margin-top: calc(var(--spacing) * 2);
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-bbc-orange);
    @media (width >= 48rem) {
      font-size: var(--text-4xl);
      line-height: var(--tw-leading, var(--text-4xl--line-height));
    }
    animation: schedule-countdown-pulse 1.8s ease-in-out infinite;
  }
  .tv-briefing {
    margin-inline: auto;
    display: flex;
    min-height: calc(100vh - 2rem);
    max-width: var(--container-4xl);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 10);
    text-align: center;
    @media (width >= 48rem) {
      min-height: calc(100vh - 4rem);
    }
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 16);
    }
  }
  .tv-briefing-banner {
    margin-top: calc(var(--spacing) * 4);
    width: 100%;
    max-width: var(--container-3xl);
    border-radius: var(--radius-2xl);
    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);
    }
    object-fit: cover;
    --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);
    --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);
    --tw-ring-color: color-mix(in srgb, #fff 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--color-white) 25%, transparent);
    }
    aspect-ratio: 1920 / 250;
  }
  .tv-briefing-title {
    margin-top: calc(var(--spacing) * 6);
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-white);
    font-size: clamp(2.25rem, 6vw, 4.5rem);
    line-height: 1.05;
  }
  .tv-briefing-lead {
    margin-top: calc(var(--spacing) * 3);
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
    color: color-mix(in srgb, #fff 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 70%, transparent);
    }
    @media (width >= 48rem) {
      font-size: var(--text-2xl);
      line-height: var(--tw-leading, var(--text-2xl--line-height));
    }
  }
  .tv-briefing-facts {
    margin-top: calc(var(--spacing) * 10);
    display: grid;
    width: 100%;
    max-width: var(--container-3xl);
    gap: calc(var(--spacing) * 3);
    @media (width >= 40rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .tv-briefing-fact {
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: color-mix(in srgb, #fff 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 15%, transparent);
    }
    background-color: color-mix(in srgb, #fff 8%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 8%, transparent);
    }
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 4);
    text-align: left;
    --tw-shadow: 0 12px 40px var(--tw-shadow-color, rgba(0,0,0,0.2));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --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,);
  }
  .tv-briefing-fact dt {
    font-size: 0.7rem;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: 0.22em;
    letter-spacing: 0.22em;
    color: var(--color-bbc-blue);
    text-transform: uppercase;
  }
  .tv-briefing-fact dd {
    margin-top: calc(var(--spacing) * 2);
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-white);
    @media (width >= 48rem) {
      font-size: var(--text-2xl);
      line-height: var(--tw-leading, var(--text-2xl--line-height));
    }
  }
  .tv-briefing-amenities {
    margin-top: calc(var(--spacing) * 8);
    max-width: var(--container-2xl);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
    color: color-mix(in srgb, #fff 65%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 65%, transparent);
    }
    @media (width >= 48rem) {
      font-size: var(--text-lg);
      line-height: var(--tw-leading, var(--text-lg--line-height));
    }
  }
  .tv-briefing .schedule-countdown {
    margin-top: calc(var(--spacing) * 10);
    width: 100%;
  }
  .tv-briefing-partners {
    margin-top: calc(var(--spacing) * 10);
    width: 100%;
    max-width: var(--container-3xl);
  }
  .tv-briefing-partners-label {
    font-size: 0.7rem;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: 0.28em;
    letter-spacing: 0.28em;
    color: color-mix(in srgb, #fff 55%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 55%, transparent);
    }
    text-transform: uppercase;
  }
  .tv-briefing-partners-list {
    margin-top: calc(var(--spacing) * 4);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 6);
    }
  }
  .tv-briefing-partner {
    display: flex;
    height: calc(var(--spacing) * 16);
    width: calc(var(--spacing) * 28);
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: color-mix(in srgb, #fff 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 15%, transparent);
    }
    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);
    }
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px 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);
    @media (width >= 48rem) {
      height: calc(var(--spacing) * 20);
    }
    @media (width >= 48rem) {
      width: calc(var(--spacing) * 36);
    }
  }
  .tv-briefing-partner img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
  }
  .tv-briefing-partner span {
    text-align: center;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-navy);
  }
  .tv-briefing-qr {
    margin-top: calc(var(--spacing) * 10);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--spacing) * 3);
  }
  .tv-briefing-qr img {
    height: calc(var(--spacing) * 36);
    width: calc(var(--spacing) * 36);
    border-radius: var(--radius-2xl);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 3);
    --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);
    --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);
    --tw-ring-color: color-mix(in srgb, #fff 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--color-white) 30%, transparent);
    }
    @media (width >= 48rem) {
      height: calc(var(--spacing) * 44);
    }
    @media (width >= 48rem) {
      width: calc(var(--spacing) * 44);
    }
  }
  .tv-briefing-qr-caption {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: 0.2em;
    letter-spacing: 0.2em;
    color: color-mix(in srgb, #fff 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 70%, transparent);
    }
    text-transform: uppercase;
  }
  .tv-briefing-qr-url {
    max-width: var(--container-md);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: color-mix(in srgb, #fff 45%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 45%, transparent);
    }
  }
  .tv-page:has(.tv-partners:not(.is-page)), .tv-page:has(.tv-welcome) {
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
  }
  .tv-frame:has(.tv-partners:not(.is-page)), .tv-frame:has(.tv-partners:not(.is-page)) > turbo-frame#tv-live, .tv-frame:has(.tv-partners:not(.is-page)) > #tv-live, .tv-screen:has(> .tv-partners:not(.is-page)), .tv-frame:has(.tv-welcome), .tv-frame:has(.tv-welcome) > turbo-frame#tv-live, .tv-frame:has(.tv-welcome) > #tv-live, .tv-screen:has(> .tv-welcome) {
    min-height: calc(var(--spacing) * 0);
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .tv-partners {
    position: relative;
    display: flex;
    min-height: calc(var(--spacing) * 0);
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 4);
    text-align: center;
    @media (width >= 40rem) {
      padding-inline: calc(var(--spacing) * 6);
    }
    @media (width >= 40rem) {
      padding-block: calc(var(--spacing) * 5);
    }
    background: radial-gradient(ellipse 42% 55% at 50% 42%, rgba(246, 123, 39, 0.18), transparent 62%), radial-gradient(ellipse 70% 50% at 50% 100%, rgba(39, 162, 246, 0.12), transparent 55%), linear-gradient(180deg, #040b14 0%, #0a1f35 42%, #06101a 100%);
  }
  .tv-partners.is-page {
    justify-content: flex-start;
    gap: calc(var(--spacing) * 2);
    overflow: auto;
    padding-block: calc(var(--spacing) * 12);
    flex: none;
    min-height: calc(100dvh - 4.5rem);
    height: auto;
  }
  .tv-partners.is-page .partner-slide {
    margin-top: auto;
    width: 100%;
    padding-top: calc(var(--spacing) * 8);
    position: relative;
    z-index: 1;
  }
  .tv-partners .partner-slide {
    margin-top: auto;
    width: 100%;
    flex-shrink: 0;
    padding-top: calc(var(--spacing) * 3);
    padding-bottom: calc(var(--spacing) * 2);
    position: relative;
    z-index: 1;
  }
  .tv-partners:not(.is-page) .partner-slide-viewport {
    overflow-x: hidden;
    overflow-y: visible;
    padding-bottom: 0.35rem;
  }
  .tv-partners:not(.is-page) .partner-slide-disc {
    height: 5.5rem;
    width: 5.5rem;
  }
  .tv-partners-countdown {
    margin-top: clamp(0.5rem, 1.5vh, 1rem);
    width: min(36rem, 100%);
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
  }
  .tv-partners:not(.is-page) .schedule-countdown {
    margin-top: calc(var(--spacing) * 0);
    max-width: 100%;
  }
  .tv-partners:not(.is-page) .schedule-countdown-units {
    margin-top: calc(var(--spacing) * 3);
    gap: calc(var(--spacing) * 2);
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 3);
    }
  }
  .tv-partners:not(.is-page) .schedule-countdown-unit {
    min-width: 3.75rem;
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 2.5);
    @media (width >= 48rem) {
      min-width: 4.75rem;
    }
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 3);
    }
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 3);
    }
  }
  .tv-partners:not(.is-page) .schedule-countdown-value {
    font-size: clamp(1.35rem, 3.2vw, 2.35rem);
  }
  .tv-partners:not(.is-page) .schedule-countdown-when {
    margin-top: calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    @media (width >= 40rem) {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }
  }
  .tv-partners:not(.is-page) .tv-partners-title {
    margin-top: 0.35rem;
    font-size: clamp(1.55rem, 4.2vw, 2.75rem);
  }
  .tv-partners:not(.is-page) .tv-partners-lead {
    margin-top: 0.35rem;
    font-size: 0.9rem;
  }
  .tv-partners:not(.is-page) .tv-partners-kicker {
    font-size: 0.62rem;
    letter-spacing: 0.28em;
  }
  .tv-partners-head, .tv-partners-empty {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
  }
  .tv-partners-kicker {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: #F67B27;
  }
  .tv-partners-title {
    margin-top: 0.75rem;
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    font-size: clamp(2.6rem, 8vw, 5rem);
    font-weight: 600;
    line-height: 0.95;
    letter-spacing: 0.02em;
    color: #fff;
  }
  .tv-partners-lead {
    margin-top: 0.85rem;
    font-size: clamp(0.95rem, 2vw, 1.2rem);
    color: rgba(255, 255, 255, 0.62);
  }
  .tv-tombola {
    display: flex;
    min-height: calc(var(--spacing) * 0);
    flex: 1;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 6);
    text-align: center;
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 8);
    }
  }
  .tv-tombola.is-drawing {
    position: fixed;
    inset: 0;
    z-index: 40;
    margin: 0;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    padding: clamp(1.75rem, 4vh, 2.75rem) clamp(1rem, 3vw, 2.5rem);
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    place-items: center;
    align-content: center;
    gap: 1.25rem;
    overflow: hidden;
    background: radial-gradient(ellipse 42% 55% at 50% 42%, rgba(246, 123, 39, 0.22), transparent 62%), radial-gradient(ellipse 70% 50% at 50% 100%, rgba(39, 162, 246, 0.12), transparent 55%), radial-gradient(ellipse 90% 70% at 50% -15%, rgba(12, 44, 74, 0.9), transparent 60%), linear-gradient(180deg, #040b14 0%, #0a1f35 42%, #06101a 100%);
  }
  .tv-tombola.is-drawing::before, .tv-tombola.is-drawing::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: clamp(1rem, 2.5vh, 1.75rem);
    z-index: 5;
    background: #01050a;
    pointer-events: none;
  }
  .tv-tombola.is-drawing::before {
    top: 0;
  }
  .tv-tombola.is-drawing::after {
    bottom: 0;
  }
  .tv-tombola.is-drawing .tv-tombola-head {
    position: relative;
    z-index: 2;
    margin: 0;
  }
  .tv-tombola-stage {
    position: relative;
    z-index: 2;
    margin-inline: auto;
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    border-radius: 1.35rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: color-mix(in srgb, #F67B27 55%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-bbc-orange) 55%, transparent);
    }
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 8);
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 10);
    }
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 10);
    }
    width: min(46rem, 94vw);
    max-width: min(46rem, 94vw);
    background: linear-gradient(165deg, #1a3552 0%, #0f2438 42%, #081622 100%);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06) inset, 0 30px 90px rgba(0, 0, 0, 0.7), 0 0 80px rgba(246, 123, 39, 0.28);
    animation: tombola-stage-focus 0.7s cubic-bezier(0.2, 0.85, 0.25, 1) both;
  }
  .tv-tombola-stage-glow {
    position: absolute;
    inset: -30% -10% auto;
    height: 70%;
    background: radial-gradient(ellipse at center, rgba(246, 123, 39, 0.35), transparent 68%);
    pointer-events: none;
    opacity: 0.55;
    animation: tombola-stage-glow 2.8s ease-in-out infinite;
  }
  .tv-tombola-stage-sheen {
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(246, 123, 39, 0.22) 48%, transparent 62%);
    transform: translateX(-130%);
    pointer-events: none;
    animation: tombola-stage-sheen 2.4s cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s infinite;
  }
  .tv-tombola-stage-kicker {
    position: relative;
    z-index: 1;
    margin: 0;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid rgba(246, 123, 39, 0.55);
    background: rgba(246, 123, 39, 0.16);
    padding: 0.35rem 0.85rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #f67b27;
    animation: tombola-stage-rise 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s both;
  }
  .tv-tombola-stage-logo {
    position: relative;
    z-index: 1;
    margin-top: calc(var(--spacing) * 5);
    display: flex;
    height: calc(var(--spacing) * 24);
    width: calc(var(--spacing) * 24);
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-white);
    @media (width >= 48rem) {
      height: calc(var(--spacing) * 28);
    }
    @media (width >= 48rem) {
      width: calc(var(--spacing) * 28);
    }
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
    animation: tombola-stage-rise 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.28s both;
  }
  .tv-tombola-stage-logo img {
    height: 100%;
    width: 100%;
    object-fit: contain;
  }
  .tv-tombola-stage-label {
    position: relative;
    z-index: 1;
    margin-top: calc(var(--spacing) * 5);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    text-wrap: balance;
    color: var(--color-white);
    @media (width >= 48rem) {
      font-size: var(--text-4xl);
      line-height: var(--tw-leading, var(--text-4xl--line-height));
    }
    animation: tombola-stage-rise 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.38s both;
  }
  .tv-tombola-stage-by {
    position: relative;
    z-index: 1;
    margin-top: calc(var(--spacing) * 2);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    color: color-mix(in srgb, #fff 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 60%, transparent);
    }
    @media (width >= 48rem) {
      font-size: var(--text-lg);
      line-height: var(--tw-leading, var(--text-lg--line-height));
    }
    animation: tombola-stage-rise 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.46s both;
  }
  .tv-tombola-stage-value {
    position: relative;
    z-index: 1;
    margin-top: calc(var(--spacing) * 4);
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-bbc-orange);
    @media (width >= 48rem) {
      font-size: var(--text-3xl);
      line-height: var(--tw-leading, var(--text-3xl--line-height));
    }
    animation: tombola-stage-rise 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.54s both;
  }
  .tv-tombola-stage-winner {
    position: relative;
    z-index: 1;
    margin-top: calc(var(--spacing) * 6);
    text-align: center;
    text-wrap: balance;
  }
  .tv-tombola-stage-winner.is-pending {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: 0.2em;
    letter-spacing: 0.2em;
    color: color-mix(in srgb, #fff 45%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 45%, transparent);
    }
    text-transform: uppercase;
    animation: tombola-stage-pulse 1.8s ease-in-out 0.8s infinite;
  }
  .tv-tombola-stage-winner.is-writing, .tv-tombola-stage-winner.is-revealed {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-bbc-orange);
    @media (width >= 48rem) {
      font-size: var(--text-4xl);
      line-height: var(--tw-leading, var(--text-4xl--line-height));
    }
    text-shadow: 0 0 28px rgba(246, 123, 39, 0.45);
  }
  .tv-tombola-stage-winner.is-writing .draw-caret {
    display: inline-block;
    animation: draw-caret 0.85s steps(1) infinite;
  }
  .tv-tombola-stage.has-winner .tv-tombola-stage-sheen {
    animation: none;
    opacity: 0;
  }
  @keyframes tombola-stage-focus {
    from {
      opacity: 0;
      transform: scale(0.92) translateY(1.25rem);
    }
    to {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }
  @keyframes tombola-stage-sheen {
    from {
      transform: translateX(-130%);
    }
    to {
      transform: translateX(130%);
    }
  }
  @keyframes tombola-stage-rise {
    from {
      opacity: 0;
      letter-spacing: 0.18em;
      transform: translateY(0.6rem);
    }
    to {
      opacity: 1;
      letter-spacing: 0.02em;
      transform: none;
    }
  }
  @keyframes tombola-stage-glow {
    0%, 100% {
      opacity: 0.4;
    }
    50% {
      opacity: 0.75;
    }
  }
  @keyframes tombola-stage-pulse {
    0%, 100% {
      opacity: 0.45;
    }
    50% {
      opacity: 0.9;
    }
  }
  .tv-tombola-list.is-backdrop {
    pointer-events: none;
    position: relative;
    z-index: 1;
    margin-top: calc(var(--spacing) * 0);
    max-height: 22vh;
    width: 100%;
    max-width: var(--container-4xl);
    overflow-x: hidden;
    overflow-y: auto;
    opacity: 30%;
    mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
    scroll-behavior: auto;
  }
  .tv-tombola.is-settling .tv-tombola-list.is-backdrop {
    opacity: 0.72;
    max-height: min(32vh, 16rem);
    transition: opacity 0.45s ease, max-height 0.45s ease;
  }
  .tv-tombola.is-settling .tv-tombola-head {
    opacity: 0.35;
    transition: opacity 0.4s ease;
  }
  .tv-tombola.is-settling .tv-tombola-row.is-focused {
    border-color: color-mix(in srgb, #F67B27 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-bbc-orange) 70%, transparent);
    }
    background-color: color-mix(in srgb, #F67B27 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-bbc-orange) 25%, transparent);
    }
    opacity: 100%;
    box-shadow: 0 0 0 1px rgba(246, 123, 39, 0.5), 0 12px 36px rgba(0, 0, 0, 0.35);
    transform: scale(1.02);
    transition: transform 0.35s ease, box-shadow 0.35s ease, background-color 0.35s ease;
  }
  .tv-tombola-stage.is-flying {
    will-change: transform, opacity;
    transition: none;
    animation: none;
    z-index: 4;
  }
  .tv-tombola-stage.is-flying.is-fly-go {
    transition: transform 0.78s cubic-bezier(0.22, 0.82, 0.2, 1), opacity 0.78s cubic-bezier(0.22, 0.82, 0.2, 1);
    transform: translate3d(var(--fly-x, 0), var(--fly-y, 0), 0) scale(var(--fly-scale, 0.2));
    opacity: 0.15;
    pointer-events: none;
  }
  .tv-tombola-stage.is-fly-fade {
    transition: opacity 0.55s ease, transform 0.55s ease;
    opacity: 0;
    transform: scale(0.88) translateY(1rem);
    pointer-events: none;
  }
  .tv-tombola-row.is-settled {
    scroll-margin-block: 28vh;
  }
  .tv-tombola-row.is-focused {
    border-color: color-mix(in srgb, #F67B27 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-bbc-orange) 60%, transparent);
    }
    background-color: color-mix(in srgb, #F67B27 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-bbc-orange) 15%, transparent);
    }
  }
  .tv-tombola-kicker {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: #F67B27;
  }
  .tv-tombola-title {
    margin-top: 0.5rem;
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800;
    color: #fff;
  }
  .tv-tombola-lead {
    margin-top: 0.5rem;
    color: rgba(255, 255, 255, 0.65);
  }
  .tv-tombola-list {
    margin-inline: auto;
    margin-top: calc(var(--spacing) * 6);
    width: 100%;
    max-width: var(--container-4xl);
    :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)));
    }
    text-align: left;
    list-style: none;
    padding: 0;
  }
  .tv-tombola-row {
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: color-mix(in srgb, #fff 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 15%, transparent);
    }
    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);
    }
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
  }
  .tv-tombola-row.has-winner {
    border-color: color-mix(in srgb, #F67B27 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-bbc-orange) 40%, transparent);
    }
    background-color: color-mix(in srgb, #F67B27 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-bbc-orange) 10%, transparent);
    }
  }
  .tv-tombola-lot {
    display: flex;
    min-width: calc(var(--spacing) * 0);
    flex: 1;
    align-items: center;
    gap: calc(var(--spacing) * 3);
  }
  .tv-tombola-rank {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    color: color-mix(in srgb, #fff 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 40%, transparent);
    }
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
  }
  .tv-tombola-logo {
    display: flex;
    height: calc(var(--spacing) * 12);
    width: calc(var(--spacing) * 12);
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-white);
  }
  .tv-tombola-logo img {
    height: 100%;
    width: 100%;
    object-fit: contain;
  }
  .tv-tombola-copy {
    min-width: calc(var(--spacing) * 0);
    flex: 1;
    text-align: left;
  }
  .tv-tombola-label {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
  }
  .tv-tombola-by {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: color-mix(in srgb, #fff 55%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 55%, transparent);
    }
  }
  .tv-tombola-value {
    flex-shrink: 0;
    align-self: center;
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-bbc-orange);
  }
  .tv-tombola-winner {
    margin-top: calc(var(--spacing) * 1);
  }
  .tv-tombola-winner-label {
    margin-right: calc(var(--spacing) * 1.5);
    font-size: 0.65rem;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    color: color-mix(in srgb, #fff 45%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 45%, transparent);
    }
    text-transform: uppercase;
  }
  .tv-tombola-winner-name {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-bbc-orange);
    @media (width >= 48rem) {
      font-size: var(--text-lg);
      line-height: var(--tw-leading, var(--text-lg--line-height));
    }
  }
  .tv-tombola-winner-pending {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: color-mix(in srgb, #fff 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 40%, transparent);
    }
  }
  .tv-tombola-empty {
    margin-top: calc(var(--spacing) * 10);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    color: color-mix(in srgb, #fff 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 60%, transparent);
    }
  }
  .tv-tombola.is-tombola-spot .tv-tombola-list, .tombola-board.is-tombola-spot .tombola-lot-list {
    filter: blur(2px) brightness(0.55);
    transition: filter 0.35s ease;
  }
  .tv-tombola-row.is-spotlight, .tombola-lot-row.is-spotlight {
    border-color: color-mix(in srgb, #F67B27 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-bbc-orange) 70%, transparent);
    }
    background-color: color-mix(in srgb, #F67B27 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-bbc-orange) 20%, transparent);
    }
    box-shadow: 0 0 0 1px rgba(246, 123, 39, 0.45);
  }
  .tombola-spot {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(7, 24, 44, 0.72);
    pointer-events: none;
    opacity: 0;
  }
  .tombola-spot.is-in {
    animation: tombola-spot-in 0.45s ease-out forwards;
  }
  .tombola-spot.is-out {
    animation: tombola-spot-out 0.4s ease-in forwards;
  }
  .tombola-spot-card {
    width: min(40rem, 100%);
    border-radius: 1.5rem;
    border: 1px solid rgba(246, 123, 39, 0.45);
    background: linear-gradient(160deg, rgba(20, 48, 78, 0.98), rgba(12, 32, 54, 0.98));
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    padding: clamp(1.5rem, 4vw, 2.75rem);
    text-align: center;
    transform: scale(0.92);
  }
  .tombola-spot.is-in .tombola-spot-card {
    animation: tombola-spot-card-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }
  .tombola-spot-kicker {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #f67b27;
  }
  .tombola-spot-lot {
    margin: 1rem 0 0;
    font-size: clamp(1.35rem, 3.5vw, 2rem);
    font-weight: 800;
    color: #fff;
  }
  .tombola-spot-partner {
    margin: 0.35rem 0 0;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.6);
    min-height: 1.25rem;
  }
  .tombola-spot-winner {
    margin: 1.25rem 0 0;
    font-size: clamp(2rem, 7vw, 3.75rem);
    font-weight: 800;
    line-height: 1.05;
    color: #f67b27;
    text-wrap: balance;
  }
  .tombola-spot--board {
    position: absolute;
    border-radius: 1rem;
  }
  @keyframes tombola-spot-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  @keyframes tombola-spot-out {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }
  @keyframes tombola-spot-card-in {
    from {
      transform: scale(0.88) translateY(12px);
      opacity: 0.6;
    }
    to {
      transform: scale(1) translateY(0);
      opacity: 1;
    }
  }
  .tv-partners-grid {
    margin-top: clamp(1.75rem, 4vh, 3rem);
    display: grid;
    width: min(72rem, 100%);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
    gap: clamp(0.85rem, 2vw, 1.5rem);
    list-style: none;
    padding: 0;
  }
  .tv-partners-card {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(5.5rem, 14vh, 8.5rem);
    padding: 1.1rem 1.25rem;
    border-radius: 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
  }
  .tv-partners-logo {
    width: 4.5rem;
    height: 4.5rem;
    object-fit: contain;
    aspect-ratio: 1 / 1;
    border-radius: 9999px;
    background: #fff;
    padding: 0.35rem;
  }
  .tv-partners-name {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #0C2C4A;
    text-align: center;
  }
  .tv-partners-empty {
    margin-top: 2.5rem;
    max-width: 28rem;
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.55);
  }
  .admin-draw-partners {
    margin-top: 1.5rem;
    border-radius: 1.25rem;
    overflow: hidden;
  }
  .admin-draw-partners .tv-partners.is-page {
    min-height: 22rem;
    height: auto;
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  .tv-overnight-hold .partner-slide {
    margin-top: 0.75rem;
    width: 100%;
  }
  .tv-partners-qr {
    position: relative;
    z-index: 1;
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    margin-bottom: 0.25rem;
  }
  .tv-partners-qr img {
    width: 6rem;
    height: 6rem;
    border-radius: 0.75rem;
    background: #fff;
    padding: 0.4rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.25);
  }
  .tv-partners-qr .tv-briefing-qr-caption {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
  }
  .tv-tombola-grid {
    margin-top: clamp(1.5rem, 3.5vh, 2.5rem);
    display: grid;
    width: min(78rem, 100%);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: clamp(0.85rem, 2vw, 1.35rem);
    list-style: none;
    padding: 0;
    position: relative;
    z-index: 1;
  }
  .tv-tombola-card {
    display: grid;
    grid-template-columns: 5.5rem 1fr auto;
    align-items: center;
    gap: 0.85rem 1rem;
    padding: 0.85rem 1rem;
    border-radius: 1.15rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(8, 24, 40, 0.72);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28);
  }
  .tv-tombola-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.25rem;
    height: 4.25rem;
    padding: 0.35rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.94);
    overflow: hidden;
    aspect-ratio: 1 / 1;
  }
  .tv-tombola-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    aspect-ratio: 1 / 1;
  }
  .tv-tombola-partner-name {
    font-size: 0.75rem;
    font-weight: 800;
    color: #0C2C4A;
    text-align: center;
    line-height: 1.2;
  }
  .tv-tombola-label {
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    font-size: clamp(1.25rem, 2.4vw, 1.7rem);
    font-weight: 600;
    line-height: 1.05;
    color: #fff;
  }
  .tv-tombola-by {
    margin-top: 0.25rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.55);
  }
  .tv-tombola-value {
    font-size: clamp(1.05rem, 2vw, 1.35rem);
    font-weight: 800;
    color: #F67B27;
    white-space: nowrap;
  }
  .tv-overnight-hold {
    margin-inline: auto;
    margin-top: calc(var(--spacing) * 6);
    display: flex;
    width: 100%;
    max-width: var(--container-6xl);
    flex-direction: column;
    align-items: center;
    gap: calc(var(--spacing) * 4);
    padding-inline: calc(var(--spacing) * 4);
    padding-bottom: calc(var(--spacing) * 8);
  }
  .tv-overnight-partners {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem 1.25rem;
    width: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .tv-overnight-partner {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3.25rem;
    padding: 0.45rem 0.85rem;
    border-radius: 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.92);
  }
  .tv-overnight-logo {
    max-height: 2.4rem;
    max-width: 7.5rem;
    object-fit: contain;
  }
  .tv-overnight-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: #0C2C4A;
  }
  .tv-overnight-countdown {
    width: min(28rem, 100%);
  }
  .tv-briefing-preview-bar {
    position: relative;
    z-index: 2;
    margin-bottom: calc(var(--spacing) * 4);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: color-mix(in srgb, #fff 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 15%, transparent);
    }
    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);
    }
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    --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,);
  }
  .tv-briefing-preview-label {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: 0.18em;
    letter-spacing: 0.18em;
    color: color-mix(in srgb, #fff 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 70%, transparent);
    }
    text-transform: uppercase;
  }
  [data-briefing-panel-target="revealShell"].is-fading-out, [data-briefing-panel-target="panel"].is-fading-out {
    animation: tv-panel-fade-out var(--tv-panel-fade-out, 0.48s) ease forwards;
  }
  [data-briefing-panel-target="revealShell"].is-fading-in, [data-briefing-panel-target="panel"].is-fading-in {
    animation: tv-panel-fade-in var(--tv-panel-fade-in, 0.7s) ease forwards;
  }
  @keyframes tv-panel-fade-out {
    from {
      opacity: 1;
      transform: translateY(0);
    }
    to {
      opacity: 0;
      transform: translateY(0.75rem);
    }
  }
  @keyframes tv-panel-fade-in {
    from {
      opacity: 0;
      transform: translateY(0.75rem);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @keyframes schedule-countdown-pulse {
    0%, 100% {
      opacity: 1;
      transform: scale(1);
    }
    50% {
      opacity: 0.82;
      transform: scale(1.02);
    }
  }
  @keyframes draw-stage-breathe {
    0%, 100% {
      opacity: 0.45;
    }
    50% {
      opacity: 1;
    }
  }
  .hall {
    display: grid;
    align-items: stretch;
    gap: calc(var(--spacing) * 4);
    grid-template-columns: minmax(0, 1.15fr) minmax(14rem, 22rem) minmax(0, 1.15fr);
  }
  .hall-side, .hall-center {
    display: flex;
    min-width: calc(var(--spacing) * 0);
    flex-direction: column;
    gap: calc(var(--spacing) * 4);
  }
  .hall-side {
    flex-direction: column-reverse;
  }
  .hall-center {
    justify-content: center;
  }
  .court-module {
    min-width: calc(var(--spacing) * 0);
    overflow: hidden;
    border-radius: var(--radius-2xl);
    background-color: var(--color-navy);
    padding: calc(var(--spacing) * 3);
    color: var(--color-white);
  }
  .court-module-principal {
    box-shadow: inset 0 0 0 1px rgba(246, 123, 39, 0.45);
  }
  .court-module-consolation {
    box-shadow: inset 0 0 0 1px rgba(39, 162, 246, 0.45);
  }
  .court-module-live {
    --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);
    --tw-ring-color: var(--color-bbc-orange);
    animation: court-live-pulse 2.2s ease-in-out infinite;
  }
  .court-label {
    margin-bottom: calc(var(--spacing) * 2);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-widest);
    letter-spacing: var(--tracking-widest);
    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-transform: uppercase;
  }
  .court-label-chip {
    display: none;
  }
  .court-phase-tag {
    border-radius: var(--radius-md);
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 10px;
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    --tw-tracking: 0.14em;
    letter-spacing: 0.14em;
  }
  .court-phase-tag.is-principal {
    background-color: color-mix(in srgb, #F67B27 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-bbc-orange) 20%, transparent);
    }
    color: var(--color-bbc-orange);
    --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);
    --tw-ring-color: color-mix(in srgb, #F67B27 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--color-bbc-orange) 50%, transparent);
    }
  }
  .court-phase-tag.is-consolation {
    background-color: color-mix(in srgb, oklch(74.6% 0.16 232.661) 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-sky-400) 15%, transparent);
    }
    color: var(--color-sky-300);
    --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);
    --tw-ring-color: color-mix(in srgb, oklch(74.6% 0.16 232.661) 45%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--color-sky-400) 45%, transparent);
    }
  }
  .court-phase-tag.is-pool {
    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);
    }
    color: color-mix(in srgb, #fff 85%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 85%, transparent);
    }
    --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);
    --tw-ring-color: color-mix(in srgb, #fff 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--color-white) 20%, transparent);
    }
  }
  .court-live-tag {
    border-radius: var(--radius-md);
    background-color: var(--color-bbc-orange);
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 10px;
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    --tw-tracking: 0.18em;
    letter-spacing: 0.18em;
    color: var(--color-white);
  }
  .court-done-tag {
    border-radius: var(--radius-md);
    background-color: color-mix(in srgb, oklch(76.5% 0.177 163.223) 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-emerald-400) 20%, transparent);
    }
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 10px;
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    --tw-tracking: 0.18em;
    letter-spacing: 0.18em;
    color: var(--color-emerald-200);
    --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);
    --tw-ring-color: color-mix(in srgb, oklch(84.5% 0.143 164.978) 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--color-emerald-300) 40%, transparent);
    }
  }
  .court-end-winner {
    position: relative;
    z-index: 2;
    --tw-gradient-position: to bottom in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
    --tw-gradient-from: color-mix(in srgb, #F67B27 45%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--color-bbc-orange) 45%, transparent);
    }
    --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));
    --tw-gradient-via: color-mix(in srgb, #F67B27 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-via: color-mix(in oklab, var(--color-bbc-orange) 20%, transparent);
    }
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
    --tw-gradient-to: transparent;
    --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));
    box-shadow: inset 0 0 0 2px rgba(246, 123, 39, 0.95), inset 0 0 28px rgba(246, 123, 39, 0.35);
  }
  .court-end-loser {
    opacity: 40%;
    --tw-grayscale: grayscale(35%);
    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,);
  }
  .court-win-mark {
    pointer-events: none;
    position: absolute;
    top: calc(var(--spacing) * 1.5);
    left: calc(var(--spacing) * 1.5);
    z-index: 3;
    height: calc(var(--spacing) * 7);
    width: calc(var(--spacing) * 7);
    border-radius: calc(infinity * 1px);
    background-color: var(--color-bbc-orange);
    --tw-shadow: 0 0 18px var(--tw-shadow-color, rgba(246,123,39,0.75));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --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);
    --tw-ring-color: color-mix(in srgb, #fff 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--color-white) 90%, transparent);
    }
  }
  .court-win-mark::after {
    content: '';
    position: absolute;
    top: 42%;
    left: calc(1/2 * 100%);
    height: calc(var(--spacing) * 2.5);
    width: calc(var(--spacing) * 1.5);
    --tw-translate-x: calc(calc(1/2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
    --tw-translate-y: calc(calc(1/2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
    rotate: 45deg;
    border-right-style: var(--tw-border-style);
    border-right-width: 2px;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 2px;
    border-color: var(--color-white);
  }
  .badminton-court > .court-end:last-of-type .court-win-mark {
    right: calc(var(--spacing) * 1.5);
    left: auto;
  }
  .court-vs-done {
    background-color: var(--color-bbc-orange);
    font-size: 10px;
    --tw-tracking: 0.18em;
    letter-spacing: 0.18em;
  }
  .court-module-complete .badminton-court {
    --tw-ring-color: color-mix(in srgb, #F67B27 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--color-bbc-orange) 50%, transparent);
    }
  }
  .court-live-dot {
    height: calc(var(--spacing) * 2);
    width: calc(var(--spacing) * 2);
    border-radius: calc(infinity * 1px);
    background-color: var(--color-bbc-orange);
    animation: court-live-dot 1.2s ease-in-out infinite;
  }
  .court-layout {
    display: flex;
    min-width: calc(var(--spacing) * 0);
    flex-direction: column;
    align-items: stretch;
    gap: calc(var(--spacing) * 3);
  }
  .badminton-court {
    position: relative;
    display: flex;
    min-width: calc(var(--spacing) * 0);
    flex: 1;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background-color: var(--color-emerald-700);
    --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);
    --tw-ring-color: color-mix(in srgb, #fff 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--color-white) 40%, transparent);
    }
    background-image: linear-gradient(155deg, rgba(52, 211, 153, 0.35), transparent 42%), linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: auto, 1.5rem 1.5rem, 1.5rem 1.5rem;
  }
  .badminton-court-portrait {
    min-height: 11rem;
    flex-direction: column;
  }
  .badminton-court-landscape {
    min-height: 8.5rem;
    flex-direction: row;
  }
  .court-service-line {
    pointer-events: none;
    position: absolute;
    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);
    }
  }
  .badminton-court-portrait .court-service-line-a {
    top: 28%;
    right: 12%;
    left: 12%;
    height: 1px;
  }
  .badminton-court-portrait .court-service-line-b {
    right: 12%;
    bottom: 28%;
    left: 12%;
    height: 1px;
  }
  .badminton-court-landscape .court-service-line-a {
    top: 12%;
    bottom: 12%;
    left: 28%;
    width: 1px;
  }
  .badminton-court-landscape .court-service-line-b {
    top: 12%;
    right: 28%;
    bottom: 12%;
    width: 1px;
  }
  .court-end {
    position: relative;
    z-index: 1;
    display: flex;
    min-width: calc(var(--spacing) * 0);
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 3);
    text-align: center;
  }
  .court-pair {
    display: flex;
    max-width: 100%;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--spacing) * 1);
  }
  .court-pair-logos {
    margin-bottom: calc(var(--spacing) * 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 1);
  }
  .court-club-logo {
    height: calc(var(--spacing) * 6);
    width: calc(var(--spacing) * 6);
    border-radius: var(--radius-md);
    background-color: var(--color-white);
    object-fit: contain;
    padding: calc(var(--spacing) * 0.5);
    --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);
  }
  .court-net {
    position: relative;
    z-index: 1;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    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);
    }
    --tw-shadow: 0 0 12px var(--tw-shadow-color, rgba(255,255,255,0.35));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    animation: court-net-breathe 3s ease-in-out infinite;
  }
  .badminton-court-portrait .court-net {
    height: calc(var(--spacing) * 1.5);
    width: 100%;
  }
  .badminton-court-landscape .court-net {
    height: 100%;
    width: calc(var(--spacing) * 1.5);
  }
  .court-vs {
    position: absolute;
    border-radius: var(--radius-md);
    background-color: var(--color-navy);
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 9px;
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    --tw-tracking: 0.2em;
    letter-spacing: 0.2em;
    color: var(--color-white);
    opacity: 90%;
  }
  .badminton-court-portrait .court-vs {
    top: calc(1/2 * 100%);
    left: calc(1/2 * 100%);
    --tw-translate-x: calc(calc(1/2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
    --tw-translate-y: calc(calc(1/2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .badminton-court-landscape .court-vs {
    top: calc(1/2 * 100%);
    left: calc(1/2 * 100%);
    --tw-translate-x: calc(calc(1/2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
    --tw-translate-y: calc(calc(1/2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .court-players {
    max-width: 100%;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .court-amp {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: color-mix(in srgb, #fff 55%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 55%, transparent);
    }
  }
  .court-players-empty {
    color: color-mix(in srgb, #fff 55%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 55%, transparent);
    }
  }
  .court-club {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    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);
    }
  }
  .court-empty-slot {
    align-self: center;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: color-mix(in srgb, #fff 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 70%, transparent);
    }
  }
  .court-scores {
    display: flex;
    width: 100%;
    flex-shrink: 0;
    flex-direction: row;
    justify-content: center;
    gap: calc(var(--spacing) * 2.5);
  }
  .court-scores .score-zone {
    min-width: calc(var(--spacing) * 0);
    flex: 1;
  }
  .court-module:not(.court-module-rotated) .court-scores {
    width: 100%;
    flex-direction: row;
  }
  .court-module:not(.court-module-rotated) .court-scores .score-zone {
    min-width: calc(var(--spacing) * 0);
    flex: 1;
  }
  .court-module:not(.court-module-rotated) .score-zone-inputs {
    flex-direction: column;
    gap: calc(var(--spacing) * 0.5);
  }
  .court-module:not(.court-module-rotated) .score-zone-sep {
    display: none;
  }
  .court-module:not(.court-module-rotated) .score-zone-value {
    display: flex;
    flex-direction: column;
    align-items: center;
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
  }
  .score-zone {
    display: flex;
    min-height: 3.25rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 1);
    padding-block: calc(var(--spacing) * 1);
    color: var(--color-navy);
  }
  .score-zone-value {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
  }
  .score-zone-empty {
    color: color-mix(in srgb, #0C2C4A 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-navy) 30%, transparent);
    }
  }
  .score-zone-label {
    margin-top: calc(var(--spacing) * 1);
    font-size: 10px;
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    color: color-mix(in srgb, #0C2C4A 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-navy) 40%, transparent);
    }
    text-transform: uppercase;
  }
  .score-zone-inputs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 1);
  }
  .score-zone-sep {
    color: color-mix(in srgb, #0C2C4A 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-navy) 40%, transparent);
    }
  }
  .score-input {
    width: calc(var(--spacing) * 12);
    appearance: none;
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: color-mix(in srgb, #0C2C4A 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-navy) 15%, transparent);
    }
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 1);
    padding-block: calc(var(--spacing) * 1);
    text-align: center;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-navy);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    --tw-outline-style: none;
    outline-style: none;
    color-scheme: light;
  }
  .score-input option {
    background-color: var(--color-white);
    color: var(--color-navy);
  }
  @keyframes court-live-pulse {
    0%, 100% {
      box-shadow: 0 0 0 0 rgba(246, 123, 39, 0.35);
    }
    50% {
      box-shadow: 0 0 0 6px rgba(246, 123, 39, 0);
    }
  }
  @keyframes court-live-dot {
    0%, 100% {
      opacity: 1;
      transform: scale(1);
    }
    50% {
      opacity: 0.45;
      transform: scale(0.85);
    }
  }
  @keyframes court-net-breathe {
    0%, 100% {
      opacity: 0.85;
    }
    50% {
      opacity: 1;
    }
  }
  @media (max-width: 1023px) {
    .hall {
      grid-template-columns: 1fr;
    }
    .tv-hall {
      min-height: 0;
    }
    .hall-stage .hall-center .court-module {
      flex-basis: auto;
      max-height: none;
    }
  }
  @media (min-width: 768px) and (max-width: 1023px) {
    .hall-stage .hall-side {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: calc(var(--spacing) * 3);
    }
    .hall-stage .hall-center {
      margin-bottom: calc(var(--spacing) * 1);
    }
  }
  .login-stage {
    margin-inline: auto;
    width: 100%;
    max-width: var(--container-lg);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 10);
    text-align: center;
  }
  .login-stage .draw-stage-title {
    font-size: var(--text-5xl);
    line-height: var(--tw-leading, var(--text-5xl--line-height));
    @media (width >= 48rem) {
      font-size: var(--text-6xl);
      line-height: var(--tw-leading, var(--text-6xl--line-height));
    }
  }
  .login-card {
    margin-inline: auto;
    margin-top: calc(var(--spacing) * 8);
    max-width: var(--container-sm);
    border-radius: var(--radius-2xl);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    text-align: left;
    color: var(--color-navy);
    --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);
  }
  .login-card label {
    margin-bottom: calc(var(--spacing) * 1);
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: color-mix(in srgb, #0C2C4A 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-navy) 80%, transparent);
    }
  }
  .app-shell .login-card input:not([type='hidden']) {
    margin-bottom: calc(var(--spacing) * 4);
    width: 100%;
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: color-mix(in srgb, #0C2C4A 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-navy) 30%, transparent);
    }
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    color: var(--color-navy);
    --tw-outline-style: none;
    outline-style: none;
    &::placeholder {
      color: color-mix(in srgb, #0C2C4A 40%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, var(--color-navy) 40%, transparent);
      }
    }
    &:focus {
      border-color: var(--color-bbc-blue);
    }
    border-color: rgb(15 23 42 / 0.3);
    background-color: #fff;
    color: #0f172a;
    -webkit-text-fill-color: #0f172a;
    box-shadow: none;
  }
  .app-shell .login-card input:not([type='hidden']):focus {
    border-color: #27a2f6;
  }
  .login-error {
    margin-bottom: calc(var(--spacing) * 4);
    border-radius: var(--radius-xl);
    background-color: var(--color-red-50);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-red-800);
  }
  .login-home {
    margin-top: calc(var(--spacing) * 8);
    display: inline-block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: color-mix(in srgb, #fff 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 70%, transparent);
    }
    &:hover {
      @media (hover: hover) {
        color: var(--color-bbc-orange);
      }
    }
  }
  .tv-page {
    font-family: 'Outfit', ui-sans-serif, system-ui, sans-serif;
    position: relative;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    background-color: var(--color-navy);
    min-height: 100vh;
    min-height: 100dvh;
    background-image: radial-gradient(ellipse 90% 70% at 50% -10%, rgba(39, 162, 246, 0.28), transparent 55%), radial-gradient(ellipse 55% 45% at 8% 95%, rgba(246, 123, 39, 0.16), transparent 50%), radial-gradient(ellipse 45% 40% at 92% 85%, rgba(16, 185, 129, 0.14), transparent 45%), linear-gradient(180deg, #07182c 0%, #0c2c4a 48%, #06121f 100%);
  }
  .public-live-nav {
    position: relative;
    position: sticky;
    top: calc(var(--spacing) * 0);
    z-index: 2;
    margin-bottom: calc(var(--spacing) * 3);
  }
  .public-live-nav-inner {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    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);
    }
    background-color: color-mix(in srgb, #0C2C4A 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-navy) 90%, transparent);
    }
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 3);
    --tw-shadow: 0 10px 30px var(--tw-shadow-color, rgba(0,0,0,0.35));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --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,);
    @media (width >= 40rem) {
      flex-direction: row;
    }
    @media (width >= 40rem) {
      flex-wrap: wrap;
    }
    @media (width >= 40rem) {
      align-items: center;
    }
    @media (width >= 40rem) {
      justify-content: space-between;
    }
    @media (width >= 40rem) {
      padding-inline: calc(var(--spacing) * 4);
    }
  }
  .public-live-brand {
    display: flex;
    min-width: calc(var(--spacing) * 0);
    align-items: center;
    gap: calc(var(--spacing) * 3);
    color: var(--color-white);
  }
  .public-live-brand-logo {
    height: calc(var(--spacing) * 9);
    width: auto;
    max-width: 6.5rem;
    flex-shrink: 0;
    object-fit: contain;
    @media (width >= 40rem) {
      height: calc(var(--spacing) * 10);
    }
    @media (width >= 40rem) {
      max-width: 7rem;
    }
  }
  .public-live-brand-kicker {
    font-size: 0.6rem;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: 0.18em;
    letter-spacing: 0.18em;
    color: color-mix(in srgb, #fff 55%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 55%, transparent);
    }
    text-transform: uppercase;
    @media (width >= 40rem) {
      font-size: 0.65rem;
    }
  }
  .public-live-brand-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    @media (width >= 48rem) {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
    }
  }
  .public-live-links {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: calc(var(--spacing) * 1.5);
    @media (width >= 40rem) {
      display: flex;
    }
    @media (width >= 40rem) {
      width: auto;
    }
    @media (width >= 40rem) {
      align-items: center;
    }
    @media (width >= 40rem) {
      gap: calc(var(--spacing) * 2);
    }
  }
  .public-live-link {
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: calc(var(--spacing) * 2);
    text-align: center;
    font-size: 0.72rem;
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: color-mix(in srgb, #fff 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 70%, transparent);
    }
    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));
    &: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 {
      @media (hover: hover) {
        color: var(--color-white);
      }
    }
    @media (width >= 40rem) {
      padding-inline: calc(var(--spacing) * 3);
    }
    @media (width >= 40rem) {
      padding-block: calc(var(--spacing) * 1.5);
    }
    @media (width >= 40rem) {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }
    @media (width >= 40rem) {
      --tw-leading: var(--leading-normal);
      line-height: var(--leading-normal);
    }
  }
  .public-live-link.is-active {
    background-color: var(--color-bbc-orange);
    color: var(--color-white);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-bbc-orange);
      }
    }
    &:hover {
      @media (hover: hover) {
        color: var(--color-white);
      }
    }
  }
  .public-live-link.is-tombola {
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: color-mix(in srgb, oklch(87.9% 0.169 91.605) 45%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-amber-300) 45%, transparent);
    }
    background-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-amber-400) 15%, transparent);
    }
    color: var(--color-amber-100);
    &:hover {
      @media (hover: hover) {
        border-color: color-mix(in srgb, oklch(92.4% 0.12 95.746) 60%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-amber-200) 60%, transparent);
        }
      }
    }
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-amber-400) 25%, transparent);
        }
      }
    }
    &:hover {
      @media (hover: hover) {
        color: var(--color-amber-50);
      }
    }
  }
  .public-live-link.is-tombola.is-active {
    border-color: var(--color-amber-300);
    background-color: var(--color-amber-400);
    color: var(--color-navy);
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-amber-300);
      }
    }
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-amber-300);
      }
    }
    &:hover {
      @media (hover: hover) {
        color: var(--color-navy);
      }
    }
  }
  .public-live-link.is-nav-loading, nav[aria-label="Navigation du tournoi"] a.is-nav-loading {
    pointer-events: none;
    position: relative;
  }
  .public-live-link.is-nav-loading::after, nav[aria-label="Navigation du tournoi"] a.is-nav-loading::after {
    content: '';
    margin-left: calc(var(--spacing) * 1.5);
    display: inline-block;
    height: calc(var(--spacing) * 3.5);
    width: calc(var(--spacing) * 3.5);
    flex-shrink: 0;
    border-radius: calc(infinity * 1px);
    border-style: var(--tw-border-style);
    border-width: 2px;
    border-color: currentcolor;
    border-right-color: transparent;
    vertical-align: -0.1em;
    animation: nav-loader-spin 0.65s linear infinite;
  }
  @keyframes nav-loader-spin {
    to {
      transform: rotate(360deg);
    }
  }
  .tv-page::before {
    content: '';
    pointer-events: none;
    position: absolute;
    inset: calc(var(--spacing) * 0);
    opacity: 0.055;
    background-image: linear-gradient(rgba(255, 255, 255, 0.55) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.55) 1px, transparent 1px);
    background-size: 4rem 4rem;
    mask-image: radial-gradient(ellipse 75% 65% at 50% 35%, #000 15%, transparent 78%);
  }
  .tv-frame {
    position: relative;
    z-index: 1;
    display: flex;
    min-height: calc(var(--spacing) * 0);
    flex: 1;
    flex-direction: column;
    padding: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      padding: calc(var(--spacing) * 5);
    }
    @media (width >= 64rem) {
      padding: calc(var(--spacing) * 6);
    }
  }
  .tv-frame > turbo-frame#tv-live, .tv-frame > #tv-live {
    display: flex;
    min-height: calc(var(--spacing) * 0);
    flex: 1;
    flex-direction: column;
  }
  .tv-screen {
    display: flex;
    min-height: calc(var(--spacing) * 0);
    flex: 1;
    flex-direction: column;
  }
  .tv-welcome {
    display: flex;
    min-height: calc(var(--spacing) * 0);
    flex: 1;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .tv-screen .draw-stage {
    display: flex;
    min-height: calc(100vh - 2rem);
    flex-direction: column;
    justify-content: center;
    border-radius: var(--radius-3xl);
    padding-inline: calc(var(--spacing) * 8);
    padding-block: calc(var(--spacing) * 16);
    @media (width >= 48rem) {
      min-height: calc(100vh - 4rem);
    }
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 24);
    }
  }
  .tv-welcome .draw-stage {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: calc(var(--spacing) * 0);
    overflow: visible;
    border-radius: 0;
    background-color: transparent;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 6);
    }
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 3);
    }
    flex: 1 1 auto;
    min-height: 0;
  }
  .tv-welcome .draw-stage-kicker {
    flex-shrink: 0;
  }
  .tv-welcome .draw-stage-banner {
    margin-top: calc(var(--spacing) * 1);
    max-height: 7vh;
    width: auto;
    flex-shrink: 0;
    object-fit: contain;
    @media (width >= 48rem) {
      max-height: 9vh;
    }
  }
  .tv-welcome .draw-stage-title {
    margin-top: calc(var(--spacing) * 1);
    flex-shrink: 0;
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
    @media (width >= 48rem) {
      margin-top: calc(var(--spacing) * 1.5);
    }
    @media (width >= 48rem) {
      font-size: var(--text-3xl);
      line-height: var(--tw-leading, var(--text-3xl--line-height));
    }
    @media (width >= 64rem) {
      font-size: var(--text-4xl);
      line-height: var(--tw-leading, var(--text-4xl--line-height));
    }
  }
  .tv-welcome .draw-stage-title.is-accent {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    color: var(--color-bbc-orange);
    @media (width >= 48rem) {
      font-size: var(--text-3xl);
      line-height: var(--tw-leading, var(--text-3xl--line-height));
    }
    @media (width >= 64rem) {
      font-size: var(--text-4xl);
      line-height: var(--tw-leading, var(--text-4xl--line-height));
    }
  }
  .tv-welcome .draw-stage-lead {
    margin-top: calc(var(--spacing) * 0.5);
    flex-shrink: 0;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    @media (width >= 48rem) {
      margin-top: calc(var(--spacing) * 1);
    }
    @media (width >= 48rem) {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
    }
    @media (width >= 64rem) {
      font-size: var(--text-lg);
      line-height: var(--tw-leading, var(--text-lg--line-height));
    }
  }
  .tv-welcome .draw-stage-lead.is-accent {
    margin-top: calc(var(--spacing) * 0.5);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-bbc-orange);
    @media (width >= 48rem) {
      font-size: var(--text-lg);
      line-height: var(--tw-leading, var(--text-lg--line-height));
    }
  }
  .tv-welcome .draw-stage-note {
    margin-top: calc(var(--spacing) * 0.5);
    max-width: var(--container-2xl);
    flex-shrink: 0;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    @media (width >= 48rem) {
      margin-top: calc(var(--spacing) * 1);
    }
    @media (width >= 48rem) {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
    }
  }
  .tv-welcome .tv-checkin-board, .tv-welcome .tv-waiting-status {
    margin-inline: auto;
    margin-top: calc(var(--spacing) * 2);
    width: 100%;
    max-width: var(--container-3xl);
    flex-shrink: 0;
    @media (width >= 48rem) {
      margin-top: calc(var(--spacing) * 3);
    }
  }
  .tv-welcome .schedule-countdown {
    margin-inline: auto;
    margin-top: calc(var(--spacing) * 3);
    width: 100%;
    max-width: var(--container-3xl);
    flex-shrink: 0;
    @media (width >= 48rem) {
      margin-top: calc(var(--spacing) * 4);
    }
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .tv-welcome .schedule-countdown-units {
    margin-top: calc(var(--spacing) * 3);
    gap: calc(var(--spacing) * 2);
    @media (width >= 48rem) {
      margin-top: calc(var(--spacing) * 4);
    }
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 3);
    }
  }
  .tv-welcome .schedule-countdown-unit {
    min-width: 3.5rem;
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 2.5);
    @media (width >= 48rem) {
      min-width: 4.5rem;
    }
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 3);
    }
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 3);
    }
  }
  .tv-welcome .schedule-countdown-value {
    font-size: clamp(1.5rem, 3.5vw, 2.4rem);
  }
  .tv-welcome .partner-slide {
    margin-inline: auto;
    margin-top: calc(var(--spacing) * 4);
    width: 100%;
    max-width: var(--container-4xl);
    flex-shrink: 0;
    padding-top: calc(var(--spacing) * 1);
    padding-bottom: calc(var(--spacing) * 1);
    @media (width >= 48rem) {
      margin-top: calc(var(--spacing) * 5);
    }
    @media (width >= 48rem) {
      padding-top: calc(var(--spacing) * 2);
    }
    @media (width >= 48rem) {
      padding-bottom: calc(var(--spacing) * 2);
    }
  }
  .tv-welcome .partner-slide-label {
    margin-bottom: calc(var(--spacing) * 1.5);
  }
  .tv-welcome .partner-slide-viewport {
    overflow-x: hidden;
    overflow-y: visible;
    padding-bottom: 0.25rem;
  }
  .tv-welcome .partner-slide-track {
    gap: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 0.5);
  }
  .tv-welcome .partner-slide-disc {
    height: 4.5rem;
    width: 4.5rem;
    --tw-shadow: 0 6px 16px var(--tw-shadow-color, rgba(0,0,0,0.3));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  @media (min-height: 820px) {
    .tv-welcome .partner-slide-disc {
      height: 5.5rem;
      width: 5.5rem;
    }
  }
  .tv-waiting-status {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-leading: var(--leading-snug);
    line-height: var(--leading-snug);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: color-mix(in srgb, #fff 85%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 85%, transparent);
    }
    @media (width >= 48rem) {
      font-size: var(--text-xl);
      line-height: var(--tw-leading, var(--text-xl--line-height));
    }
  }
  .tv-screen .draw-stage-title {
    font-size: var(--text-5xl);
    line-height: var(--tw-leading, var(--text-5xl--line-height));
    @media (width >= 48rem) {
      font-size: var(--text-7xl);
      line-height: var(--tw-leading, var(--text-7xl--line-height));
    }
  }
  .tv-screen .draw-stage-title.is-accent {
    color: var(--color-bbc-orange);
  }
  .tv-screen .draw-stage-lead {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    @media (width >= 48rem) {
      font-size: var(--text-3xl);
      line-height: var(--tw-leading, var(--text-3xl--line-height));
    }
  }
  .tv-screen .draw-stage-lead.is-accent {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-bbc-orange);
  }
  .tv-screen .tv-welcome .draw-stage-title.is-accent {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
    @media (width >= 48rem) {
      font-size: var(--text-4xl);
      line-height: var(--tw-leading, var(--text-4xl--line-height));
    }
    @media (width >= 64rem) {
      font-size: var(--text-5xl);
      line-height: var(--tw-leading, var(--text-5xl--line-height));
    }
  }
  .tv-screen .tv-welcome .draw-stage-lead.is-accent {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    @media (width >= 48rem) {
      font-size: var(--text-xl);
      line-height: var(--tw-leading, var(--text-xl--line-height));
    }
  }
  .tv-masthead {
    margin-bottom: calc(var(--spacing) * 8);
    text-align: center;
  }
  .tv-masthead-compact {
    margin-bottom: calc(var(--spacing) * 3);
  }
  .tv-masthead-banner {
    margin-inline: auto;
    margin-bottom: calc(var(--spacing) * 4);
    width: 100%;
    max-width: 96rem;
    border-radius: var(--radius-2xl);
    object-fit: cover;
    --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);
    --tw-ring-color: color-mix(in srgb, #fff 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--color-white) 20%, transparent);
    }
    aspect-ratio: 1920 / 250;
  }
  .tv-masthead-bar {
    margin-inline: auto;
    display: flex;
    max-width: 96rem;
    align-items: center;
    gap: calc(var(--spacing) * 4);
    border-radius: var(--radius-2xl);
    background-color: color-mix(in srgb, #fff 8%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 8%, transparent);
    }
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    text-align: left;
    --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);
    --tw-ring-color: color-mix(in srgb, #fff 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--color-white) 15%, transparent);
    }
    --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,);
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
  }
  .tv-masthead-copy {
    min-width: calc(var(--spacing) * 0);
    flex: 1;
  }
  .tv-masthead-compact .tv-masthead-title {
    margin-top: calc(var(--spacing) * 0.5);
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    --tw-leading: 1;
    line-height: 1;
    @media (width >= 48rem) {
      font-size: var(--text-3xl);
      line-height: var(--tw-leading, var(--text-3xl--line-height));
    }
  }
  .tv-masthead-badge {
    flex-shrink: 0;
    border-radius: var(--radius-xl);
    background-color: color-mix(in srgb, #F67B27 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-bbc-orange) 90%, transparent);
    }
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    color: var(--color-white);
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px 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);
  }
  .tv-masthead-title {
    margin-top: calc(var(--spacing) * 3);
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-white);
    @media (width >= 48rem) {
      font-size: var(--text-6xl);
      line-height: var(--tw-leading, var(--text-6xl--line-height));
    }
  }
  .tv-masthead-lead {
    margin-top: calc(var(--spacing) * 2);
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
    color: color-mix(in srgb, #fff 85%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 85%, transparent);
    }
  }
  .tv-masthead-note {
    margin-inline: auto;
    margin-top: calc(var(--spacing) * 2);
    max-width: var(--container-2xl);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: color-mix(in srgb, #fff 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 60%, transparent);
    }
  }
  .tv-section-title {
    margin-bottom: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-tracking: 0.3em;
    letter-spacing: 0.3em;
    color: var(--color-bbc-orange);
    text-transform: uppercase;
  }
  .tv-grid {
    display: grid;
    gap: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    @media (width >= 80rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .tv-grid-wide {
    @media (width >= 80rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .tv-board {
    border-radius: var(--radius-2xl);
    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);
    }
    padding: calc(var(--spacing) * 5);
    color: var(--color-white);
    --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);
    --tw-ring-color: color-mix(in srgb, #fff 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--color-white) 15%, transparent);
    }
  }
  .tv-board-kicker {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-tracking: 0.3em;
    letter-spacing: 0.3em;
    color: var(--color-bbc-blue);
    text-transform: uppercase;
  }
  .tv-board-title {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
  }
  .tv-board-list {
    margin-top: calc(var(--spacing) * 4);
    :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)));
    }
  }
  .tv-board-list li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: calc(var(--spacing) * 3);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    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);
    }
    padding-top: calc(var(--spacing) * 2);
  }
  .tv-board-name {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .tv-board-clubs, .tv-board-stat {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: color-mix(in srgb, #fff 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 60%, transparent);
    }
  }
  .tv-board-rank {
    margin-right: calc(var(--spacing) * 2);
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    color: var(--color-bbc-orange);
  }
  .bracket-stack {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: calc(var(--spacing) * 8);
  }
  .bracket-sheet {
    --bracket-accent: #F67B27;
    --bracket-accent-soft: rgba(246, 123, 39, 0.16);
    --bracket-line: rgba(246, 123, 39, 0.55);
    width: 100%;
    border-radius: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    padding: 1.25rem 1.15rem 1.5rem;
  }
  .bracket-sheet.is-consolation {
    --bracket-accent: #27A2F6;
    --bracket-accent-soft: rgba(39, 162, 246, 0.16);
    --bracket-line: rgba(39, 162, 246, 0.55);
  }
  @media (min-width: 768px) {
    .bracket-sheet {
      padding: 1.5rem 1.6rem 1.85rem;
    }
  }
  .bracket-sheet-head {
    margin-bottom: 1.15rem;
  }
  .bracket-sheet-kicker {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--bracket-accent);
  }
  .bracket-sheet-title {
    margin-top: 0.35rem;
    font-size: clamp(1.55rem, 3vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff;
  }
  .bracket-sheet-hint {
    margin-top: 0.65rem;
    max-width: 42rem;
    font-size: 0.95rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.72);
  }
  .bracket-sheet.is-principal .bracket-sheet-hint, .bracket-sheet.is-consolation .bracket-sheet-hint {
    margin-top: 0.35rem;
    max-width: 36rem;
    font-size: clamp(0.72rem, 1.1vw, 0.88rem);
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.62);
  }
  .bracket-sheet.is-principal .bracket-sheet-hint {
    color: rgba(246, 183, 120, 0.9);
  }
  .bracket-sheet.is-consolation .bracket-sheet-hint {
    color: rgba(125, 196, 245, 0.9);
  }
  .bracket-sheet.is-principal {
    --round-r16: #E8B84A;
    --round-r8: #F67B27;
    --round-r4: #E85A7A;
    --round-r2: #FFE08A;
  }
  .bracket-sheet.is-consolation {
    --round-r16: #5BB8F0;
    --round-r8: #27A2F6;
    --round-r4: #2DD4BF;
    --round-r2: #A5F3FC;
  }
  .bracket-sheet.is-principal .bracket-fixture[data-round='1/8'] .bracket-card, .bracket-sheet.is-consolation .bracket-fixture[data-round='1/8'] .bracket-card {
    border-color: var(--round-r16);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--round-r16) 55%, transparent);
    }
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16), 0 0 0 1px var(--round-r16);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16), 0 0 0 1px color-mix(in srgb, var(--round-r16) 22%, transparent);
    }
  }
  .bracket-sheet.is-principal .bracket-fixture[data-round='1/4'] .bracket-card, .bracket-sheet.is-consolation .bracket-fixture[data-round='1/4'] .bracket-card {
    border-color: var(--round-r8);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--round-r8) 55%, transparent);
    }
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16), 0 0 0 1px var(--round-r8);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16), 0 0 0 1px color-mix(in srgb, var(--round-r8) 22%, transparent);
    }
  }
  .bracket-sheet.is-principal .bracket-fixture[data-round='1/2'] .bracket-card, .bracket-sheet.is-consolation .bracket-fixture[data-round='1/2'] .bracket-card {
    border-color: var(--round-r4);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--round-r4) 55%, transparent);
    }
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16), 0 0 0 1px var(--round-r4);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16), 0 0 0 1px color-mix(in srgb, var(--round-r4) 22%, transparent);
    }
  }
  .bracket-sheet.is-principal .bracket-fixture[data-round='Finale'] .bracket-card, .bracket-sheet.is-consolation .bracket-fixture[data-round='Finale'] .bracket-card {
    border-color: var(--round-r2);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--round-r2) 65%, transparent);
    }
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22), 0 0 0 1px var(--round-r2), 0 0 24px var(--round-r2);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22), 0 0 0 1px color-mix(in srgb, var(--round-r2) 35%, transparent), 0 0 24px color-mix(in srgb, var(--round-r2) 28%, transparent);
    }
  }
  .bracket-sheet.is-principal .bracket-card-round[data-round='1/8'], .bracket-sheet.is-consolation .bracket-card-round[data-round='1/8'] {
    border-color: var(--round-r16);
    background: var(--round-r16);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--round-r16) 22%, transparent);
    }
    box-shadow: 0 0 0 2px var(--round-r16);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 2px color-mix(in srgb, var(--round-r16) 14%, transparent);
    }
    color: var(--round-r16);
  }
  .bracket-sheet.is-principal .bracket-card-round[data-round='1/4'], .bracket-sheet.is-consolation .bracket-card-round[data-round='1/4'] {
    border-color: var(--round-r8);
    background: var(--round-r8);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--round-r8) 22%, transparent);
    }
    box-shadow: 0 0 0 2px var(--round-r8);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 2px color-mix(in srgb, var(--round-r8) 14%, transparent);
    }
    color: var(--round-r8);
  }
  .bracket-sheet.is-principal .bracket-card-round[data-round='1/2'], .bracket-sheet.is-consolation .bracket-card-round[data-round='1/2'] {
    border-color: var(--round-r4);
    background: var(--round-r4);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--round-r4) 22%, transparent);
    }
    box-shadow: 0 0 0 2px var(--round-r4);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 2px color-mix(in srgb, var(--round-r4) 14%, transparent);
    }
    color: var(--round-r4);
  }
  .bracket-sheet.is-principal .bracket-card-round[data-round='Finale'], .bracket-sheet.is-consolation .bracket-card-round[data-round='Finale'] {
    border-color: var(--round-r2);
    background: var(--round-r2);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--round-r2) 24%, transparent);
    }
    box-shadow: 0 0 0 2px var(--round-r2);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 2px color-mix(in srgb, var(--round-r2) 18%, transparent);
    }
    color: var(--round-r2);
  }
  .bracket-sheet.is-principal .bracket-arena-row.is-tone-current .bracket-card-round, .bracket-sheet.is-principal .bracket-arena-semi.is-tone-current .bracket-card-round, .bracket-sheet.is-principal .bracket-arena-final.is-tone-current .bracket-card-round, .bracket-sheet.is-consolation .bracket-arena-row.is-tone-current .bracket-card-round, .bracket-sheet.is-consolation .bracket-arena-semi.is-tone-current .bracket-card-round, .bracket-sheet.is-consolation .bracket-arena-final.is-tone-current .bracket-card-round {
    animation: bracket-circle-pulse 2s ease-in-out infinite;
    filter: brightness(1.12);
  }
  .bracket-sheet.is-principal, .bracket-sheet.is-consolation {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: clamp(0.45rem, 1vh, 0.7rem) clamp(0.5rem, 1.2vw, 0.75rem) clamp(0.5rem, 1.1vh, 0.85rem);
    margin-bottom: 0.5rem;
  }
  .bracket-sheet.is-principal .bracket-sheet-head, .bracket-sheet.is-consolation .bracket-sheet-head {
    margin-bottom: clamp(0.25rem, 0.8vh, 0.5rem);
    flex-shrink: 0;
  }
  .bracket-sheet.is-principal .bracket-sheet-title, .bracket-sheet.is-consolation .bracket-sheet-title {
    margin-top: 0.15rem;
    font-size: clamp(1rem, 1.6vw + 0.4vh, 1.35rem);
  }
  .bracket-sheet.is-principal .bracket-sheet-kicker, .bracket-sheet.is-consolation .bracket-sheet-kicker {
    font-size: clamp(0.55rem, 0.9vw, 0.68rem);
  }
  .bracket-sheet.is-principal .bracket-arena, .bracket-sheet.is-consolation .bracket-arena {
    width: 100%;
    max-width: 100%;
    --bracket-row-gap: clamp(0.55rem, 1.6vw, 1.35rem);
    --bracket-card-w: min(15.25rem, calc((100% - (3 * var(--bracket-row-gap))) / 4));
    gap: clamp(0.3rem, 1.1vh, 0.85rem);
  }
  .bracket-sheet.is-consolation .bracket-arena {
    --bracket-card-w: min(15.25rem, calc((100% - var(--bracket-row-gap)) / 2));
  }
  .bracket-sheet.is-principal .bracket-arena-row, .bracket-sheet.is-consolation .bracket-arena-row {
    gap: var(--bracket-row-gap);
    flex-wrap: nowrap;
    justify-content: space-evenly;
    width: 100%;
  }
  .bracket-sheet.is-principal .bracket-arena-spine, .bracket-sheet.is-consolation .bracket-arena-spine {
    gap: clamp(0.75rem, 4vw, 2.75rem);
    padding: clamp(0.15rem, 0.6vh, 0.4rem) 0;
    flex-wrap: nowrap;
    width: 100%;
    justify-content: space-evenly;
  }
  .bracket-sheet.is-principal .bracket-fixture.is-compact .bracket-card, .bracket-sheet.is-consolation .bracket-fixture.is-compact .bracket-card {
    min-height: 0;
    padding: clamp(0.28rem, 0.7vh, 0.45rem) clamp(0.35rem, 0.8vw, 0.55rem) clamp(0.3rem, 0.75vh, 0.5rem);
    border-radius: 0.7rem;
    gap: clamp(0.15rem, 0.45vh, 0.3rem);
  }
  .bracket-sheet.is-principal .bracket-card-meta, .bracket-sheet.is-consolation .bracket-card-meta {
    font-size: clamp(0.46rem, 0.7vw, 0.52rem);
    letter-spacing: 0.08em;
  }
  .bracket-sheet.is-principal .bracket-card-round, .bracket-sheet.is-consolation .bracket-card-round {
    min-width: 1.35rem;
    height: 1.35rem;
    font-size: 0.52rem;
  }
  .bracket-sheet.is-principal .bracket-fixture.is-compact .bracket-slot, .bracket-sheet.is-consolation .bracket-fixture.is-compact .bracket-slot {
    padding: clamp(0.15rem, 0.45vh, 0.25rem) clamp(0.25rem, 0.6vw, 0.35rem);
  }
  .bracket-sheet.is-principal .bracket-fixture.is-compact .bracket-slot-name, .bracket-sheet.is-consolation .bracket-fixture.is-compact .bracket-slot-name {
    font-size: clamp(0.68rem, 0.55vw + 0.35vh, 0.82rem);
    line-height: 1.15;
    min-height: 1.15em;
  }
  .bracket-sheet.is-principal .bracket-fixture.is-compact .bracket-slot-clubs, .bracket-sheet.is-consolation .bracket-fixture.is-compact .bracket-slot-clubs {
    font-size: clamp(0.52rem, 0.45vw + 0.25vh, 0.62rem);
    line-height: 1.15;
    min-height: 1.15em;
  }
  .bracket-sheet.is-principal .bracket-card-vs, .bracket-sheet.is-consolation .bracket-card-vs {
    font-size: 0.48rem;
    letter-spacing: 0.2em;
  }
  @media (max-height: 820px) {
    .bracket-sheet.is-principal .bracket-sheet-kicker, .bracket-sheet.is-consolation .bracket-sheet-kicker {
      display: none;
    }
  }
  .bracket-arena {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    --bracket-card-w: 14.5rem;
  }
  .bracket-arena-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2.5rem;
  }
  .bracket-arena-row.is-quarters.is-tone-idle {
    gap: 6.5rem;
  }
  .bracket-arena-row .bracket-fixture {
    flex: 0 1 var(--bracket-card-w);
    width: var(--bracket-card-w);
    max-width: 100%;
  }
  .bracket-arena-spine {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 5.5rem;
    padding: 0.35rem 0;
  }
  .bracket-arena-semi, .bracket-arena-final {
    flex: 0 1 var(--bracket-card-w);
    width: var(--bracket-card-w);
    max-width: 100%;
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .bracket-arena-semi .bracket-fixture, .bracket-arena-final .bracket-fixture {
    flex: 1 1 auto;
    width: 100%;
  }
  .bracket-card-meta-right {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
  }
  .bracket-card-round {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.85rem;
    height: 1.85rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    border: 1.5px solid rgba(125, 196, 245, 0.75);
    background: rgba(39, 162, 246, 0.16);
    box-shadow: 0 0 0 2px rgba(39, 162, 246, 0.1);
    color: #7dc4f5;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1;
  }
  .bracket-arena-row.is-tone-current .bracket-card-round, .bracket-arena-semi.is-tone-current .bracket-card-round, .bracket-arena-final.is-tone-current .bracket-card-round {
    border-color: #F67B27;
    background: rgba(246, 123, 39, 0.2);
    box-shadow: 0 0 0 2px rgba(246, 123, 39, 0.16), 0 0 12px rgba(246, 123, 39, 0.28);
    color: #F67B27;
    animation: bracket-circle-pulse 2s ease-in-out infinite;
  }
  .bracket-arena-row.is-tone-idle .bracket-card-round, .bracket-arena-semi.is-tone-idle .bracket-card-round, .bracket-arena-final.is-tone-idle .bracket-card-round {
    border-color: rgba(125, 196, 245, 0.75);
    background: rgba(39, 162, 246, 0.16);
    box-shadow: 0 0 0 2px rgba(39, 162, 246, 0.1);
    color: #7dc4f5;
  }
  .bracket-fixture.is-live .bracket-card-round {
    border-color: #F67B27;
    background: rgba(246, 123, 39, 0.22);
    box-shadow: 0 0 0 2px rgba(246, 123, 39, 0.18), 0 0 12px rgba(246, 123, 39, 0.3);
    color: #F67B27;
  }
  @keyframes bracket-circle-pulse {
    0%, 100% {
      opacity: 0.9;
      filter: brightness(1);
    }
    50% {
      opacity: 1;
      filter: brightness(1.12);
    }
  }
  .bracket-round-stack-grid {
    display: grid;
    gap: 0.65rem;
    grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr));
  }
  .bracket-fixture {
    margin: 0;
    min-width: 0;
  }
  .bracket-card {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    width: 100%;
    height: 100%;
    min-height: 8.25rem;
    border-radius: 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
    padding: 0.6rem 0.7rem 0.7rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
    box-sizing: border-box;
  }
  .bracket-fixture.is-compact .bracket-card {
    min-height: 8.25rem;
    padding: 0.6rem 0.7rem 0.7rem;
  }
  .bracket-card-meta {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
  }
  .bracket-pair {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
  }
  .bracket-card-vs {
    margin: 0;
    text-align: center;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--bracket-accent);
  }
  .bracket-slot {
    width: 100%;
    border-radius: 0.6rem;
    border: 1px solid transparent;
    background: rgba(255, 255, 255, 0.04);
    padding: 0.35rem 0.45rem;
    color: #fff;
  }
  .bracket-fixture.is-compact .bracket-slot {
    padding: 0.35rem 0.45rem;
  }
  .bracket-slot.is-waiting {
    background: rgba(255, 255, 255, 0.03);
  }
  .bracket-slot.is-waiting .bracket-slot-name {
    min-height: 1.1em;
  }
  .bracket-slot.is-writing, .bracket-slot.is-focus-slot {
    border-color: var(--bracket-accent);
    background: var(--bracket-accent-soft);
    box-shadow: 0 0 0 2px var(--bracket-accent);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 2px color-mix(in srgb, var(--bracket-accent) 35%, transparent);
    }
  }
  .bracket-slot-name {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: #fff;
  }
  .bracket-fixture.is-compact .bracket-slot-name {
    font-size: 1rem;
  }
  .bracket-slot-score {
    margin-top: 0.15rem;
    font-size: 0.72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--bracket-accent);
  }
  .bracket-slot-clubs {
    margin-top: 0.12rem;
    font-size: 0.72rem;
    line-height: 1.25;
    color: rgba(255, 255, 255, 0.58);
  }
  .bracket-fixture.is-compact .bracket-slot-clubs {
    font-size: 0.68rem;
  }
  .bracket-tbd {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.38);
  }
  .bracket-card-live {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 999px;
    background: rgba(246, 123, 39, 0.22);
    padding: 0.15rem 0.45rem;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #F67B27;
    animation: bracket-live-pulse 1.4s ease-in-out infinite;
  }
  .bracket-card-live::before {
    content: '';
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 999px;
    background: #F67B27;
    box-shadow: 0 0 0 0 rgba(246, 123, 39, 0.55);
    animation: bracket-live-dot 1.4s ease-in-out infinite;
  }
  .bracket-fixture.is-live {
    position: relative;
    z-index: 3;
  }
  .bracket-fixture.is-live .bracket-card {
    border-color: #ff9a4a;
    background: linear-gradient(165deg, #F67B27 0%, #e56a1a 55%, #c95512 100%);
    box-shadow: 0 0 0 3px rgba(246, 123, 39, 0.45), 0 0 36px rgba(246, 123, 39, 0.45), 0 18px 40px rgba(0, 0, 0, 0.35);
    animation: bracket-live-card 1.8s ease-in-out infinite;
  }
  .bracket-fixture.is-live .bracket-card-meta, .bracket-fixture.is-live .bracket-card-court {
    color: rgba(255, 255, 255, 0.92);
  }
  .bracket-fixture.is-live .bracket-card-live {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
  }
  .bracket-fixture.is-live .bracket-card-live::before {
    background: #fff;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55);
  }
  .bracket-fixture.is-live .bracket-card-round {
    border-color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12);
    color: #fff;
  }
  .bracket-fixture.is-live .bracket-slot {
    border-color: rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.16);
  }
  .bracket-fixture.is-live .bracket-slot-name {
    font-size: 1.05rem;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  }
  .bracket-fixture.is-live.is-compact .bracket-slot-name {
    font-size: 1.02rem;
  }
  .bracket-fixture.is-live .bracket-slot-clubs {
    color: rgba(255, 255, 255, 0.82);
  }
  .bracket-fixture.is-live .bracket-card-vs {
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  }
  @keyframes bracket-live-card {
    0%, 100% {
      box-shadow: 0 0 0 3px rgba(246, 123, 39, 0.4), 0 0 28px rgba(246, 123, 39, 0.35), 0 18px 40px rgba(0, 0, 0, 0.35);
    }
    50% {
      box-shadow: 0 0 0 4px rgba(255, 170, 90, 0.55), 0 0 44px rgba(246, 123, 39, 0.55), 0 18px 40px rgba(0, 0, 0, 0.35);
    }
  }
  @keyframes bracket-live-pulse {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.72;
    }
  }
  @keyframes bracket-live-dot {
    0%, 100% {
      box-shadow: 0 0 0 0 rgba(246, 123, 39, 0.55);
    }
    50% {
      box-shadow: 0 0 0 0.35rem rgba(246, 123, 39, 0);
    }
  }
  .bracket-slot.is-winner {
    background: var(--bracket-accent-soft);
    border-color: var(--bracket-accent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--bracket-accent) 45%, transparent);
    }
  }
  .bracket-slot.is-loser {
    opacity: 0.42;
  }
  .bracket-openers.draw-pool {
    width: 100%;
    border-radius: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    padding: 1.25rem 1.25rem 1.5rem;
  }
  @media (min-width: 768px) {
    .bracket-openers.draw-pool {
      padding: 1.5rem 1.75rem 1.85rem;
    }
  }
  .bracket-openers.is-waiting {
    display: none;
  }
  .bracket-openers.is-in {
    display: block;
    animation: draw-pool-focus 0.6s cubic-bezier(0.2, 0.85, 0.25, 1) both;
  }
  .bracket-openers-grid {
    margin-top: 1.1rem;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  }
  .bracket-opener {
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.05);
    padding: 0.85rem 1rem;
    color: #fff;
  }
  .bracket-opener-kicker {
    margin-bottom: 0.45rem;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-bbc-blue, #27A2F6);
  }
  .bracket-opener-team {
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
  }
  .bracket-opener-vs {
    margin: 0.35rem 0;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #F67B27;
  }
  .tv-match-row {
    margin-top: calc(var(--spacing) * 3);
    display: grid;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    @media (width >= 48rem) {
      grid-template-columns: 1fr auto 1fr;
    }
  }
  .tv-match-score {
    text-align: center;
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    color: var(--color-bbc-orange);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
  }
  .tv-match-away {
    @media (width >= 48rem) {
      text-align: right;
    }
  }
  .tv-hall {
    min-height: calc(100vh - 7.5rem);
  }
  .hall-stage {
    gap: calc(var(--spacing) * 3);
  }
  .hall-stage turbo-frame[id^='court-'] {
    display: contents;
  }
  .hall-stage .hall-side {
    justify-content: space-evenly;
    gap: calc(var(--spacing) * 2.5);
  }
  .hall-stage .court-module {
    display: flex;
    min-height: calc(var(--spacing) * 0);
    flex: 1;
    flex-direction: column;
    overflow: visible;
    border-style: var(--tw-border-style);
    border-width: 1px;
    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);
    }
    background-color: color-mix(in srgb, #fff 8%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 8%, transparent);
    }
    padding: calc(var(--spacing) * 2);
    --tw-shadow: 0 12px 40px var(--tw-shadow-color, rgba(0,0,0,0.28));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --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,);
    animation: hall-court-in 0.55s ease both;
    background-image: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
  }
  .hall-stage .hall-side .court-module:nth-child(1) {
    animation-delay: 0.05s;
  }
  .hall-stage .hall-side .court-module:nth-child(2) {
    animation-delay: 0.12s;
  }
  .hall-stage .hall-side .court-module:nth-child(3) {
    animation-delay: 0.19s;
  }
  .hall-stage .hall-center {
    justify-content: center;
    gap: calc(var(--spacing) * 0);
  }
  .hall-stage .hall-center .court-module {
    display: flex;
    min-height: calc(var(--spacing) * 0);
    flex: none;
    flex-direction: column;
    flex-basis: 62%;
    max-height: 62%;
    animation-delay: 0.1s;
  }
  .hall-stage .hall-center .court-layout {
    min-height: calc(var(--spacing) * 0);
    flex: 1;
  }
  .hall-stage .hall-center .badminton-court-portrait {
    min-height: 9rem;
    flex: 1;
  }
  .hall-stage .hall-center .court-scores {
    flex-shrink: 0;
    gap: calc(var(--spacing) * 1);
  }
  .hall-stage .hall-center .score-zone {
    min-height: 2.35rem;
  }
  .admin-hall .hall-center .score-zone {
    min-height: 4.5rem;
    padding-block: calc(var(--spacing) * 1);
  }
  .admin-hall .hall-center .score-input {
    width: calc(var(--spacing) * 12);
  }
  .hall-stage .hall-side:last-child .court-module:nth-child(1) {
    animation-delay: 0.08s;
  }
  .hall-stage .hall-side:last-child .court-module:nth-child(2) {
    animation-delay: 0.15s;
  }
  .hall-stage .hall-side:last-child .court-module:nth-child(3) {
    animation-delay: 0.22s;
  }
  .hall-stage .court-layout {
    min-height: calc(var(--spacing) * 0);
    flex: 1;
    gap: calc(var(--spacing) * 2);
  }
  .hall-stage .court-label {
    margin-bottom: calc(var(--spacing) * 1.5);
    justify-content: flex-start;
    gap: calc(var(--spacing) * 2);
    --tw-tracking: var(--tracking-normal);
    letter-spacing: var(--tracking-normal);
  }
  .hall-stage .court-label-chip {
    display: inline-flex;
    height: calc(var(--spacing) * 6);
    min-width: calc(var(--spacing) * 6);
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-bbc-blue);
    padding-inline: calc(var(--spacing) * 1.5);
    font-size: 11px;
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-white);
  }
  .hall-stage .court-label-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
  .hall-stage .badminton-court {
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: color-mix(in srgb, #fff 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 25%, transparent);
    }
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    background-color: #0f9f6e;
    background-image: radial-gradient(ellipse 80% 60% at 20% 20%, rgba(255, 255, 255, 0.18), transparent 50%), linear-gradient(160deg, #34d399 0%, #059669 48%, #047857 100%), linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: auto, auto, 1.1rem 1.1rem, 1.1rem 1.1rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -18px 40px rgba(0, 0, 0, 0.18);
  }
  .hall-stage .badminton-court-portrait {
    min-height: calc(var(--spacing) * 0);
  }
  .hall-stage .badminton-court-landscape {
    min-height: 7rem;
  }
  .hall-stage .court-net {
    --tw-gradient-position: to bottom in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
    --tw-gradient-from: var(--color-white);
    --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));
    --tw-gradient-to: color-mix(in srgb, #fff 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--color-white) 80%, transparent);
    }
    --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));
    box-shadow: 0 0 18px rgba(255, 255, 255, 0.45);
  }
  .hall-stage .badminton-court-portrait .court-net {
    height: calc(var(--spacing) * 2);
  }
  .hall-stage .badminton-court-landscape .court-net {
    width: calc(var(--spacing) * 2);
  }
  .hall-stage .court-vs {
    border-radius: var(--radius-lg);
    background-color: color-mix(in srgb, #0C2C4A 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-navy) 90%, transparent);
    }
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1);
    font-size: 10px;
    --tw-tracking: 0.24em;
    letter-spacing: 0.24em;
    color: var(--color-bbc-orange);
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px 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);
  }
  .hall-stage .team-label-court .team-label-names {
    font-size: 1.05rem;
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
    --tw-drop-shadow-size: drop-shadow(0 1px 2px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.15)));
    --tw-drop-shadow: drop-shadow(var(--drop-shadow-sm));
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
    @media (width >= 48rem) {
      font-size: var(--text-lg);
      line-height: var(--tw-leading, var(--text-lg--line-height));
    }
  }
  .hall-stage .team-label-court .team-label-club {
    font-size: 11px;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: color-mix(in srgb, #fff 75%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 75%, transparent);
    }
  }
  .hall-stage .court-club-logo {
    height: calc(var(--spacing) * 7);
    width: calc(var(--spacing) * 7);
    border-radius: var(--radius-lg);
  }
  .hall-stage .court-module-live {
    border-color: color-mix(in srgb, #F67B27 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-bbc-orange) 60%, transparent);
    }
    background-color: color-mix(in srgb, #F67B27 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-bbc-orange) 10%, transparent);
    }
    box-shadow: 0 0 0 1px rgba(246, 123, 39, 0.35), 0 16px 40px rgba(246, 123, 39, 0.18);
  }
  .hall-stage .court-scores {
    flex-shrink: 0;
    gap: calc(var(--spacing) * 1.5);
  }
  .hall-stage .score-zone {
    min-height: 2.6rem;
    border-radius: var(--radius-xl);
    background-color: color-mix(in srgb, #fff 95%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 95%, transparent);
    }
    --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);
  }
  .hall-stage .score-zone-value {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-navy);
  }
  .hall-stage .score-zone-label {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    --tw-tracking: 0.14em;
    letter-spacing: 0.14em;
    color: var(--color-bbc-blue);
  }
  .admin-hall {
    min-height: calc(100vh - 16rem);
  }
  .admin-hall .court-module {
    overflow: visible;
  }
  .admin-hall .court-layout {
    overflow: visible;
  }
  .admin-hall .score-zone {
    min-height: 3.75rem;
    gap: calc(var(--spacing) * 0.5);
    padding-inline: calc(var(--spacing) * 1.5);
    padding-block: calc(var(--spacing) * 1.5);
  }
  .admin-hall .score-input {
    width: calc(var(--spacing) * 14);
    border-radius: var(--radius-lg);
    border-color: color-mix(in srgb, #0C2C4A 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-navy) 20%, transparent);
    }
    background-color: var(--color-white);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-navy);
    background-image: linear-gradient(45deg, transparent 50%, #0c2c4a 50%), linear-gradient(135deg, #0c2c4a 50%, transparent 50%);
    background-position: calc(100% - 12px) calc(50% - 2px), calc(100% - 8px) calc(50% - 2px);
    background-size: 4px 4px, 4px 4px;
    background-repeat: no-repeat;
    padding-right: 1.1rem;
  }
  .tv-board .card {
    background-color: transparent;
    color: var(--color-white);
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .tv-board h2, .tv-board h3 {
    color: var(--color-white);
  }
  .hall-page {
    font-family: 'Outfit', ui-sans-serif, system-ui, sans-serif;
    position: relative;
    background-color: var(--color-navy);
    background-image: radial-gradient(ellipse 90% 70% at 50% -10%, rgba(39, 162, 246, 0.28), transparent 55%), radial-gradient(ellipse 55% 45% at 8% 95%, rgba(246, 123, 39, 0.16), transparent 50%), radial-gradient(ellipse 45% 40% at 92% 85%, rgba(16, 185, 129, 0.14), transparent 45%), linear-gradient(180deg, #07182c 0%, #0c2c4a 48%, #06121f 100%);
  }
  .hall-page::before {
    content: '';
    pointer-events: none;
    position: absolute;
    inset: calc(var(--spacing) * 0);
    opacity: 0.055;
    background-image: linear-gradient(rgba(255, 255, 255, 0.55) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.55) 1px, transparent 1px);
    background-size: 4rem 4rem;
    mask-image: radial-gradient(ellipse 75% 65% at 50% 35%, #000 15%, transparent 78%);
  }
  .hall-frame {
    position: relative;
    z-index: 1;
    margin-inline: auto;
    max-width: 96rem;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 5);
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 6);
    }
  }
  .hall-page > header {
    position: relative;
    z-index: 2;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    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);
    }
    background-color: color-mix(in srgb, #0C2C4A 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-navy) 80%, transparent);
    }
    --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,);
  }
  .hall-page > header a {
    color: var(--color-white);
  }
  .hall-page .btn-ghost {
    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);
    }
    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);
    }
    color: var(--color-white);
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-bbc-blue);
      }
    }
    &: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);
        }
      }
    }
  }
  .hall-page .btn-secondary {
    background-color: var(--color-white);
    color: var(--color-navy);
    &:hover {
      @media (hover: hover) {
        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);
        }
      }
    }
  }
  .hall-page .program-nav p {
    color: color-mix(in srgb, #fff 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 70%, transparent);
    }
  }
  .hall-page .mb-4.rounded-xl {
    border-style: var(--tw-border-style);
    border-width: 1px;
    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);
    }
    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);
    }
    color: var(--color-white);
  }
  .hall-page .mb-4.rounded-xl.bg-emerald-50 {
    border-color: color-mix(in srgb, oklch(84.5% 0.143 164.978) 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-emerald-300) 40%, transparent);
    }
    background-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-emerald-500) 20%, transparent);
    }
    color: var(--color-emerald-100);
  }
  .hall-page .mb-4.rounded-xl.bg-red-50 {
    border-color: color-mix(in srgb, oklch(80.8% 0.114 19.571) 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-red-300) 40%, transparent);
    }
    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);
    }
    color: var(--color-red-100);
  }
  .hall-masthead {
    margin-bottom: calc(var(--spacing) * 6);
  }
  .hall-masthead-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 4);
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    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);
    }
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    --tw-shadow: 0 12px 40px var(--tw-shadow-color, rgba(0,0,0,0.22));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --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,);
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
  }
  .hall-masthead-banner {
    margin-bottom: calc(var(--spacing) * 3);
    width: 100%;
    border-radius: var(--radius-2xl);
    object-fit: cover;
    --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);
    --tw-ring-color: color-mix(in srgb, #fff 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--color-white) 20%, transparent);
    }
    aspect-ratio: 1920 / 250;
  }
  .hall-masthead-copy {
    min-width: calc(var(--spacing) * 0);
    flex: 1;
  }
  .hall-masthead-title {
    margin-top: calc(var(--spacing) * 0.5);
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-white);
    @media (width >= 48rem) {
      font-size: var(--text-3xl);
      line-height: var(--tw-leading, var(--text-3xl--line-height));
    }
  }
  .hall-masthead-lead {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: color-mix(in srgb, #fff 65%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 65%, transparent);
    }
  }
  .hall-masthead-aside {
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    align-items: flex-end;
    gap: calc(var(--spacing) * 1);
  }
  .hall-masthead-badge {
    border-radius: var(--radius-xl);
    background-color: color-mix(in srgb, #F67B27 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-bbc-orange) 90%, transparent);
    }
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    color: var(--color-white);
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px 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);
  }
  .hall-masthead-locked {
    border-radius: var(--radius-lg);
    background-color: color-mix(in srgb, oklch(76.5% 0.177 163.223) 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-emerald-400) 20%, transparent);
    }
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1);
    font-size: 11px;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
    color: var(--color-emerald-300);
    text-transform: uppercase;
  }
  @keyframes hall-court-in {
    from {
      opacity: 0;
      transform: translateY(0.75rem) scale(0.98);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  .standings-page {
    font-family: 'Outfit', ui-sans-serif, system-ui, sans-serif;
    position: relative;
    min-height: 100vh;
    background-color: var(--color-navy);
    color: var(--color-white);
    background-image: radial-gradient(ellipse 90% 70% at 50% -10%, rgba(39, 162, 246, 0.28), transparent 55%), radial-gradient(ellipse 55% 45% at 8% 95%, rgba(246, 123, 39, 0.16), transparent 50%), radial-gradient(ellipse 45% 40% at 92% 85%, rgba(16, 185, 129, 0.14), transparent 45%), linear-gradient(180deg, #07182c 0%, #0c2c4a 48%, #06121f 100%);
  }
  .standings-page::before {
    content: '';
    pointer-events: none;
    position: absolute;
    inset: calc(var(--spacing) * 0);
    opacity: 0.055;
    background-image: linear-gradient(rgba(255, 255, 255, 0.55) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.55) 1px, transparent 1px);
    background-size: 4rem 4rem;
    mask-image: radial-gradient(ellipse 75% 65% at 50% 35%, #000 15%, transparent 78%);
  }
  .standings-frame {
    position: relative;
    z-index: 1;
    margin-inline: auto;
    max-width: 96rem;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 5);
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 6);
    }
  }
  .standings-page > header {
    position: relative;
    z-index: 2;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    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);
    }
    background-color: color-mix(in srgb, #0C2C4A 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-navy) 80%, transparent);
    }
    --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,);
  }
  .standings-page > header a {
    color: var(--color-white);
  }
  .standings-page .btn-ghost {
    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);
    }
    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);
    }
    color: var(--color-white);
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-bbc-blue);
      }
    }
    &: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);
        }
      }
    }
  }
  .standings-page .btn-secondary {
    background-color: var(--color-white);
    color: var(--color-navy);
    &:hover {
      @media (hover: hover) {
        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);
        }
      }
    }
  }
  .standings-page .program-nav p {
    color: color-mix(in srgb, #fff 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 70%, transparent);
    }
  }
  .standings-page .mb-4.rounded-xl {
    border-style: var(--tw-border-style);
    border-width: 1px;
    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);
    }
    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);
    }
    color: var(--color-white);
  }
  .standings-masthead {
    margin-bottom: calc(var(--spacing) * 6);
  }
  .standing-break-timer {
    position: relative;
    z-index: 5;
    margin-bottom: calc(var(--spacing) * 6);
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 2px;
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 5);
    text-align: center;
    --tw-shadow: 0 12px 36px var(--tw-shadow-color, rgba(7,24,44,0.35));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    opacity: 1;
    transform: none;
  }
  .standing-break-timer.is-counting {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(7, 24, 44, 0.55);
    color: #fff;
  }
  .standing-break-timer.is-ready {
    border-color: rgba(246, 123, 39, 1);
    background: rgba(246, 123, 39, 0.6);
    color: #fff;
  }
  .standing-break-timer.is-ready .standing-break-timer-kicker, .standing-break-timer.is-ready .standing-break-timer-message {
    color: #fff;
  }
  .standing-break-timer-kicker {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }
  .standing-break-timer-clock {
    margin: 0.5rem 0 0;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
    font-size: clamp(2.6rem, 7vw, 3.6rem);
    line-height: 1;
    color: #fff;
  }
  .standing-break-timer-hint, .standing-break-timer-message {
    margin: 0.5rem 0 0;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.85);
  }
  .standing-break-timer-message {
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
  }
  .program-nav-next.is-break-ready {
    animation: standing-break-ready-pulse 1.4s ease-in-out infinite;
    box-shadow: 0 0 0 3px rgba(246, 123, 39, 0.35);
  }
  @keyframes standing-break-ready-pulse {
    0%, 100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.03);
    }
  }
  .standings-masthead-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 4);
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    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);
    }
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    --tw-shadow: 0 12px 40px var(--tw-shadow-color, rgba(0,0,0,0.22));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --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,);
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
  }
  .standings-masthead-banner {
    margin-inline: auto;
    margin-bottom: calc(var(--spacing) * 3);
    width: 100%;
    max-width: var(--container-xl);
    border-radius: var(--radius-2xl);
    object-fit: cover;
    --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);
    --tw-ring-color: color-mix(in srgb, #fff 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--color-white) 20%, transparent);
    }
    @media (width >= 48rem) {
      max-width: var(--container-2xl);
    }
    aspect-ratio: 1920 / 250;
    max-height: 5rem;
  }
  .standings-masthead-copy {
    min-width: calc(var(--spacing) * 0);
    flex: 1;
  }
  .standings-masthead-title {
    margin-top: calc(var(--spacing) * 0.5);
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-white);
    @media (width >= 48rem) {
      font-size: var(--text-3xl);
      line-height: var(--tw-leading, var(--text-3xl--line-height));
    }
  }
  .standings-masthead-lead {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: color-mix(in srgb, #fff 65%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 65%, transparent);
    }
  }
  .standings-masthead-aside {
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    align-items: flex-end;
    gap: calc(var(--spacing) * 1);
  }
  .standings-masthead-badge {
    border-radius: var(--radius-xl);
    background-color: var(--color-bbc-orange);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    color: var(--color-white);
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px 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);
  }
  .standings-grid {
    display: grid;
    gap: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    @media (width >= 80rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .standings-empty {
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    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);
    }
    background-color: color-mix(in srgb, #fff 8%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 8%, transparent);
    }
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 10);
    text-align: center;
    color: color-mix(in srgb, #fff 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 70%, transparent);
    }
    --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,);
  }
  .tombola-board {
    position: relative;
    margin-bottom: calc(var(--spacing) * 8);
    overflow: hidden;
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    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);
    }
    --tw-shadow: 0 12px 40px var(--tw-shadow-color, rgba(0,0,0,0.28));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --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,);
    background-image: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
  }
  .tombola-board-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: calc(var(--spacing) * 3);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    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);
    }
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 5);
    }
  }
  .tombola-board-title {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-white);
    @media (width >= 48rem) {
      font-size: var(--text-xl);
      line-height: var(--tw-leading, var(--text-xl--line-height));
    }
  }
  .tombola-board-count {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: 0.18em;
    letter-spacing: 0.18em;
    color: color-mix(in srgb, #fff 45%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 45%, transparent);
    }
    text-transform: uppercase;
  }
  .tombola-lot-list {
    margin: calc(var(--spacing) * 0);
    list-style-type: none;
    padding: calc(var(--spacing) * 0);
  }
  .tombola-lot-row {
    display: grid;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: color-mix(in srgb, #fff 8%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 8%, transparent);
    }
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3.5);
    &:last-child {
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 0px;
    }
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 4);
    }
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 5);
    }
    grid-template-columns: 2.25rem 3.25rem minmax(0, 1fr) auto;
  }
  @media (max-width: 480px) {
    .tombola-lot-row {
      grid-template-columns: 2rem 2.75rem minmax(0, 1fr);
      gap: 0.65rem 0.75rem;
    }
    .tombola-lot-value {
      grid-column: 3;
      justify-self: start;
    }
  }
  .tombola-lot-rank {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
    color: color-mix(in srgb, #F67B27 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-bbc-orange) 90%, transparent);
    }
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
  }
  .tombola-lot-logo {
    display: flex;
    height: calc(var(--spacing) * 12);
    width: calc(var(--spacing) * 12);
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 1.5);
    --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);
    --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);
    --tw-ring-color: color-mix(in srgb, #fff 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--color-white) 30%, transparent);
    }
    aspect-ratio: 1 / 1;
  }
  .tombola-lot-logo img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    aspect-ratio: 1 / 1;
  }
  .tombola-lot-logo span {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-navy);
  }
  .tombola-lot-copy {
    min-width: calc(var(--spacing) * 0);
    text-align: left;
  }
  .tombola-lot-label {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-leading: var(--leading-snug);
    line-height: var(--leading-snug);
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    @media (width >= 48rem) {
      font-size: var(--text-lg);
      line-height: var(--tw-leading, var(--text-lg--line-height));
    }
  }
  .tombola-lot-by {
    margin-top: calc(var(--spacing) * 0.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: color-mix(in srgb, #fff 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 60%, transparent);
    }
  }
  .tombola-lot-winner {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-bbc-orange);
  }
  .tombola-lot-winner.is-pending {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: color-mix(in srgb, #fff 45%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 45%, transparent);
    }
  }
  .tombola-lot-value {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-bbc-orange);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    @media (width >= 48rem) {
      font-size: var(--text-xl);
      line-height: var(--tw-leading, var(--text-xl--line-height));
    }
    white-space: nowrap;
  }
  .standings-page > .partner-slide, .standings-frame > .partner-slide {
    margin-top: calc(var(--spacing) * 2);
    margin-bottom: calc(var(--spacing) * 8);
  }
  .public-bracket-board {
    overflow-x: auto;
    padding-bottom: calc(var(--spacing) * 6);
  }
  .bracket-tabs {
    margin-bottom: calc(var(--spacing) * 5);
    display: flex;
    width: 100%;
    max-width: var(--container-md);
    gap: calc(var(--spacing) * 2);
  }
  .bracket-tab {
    flex: 1;
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2.5);
    text-align: center;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    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));
  }
  .bracket-tab.is-principal {
    border-color: color-mix(in srgb, #F67B27 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-bbc-orange) 40%, transparent);
    }
    background-color: color-mix(in srgb, #F67B27 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-bbc-orange) 10%, transparent);
    }
    color: var(--color-bbc-orange);
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #F67B27 20%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-bbc-orange) 20%, transparent);
        }
      }
    }
  }
  .bracket-tab.is-principal.is-active {
    border-color: var(--color-bbc-orange);
    background-color: var(--color-bbc-orange);
    color: var(--color-white);
    --tw-shadow: 0 8px 24px var(--tw-shadow-color, rgba(246,123,39,0.35));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .bracket-tab.is-consolation {
    border-color: color-mix(in srgb, oklch(74.6% 0.16 232.661) 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-sky-400) 40%, transparent);
    }
    background-color: color-mix(in srgb, oklch(74.6% 0.16 232.661) 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-sky-400) 10%, transparent);
    }
    color: var(--color-sky-300);
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, oklch(74.6% 0.16 232.661) 20%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-sky-400) 20%, transparent);
        }
      }
    }
  }
  .bracket-tab.is-consolation.is-active {
    border-color: var(--color-sky-400);
    background-color: var(--color-sky-400);
    color: var(--color-navy);
    --tw-shadow: 0 8px 24px var(--tw-shadow-color, rgba(39,162,246,0.35));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .bracket-tab-panel[hidden] {
    display: none;
  }
  .standing-board {
    overflow: hidden;
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    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);
    }
    padding: calc(var(--spacing) * 4);
    --tw-shadow: 0 12px 40px var(--tw-shadow-color, rgba(0,0,0,0.28));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --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,);
    background-image: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
    animation: hall-court-in 0.55s ease both;
  }
  .standing-board-head {
    margin-bottom: calc(var(--spacing) * 4);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: calc(var(--spacing) * 3);
  }
  .standing-board-kicker {
    font-size: 11px;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: 0.18em;
    letter-spacing: 0.18em;
    color: var(--color-bbc-blue);
    text-transform: uppercase;
  }
  .standing-board-title {
    margin-top: calc(var(--spacing) * 0.5);
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-white);
  }
  .standing-board-court {
    display: inline-flex;
    height: calc(var(--spacing) * 8);
    min-width: calc(var(--spacing) * 8);
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-bbc-blue);
    padding-inline: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-white);
  }
  .standing-table {
    width: 100%;
    text-align: left;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .standing-table thead th {
    padding-bottom: calc(var(--spacing) * 2);
    font-size: 11px;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    --tw-tracking: 0.14em;
    letter-spacing: 0.14em;
    color: color-mix(in srgb, #fff 45%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 45%, transparent);
    }
    text-transform: uppercase;
  }
  .standing-table tbody td {
    padding-block: calc(var(--spacing) * 2.5);
    vertical-align: middle;
  }
  .standing-row {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: color-mix(in srgb, #fff 8%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 8%, transparent);
    }
  }
  .standing-row-main {
    background-color: color-mix(in srgb, #F67B27 12%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-bbc-orange) 12%, transparent);
    }
  }
  .standing-row-consolation {
    background-color: color-mix(in srgb, #27A2F6 12%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-bbc-blue) 12%, transparent);
    }
  }
  .standing-rank-chip {
    display: inline-flex;
    height: calc(var(--spacing) * 7);
    width: calc(var(--spacing) * 7);
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    color: var(--color-white);
  }
  .standing-rank-main {
    background-color: var(--color-bbc-orange);
    --tw-shadow: 0 0 16px var(--tw-shadow-color, rgba(246,123,39,0.45));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .standing-rank-consolation {
    background-color: var(--color-bbc-blue);
    --tw-shadow: 0 0 14px var(--tw-shadow-color, rgba(39,162,246,0.35));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .standing-rank-muted {
    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);
    }
    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);
    }
  }
  .standing-team {
    display: flex;
    min-width: calc(var(--spacing) * 0);
    align-items: center;
    gap: calc(var(--spacing) * 2.5);
  }
  .standing-logos {
    display: flex;
    flex-shrink: 0;
    gap: calc(var(--spacing) * 1);
  }
  .standing-logo {
    height: calc(var(--spacing) * 7);
    width: calc(var(--spacing) * 7);
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    object-fit: contain;
    padding: calc(var(--spacing) * 0.5);
    --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);
  }
  .standing-team-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
  }
  .standing-team-clubs {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    color: color-mix(in srgb, #fff 55%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 55%, transparent);
    }
  }
  .standing-stat {
    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);
    }
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
  }
  .standing-stat-win {
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-emerald-300);
  }
  .standing-stat-loss {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: color-mix(in srgb, #fff 45%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 45%, transparent);
    }
  }
  .standing-stat-ga {
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-bbc-orange);
  }
  .settings-page {
    position: relative;
    margin-inline: auto;
    max-width: var(--container-6xl);
    padding-bottom: calc(var(--spacing) * 10);
  }
  .settings-hero {
    position: relative;
    margin-bottom: calc(var(--spacing) * 8);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: calc(var(--spacing) * 6);
    overflow: hidden;
    border-radius: var(--radius-3xl);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 8);
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 8);
    }
    background: radial-gradient(ellipse 70% 90% at 0% 0%, rgba(39, 162, 246, 0.32), transparent 55%), radial-gradient(ellipse 50% 70% at 100% 100%, rgba(246, 123, 39, 0.22), transparent 50%), linear-gradient(145deg, rgba(12, 44, 74, 0.95) 0%, rgba(7, 24, 44, 0.98) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
  .settings-hero::after {
    content: '';
    pointer-events: none;
    position: absolute;
    inset-inline: calc(var(--spacing) * 0);
    bottom: calc(var(--spacing) * 0);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(39, 162, 246, 0.5), rgba(246, 123, 39, 0.45), transparent);
  }
  .settings-kicker {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: 0.35em;
    letter-spacing: 0.35em;
    color: var(--color-bbc-blue);
    text-transform: uppercase;
    animation: settings-fade-up 0.55s ease-out both;
  }
  .settings-title {
    margin-top: calc(var(--spacing) * 2);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-white);
    @media (width >= 48rem) {
      font-size: var(--text-4xl);
      line-height: var(--tw-leading, var(--text-4xl--line-height));
    }
    animation: settings-fade-up 0.55s ease-out 0.06s both;
  }
  .settings-lead {
    margin-top: calc(var(--spacing) * 2);
    max-width: var(--container-xl);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
    color: color-mix(in srgb, #fff 65%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 65%, transparent);
    }
    @media (width >= 48rem) {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
    }
    animation: settings-fade-up 0.55s ease-out 0.12s both;
  }
  .settings-hero-banner {
    width: 100%;
    max-width: var(--container-xl);
    flex-shrink: 0;
    overflow: hidden;
    border-radius: var(--radius-2xl);
    --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);
    --tw-ring-color: color-mix(in srgb, #fff 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--color-white) 25%, transparent);
    }
    animation: settings-fade-up 0.55s ease-out 0.1s both;
    aspect-ratio: 1920 / 250;
  }
  .settings-hero-banner img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  .settings-grid {
    display: grid;
    gap: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .settings-panel {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    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);
    }
    background-color: color-mix(in srgb, #fff 4%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 4%, transparent);
    }
    padding: calc(var(--spacing) * 5);
    --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,);
    @media (width >= 48rem) {
      padding: calc(var(--spacing) * 6);
    }
    transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
    animation: settings-fade-up 0.5s ease-out both;
  }
  .settings-panel:nth-child(1) {
    animation-delay: 0.08s;
  }
  .settings-panel:nth-child(2) {
    animation-delay: 0.14s;
  }
  .settings-panel:nth-child(3) {
    animation-delay: 0.2s;
  }
  .settings-panel:nth-child(4) {
    animation-delay: 0.26s;
  }
  .settings-panel:nth-child(5) {
    animation-delay: 0.32s;
  }
  .settings-panel:hover {
    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);
    }
    background-color: color-mix(in srgb, #fff 6%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 6%, transparent);
    }
  }
  .settings-panel-wide {
    @media (width >= 48rem) {
      grid-column: span 2 / span 2;
    }
  }
  .settings-panel-head {
    margin-bottom: calc(var(--spacing) * 5);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    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);
    }
    padding-bottom: calc(var(--spacing) * 4);
  }
  .settings-panel-kicker {
    font-size: 11px;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: 0.28em;
    letter-spacing: 0.28em;
    color: var(--color-bbc-orange);
    text-transform: uppercase;
  }
  .settings-panel-title {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-white);
  }
  .settings-panel-body {
    :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)));
    }
  }
  .settings-panel-body .form-help, .settings-panel-body .help-text, .settings-panel .form-text {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: color-mix(in srgb, #fff 45%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 45%, transparent);
    }
  }
  .settings-schedule {
    position: relative;
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse)));
    }
    padding-left: calc(var(--spacing) * 1);
  }
  .settings-schedule::before {
    content: '';
    position: absolute;
    top: calc(var(--spacing) * 4);
    bottom: calc(var(--spacing) * 4);
    left: 0.65rem;
    width: 1px;
    --tw-gradient-position: to bottom in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
    --tw-gradient-from: var(--color-bbc-blue);
    --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));
    --tw-gradient-via: var(--color-emerald-400);
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
    --tw-gradient-to: var(--color-bbc-orange);
    --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));
    opacity: 60%;
  }
  .settings-schedule-item {
    position: relative;
    padding-left: calc(var(--spacing) * 8);
    padding-block: 0.65rem;
  }
  .settings-schedule-dot {
    position: absolute;
    top: 1.35rem;
    left: calc(var(--spacing) * 0);
    height: calc(var(--spacing) * 3.5);
    width: calc(var(--spacing) * 3.5);
    border-radius: calc(infinity * 1px);
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + 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);
    --tw-ring-color: var(--color-navy);
  }
  .settings-schedule-item.is-draw .settings-schedule-dot {
    background-color: var(--color-bbc-blue);
  }
  .settings-schedule-item.is-checkin .settings-schedule-dot {
    background-color: var(--color-emerald-400);
  }
  .settings-schedule-item.is-start .settings-schedule-dot {
    background-color: var(--color-bbc-orange);
  }
  .settings-logo-hint {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: color-mix(in srgb, #fff 55%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 55%, transparent);
    }
  }
  .settings-banner-block {
    :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)));
    }
  }
  .settings-banner-preview {
    display: block;
    width: 100%;
    max-width: var(--container-3xl);
    border-radius: var(--radius-xl);
    background-color: var(--color-white);
    object-fit: cover;
    --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);
    --tw-ring-color: color-mix(in srgb, #fff 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--color-white) 25%, transparent);
    }
    aspect-ratio: 1920 / 250;
  }
  .settings-banner-preview.is-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    border-style: var(--tw-border-style);
    border-width: 1px;
    --tw-border-style: dashed;
    border-style: dashed;
    border-color: color-mix(in srgb, #fff 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 25%, transparent);
    }
    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);
    }
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    color: color-mix(in srgb, #fff 35%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 35%, transparent);
    }
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .tournament-card-banner {
    margin-bottom: calc(var(--spacing) * 3);
    width: 100%;
    border-radius: var(--radius-xl);
    object-fit: cover;
    --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);
    --tw-ring-color: color-mix(in srgb, #fff 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--color-white) 20%, transparent);
    }
    aspect-ratio: 1920 / 250;
  }
  .settings-toggle {
    display: flex;
    cursor: pointer;
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    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);
    }
    background-color: color-mix(in srgb, #fff 3%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 3%, transparent);
    }
    padding: calc(var(--spacing) * 4);
    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));
    &:hover {
      @media (hover: hover) {
        border-color: color-mix(in srgb, #27A2F6 40%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-bbc-blue) 40%, transparent);
        }
      }
    }
  }
  .settings-toggle input[type='checkbox'] {
    margin-top: calc(var(--spacing) * 1);
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
    flex-shrink: 0;
    border-radius: 0.25rem;
    border-color: color-mix(in srgb, #fff 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 25%, transparent);
    }
    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);
    }
    color: var(--color-bbc-blue);
    &:focus {
      --tw-ring-color: var(--color-bbc-blue);
    }
  }
  .settings-toggle strong {
    display: block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
  }
  .settings-toggle small {
    margin-top: calc(var(--spacing) * 1);
    display: block;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
    color: color-mix(in srgb, #fff 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 50%, transparent);
    }
  }
  .settings-actions {
    margin-top: calc(var(--spacing) * 8);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: calc(var(--spacing) * 3);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    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);
    }
    padding-top: calc(var(--spacing) * 6);
    animation: settings-fade-up 0.5s ease-out 0.38s both;
  }
  .settings-save {
    min-width: 12rem;
    box-shadow: 0 0 0 0 rgba(246, 123, 39, 0.35);
    animation: settings-pulse-ring 2.8s ease-in-out infinite;
  }
  @keyframes settings-fade-up {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @keyframes settings-pulse-ring {
    0%, 100% {
      box-shadow: 0 0 0 0 rgba(246, 123, 39, 0.35);
    }
    50% {
      box-shadow: 0 0 0 8px rgba(246, 123, 39, 0);
    }
  }
  .champions-page {
    font-family: 'Outfit', ui-sans-serif, system-ui, sans-serif;
  }
  .champions-board {
    position: relative;
    margin-inline: auto;
    display: flex;
    max-width: var(--container-6xl);
    flex-direction: column;
    padding-inline: calc(var(--spacing) * 4);
    padding-top: calc(var(--spacing) * 8);
    padding-bottom: calc(var(--spacing) * 10);
  }
  .champions-board.is-tv {
    max-width: var(--container-6xl);
    padding-inline: calc(var(--spacing) * 2);
    padding-top: calc(var(--spacing) * 4);
    padding-bottom: calc(var(--spacing) * 6);
  }
  .champions-board-head {
    position: relative;
    z-index: 10;
    margin-bottom: calc(var(--spacing) * 8);
    text-align: center;
  }
  .champions-board-title {
    margin-top: calc(var(--spacing) * 2);
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-white);
    @media (width >= 48rem) {
      font-size: var(--text-5xl);
      line-height: var(--tw-leading, var(--text-5xl--line-height));
    }
  }
  .champions-board-lead {
    margin-top: calc(var(--spacing) * 2);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    color: color-mix(in srgb, #fff 65%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 65%, transparent);
    }
  }
  .champions-board-columns {
    position: relative;
    z-index: 10;
    display: grid;
    gap: calc(var(--spacing) * 5);
    grid-template-columns: 1fr;
  }
  @media (min-width: 768px) {
    .champions-board-columns {
      grid-template-columns: 1fr 1fr;
      align-items: stretch;
    }
  }
  .champions-board-columns .champions-podium {
    margin-inline: calc(var(--spacing) * 0);
    height: 100%;
    max-width: none;
  }
  .champions-board > .partner-slide {
    position: relative;
    z-index: 10;
    margin-top: calc(var(--spacing) * 10);
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
  }
  .champions-board.is-tv > .partner-slide {
    margin-top: calc(var(--spacing) * 6);
  }
  .partner-slide-label {
    margin-bottom: calc(var(--spacing) * 3);
    text-align: center;
    font-size: 10px;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: 0.28em;
    letter-spacing: 0.28em;
    color: color-mix(in srgb, #fff 45%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 45%, transparent);
    }
    text-transform: uppercase;
  }
  .partner-slide-viewport {
    margin-inline: auto;
    width: 100%;
    overflow: hidden;
    max-width: calc((4 * 7rem) + (3 * 1.25rem));
  }
  .partner-slide.is-static .partner-slide-viewport {
    width: auto;
    max-width: 100%;
  }
  .partner-slide.is-static .partner-slide-track {
    margin-inline: auto;
    justify-content: center;
  }
  .partner-slide-track {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    width: max-content;
    list-style: none;
    margin: 0;
    padding: 0.35rem 0.15rem;
    --partner-slide-shift: 0px;
    --partner-slide-duration: 26s;
  }
  .partner-slide.is-scrolling .partner-slide-track {
    animation: partner-slide-marquee var(--partner-slide-duration) linear infinite;
  }
  .partner-slide.is-scrolling:hover .partner-slide-track {
    animation-play-state: paused;
  }
  @keyframes partner-slide-marquee {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(calc(-1 * var(--partner-slide-shift)));
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .partner-slide.is-scrolling .partner-slide-track {
      animation: none;
    }
  }
  .partner-slide-item {
    flex-shrink: 0;
  }
  .partner-slide-disc {
    position: relative;
    display: flex;
    height: 7rem;
    width: 7rem;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-white);
    text-decoration-line: none;
    --tw-shadow: 0 8px 20px var(--tw-shadow-color, rgba(0,0,0,0.35));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --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);
    --tw-ring-color: color-mix(in srgb, #fff 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--color-white) 80%, transparent);
    }
    aspect-ratio: 1 / 1;
  }
  .champions-board.is-tv .partner-slide-disc {
    height: 7.5rem;
    width: 7.5rem;
  }
  .partner-slide-disc img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    padding: calc(var(--spacing) * 1.5);
    aspect-ratio: 1 / 1;
  }
  .partner-slide-initial {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    color: var(--color-navy);
  }
  .champions-podium {
    position: relative;
    margin-inline: auto;
    max-width: var(--container-4xl);
    overflow: hidden;
    border-radius: var(--radius-3xl);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 14);
    text-align: center;
    color: var(--color-white);
    background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(246, 123, 39, 0.38), transparent 55%), radial-gradient(ellipse 50% 40% at 90% 90%, rgba(246, 123, 39, 0.14), transparent 50%), linear-gradient(180deg, #0a2038 0%, #07182c 100%);
    animation: champions-rise 0.9s ease-out both;
  }
  .champions-podium.is-principal {
    box-shadow: inset 0 0 0 1px rgba(246, 123, 39, 0.45);
    background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(246, 123, 39, 0.42), transparent 55%), radial-gradient(ellipse 50% 40% at 10% 90%, rgba(246, 123, 39, 0.16), transparent 50%), linear-gradient(180deg, #0a2038 0%, #07182c 100%);
  }
  .champions-podium.is-compact {
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 10);
  }
  .champions-podium.is-compact .champions-podium-title {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    @media (width >= 48rem) {
      font-size: var(--text-3xl);
      line-height: var(--tw-leading, var(--text-3xl--line-height));
    }
  }
  .champions-podium.is-compact .champions-podium-names {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    @media (width >= 48rem) {
      font-size: var(--text-4xl);
      line-height: var(--tw-leading, var(--text-4xl--line-height));
    }
  }
  .champions-podium.is-compact .champions-podium-winner {
    margin-top: calc(var(--spacing) * 6);
  }
  .champions-podium.is-compact .champions-podium-finalist {
    margin-top: calc(var(--spacing) * 6);
    padding-top: calc(var(--spacing) * 6);
  }
  .champions-podium.is-consolation {
    box-shadow: inset 0 0 0 1px rgba(39, 162, 246, 0.45);
    background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(39, 162, 246, 0.4), transparent 55%), radial-gradient(ellipse 50% 40% at 90% 90%, rgba(39, 162, 246, 0.16), transparent 50%), linear-gradient(180deg, #0a2038 0%, #07182c 100%);
  }
  .champions-podium-kicker {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-tracking: 0.35em;
    letter-spacing: 0.35em;
    color: var(--color-bbc-blue);
    text-transform: uppercase;
  }
  .champions-podium.is-principal .champions-podium-kicker {
    color: var(--color-bbc-orange);
  }
  .champions-podium-badge {
    margin-top: calc(var(--spacing) * 3);
    display: inline-flex;
    border-radius: calc(infinity * 1px);
    border-style: var(--tw-border-style);
    border-width: 1px;
    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);
    }
    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);
    }
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    color: color-mix(in srgb, #fff 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 90%, transparent);
    }
  }
  .champions-podium.is-principal .champions-podium-badge {
    border-color: color-mix(in srgb, #F67B27 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-bbc-orange) 40%, transparent);
    }
    background-color: color-mix(in srgb, #F67B27 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-bbc-orange) 15%, transparent);
    }
    color: var(--color-orange-100);
  }
  .champions-podium.is-consolation .champions-podium-badge {
    border-color: color-mix(in srgb, oklch(82.8% 0.111 230.318) 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-sky-300) 40%, transparent);
    }
    background-color: color-mix(in srgb, oklch(74.6% 0.16 232.661) 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-sky-400) 15%, transparent);
    }
    color: var(--color-sky-100);
  }
  .champions-podium-banner {
    margin-inline: auto;
    margin-top: calc(var(--spacing) * 6);
    width: 100%;
    max-width: var(--container-3xl);
    border-radius: var(--radius-2xl);
    object-fit: cover;
    --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);
    --tw-ring-color: color-mix(in srgb, #fff 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--color-white) 25%, transparent);
    }
    aspect-ratio: 1920 / 250;
  }
  .champions-podium-title {
    margin-top: calc(var(--spacing) * 5);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
    @media (width >= 48rem) {
      font-size: var(--text-5xl);
      line-height: var(--tw-leading, var(--text-5xl--line-height));
    }
  }
  .champions-podium-winner {
    margin-top: calc(var(--spacing) * 10);
  }
  .champions-podium-finalist {
    margin-top: calc(var(--spacing) * 8);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: color-mix(in srgb, #fff 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 15%, transparent);
    }
    padding-top: calc(var(--spacing) * 8);
  }
  .champions-podium-rank {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: 0.25em;
    letter-spacing: 0.25em;
    color: var(--color-bbc-orange);
    text-transform: uppercase;
  }
  .champions-podium.is-consolation .champions-podium-rank:not(.is-muted) {
    color: var(--color-sky-300);
  }
  .champions-podium-rank.is-muted {
    color: color-mix(in srgb, #fff 45%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 45%, transparent);
    }
  }
  .champions-podium-names {
    margin-top: calc(var(--spacing) * 3);
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-white);
    @media (width >= 48rem) {
      font-size: var(--text-6xl);
      line-height: var(--tw-leading, var(--text-6xl--line-height));
    }
  }
  .champions-podium-names.is-muted {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    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);
    }
    @media (width >= 48rem) {
      font-size: var(--text-3xl);
      line-height: var(--tw-leading, var(--text-3xl--line-height));
    }
  }
  .champions-podium-clubs {
    margin-top: calc(var(--spacing) * 2);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    color: color-mix(in srgb, #fff 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 70%, transparent);
    }
    @media (width >= 48rem) {
      font-size: var(--text-xl);
      line-height: var(--tw-leading, var(--text-xl--line-height));
    }
  }
  .champions-podium-clubs.is-muted {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    color: color-mix(in srgb, #fff 45%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 45%, transparent);
    }
  }
  .champions-podium-empty {
    margin-top: calc(var(--spacing) * 10);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    color: color-mix(in srgb, #fff 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 60%, transparent);
    }
  }
  @keyframes champions-rise {
    from {
      opacity: 0;
      transform: translateY(18px) scale(0.98);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
  .champions-podium.is-confetti {
    overflow: visible;
    animation: champions-rise 0.9s ease-out both, champions-glow 1.6s ease-in-out 0.2s 2;
  }
  @keyframes champions-glow {
    0%, 100% {
      filter: brightness(1);
    }
    50% {
      filter: brightness(1.12);
    }
  }
  .champions-confetti-piece {
    position: absolute;
    top: -0.5rem;
    left: var(--confetti-left, 50%);
    width: 0.45rem;
    height: 0.75rem;
    background: var(--confetti-color, #f67b27);
    opacity: 0.95;
    transform: rotate(var(--confetti-rotate, 0deg));
    animation: champions-confetti-fall var(--confetti-duration, 2.4s) ease-in var(--confetti-delay, 0s) forwards;
    pointer-events: none;
    z-index: 5;
  }
  @keyframes champions-confetti-fall {
    0% {
      transform: translateY(0) rotate(var(--confetti-rotate, 0deg));
      opacity: 1;
    }
    100% {
      transform: translateY(110vh) rotate(calc(var(--confetti-rotate, 0deg) + 540deg));
      opacity: 0;
    }
  }
  .tv-checkin-board {
    margin-inline: auto;
    margin-top: calc(var(--spacing) * 0);
    max-width: var(--container-2xl);
    padding-inline: calc(var(--spacing) * 0);
    text-align: center;
    animation: settings-fade-up 0.55s ease-out both;
  }
  .tv-checkin-board-kicker {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: 0.35em;
    letter-spacing: 0.35em;
    color: var(--color-bbc-blue);
    text-transform: uppercase;
  }
  .tv-checkin-status {
    margin-top: calc(var(--spacing) * 3);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-leading: var(--leading-snug);
    line-height: var(--leading-snug);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-bbc-orange);
    @media (width >= 48rem) {
      font-size: var(--text-xl);
      line-height: var(--tw-leading, var(--text-xl--line-height));
    }
  }
  .tv-checkin-stats {
    margin-top: calc(var(--spacing) * 4);
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: calc(var(--spacing) * 3);
    @media (width >= 40rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .tv-checkin-stat {
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: color-mix(in srgb, #fff 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 15%, transparent);
    }
    background-color: color-mix(in srgb, #fff 8%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 8%, transparent);
    }
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 5);
    --tw-shadow: 0 12px 40px var(--tw-shadow-color, rgba(0,0,0,0.22));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --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,);
  }
  .tv-checkin-stat.is-waiting {
    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);
    }
  }
  .tv-checkin-stat.is-validated {
    border-color: color-mix(in srgb, oklch(76.5% 0.177 163.223) 35%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-emerald-400) 35%, transparent);
    }
    background-color: color-mix(in srgb, oklch(76.5% 0.177 163.223) 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-emerald-400) 10%, transparent);
    }
  }
  .tv-checkin-stat.is-forfeit {
    border-color: color-mix(in srgb, oklch(70.4% 0.191 22.216) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-red-400) 30%, transparent);
    }
    background-color: color-mix(in srgb, oklch(70.4% 0.191 22.216) 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-red-400) 10%, transparent);
    }
  }
  .tv-checkin-stat-value {
    display: block;
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-white);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    font-size: clamp(2rem, 5vw, 3.25rem);
    line-height: 1;
  }
  .tv-checkin-stat.is-validated .tv-checkin-stat-value {
    color: var(--color-emerald-200);
  }
  .tv-checkin-stat.is-forfeit .tv-checkin-stat-value {
    color: var(--color-red-200);
  }
  .tv-checkin-stat-label {
    margin-top: calc(var(--spacing) * 2);
    display: block;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: 0.18em;
    letter-spacing: 0.18em;
    color: color-mix(in srgb, #fff 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 60%, transparent);
    }
    text-transform: uppercase;
  }
  .tv-checkin-progress {
    margin-inline: auto;
    margin-top: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 2);
    max-width: var(--container-xl);
    overflow: hidden;
    border-radius: calc(infinity * 1px);
    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);
    }
  }
  .tv-checkin-progress-bar {
    height: 100%;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-bbc-orange);
    transition-property: width;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .tv-checkin-progress-bar.is-done {
    background-color: var(--color-emerald-400);
  }
  .tv-checkin-progress-caption {
    margin-top: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: color-mix(in srgb, #fff 55%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 55%, transparent);
    }
  }
  .partners-page-inner {
    position: relative;
    margin-inline: auto;
    max-width: var(--container-6xl);
    padding-bottom: calc(var(--spacing) * 10);
  }
  .partners-hero {
    position: relative;
    margin-bottom: calc(var(--spacing) * 8);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: calc(var(--spacing) * 6);
    overflow: hidden;
    border-radius: var(--radius-3xl);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 8);
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 8);
    }
    background: radial-gradient(ellipse 70% 90% at 0% 0%, rgba(39, 162, 246, 0.28), transparent 55%), radial-gradient(ellipse 50% 70% at 100% 100%, rgba(246, 123, 39, 0.2), transparent 50%), linear-gradient(145deg, rgba(12, 44, 74, 0.95) 0%, rgba(7, 24, 44, 0.98) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
  .partners-kicker {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: 0.35em;
    letter-spacing: 0.35em;
    color: var(--color-bbc-blue);
    text-transform: uppercase;
  }
  .partners-title {
    margin-top: calc(var(--spacing) * 2);
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-white);
    @media (width >= 48rem) {
      font-size: var(--text-4xl);
      line-height: var(--tw-leading, var(--text-4xl--line-height));
    }
  }
  .partners-lead {
    margin-top: calc(var(--spacing) * 2);
    max-width: var(--container-xl);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
    color: color-mix(in srgb, #fff 65%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 65%, transparent);
    }
    @media (width >= 48rem) {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
    }
  }
  .partners-hero-aside {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: calc(var(--spacing) * 3);
  }
  .partners-hero-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: flex-end;
    gap: calc(var(--spacing) * 6);
  }
  .partners-hero-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
  .partners-count {
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    color: var(--color-white);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
  }
  .partners-count-label {
    margin-top: calc(var(--spacing) * -2);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: 0.2em;
    letter-spacing: 0.2em;
    color: color-mix(in srgb, #fff 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 50%, transparent);
    }
    text-transform: uppercase;
  }
  .partners-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: calc(var(--spacing) * 2);
  }
  .tombola-section {
    margin-bottom: calc(var(--spacing) * 10);
  }
  .tombola-section-head {
    margin-bottom: calc(var(--spacing) * 4);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 3);
  }
  .tombola-section-title {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-white);
  }
  .tombola-prize-list {
    :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)));
    }
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .tombola-prize-row {
    display: grid;
    align-items: center;
    column-gap: calc(var(--spacing) * 3);
    row-gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    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);
    }
    background-color: color-mix(in srgb, #fff 4%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 4%, transparent);
    }
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    --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,);
    grid-template-columns: auto 3.5rem minmax(0, 1fr) auto auto;
  }
  .tombola-prize-row--draw {
    grid-template-columns: 3.5rem minmax(0, 1fr) auto;
    align-items: start;
  }
  .tombola-prize-body {
    min-width: calc(var(--spacing) * 0);
  }
  @media (max-width: 900px) {
    .tombola-prize-row {
      grid-template-columns: auto 3.5rem minmax(0, 1fr) auto;
    }
    .tombola-prize-actions {
      grid-column: 1 / -1;
      justify-content: flex-end;
    }
    .tombola-prize-row--draw {
      grid-template-columns: 3.5rem minmax(0, 1fr) auto;
    }
  }
  @media (max-width: 480px) {
    .tombola-prize-row {
      grid-template-columns: auto 3rem minmax(0, 1fr);
    }
    .tombola-prize-value {
      grid-column: 3;
      justify-self: start;
    }
    .tombola-prize-actions {
      grid-column: 1 / -1;
      justify-content: flex-start;
    }
    .tombola-prize-row--draw {
      grid-template-columns: 3rem minmax(0, 1fr);
    }
    .tombola-prize-row--draw .tombola-prize-value {
      grid-column: 2;
    }
  }
  .tombola-prize-logo {
    display: flex;
    height: calc(var(--spacing) * 14);
    width: calc(var(--spacing) * 14);
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 1.5);
    aspect-ratio: 1 / 1;
  }
  .tombola-prize-logo img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    aspect-ratio: 1 / 1;
  }
  .tombola-prize-logo span {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-navy);
  }
  .tombola-prize-order {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 1);
  }
  .tombola-prize-move {
    display: inline-flex;
    height: calc(var(--spacing) * 8);
    width: calc(var(--spacing) * 8);
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: color-mix(in srgb, #fff 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 15%, transparent);
    }
    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);
    }
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-leading: 1;
    line-height: 1;
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    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);
    }
    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));
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-bbc-blue);
      }
    }
    &: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 {
      @media (hover: hover) {
        color: var(--color-white);
      }
    }
    &:disabled {
      cursor: not-allowed;
    }
    &:disabled {
      opacity: 30%;
    }
    &:disabled {
      &:hover {
        @media (hover: hover) {
          border-color: color-mix(in srgb, #fff 15%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            border-color: color-mix(in oklab, var(--color-white) 15%, transparent);
          }
        }
      }
    }
    &:disabled {
      &: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);
          }
        }
      }
    }
    &:disabled {
      &:hover {
        @media (hover: hover) {
          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);
          }
        }
      }
    }
  }
  .tombola-prize-label {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
  }
  .tombola-prize-partner {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: color-mix(in srgb, #fff 55%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 55%, transparent);
    }
  }
  .tombola-prize-winner {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-bbc-orange);
  }
  .tombola-prize-winner.is-pending, .tombola-prize-winner-pending {
    margin-top: calc(var(--spacing) * 1);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: color-mix(in srgb, #fff 45%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 45%, transparent);
    }
  }
  .tombola-prize-winner-contact {
    margin-top: calc(var(--spacing) * 0.5);
    display: block;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    color: color-mix(in srgb, #fff 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 50%, transparent);
    }
  }
  .tombola-prize-winner-edit {
    margin-top: calc(var(--spacing) * 1);
  }
  .tombola-prize-winner-display {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: calc(var(--spacing) * 3);
    row-gap: calc(var(--spacing) * 1);
  }
  .tombola-prize-winner-display .tombola-prize-winner {
    margin-top: calc(var(--spacing) * 0);
  }
  .tombola-prize-winner-edit-btn {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    color: var(--color-bbc-blue);
    text-transform: uppercase;
    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));
    &:hover {
      @media (hover: hover) {
        color: var(--color-white);
      }
    }
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
  }
  .tombola-prize-winner-flash {
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--color-emerald-300);
  }
  .tombola-prize-winner-form {
    margin-top: calc(var(--spacing) * 2);
    :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)));
    }
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: color-mix(in srgb, #fff 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 15%, transparent);
    }
    background-color: color-mix(in srgb, #fff 3%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 3%, transparent);
    }
    padding: calc(var(--spacing) * 3);
  }
  .tombola-prize-winner-fields {
    display: grid;
    gap: calc(var(--spacing) * 2);
    @media (width >= 40rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .tombola-prize-winner-field {
    :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)));
    }
  }
  .tombola-prize-winner-label {
    display: block;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
    color: color-mix(in srgb, #fff 55%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 55%, transparent);
    }
    text-transform: uppercase;
  }
  .tombola-prize-winner-hint {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    --tw-tracking: var(--tracking-normal);
    letter-spacing: var(--tracking-normal);
    color: color-mix(in srgb, #fff 35%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 35%, transparent);
    }
    text-transform: none;
  }
  .tombola-prize-winner-input {
    width: 100%;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: color-mix(in srgb, #fff 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 15%, transparent);
    }
    background-color: color-mix(in srgb, #0C2C4A 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-navy) 40%, transparent);
    }
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-white);
    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));
    --tw-outline-style: none;
    outline-style: none;
    &:focus {
      border-color: var(--color-bbc-blue);
    }
  }
  .tombola-prize-winner-input.is-invalid {
    border-color: color-mix(in srgb, oklch(70.4% 0.191 22.216) 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-red-400) 70%, transparent);
    }
  }
  .tombola-prize-winner-error {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-red-300);
  }
  .tombola-prize-winner-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .tombola-prize-winner-note {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: color-mix(in srgb, #fff 45%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 45%, transparent);
    }
  }
  .tombola-prize-value {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-bbc-orange);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    white-space: nowrap;
  }
  .tombola-prize-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .tombola-empty {
    margin-top: calc(var(--spacing) * 0);
  }
  .partners-grid {
    display: grid;
    gap: calc(var(--spacing) * 4);
    @media (width >= 40rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    @media (width >= 48rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .partner-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    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);
    }
    background-color: color-mix(in srgb, #fff 4%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 4%, transparent);
    }
    --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: border-color 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
  }
  .partner-card:hover {
    border-color: color-mix(in srgb, #27A2F6 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-bbc-blue) 40%, transparent);
    }
    background-color: color-mix(in srgb, #fff 7.000000000000001%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 7.000000000000001%, transparent);
    }
    transform: translateY(-2px);
  }
  .partner-card-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: color-mix(in srgb, #fff 95%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 95%, transparent);
    }
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 5);
  }
  .partner-card-logo img {
    height: calc(var(--spacing) * 24);
    width: calc(var(--spacing) * 24);
    border-radius: calc(infinity * 1px);
    background-color: var(--color-white);
    object-fit: contain;
    padding: calc(var(--spacing) * 1.5);
    --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);
    --tw-ring-color: color-mix(in srgb, #0C2C4A 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--color-navy) 10%, transparent);
    }
    aspect-ratio: 1 / 1;
  }
  .partner-logo-preview {
    height: calc(var(--spacing) * 16);
    width: calc(var(--spacing) * 16);
    border-radius: calc(infinity * 1px);
    background-color: var(--color-white);
    object-fit: contain;
    padding: calc(var(--spacing) * 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);
    --tw-ring-color: color-mix(in srgb, #0C2C4A 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--color-navy) 10%, transparent);
    }
    aspect-ratio: 1 / 1;
  }
  .partner-card-initials {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
    --tw-tracking: 0.2em;
    letter-spacing: 0.2em;
    color: color-mix(in srgb, #0C2C4A 35%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-navy) 35%, transparent);
    }
  }
  .partner-card-body {
    flex: 1;
    padding-inline: calc(var(--spacing) * 5);
    padding-top: calc(var(--spacing) * 4);
  }
  .partner-card-name {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
  }
  .partner-card-url {
    margin-top: calc(var(--spacing) * 1);
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-bbc-blue);
    text-decoration-line: none;
    &:hover {
      @media (hover: hover) {
        text-decoration-line: underline;
      }
    }
  }
  .partner-card-url.is-empty {
    color: color-mix(in srgb, #fff 35%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 35%, transparent);
    }
  }
  .partner-card-actions {
    margin-top: calc(var(--spacing) * 4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 2);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    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);
    }
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 3);
  }
  .partner-card-delete {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: color-mix(in srgb, oklch(80.8% 0.114 19.571) 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-red-300) 90%, transparent);
    }
    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));
    &:hover {
      @media (hover: hover) {
        color: var(--color-red-200);
      }
    }
  }
  .partners-empty {
    border-radius: var(--radius-3xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    --tw-border-style: dashed;
    border-style: dashed;
    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);
    }
    background-color: color-mix(in srgb, #fff 3%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 3%, transparent);
    }
    padding-inline: calc(var(--spacing) * 8);
    padding-block: calc(var(--spacing) * 16);
    text-align: center;
  }
  .partners-empty-title {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
  }
  .partners-empty-lead {
    margin-inline: auto;
    margin-top: calc(var(--spacing) * 2);
    max-width: var(--container-md);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: color-mix(in srgb, #fff 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 60%, transparent);
    }
  }
  .partners-empty .btn-primary {
    margin-top: calc(var(--spacing) * 6);
  }
  @media (max-width: 767px) {
    .tv-frame {
      padding: calc(var(--spacing) * 3);
    }
    .standings-frame {
      padding-inline: calc(var(--spacing) * 3);
      padding-block: calc(var(--spacing) * 4);
    }
    .standings-masthead-bar {
      flex-direction: column;
      align-items: stretch;
      gap: calc(var(--spacing) * 3);
    }
    .standings-masthead-aside {
      align-items: flex-start;
    }
    .standings-masthead-title {
      font-size: var(--text-xl);
      line-height: var(--tw-leading, var(--text-xl--line-height));
    }
    .tv-tombola-card {
      grid-template-columns: 3.5rem 1fr;
      grid-template-rows: auto auto;
      gap: 0.55rem 0.75rem;
      text-align: left;
    }
    .tv-tombola-logo {
      width: 3.25rem;
      height: 3.25rem;
      grid-row: 1 / span 2;
    }
    .tv-tombola-value {
      grid-column: 2;
      justify-self: start;
    }
    .tv-tombola-grid {
      grid-template-columns: 1fr;
    }
    .bracket-arena {
      --bracket-card-w: min(100%, 17rem);
      gap: 0.65rem;
    }
    .bracket-arena-row, .bracket-arena-spine {
      gap: 0.75rem;
    }
    .bracket-arena-row.is-quarters.is-tone-idle {
      gap: 0.75rem;
    }
    .bracket-sheet {
      padding: 0.9rem 0.7rem 1.1rem;
    }
    .public-bracket-board {
      margin-inline: -0.25rem;
      padding-inline: 0.25rem;
      -webkit-overflow-scrolling: touch;
    }
    .champions-board {
      padding-inline: calc(var(--spacing) * 2);
      padding-top: calc(var(--spacing) * 4);
      padding-bottom: calc(var(--spacing) * 8);
    }
    .champions-board-title {
      font-size: var(--text-3xl);
      line-height: var(--tw-leading, var(--text-3xl--line-height));
    }
    .champions-podium {
      padding-inline: calc(var(--spacing) * 4);
      padding-block: calc(var(--spacing) * 8);
    }
    .partner-slide-disc {
      height: 5.5rem;
      width: 5.5rem;
    }
    .partner-slide-viewport {
      max-width: calc((4 * 5.5rem) + (3 * 1rem));
    }
    .partner-slide-track {
      gap: calc(var(--spacing) * 4);
    }
    .hall-stage .team-label-court .team-label-names {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }
    .hall-stage .score-zone-value {
      font-size: var(--text-lg);
      line-height: var(--tw-leading, var(--text-lg--line-height));
    }
  }
}
.live-presence-chart {
  display: flex;
  align-items: flex-end;
  gap: 0.2rem;
  min-height: 3.5rem;
  padding: 0.35rem 0;
}
.live-presence-chart--dense {
  gap: 0.1rem;
  overflow-x: auto;
}
.live-presence-chart--dense .live-presence-bar {
  min-width: 0.2rem;
  max-width: 0.45rem;
}
.live-presence-bar {
  flex: 1 1 0;
  min-width: 0.35rem;
  max-width: 0.85rem;
  border-radius: 0.2rem 0.2rem 0 0;
  background: color-mix(in srgb, #38bdf8 75%, transparent);
}
.live-presence-day {
  border: 1px solid color-mix(in srgb, #fff 18%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, #0f172a 55%, transparent);
  color: color-mix(in srgb, #fff 78%, transparent);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.4rem 0.7rem;
  cursor: pointer;
}
.live-presence-day:hover {
  border-color: color-mix(in srgb, #38bdf8 55%, transparent);
  color: #fff;
}
.live-presence-day.is-active {
  border-color: color-mix(in srgb, #38bdf8 70%, transparent);
  background: color-mix(in srgb, #0284c7 45%, transparent);
  color: #fff;
}
@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-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@property --tw-ordinal {
  syntax: "*";
  inherits: false;
}
@property --tw-slashed-zero {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-figure {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 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-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@property --tw-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-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}
@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-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%;
}
@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-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-font-weight: initial;
      --tw-tracking: initial;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-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-leading: initial;
      --tw-duration: initial;
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --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%;
    }
  }
}