/* GENERATED by scripts/build-css.js from assets/csg-components.css, assets/csg-utilities.css, assets/brand.css. Do not edit this file: edit a source, then run the script. */
/* ===== assets/csg-components.css ===== */
/*
 * csg-components.css — the small component layer used by CSG pages.
 *
 * This replaces the 948 KB DaisyUI bundle. Keep spacing, colour and layout
 * utilities in csg-utilities.css; this file only supplies the components
 * that occur in the site's static HTML.
 */

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.5rem 1rem;
    border: 1px solid transparent;
    border-radius: var(--radius-field, 0.375rem);
    background: var(--brand-primary, #15803d);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}
.btn:hover { opacity: 0.9; }
.btn:focus-visible {
    outline: 2px solid var(--brand-accent, #155e75);
    outline-offset: 2px;
}
.btn:disabled,
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn-outline { background: transparent; border-color: currentColor; }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-sm { min-height: 2rem; padding: 0.35rem 0.75rem; font-size: 0.75rem; }
.btn-md { min-height: 2.75rem; }
.btn-lg { min-height: 3.5rem; padding: 0.75rem 1.5rem; font-size: 1.125rem; }

/* Status labels */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-height: 1.5rem;
    padding: 0 0.625rem;
    border-radius: 0.375rem;
    background: #e5e7eb;
    color: #374151;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}

/* Form controls */
.input,
.select,
.textarea {
    display: inline-flex;
    width: auto;
    max-width: 100%;
    border: 1px solid #9ca3af;
    border-radius: var(--radius-field, 0.375rem);
    background: #fff;
    color: inherit;
    font: inherit;
}
.input,
.select { min-height: 2.75rem; align-items: center; padding: 0.5rem 0.75rem; }
.select { padding-right: 2rem; }
.textarea { min-height: 7rem; padding: 0.625rem 0.75rem; line-height: 1.5; }
.input-bordered,
.select-bordered,
.textarea-bordered { border-color: #9ca3af; }
.input:focus,
.select:focus,
.textarea:focus {
    border-color: var(--brand-secondary, #6d28d9);
    outline: 2px solid rgba(109, 40, 217, 0.22);
    outline-offset: 1px;
}
.input:disabled,
.select:disabled,
.textarea:disabled { background: #f3f4f6; cursor: not-allowed; opacity: 0.65; }
.form-control { display: flex; flex-direction: column; }
.label-text { display: inline-block; }

/* Tables */
.table { width: 100%; border-collapse: collapse; text-align: left; }
.table th,
.table td { padding: 0.75rem 1rem; vertical-align: top; }
.table-sm th,
.table-sm td { padding: 0.5rem 0.75rem; }
.table-zebra tbody tr:nth-child(even) { background: rgba(0, 0, 0, 0.035); }
.table-toggle.selected { background: var(--brand-secondary, #6d28d9); color: #fff; }

/* FAQ accordions and the older input-radio accordion template */
.collapse {
    display: block;
    visibility: visible !important;
    border-radius: var(--radius-box, 0.5rem);
}
.collapse > input[type="radio"],
.collapse > input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.collapse-title {
    position: relative;
    display: block;
    padding: 1rem 3rem 1rem 1rem;
    cursor: pointer;
}
.collapse-content { display: none; padding: 0 1rem 1rem; }
.collapse > input:checked ~ .collapse-content { display: block; }
.collapse-arrow > .collapse-title::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 1rem;
    width: 0.55rem;
    height: 0.55rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-65%) rotate(45deg);
    transition: transform 0.2s ease;
}
.collapse-arrow > input:checked ~ .collapse-title::after {
    transform: translateY(-35%) rotate(225deg);
}
details.collapse > summary { list-style: none; }
details.collapse > summary::-webkit-details-marker { display: none; }
details.collapse[open] > .collapse-content { display: block; }
details.collapse[open] > summary::after {
    transform: translateY(-35%) rotate(225deg);
}

/* Related cards arrive after the game registry is fetched. Reserve space so
 * the lazy render cannot push visible content around when it completes. */
#similar-games,
#similar-games-grid { min-height: 18rem; }

/* The catalogue and guide pages use this class as a readable content hook. */
.prose { color: #374151; line-height: 1.75; }
.prose h2,
.prose h3 { margin-top: 1.5rem; margin-bottom: 0.75rem; }
.prose p + p,
.prose ul + p,
.prose p + ul { margin-top: 1rem; }
.prose ul { padding-left: 1.5rem; list-style: disc; }

@media (max-width: 639px) {
    .table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ===== assets/csg-utilities.css ===== */
/* Generated from the repository's static class inventory. */
/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji';
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
    monospace;
    --color-red-400: oklch(70.4% 0.191 22.216);
    --color-red-500: oklch(63.7% 0.237 25.331);
    --color-red-800: oklch(44.4% 0.177 26.899);
    --color-green-400: oklch(79.2% 0.209 151.711);
    --color-green-700: oklch(52.7% 0.154 150.069);
    --color-green-800: oklch(44.8% 0.119 151.328);
    --color-gray-50: oklch(98.5% 0.002 247.839);
    --color-gray-100: oklch(96.7% 0.003 264.542);
    --color-gray-200: oklch(92.8% 0.006 264.531);
    --color-gray-300: oklch(87.2% 0.01 258.338);
    --color-gray-400: oklch(70.7% 0.022 261.325);
    --color-gray-500: oklch(55.1% 0.027 264.364);
    --color-gray-600: oklch(44.6% 0.03 256.802);
    --color-gray-700: oklch(37.3% 0.034 259.733);
    --color-gray-800: oklch(27.8% 0.033 256.848);
    --color-white: #fff;
    --spacing: 0.25rem;
    --container-xs: 20rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-lg: 32rem;
    --container-xl: 36rem;
    --container-2xl: 42rem;
    --container-3xl: 48rem;
    --container-4xl: 56rem;
    --container-5xl: 64rem;
    --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;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --tracking-widest: 0.1em;
    --leading-relaxed: 1.625;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji');
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden='until-found'])) {
    display: none !important;
  }
}
@layer utilities {
  .pointer-events-none {
    pointer-events: none;
  }
  .collapse {
    visibility: collapse;
  }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .inset-0 {
    inset: calc(var(--spacing) * 0);
  }
  .top-2 {
    top: calc(var(--spacing) * 2);
  }
  .top-3 {
    top: calc(var(--spacing) * 3);
  }
  .right-0 {
    right: calc(var(--spacing) * 0);
  }
  .right-2 {
    right: calc(var(--spacing) * 2);
  }
  .right-3 {
    right: calc(var(--spacing) * 3);
  }
  .bottom-4 {
    bottom: calc(var(--spacing) * 4);
  }
  .left-0 {
    left: calc(var(--spacing) * 0);
  }
  .left-2 {
    left: calc(var(--spacing) * 2);
  }
  .z-10 {
    z-index: 10;
  }
  .z-50 {
    z-index: 50;
  }
  .mx-1 {
    margin-inline: calc(var(--spacing) * 1);
  }
  .mx-2 {
    margin-inline: calc(var(--spacing) * 2);
  }
  .mx-4 {
    margin-inline: calc(var(--spacing) * 4);
  }
  .mx-auto {
    margin-inline: auto;
  }
  .my-2 {
    margin-block: calc(var(--spacing) * 2);
  }
  .my-3 {
    margin-block: calc(var(--spacing) * 3);
  }
  .my-4 {
    margin-block: calc(var(--spacing) * 4);
  }
  .my-6 {
    margin-block: calc(var(--spacing) * 6);
  }
  .-mt-6 {
    margin-top: calc(var(--spacing) * -6);
  }
  .mt-0 {
    margin-top: calc(var(--spacing) * 0);
  }
  .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-5 {
    margin-top: calc(var(--spacing) * 5);
  }
  .mt-6 {
    margin-top: calc(var(--spacing) * 6);
  }
  .mt-8 {
    margin-top: calc(var(--spacing) * 8);
  }
  .mt-10 {
    margin-top: calc(var(--spacing) * 10);
  }
  .mt-12 {
    margin-top: calc(var(--spacing) * 12);
  }
  .mt-auto {
    margin-top: auto;
  }
  .mr-1 {
    margin-right: calc(var(--spacing) * 1);
  }
  .mr-2 {
    margin-right: calc(var(--spacing) * 2);
  }
  .mb-0 {
    margin-bottom: calc(var(--spacing) * 0);
  }
  .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-5 {
    margin-bottom: calc(var(--spacing) * 5);
  }
  .mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }
  .mb-7 {
    margin-bottom: calc(var(--spacing) * 7);
  }
  .mb-8 {
    margin-bottom: calc(var(--spacing) * 8);
  }
  .mb-12 {
    margin-bottom: calc(var(--spacing) * 12);
  }
  .ml-2 {
    margin-left: calc(var(--spacing) * 2);
  }
  .ml-3 {
    margin-left: calc(var(--spacing) * 3);
  }
  .ml-6 {
    margin-left: calc(var(--spacing) * 6);
  }
  .block {
    display: block;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline-block {
    display: inline-block;
  }
  .inline-flex {
    display: inline-flex;
  }
  .inline-grid {
    display: inline-grid;
  }
  .table {
    display: table;
  }
  .h-2 {
    height: calc(var(--spacing) * 2);
  }
  .h-3 {
    height: calc(var(--spacing) * 3);
  }
  .h-4 {
    height: calc(var(--spacing) * 4);
  }
  .h-5 {
    height: calc(var(--spacing) * 5);
  }
  .h-6 {
    height: calc(var(--spacing) * 6);
  }
  .h-7 {
    height: calc(var(--spacing) * 7);
  }
  .h-8 {
    height: calc(var(--spacing) * 8);
  }
  .h-10 {
    height: calc(var(--spacing) * 10);
  }
  .h-12 {
    height: calc(var(--spacing) * 12);
  }
  .h-14 {
    height: calc(var(--spacing) * 14);
  }
  .h-16 {
    height: calc(var(--spacing) * 16);
  }
  .h-20 {
    height: calc(var(--spacing) * 20);
  }
  .h-24 {
    height: calc(var(--spacing) * 24);
  }
  .h-40 {
    height: calc(var(--spacing) * 40);
  }
  .h-full {
    height: 100%;
  }
  .min-h-16 {
    min-height: calc(var(--spacing) * 16);
  }
  .min-h-screen {
    min-height: 100vh;
  }
  .w-3 {
    width: calc(var(--spacing) * 3);
  }
  .w-4 {
    width: calc(var(--spacing) * 4);
  }
  .w-5 {
    width: calc(var(--spacing) * 5);
  }
  .w-5\/12 {
    width: calc(5 / 12 * 100%);
  }
  .w-6 {
    width: calc(var(--spacing) * 6);
  }
  .w-8 {
    width: calc(var(--spacing) * 8);
  }
  .w-10 {
    width: calc(var(--spacing) * 10);
  }
  .w-12 {
    width: calc(var(--spacing) * 12);
  }
  .w-14 {
    width: calc(var(--spacing) * 14);
  }
  .w-16 {
    width: calc(var(--spacing) * 16);
  }
  .w-20 {
    width: calc(var(--spacing) * 20);
  }
  .w-24 {
    width: calc(var(--spacing) * 24);
  }
  .w-32 {
    width: calc(var(--spacing) * 32);
  }
  .w-40 {
    width: calc(var(--spacing) * 40);
  }
  .w-48 {
    width: calc(var(--spacing) * 48);
  }
  .w-64 {
    width: calc(var(--spacing) * 64);
  }
  .w-full {
    width: 100%;
  }
  .max-w-2xl {
    max-width: var(--container-2xl);
  }
  .max-w-3xl {
    max-width: var(--container-3xl);
  }
  .max-w-4xl {
    max-width: var(--container-4xl);
  }
  .max-w-5xl {
    max-width: var(--container-5xl);
  }
  .max-w-6xl {
    max-width: var(--container-6xl);
  }
  .max-w-\[160px\] {
    max-width: 160px;
  }
  .max-w-lg {
    max-width: var(--container-lg);
  }
  .max-w-md {
    max-width: var(--container-md);
  }
  .max-w-none {
    max-width: none;
  }
  .max-w-sm {
    max-width: var(--container-sm);
  }
  .max-w-xl {
    max-width: var(--container-xl);
  }
  .max-w-xs {
    max-width: var(--container-xs);
  }
  .min-w-max {
    min-width: max-content;
  }
  .flex-1 {
    flex: 1;
  }
  .flex-none {
    flex: none;
  }
  .flex-shrink-0 {
    flex-shrink: 0;
  }
  .flex-grow {
    flex-grow: 1;
  }
  .border-collapse {
    border-collapse: collapse;
  }
  .-rotate-1 {
    rotate: calc(1deg * -1);
  }
  .-rotate-2 {
    rotate: calc(2deg * -1);
  }
  .-rotate-90 {
    rotate: calc(90deg * -1);
  }
  .rotate-1 {
    rotate: 1deg;
  }
  .rotate-2 {
    rotate: 2deg;
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .cursor-not-allowed {
    cursor: not-allowed;
  }
  .cursor-pointer {
    cursor: pointer;
  }
  .list-inside {
    list-style-position: inside;
  }
  .list-decimal {
    list-style-type: decimal;
  }
  .list-disc {
    list-style-type: disc;
  }
  .list-none {
    list-style-type: none;
  }
  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .items-center {
    align-items: center;
  }
  .items-start {
    align-items: flex-start;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .justify-start {
    justify-content: flex-start;
  }
  .gap-0 {
    gap: calc(var(--spacing) * 0);
  }
  .gap-0\.5 {
    gap: calc(var(--spacing) * 0.5);
  }
  .gap-1 {
    gap: calc(var(--spacing) * 1);
  }
  .gap-1\.5 {
    gap: calc(var(--spacing) * 1.5);
  }
  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }
  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  .gap-5 {
    gap: calc(var(--spacing) * 5);
  }
  .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-5 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-6 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-8 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .self-center {
    align-self: center;
  }
  .self-end {
    align-self: flex-end;
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .overflow-x-auto {
    overflow-x: auto;
  }
  .rounded {
    border-radius: 0.25rem;
  }
  .rounded-2xl {
    border-radius: var(--radius-2xl);
  }
  .rounded-full {
    border-radius: calc(infinity * 1px);
  }
  .rounded-lg {
    border-radius: var(--radius-lg);
  }
  .rounded-xl {
    border-radius: var(--radius-xl);
  }
  .rounded-l {
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
  }
  .rounded-r {
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px;
  }
  .border-3 {
    border-style: var(--tw-border-style);
    border-width: 3px;
  }
  .border-4 {
    border-style: var(--tw-border-style);
    border-width: 4px;
  }
  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  .border-dashed {
    --tw-border-style: dashed;
    border-style: dashed;
  }
  .border-gray-100 {
    border-color: var(--color-gray-100);
  }
  .border-gray-200 {
    border-color: var(--color-gray-200);
  }
  .border-gray-300 {
    border-color: var(--color-gray-300);
  }
  .bg-gray-50 {
    background-color: var(--color-gray-50);
  }
  .bg-gray-200 {
    background-color: var(--color-gray-200);
  }
  .bg-gray-300 {
    background-color: var(--color-gray-300);
  }
  .bg-white {
    background-color: var(--color-white);
  }
  .p-2 {
    padding: calc(var(--spacing) * 2);
  }
  .p-3 {
    padding: calc(var(--spacing) * 3);
  }
  .p-4 {
    padding: calc(var(--spacing) * 4);
  }
  .p-5 {
    padding: calc(var(--spacing) * 5);
  }
  .p-6 {
    padding: calc(var(--spacing) * 6);
  }
  .p-8 {
    padding: calc(var(--spacing) * 8);
  }
  .px-1 {
    padding-inline: calc(var(--spacing) * 1);
  }
  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }
  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }
  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }
  .px-5 {
    padding-inline: calc(var(--spacing) * 5);
  }
  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }
  .px-7 {
    padding-inline: calc(var(--spacing) * 7);
  }
  .px-8 {
    padding-inline: calc(var(--spacing) * 8);
  }
  .px-10 {
    padding-inline: calc(var(--spacing) * 10);
  }
  .py-0\.5 {
    padding-block: calc(var(--spacing) * 0.5);
  }
  .py-1 {
    padding-block: calc(var(--spacing) * 1);
  }
  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }
  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }
  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }
  .py-5 {
    padding-block: calc(var(--spacing) * 5);
  }
  .py-6 {
    padding-block: calc(var(--spacing) * 6);
  }
  .py-8 {
    padding-block: calc(var(--spacing) * 8);
  }
  .py-10 {
    padding-block: calc(var(--spacing) * 10);
  }
  .py-12 {
    padding-block: calc(var(--spacing) * 12);
  }
  .py-14 {
    padding-block: calc(var(--spacing) * 14);
  }
  .py-16 {
    padding-block: calc(var(--spacing) * 16);
  }
  .pt-1 {
    padding-top: calc(var(--spacing) * 1);
  }
  .pb-2 {
    padding-bottom: calc(var(--spacing) * 2);
  }
  .pb-3 {
    padding-bottom: calc(var(--spacing) * 3);
  }
  .pb-4 {
    padding-bottom: calc(var(--spacing) * 4);
  }
  .pb-8 {
    padding-bottom: calc(var(--spacing) * 8);
  }
  .pl-6 {
    padding-left: calc(var(--spacing) * 6);
  }
  .text-center {
    text-align: center;
  }
  .text-left {
    text-align: left;
  }
  .text-right {
    text-align: right;
  }
  .font-mono {
    font-family: var(--font-mono);
  }
  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }
  .text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }
  .text-4xl {
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
  }
  .text-5xl {
    font-size: var(--text-5xl);
    line-height: var(--tw-leading, var(--text-5xl--line-height));
  }
  .text-6xl {
    font-size: var(--text-6xl);
    line-height: var(--tw-leading, var(--text-6xl--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));
  }
  .leading-relaxed {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }
  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .font-normal {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
  }
  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .tracking-wide {
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
  }
  .tracking-wider {
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
  }
  .tracking-widest {
    --tw-tracking: var(--tracking-widest);
    letter-spacing: var(--tracking-widest);
  }
  .whitespace-nowrap {
    white-space: nowrap;
  }
  .text-gray-300 {
    color: var(--color-gray-300);
  }
  .text-gray-400 {
    color: var(--color-gray-400);
  }
  .text-gray-500 {
    color: var(--color-gray-500);
  }
  .text-gray-600 {
    color: var(--color-gray-600);
  }
  .text-gray-700 {
    color: var(--color-gray-700);
  }
  .text-gray-800 {
    color: var(--color-gray-800);
  }
  .text-green-400 {
    color: var(--color-green-400);
  }
  .text-green-700 {
    color: var(--color-green-700);
  }
  .text-green-800 {
    color: var(--color-green-800);
  }
  .text-red-400 {
    color: var(--color-red-400);
  }
  .text-red-500 {
    color: var(--color-red-500);
  }
  .text-red-800 {
    color: var(--color-red-800);
  }
  .text-white {
    color: var(--color-white);
  }
  .uppercase {
    text-transform: uppercase;
  }
  .underline {
    text-decoration-line: underline;
  }
  .opacity-40 {
    opacity: 40%;
  }
  .opacity-50 {
    opacity: 50%;
  }
  .opacity-60 {
    opacity: 60%;
  }
  .opacity-70 {
    opacity: 70%;
  }
  .opacity-80 {
    opacity: 80%;
  }
  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-2xl {
    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-lg {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-md {
    --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);
  }
  .shadow-sm {
    --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);
  }
  .transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-shadow {
    transition-property: box-shadow;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .duration-100 {
    --tw-duration: 100ms;
    transition-duration: 100ms;
  }
  .hover\:bg-gray-100 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-100);
      }
    }
  }
  .hover\:text-white {
    &:hover {
      @media (hover: hover) {
        color: var(--color-white);
      }
    }
  }
  .hover\:underline {
    &:hover {
      @media (hover: hover) {
        text-decoration-line: underline;
      }
    }
  }
  .hover\:shadow-lg {
    &:hover {
      @media (hover: hover) {
        --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);
      }
    }
  }
  .hover\:shadow-md {
    &:hover {
      @media (hover: hover) {
        --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);
      }
    }
  }
  .focus\:not-sr-only {
    &:focus {
      position: static;
      width: auto;
      height: auto;
      padding: 0;
      margin: 0;
      overflow: visible;
      clip-path: none;
      white-space: normal;
    }
  }
  .focus\:absolute {
    &:focus {
      position: absolute;
    }
  }
  .focus\:top-2 {
    &:focus {
      top: calc(var(--spacing) * 2);
    }
  }
  .focus\:left-2 {
    &:focus {
      left: calc(var(--spacing) * 2);
    }
  }
  .focus\:z-50 {
    &:focus {
      z-index: 50;
    }
  }
  .focus\:rounded {
    &:focus {
      border-radius: 0.25rem;
    }
  }
  .focus\:bg-white {
    &:focus {
      background-color: var(--color-white);
    }
  }
  .focus\:px-4 {
    &:focus {
      padding-inline: calc(var(--spacing) * 4);
    }
  }
  .focus\:py-2 {
    &:focus {
      padding-block: calc(var(--spacing) * 2);
    }
  }
  .focus\:shadow-lg {
    &:focus {
      --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);
    }
  }
  .sm\:block {
    @media (width >= 40rem) {
      display: block;
    }
  }
  .sm\:h-12 {
    @media (width >= 40rem) {
      height: calc(var(--spacing) * 12);
    }
  }
  .sm\:w-12 {
    @media (width >= 40rem) {
      width: calc(var(--spacing) * 12);
    }
  }
  .sm\:w-72 {
    @media (width >= 40rem) {
      width: calc(var(--spacing) * 72);
    }
  }
  .sm\:grid-cols-2 {
    @media (width >= 40rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .sm\:grid-cols-3 {
    @media (width >= 40rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .sm\:grid-cols-4 {
    @media (width >= 40rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .sm\:grid-cols-10 {
    @media (width >= 40rem) {
      grid-template-columns: repeat(10, minmax(0, 1fr));
    }
  }
  .sm\:flex-row {
    @media (width >= 40rem) {
      flex-direction: row;
    }
  }
  .sm\:p-6 {
    @media (width >= 40rem) {
      padding: calc(var(--spacing) * 6);
    }
  }
  .sm\:text-4xl {
    @media (width >= 40rem) {
      font-size: var(--text-4xl);
      line-height: var(--tw-leading, var(--text-4xl--line-height));
    }
  }
  .sm\:text-base {
    @media (width >= 40rem) {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
    }
  }
  .md\:block {
    @media (width >= 48rem) {
      display: block;
    }
  }
  .md\:grid-cols-2 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .md\:grid-cols-3 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .md\:grid-cols-4 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .md\:flex-row {
    @media (width >= 48rem) {
      flex-direction: row;
    }
  }
  .md\:items-center {
    @media (width >= 48rem) {
      align-items: center;
    }
  }
  .md\:gap-2 {
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 2);
    }
  }
  .md\:gap-3 {
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 3);
    }
  }
  .md\:gap-6 {
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 6);
    }
  }
  .md\:p-6 {
    @media (width >= 48rem) {
      padding: calc(var(--spacing) * 6);
    }
  }
  .md\:p-8 {
    @media (width >= 48rem) {
      padding: calc(var(--spacing) * 8);
    }
  }
  .md\:py-14 {
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 14);
    }
  }
  .md\:py-20 {
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 20);
    }
  }
  .md\:py-24 {
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 24);
    }
  }
  .md\:text-2xl {
    @media (width >= 48rem) {
      font-size: var(--text-2xl);
      line-height: var(--tw-leading, var(--text-2xl--line-height));
    }
  }
  .md\:text-3xl {
    @media (width >= 48rem) {
      font-size: var(--text-3xl);
      line-height: var(--tw-leading, var(--text-3xl--line-height));
    }
  }
  .md\:text-4xl {
    @media (width >= 48rem) {
      font-size: var(--text-4xl);
      line-height: var(--tw-leading, var(--text-4xl--line-height));
    }
  }
  .md\:text-5xl {
    @media (width >= 48rem) {
      font-size: var(--text-5xl);
      line-height: var(--tw-leading, var(--text-5xl--line-height));
    }
  }
  .md\:text-6xl {
    @media (width >= 48rem) {
      font-size: var(--text-6xl);
      line-height: var(--tw-leading, var(--text-6xl--line-height));
    }
  }
  .md\:text-base {
    @media (width >= 48rem) {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
    }
  }
  .md\:text-lg {
    @media (width >= 48rem) {
      font-size: var(--text-lg);
      line-height: var(--tw-leading, var(--text-lg--line-height));
    }
  }
  .md\:text-xl {
    @media (width >= 48rem) {
      font-size: var(--text-xl);
      line-height: var(--tw-leading, var(--text-xl--line-height));
    }
  }
  .lg\:grid-cols-2 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .lg\:grid-cols-3 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
}
@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-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-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-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-duration: initial;
    }
  }
}

/* ===== assets/brand.css ===== */
/**
 * brand.css — Shared styles for all Crazy Science Games pages.
 * Include this on every page AFTER the local component and utility stylesheets.
 *
 * Contains:
 *   1. CSS custom properties (brand colours)
 *   2. Base typography (Inter body, Poppins headings)
 *   3. Blog content enhancement boxes (tip, classroom, example)
 *   4. H2 section icons for game page blog sections
 */

/* ================================
   1. BRAND COLOUR TOKENS
   ================================ */
:root {
    /* Darker brand shades keep white labels and links WCAG AA readable. */
    --brand-primary: #15803D;
    --brand-secondary: #6D28D9;
    --brand-accent: #155E75;
    --brand-bg: #FAFAFA;
    --brand-dark: #0F172A;
    --csg-warm: #B45309;
    /* The same two brands, lightened until body-size text passes WCAG AA on the
       darkest play-area panels. Games that force a dark game
       container use these for text; backgrounds keep the darker shades, which
       is what carries white labels on a white page. */
    --brand-primary-on-dark: #4ADE80;
    --brand-accent-on-dark: #22D3EE;
}

/*
 * Critical fallbacks for the short interval before the shared styles have
 * loaded. These keep the accessible skip link
 * hidden and stop the compact logo SVG falling back to its intrinsic size.
 * The matching inline rules in each page head cover the first paint while
 * this shared stylesheet is still downloading.
 */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.sr-only:focus {
    position: fixed;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 50;
    width: auto;
    height: auto;
    padding: 0.5rem 1rem;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    background: #fff;
    border-radius: 0.25rem;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}
svg.w-8.h-8 {
    width: 2rem;
    height: 2rem;
}

/* ================================
   2. SELF-HOSTED FONTS
   Eliminates 2 external origins (fonts.googleapis.com + fonts.gstatic.com)
   ================================ */
/* Metric-matched fallbacks (values from the fontaine project). While the
   webfont downloads, Arial is scaled to the same width and line height, so the
   swap causes no layout shift. This targets the p95 CLS seen in Umami. */
@font-face {
    font-family: 'Poppins Fallback';
    src: local('Arial');
    size-adjust: 112.16%;
    ascent-override: 92.69%;
    descent-override: 30.90%;
    line-gap-override: 8.79%;
}
@font-face {
    font-family: 'Inter Fallback';
    src: local('Arial');
    size-adjust: 107.12%;
    ascent-override: 90.44%;
    descent-override: 22.52%;
    line-gap-override: 0%;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/inter-latin.woff2?v=20260823-2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/inter-latin.woff2?v=20260823-2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/poppins-600-latin.woff2?v=20260823-2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/poppins-700-latin.woff2?v=20260823-2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ================================
   3. BASE TYPOGRAPHY
   ================================ */
body {
    font-family: 'Inter', 'Inter Fallback', sans-serif;
    background-color: var(--brand-bg);
    color: #333;
}
.text-gray-500 { color: #56606E; }
.text-gray-600 { color: #4B5563; }
h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', 'Poppins Fallback', sans-serif;
    font-weight: 600;
}

/* ================================
   3. BLOG CONTENT BOXES
   ================================ */

/* Tip box — green pill label */
.tip-box {
    position: relative;
    background: rgba(34, 197, 94, 0.04);
    border: 1px solid rgba(34, 197, 94, 0.15);
    padding: 1.75rem 1.25rem 1rem;
    border-radius: 0.75rem;
    margin: 1.75rem 0 1rem;
}
.tip-box::before {
    content: "\1F4A1  Tip";
    position: absolute;
    top: -0.7rem;
    left: 1rem;
    background: var(--brand-primary);
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.15rem 0.65rem;
    border-radius: 1rem;
    font-family: 'Poppins', 'Poppins Fallback', sans-serif;
}

/* Classroom box — deep-cyan pill label */
.classroom-box {
    position: relative;
    background: rgba(34, 211, 238, 0.04);
    border: 1px solid rgba(34, 211, 238, 0.15);
    padding: 1.75rem 1.25rem 1rem;
    border-radius: 0.75rem;
    margin: 1.75rem 0 1rem;
}
.classroom-box::before {
    content: "\1F3EB  Classroom idea";
    position: absolute;
    top: -0.7rem;
    left: 1rem;
    background: var(--brand-accent);
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.15rem 0.65rem;
    border-radius: 1rem;
    font-family: 'Poppins', 'Poppins Fallback', sans-serif;
}

/* Example box — violet pill label */
.example-box {
    position: relative;
    background: rgba(109, 40, 217, 0.04);
    border: 1px solid rgba(109, 40, 217, 0.12);
    padding: 1.75rem 1.25rem 1rem;
    border-radius: 0.75rem;
    margin: 1.75rem 0 1rem;
}
.example-box::before {
    content: "\1F4D0  Worked example";
    position: absolute;
    top: -0.7rem;
    left: 1rem;
    background: var(--brand-secondary);
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.15rem 0.65rem;
    border-radius: 1rem;
    font-family: 'Poppins', 'Poppins Fallback', sans-serif;
}

/* Section with subtle background tint */
.section-tinted {
    background: rgba(109, 40, 217, 0.03);
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin: 1rem 0;
}

/* ================================
   4. CONTENT PAGES AND WIDGETS
   ================================ */
.csg-page-prose > .csg-content-section { margin: 0 0 2rem; }
.csg-page-prose > .csg-content-section h2 { margin: 0 0 0.8rem; }
.csg-page-prose > .csg-content-section h3 { margin: 1.4rem 0 0.55rem; }
.csg-page-prose p, .csg-page-prose li { line-height: 1.7; }
.csg-page-prose a { color: var(--brand-primary); text-decoration: underline; text-underline-offset: 2px; }
.csg-page-prose ol { list-style: decimal; padding-left: 1.5rem; }
.csg-page-prose ul { list-style: disc; padding-left: 1.5rem; }
/* Links in the dark page hero: white and underlined so they read as links. */
section h1 + p a, section h1 ~ p a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.csg-games-search { max-width: 44rem; margin: 0 auto 1rem; }
.csg-games-search input {
    width: 100%; min-height: 2.75rem; padding: 0.65rem 0.8rem;
    border: 1px solid #64748b; border-radius: 0.5rem; background: #fff; color: #172033;
}
.csg-games-grid {
    position: relative;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: 1rem; min-height: 16rem; align-content: start; margin: 0 0 2rem;
}
.csg-game-card, .csg-sister-card {
    display: block; border: 1px solid #dbe2ea; border-radius: 0.8rem;
    background: #fff; color: var(--brand-dark); box-shadow: 0 2px 8px rgb(15 23 42 / 0.08);
    text-decoration: none !important;
}
.csg-game-card { padding: 0; overflow: hidden; }
.csg-sister-card { padding: 1.2rem; }
.csg-game-card-art { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #e8edf2; }
.csg-game-card-art img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.csg-freshness-badge { position: absolute; right: .5rem; bottom: .5rem; padding: .25rem .55rem; border-radius: 999px; background: #0f172a; color: #fff; font: 600 .75rem/1.2 Inter, system-ui, sans-serif; }
.csg-game-card-body { padding: 1rem; }
.csg-game-card:hover, .csg-sister-card:hover { box-shadow: 0 8px 20px rgb(15 23 42 / 0.14); }
.csg-game-card h3, .csg-sister-card h3 { margin: 0 0 0.5rem; color: var(--brand-secondary); }
.csg-game-topic { margin: 0 0 0.5rem; font-weight: 600; color: var(--brand-accent); }
.csg-game-description, .csg-sister-card p { margin: 0.45rem 0 0; color: #475569; }
.csg-game-meta { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.8rem; }
.csg-game-badge { padding: 0.2rem 0.5rem; border-radius: 0.35rem; background: #e8edf2; color: #273449; font-size: 0.78rem; }
.csg-games-table-wrap { margin: 1.5rem 0 2rem; }
.csg-games-table th, .csg-games-table td { padding: 0.55rem 0.65rem; border-bottom: 1px solid #dbe2ea; text-align: left; }
.csg-games-table th { color: var(--brand-secondary); }
.csg-games-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; margin:0 auto 1rem; max-width:64rem; }
.csg-games-filter-group { display:flex; flex-wrap:wrap; gap:.4rem; }
.csg-games-filter-group button, .csg-games-sort select, .csg-games-empty button {
    min-height:2.65rem; border:1px solid #64748b; border-radius:999px; padding:.45rem .8rem;
    background:#fff; color:var(--brand-secondary); font:600 .9rem/1.2 Inter,system-ui,sans-serif; cursor:pointer;
}
.csg-games-filter-group button.active { background:var(--brand-secondary); color:#fff; border-color:var(--brand-secondary); }
.csg-games-filter-group button:focus-visible, .csg-games-sort select:focus-visible, .csg-games-empty button:focus-visible { outline:3px solid #fbbf24; outline-offset:2px; }
.csg-games-sort { display:flex; align-items:center; gap:.5rem; margin-left:auto; font-weight:600; color:var(--brand-dark); }
.csg-games-sort select { border-radius:.5rem; }
.csg-games-sort select:disabled { opacity:.65; cursor:not-allowed; }
.csg-games-empty[hidden] { display:none !important; }
.csg-games-empty:not([hidden]) {
    position:absolute; z-index:2; inset:0; display:flex; align-items:flex-start; justify-content:center;
    flex-wrap:wrap; gap:.7rem; padding:1rem; border:1px solid #dbe2ea; border-radius:.8rem;
    background:#fff; color:#334155; font-weight:600;
}
.csg-games-empty button { border-color:var(--brand-secondary); color:var(--brand-secondary); }
.csg-team-toggle-slot { display:flex; justify-content:center; min-height:3.25rem; margin:.45rem 0 0; }
.csg-team-toggle {
    box-sizing:border-box; width:min(100%,15rem); min-height:2.75rem; padding:.5rem .75rem;
    border:2px solid #d4d4d8; border-radius:999px; background:#fff; color:#1A1A2E;
    font:600 .85rem/1.2 Inter,system-ui,sans-serif; cursor:pointer;
}
.csg-team-toggle[data-on="true"] { border-color:#004E89; color:#004E89; }
.csg-team-toggle:disabled { opacity:.65; cursor:not-allowed; }
.csg-team-turn {
    display:flex; align-items:center; justify-content:center; box-sizing:border-box; min-height:2.25rem;
    margin:0 0 .5rem; padding:.45rem .75rem; border-radius:.5rem; color:#fff; text-align:center;
    font:600 .9rem/1.2 Poppins,Inter,system-ui,sans-serif; visibility:hidden;
}
.csg-team-turn[data-on="true"] { visibility:visible; }
#game-over[data-csg-team-mode="false"] .csg-team-board { display:none; }
#game-over[data-csg-team-mode="true"] .csg-team-board {
    box-sizing:border-box; min-height:13rem; max-width:22rem; margin:0 auto 1rem; padding:.75rem 1rem;
    border-radius:.75rem; background:#fff; color:#1A1A2E; text-align:left; font:500 .95rem/1.5 Inter,system-ui,sans-serif;
}
.csg-team-board h3 { margin:0 0 .4rem; text-align:center; font:600 1rem/1.3 Poppins,Inter,sans-serif; }
.csg-team-row { display:flex; justify-content:space-between; gap:.5rem; padding:.15rem 0; }
.csg-team-row b { font-variant-numeric:tabular-nums; }
.csg-team-next { margin:.5rem 0 0; text-align:center; font-weight:600; }
.csg-sister-games-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; }
.csg-sister-footer {
    display: flex; width: fit-content; max-width: 100%; flex-wrap: wrap; justify-content: center;
    gap: 0.3rem; padding: 0.8rem 1rem; border: 1px solid rgb(255 255 255 / 0.2);
    border-radius: 0.6rem; color: rgb(255 255 255 / 0.75); font-size: 0.85rem;
}
.csg-sister-footer a { color: #4ADE80; font-weight: 600; text-decoration: underline; }
.csg-faq-list { margin: 2rem 0; }
.csg-faq-item { margin: 0.6rem 0; padding: 0.8rem 1rem; border: 1px solid #dbe2ea; border-radius: 0.6rem; background: #fff; }
.csg-faq-item summary { cursor: pointer; font-weight: 600; color: var(--brand-secondary); }
.csg-widget { margin: 1rem auto 2rem; max-width: 44rem; }
.csg-idea-controls { display: grid; grid-template-columns: minmax(8rem, 0.4fr) minmax(0, 1fr) auto; gap: 0.55rem; }
.csg-idea-controls select, .csg-idea-controls textarea {
    min-width: 0; min-height: 2.75rem; padding: 0.55rem; border: 1px solid #64748b;
    border-radius: 0.45rem; background: #fff; color: #172033; font: inherit;
}
.csg-idea-controls textarea { resize: vertical; }
.csg-idea-controls button {
    min-width: 2.75rem; min-height: 2.75rem; border: 0; border-radius: 0.45rem;
    background: var(--brand-primary); color: #fff; font-size: 1.2rem; cursor: pointer;
}
.csg-idea-status { min-height: 1.4rem; color: var(--brand-primary); font-weight: 700; }
.csg-idea-status.is-error { color: #b91c1c; }
.csg-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; }
@media(max-width: 600px) {
    .csg-idea-controls { grid-template-columns: 1fr auto; }
    .csg-idea-controls select { grid-column: 1 / -1; }
}

/* ================================
   4. H2 SECTION ICONS (game pages)
   ================================ */
h2[id="how-to-play"]::before { content: "\1F3AE "; }
h2[id="science-behind"]::before { content: "\1F4D0 "; }
h2[id="tips"]::before { content: "\1F4A1 "; }
h2[id="classroom"]::before { content: "\1F3EB "; }
h2[id="similar"]::before { content: "\1F3AF "; }
h2[id="faq"]::before { content: "\2753 "; }

/* ================================
   5. MICRO-INTERACTIONS
   ================================ */

/* Smooth scrolling for anchor links */
html { scroll-behavior: smooth; }

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Game card hover — subtle lift */
a[href*="/games/"].block {
    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1),
                box-shadow 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}
a[href*="/games/"].block:hover {
    transform: translateY(-4px);
}
a[href*="/games/"].block:active {
    transform: translateY(-1px);
    transition-duration: 0.1s;
}

/* FAQ accordion — smooth open */
details.collapse {
    transition: box-shadow 0.2s ease;
}
details.collapse[open] {
    box-shadow: 0 4px 16px rgba(109, 40, 217, 0.1);
}

/* Links inside blog content — animated underline */
article a {
    text-decoration: none;
    background-image: linear-gradient(var(--brand-primary), var(--brand-primary));
    background-size: 0% 2px;
    background-position: left bottom;
    background-repeat: no-repeat;
    transition: background-size 0.25s ease;
}
article a:hover {
    background-size: 100% 2px;
}

/* CTA buttons — satisfying press */
.btn {
    transition: transform 0.1s ease, box-shadow 0.15s ease;
}
.btn:active {
    transform: translateY(2px);
}

/* New high score pulse (add .new-record class via JS) */
@keyframes record-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.08); }
    100% { transform: scale(1); }
}
.new-record {
    animation: record-pulse 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Score counter pop (add .score-pop class via JS, remove after animation) */
@keyframes score-pop {
    0% { transform: scale(1); }
    40% { transform: scale(1.3); color: var(--brand-primary); }
    100% { transform: scale(1); }
}
.score-pop {
    animation: score-pop 0.3s ease-out;
}

/* ================================
   7. GAME CARD HARDENING
   ================================ */

/* Clamp card descriptions to 3 lines */
.card-desc {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ================================
   6. SOUND TOGGLE BUTTON IN NAV
   ================================ */
.sound-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: rgba(255,255,255,0.5);
    transition: color 0.2s;
    font-size: 1.1rem;
    line-height: 1;
}
.sound-toggle:hover { color: rgba(255,255,255,0.8); }
.sound-toggle.on { color: var(--brand-accent); }

/* Keep the shared navigation usable on narrow screens. The desktop row
   otherwise clips the final links when the site name and controls compete
   for the same width. */
@media (max-width: 767px) {
    body > nav > div {
        flex-wrap: wrap;
        row-gap: 0.75rem;
    }
    body > nav > div > a:first-child {
        flex: 1 1 100%;
        min-width: 0;
    }
    body > nav > div > div {
        flex: 1 1 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: 0.5rem 0.875rem;
    }
}

/* The component sheet sets a dark colour on .badge, so force white text back on. */
.badge.text-white { color: #fff; }
/* .btn sets display:inline-flex, which beat .hidden on the newer games: Next buttons showed from the start. */
.btn.hidden { display: none !important; }

/* ================================
   7. CONSOLE EASTER EGG
   ================================ */
/* (applied via brand.js) */

/* ================================
   8. SITE NAVIGATION (built by brand.js from the static links)
   Desktop: "Games" stays a link, its chevron opens a topic/level panel on click.
   Mobile (<640px): Games + Daily stay visible, the rest sit under a labelled Menu.
   ================================ */
.csg-nav { position: relative; }
.csg-nav-games { display: inline-flex; align-items: center; }
.csg-nav-chevron { background: none; border: 0; color: #fff; cursor: pointer; padding: .25rem .35rem; min-width: 32px; min-height: 32px; line-height: 1; font-size: .8rem; border-radius: .25rem; }
.csg-nav-chevron:hover, .csg-nav-chevron:focus-visible { background: rgba(255,255,255,.12); outline: 2px solid transparent; }
.csg-nav-chevron[aria-expanded="true"] { background: rgba(255,255,255,.18); }
.csg-nav-panel { position: absolute; right: 0; top: calc(100% + .5rem); background: #fff; color: #0F172A; border-radius: .75rem; box-shadow: 0 12px 32px rgba(0,0,0,.25); padding: 1rem 1.25rem; display: grid; grid-template-columns: repeat(2, minmax(9rem, 1fr)); gap: 1rem 2rem; z-index: 40; min-width: 22rem; }
.csg-nav-panel[hidden] { display: none !important; }
.csg-nav-panel h3 { font: 600 .7rem/1 Inter, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #6b7280; margin: 0 0 .5rem; }
.csg-nav-panel a { display: block; color: #0F172A; font: 500 .95rem/1.2 Inter, system-ui, sans-serif; padding: .45rem 0; text-decoration: none; }
.csg-nav-panel a:hover, .csg-nav-panel a:focus-visible { color: #15803D; text-decoration: underline; }
.csg-nav-panel .csg-nav-all { grid-column: 1 / -1; border-top: 1px solid #e5e7eb; padding-top: .6rem; font-weight: 600; color: #6D28D9; }
.csg-nav-lucky { background: none; border: 1px solid rgba(255,255,255,.35); color: #fff; border-radius: .4rem; padding: .3rem .6rem; min-height: 36px; font: 500 .85rem/1 Inter, system-ui, sans-serif; cursor: pointer; }
.csg-nav-lucky:hover, .csg-nav-lucky:focus-visible { background: rgba(255,255,255,.14); }
.csg-nav-menu-btn { display: none; align-items: center; gap: .4rem; background: none; border: 1px solid rgba(255,255,255,.35); color: #fff; border-radius: .4rem; padding: .3rem .6rem; min-height: 36px; font: 500 .85rem/1 Inter, system-ui, sans-serif; cursor: pointer; }
.csg-nav-menu-btn[aria-expanded="true"] { background: rgba(255,255,255,.18); }
@media (max-width: 639px) {
  .csg-nav .csg-nav-secondary { display: none; }
  .csg-nav-menu-btn { display: inline-flex; }
  .csg-nav-panel { position: fixed; left: .5rem; right: .5rem; top: 3.75rem; min-width: 0; grid-template-columns: 1fr 1fr; }
  .csg-nav-panel .csg-nav-pages { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .25rem 1rem; border-top: 1px solid #e5e7eb; padding-top: .6rem; }
  .csg-nav-panel .csg-nav-pages h3 { width: 100%; }
}
@media (min-width: 640px) { .csg-nav-panel .csg-nav-pages { display: none; } }

/* Start-rate fix, 5 Sep 2026. Before a game starts its canvas is blank but full
   height, so on a 390px phone the Start button sat hundreds of pixels below the
   fold: 62 of 79 games, the worst at 1469px. While the instructions are showing
   the blank canvas is capped, and the instructions lead with the game's own
   thumbnail so a player can see what they are about to play, with Start above
   the prose. Kept in normal flow: an earlier absolutely positioned version
   collapsed its container and spilled over the score bar. :has() scopes this to
   the pre-start state, so nothing changes during play, and browsers without
   :has() keep the old layout. */
body:has(#game-instructions:not(.hidden):not([hidden]):not([style*="display: none"]):not([style*="display:none"])) #game-canvas,
body:has(#game-instructions:not(.hidden):not([hidden]):not([style*="display: none"]):not([style*="display:none"])) #game-canvas-wrap { max-height: 46vh; }
/* Scoped to the pre-start state. Unscoped, this id selector beat .hidden
   (specificity 1,0,0 against 0,1,0) and kept the instructions on screen
   during play. That is rule D-021 all over again. */
body:has(#game-instructions:not(.hidden):not([hidden]):not([style*="display: none"]):not([style*="display:none"])) #game-instructions { display: flex; flex-direction: column; align-items: center; }
#game-instructions > #start-btn { order: -1; margin: 0 0 .85rem; }
#game-instructions [data-game-preview] {
    order: -2; width: min(58%, 220px); height: auto; max-height: 30vh; object-fit: contain;
    border-radius: .6rem; margin: 0 0 .7rem; display: block; box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
/* A few games already position their own instructions absolutely inside a fixed
   box, so there is no room to add anything without overflowing it. Those keep
   their existing layout and show no preview. */
#game-instructions.absolute [data-game-preview] { display: none; }
@media (min-width: 768px) { #game-instructions [data-game-preview] { width: min(40%, 260px); } }

/* Start splash, 21 Sep 2026. Matches class .csg-splash on any start box: 73 games use
   #game-instructions, six use #screen-start, #screen-instructions or #game-setup. The start box was a small picture and grey text in
   a big white space: about 60 games had a box more than 80% empty. A game opts
   in with class="csg-splash" on #game-instructions. The box turns into a dark
   panel, the game's own thumbnail is large, and Start is a big button. No
   mark-up moves: Start stays a direct child. Every rule carries :not(.hidden)
   so nothing is painted during play (rule D-021). Light text beats the pages'
   inline dark headings, which would be unreadable on the dark panel. */
.csg-splash:not(.hidden):not([hidden]) {
    background: radial-gradient(circle at 82% 12%, #6d28d9 0, #0f172a 64%); color: #e8ecf4;
    border-radius: .9rem; padding: .9rem .9rem 1.4rem; margin: .25rem; box-sizing: border-box;
}
.csg-splash :is(h2, h3, h4) { color: #fff !important; }
.csg-splash :is(p, li, span, label, td, th, dt, dd, summary, summary *):not(.btn):not(button *):not(.badge):not([style*="background"]):not(.csg-splash [style*="background"] *) { color: #d5dbe7 !important; }
.csg-splash :is(strong, b, em) { color: #86efac !important; }
.csg-splash a:not(.btn) { color: #7dd3fc !important; }
/* On a phone the picture keeps its 5 Sep size, so Start stays on the first screen. */
.csg-splash [data-game-preview] { box-shadow: 0 10px 30px rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.14); }
.csg-splash > #start-btn,
.csg-splash > button[onclick^="startGame"] {
    min-height: 56px; min-width: min(100%, 260px); font-size: 1.2rem; font-weight: 700;
    box-shadow: 0 8px 22px rgba(0,0,0,.4); border: 2px solid rgba(255,255,255,.22);
}
/* A row of start buttons (a game with two rounds) counts as the Start button. */
.csg-splash > button[onclick^="startGame"],
.csg-splash > div:has(> button[onclick^="startGame"]) { order: -1; margin-bottom: .85rem; }
/* Phone: Start comes first, then the picture, so nobody scrolls to find the button. */
@media (max-width: 767px) {
    .csg-splash > #start-btn,
    .csg-splash > button[onclick^="startGame"],
    .csg-splash > div:has(> button[onclick^="startGame"]) { order: -3; width: 100%; }
}
@media (min-width: 768px) {
    /* Some start boxes cap their own width (max-w-md, max-w-lg); the panel wants the room. */
    .csg-splash:not(.hidden):not([hidden]) { padding: 2.25rem 2.5rem; margin: 1rem; max-width: none; width: calc(100% - 2rem); }
    /* Two columns when the game has a picture: picture left, title, Start and text right. */
    /* Two ids in the selector on purpose: the 5 Sep rule above ("display: flex" on
       #game-instructions) carries two ids, and this must outrank it. */
    body:has(:is(#game-instructions, #screen-start, #screen-instructions, #game-setup).csg-splash:not(.hidden):not([hidden]):not([style*="display: none"]):not([style*="display:none"])) :is(#game-instructions, #screen-start, #screen-instructions, #game-setup).csg-splash:has(> [data-game-preview]) {
        display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); column-gap: 2.5rem; align-items: start; justify-items: start; text-align: left;
    }
    .csg-splash:has(> [data-game-preview]) > * { grid-column: 2; margin-left: 0 !important; margin-right: 0 !important; }
    .csg-splash:has(> [data-game-preview]) > [data-game-preview] { grid-column: 1; grid-row: 1 / span 30; align-self: start; justify-self: center; width: 100%; max-width: 460px; max-height: none; margin: 0; }
    .csg-splash:has(> [data-game-preview]) > :is(h2, h3):first-of-type { order: -2; }
}

/* A canvas hidden before play must actually be hidden. Nineteen games style
   #game-canvas by id ("display: block"), and an id selector beats the .hidden
   class, so the empty canvas kept its box and reserved unnecessary space
   of white space above its own share bar. Same defect as the Next buttons in
   D-021, and the reason the pre-start dead space survived the start-rate work. */
canvas.hidden,
#game-canvas.hidden { display: none !important; }

/* Let a game use a whiteboard.
   Measured on 16 September 2026: every game sits in a max-w-4xl wrapper, so on
   a 1920px classroom board the play area was exactly 896px, under half the
   width, and the whiteboard page had to tell teachers to zoom. Only the block
   that actually holds #game-container grows; prose keeps its own reading width,
   because a 1400px paragraph is worse than a narrow one. A browser without
   :has() support simply keeps the old width. */
@media (min-width: 1280px) {
  .max-w-4xl:has(> #game-container) { max-width: 1280px; }
}
@media (min-width: 1600px) {
  .max-w-4xl:has(> #game-container) { max-width: 1440px; }
}

/* Put the power back on the button.
   A player reported "I can not see the power" on Derivative Dash, 15 September
   2026. .btn is display:inline-flex, so a <sup> written straight inside a button
   becomes a flex item, gets blockified, and vertical-align stops applying: the
   exponent rendered at zero height and vanished. The answer 18x⁶ read as 18x,
   which makes the game unanswerable. Measured on 16 September: 8 powers gone on
   Derivative Dash, 3 on Indices & Powers.
   Inline-block puts the sup back into normal inline flow, where vertical-align
   works. The button keeps its own padding, centring and minimum height, so it
   looks the same. Any future button with a power in it is covered too. */
.btn:has(> sup) {
  display: inline-block;
  text-align: center;
  line-height: 1.75rem;
}

/* A rank earned inside a run (assets/rank-progress.js). The bar is the colour
   of the rank; the pulse marks the moment it is reached. */
.rank-bar {
  display: inline-block; width: 2.6rem; height: .7rem; border-radius: .15rem;
  border: 1px solid rgba(0,0,0,.35); vertical-align: -1px; margin-right: .35rem;
  transition: background-color .35s ease-out; position: relative;
}
.rank-bar::after {
  content: ""; position: absolute; left: 50%; top: -2px; width: .45rem;
  height: calc(100% + 4px); transform: translateX(-50%);
  background: rgba(0,0,0,.28); border-radius: .1rem;
}
@keyframes rank-earned {
  0% { transform: scale(1); }
  40% { transform: scale(1.35) rotate(-4deg); }
  100% { transform: scale(1); }
}
.rank-earned { animation: rank-earned .55s ease-out; }

/* Equation Rearranger page geometry */
.eqr-game-container { min-height: 72rem; }
.eqr-game-header {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .65rem 1.25rem; min-height: 3.5rem; margin: .25rem auto .75rem;
  color: var(--brand-dark); font: 600 .95rem/1.25 Inter, sans-serif;
}
.eqr-game-header > div { display: inline-flex; gap: .35rem; align-items: baseline; }
#game-instructions:not(.hidden) { display: flex; min-height: 29rem; flex-direction: column; align-items: center; }
#game-instructions > img { display: block; width: min(320px, 100%); height: auto; margin: 0 auto .75rem; }
#game-instructions > #start-btn { min-height: 44px; margin: .35rem auto .55rem; }
#game-instructions > p { margin: .15rem auto; text-align: center; }
.eqr-mode-controls { display: flex; width: 100%; justify-content: center; margin-top: .35rem; }
.eqr-mode-label {
  display: inline-flex; min-height: 44px; gap: .6rem; align-items: center;
  padding: .45rem .8rem; border: 1px solid rgba(255,255,255,.35); border-radius: .6rem;
}
.eqr-mode-label input { width: 1.15rem; height: 1.15rem; accent-color: var(--brand-primary-on-dark); }
.eqr-screen { min-height: 56rem; padding: .5rem; }
.eqr-progress-row { display: flex; min-height: 2.75rem; justify-content: space-between; align-items: center; gap: .5rem; }
.eqr-progress-row p { margin: 0; font-weight: 600; }
.eqr-question-panel {
  min-height: 34rem; padding: 1rem; border: 1px solid #d7dbe3; border-radius: .9rem;
  background: #fff; box-shadow: 0 6px 22px rgba(15,23,42,.08);
}
.eqr-question-panel h2 { margin: 0 0 .6rem; color: var(--brand-secondary); font-size: 1.25rem; }
.eqr-question-panel p { margin: .3rem 0; }
.eqr-target { min-height: 3rem; font-size: 1.15rem; font-weight: 700; color: var(--brand-accent); }
.eqr-equation { min-height: 3.5rem; display: grid; place-items: center; margin: .5rem 0 !important; color: var(--brand-dark); font: 700 clamp(1.45rem,5vw,2rem)/1.25 Inter,sans-serif; text-align: center; }
.eqr-givens { min-height: 5rem; margin: .5rem 0; padding: .6rem .75rem; border-radius: .5rem; background: #f1f5f9; }
.eqr-givens[hidden], #choose-label[hidden], #calculate-prompt[hidden] { display: block !important; visibility: hidden; }
#choose-label, #calculate-prompt { min-height: 2rem; }
.eqr-given-values { display: flex; flex-wrap: wrap; gap: .25rem .85rem; margin-top: .3rem; font-variant-numeric: tabular-nums; }
.eqr-answer-grid {
  display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .65rem;
  min-height: 8rem; margin-top: .75rem;
}
.eqr-answer-option {
  display: flex; min-width: 0; min-height: 3.5rem; align-items: center; gap: .55rem;
  padding: .6rem .7rem; border: 2px solid #cbd5e1; border-radius: .65rem;
  background: #fff; color: var(--brand-dark); font: 600 .95rem/1.3 Inter,sans-serif;
  text-align: left; overflow-wrap: anywhere; cursor: pointer;
}
.eqr-answer-option:hover:not(:disabled), .eqr-answer-option:focus-visible { border-color: var(--brand-secondary); outline: 2px solid transparent; }
.eqr-answer-option:disabled { cursor: default; }
.eqr-key-hint {
  display: inline-grid; flex: 0 0 1.6rem; width: 1.6rem; height: 1.6rem;
  place-items: center; border-radius: 50%; background: #e2e8f0; color: #334155;
}
.eqr-correct { border-color: var(--brand-primary); background: #f0fdf4; }
.eqr-incorrect { border-color: #b45309; background: #fffbeb; }
.eqr-feedback { min-height: 3.75rem; padding: .75rem 0; color: var(--brand-dark); font-weight: 600; }
.eqr-working { min-height: 16rem; padding: .75rem 1rem; border-left: 4px solid var(--brand-accent); border-radius: .35rem; background: #f1f5f9; overflow-wrap: anywhere; }
.eqr-working[hidden] { display: block !important; visibility: hidden; }
.eqr-working h3, .eqr-working p { margin: .3rem 0; }
.eqr-next { display: flex; min-width: 11rem; min-height: 3.5rem; margin: .75rem auto 0; justify-content: center; }
.eqr-game-over { min-height: 28rem; padding: 2rem 1rem; text-align: center; }
.eqr-game-over h2 { color: var(--brand-secondary); }
.eqr-game-over p { margin: .4rem 0; }
.eqr-similar-grid { min-height: 1500px; }
.eqr-share-section .btn { min-height: 44px; }
#share-status { display: block; min-height: 1.5rem; text-align: center; }
@media (min-width: 640px) {
  .eqr-game-container { min-height: 64rem; }
  .eqr-screen { padding: 1rem; }
  .eqr-question-panel { min-height: 34rem; padding: 1.5rem; }
  .eqr-answer-grid { gap: .8rem; }
  .eqr-similar-grid { min-height: 670px; }
}
@media (max-width: 380px) {
  .eqr-answer-grid { grid-template-columns: 1fr; }
  .eqr-answer-option { min-height: 3.25rem; }
  .eqr-screen { padding-inline: 0; }
}

/* Periodic Table Challenge */
.ptc-board-choice { display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.5rem;margin:.25rem auto .5rem; }
.ptc-board-choice label { font-weight:600; }
.ptc-board-choice select { min-height:44px;max-width:100%;padding:.35rem .7rem;border:1px solid #cbd5e1;border-radius:.45rem;background:#fff;color:var(--brand-dark);font:inherit; }
.ptc-progress { justify-content:space-between; }
.ptc-progress #question-progress, .ptc-progress #level-indicator { flex:1 1 auto; }
.ptc-progress #level-indicator { text-align:center;color:var(--brand-secondary); }
.ptc-progress #speed-clock { text-align:right; }
.ptc-question-panel { min-height:39rem; }
.ptc-question-panel > h2 { min-height:3rem; }
.ptc-response-area { display:grid;min-height:29rem; }
.ptc-grid-area, .ptc-answer-grid { grid-area:1 / 1;align-self:start; }
.ptc-grid-wrap { width:100%;max-width:100%;min-height:24rem;overflow-x:auto;border:1px solid #dbe2ea;border-radius:.6rem;background:#fff;padding:.35rem; }
.ptc-grid-wrap:focus-visible { outline:3px solid var(--brand-secondary);outline-offset:2px; }
.ptc-table { width:100%;min-width:900px;table-layout:fixed;border-collapse:separate;border-spacing:3px; }
.ptc-table th { height:1.3rem;padding:0;text-align:center;color:var(--brand-dark);font-size:.75rem; }
.ptc-table td { padding:0;vertical-align:top; }
.ptc-cell { display:block;width:100%;min-height:48px;border:1px solid #cbd5e1;border-radius:.35rem;background:#f1f5f9;cursor:pointer; }
.ptc-cell:focus-visible { outline:3px solid var(--brand-secondary);outline-offset:1px; }
.ptc-cell:disabled { visibility:hidden;cursor:default; }
.ptc-cell.ptc-correct { border:3px solid var(--brand-primary);background:#f0fdf4; }
.ptc-cell.ptc-incorrect { border:3px solid #b45309;background:#fffbeb; }
.ptc-answer-grid { min-height:24rem;align-content:start;grid-template-columns:repeat(2,minmax(0,1fr)); }
.ptc-answer-grid.ptc-answer-inactive { visibility:hidden; }
.ptc-grid-area[hidden], .ptc-working[hidden] { display:none; }
.ptc-feedback { min-height:3.75rem; }
.ptc-working { min-height:9rem; }
.ptc-working p { margin:.3rem 0; }
@media (max-width:639px) {
  .ptc-answer-grid { grid-template-columns:1fr; }
  .ptc-progress { gap:.25rem; }
  .ptc-progress #level-indicator { text-align:left; }
}

/* Wave Lab reserves the graph and question area before the game starts. */
.wave-game-container { min-height: 82rem; }
.wave-game-header {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .65rem 1.25rem; min-height: 3.5rem; margin: .25rem auto .75rem;
  color: var(--brand-dark); font: 600 .95rem/1.25 Inter, sans-serif;
}
.wave-game-header > div { display: inline-flex; gap: .35rem; align-items: baseline; }
.wave-mode-controls { display: flex; width: 100%; justify-content: center; margin-top: .35rem; }
.wave-mode-label {
  display: inline-flex; min-height: 44px; gap: .6rem; align-items: center;
  padding: .45rem .8rem; border: 1px solid rgba(255,255,255,.35); border-radius: .6rem;
}
.wave-mode-label input { width: 1.15rem; height: 1.15rem; accent-color: var(--brand-primary-on-dark); }
.wave-screen { min-height: 68rem; padding: .5rem; }
.wave-lab-layout { display: grid; grid-template-columns: minmax(0,1fr); gap: 1rem; min-height: 66rem; }
.wave-panel, .wave-question-panel {
  min-width: 0; min-height: 31rem; padding: 1rem;
  border: 1px solid #d7dbe3; border-radius: .9rem; background: #fff;
  box-shadow: 0 6px 22px rgba(15,23,42,.08);
}
.wave-panel h2, .wave-question-panel h2 { margin: 0 0 .6rem; color: var(--brand-secondary); font-size: 1.25rem; }
.wave-panel > p, .wave-question-panel > p { margin: .3rem 0 .65rem; }
#wave-visual { display: block; width: 100%; height: auto; aspect-ratio: 640 / 300; overflow: visible; }
#wave-grid text { fill: #334155; font: 12px Inter, sans-serif; }
#wave-x-label, #wave-y-label { fill: #0F172A; font: 600 12px Inter, sans-serif; }
.wave-grid-line { stroke: #e2e8f0; stroke-width: 1; }
.wave-grid-half { stroke: #cbd5e1; stroke-width: 1; }
.wave-grid-major { stroke: #94a3b8; stroke-width: 1.2; }
.wave-controls { display: grid; gap: .25rem .65rem; grid-template-columns: minmax(8rem,1fr) auto; align-items: center; margin-top: .4rem; }
.wave-slider-label { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; min-height: 2.25rem; font-weight: 600; }
.wave-slider-label output { color: var(--brand-accent); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wave-controls input[type="range"] { width: 100%; min-height: 44px; accent-color: var(--brand-secondary); grid-column: 1 / -1; }
.wave-progress-row { display: flex; min-height: 2.75rem; justify-content: space-between; align-items: center; gap: .5rem; }
.wave-progress-row p { margin: 0; font-weight: 600; }
.wave-question-panel { display: flex; flex-direction: column; }
.wave-question-panel > h2 { min-height: 2rem; }
#question-prompt { min-height: 3rem; font-size: 1.08rem; font-weight: 600; }
#question-detail { min-height: 2.5rem; color: var(--brand-accent); font-size: 1.1rem; font-weight: 700; }
.wave-givens { min-height: 5rem; margin: .4rem 0; padding: .5rem .75rem; border-radius: .5rem; background: #f1f5f9; }
.wave-givens p { margin: .15rem 0; font-variant-numeric: tabular-nums; }
.wave-answer-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .65rem; min-height: 8rem; margin-top: .35rem; }
.wave-answer-option {
  display: flex; min-width: 0; min-height: 3.5rem; align-items: center; gap: .55rem;
  padding: .6rem .7rem; border: 2px solid #cbd5e1; border-radius: .65rem;
  background: #fff; color: var(--brand-dark); font: 600 .95rem/1.3 Inter,sans-serif;
  text-align: left; overflow-wrap: anywhere; cursor: pointer;
}
.wave-answer-option:hover:not(:disabled), .wave-answer-option:focus-visible { border-color: var(--brand-secondary); outline: 2px solid transparent; }
.wave-answer-option:disabled { cursor: default; }
.wave-key-hint { display: inline-grid; flex: 0 0 1.6rem; width: 1.6rem; height: 1.6rem; place-items: center; border-radius: 50%; background: #e2e8f0; color: #334155; }
.wave-correct { border-color: var(--brand-primary); background: #f0fdf4; }
.wave-incorrect { border-color: #b45309; background: #fffbeb; }
.wave-feedback { min-height: 3.25rem; padding: .6rem 0; color: var(--brand-dark); font-weight: 600; }
.wave-working { min-height: 5rem; margin-top: .3rem; padding: .6rem .8rem; border-left: 4px solid var(--brand-accent); border-radius: .35rem; background: #f1f5f9; overflow-wrap: anywhere; }
.wave-working[hidden] { display: block !important; visibility: hidden; }
.wave-working h3, .wave-working p { margin: .2rem 0; }
.wave-next { display: flex; min-width: 11rem; min-height: 3.5rem; margin: .65rem auto 0; justify-content: center; }
.wave-game-over { min-height: 28rem; padding: 2rem 1rem; text-align: center; }
.wave-game-over h2 { color: var(--brand-secondary); }
.wave-game-over p { margin: .4rem 0; }
.wave-similar-grid { min-height: 1500px; }
.wave-share-section .btn { min-height: 44px; }
@media (min-width: 800px) {
  .wave-game-container { min-height: 64rem; }
  .wave-screen { min-height: 46rem; padding: 1rem; }
  .wave-lab-layout { grid-template-columns: minmax(0,1.02fr) minmax(0,.98fr); min-height: 44rem; }
  .wave-panel, .wave-question-panel { min-height: 42rem; padding: 1.25rem; }
  .wave-answer-grid { gap: .8rem; }
  .wave-similar-grid { min-height: 670px; }
}
@media (max-width: 420px) {
  .wave-answer-grid { grid-template-columns: 1fr; }
  .wave-answer-option { min-height: 3.25rem; }
  .wave-screen { padding-inline: 0; }
  .wave-panel, .wave-question-panel { padding: .75rem; }
}

/* Game hero badges wrap on phones (a long curriculum tag scrolled the page sideways, 23 Sep 2026). */
.csg-game-badge { white-space: normal; max-width: 100%; height: auto; line-height: 1.3; padding-top: .2rem; padding-bottom: .2rem; }

/* Homepage, copied as a compact full-width section rhythm from CMG. */
.csg-home-hero{background:linear-gradient(135deg,var(--brand-secondary),var(--brand-dark));color:#fff;padding:3rem 1rem;text-align:center}
.csg-home-hero-inner,.csg-home-inner{max-width:1200px;margin:0 auto}
.csg-home-hero h1{max-width:56rem;margin:0 auto;font:700 clamp(2rem,4vw,3.25rem)/1.15 Poppins,sans-serif}
.csg-home-lede{max-width:52rem;margin:1rem auto 1.3rem;color:#e5e7eb;font-size:1.1rem;line-height:1.55}
.csg-home-trust,.csg-home-counts,.csg-home-start-buttons,.csg-home-ctas{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:.5rem 1rem}
.csg-home-trust{color:#e5e7eb;font-size:.88rem}.csg-home-trust span+span:before{content:'·';margin-right:1rem}
.csg-home-counts{margin:.6rem 0 1.2rem}.csg-home-counts span{min-width:6.5rem;padding:.35rem .8rem;border-radius:999px;background:rgba(255,255,255,.13);font-weight:600;font-size:.85rem}.csg-home-counts [aria-hidden=true]{visibility:hidden}
.csg-home-search{max-width:36rem;margin:1.2rem auto}.csg-home-search input{box-sizing:border-box;width:100%;min-height:48px;padding:.7rem 1rem;border:2px solid rgba(255,255,255,.5);border-radius:.65rem;background:#fff;color:#0f172a;font-size:1rem}
.csg-home-start-label{margin:.7rem 0 .4rem;color:#e5e7eb;font-size:.86rem}.csg-home-start-buttons a{display:inline-flex;align-items:center;min-height:44px;padding:.4rem 1rem;border:1px solid rgba(255,255,255,.5);border-radius:999px;background:rgba(255,255,255,.12);color:#fff;text-decoration:none;font-weight:600}.csg-home-ctas{margin-top:1.2rem}.csg-home-ctas>*{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.6rem 1.2rem;border:1px solid #fff;border-radius:.55rem;background:var(--brand-primary);color:#fff;font-weight:700;text-decoration:none;cursor:pointer}.csg-home-ctas a{background:transparent}
.csg-home-section{padding:3.5rem 1rem;background:#fff}.csg-home-section:nth-of-type(even){background:#f7faf8}.csg-home-section h2{margin:0 0 1.3rem;color:var(--brand-secondary);font:700 clamp(1.5rem,2.4vw,2rem)/1.25 Poppins,sans-serif}.csg-home-section h3{margin:0 0 .5rem;color:var(--brand-secondary);font:700 1.1rem/1.3 Poppins,sans-serif}.csg-home-section p{line-height:1.55}.csg-home-intro{margin:-.5rem 0 1.4rem;color:#475569}
.csg-home-grid{display:grid;grid-template-columns:1fr;gap:1.2rem}@media(min-width:640px){.csg-home-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(min-width:1024px){.csg-home-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.csg-home-why{grid-template-columns:repeat(4,minmax(0,1fr))}}
.csg-home-card,.csg-home-info{min-width:0;border:1px solid #dbe2ea;border-radius:.85rem;background:#fff;box-shadow:0 3px 12px rgb(15 23 42 / .06);overflow:hidden}.csg-home-card-body,.csg-home-info{padding:1.2rem}.csg-home-card-body p,.csg-home-info p{margin:.4rem 0 1rem;color:#475569}.csg-home-art{display:block;position:relative;aspect-ratio:16/9;overflow:hidden}.csg-home-art img{display:block;width:100%;height:100%;object-fit:cover}.csg-home-play{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.55rem 1rem;border-radius:.5rem;background:var(--brand-primary);color:#fff!important;font-weight:700;text-decoration:none!important}.csg-home-tags{display:flex;gap:.4rem;margin:.8rem 0}.csg-home-tags span{padding:.2rem .5rem;border-radius:999px;background:#e8edf2;color:#334155;font-size:.78rem}.csg-home-see-all{display:inline-block;margin-top:1.2rem;color:var(--brand-primary);font-weight:700}.csg-home-newest{display:grid;grid-template-columns:1fr;gap:1.5rem;align-items:center;padding:1.4rem;border-radius:1rem;background:#eef9f1}.csg-home-newest img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:.7rem}.csg-home-newest h2{margin:.4rem 0}.csg-home-eyebrow{color:var(--brand-primary);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.78rem}@media(min-width:700px){.csg-home-newest{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}}
.csg-home-info{display:block;color:inherit;text-decoration:none}.csg-home-info svg{width:36px;height:36px;margin-bottom:.7rem;color:var(--brand-primary)}.csg-home-chips{display:flex;flex-wrap:wrap;gap:.6rem}.csg-home-chips a{display:inline-flex;align-items:center;min-height:44px;padding:.4rem .9rem;border-radius:999px;background:#e8f6ec;color:var(--brand-primary);font-weight:700;text-decoration:none}.csg-home-teachers-line{margin:1.5rem 0 0}.csg-home-teachers-line a,.csg-home-woven a,.csg-home-privacy a{color:var(--brand-primary);font-weight:600;text-decoration:underline}.csg-home-woven{max-width:56rem;font-size:1.07rem}.csg-home-privacy{margin:1.5rem 0 0}.csg-home-teacher-band{background:#e8f6ec!important}.csg-home-teacher-band .csg-home-inner{display:flex;flex-direction:column;align-items:flex-start;gap:.4rem}.csg-home-teacher-band h2,.csg-home-teacher-band p{margin:0}.csg-home-teacher-band .csg-home-play{margin-top:.8rem}.csg-home-recent[hidden]{display:none}
.csg-footer-directory{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:1.5rem;padding:1rem 0 2rem;border-bottom:1px solid rgba(255,255,255,.2);margin-bottom:1.5rem}.csg-footer-directory h3{margin:0 0 .6rem;color:#fff;font:700 1rem Poppins,sans-serif}.csg-footer-directory a{display:block;margin:.3rem 0;color:#d1d5db;font-size:.82rem;text-decoration:none}.csg-footer-directory a:hover{text-decoration:underline}@media(min-width:640px){.csg-footer-directory{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(min-width:1024px){.csg-footer-directory{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:400px){.csg-home-hero{padding:2rem .75rem}.csg-home-trust{gap:.3rem .6rem}.csg-home-trust span+span:before{margin-right:.6rem}.csg-home-section{padding:2.5rem .75rem}}